/* =========================================================
   NØRMA — pixel-matched to Figma
   Desktop canvas 1920x1080 · Mobile canvas 390
   Scale system: 1rem = 16px at the design width, so every
   value below is the literal Figma px / 16.
   ========================================================= */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: calc(100vw / 120);      /* 16px @ 1920 */
  -webkit-text-size-adjust: 100%;
  background: var(--ink);            /* keeps notch/overscroll dark on iOS */
  overflow-anchor: none;             /* browser scroll-anchoring was yanking the page back to a fixed point */
}

:root {
  --cream:#ece8df; --ink:#0d0e0f; --ink-2:#0e0e0d; --white:#fff;
  --red:#c00000; --red-2:#d42013; --stone:#e3e0da;
  --f-display:"Archivo Black",Helvetica,Arial,sans-serif;
  --f-body:"Inter",Helvetica,Arial,sans-serif;
  --pad: 2.625rem;                   /* 42 */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,0,.35,1);
}

body { font-family: var(--f-body); background: var(--ink); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; overflow-anchor: none; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.ic { width: 1em; height: 1em; fill: none; }
.hr { display: block; width: 100%; height: .0625rem; background: currentColor; flex: none; }
.hr--w { background: rgba(227,224,218,.7); }
.hr--ink { background: rgba(14,14,13,.75); }

/* ---------- Reveal (only when JS is alive) ---------- */
html.js .reveal { opacity: 0; transform: translateY(1.625rem); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal-line { display: block; overflow: hidden; }
html.js .reveal-line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
html.js .hero.in .reveal-line:nth-child(1) > span { transition-delay: .05s; }
html.js .hero.in .reveal-line:nth-child(2) > span { transition-delay: .16s; }
html.js .hero.in .reveal-line:nth-child(3) > span { transition-delay: .27s; }
html.js .hero.in .reveal-line > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .process__steps { animation: none !important; }
}

/* =========================================================
   NAV  (logo 25.7 · links 20 · gap 64)
   ========================================================= */
.nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; width: 100%; flex: 0 0 auto; }
.nav__logo { font-family: var(--f-display); font-size: 1.60625rem; line-height: 1; transition: opacity .3s var(--ease); }
.nav__logo:hover { opacity: .6; }
.nav__links { display: flex; align-items: center; gap: 4rem; }
.nav__links a { position: relative; font-size: 1.25rem; line-height: 1; white-space: nowrap; padding-bottom: .25rem; }
.nav__links a::after { content:""; position: absolute; left: 0; bottom: 0; width: 100%; height: .09375rem; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--red); }
.nav__links a.is-active::after { background: var(--red); transform: scaleX(1); }
.nav--hero, .nav--light { color: var(--white); }
.nav--dark, .nav--ink { color: var(--ink); }
.nav--hero { justify-content: flex-start; }
.nav--hero .nav__links { gap: 3rem; }
.nav__wire { flex: 1; height: .0625rem; background: rgba(255,255,255,.55); margin: 0 1.5rem; }
.nav__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--white); flex: none; }
.nav--case { justify-content: flex-start; }
.case__back { margin: 0 auto; }
.nav__burger { display: none; width: 1.5rem; height: 1.5rem; font-size: 1.5rem; place-items: center; }

/* =========================================================
   HERO — 1080 tall
   ========================================================= */
.hero { position: relative; height: 67.5rem; display: flex; flex-direction: column; padding: var(--pad); color: var(--white); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; display: block; z-index: 0; pointer-events: none; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,6,7,.45) 0%, rgba(6,6,7,.05) 22%, rgba(6,6,7,.10) 55%, rgba(6,6,7,.72) 100%); }
.hero > *:not(.hero__bg):not(.hero__scrim) { position: relative; z-index: 2; }

.hero__top { display: flex; align-items: flex-start; justify-content: space-between; margin-top: .75rem; }
.hero__wordmark { font-family: var(--f-display); font-size: 17rem; line-height: .82; letter-spacing: -.125rem; pointer-events: none; }
.hero__tags { text-align: right; padding-top: .5rem; pointer-events: none; }
.hero__tags p { font-size: 1.25rem; line-height: 1.45; }

