/* Arrebol. A black frame around full-screen photography. The brand is black and white;
   the products and their photos bring the color. The Step (the stair from the mark) carves the corners.
   Tokens follow the Arrebol design system (tokens.json v4). */
:root {
  color-scheme: dark;
  --black: #000000;
  --white: #ffffff;
  --ink: #f5f5f5;
  --muted: #9a9a9a;
  --on-photo: #ffffffa6;
  --rule: #222222;
  --sans: "Google Sans Flex", "Google Sans", -apple-system, system-ui, sans-serif;
  --mono: "Google Sans Code", ui-monospace, Menlo, monospace;
  --u: clamp(44px, 4.4vw, 68px);      /* one pixel of the Step */
  --pad: clamp(18px, 2.2vw, 32px);
  --space-section: clamp(96px, 12vw, 180px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --hold: 7000ms;
  --fade: 1200ms;
  --drift: 9000ms;
}
* { box-sizing: border-box; }
html { background: var(--black); }
body { margin: 0; background: var(--black); color: var(--ink); font: 400 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the Step ---------- */
.step { position: absolute; display: block; pointer-events: none; }
.step path { fill: var(--black); }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--black); touch-action: pan-y; }
.hero__media { position: absolute; inset: 0; will-change: transform; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade) ease; }
.slide.is-on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform var(--drift) cubic-bezier(.25, .1, .25, 1); }
.slide.is-on img { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #000000f2 0%, #000000c0 18%, #00000040 40%, #00000000 58%), linear-gradient(0deg, #000000a0 0%, #00000000 30%); }
.hero__veil { position: absolute; inset: 0; z-index: 2; background: var(--black); opacity: 0; pointer-events: none; }

/* Opening title card: black first, then the frame, then the picture. */
.hero.is-dark .slide.is-on { opacity: 0; }
.hero.is-dark .slide.is-on img { transform: scale(1.06); }
.hero.is-dark .cap.is-on > * { animation: none; opacity: 0; }
.hero.is-opening .slide.is-on { transition-duration: 1800ms; }
.intro { transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.hero.is-intro .intro { opacity: 0; transform: translateY(8px); }

.brand { position: absolute; z-index: 3; left: var(--pad); top: var(--pad); display: grid; gap: clamp(18px, 2vw, 28px); }
.brand__logo { width: clamp(150px, 13vw, 200px); height: auto; }
.lockup { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px); }
.lockup__rule { width: 1px; align-self: stretch; background: #ffffff8c; margin-block: -6px; }
.lockup__tag { font-size: clamp(20px, 2vw, 30px); letter-spacing: -.015em; line-height: 1; white-space: nowrap; color: var(--white); }
.products { list-style: none; display: grid; gap: 2px; font-size: clamp(20px, 2vw, 30px); line-height: 1.25; letter-spacing: -.015em; }
.products button { display: flex; align-items: center; gap: 10px; text-align: left; color: var(--white); opacity: .72; transition: opacity .4s; }
.products button:hover, .products button[aria-current="true"] { opacity: 1; }
.px { width: .42em; height: .42em; border-radius: 26.6%; background: var(--white); flex: none; transform: scale(0); transition: transform .45s var(--ease), margin .45s var(--ease); margin-left: calc(-.42em - 10px); }
.products button[aria-current="true"] .px { transform: scale(1); margin-left: 0; }

.tab { position: absolute; z-index: 3; right: 0; top: 0; }
.tab__label { position: absolute; z-index: 1; top: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; font-size: clamp(18px, 1.8vw, 28px); letter-spacing: -.01em; white-space: nowrap; color: var(--white); transition: opacity .3s; }
.tab__label:hover { opacity: .75; }

.caption { position: absolute; z-index: 3; left: var(--pad); bottom: calc(var(--pad) + 8px + env(safe-area-inset-bottom, 0px)); width: min(460px, calc(100% - 2 * var(--pad))); display: grid; }
.cap { display: none; gap: 18px; }
.cap.is-on { display: grid; }
.cap.is-on > * { animation: rise .9s var(--ease) both; }
.cap.is-on > :nth-child(2) { animation-delay: 90ms; }
.cap.is-on > :nth-child(3) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cap__lockup { height: clamp(52px, 5.6vw, 88px); width: auto; max-width: 100%; }
.cap p { font-size: 17px; line-height: 1.5; color: var(--on-photo); max-width: 34ch; }
.cap p b { color: var(--white); font-weight: 600; }
.more { font-size: 17px; display: inline-flex; align-items: center; gap: 6px; width: max-content; color: var(--white); }
.more::after { content: "\203A"; font-size: 20px; line-height: 1; transition: transform .3s var(--ease); }
a:hover > .more::after, .more:hover::after { transform: translateX(4px); }

.counter { position: absolute; z-index: 3; right: 0; bottom: 0; }
.counter__ui { position: absolute; transform: translateY(50%); display: flex; align-items: center; gap: 18px; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dots { display: flex; gap: 8px; align-items: center; }
.dots--inline { display: none; }
.dots button { position: relative; width: 10px; height: 10px; border-radius: 2.66px; background: #ffffff4d; overflow: hidden; transition: width .6s var(--ease), background .3s; }
.dots button::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.dots button[aria-current="true"] { width: 30px; }
.dots button[aria-current="true"]::after { animation: fill var(--hold) linear forwards; }
.hero.is-paused .dots button::after, .hero.is-dark .dots button::after { animation-play-state: paused; }
.hero.is-static .dots button[aria-current="true"]::after { animation: none; transform: none; }
@keyframes fill { to { transform: scaleX(1); } }

/* ---------- sections ---------- */
.wrap { padding-inline: var(--pad); }
.eyebrow { font: 400 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 26.6%; background: var(--white); }
.headline { font-size: clamp(40px, 5.6vw, 88px); line-height: .98; letter-spacing: -.035em; font-weight: 400; margin-top: 24px; }

.about { position: relative; padding-block: var(--space-section); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.statement { font-size: clamp(56px, 8.4vw, 132px); line-height: .95; letter-spacing: -.04em; font-weight: 400; margin-top: 24px; }
.statement .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.statement .line > span { display: block; transform: translateY(105%); transition: transform 1.2s var(--ease); }
.statement .line:nth-child(2) > span { transition-delay: 120ms; }
.statement.is-in .line > span { transform: none; }
.about p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--muted); max-width: 40ch; }
.about p b { color: var(--white); font-weight: 500; }

.work__head { padding-bottom: clamp(48px, 6vw, 88px); }
.cards { display: grid; gap: 4px; }
.card { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 7.2; background: #0e0e0e; color: var(--white); }
.card__media { position: absolute; inset: -6% 0; will-change: transform; }
.card img.photo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease), opacity 1.2s ease; opacity: 0; }
.card.is-in img.photo { opacity: 1; transform: scale(1); }
.card.is-in:hover img.photo { transform: scale(1.03); }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000000c8 0%, #00000055 35%, #00000000 60%); pointer-events: none; }
.card__body { position: absolute; z-index: 2; left: var(--pad); bottom: var(--pad); display: grid; gap: 14px; max-width: 420px; }
.card__body > * { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.card.is-in .card__body > * { opacity: 1; transform: none; }
.card.is-in .card__body > :nth-child(1) { transition-delay: 250ms; }
.card.is-in .card__body > :nth-child(2) { transition-delay: 340ms; }
.card.is-in .card__body > :nth-child(3) { transition-delay: 430ms; }
.card__body p { color: #ffffffb0; }
.card__logo { height: clamp(40px, 4vw, 60px); width: auto; }
.card__logo--studio { height: clamp(44px, 4.6vw, 72px); }
.card .step { z-index: 2; opacity: 0; transition: opacity .9s ease 500ms; }
.card__tag { position: absolute; z-index: 3; transform: translateY(-50%); font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .9s ease 650ms; }
.card.is-in .step, .card.is-in .card__tag { opacity: 1; }

.principles { padding-block: var(--space-section); }
.principles .headline { max-width: 16ch; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(56px, 7vw, 96px); }
.col { border-top: 1px solid var(--rule); padding-top: 22px; display: grid; gap: 12px; align-content: start; }
.col h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.col p { color: var(--muted); }
.col .n { font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.footer { position: relative; overflow: hidden; background: var(--white); color: var(--black); padding: clamp(48px, 6vw, 88px) var(--pad) var(--pad); }
.footer :focus-visible { outline-color: var(--black); }
.footer__top { padding-right: calc(var(--u) * 3.3); }
.footer__sign { font-size: clamp(28px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -.03em; max-width: 18ch; }
.contact { display: grid; gap: 12px; margin-top: clamp(40px, 5vw, 72px); }
.contact__label { display: flex; align-items: center; gap: 10px; font: 400 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #555; }
.contact__label::before { content: ""; width: 8px; height: 8px; border-radius: 26.6%; background: var(--black); }
.contact__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; }
.contact__mail { font-size: clamp(24px, 2.6vw, 40px); letter-spacing: -.02em; line-height: 1.1; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); user-select: all; overflow-wrap: anywhere; }
.contact__mail:hover { background-size: 100% 1px; }
.contact__copy { font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #555; padding: 8px 0; transition: color .25s; }
.contact__copy:hover { color: var(--black); }
.footer__big { margin-top: clamp(64px, 10vw, 160px); width: 100%; }
.footer__big svg { width: 100%; height: auto; display: block; }
.footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #555; }

@media (max-width: 820px) {
  .slide::after { background: linear-gradient(0deg, #000000e8 0%, #00000080 45%, #00000000 70%), linear-gradient(180deg, #000000b0 0%, #00000000 30%); }
  .about { grid-template-columns: minmax(0, 1fr); }
  .card { aspect-ratio: 4 / 5; }
  .card::after { background: linear-gradient(0deg, #000000d0 0%, #00000000 60%); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  /* Phones: the caption sits on the bottom edge and carries its own dots; the counter Step steps aside. */
  .counter { display: none; }
  .dots--inline { display: flex; margin-top: 22px; }
  .dots--inline button { height: 8px; width: 8px; }
  .dots--inline button[aria-current="true"] { width: 28px; }
  .cap { gap: 14px; }
  .cap__lockup { height: 52px; }
  .footer__top { padding-right: 0; padding-top: calc(var(--u) * 3); }
}
@media (max-width: 360px) {
  .brand__logo { width: 124px; }
  .products { font-size: 18px; }
}
@media (max-width: 720px) {
  .lockup__rule, .lockup__tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .slide img, .card img.photo, .px, .intro, [data-reveal], .statement .line > span,
  .card__body > *, .card .step, .card__tag, .dots button { transition: none !important; }
  .slide img, .card img.photo { transform: none !important; }
  .cap.is-on > * { animation: none; }
  .hero.is-intro .intro, .hero.is-dark .slide.is-on, .hero.is-dark .cap.is-on > * { opacity: 1; transform: none; }
  [data-reveal], .card__body > *, .card img.photo, .card .step, .card__tag { opacity: 1; transform: none; }
  .statement .line > span { transform: none; }
  .dots button::after { animation: none !important; }
}