.hero__bottom { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.hero__lines { font-family: var(--f-display); font-size: 4.25rem; line-height: 1.02; letter-spacing: -.03125rem; }
.hero__rule { display: flex; align-items: center; gap: .625rem; margin-top: 1.5rem; }
.hero__rule i { display: block; height: .1875rem; }
.hero__rule-w { width: 7.25rem; background: var(--white); }
.hero__rule-r { width: 3.25rem; background: var(--red-2); }

.hero__reel { display: flex; flex-direction: column; align-items: flex-end; gap: 2.875rem; }
.showreel { display: inline-flex; align-items: center; gap: 1.375rem; }
.showreel__btn { width: 8.25rem; height: 8.25rem; border: .0625rem solid rgba(255,255,255,.85); border-radius: 50%; display: grid; place-items: center; font-size: 1.875rem; position: relative; transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.showreel__btn::before { content:""; position: absolute; inset: -.0625rem; border-radius: 50%; border: .0625rem solid rgba(255,255,255,.45); animation: ring 2.8s ease-out infinite; }
@keyframes ring { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.35);opacity:0} }
.showreel:hover .showreel__btn { background: var(--white); color: var(--ink); transform: scale(1.05); }
.showreel__meta { display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.showreel__label { font-size: 1.25rem; }
.showreel__time { font-size: 1.125rem; opacity: .9; }
.progress { display: flex; align-items: center; gap: .875rem; font-size: 1.25rem; }
.progress__line { width: 9.375rem; height: .0625rem; background: rgba(255,255,255,.6); position: relative; overflow: hidden; }
.progress__line::after { content:""; position: absolute; left: -20%; top: 0; height: 100%; width: 20%; background: var(--white); animation: slide 3.4s var(--ease-2) infinite; }
@keyframes slide { to { left: 100%; } }

/* =========================================================
   SELECTED WORK — 1080 tall
   ========================================================= */
.work { position: relative; height: 67.5rem; background: var(--cream); color: var(--ink); padding: var(--pad); display: flex; flex-direction: column; overflow: hidden; }
.work__title { font-family: var(--f-display); font-size: 11.9375rem; line-height: 1.13; letter-spacing: 0; white-space: nowrap; flex: 0 0 auto; }
.work__stage { position: relative; flex: 1; min-height: 0; }

.work__meta { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20rem; display: flex; flex-direction: column; gap: .875rem; z-index: 2; }
.work__meta .hr { width: 10.75rem; background: var(--ink); }
.work__num { color: var(--red); font-size: 3rem; line-height: 1; }
.work__cat, .work__year { font-size: 1.125rem; line-height: 1.3; white-space: nowrap; }

.work__gallery { position: absolute; left: 22.875rem; top: 0; bottom: 0; right: -6rem; display: flex; gap: 1.5rem; }
.shot { position: relative; overflow: hidden; display: block; }
.shot--main { flex: 0 0 87rem; }
.shot--peek { flex: 1; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.shot--main::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.25)); opacity: 0; transition: opacity .5s var(--ease); }
.shot--main:hover img { transform: scale(1.04); }
.shot--main:hover::after { opacity: 1; }

.work__name { position: absolute; left: 0; bottom: 2.5rem; font-family: var(--f-display); font-size: 5rem; line-height: normal; letter-spacing: 0; z-index: 3; pointer-events: none; }
.view { position: absolute; left: 91.5625rem; bottom: 1.4375rem; display: inline-flex; align-items: center; gap: 1.125rem; z-index: 3; }
.view__btn { width: 8.75rem; height: 8.75rem; border: .0625rem solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: 2.5rem; flex: none; transition: background .4s var(--ease), color .4s var(--ease); }
.view__label { font-size: 1.25rem; position: relative; white-space: nowrap; }
.view__label::after { content:""; position: absolute; left: 0; bottom: -.1875rem; width: 100%; height: .0625rem; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.view:hover .view__btn { background: var(--ink); color: var(--cream); }
.view:hover .view__label::after { transform: scaleX(1); }

.work__bar { position: relative; height: .0625rem; background: rgba(13,14,15,.45); margin-top: 2.25rem; flex: 0 0 auto; }
.work__progress { position: absolute; left: 0; top: -.0625rem; height: .1875rem; width: 12.5rem; background: var(--red); }
.work__count { position: absolute; right: 0; top: -1.75rem; font-size: 1.125rem; }

/* =========================================================
   SERVICES — 1080 tall (Figma values verbatim)
   ========================================================= */
.services { height: 67.5rem; background: var(--cream); color: var(--ink); padding: var(--pad); display: flex; flex-direction: column; gap: 1.5rem; }
.services__title { font-family: var(--f-display); font-size: 11.25rem; line-height: 1.13; letter-spacing: 0; flex: 0 0 auto; }
.services__body { display: flex; gap: 1.5rem; flex: 1; min-height: 0; }
.services__img { width: 34.25rem; height: 44.5625rem; flex: none; align-self: flex-start; overflow: hidden; }
.services__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.services__img:hover img { transform: scale(1.04); }

.acc { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.acc__item { border-top: .1875rem solid var(--ink); }
.acc__item:last-of-type { border-bottom: .1875rem solid var(--ink); }
.acc__head { width: 100%; display: flex; align-items: center; gap: 4rem; padding: 1.1875rem 0; text-align: left; }
.acc__num { color: var(--red); font-size: 4rem; line-height: 1; flex: none; min-width: 1.25em; transition: transform .5s var(--ease); }
.acc__title { flex: 1; font-family: var(--f-display); font-size: 3.25rem; line-height: normal; letter-spacing: 0; }
.acc__icon { flex: none; width: 4rem; height: 4rem; display: grid; place-items: center; font-size: 4rem; transition: transform .5s var(--ease); }
.acc__item:hover .acc__num { transform: translateX(.375rem); }
.acc__item:not(.is-open):hover .acc__icon { transform: rotate(90deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > .acc__inner { min-height: 0; overflow: hidden; }
.acc__inner { display: flex; flex-direction: column; gap: 2.125rem; padding-left: 9.25rem; padding-bottom: 1.5rem; opacity: 0; transform: translateY(.625rem); transition: opacity .5s var(--ease) .12s, transform .5s var(--ease) .12s; }
.acc__item.is-open .acc__inner { opacity: 1; transform: none; }
.acc__inner p { font-size: 1.25rem; line-height: 1.4; }
.explore { display: inline-flex; align-items: flex-start; gap: 1.125rem; font-size: 1.25rem; }
.explore span { position: relative; text-decoration: underline; text-underline-offset: .25rem; }
.explore .ic { width: 1.5rem; height: 1.5rem; transition: transform .4s var(--ease); }
.explore:hover .ic { transform: translate(.25rem,-.25rem); }

.acc__cta { display: flex; align-items: center; gap: 4rem; padding-top: 1.5rem; }
.cta-arrow { width: 4.875rem; height: 2.75rem; color: var(--ink); display: grid; place-items: center; flex: none; transition: transform .4s var(--ease); }
.cta-arrow .ic { width: 4.875rem; height: 2.75rem; }
.cta-arrow:hover { transform: translateX(.5rem); }
.cta-text { font-family: var(--f-display); color: var(--red); font-size: 2.625rem; line-height: normal; flex: 1; transition: opacity .3s var(--ease); }
.cta-text:hover { opacity: .72; }
.cta-loc { font-size: 1.5rem; white-space: nowrap; }

/* =========================================================
   CASE / AFTERIMAGE — 1080 tall
   ========================================================= */
.case { height: 67.5rem; background: var(--cream); color: var(--ink); padding: var(--pad); display: flex; flex-direction: column; gap: 1.5rem; overflow: hidden; }
.case__back, .case__proj { font-size: 1.25rem; white-space: nowrap; }
.case__back { position: relative; }
.case__back::after { content:""; position: absolute; left: 0; bottom: -.1875rem; width: 100%; height: .0625rem; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.case__back:hover::after { transform: scaleX(1); }

.case__img { width: calc(100% + var(--pad) * 2); margin: 0 calc(var(--pad) * -1); height: 38.0625rem; overflow: hidden; flex: 0 0 auto; }
.case__img img { width: 100%; height: 100%; object-fit: cover; }
html.js .case__img img { transform: scale(1.05); transition: transform 1.4s var(--ease); }
html.js .case.in .case__img img { transform: scale(1); }

.case__row { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 2rem; }
.case__tags { width: 13.0625rem; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; font-size: 1.25rem; }
.case__tags .hr { width: 4.4375rem; background: var(--ink); }
.case__name { flex: 1; font-family: var(--f-display); font-size: 10rem; line-height: normal; letter-spacing: 0; }
.case__divider { width: .1875rem; height: 19.625rem; background: var(--red-2); flex: none; }
.case__text { width: 20.25rem; flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.case__text p, .case__scroll { font-size: 1.25rem; line-height: 1.4; }

/* =========================================================
   STUDIO — 1080 tall
   ========================================================= */
.studio { height: 67.5rem; background: var(--ink-2); color: var(--white); padding: var(--pad); display: flex; flex-direction: column; gap: 1.5rem; }
.studio__title { font-family: var(--f-display); color: var(--stone); font-size: 11.25rem; line-height: 1.13; letter-spacing: 0; flex: 0 0 auto; }
.studio__grid { display: flex; gap: 1.5rem; flex: 1; min-height: 0; }
.studio__left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.studio__lead-block { display: flex; flex-direction: column; gap: 1rem; }
.studio__lead { font-family: var(--f-display); color: var(--stone); font-size: 3.25rem; line-height: normal; }
.studio__photo { flex: 1; min-height: 0; overflow: hidden; }
.studio__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.studio__photo:hover img { transform: scale(1.04); }
.studio__right { width: 24rem; flex: none; display: flex; flex-direction: column; justify-content: space-between; }
.studio__about-block { display: flex; flex-direction: column; gap: .625rem; }
.studio__about-block .hr, .studio__loc .hr { height: .09375rem; }
.studio__about { font-size: 1.25rem; line-height: 1.45; }
.studio__loc { display: flex; flex-direction: column; align-items: flex-end; gap: .625rem; }
.studio__loc span { font-size: 1.25rem; }

.process { display: flex; flex-direction: column; gap: 1rem; flex: 0 0 auto; }
.process__label { font-size: 1.125rem; }
.process__steps { display: flex; align-items: center; justify-content: center; gap: 9rem; }
.step { display: inline-flex; align-items: center; gap: 2.625rem; }
.step__n { color: var(--red-2); font-size: 2rem; transition: transform .4s var(--ease); }
.step__t { font-size: 2rem; transition: letter-spacing .4s var(--ease); }
.step:hover .step__n { transform: translateY(-.25rem); }
.step:hover .step__t { letter-spacing: .0625rem; }
.process__div { width: .0625rem; height: 1.9375rem; background: rgba(227,224,218,.55); flex: none; }

.conversation { display: inline-flex; align-self: flex-start; align-items: center; gap: 1.5rem; flex: 0 0 auto; }
.conversation__label { font-size: 1.25rem; letter-spacing: .1rem; text-decoration: underline; text-underline-offset: .3125rem; }
.conversation__btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; transition: transform .4s var(--ease); }
.conversation__btn .ic { width: 2.75rem; height: 2.75rem; }
.conversation:hover .conversation__btn { transform: translateX(.5rem); }

/* =========================================================
   CONTACT  (gap 118 · form 697x360 · button 149)
   ========================================================= */
.contact { background: var(--red-2); color: var(--ink-2); padding: var(--pad); display: flex; flex-direction: column; gap: 7.375rem; }
.contact .nav__logo, .contact .nav__links a, .contact .nav__links a.is-active { color: var(--ink-2); }
.contact .nav__links a.is-active::after { background: var(--ink-2); }

.contact__main { display: flex; align-items: center; justify-content: space-between; gap: 2.625rem; }
.contact__head { display: flex; flex-direction: column; gap: 1.5rem; }
.contact__title { font-family: var(--f-display); font-size: 11.25rem; line-height: 1.13; letter-spacing: 0; }
.contact__sub { font-family: var(--f-display); font-size: 2.125rem; line-height: normal; }

.cform { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; align-self: stretch; gap: 2rem; flex: none; }
.cform__grid { display: grid; grid-template-columns: repeat(2, 20.46875rem); grid-template-rows: repeat(4, 1fr); width: 43.5625rem; height: 22.5rem; gap: 3.25rem 2.625rem; }
/* Figma field = label (top) + 30px gap + the rule at the bottom = 51px tall.
   The input overlays the lower part so the geometry stays exact and typable. */
.field { position: relative; height: 3.1875rem; }
.field--name{grid-area:1/1} .field--email{grid-area:1/2} .field--company{grid-area:2/1}
.field--type{grid-area:2/2} .field--budget{grid-area:3/1} .field--msg{grid-area:4/1/5/3}
.field__label, .field__row { position: absolute; top: 0; left: 0; font-size: 1.125rem; line-height: 1.2; pointer-events: none; }
.field__label { width: 100%; }
.field__row { display: flex; align-items: center; justify-content: space-between; width: 19.9375rem; }
.field__row .field__label { position: static; width: auto; }
.field__chev { width: 1rem; height: .544rem; }
.field input, .field select { appearance: none; -webkit-appearance: none; position: absolute; top: 1.375rem; left: 0; width: 100%; height: 1.8125rem; border: 0; border-bottom: .0625rem solid rgba(14,14,13,.85); background: transparent; color: var(--ink-2); font-size: 1.125rem; padding: 0 0 .25rem; transition: border-color .35s var(--ease); }
.field input:focus, .field select:focus { outline: none; border-color: var(--ink-2); }
.field--msg input { width: 43.5625rem; }

.submit { display: inline-flex; align-items: center; gap: 1.4375rem; }
.submit__label { font-weight: 500; font-size: 1.125rem; white-space: nowrap; }
.submit__btn { width: 9.3125rem; height: 9.3125rem; background: var(--ink); color: var(--white); border-radius: 50%; display: grid; place-items: center; transition: transform .5s var(--ease); }
.submit__btn .ic { width: 5.0625rem; height: 5.0625rem; }
.submit:hover .submit__btn { transform: scale(1.06); }

.foot { display: flex; flex-direction: column; gap: 1rem; }
.foot__row { display: flex; align-items: center; justify-content: center; gap: 7.5rem; }
.foot__link, .foot__copy { font-weight: 300; font-size: 1.25rem; white-space: nowrap; }
.foot__link { position: relative; }
a.foot__link::after { content:""; position: absolute; left: 0; bottom: -.1875rem; width: 100%; height: .0625rem; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
a.foot__link:hover::after { transform: scaleX(1); }
.foot__div { width: .0625rem; height: 1.9375rem; background: rgba(14,14,13,.55); flex: none; }

/* =========================================================
   MOBILE MENU
   ========================================================= */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: center; padding: 2rem; transform: translateY(-100%); transition: transform .55s var(--ease); visibility: hidden; }
.menu.open { transform: none; visibility: visible; }
.menu__close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2.5rem; line-height: 1; }
.menu__links { display: flex; flex-direction: column; gap: .5rem; }
.menu__links a { font-family: var(--f-display); font-size: 2.75rem; line-height: 1.1; }
.menu__foot { position: absolute; left: 2rem; bottom: 2rem; display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; opacity: .8; }

/* =========================================================
   MOBILE — canvas 390 (1rem = 16px @ 390)
   ========================================================= */
@media (max-width: 768px) {
  html { font-size: calc(100vw / 24.375); }
  :root { --pad: 1rem; }

  .nav__links, .nav__wire, .nav__dot { display: none; }
  .nav__burger { display: grid; }
  .nav--hero { justify-content: flex-end; }
  .nav--case { justify-content: space-between; }

  /* HERO 390x844 · padding 50/16/24 */
  .hero { height: 52.75rem; padding: 3.125rem 1rem 1.5rem; }
  .hero__top { flex-direction: column; align-items: flex-start; gap: .875rem; margin-top: 1.5rem; }
  .hero__wordmark { font-size: 3.8125rem; line-height: 1; }
  .hero__tags { text-align: left; padding-top: 0; }
  .hero__tags p { font-size: 1.25rem; }
  .hero__bottom { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .hero__lines { font-size: 2rem; }
  .hero__rule { gap: .5625rem; margin-top: .875rem; }
  .hero__rule i { height: .125rem; }
  .hero__rule-w { width: 4.25rem; }
  .hero__rule-r { width: 2.90625rem; }
  .hero__reel { flex-direction: column; align-items: flex-end; gap: .875rem; }
  .showreel__meta { width: 10.375rem; }
  .showreel__label { white-space: nowrap; }
  .showreel__btn { width: 6.6875rem; height: 6.6875rem; font-size: 1.5rem; }
  .progress { gap: .625rem; }
  .progress__line { width: 5.3125rem; }

  /* SELECTED WORK */
  .work { height: auto; padding: 1.5rem 1rem; gap: 1.5rem; }
  .work__title { font-size: 3.8125rem; white-space: normal; line-height: 1.05; }
  .work__stage { position: static; display: flex; flex-direction: column; gap: 1rem; }
  .work__meta { position: static; transform: none; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
  .work__meta .hr { width: 3rem; }
  .work__num { font-size: 2.75rem; }
  .work__cat { font-size: 1.25rem; white-space: normal; }
  .work__year { font-size: 1.125rem; }
  .work__gallery { position: static; height: 13.3125rem; gap: 1.125rem; overflow-x: auto; scroll-snap-type: x mandatory; touch-action: pan-x pan-y; }
  .work__gallery::-webkit-scrollbar { display: none; }
  .shot { scroll-snap-align: start; border-radius: .125rem; }
  .shot--main, .shot--peek { flex: 0 0 20.875rem; }
  .work__name { position: static; font-size: 2.75rem; }
  .view { position: static; transform: none; justify-content: flex-end; gap: .875rem; }
  .view__btn { width: 4.0625rem; height: 4.0625rem; font-size: 1.25rem; }
  .work__bar { margin-top: 1rem; }
  .work__progress { width: 5rem; }
  .work__count { font-size: .75rem; top: -1.25rem; }

  /* SERVICES */
  .services { height: auto; padding: 1.5rem 1rem; gap: 1.5rem; }
  .services__title { font-size: 4rem; }
  .services__body { flex-direction: column-reverse; gap: 1.5rem; }
  .services__img { width: 100%; height: auto; aspect-ratio: .77; }
  .acc__head { gap: 1.75rem; padding: 1rem 0; }
  .acc__num { font-size: 1.5rem; }
  .acc__title { font-size: 1rem; }
  .acc__icon { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; }
  .acc__inner { padding-left: 0; gap: 1.5rem; }
  .acc__inner p { font-size: .875rem; }
  .explore { font-size: .75rem; }
  .explore .ic { width: 1.125rem; height: 1.125rem; }
  .acc__cta { gap: 1.5rem; }
  .cta-arrow, .cta-arrow .ic { width: 2.4375rem; height: 1.375rem; }
  .cta-text { font-size: 1.25rem; }
  .cta-loc { font-size: .75rem; }

  /* CASE */
  .case { height: auto; padding: 1.5rem 1rem; gap: 1.5rem; }
  .case__img { height: 15rem; }
  .case__proj { display: none; }
  .case__row { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .case__divider { display: none; }
  .case__name { font-size: 3.0625rem; }
  .case__tags { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; font-size: .875rem; }
  .case__tags .hr { width: 2rem; }
  .case__text { width: 100%; gap: .875rem; }
  .case__text p, .case__scroll { font-size: .875rem; }

  /* STUDIO */
  .studio { height: auto; padding: 1.5rem 1rem; gap: 1.5rem; }
  .studio__title { font-size: 5.125rem; }
  .studio__grid { flex-direction: column; gap: 1rem; }
  .studio__lead { font-size: 1.125rem; }
  .studio__photo { aspect-ratio: 1.62; flex: none; }
  .studio__right { width: 100%; gap: 1.5rem; }
  .studio__about { font-size: .875rem; }
  .studio__loc span { font-size: .875rem; }
  .process__label { font-size: .875rem; }
  /* Steps are wider than the phone, so the row drifts left and back instead of
     hiding FINISH off-screen. min() keeps it still on phones wide enough to fit. */
  .process { overflow: hidden; }
  .process__steps { justify-content: flex-start; gap: 4rem; padding-bottom: .5rem; width: max-content; overflow: visible; animation: steps-drift 9s ease-in-out infinite alternate; }
  @keyframes steps-drift { to { transform: translateX(min(0px, calc(100vw - 2rem - 100%))); } }
  .step { flex: none; }
  .step__n, .step__t { font-size: 1.25rem; }
  .process__div { height: 1.875rem; }
  .conversation__label { font-size: .875rem; letter-spacing: .07rem; }
  .conversation__btn, .conversation__btn .ic { width: 1.5rem; height: 1.5rem; }

  /* CONTACT */
  .contact { padding: 1.5rem 1rem; gap: 1.5rem; }
  .contact__main { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .contact__title { font-size: 4rem; line-height: 1.05; }
  .contact__sub { font-size: 1.125rem; }
  .cform { align-items: stretch; gap: 1.5rem; }
  .cform__grid { display: flex; flex-direction: column; width: 100%; height: auto; gap: 1.5rem; }
  .field { position: static; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.875rem; width: 100%; }
  .field__label, .field__row { position: static; }
  .field__row { width: 100%; }
  .field input, .field select { position: static; height: auto; padding: 0 0 .5rem; }
  .field--msg input { width: 100%; }
  .submit { align-self: flex-end; }
  .submit__label { font-size: .875rem; }
  .submit__btn { width: 4.45rem; height: 4.45rem; }
  .submit__btn .ic { width: 2.419rem; height: 2.419rem; }
  .foot__row { flex-wrap: wrap; justify-content: center; gap: .875rem 1.125rem; }
  .foot__link, .foot__copy { font-size: .75rem; }
  .foot__div { height: 1rem; }
}