/* ═══════════════════════════════════════════
   VITONIZE — design tokens
   ═══════════════════════════════════════════ */
/* ── MONOCHROME ─────────────────────────────
   The palette carries no hue at all. Every grey below sits on the exact
   neutral axis — the old ramp leaned warm (#272523, #e6e4e2), which on a
   full page reads as beige rather than as black and white.

   The accent used to be yellow, split three ways because yellow cannot
   be text on white. In monochrome that problem disappears and the split
   collapses: the accent paints black, and what sits on it is white. */
:root{
  --ink:#1a1a1a;             /* body copy */
  --ink-strong:#000000;      /* headlines */
  --ink-mute:#6e6e6e;        /* secondary copy — 4.9:1 on white */
  --dark:#0a0a0a;            /* dark panels */
  --line:#e4e4e4;            /* hairlines */
  --wash:#f4f4f4;            /* the faintest fill */
  --ghost:#ededed;
  --white:#ffffff;

  --accent:#0f0f0f;          /* fills, buttons, rules */
  --accent-2:#2c2c2c;        /* one step up, for gradients */
  --accent-soft:#0f0f0f;     /* pills and badges — black, not a tint */
  --accent-ink:#ffffff;      /* letters set ON the accent */
  --accent-text:#000000;     /* words that were accent-coloured */

  --r:10px;
  --container:1180px;
  --nav-h:64px;
  --ease:cubic-bezier(.25,1,.35,1);
  /* one curve for everything that moves, so the whole site decelerates
     the same way — the single biggest thing separating considered motion
     from a pile of unrelated transitions */
  --e-out:cubic-bezier(.22,1,.36,1);
}

/* ── the four places the swap collides ──
   `--accent-soft` used to be a pale tint and is now black, and `--accent`
   used to be light enough to read on a dark panel and is now black too.
   Both are right for the ninety-odd places they are used; these four
   need saying out loud rather than leaving to luck. */

/* was pale-yellow selection with dark text */
::selection{background:#0f0f0f;color:#ffffff;}

/* a white button hovering to black has to take its letters with it */
.btn-white:hover{background:var(--accent-soft);color:var(--white);}
.is-featured .price-btn:hover{background:var(--accent-soft);color:var(--white);}

/* this eyebrow sits on a near-black panel, so the accent cannot be its
   text colour any more — it would be black on black */
.custom-eyebrow{color:rgba(255,255,255,.82);}

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

/* The browser hides [hidden] with a plain `display:none`, which any
   author `display:` beats — so an element given `display:flex` by its own
   class stays on screen after JS marks it hidden. That is what left two
   Google buttons on the sign-in page once the real one rendered. The app
   stylesheet already carries this; the site one needs it too. */
[hidden]{display:none !important;}

html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.33;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
h1,h2,h3,p{margin:0;}
::selection{background:var(--accent-soft);color:var(--ink-strong);}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.large-container{max-width:1400px;}
.img-cover{width:100%;height:100%;object-fit:cover;}

/* ── typography scale ─────────────────────── */
.h2{
  font-size:42px;line-height:1.14;font-weight:500;
  letter-spacing:-1.05px;color:var(--ink);
}
.h3{
  font-size:26px;line-height:1.2;font-weight:500;
  letter-spacing:-.55px;color:var(--ink);
}
.subtitle{
  font-size:18px;line-height:1.5;letter-spacing:-.05px;
  color:var(--ink-mute);padding:16px 0 42px;
}

/* split-text primitives */
.sp-line{display:block;overflow:hidden;}
.sp-word{display:inline-block;white-space:nowrap;}
.sp-char{display:inline-block;will-change:transform,opacity;}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:0;
  padding:15px 34px;border-radius:100px;
  font-size:16px;line-height:1.1;font-weight:500;letter-spacing:-.08px;
  position:relative;overflow:hidden;
  transition:background-color .4s var(--ease),color .4s var(--ease),
             box-shadow .4s var(--ease),padding .45s var(--ease);
  white-space:nowrap;
}
.btn-text{position:relative;z-index:2;}
.btn-arrow{
  position:relative;z-index:2;
  width:0;height:16px;margin-left:0;
  display:inline-flex;align-items:center;overflow:hidden;
  transition:width .45s var(--ease),margin-left .45s var(--ease);
}
.btn-arrow svg{width:16px;height:16px;flex:0 0 16px;transition:transform .45s var(--ease);}
.btn:hover .btn-arrow{width:16px;margin-left:10px;}
.btn:hover .btn-arrow svg{transform:translateX(-100%);}
.btn:hover .btn-arrow svg:first-child{transform:translateX(0%);}
.btn-arrow svg:first-child{transform:translateX(-100%);}
.btn-arrow svg:last-child{transform:translateX(-100%);}

.btn-dark{background:var(--dark);color:var(--white);}
.btn-dark:hover{background:var(--ink-strong);box-shadow:0 10px 26px -14px rgba(0,0,0,.55);}
.btn-light{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);}
.btn-light:hover{background:var(--wash);box-shadow:inset 0 0 0 1px #d6d6d6;}
.btn-white{background:var(--white);color:var(--ink);}
.btn-white:hover{background:var(--accent-soft);}
.btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);padding:13px 26px;}
.btn-outline:hover{background:var(--ink);color:var(--white);box-shadow:inset 0 0 0 1px var(--ink);}
.btn.full{width:100%;justify-content:center;}

/* ═══════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════ */
.nav-s{
  position:fixed;top:16px;left:0;right:0;z-index:900;
  padding:0 24px;
  transition:transform .5s var(--ease),opacity .35s var(--ease);
}
.nav-s.is-hidden{transform:translateY(-140%);opacity:0;}
.nav-w{
  width:100%;max-width:var(--container);margin:0 auto;
  height:var(--nav-h);
  display:flex;align-items:center;gap:24px;
  padding:0 8px 0 24px;
  border-radius:var(--r);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 34px -22px rgba(0,0,0,.35);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.nav-s.is-scrolled .nav-w{
  background:rgba(255,255,255,.95);
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 18px 40px -24px rgba(0,0,0,.45);
}

.nav-logo{display:flex;flex-direction:row;align-items:center;gap:.42em;line-height:1;flex:0 0 auto;}
/* Sentence case, not caps. Caps beside a mark is two things shouting the
   same name; set as a word it reads as a signature and lets the mark do
   the work. Tighter than the old caps setting, which needed the air. */
.nav-logo-main{font-size:20px;font-weight:600;letter-spacing:-.012em;color:var(--ink-strong);}
.nav-logo-sub{font-size:8.5px;font-weight:500;letter-spacing:.42em;color:var(--ink-mute);margin-top:3px;}

.nav-links{display:flex;align-items:center;gap:28px;}
.nav-link-w{position:relative;height:var(--nav-h);display:flex;align-items:center;}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;height:var(--nav-h);
  font-size:16px;letter-spacing:-.08px;color:var(--ink-mute);
  transition:color .3s var(--ease);
}
.nav-link:hover{color:var(--ink-strong);}
.nav-caret{transition:transform .35s var(--ease);}
.nav-link-w.is-open .nav-caret{transform:rotate(180deg);}
.nav-link-w.is-open .nav-link{color:var(--ink-strong);}

.nav-dd{
  position:absolute;top:calc(var(--nav-h) - 6px);left:-16px;
  min-width:230px;padding-top:10px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s;
}
.nav-link-w.is-open .nav-dd{opacity:1;visibility:visible;transform:translateY(0);}
.nav-dd-c{
  display:flex;flex-direction:column;gap:2px;
  padding:12px;border-radius:var(--r);
  background:var(--white);
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 24px 48px -24px rgba(0,0,0,.4);
}
.nav-dd-link{
  padding:10px 14px;border-radius:6px;
  font-size:15px;color:var(--ink-mute);
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.nav-dd-link:hover{background:var(--wash);color:var(--ink-strong);transform:translateX(3px);}

.nav-cta{margin-left:auto;display:flex;align-items:center;gap:16px;}
.nav-btn{padding:12px 22px;font-size:15px;}
.nav-burger{display:none;width:40px;height:40px;border-radius:6px;position:relative;}
.nav-burger span{
  position:absolute;left:11px;width:18px;height:1.5px;background:var(--ink-strong);
  border-radius:2px;transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.nav-burger span:first-child{top:17px;}
.nav-burger span:last-child{top:23px;}
.nav-s.menu-open .nav-burger span:first-child{transform:translateY(3px) rotate(45deg);}
.nav-s.menu-open .nav-burger span:last-child{transform:translateY(-3px) rotate(-45deg);}

.nav-mobile{
  max-width:var(--container);margin:8px auto 0;
  border-radius:var(--r);background:var(--white);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.4);
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .5s var(--ease),opacity .3s var(--ease);
}
.nav-s.menu-open .nav-mobile{max-height:420px;opacity:1;}
.nav-mobile-inner{padding:16px;display:flex;flex-direction:column;gap:4px;}
.nav-mobile-link{padding:14px 12px;border-bottom:1px solid var(--line);color:var(--ink);font-size:17px;}
.nav-mobile .btn{margin-top:12px;}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero-s{
  position:relative;
  padding:calc(var(--nav-h) + 80px) 0 0;
  min-height:min(860px,92vh);
  display:flex;align-items:center;
  overflow:hidden;
}
/* The hero stills are cut-out models on white, so they sit directly on the
   page as a small bottom-right element — no dark band, no gradient scrim. */
/* bottom:0 + object-position:bottom means the cut-out stands on the section's
   base edge instead of being clipped mid-body */
/* Anchored to the container's right edge, not the viewport's, so the gap to
   the copy stays identical at every screen width. Width tracks the still's
   own portrait ratio so `contain` wastes no horizontal room. */
.hero-swiper-c{
  position:absolute;bottom:0;
  right:max(24px, calc(50% - (var(--container) / 2) + 40px));
  width:min(480px, 38vw);height:88%;
  z-index:0;pointer-events:none;
}
.hero-swiper,.hero-swiper .swiper-wrapper,.hero-slide{height:100%;}
.hero-slide img{
  width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
  transform:scale(1.03);transition:transform 6s linear;
}
.hero-slide.swiper-slide-active img{transform:scale(1);}
/* Some source cut-outs are bust crops, so their hard bottom edge needs to
   dissolve into the page instead of ending in a straight line. */
.hero-slide.is-cropped img{
  -webkit-mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,0) 100%);
}
.hero-swiper-fade{display:none;}
.hero{position:relative;z-index:2;}
.center-container.hero{display:flex;flex-direction:column;}

.hero-h1{
  max-width:600px;
  font-size:52px;line-height:1.12;font-weight:500;
  letter-spacing:-1.9px;color:var(--ink-strong);
}
.hero-h1-small{display:block;color:var(--ink-mute);letter-spacing:-1.12px;}
.hero-h1-main{display:block;}
.hero-c{max-width:520px;}
.hero-subtitle{
  font-size:17px;line-height:1.55;letter-spacing:-.09px;
  color:var(--ink-mute);padding:22px 0 34px;max-width:480px;
}
.buttons-c{display:flex;gap:12px;flex-wrap:wrap;}

/* ═══════════════════════════════════════════
   TRUSTED BY  (marquee)
   ═══════════════════════════════════════════ */
.trusted-s{background:var(--dark);padding:64px 0;overflow:hidden;}
.trusted-c{display:flex;flex-direction:column;align-items:center;gap:44px;}
.trusted-title{
  font-size:20px;line-height:1.1;font-weight:400;letter-spacing:.1px;
  color:var(--white);text-align:center;max-width:860px;
}
.trusted-logo-c{
  width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.trusted-logo-group{display:flex;width:max-content;animation:marquee 34s linear infinite;}
.trusted-logo-c:hover .trusted-logo-group{animation-play-state:paused;}
.trusted-logo-w{display:flex;align-items:center;gap:72px;padding-right:72px;flex:0 0 auto;}
.tlogo{
  font-size:19px;font-weight:500;letter-spacing:.18em;
  color:rgba(255,255,255,.62);white-space:nowrap;
  transition:color .35s var(--ease);
}
.tlogo:hover{color:var(--white);}
@keyframes marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

/* ═══════════════════════════════════════════
   CAROUSEL  (stacked crossfade)
   ═══════════════════════════════════════════ */
.carousel-s{position:relative;padding:100px 0 70px;overflow:hidden;}
.carousel-title-c{
  position:relative;z-index:2;
  width:100%;max-width:var(--container);margin:0 auto 48px;padding:0 24px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
}
.carousel-h2{max-width:640px;}
.carousel{
  position:relative;z-index:2;
  width:100%;max-width:880px;margin:0 auto;
  aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:#1c1c1c;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7);
}
.carousel-block{
  position:absolute;inset:0;
  opacity:0;transform:scale(1.04);
  transition:opacity 1s var(--ease),transform 1.6s var(--ease);
}
.carousel-block.is-active{opacity:1;transform:scale(1);}
.carousel-tag{
  position:absolute;left:16px;bottom:16px;
  padding:8px 16px;border-radius:100px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink-strong);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease) .25s,transform .7s var(--ease) .25s;
}
.carousel-block.is-active .carousel-tag{opacity:1;transform:translateY(0);}

.carousel-dots{
  position:relative;z-index:2;
  display:flex;justify-content:center;gap:10px;margin-top:28px;
}
.carousel-dot{
  width:44px;height:3px;border-radius:100px;
  background:rgba(0,0,0,.13);overflow:hidden;
}
.carousel-dot-fill{
  display:block;width:100%;height:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:left;
}
.carousel-dot.is-active .carousel-dot-fill{
  animation:dotfill 5s linear forwards;
}
@keyframes dotfill{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* the section now sits on plain white — the artwork carries it, not a plate */
.carousel-bg{display:none;}

/* ═══════════════════════════════════════════
   SHOWCASE SLIDER
   ═══════════════════════════════════════════ */
/* clip-x lets the slide row bleed past the container to the viewport edge
   without ever giving the document a horizontal scrollbar */
.slider-s{padding:110px 0 120px;overflow-x:clip;}
.slider-c{position:relative;}
.slider-title-c{max-width:560px;}
.slider-sub{padding:16px 0 32px;}
.cta-buttons{display:flex;gap:12px;flex-wrap:wrap;}
.slider-swiper{margin-top:56px;overflow:visible;}
.slider-swiper .swiper-wrapper{align-items:stretch;}
.slider-slide{
  width:170px;height:216px;border-radius:var(--r);overflow:hidden;
  background:var(--wash);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.slider-slide img{transition:transform 1.1s var(--ease);}
.slider-slide:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(0,0,0,.55);}
.slider-slide:hover img{transform:scale(1.07);}

.slider-nav{position:absolute;top:0;right:0;display:flex;gap:10px;}
.slider-prev,.slider-next{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);
  transition:background-color .35s var(--ease),color .35s var(--ease),
             box-shadow .35s var(--ease),transform .35s var(--ease);
}
.slider-prev svg,.slider-next svg{width:16px;height:16px;}
.slider-prev:hover,.slider-next:hover{background:var(--ink);color:var(--white);box-shadow:inset 0 0 0 1px var(--ink);}
.slider-prev:active,.slider-next:active{transform:scale(.94);}
.slider-prev.is-disabled,.slider-next.is-disabled{opacity:.32;pointer-events:none;}

/* ═══════════════════════════════════════════
   CATEGORY CARDS  (clickable, inside the slider row)
   ═══════════════════════════════════════════ */
.cat-slide{
  width:230px;height:300px;flex:0 0 auto;
  border-radius:var(--r);overflow:hidden;position:relative;
  background:var(--wash);display:block;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.cat-slide img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease),filter .6s var(--ease);
}
.cat-slide::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.32) 66%,rgba(0,0,0,.82) 100%);
  transition:opacity .5s var(--ease);
}
.cat-slide:hover{transform:translateY(-8px);box-shadow:0 34px 60px -34px rgba(0,0,0,.62);}
.cat-slide:hover img{transform:scale(1.08);}
.cat-slide-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
}
.cat-slide-name{
  display:block;font-size:17px;font-weight:500;letter-spacing:-.3px;color:#fff;
}
.cat-slide-count{
  display:block;font-size:12px;color:rgba(255,255,255,.72);margin-top:3px;
}
.cat-slide-go{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background-color .4s var(--ease),transform .4s var(--ease);
}
.cat-slide-go svg{width:13px;height:13px;}
.cat-slide:hover .cat-slide-go{background:#fff;color:var(--ink);transform:translateX(2px);}
.js .cat-slide{opacity:0;transform:translateY(28px);}

/* ═══════════════════════════════════════════
   ROSTER  (For Women / For Men tabbed grid)
   ═══════════════════════════════════════════ */
.roster-s{padding:100px 0 110px;}
.roster-title-c{max-width:700px;margin:0 auto;text-align:center;}
.roster-title-c .subtitle{max-width:560px;margin:0 auto;padding:16px 0 0;}

.roster-tabs{
  display:inline-flex;gap:4px;padding:4px;margin:44px auto 48px;
  border-radius:100px;background:var(--wash);
}
.roster-tabs-w{display:flex;justify-content:center;}
.roster-tab{
  padding:11px 26px;border-radius:100px;
  font-size:15px;font-weight:500;letter-spacing:-.1px;color:var(--ink-mute);
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
.roster-tab:hover{color:var(--ink-strong);}
.roster-tab.is-active{background:var(--ink-strong);color:var(--white);}

/* generous row gap so the name never gets crowded by the next row */
.roster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:46px 20px;}
.roster-card{display:block;}
.roster-card-img{
  aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--wash);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.roster-card-img img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform 1.1s var(--ease);
}
.roster-card:hover .roster-card-img{transform:translateY(-5px);box-shadow:0 28px 52px -32px rgba(0,0,0,.5);}
.roster-card:hover .roster-card-img img{transform:scale(1.05);}
.roster-card-name{
  display:block;padding-top:14px;
  font-size:16px;font-weight:500;letter-spacing:-.1px;color:var(--ink);
  transition:color .35s var(--ease);
}
.roster-card:hover .roster-card-name{color:var(--ink-strong);}

.roster-panel{display:none;}
.roster-panel.is-active{display:block;}
.js .roster-card{opacity:0;transform:translateY(22px);}

/* The grid is capped and dissolves into the page so the last row reads as
   "there is more". overflow:hidden matters: without it a hovered card in the
   faded zone lifts out of the gradient and pops back to full colour. */
.roster-fade-w{position:relative;max-height:1180px;overflow:hidden;}
.roster-fade-w::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:340px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 34%,
    rgba(255,255,255,.9) 68%,
    #fff 100%);
  pointer-events:none;z-index:5;
}
.roster-cta{
  position:relative;z-index:3;
  margin-top:34px;text-align:center;
}
.roster-cta-title{
  font-size:28px;line-height:1.2;font-weight:400;letter-spacing:-.9px;
  color:var(--ink);
}
.roster-cta .cta-buttons{justify-content:center;margin-top:26px;}

@media (max-width:991px){
  .roster-s{padding:70px 0 80px;}
  .roster-grid{grid-template-columns:repeat(3,1fr);gap:34px 16px;}
  .roster-tabs{margin:32px auto 36px;}
  .roster-fade-w{max-height:980px;}
}
@media (max-width:600px){
  .roster-grid{grid-template-columns:repeat(2,1fr);gap:32px 12px;}
  .roster-tab{padding:10px 18px;font-size:14px;}
  .roster-card-name{font-size:15px;padding-top:11px;}
  .roster-fade-w{max-height:760px;}
  .roster-fade-w::after{height:220px;}
  .roster-cta{margin-top:24px;}
  .roster-cta-title{font-size:22px;letter-spacing:-.5px;}
}

/* ═══════════════════════════════════════════
   AUTH  (sign in / sign up, split with video)
   ═══════════════════════════════════════════ */
.auth-body{background:var(--white);}
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}

.auth-panel{
  display:flex;flex-direction:column;
  padding:40px 56px;
}
.auth-brand .nav-logo-main{font-size:20px;font-weight:600;letter-spacing:-.012em;color:var(--ink-strong);}

.auth-form-c{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:380px;margin:0 auto;padding:48px 0;
}
.auth-h1{
  font-size:34px;line-height:1.1;font-weight:400;letter-spacing:-1.4px;
  color:var(--ink-strong);
}
.auth-sub{font-size:15px;line-height:1.5;color:var(--ink-mute);padding-top:10px;}

/* segmented switch instead of a plain text link */
.auth-switch{
  display:flex;gap:3px;padding:3px;margin:28px 0 26px;
  border-radius:100px;background:var(--wash);
}
.auth-switch button{
  flex:1;padding:10px 8px;border-radius:100px;
  font-size:14px;font-weight:500;color:var(--ink-mute);
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.auth-switch button.is-active{background:var(--ink-strong);color:var(--white);}

.auth-field{position:relative;display:block;margin-bottom:12px;}
.auth-field-ic{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ink-mute);pointer-events:none;
}
.auth-field input{
  width:100%;padding:15px 16px 15px 44px;border-radius:10px;
  border:1px solid var(--line);background:var(--white);color:var(--ink-strong);
  font-family:inherit;font-size:15px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.auth-field input::placeholder{color:var(--ink-mute);}
.auth-field input:focus{
  outline:none;border-color:var(--ink-strong);
  box-shadow:0 0 0 3px rgba(0,0,0,.06);
}
.auth-submit{width:100%;justify-content:center;padding:15px 24px;}

.auth-or{
  display:flex;align-items:center;gap:14px;margin:26px 0;
  font-size:12px;letter-spacing:.14em;color:var(--ink-mute);
}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line);}

.auth-oauth{display:flex;flex-direction:column;gap:10px;}
.auth-oauth button{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;padding:14px 20px;border-radius:10px;
  border:1px solid var(--line);background:var(--white);
  font-size:15px;font-weight:500;color:var(--ink-strong);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.auth-oauth button:hover{background:var(--wash);border-color:#d6d6d6;}
.auth-oauth button:active{transform:scale(.99);}
.auth-oauth svg{width:18px;height:18px;flex:0 0 18px;}
/* Google renders its own button in here — its branding terms don't allow
   wrapping the real sign-in flow in a custom-styled button. */

.auth-note{
  font-size:12.5px;line-height:1.5;color:var(--ink-mute);
  text-align:center;padding-top:22px;
}
.auth-note[data-state="error"]{color:#111111;font-weight:600;}
.auth-legal{font-size:12px;color:var(--ink-mute);text-align:center;padding-top:16px;}
.auth-legal a{text-decoration:underline;text-underline-offset:2px;}
.auth-back{
  font-size:14px;color:var(--ink-mute);flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .3s var(--ease);
}
.auth-back:hover{color:var(--ink-strong);}
.auth-back svg{width:14px;height:14px;}

/* right half: the video runs edge to edge */
.auth-media{position:relative;overflow:hidden;background:#0d0f14;}
.auth-media video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.auth-media-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,15,20,.15) 0%,rgba(13,15,20,.1) 45%,rgba(13,15,20,.82) 100%);
}
.auth-media-copy{
  position:absolute;left:44px;right:44px;bottom:40px;color:#fff;
}
.auth-media-quote{
  font-size:23px;line-height:1.3;font-weight:400;letter-spacing:-.6px;max-width:420px;
}
.auth-media-by{font-size:13px;color:rgba(255,255,255,.6);padding-top:12px;}

@media (max-width:991px){
  .auth-wrap{grid-template-columns:1fr;min-height:auto;}
  .auth-media{order:-1;height:280px;}
  .auth-media-copy{left:24px;right:24px;bottom:24px;}
  .auth-media-quote{font-size:19px;}
  .auth-panel{padding:28px 24px 48px;}
  .auth-form-c{padding:32px 0 0;}
}

/* ═══════════════════════════════════════════
   FOCUS CAROUSEL  (product pages)
   Centred, one large focal frame with dimmed neighbours — deliberately
   a different rhythm from the flat 5-across row on category pages.
   ═══════════════════════════════════════════ */
.focus-s{padding:0 0 110px;overflow:hidden;}
.focus-title-c{max-width:640px;margin:0 auto 44px;text-align:center;}
.focus-title-c .subtitle{padding:16px 0 0;margin:0 auto;max-width:520px;}

/* Small-thumbnail filmstrip that tracks page scroll: on desktop the
   section pins and the row translates horizontally as you scroll down
   (GSAP ScrollTrigger scrub — pure tween, no Swiper, so this has nothing
   to do with the loop:true freeze noted elsewhere in this file). Below
   ~900px pinning feels wrong on touch, so it degrades to a plain
   horizontally-swipeable strip instead (see ScrollTrigger.matchMedia in
   main.js). */
.focus-pin{
  overflow:hidden;margin-top:12px;
  width:100vw;margin-left:calc(50% - 50vw);
}
.focus-track{
  display:flex;gap:18px;
  padding:8px max(24px, calc(50vw - var(--container) / 2)) 8px;
  will-change:transform;
}
.focus-item{
  flex:0 0 220px;aspect-ratio:3/4;
  border-radius:14px;overflow:hidden;background:#f4f4f4;
  box-shadow:0 30px 54px -34px rgba(0,0,0,.4);
}
.focus-item img{width:100%;height:100%;object-fit:cover;}

/* Caption band under the strip. The lines stack on top of each other and
   are cross-faded by scroll position, so this reserves a fixed height
   instead of collapsing as each line swaps out. */
.focus-cap{
  position:relative;
  height:52px;
  margin-top:30px;
  display:flex;align-items:center;justify-content:center;
}
.focus-cap-line{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  font-size:clamp(17px,2.1vw,25px);
  font-weight:300;
  letter-spacing:-.01em;
  color:var(--ink,#121212);
  opacity:0;
}
.focus-prog{
  width:min(360px,52vw);
  height:2px;
  margin:0 auto;
  border-radius:2px;
  background:rgba(21,19,15,.1);
  overflow:hidden;
}
.focus-prog-bar{
  display:block;
  width:100%;height:100%;
  border-radius:2px;
  background:var(--ink,#121212);
  transform:scaleX(0);
  transform-origin:left center;
}

@media (max-width:899px){
  .focus-track{
    overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-bottom:14px;
  }
  .focus-item{flex:0 0 168px;scroll-snap-align:start;}
  /* below 900px the strip is a plain swipe list with no pinned scrub,
     so there is no progress to report and nothing to cross-fade against */
  .focus-cap,.focus-prog{display:none;}
}

/* Reimagined: peek-both-sides carousel, floating glass arrows, autoplay
   every 2s (paused on hover / off-screen), slow Ken Burns drift on the
   active image. Swiper drives the peek + drag; loop stays false and the
   wrap-around is done by hand — see the note on initFocusCarousel for why
   loop:true is never used anywhere on this site. */
.reimagined-c{position:relative;max-width:640px;margin:0 auto;}
.reimagined-swiper{overflow:visible;padding:14px 2px 10px;}
.reimagined-slide{overflow:visible;}
.reimagined-slide-inner{
  position:relative;aspect-ratio:3/4;width:100%;
  border-radius:20px;overflow:hidden;background:#f4f4f4;
  box-shadow:0 20px 40px -22px rgba(0,0,0,.35),0 50px 80px -40px rgba(0,0,0,.4);
}
.reimagined-slide-inner img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform 3.4s linear,filter .6s var(--ease);
}
.swiper-slide-active .reimagined-slide-inner img{transform:scale(1.07);}
.swiper-slide-active .reimagined-slide-inner{box-shadow:0 26px 50px -22px rgba(0,0,0,.4),0 60px 90px -40px rgba(0,0,0,.5);}

.reimagined-arrow{
  position:absolute;top:50%;margin-top:-24px;
  width:48px;height:48px;border-radius:50%;z-index:6;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.7);
  color:var(--ink-strong);
  transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.reimagined-arrow svg{width:16px;height:16px;}
.reimagined-arrow:hover{background:var(--white);transform:translateY(-50%) scale(1.08);margin-top:0;}
.reimagined-arrow:active{transform:translateY(-50%) scale(.94);margin-top:0;}
.reimagined-arrow-prev{left:-6px;}
.reimagined-arrow-next{right:-6px;}

.reimagined-dots{margin-top:24px;}
.reimagined-dots .carousel-dot.is-active .carousel-dot-fill{animation-duration:2s;}
.js .reimagined-c{opacity:0;transform:translateY(20px);}

@media (max-width:600px){
  .reimagined-arrow{width:38px;height:38px;}
  .reimagined-arrow svg{width:14px;height:14px;}
  .reimagined-arrow-prev{left:0;}
  .reimagined-arrow-next{right:0;}
}

@media (max-width:991px){
  .focus-s{padding-bottom:70px;}
}

/* ═══════════════════════════════════════════
   WORK CAROUSEL  (category page galleries)
   ═══════════════════════════════════════════ */
.workcar-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:36px;
}
.workcar-head .gallery-title-c{margin-bottom:0;}
.workcar-nav{display:flex;gap:10px;flex:0 0 auto;padding-bottom:6px;}
.workcar-prev,.workcar-next{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);
  transition:background-color .35s var(--ease),color .35s var(--ease),
             box-shadow .35s var(--ease),transform .35s var(--ease);
}
.workcar-prev svg,.workcar-next svg{width:16px;height:16px;}
.workcar-prev:hover,.workcar-next:hover{background:var(--ink);color:var(--white);box-shadow:inset 0 0 0 1px var(--ink);}
.workcar-prev:active,.workcar-next:active{transform:scale(.94);}
.workcar-prev.is-disabled,.workcar-next.is-disabled{opacity:.3;pointer-events:none;}

.workcar-swiper{overflow:hidden;border-radius:var(--r);}
.workcar-slide{
  aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:#f4f4f4;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
/* contain, not cover: these are finished poster creatives, so cropping would
   cut product names and logos out of the frame */
.workcar-slide img{
  width:100%;height:100%;object-fit:contain;
  transition:transform 1.1s var(--ease);
}
.workcar-slide:hover{transform:translateY(-5px);box-shadow:0 26px 48px -30px rgba(0,0,0,.5);}
.workcar-slide:hover img{transform:scale(1.06);}
.js .workcar-slide{opacity:0;transform:translateY(24px);}

/* ── show all: swaps the rail for the complete grid ── */
.workcar-more{display:flex;justify-content:center;margin-top:34px;}
.workcar-allbtn{gap:9px;}

/* While the grid is open a floating twin rides the bottom of the viewport.
   It hands over to the real button the moment that one scrolls into view,
   so you can collapse the grid from anywhere inside the section.
   (position:sticky cannot do this: the button is the last child of its
   containing block, which leaves it no room to travel.) */
.workcar-float{
  position:fixed;left:50%;bottom:26px;z-index:60;
  transform:translateX(-50%) translateY(16px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .35s;
}
.workcar-float.is-on{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.workcar-float .btn{
  background:rgba(255,255,255,.9);color:var(--ink);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
          backdrop-filter:saturate(180%) blur(14px);
  box-shadow:inset 0 0 0 1px var(--line),0 16px 38px -16px rgba(0,0,0,.45);
}
.workcar-float .btn:hover{
  background:var(--ink);color:var(--white);
  box-shadow:inset 0 0 0 1px var(--ink),0 16px 38px -16px rgba(0,0,0,.55);
}
@media (prefers-reduced-motion:reduce){
  .workcar-float{transition:none;}
}
.workcar-allbtn .btn-count{color:var(--ink-mute);transition:color .3s var(--ease);}
.workcar-allbtn:hover .btn-count{color:rgba(255,255,255,.65);}

.workcar-all{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-top:4px;
}
.workcar-all[hidden]{display:none;}
.workcar-all-item{
  aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:#f4f4f4;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.workcar-all-item img{
  width:100%;height:100%;object-fit:contain;
  transition:transform 1.1s var(--ease);
}
.workcar-all-item:hover{transform:translateY(-5px);box-shadow:0 26px 48px -30px rgba(0,0,0,.5);}
.workcar-all-item:hover img{transform:scale(1.06);}

/* while the grid is open the rail and its arrows step aside */
.gallery-s.is-expanded .workcar-swiper,
.gallery-s.is-expanded .workcar-nav{display:none;}

@media (max-width:991px){
  .workcar-all{grid-template-columns:repeat(3,1fr);gap:14px;}
}
@media (max-width:600px){
  .workcar-all{grid-template-columns:repeat(2,1fr);gap:10px;}
}

@media (max-width:991px){
  .workcar-head{flex-direction:column;align-items:flex-start;gap:20px;}
}

/* ═══════════════════════════════════════════
   CUSTOM CAST  (bespoke-model pitch, dark split)
   ═══════════════════════════════════════════ */
/* Same proportioning as .creator-c: capped to the site container so neither
   the copy nor the photo can stretch into dead space on wide monitors. */
.custom-s{padding:0 24px 120px;}
.custom-c{
  position:relative;
  width:100%;max-width:var(--container);margin:0 auto;
  min-height:460px;border-radius:16px;overflow:hidden;background:#141414;
  display:flex;align-items:stretch;
}
.custom-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding:60px 64px;}
.custom-eyebrow{
  display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  padding:7px 14px;border-radius:100px;margin-bottom:22px;
  background:rgba(255,255,255,.07);color:var(--accent);
  font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.custom-h2{
  font-size:32px;line-height:1.2;font-weight:500;letter-spacing:-.9px;
  color:#fff;max-width:400px;
}
.custom-sub{font-size:16px;line-height:1.55;color:rgba(255,255,255,.6);padding:16px 0 30px;max-width:380px;}
.custom-c .btn-light{width:fit-content;}

/* fixed share of the panel, like the creator section's photo band, so a
   portrait crop never has to stretch across a near-square window */
.custom-img-c{flex:0 0 40%;position:relative;overflow:hidden;background:#0d0d0c;}
.custom-img-c img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;
  transition:transform 1.3s var(--ease);
}
.custom-c:hover .custom-img-c img{transform:scale(1.045);}
.custom-img-c::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#141414 0%,rgba(21,21,19,0) 30%);
}

.js .custom-copy > *{opacity:0;transform:translateY(20px);}
.js .custom-img-c{opacity:0;}

@media (max-width:991px){
  .custom-s{padding:0 0 80px;}
  .custom-c{flex-direction:column;border-radius:0;min-height:0;}
  .custom-copy{padding:48px 28px;}
  .custom-img-c{flex:0 0 300px;width:100%;}
  .custom-img-c::after{background:linear-gradient(180deg,rgba(21,21,19,0) 55%,#141414 100%);}
  .custom-h2{font-size:27px;letter-spacing:-.6px;max-width:none;}
}

/* ═══════════════════════════════════════════
   SIMPLE HERO  (centred text hero — docs-style pages)
   ═══════════════════════════════════════════ */
.simple-hero-s{padding:calc(var(--nav-h) + 90px) 0 64px;text-align:center;}
.simple-hero-c{max-width:720px;margin:0 auto;}
.simple-hero-c .page-h1{margin:0 auto;}
.simple-hero-sub{
  font-size:18px;line-height:1.55;color:var(--ink-mute);
  padding:18px 0 0;max-width:560px;margin:0 auto;
}
.simple-hero-search{
  display:flex;align-items:center;gap:12px;
  max-width:480px;margin:32px auto 0;padding:6px 6px 6px 20px;
  border-radius:100px;box-shadow:inset 0 0 0 1px var(--line);background:var(--white);
  transition:box-shadow .3s var(--ease);
}
.simple-hero-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink-strong);}
.simple-hero-search svg{width:17px;height:17px;color:var(--ink-mute);flex:0 0 auto;}
.simple-hero-search input{
  flex:1;border:0;background:none;font-family:inherit;font-size:15px;color:var(--ink);
  padding:10px 0;min-width:0;
}
.simple-hero-search input::placeholder{color:var(--ink-mute);}
.simple-hero-search button{
  flex:0 0 auto;padding:11px 22px;border-radius:100px;
  background:var(--ink-strong);color:#fff;font-size:14px;font-weight:500;
}
@media (max-width:600px){
  .simple-hero-s{padding-top:calc(var(--nav-h) + 56px);}
}

/* ═══════════════════════════════════════════
   ACCORDION  (FAQs / Help Center)
   ═══════════════════════════════════════════ */
.faq-s{padding:0 0 110px;}
.faq-group{max-width:820px;margin:0 auto 56px;}
.faq-group:last-child{margin-bottom:0;}
.faq-group-title{
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);padding-bottom:18px;
}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 4px;text-align:left;
  font-size:17px;font-weight:500;letter-spacing:-.2px;color:var(--ink-strong);
}
.faq-q-ic{
  flex:0 0 22px;width:22px;height:22px;position:relative;
}
.faq-q-ic::before,.faq-q-ic::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--ink);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.faq-q-ic::before{width:12px;height:1.4px;transform:translate(-50%,-50%);}
.faq-q-ic::after{width:1.4px;height:12px;transform:translate(-50%,-50%);}
.faq-item.is-open .faq-q-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.faq-a{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease),opacity .35s var(--ease);
}
.faq-item.is-open .faq-a{max-height:280px;opacity:1;}
.faq-a-inner{padding:0 4px 24px;font-size:15px;line-height:1.65;color:var(--ink-mute);max-width:680px;}
.js .faq-item{opacity:0;transform:translateY(14px);}

@media (max-width:600px){
  .faq-q{font-size:16px;padding:18px 2px;gap:14px;}
  .faq-a{max-height:0;}
  .faq-item.is-open .faq-a{max-height:420px;}
}

/* ═══════════════════════════════════════════
   HELP CENTER  (category tiles → accordion)
   ═══════════════════════════════════════════ */
.help-cats-s{padding:0 0 90px;}
.help-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto;}
.help-cat{
  display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:var(--r);
  background:var(--wash);color:var(--ink);
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.help-cat:hover{background:#e7e4e0;transform:translateY(-2px);}
.help-cat-ic{
  flex:0 0 36px;width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-strong);color:#fff;
}
.help-cat-ic svg{width:16px;height:16px;}
.help-cat-name{font-size:15px;font-weight:500;}
.help-cat-count{display:block;font-size:12.5px;color:var(--ink-mute);padding-top:2px;}
@media (max-width:600px){.help-cats{grid-template-columns:1fr 1fr;}}

/* ═══════════════════════════════════════════
   CASE STUDIES  (index grid + detail page)
   ═══════════════════════════════════════════ */
.case-grid-s{padding:0 0 110px;}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.case-card{
  display:block;border-radius:16px;overflow:hidden;background:var(--wash);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.case-card:hover{transform:translateY(-4px);box-shadow:0 30px 56px -32px rgba(0,0,0,.4);}
.case-card-img{aspect-ratio:16/10;overflow:hidden;background:#e2e2e2;}
.case-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.case-card:hover .case-card-img img{transform:scale(1.05);}
.case-card-body{padding:26px 28px 30px;}
.case-card-tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);}
.case-card-stat{font-size:40px;line-height:1;letter-spacing:-1.6px;color:var(--ink-strong);padding:12px 0 10px;}
.case-card-title{font-size:19px;font-weight:500;letter-spacing:-.3px;color:var(--ink);}
.case-card-brand{font-size:13px;color:var(--ink-mute);padding-top:6px;}
.js .case-card{opacity:0;transform:translateY(22px);}
@media (max-width:900px){.case-grid{grid-template-columns:1fr;}}

/* case study detail: hero stat strip */
.case-hero-s{padding:calc(var(--nav-h) + 84px) 0 0;}
.case-hero-c{max-width:760px;margin:0 auto;text-align:center;}
.case-hero-tag{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);}
.case-hero-h1{
  font-size:42px;line-height:1.16;font-weight:500;letter-spacing:-1.2px;color:var(--ink-strong);
  padding:16px 0;
}
.case-hero-meta{display:flex;align-items:center;justify-content:center;gap:24px;font-size:14px;color:var(--ink-mute);}
.case-stats-s{padding:56px 0 90px;}
.case-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  max-width:820px;margin:0 auto;background:var(--line);border-radius:var(--r);overflow:hidden;
}
.case-stat{background:var(--white);padding:32px 24px;text-align:center;}
.case-stat-num{font-size:38px;line-height:1;letter-spacing:-1.6px;color:var(--ink-strong);}
.case-stat-label{font-size:13.5px;color:var(--ink-mute);padding-top:10px;}

/* ═══════════════════════════════════════════
   ARTICLE  (long-form: blog posts + case study body)
   ═══════════════════════════════════════════ */
.article-s{padding:0 0 110px;}
.article-body{max-width:700px;margin:0 auto;}
.article-body p{font-size:17px;line-height:1.72;color:var(--ink);padding-bottom:22px;}
.article-body h2{
  font-size:25px;line-height:1.3;font-weight:500;letter-spacing:-.4px;color:var(--ink-strong);
  padding:14px 0 14px;
}
.article-body ul{margin:0 0 22px;padding-left:20px;}
.article-body li{font-size:17px;line-height:1.65;color:var(--ink);padding-bottom:8px;}
/* Fixed landscape-ish ratio, full column width, no side letterboxing.
   Source photography is portrait, so this does crop slightly — object-
   position keeps the crop weighted to the upper frame, where the face
   or product in these shots actually sits, instead of cutting it off. */
.article-img{
  border-radius:var(--r);overflow:hidden;margin:8px 0 34px;background:var(--wash);
  aspect-ratio:4/3;
}
.article-img img{width:100%;height:100%;object-fit:cover;object-position:center 22%;}
@media (max-width:600px){
  .article-img{aspect-ratio:1/1;}
}
.article-quote{
  border-left:2px solid var(--accent);margin:34px 0;padding:2px 0 2px 26px;
  font-size:22px;line-height:1.5;font-weight:500;letter-spacing:-.4px;color:var(--ink-strong);
}
.article-quote cite{
  display:block;font-size:14px;font-weight:400;font-style:normal;letter-spacing:0;
  color:var(--ink-mute);padding-top:10px;
}
.article-cta{
  max-width:700px;margin:56px auto 0;padding:36px;border-radius:var(--r);background:var(--wash);
  text-align:center;
}
.article-cta p{font-size:18px;font-weight:500;color:var(--ink);padding-bottom:18px;}

/* ═══════════════════════════════════════════
   BLOG  (index grid + featured post)
   ═══════════════════════════════════════════ */
.blog-s{padding:0 0 110px;}
.blog-featured{
  display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;
  padding-bottom:64px;margin-bottom:64px;border-bottom:1px solid var(--line);
}
.blog-featured-img{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--wash);}
.blog-featured-img img{width:100%;height:100%;object-fit:cover;}
.blog-tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);}
.blog-featured-title{font-size:30px;line-height:1.2;font-weight:500;letter-spacing:-.7px;color:var(--ink-strong);padding:12px 0 14px;}
.blog-featured-excerpt{font-size:16px;line-height:1.6;color:var(--ink-mute);padding-bottom:20px;}
.blog-meta{font-size:13.5px;color:var(--ink-mute);}
.blog-meta b{color:var(--ink);font-weight:500;}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px;}
.blog-card-img{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--wash);}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.blog-card:hover .blog-card-img img{transform:scale(1.06);}
.blog-card-title{font-size:18px;line-height:1.3;font-weight:500;letter-spacing:-.3px;color:var(--ink);padding:14px 0 8px;}
.blog-card-excerpt{font-size:14.5px;line-height:1.55;color:var(--ink-mute);padding-bottom:12px;}
.js .blog-card{opacity:0;transform:translateY(22px);}
.js .blog-featured-img,.js .blog-featured>div:last-child > *{opacity:0;transform:translateY(20px);}

@media (max-width:991px){
  .blog-featured{grid-template-columns:1fr;gap:28px;}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .case-hero-h1{font-size:32px;letter-spacing:-.8px;}
  .case-stats{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .blog-grid{grid-template-columns:1fr;}
  .article-quote{font-size:19px;}
}

/* ═══════════════════════════════════════════
   MASONRY  (kept for any page still using it)
   ═══════════════════════════════════════════ */
.masonry{column-count:3;column-gap:16px;}
.masonry-item{
  break-inside:avoid;margin-bottom:16px;
  border-radius:var(--r);overflow:hidden;background:var(--wash);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.masonry-item img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease);}
.masonry-item:hover{transform:translateY(-5px);box-shadow:0 30px 56px -34px rgba(0,0,0,.55);}
.masonry-item:hover img{transform:scale(1.04);}
.js .masonry-item{opacity:0;transform:translateY(26px);}

/* capability list on category pages */
.caps-s{padding:0 0 110px;}
.caps-title-c{max-width:640px;margin-bottom:44px;}
.caps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cap{padding:26px;border-radius:var(--r);background:var(--wash);}
.cap-ic{
  width:34px;height:34px;border-radius:9px;margin-bottom:16px;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;
}
.cap h3{font-size:17px;font-weight:500;letter-spacing:-.3px;color:var(--ink);}
.cap p{font-size:14px;line-height:1.55;color:var(--ink-mute);padding-top:8px;}

@media (max-width:991px){
  .masonry{column-count:2;}
  .caps-grid{grid-template-columns:repeat(2,1fr);}
  .cat-slide{width:190px;height:250px;}
}
@media (max-width:600px){
  .masonry{column-count:1;}
  .caps-grid{grid-template-columns:1fr;}
  .cat-slide{width:170px;height:225px;}
}

/* ═══════════════════════════════════════════
   BENEFITS
   ═══════════════════════════════════════════ */
.benefits-s{padding:0 0 120px;}
.benefits-title-c{max-width:806px;}
.benefits-title-c .subtitle{max-width:560px;}
.benefits-items{display:flex;flex-direction:column;gap:95px;margin-top:24px;}
.benefits-item{display:flex;align-items:center;gap:64px;}
.benefits-item:nth-child(even){flex-direction:row-reverse;}
.benefits-item-img-c{
  flex:0 0 46%;border-radius:var(--r);overflow:hidden;background:var(--wash);
  aspect-ratio:4/3;
}
.benefits-item-img-c img{transition:transform 1.2s var(--ease);}
.benefits-item:hover .benefits-item-img-c img{transform:scale(1.045);}
.benefits-item-content{flex:1;min-width:0;}
.h3.link{
  display:inline-block;position:relative;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease);
}
.h3.link:hover{background-size:100% 1px;}
.benefits-item-description{
  font-size:16px;line-height:1.55;color:var(--ink-mute);
  padding:14px 0 26px;max-width:460px;
}
.benefits-item-stat-c{
  display:flex;align-items:flex-start;gap:24px;
  padding-top:24px;border-top:1px solid var(--line);
}
.stat-num{
  flex:0 0 auto;font-size:44px;line-height:1;letter-spacing:-2px;
  color:var(--ink-strong);font-variant-numeric:tabular-nums;
}
.stat-text{flex:1;min-width:0;}
.stat-text p{font-size:15px;line-height:1.5;color:var(--ink-mute);}
.stat-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:15px;font-weight:500;color:var(--ink-strong);
}
.stat-link svg{width:14px;height:14px;transition:transform .4s var(--ease);}
.stat-link:hover svg{transform:translateX(4px);}
.benefits-item-stat-c.quote{border-top:1px solid var(--line);}
.quote-text{font-size:17px;line-height:1.5;color:var(--ink);}
.quote-author{font-size:14px;color:var(--ink-mute);padding-top:10px;}

/* ═══════════════════════════════════════════
   INDUSTRIES  (tabbed crossfade showcase)
   ═══════════════════════════════════════════ */
.ind-s{background:var(--wash);padding:100px 0;}
.ind-title-c{max-width:700px;margin:0 auto 56px;text-align:center;}
.ind-title-c .subtitle{padding:16px 0 0;margin:0 auto;max-width:600px;}

.ind-c{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center;}

.ind-list{display:flex;flex-direction:column;}
.ind-item{
  position:relative;width:100%;text-align:left;
  padding:20px 20px 20px 0;
  border-top:1px solid #d9d9d9;
  display:block;
  transition:padding-left .45s var(--ease);
}
.ind-list .ind-item:last-child{border-bottom:1px solid #d9d9d9;}
.ind-item-name{
  display:block;font-size:22px;font-weight:400;letter-spacing:-.5px;
  color:var(--ink-mute);transition:color .4s var(--ease);
}
.ind-item-desc{
  display:block;font-size:15px;line-height:1.5;color:var(--ink-mute);
  max-width:420px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin-top .5s var(--ease);
}
.ind-item.is-active{padding-left:20px;}
.ind-item.is-active .ind-item-name{color:var(--ink-strong);}
.ind-item.is-active .ind-item-desc{max-height:90px;opacity:1;margin-top:8px;}
.ind-item:hover .ind-item-name{color:var(--ink);}
/* progress bar that fills while this tab is showing */
.ind-item-bar{
  position:absolute;left:0;top:-1px;width:2px;height:calc(100% + 1px);
  background:var(--ink-strong);transform:scaleY(0);transform-origin:top;
}
.ind-item.is-active .ind-item-bar{animation:indfill 5s linear forwards;}
@keyframes indfill{from{transform:scaleY(0);}to{transform:scaleY(1);}}

.ind-stage-c{display:flex;flex-direction:column;}
.ind-stage{
  position:relative;aspect-ratio:3/4;
  border-radius:var(--r);overflow:hidden;background:#ddd9d5;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.65);
}
.ind-stage-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding:13px 22px;border-radius:100px;
  font-size:14px;font-weight:500;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.ind-stage-link svg{width:14px;height:14px;transition:transform .35s var(--ease);}
.ind-stage-link:hover{background:var(--ink);color:var(--white);box-shadow:inset 0 0 0 1px var(--ink);}
.ind-stage-link:hover svg{transform:translateX(3px);}
.ind-slide{
  position:absolute;inset:0;
  opacity:0;transform:scale(1.05);
  transition:opacity .9s var(--ease),transform 1.5s var(--ease);
}
.ind-slide.is-active{opacity:1;transform:scale(1);}
.js .ind-c{opacity:0;transform:translateY(24px);}

@media (max-width:991px){
  .ind-s{padding:70px 0;}
  .ind-c{grid-template-columns:1fr;gap:32px;}
  .ind-stage{max-width:360px;margin:0 auto;width:100%;}
  .ind-item-name{font-size:19px;}
}
@media (max-width:600px){
  .ind-item{padding:16px 12px 16px 0;}
  .ind-item.is-active{padding-left:14px;}
  .ind-item-desc{font-size:14px;}
}

/* ═══════════════════════════════════════════
   COMPARE  (traditional shoot vs. us)
   ═══════════════════════════════════════════ */
.compare-s{padding:110px 0;}
.compare-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding-bottom:26px;border-bottom:1px solid var(--line);
}
.compare-h2{max-width:520px;}
.compare-h2 .dot{color:var(--accent-text);}
.compare-stat{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
.compare-stat-num{
  font-size:60px;line-height:.95;letter-spacing:-3px;color:var(--ink-strong);
  font-variant-numeric:tabular-nums;
}
.compare-stat-txt{font-size:16px;line-height:1.3;color:var(--ink-mute);max-width:190px;}

.compare-c{display:grid;grid-template-columns:1fr 300px;gap:0 24px;margin-top:44px;align-items:start;}
.compare-table{display:flex;flex-direction:column;}
.compare-row{
  display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:20px;
  padding:20px 22px;border-radius:var(--r);align-items:center;
}
.compare-row.zebra{background:var(--wash);}
.compare-row.head{padding-top:0;padding-bottom:14px;background:none;}
.compare-row.head span{font-size:16px;font-weight:500;color:var(--ink);text-align:center;}
.compare-row.head span:first-child{text-align:left;}
.compare-label{font-size:17px;letter-spacing:-.2px;color:var(--ink);}
.compare-old,.compare-new{font-size:14px;line-height:1.45;text-align:center;}
.compare-old{color:var(--ink-mute);}
.compare-new{color:var(--ink);}

.compare-adv{
  border-radius:14px;background:#0d0f14;color:#fff;
  padding:30px 26px;position:sticky;top:100px;
}
.compare-adv-title{
  font-size:18px;font-weight:500;letter-spacing:-.2px;
  color:#ffffff;text-align:center;padding-bottom:8px;
}
.compare-adv-list{display:flex;flex-direction:column;}
.compare-adv-list li{
  list-style:none;font-size:14px;line-height:1.45;
  color:rgba(255,255,255,.82);text-align:center;
  padding:17px 4px;border-bottom:1px solid rgba(255,255,255,.09);
}
.compare-adv-list li:last-child{border-bottom:0;}
.js .compare-row:not(.head),.js .compare-adv{opacity:0;transform:translateY(20px);}

@media (max-width:991px){
  .compare-s{padding:70px 0;}
  .compare-head{flex-direction:column;align-items:flex-start;gap:22px;}
  .compare-stat-num{font-size:46px;}
  .compare-c{grid-template-columns:1fr;gap:28px;}
  .compare-adv{position:static;}
}
@media (max-width:600px){
  .compare-row{grid-template-columns:1fr;gap:8px;padding:16px;text-align:left;}
  .compare-row.head{display:none;}
  .compare-old,.compare-new{text-align:left;padding-left:14px;position:relative;}
  .compare-old::before,.compare-new::before{
    position:absolute;left:0;font-size:11px;font-weight:500;letter-spacing:.04em;
  }
  .compare-old::before{content:"×";color:rgba(255,255,255,.45);}
  .compare-new::before{content:"✓";color:#ffffff;}
  .compare-label{font-weight:500;padding-bottom:4px;}
}

/* ═══════════════════════════════════════════
   CONTACT  (dark split with request form)
   ═══════════════════════════════════════════ */
.contact-s{background:#0d0f14;color:#fff;padding:104px 0;}
.contact-c{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.contact-eyebrow{
  display:block;font-size:11px;font-weight:500;letter-spacing:.34em;
  color:rgba(255,255,255,.64);padding-bottom:20px;
}
.contact-h2{
  font-size:48px;line-height:1.08;font-weight:400;letter-spacing:-2px;color:#fff;
}
.contact-sub{
  font-size:16px;line-height:1.6;color:rgba(255,255,255,.6);
  padding:18px 0 32px;max-width:400px;
}
.contact-card{
  display:flex;align-items:center;gap:16px;
  padding:18px 22px;border-radius:12px;max-width:400px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:background-color .4s var(--ease),transform .4s var(--ease);
}
.contact-card:hover{background:rgba(255,255,255,.09);transform:translateY(-2px);}
.contact-card-ic{
  flex:0 0 38px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;
}
.contact-card-ic svg{width:15px;height:15px;}
.contact-card-mail{display:block;font-size:15px;font-weight:500;color:#fff;}
.contact-card-meta{display:block;font-size:13px;color:rgba(255,255,255,.5);padding-top:2px;}

.contact-form{
  border-radius:16px;padding:32px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.field{display:block;margin-bottom:18px;}
.field-label{
  display:block;font-size:13px;font-weight:500;color:rgba(255,255,255,.78);padding-bottom:8px;
}
.field input,.field textarea{
  width:100%;padding:14px 16px;border-radius:10px;
  background:rgba(255,255,255,.04);color:#fff;
  border:1px solid rgba(255,255,255,.1);
  font-family:inherit;font-size:15px;line-height:1.4;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:104px;}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.3);}
.field input:focus,.field textarea:focus{
  outline:none;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.07);
}
.contact-submit{
  width:100%;justify-content:center;margin-top:6px;
  background:#f0efec;color:var(--ink-strong);
}
.contact-submit:hover{background:#fff;}
.contact-note{
  font-size:12.5px;color:rgba(255,255,255,.62);text-align:center;padding-top:14px;
}
.js .contact-c > *{opacity:0;transform:translateY(24px);}

@media (max-width:991px){
  .contact-s{padding:70px 0;}
  .contact-c{grid-template-columns:1fr;gap:40px;}
  .contact-h2{font-size:36px;letter-spacing:-1.2px;}
  .contact-card,.contact-sub{max-width:none;}
}
@media (max-width:600px){
  .contact-h2{font-size:30px;letter-spacing:-.9px;}
  .contact-form{padding:22px;}
}

/* ═══════════════════════════════════════════
   QUALITY
   ═══════════════════════════════════════════ */
.quality-s{padding:0 0 120px;}
.quality-title-c{max-width:720px;margin:0 auto;text-align:center;}
.quality-subtitle{max-width:620px;margin:0 auto;}
.quality-img-c{
  position:relative;
  width:100%;max-width:1120px;margin:0 auto;
  aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--wash);
}
.quality-img-c img{transform:scale(1.02);}
/* A single glass panel rather than bubbles floating loose on the photo:
   the frame stays put and only the messages inside it change, which
   reads as a real thread instead of a mockup. */
.quality-popup{
  position:absolute;right:28px;bottom:28px;
  width:min(392px,76%);
  border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 0 0 1px rgba(255,255,255,.45),
    0 32px 64px -28px rgba(0,0,0,.62);
}
.qp-head{
  display:flex;align-items:center;gap:11px;
  padding:13px 16px;
  border-bottom:1px solid rgba(21,19,15,.07);
  background:rgba(255,255,255,.4);
}
.qp-avatar{
  flex:0 0 34px;width:34px;height:34px;border-radius:11px;
  background:var(--ink-strong,#121212);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:.06em;
}
.qp-who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.qp-name{font-size:13.5px;font-weight:600;color:var(--ink-strong,#121212);letter-spacing:-.01em;}
.qp-status{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--ink-mute,#696969);
}
/* the live dot does the work the word "online" alone would not */
.qp-status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#ffffff;box-shadow:0 0 0 3px rgba(255,255,255,.24);
  flex:0 0 6px;
}
.qp-body{position:relative;padding:14px 16px 16px;min-height:126px;}

/* Turns overlay each other — only one is on screen at a time, so they
   share the same space rather than stacking down the panel. */
.quality-turn{
  position:absolute;left:16px;right:16px;top:14px;
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;
}
.quality-msg{
  display:flex;flex-direction:column;gap:5px;
  max-width:88%;
  padding:10px 13px;border-radius:14px;
  font-size:13.5px;line-height:1.42;color:var(--ink);
  opacity:0;transform:translateY(12px) scale(.97);
}
.quality-msg-in{
  align-self:flex-start;border-bottom-left-radius:5px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(21,19,15,.05);
}
.quality-msg-out{
  align-self:flex-end;border-bottom-right-radius:5px;
  background:var(--ink-strong,#121212);color:#fff;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
}
.qm-meta{
  display:flex;align-items:center;gap:5px;align-self:flex-end;
  font-size:10.5px;font-variant-numeric:tabular-nums;
  color:var(--ink-mute,#696969);
}
.quality-msg-out .qm-meta{color:rgba(255,255,255,.62);}
.qm-check{display:flex;color:rgba(255,255,255,.72);}
.qm-check svg{width:12px;height:12px;}
.quality-typing{
  align-self:flex-end;display:flex;gap:4px;
  padding:11px 14px;border-radius:14px;border-bottom-right-radius:5px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(21,19,15,.05);
  opacity:0;transform:translateY(12px) scale(.97);
}
.quality-typing span{
  width:6px;height:6px;border-radius:50%;background:var(--ink-mute);
  animation:typing 1.2s infinite ease-in-out;
}
.quality-typing span:nth-child(2){animation-delay:.15s;}
.quality-typing span:nth-child(3){animation-delay:.3s;}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* ═══════════════════════════════════════════
   CREATOR PROGRAM
   ═══════════════════════════════════════════ */
.creator-s{padding:0 24px 120px;}
.creator-c{
  position:relative;
  width:100%;max-width:var(--container);margin:0 auto;
  min-height:482px;border-radius:16px;overflow:hidden;background:var(--dark);
  display:flex;align-items:stretch;
}
.creator-content-c{flex:1;display:flex;align-items:center;padding:64px;position:relative;z-index:2;}
.creator-content{max-width:440px;}
.creator-content .h2{color:var(--white);}
.h2.left-align{text-align:left;}
.creator-sub{color:rgba(255,255,255,.66);padding:18px 0 32px;font-size:17px;}
.creator-img-c{
  flex:0 0 42%;position:relative;overflow:hidden;
}
/* absolute so the portrait's intrinsic ratio can't stretch the band */
.creator-img-c img{position:absolute;inset:0;}
.creator-img-c::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--dark) 0%,rgba(37,37,37,.55) 32%,rgba(37,37,37,0) 70%);
}
.creator-img-c img{transition:transform 1.4s var(--ease);}
.creator-c:hover .creator-img-c img{transform:scale(1.05);}

/* ═══════════════════════════════════════════
   CTA  (scroll-scrubbed letter reveal)
   ═══════════════════════════════════════════ */
.cta-s{background:var(--wash);padding:120px 0;}
.cta-c{display:flex;flex-direction:column;align-items:center;gap:48px;text-align:center;}
.cta-title{
  max-width:900px;
  font-size:50px;line-height:1.18;font-weight:500;letter-spacing:-1.5px;
  color:#dedede;
}
/* letters warm up from a sand tone to ink as the section scrubs past */
.cta-title .sp-line{position:relative;padding-bottom:2px;overflow:visible;}
.cta-title .sp-char{color:#dedede;}
.cta-rule{
  display:block;height:2px;width:100%;max-width:900px;margin:26px auto 0;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  border-radius:2px;
}

/* ═══════════════════════════════════════════
   SUBPAGES  (products/*, models)
   ═══════════════════════════════════════════ */
.page-hero-s{padding:calc(var(--nav-h) + 80px) 0 72px;}
.page-hero-c{display:flex;align-items:center;gap:56px;}
.page-hero-content{flex:1;min-width:0;max-width:520px;}
.page-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:100px;margin-bottom:22px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:13px;font-weight:500;letter-spacing:.02em;
}
.page-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-ink);
}
.page-h1{
  font-size:48px;line-height:1.1;font-weight:400;
  letter-spacing:-2.2px;color:var(--ink-strong);
}
.page-hero-sub{
  font-size:16px;line-height:1.55;color:var(--ink-mute);
  padding:18px 0 30px;max-width:480px;
}
.page-hero-visual{
  flex:0 0 40%;aspect-ratio:4/5;
  border-radius:16px;overflow:hidden;background:var(--wash);
  box-shadow:0 50px 90px -60px rgba(0,0,0,.7);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
/* The frame is overflow:hidden and the picture fills it edge to edge, so
   scaling the picture inside it zooms by cropping. On a single portrait
   that costs nothing; on the flat-lay sets it eats the packshots, which
   run right to the border and are the whole point of the frame. Scaling
   the card instead keeps the gesture and loses none of the picture: the
   frame grows, the image grows with it, the composition stays whole.

   Held to desktop hover — below 992px the card is full width and would
   grow past the container edge. */
@media (hover:hover) and (min-width:992px){
  .page-hero-visual:hover{
    transform:scale(1.025);
    box-shadow:0 62px 104px -58px rgba(0,0,0,.78);
  }
}

.gallery-s{padding:0 0 110px;}
.gallery-title-c{max-width:640px;margin-bottom:44px;}
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.gallery-item{
  border-radius:var(--r);overflow:hidden;background:var(--wash);
  aspect-ratio:3/4;position:relative;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.gallery-item.wide{grid-column:span 2;aspect-ratio:3/2;}
.gallery-item.tall{grid-row:span 2;aspect-ratio:3/8;}
.gallery-item img{transition:transform 1.1s var(--ease);}
.gallery-item:hover{transform:translateY(-5px);box-shadow:0 30px 56px -34px rgba(0,0,0,.55);}
.gallery-item:hover img{transform:scale(1.06);}
.js .gallery-item{opacity:0;transform:translateY(26px);}

/* ── "On model, simplified" — zigzag flow with a scroll-tracked dot ── */
.flow-s{background:var(--wash);padding:100px 0 90px;overflow:hidden;}
.flow-title-c{max-width:640px;margin:0 auto 64px;text-align:center;}
.flow-title-c .subtitle{padding:16px 0 0;margin:0 auto;max-width:560px;font-size:17px;}

/* the flow reads as a narrow column, not full container width */
.flow-track{position:relative;max-width:880px;margin:0 auto;}
/* the rail + dot are decorative; they carry no meaning for AT */
.flow-rail{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  transform:translateX(-50%);
  background-image:linear-gradient(#c9c6c2 55%,transparent 0);
  background-size:1px 9px;background-repeat:repeat-y;
  pointer-events:none;
}
.flow-dot{
  position:absolute;left:50%;top:0;
  width:13px;height:13px;border-radius:50%;
  background:var(--ink-strong);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px var(--wash);
  pointer-events:none;
}

.flow-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 64px;align-items:center;
  margin-bottom:58px;
}
.flow-row:last-of-type{margin-bottom:0;}
.flow-row.flip .flow-copy{grid-column:2;grid-row:1;}
.flow-row.flip .flow-visual{grid-column:1;grid-row:1;}

.flow-num{
  font-size:34px;line-height:1;letter-spacing:-1.4px;
  color:var(--ink-strong);font-variant-numeric:tabular-nums;
}
.flow-copy h3{
  font-size:18px;font-weight:500;letter-spacing:-.3px;
  color:var(--ink);padding:16px 0 8px;
}
.flow-copy p{font-size:15px;line-height:1.5;color:var(--ink-mute);max-width:280px;}

.flow-visual{border-radius:var(--r);overflow:hidden;}
.js .flow-row .flow-copy,.js .flow-row .flow-visual{opacity:0;transform:translateY(26px);}

/* step 01 — upload mockup */
.flow-app{
  display:grid;grid-template-columns:44% 1fr;
  border-radius:10px;overflow:hidden;position:relative;
  background:var(--white);
  box-shadow:0 30px 60px -38px rgba(0,0,0,.45);
}
.flow-app-photo{aspect-ratio:3/4;overflow:hidden;background:#dcdcdc;}
.flow-app-panel{padding:14px 16px;background:var(--white);}
.flow-app-bar{
  display:flex;align-items:center;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.flow-app-logo{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--ink-strong);}
.flow-app-bar span:not(.flow-app-logo){font-size:10px;color:var(--ink-mute);}
.flow-app-tabs{display:flex;gap:12px;padding-top:12px;flex-wrap:wrap;}
.flow-app-tabs span{
  font-size:9.5px;color:var(--ink-mute);
  padding:5px 8px;border-radius:4px;background:#f4f4f4;
}
.flow-app-tabs span.on{background:var(--ink);color:var(--white);}
.flow-app-plus{
  position:absolute;left:44%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:300;line-height:1;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.55);
  transition:transform .4s var(--ease);
}
.flow-app:hover .flow-app-plus{transform:translate(-50%,-50%) scale(1.08);}

/* step 02 — model tiles */
/* step 02 — the roster panel
   Mirrors step 01's window rather than sitting beside it as a contact
   sheet. The panel is on the LEFT here and the photo on the right, so the
   two steps do not read as the same picture twice. */
.flow-app-roster{grid-template-columns:1fr 42%;}
/* In step 01 the photo sets the window's height. Here the panel does,
   because it carries the roster — so the photo has to stretch to match
   rather than keep its own 3:4 box and leave a grey band under it. */
.flow-app-roster .flow-app-photo{aspect-ratio:auto;height:100%;}
.flow-roster-tabs{display:flex;gap:6px;padding-top:12px;}
.flow-roster-tabs span{
  font-size:9.5px;padding:5px 12px;border-radius:100px;
  color:var(--ink-mute);background:#f4f4f4;
}
.flow-roster-tabs span.on{background:var(--ink);color:var(--white);}

.flow-roster{
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
  padding-top:12px;
}
.flow-rm{
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:5px;
  background:#dcdcdc;
}
.flow-rm img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease);}
.flow-rm:hover img{transform:scale(1.07);}
/* the chosen one, marked the way the app marks it */
.flow-rm.is-picked{box-shadow:inset 0 0 0 2px var(--ink-strong);}
.flow-rm-name{
  position:absolute;left:0;right:0;bottom:0;
  padding:8px 5px 4px;
  font-size:8.5px;font-weight:600;letter-spacing:.04em;text-align:center;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));
}

/* step 03 — background swatches */
.flow-bgs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}
.flow-bg{
  aspect-ratio:3/5;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;
  transition:filter .4s var(--ease);
}
.flow-bg:hover{filter:brightness(1.06);}
.flow-bg span{
  position:relative;z-index:2;
  padding:10px;font-size:10px;font-weight:500;letter-spacing:.04em;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.flow-bg.studio{background:linear-gradient(170deg,#fdfdfd,#e2e2e2);}
.flow-bg.studio span{color:#5c5854;text-shadow:none;}
.flow-bg.sand{background:linear-gradient(170deg,#dcdcdc,#9a9a9a);}
.flow-bg.concrete{background:linear-gradient(170deg,#b9bcbd,#71767a);}
.flow-bg.editorial{background:linear-gradient(170deg,#3a3734,#111);}

.flow-result{
  text-align:center;padding-top:52px;
  font-size:15px;font-weight:500;color:var(--ink);
}

@media (max-width:991px){
  .flow-s{padding:70px 0;}
  .flow-title-c{margin-bottom:48px;}
  .flow-rail,.flow-dot{display:none;}
  .flow-row{grid-template-columns:1fr;gap:24px;margin-bottom:56px;}
  .flow-row.flip .flow-copy,.flow-row.flip .flow-visual{grid-column:1;grid-row:auto;}
  .flow-copy p{max-width:none;}
  .flow-num{font-size:36px;}
  .flow-result{padding-top:48px;}
}
@media (max-width:600px){
  .flow-app{grid-template-columns:1fr;}
  .flow-app-plus{left:50%;top:38%;width:48px;height:48px;font-size:24px;}
  .flow-bgs{grid-template-columns:repeat(2,1fr);}
}

/* ═══════════════════════════════════════════
   RENDER TO STOREFRONT (auto-cycling slide)
   ═══════════════════════════════════════════ */
.dada-s{padding:90px 0;}
.dada-c{
  display:grid;grid-template-columns:.85fr 1fr;gap:64px;align-items:center;
  max-width:1100px;margin:0 auto;
}
.dada-copy .subtitle{padding-top:16px;max-width:400px;}
.dada-carousel{
  position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:#1c1c1c;box-shadow:0 40px 90px -50px rgba(0,0,0,.5);
}
.dada-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease);}
.dada-slide.is-active{opacity:1;}
.dada-slide img{width:100%;height:100%;object-fit:cover;}
.dada-visual .carousel-dots{margin-top:22px;}
.js .dada-copy > *,.js .dada-visual{opacity:0;transform:translateY(22px);}

@media (max-width:900px){
  .dada-c{grid-template-columns:1fr;gap:28px;}
  .dada-copy .subtitle{max-width:none;}
}

.steps-s{background:var(--wash);padding:100px 0;}
.steps-title-c{max-width:640px;margin-bottom:56px;}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.step{
  padding:32px;border-radius:var(--r);background:var(--white);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:0 26px 50px -32px rgba(0,0,0,.4);}
.step-num{
  width:38px;height:38px;border-radius:50%;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--white);font-size:15px;font-weight:500;
}
.step h3{font-size:20px;font-weight:500;letter-spacing:-.4px;color:var(--ink);}
.step p{font-size:15px;line-height:1.55;color:var(--ink-mute);padding-top:10px;}

@media (max-width:991px){
  .page-hero-s{padding-top:calc(var(--nav-h) + 64px);}
  .page-hero-c{flex-direction:column;align-items:flex-start;gap:36px;}
  .page-hero-visual{flex:0 0 auto;width:100%;aspect-ratio:16/10;}
  .page-h1{font-size:40px;letter-spacing:-1.4px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-item.tall{grid-row:span 1;aspect-ratio:3/4;}
  .steps-grid{grid-template-columns:1fr;gap:16px;}
}
@media (max-width:600px){
  .page-h1{font-size:32px;letter-spacing:-1px;}
  .gallery-grid{grid-template-columns:1fr;gap:12px;}
  .gallery-item.wide{grid-column:span 1;aspect-ratio:3/2;}
  .steps-s{padding:70px 0;}
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.footer-s{background:var(--ink);color:var(--white);padding:60px 0 20px;font-size:14px;}
.footer-content-c{display:flex;flex-direction:column;gap:56px;}
.footer-description-c{display:flex;gap:64px;align-items:flex-start;flex-wrap:wrap;}
.footer-logo-link{display:flex;flex-direction:column;line-height:1;flex:0 0 auto;}
.footer-logo-link .nav-logo-main{color:var(--white);font-size:22px;}
.footer-logo-link .nav-logo-sub{color:rgba(255,255,255,.5);}
.footer-description-p{max-width:520px;line-height:1.6;color:rgba(255,255,255,.62);}
.footer-links-c{
  display:flex;flex-wrap:wrap;gap:16px 48px;align-items:center;
  padding:28px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-link{
  color:rgba(255,255,255,.66);font-size:15px;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.footer-link:hover{color:var(--white);transform:translateY(-1px);}
.footer-link.small{font-size:13px;}
.footer-social-c{margin-left:auto;display:flex;gap:10px;}
.footer-social{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.footer-social svg{width:19px;height:19px;}
.footer-social:hover{background:var(--white);color:var(--ink);transform:translateY(-2px);}
.footer-copyright-c{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.footer-copyright{color:rgba(255,255,255,.64);font-size:13px;}
.footer-legal{display:flex;gap:24px;}

/* ═══════════════════════════════════════════
   REVEAL DEFAULTS (JS toggles these)
   ═══════════════════════════════════════════ */
.js [data-fade]{opacity:0;transform:translateY(18px);}
.js .sp-char{opacity:0;}
.js [data-benefit] .benefits-item-img-c{clip-path:inset(0 0 100% 0);}
.js .slider-slide{opacity:0;transform:translateY(28px);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .js [data-fade],.js .sp-char,.js .slider-slide{opacity:1!important;transform:none!important;}
  .js [data-benefit] .benefits-item-img-c{clip-path:none!important;}
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
/* Type scale is deliberately fixed — it does NOT grow on wide screens.
   The container caps at 1265px and the headings stay 48px, so a 2560px
   monitor gets more whitespace rather than bigger text. */

@media (max-width:991px){
  .nav-links:not(.desktop),.nav-cta .nav-links.desktop{display:none;}
  .nav-burger{display:block;}
  .nav-cta{margin-left:auto;}
  .hero-s{padding-top:calc(var(--nav-h) + 56px);padding-bottom:0;min-height:640px;align-items:flex-start;}
  .hero-swiper-c{right:0;width:56%;height:60%;opacity:.92;}
  .hero-h1{font-size:40px;letter-spacing:-1.8px;}
  .h2{font-size:38px;letter-spacing:-1px;}
  .cta-title{font-size:44px;letter-spacing:-1.6px;}
  .carousel-title-c{flex-direction:column;align-items:flex-start;gap:20px;}
  .benefits-item,.benefits-item:nth-child(even){flex-direction:column;align-items:flex-start;gap:28px;}
  .benefits-item-img-c{flex:0 0 auto;width:100%;}
  .benefits-items{gap:64px;}
  .slider-nav{position:static;margin-top:28px;}
  .creator-c{flex-direction:column;}
  .creator-content-c{padding:40px 28px;}
  .creator-img-c{flex:0 0 300px;width:100%;}
  .creator-img-c::before{background:linear-gradient(180deg,var(--dark) 0%,rgba(37,37,37,0) 55%);}
  .quality-popup{right:16px;bottom:16px;width:min(320px,86%);}
  .footer-description-c{gap:32px;}
}

@media (max-width:600px){
  .nav-cta-btn-w.mobile-hide{display:none;}
  .hero-h1{font-size:34px;letter-spacing:-1.2px;}
  .hero-h1-small{letter-spacing:-.6px;}
  .hero-subtitle{font-size:15px;}
  .buttons-c .btn,.cta-buttons .btn{flex:1 1 auto;justify-content:center;padding:15px 24px;}
  .h2{font-size:32px;letter-spacing:-.8px;}
  .h3{font-size:24px;}
  .subtitle{font-size:17px;}
  .cta-title{font-size:34px;letter-spacing:-1px;}
  .cta-s{padding:80px 0;}
  .trusted-logo-w{gap:44px;padding-right:44px;}
  .tlogo{font-size:16px;}
  .carousel-s{padding:70px 0 50px;}
  .slider-s{padding:80px 0;}
  .benefits-s,.quality-s{padding-bottom:80px;}
  .stat-num{font-size:36px;}
  .benefits-item-stat-c{flex-direction:column;gap:14px;}
  .quality-popup{position:static;width:100%;padding:16px;}
  .quality-img-c{aspect-ratio:4/5;}
  .quality-img-c .quality-popup{position:absolute;right:12px;bottom:12px;width:calc(100% - 24px);padding:0;}
  .footer-copyright-c{flex-direction:column;gap:12px;}
}

/* ═══════════════════════════════════════════
   PRICING
   Restrained on purpose: one dark card carries the emphasis, every
   other surface stays quiet so the numbers do the talking.
   ═══════════════════════════════════════════ */
.price-s{padding:0 0 40px;}

/* ── billing switch ───────────────────────── */
.price-switch-w{
  display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;padding-bottom:60px;
}
.price-switch{
  position:relative;display:inline-flex;padding:5px;
  background:var(--white);border-radius:100px;
  box-shadow:inset 0 0 0 1px var(--line),0 2px 10px -6px rgba(0,0,0,.25);
}
.price-switch button{
  position:relative;z-index:2;padding:10px 26px;border-radius:100px;
  font-size:14px;font-weight:500;letter-spacing:-.1px;color:var(--ink-mute);
  transition:color .45s var(--ease);
}
.price-switch button.is-active{color:var(--white);}
/* the pill slides rather than repainting, which reads far calmer */
.price-switch-pill{
  position:absolute;top:5px;bottom:5px;left:0;z-index:1;
  border-radius:100px;background:var(--ink-strong);
  transition:transform .5s var(--ease),width .5s var(--ease);
}
.price-switch-note{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:100px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
}
.price-switch-note::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-ink);
}

/* ── card grid ────────────────────────────── */
.price-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;
}
.price-card{
  position:relative;display:flex;flex-direction:column;
  padding:34px 28px;border-radius:20px;
  background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.price-card:not(.is-featured):hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px #dcd8d4,0 30px 56px -40px rgba(0,0,0,.4);
}
/* the recommended plan is the one dark surface on the page */
.price-card.is-featured{
  background:#131313;color:rgba(255,255,255,.72);
  box-shadow:0 40px 80px -44px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.08);
}
.price-card.is-featured::after{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.10),transparent 62%);
}
.price-card.is-featured > *{position:relative;z-index:1;}

/* The generated container is not itself a card, so it steps out of the
   way and lets the four articles be the grid items. */
.price-cards{display:contents;}

/* ── the tinted top edge ──
   Taken from the studio's own plan cards. One strip per plan, its hue
   set on the card, so the four read as a ladder before a word of the
   copy is read. */
.price-edge{
  position:absolute;left:0;right:0;top:0;height:3px;z-index:3;
  border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,
    hsl(var(--hue,210) 70% 58% / .28),
    hsl(var(--hue,210) 78% 60% / .95),
    hsl(var(--hue,210) 70% 58% / .28));
}
.price-card.is-featured .price-edge{height:4px;}

/* and its entrance, dealt left to right rather than all four at once */
.price-card{
  animation:price-card-in .7s var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes price-card-in{
  from{opacity:0;transform:translate3d(0,18px,0);}
  to{opacity:1;transform:none;}
}

/* ── what the pool actually buys ──
   A credit figure means nothing to someone who has never bought one.
   The number of photographs it becomes is the only line on the card
   they already think in, so it gets a box of its own. */
.price-yield{
  margin-top:14px;padding:13px 15px;border-radius:13px;
  background:var(--wash,#f6f4f2);
}
.price-card.is-featured .price-yield{background:rgba(255,255,255,.06);}
.price-yield-n{font-size:14px;line-height:1.35;color:var(--ink-strong);}
.price-card.is-featured .price-yield-n{color:#fff;}
.price-yield-n b{font-weight:600;font-variant-numeric:tabular-nums;}
.price-yield-s{
  margin-top:3px;font-size:11.5px;line-height:1.45;
  color:var(--muted,#7c7873);
}
.price-card.is-featured .price-yield-s{color:rgba(255,255,255,.6);}
.price-yield-s b{font-weight:600;color:inherit;font-variant-numeric:tabular-nums;}

/* the value half of a feature row: "Queue" says nothing, "Queue
   Priority" says the thing */
.price-list b{font-weight:600;color:var(--ink-strong);}
.price-card.is-featured .price-list b{color:#fff;}

@media (prefers-reduced-motion:reduce){
  .price-card{animation:none;}
}

.price-tag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:3;
  padding:6px 15px;border-radius:100px;white-space:nowrap;
  background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.7);
}

/* ── head ─────────────────────────────────── */
.price-name{
  font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-strong);
}
.is-featured .price-name{color:#fff;}
.price-for{
  font-size:13.5px;line-height:1.5;color:var(--ink-mute);
  padding-top:9px;min-height:42px;
}
.is-featured .price-for{color:rgba(255,255,255,.55);}

/* ── price ────────────────────────────────── */
.price-amount-w{padding:24px 0 6px;}
.price-was{
  display:block;height:22px;
  font-size:17px;color:var(--ink-mute);text-decoration:line-through;
  font-variant-numeric:tabular-nums;
}
.is-featured .price-was{color:rgba(255,255,255,.4);}
/* display:block above beats the UA rule for [hidden] unless we say so */
.price-was[hidden],.price-save[hidden]{display:none;}
.price-amount{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-top:2px;}
.price-value{
  font-size:56px;line-height:1;font-weight:500;letter-spacing:-2.8px;
  color:var(--ink-strong);font-variant-numeric:tabular-nums;
}
.is-featured .price-value{color:#fff;}
.price-custom{font-size:44px;letter-spacing:-1.8px;}
.price-unit{font-size:12.5px;line-height:1.3;color:var(--ink-mute);}
.is-featured .price-unit{color:rgba(255,255,255,.5);}
.price-save{
  padding:4px 10px;border-radius:100px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
}
.is-featured .price-save{background:rgba(255,255,255,.14);color:#ffffff;}

/* the number this category actually competes on */
.price-unitcost{
  font-size:12.5px;color:var(--ink-mute);padding:12px 0 20px;min-height:38px;
  font-variant-numeric:tabular-nums;
}
.is-featured .price-unitcost{color:rgba(255,255,255,.5);}
.price-unitcost b{font-weight:600;color:var(--ink);}
.is-featured .price-unitcost b{color:#fff;}

/* ── credits select ───────────────────────── */
.price-select{position:relative;display:block;margin-bottom:14px;}
.price-select select{
  width:100%;appearance:none;-webkit-appearance:none;
  padding:14px 40px 14px 16px;border-radius:11px;
  background:var(--white);box-shadow:inset 0 0 0 1px var(--line);
  font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;
  transition:box-shadow .3s var(--ease);
}
.price-select select:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink-strong);}
.is-featured .price-select select{
  background:rgba(255,255,255,.06);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.is-featured .price-select select option{color:var(--ink);}
.is-featured .price-select select:focus{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);}
.price-select svg{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:11px;height:8px;color:var(--ink-mute);pointer-events:none;
}
.is-featured .price-select svg{color:rgba(255,255,255,.55);}

.price-btn{width:100%;justify-content:center;}
.is-featured .price-btn{background:#fff;color:var(--ink-strong);}
.is-featured .price-btn:hover{background:var(--accent-soft);}
.price-alt{
  font-size:12.5px;color:var(--ink-mute);text-align:center;
  padding:13px 0 24px;min-height:24px;
}
.is-featured .price-alt{color:rgba(255,255,255,.45);}

/* ── features ─────────────────────────────── */
.price-divider{height:1px;background:var(--line);margin-bottom:22px;}
.is-featured .price-divider{background:rgba(255,255,255,.12);}
.price-inherit{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);padding-bottom:15px;
}
.is-featured .price-inherit{color:rgba(255,255,255,.45);}
.price-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.price-list li{
  position:relative;padding-left:26px;
  font-size:14px;line-height:1.5;color:var(--ink);
}
.is-featured .price-list li{color:rgba(255,255,255,.85);}
.price-list li::before{
  content:"";position:absolute;left:0;top:3px;
  width:16px;height:16px;border-radius:50%;background:var(--accent-soft);
}
.is-featured .price-list li::before{background:rgba(255,255,255,.22);}
.price-list li::after{
  content:"";position:absolute;left:4.8px;top:7.5px;
  width:6px;height:3.5px;
  border-left:1.7px solid var(--accent-ink);border-bottom:1.7px solid var(--accent-ink);
  transform:rotate(-45deg);
}
.is-featured .price-list li::after{border-color:#ffffff;}

/* Dotted underline marks the upgrades a lower tier does not include.
   title= carries the explanation, hence the help cursor. */
.price-hl{
  border-bottom:1px dashed #b6b1ab;
  padding-bottom:1.5px;cursor:help;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.price-hl:hover{border-bottom-color:var(--ink-strong);color:var(--ink-strong);}
.is-featured .price-hl{border-bottom-color:rgba(255,255,255,.4);}
.is-featured .price-hl:hover{border-bottom-color:var(--accent);color:#fff;}

.price-bonus{
  margin-top:22px;padding:17px 18px;border-radius:13px;
  background:var(--wash);
}
.is-featured .price-bonus{background:rgba(255,255,255,.06);}
.price-bonus-tag{
  display:inline-block;margin-bottom:11px;
  padding:4px 11px;border-radius:100px;
  background:var(--white);box-shadow:inset 0 0 0 1px var(--line);
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-strong);
}
.is-featured .price-bonus-tag{background:rgba(255,255,255,.12);box-shadow:none;color:#fff;}
.price-bonus ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.price-bonus li{
  position:relative;padding-left:15px;
  font-size:13.5px;line-height:1.45;color:var(--ink);
}
.is-featured .price-bonus li{color:rgba(255,255,255,.8);}
.price-bonus li::before{
  content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--accent-ink);
}
.is-featured .price-bonus li::before{background:var(--accent);}

.price-foot{
  max-width:680px;margin:44px auto 0;text-align:center;
  font-size:13.5px;line-height:1.65;color:var(--ink-mute);
}

/* ── what one credit buys ─────────────────── */
.credit-s{padding:92px 0;background:var(--wash);}
.credit-head{max-width:620px;margin:0 auto 48px;text-align:center;}
.credit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.credit-card{
  padding:30px 26px;border-radius:18px;background:var(--white);
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 24px 44px -38px rgba(0,0,0,.3);
}
.credit-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;margin-bottom:18px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:15px;font-weight:600;
}
.credit-card h3{font-size:17px;font-weight:500;letter-spacing:-.3px;color:var(--ink-strong);}
.credit-card p{font-size:14px;line-height:1.6;color:var(--ink-mute);padding-top:8px;}

/* ── cost anchor ──────────────────────────── */
.anchor-s{padding:100px 0;}
.anchor-head{max-width:620px;margin:0 auto;text-align:center;}
.anchor-c{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  max-width:940px;margin:46px auto 0;
}
.anchor-card{padding:32px 30px 34px;border-radius:20px;}
.anchor-card.old{background:var(--wash);}
.anchor-card.new{
  background:#131313;color:rgba(255,255,255,.75);
  box-shadow:0 40px 80px -46px rgba(0,0,0,.75);
}
.anchor-label{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);
}
.anchor-card.new .anchor-label{color:rgba(255,255,255,.5);}
.anchor-price{
  font-size:38px;line-height:1;font-weight:500;letter-spacing:-1.6px;
  color:var(--ink-strong);padding:14px 0 6px;font-variant-numeric:tabular-nums;
}
.anchor-card.new .anchor-price{color:#fff;}
.anchor-note{font-size:13px;color:var(--ink-mute);padding-bottom:22px;}
.anchor-card.new .anchor-note{color:rgba(255,255,255,.5);}
.anchor-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.anchor-list li{
  position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--ink);
}
.anchor-card.new .anchor-list li{color:rgba(255,255,255,.85);}
.anchor-list li::before{
  content:"";position:absolute;left:2px;top:9px;width:9px;height:1.5px;background:var(--ink-mute);
}
.anchor-card.new .anchor-list li::before{
  left:0;top:6px;width:11px;height:6px;background:none;
  border-left:1.7px solid var(--accent);border-bottom:1.7px solid var(--accent);
  transform:rotate(-45deg);
}

.js .price-card,.js .credit-card,.js .anchor-card{opacity:0;transform:translateY(24px);}

@media (max-width:1100px){
  .price-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .credit-grid{grid-template-columns:1fr;}
  .anchor-c{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .price-grid{grid-template-columns:1fr;}
  .price-switch-w{padding-bottom:38px;}
  .price-value{font-size:48px;letter-spacing:-2.2px;}
  .credit-s,.anchor-s{padding:64px 0;}
}

/* ═══════════════════════════════════════════
   BEFORE / AFTER
   Two stacked images; the "before" sits in a clipped overlay whose
   width is driven by a --pos custom property. Dragging only writes
   that one number, so nothing reflows and the frame stays smooth.
   ═══════════════════════════════════════════ */
.ba-s{padding:100px 0;}
.ba-head{max-width:640px;margin:0 auto 48px;text-align:center;}
.ba-head .subtitle{padding:16px 0 0;}

/* capped so three 3:4 frames do not tower on a wide screen — the drag
   still reads clearly at this size and the section stops dominating */
.ba-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:880px;margin:0 auto;
}

.ba-card{
  margin:0;padding:14px 14px 16px;border-radius:18px;
  background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line),0 30px 56px -44px rgba(0,0,0,.4);
}
.ba-cap{padding:4px 4px 12px;}
.ba-kicker{
  display:block;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-text);
}
.ba-title{
  font-size:15px;font-weight:500;letter-spacing:-.3px;
  color:var(--ink-strong);padding-top:6px;
}

.ba-frame{
  --pos:50%;
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:14px;background:var(--wash);
  cursor:ew-resize;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.ba-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;-webkit-user-drag:none;
}
/* The "before" layer sits exactly on top of the "after" one, both at
   full frame size. Only the visible REGION changes as you drag —
   clip-path reveals, it does not resize. An earlier version animated
   the layer's width instead, which squashed the image as the divider
   moved rather than wiping across it. */
.ba-clip{
  position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  will-change:clip-path;
}
.ba-clip .ba-img{width:100%;height:100%;object-fit:cover;}

.ba-pill{
  position:absolute;top:12px;z-index:3;
  padding:5px 11px;border-radius:100px;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,.86);color:var(--ink-strong);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
  pointer-events:none;
}
.ba-pill-before{left:12px;}
.ba-pill-after{right:12px;}

.ba-handle{
  position:absolute;top:50%;left:var(--pos);z-index:4;
  width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--ink-strong);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
  cursor:ew-resize;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ba-handle svg{width:19px;height:19px;}
.ba-handle:hover{transform:scale(1.08);}
.ba-handle:active{transform:scale(.95);}
.ba-handle:focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px;}
/* the seam itself */
.ba-handle::before{
  content:"";position:absolute;left:50%;top:-1000px;bottom:-1000px;
  width:2px;margin-left:-1px;background:rgba(255,255,255,.9);
  box-shadow:0 0 12px rgba(0,0,0,.35);
}

.js .ba-card{opacity:0;transform:translateY(24px);}

@media (max-width:980px){
  .ba-grid{grid-template-columns:1fr 1fr;}
  .ba-card:last-child{grid-column:1 / -1;max-width:calc(50% - 10px);margin:0 auto;}
}
@media (max-width:620px){
  .ba-s{padding:64px 0;}
  .ba-grid{grid-template-columns:1fr;}
  .ba-card:last-child{max-width:none;}
}

/* ═══════════════════════════════════════════
   BEHIND THE SCENES
   Asymmetric mosaic: one tall hero frame carrying the crew shot, four
   supporting frames around it. Captions sit under each rather than
   over the image so nothing important gets covered.
   ═══════════════════════════════════════════ */
.bts-s{padding:100px 0;background:var(--wash);}
.bts-head{max-width:660px;margin:0 auto 48px;text-align:center;}
.bts-head .subtitle{padding:16px 0 0;}

.bts-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "a a b c"
    "a a d e";
  gap:14px;
  /* held well inside the container — at full width the hero frame
     dominated the page and the set read as a photo essay */
  max-width:860px;margin:0 auto;
}
.bts-cell{margin:0;display:flex;flex-direction:column;}
.bts-cell img{
  width:100%;height:100%;object-fit:cover;
  border-radius:16px;background:#dedbd8;
  box-shadow:0 26px 50px -40px rgba(0,0,0,.55);
  transition:transform .7s var(--ease);
}
.bts-cell:hover img{transform:scale(1.02);}
.bts-cell figcaption{
  padding-top:11px;font-size:12.5px;line-height:1.45;color:var(--ink-mute);
}
.bts-a{grid-area:a;}
.bts-b{grid-area:b;}
.bts-c{grid-area:c;}
.bts-d{grid-area:d;}
.bts-e{grid-area:e;}
/* the hero frame is tall; the rest are square-ish so the rows line up */
.bts-a img{aspect-ratio:4/5;}
.bts-b img,.bts-c img,.bts-d img,.bts-e img{aspect-ratio:1/1;}

.bts-foot{
  max-width:620px;margin:32px auto 0;text-align:center;
  font-size:14.5px;line-height:1.6;color:var(--ink-mute);
}

.js .bts-cell{opacity:0;transform:translateY(24px);}

@media (max-width:900px){
  .bts-grid{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "a a"
      "b c"
      "d e";
  }
  .bts-a img{aspect-ratio:4/3;}
}
@media (max-width:600px){
  .bts-s{padding:64px 0;}
  .bts-grid{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e";}
  .bts-a img,.bts-b img,.bts-c img,.bts-d img,.bts-e img{aspect-ratio:4/5;}
}

/* ═══════════════════════════════════════════
   VIDEO REEL  (UGC + product ads)
   Clips are preload="none" and only fetch when played, so a page with
   six of them does not pull megabytes before anyone asks.
   ═══════════════════════════════════════════ */
.reel-s{padding:0 0 100px;}
.reel-head{max-width:660px;margin:0 auto 46px;text-align:center;}
.reel-head .subtitle{padding:16px 0 0;}

.reel-grid{display:grid;gap:18px;}
.reel-grid-3{grid-template-columns:repeat(3,1fr);}

.reel-card{margin:0;}
.reel-video{
  position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:18px;background:#131313;
  box-shadow:0 30px 56px -40px rgba(0,0,0,.6);
}
.reel-video video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease),opacity .4s var(--ease);
}
.reel-card:hover .reel-video video{transform:scale(1.02);}
.reel-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);color:var(--ink-strong);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.7);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.reel-play svg{width:22px;height:22px;margin-left:2px;}
.reel-play:hover{transform:translate(-50%,-50%) scale(1.07);}
.reel-video.is-playing .reel-play{opacity:0;pointer-events:none;}

.reel-card figcaption{padding:13px 4px 0;}
.reel-kicker{
  display:block;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-text);
}
.reel-title{
  font-size:15.5px;font-weight:500;letter-spacing:-.3px;
  color:var(--ink-strong);padding-top:6px;
}

.js .reel-card{opacity:0;transform:translateY(24px);}

/* ═══ WHY GRID (shared by both pages) ═══ */
.why-s{padding:0 0 100px;}
.why-head{max-width:620px;margin:0 auto 44px;text-align:center;}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.why-card{
  padding:30px 28px 32px;border-radius:20px;background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line);
}
.why-n{
  display:block;font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--accent-text);padding-bottom:14px;
}
.why-card h3{font-size:18px;font-weight:500;letter-spacing:-.4px;color:var(--ink-strong);}
.why-card p{font-size:14.5px;line-height:1.6;color:var(--ink-mute);padding-top:10px;}
.js .why-card{opacity:0;transform:translateY(24px);}

@media (max-width:900px){
  .reel-grid-3{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .reel-grid-3{grid-template-columns:1fr;}
  .reel-s,.why-s{padding-bottom:64px;}
}
.reel-grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1000px){.reel-grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.reel-grid-4{grid-template-columns:1fr;}}

/* ── UGC stills grid ──────────────────────────────────────────
   Portrait crops so the creator-and-product framing survives; the
   grid is capped so eight cells never sprawl on a wide monitor. */
.ugc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:1080px;
  margin:0 auto;
}
.ugc-cell{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background:var(--c-surface,#f4f2ef);
}
.ugc-cell img{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.ugc-cell:hover img{transform:scale(1.04);}
@media (max-width:900px){.ugc-grid{grid-template-columns:repeat(3,1fr);gap:10px;}}
@media (max-width:600px){.ugc-grid{grid-template-columns:repeat(2,1fr);}}

/* ── Marquee call-out ─────────────────────────────────────────
   Ported from a React/Framer-Motion component; this site has no build
   step, so the loop is a CSS animation instead. The track holds two
   identical sets and travels exactly -50%, which lands the second set
   where the first began — no visible seam and no JS to keep in sync. */
.mq-s{
  position:relative;
  padding:0 0 110px;
  overflow:hidden;
}
.mq-c{
  max-width:660px;margin:0 auto;text-align:center;
  padding-bottom:52px;
}
.mq-tag{
  display:inline-block;margin-bottom:18px;
  padding:6px 15px;border-radius:100px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:500;color:var(--ink-mute,#696969);
}
.mq-title{
  font-size:clamp(34px,5vw,60px);
  font-weight:400;letter-spacing:-.03em;line-height:1.04;
  color:var(--ink-strong,#121212);
}
.mq-sub{
  margin:20px auto 0;max-width:46ch;
  font-size:16px;line-height:1.6;color:var(--ink-mute,#696969);
}
.mq-btn{margin-top:30px;}

.mq-strip{
  width:100vw;margin-left:calc(50% - 50vw);
  /* fades both ends so the loop slides out of view rather than cutting */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  padding:26px 0;
}
.mq-track{
  display:flex;width:max-content;
  animation:mq-scroll 48s linear infinite;
}
.mq-set{display:flex;gap:18px;padding-right:18px;}
.mq-item{
  margin:0;flex:0 0 auto;
  width:186px;aspect-ratio:3/4;
  border-radius:16px;overflow:hidden;
  background:var(--wash,#f4f4f4);
  box-shadow:0 26px 50px -32px rgba(0,0,0,.45);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
/* alternating tilt, the detail that stops it reading as a plain filmstrip */
.mq-item:nth-child(odd){transform:rotate(-2deg);}
.mq-item:nth-child(even){transform:rotate(2.5deg);}
.mq-item:hover{transform:rotate(0deg) scale(1.04);}
.mq-item img{width:100%;height:100%;object-fit:cover;display:block;}

@keyframes mq-scroll{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

@media (max-width:700px){
  .mq-s{padding-bottom:70px;}
  .mq-item{width:132px;}
  .mq-track{animation-duration:34s;}
}
/* an endless loop is exactly what reduced-motion asks you to stop */
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;}
  .mq-item{transition:none;}
}

/* ── Tools page ───────────────────────────────────────────── */
.tool-s{padding:0 0 96px;}
.tool-s-alt{background:var(--c-surface,#f6f4f1);padding-top:96px;}
.tool-row{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:56px;
  align-items:center;
}
/* flip puts the copy on the right without reordering the DOM, so the
   heading still comes first for screen readers */
.tool-row-flip .tool-head{order:2;}
.tool-row-flip .tool-media{order:1;}
.tool-head .h2{margin:14px 0 12px;}
.tool-head .subtitle{margin-bottom:26px;max-width:46ch;}

.tool-pill{
  display:inline-block;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:600;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid transparent;
}
.tool-pill.is-live{background:#ededed;color:#1a1a1a;border-color:#d6d6d6;}
.tool-pill.is-preview{background:#f7f7f7;color:#5a5a5a;border-color:#e0e0e0;}
.tool-pill.is-soon{background:#f0eeeb;color:#696969;border-color:#e0dcd7;}

/* start alignment matters: the two remove-background clips have different
   ratios, so stretching them to a shared row height would crop one */
.tool-media{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.tool-media-one{grid-template-columns:minmax(0,1fr);}
.tool-clip{margin:0;}
/* --ar is set per clip from the file's real pixel dimensions, so a clip
   shown on its own is never cropped. */
.tool-clip-v{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#111;
  aspect-ratio:var(--ar,4/3);
}
.tool-clip-v video{width:100%;height:100%;object-fit:cover;display:block;}

/* Two clips side by side must match in size, but these two are landscape
   and portrait. Fitting them whole leaves black bars down the sides, so
   they fill the square instead and lose a little at the edges — the
   subject is centred in both, so nothing that matters is cut. */
.tool-media:not(.tool-media-one) .tool-clip-v{aspect-ratio:1;background:transparent;}
.tool-media:not(.tool-media-one) .tool-clip-v video{object-fit:cover;}
.tool-clip figcaption{
  margin-top:9px;
  font-size:13px;
  color:var(--c-muted,#696969);
}

.tool-pairs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:56px;
}
.tool-pair{margin:0;}
/* the cut-out sits directly on top of the original and fades in on hover,
   so the comparison reads without any drag interaction */
.tool-pair-imgs{
  position:relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(45deg,#e6e6e6 25%,transparent 25%,transparent 75%,#e6e6e6 75%),
    linear-gradient(45deg,#e6e6e6 25%,#fff 25%,#fff 75%,#e6e6e6 75%);
  background-size:18px 18px;
  background-position:0 0,9px 9px;
  /* every pair is exactly 900x502, so matching that ratio means the
     checkerboard shows only through the cut-out's transparency rather
     than as letterbox bands above and below the photo */
  aspect-ratio:900/502;
}
.tool-pair-imgs img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .35s ease;
}
.tool-pair-imgs .is-after{
  position:absolute;
  inset:0;
  opacity:0;
}
/* The overlay is a cut-out with a transparent background, so fading it in
   over the original changes nothing — the original shows straight through
   where the cut-out is transparent. The original has to fade OUT at the
   same time, which is what lets the checkerboard behind both show. */
.tool-pair:hover .tool-pair-imgs img:not(.is-after),
.tool-pair:focus-within .tool-pair-imgs img:not(.is-after){opacity:0;}
.tool-pair:hover .is-after,
.tool-pair:focus-within .is-after{opacity:1;}
.tool-pair figcaption{margin-top:9px;font-size:13px;color:var(--c-muted,#696969);}

.tool-other-head{text-align:center;margin-bottom:40px;}
.tool-other-head .subtitle{margin:10px auto 0;max-width:52ch;}
.tool-other-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.tool-other-card{
  padding:26px 24px 28px;
  border:1px solid var(--c-line,#e5e1dc);
  border-radius:16px;
  background:#fff;
}
.tool-other-card h3{margin:14px 0 8px;font-size:19px;font-weight:500;}
.tool-other-card p{font-size:14px;line-height:1.6;color:var(--c-muted,#696969);margin:0;}

@media (max-width:1000px){
  .tool-pairs{grid-template-columns:repeat(2,1fr);}
  .tool-other-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:840px){
  .tool-row{grid-template-columns:1fr;gap:32px;}
  .tool-row-flip .tool-head{order:1;}
  .tool-row-flip .tool-media{order:2;}
  .tool-s{padding-bottom:64px;}
  .tool-s-alt{padding-top:64px;}
}
@media (max-width:560px){
  .tool-other-grid{grid-template-columns:1fr;}
  .tool-pairs{gap:10px;}
}

/* ═══════════════════════════════════════════
   MONOCHROME — the finish
   ═══════════════════════════════════════════
   The palette above made the site neutral. This makes it look expensive,
   and almost all of it is restraint rather than addition: fewer weights,
   tighter tracking, thinner rules, one easing curve, and motion that is
   short enough to feel like response rather than performance.

   Photographs stay in colour on purpose. The chrome is black and white;
   the work is not. Greyscaling the portfolio would monochrome the one
   thing being sold — an image studio has to show what it produces. That
   contrast is also what makes the neutral frame read as deliberate
   rather than as a site with no art direction.
   ═══════════════════════════════════════════ */

/* ── type ──
   Headlines this size need negative tracking; at display sizes the
   default spacing reads loose and cheap. Inter's optical sizing axis is
   already loaded, so let it do its job. */
h1,.hero-h,.sec-h,.cta-h{
  letter-spacing:-.035em;
  font-optical-sizing:auto;
  text-wrap:balance;
}
h2,h3{letter-spacing:-.022em;text-wrap:balance;}
p{text-wrap:pretty;}

/* Small caps labels carry the structure in a monochrome layout, since
   there is no colour left to mark a section. */
.sec-eyebrow,.eyebrow,.compare-label{
  letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;font-weight:600;
  color:var(--ink-mute);
}

/* ── rules ──
   One hairline, everywhere, at the same weight. Mixed border widths are
   the fastest way to make a monochrome page look assembled by hand. */
hr,.rule{border:0;height:1px;background:var(--line);}

/* ── links ──
   The underline grows from the left instead of appearing. With no colour
   to change on hover, the movement is the feedback. */
a:not(.btn):not(.nav-logo):not([class*="card"]){
  position:relative;
}
.link-u,.foot-col a,.nav-dd-link{
  position:relative;text-decoration:none;
}
.link-u::after,.foot-col a::after,.nav-dd-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--e-out);
}
.link-u:hover::after,.foot-col a:hover::after,.nav-dd-link:hover::after{
  transform:scaleX(1);
}

/* ── buttons ──
   A lift of one pixel and a shadow that tightens. Nothing changes hue,
   so the depth has to carry it. */
.btn{
  transition:transform .32s var(--e-out),background-color .32s var(--e-out),
             color .32s var(--e-out),box-shadow .32s var(--e-out);
  will-change:transform;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);transition-duration:.08s;}
.btn-dark,.btn-primary{box-shadow:0 1px 2px rgba(0,0,0,.16),0 10px 24px -14px rgba(0,0,0,.5);}
.btn-dark:hover,.btn-primary:hover{box-shadow:0 1px 2px rgba(0,0,0,.2),0 16px 34px -16px rgba(0,0,0,.55);}

/* ── images ──
   A slow push-in inside a fixed frame. The frame never moves, so the
   grid stays still while the picture breathes. */
.card img,.ind-card img,.work-card img,.cat-card img,figure img{
  transition:transform 1.1s var(--e-out),filter .6s var(--e-out);
  will-change:transform;
}
.card:hover img,.ind-card:hover img,.work-card:hover img,.cat-card:hover img{
  transform:scale(1.035);
}

/* ── cards ──
   The border darkens rather than the background changing. On a white
   page that is the quietest possible hover, and the most expensive. */
.card,.ind-card,.work-card,.cat-card,.price-card{
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),
             border-color .45s var(--e-out);
}
.card:hover,.ind-card:hover,.work-card:hover,.cat-card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(0,0,0,.04),0 22px 44px -28px rgba(0,0,0,.34);
}

/* ── scroll reveal ──
   Deliberately absent. main.js already runs a complete reveal system on
   these pages — `[data-split]` for the masked word rise on headings,
   `[data-fade]` for paragraphs and button rows — driven by GSAP and
   ScrollTrigger alongside Lenis. A second observer-based layer was
   written for this pass and then removed: two systems animating the same
   page is how elements end up stuck invisible, and this project has
   already lost time to exactly that. Anything that should reveal gets
   the site's own attribute instead. */

@media (prefers-reduced-motion:reduce){
  .btn:hover,.card:hover,.ind-card:hover,.work-card:hover,.cat-card:hover{transform:none;}
  .card:hover img,.ind-card:hover img,.work-card:hover img,.cat-card:hover img{transform:none;}
  .link-u::after,.foot-col a::after,.nav-dd-link::after{transition:none;}
}

/* ── focus ──
   Black on white, two pixels, always offset. It has to survive on every
   surface now that there is no accent to fall back on. */
:focus-visible{
  outline:2px solid var(--ink-strong);
  outline-offset:3px;
  border-radius:2px;
}

/* the drawn mark, beside the name — see css/app.css for the studio side */
/* ── the mark beside the name ──
   Two things were making it recede. It inherited the link colour, a step
   lighter than the ink-strong the wordmark sets for itself, so it was
   literally the paler of the two. And it was set to roughly the cap
   height, which is right for a letterform but wrong for this: the shape
   is mostly negative space, so an equal box holds far less ink than the
   word does. Matching the colour and going a third larger balances them. */
.nav-logo-mark{
  width:1.34em;height:1.34em;flex:none;display:block;
  color:var(--ink-strong);
}
.footer-logo-link,.auth-brand{display:flex;flex-direction:row;align-items:center;gap:.42em;}
.footer-logo-link .nav-logo-mark{color:var(--white);}

/* the mock studio bar in the marketing illustrations carries the same
   mark-only lockup the real bar does, so the picture does not show an
   interface that no longer exists */
.flow-app-logo{display:inline-flex;align-items:center;}
.flow-app-logo svg{width:12px;height:12px;display:block;}

/* the show/hide control inside the password field */
.auth-peek{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;padding:6px 4px;
  font-family:inherit;font-size:12.5px;font-weight:500;color:var(--ink-mute);
  transition:color .2s var(--ease);
}
.auth-peek:hover{color:var(--ink-strong);}
.auth-field:has(.auth-peek) input{padding-right:58px;}
.auth-hint{margin:-4px 0 2px;font-size:12px;color:var(--ink-mute);}

/* ── the packaging wordmark, in the copyright line ──
   The typeface the bottle uses — geometric, caps, widely tracked — set
   at the size the line already runs at. A signature rather than a
   heading: it is the quietest place on the page, which is why it can
   carry the treatment without competing with the drawn mark up top.
   The trailing tracking is pulled back so the full stop after it does
   not drift away from the word. */
.footer-wordmark{
  font-family:Jost,'Inter',system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  margin-right:-.22em;
}

/* ── legal pages ──
   A measure of about 68 characters and generous leading, because these
   are the pages people read when something has gone wrong and they are
   already annoyed. Nothing decorative; the job is legibility. */
.legal-date{margin-top:14px;font-size:12.5px;color:var(--ink-mute);}
.legal-s{padding:0 0 90px;}
.legal-c{max-width:68ch;margin:0 auto;}
.legal-c h2{
  margin:44px 0 14px;font-size:19px;font-weight:600;
  letter-spacing:-.015em;color:var(--ink-strong);
}
.legal-c h2:first-child{margin-top:0;}
.legal-c p{margin:0 0 14px;font-size:15.5px;line-height:1.72;color:var(--ink);}
.legal-c ul{margin:0 0 16px;padding-left:22px;}
.legal-c li{margin-bottom:9px;font-size:15.5px;line-height:1.7;color:var(--ink);}
.legal-c b{font-weight:600;color:var(--ink-strong);}
.legal-c a{color:var(--ink-strong);text-decoration:underline;text-underline-offset:3px;}

/* the paragraphs worth stopping at — set apart rather than emphasised,
   because bolding a whole paragraph makes it harder to read, not easier */
.legal-note{
  margin:0 0 22px;padding:18px 20px;border-radius:14px;
  background:var(--wash);border-left:2px solid var(--ink-strong);
  font-size:15px;line-height:1.68;color:var(--ink);
}
.legal-note b{font-weight:600;}


/* ═══════════════════════════════════════════════════════════════════
   PHONE LAYER  ·  ≤760px only
   ═══════════════════════════════════════════════════════════════════
   Everything below is inside a max-width query, appended after the rest
   of the sheet, so nothing here can reach a desktop viewport. It exists
   because the page was laid out for a wide screen and then merely
   allowed to reflow: the hero art stayed absolutely positioned on top
   of its own copy, forty sections kept close to their desktop padding
   (the home page ran sixteen phone screens), micro-labels held their
   8.5–11px desktop sizes, and footer links were 20px tall targets.
   =================================================================== */

@media (max-width:760px){

  /* ── 1. hero ────────────────────────────────────────────────────
     .hero-swiper-c is position:absolute, pinned right, 56% wide. On a
     375px screen that put a 210px cut-out hard against the right edge
     and straight through the paragraph and the button underneath it.
     Phones get the same parts stacked instead: copy, then the art. */
  .hero-s{
    display:flex;flex-direction:column;align-items:stretch;
    padding:calc(var(--nav-h) + 26px) 0 0;
    min-height:0;
  }
  .hero-s > .container{order:1;}
  .hero-swiper-c{
    order:2;
    position:static;right:auto;bottom:auto;
    width:100%;height:auto;
    margin-top:4px;opacity:1;
  }
  .hero-swiper,
  .hero-swiper .swiper-wrapper,
  .hero-slide{height:clamp(260px,72vw,360px);}
  .hero-slide img{object-position:bottom center;transform:none;}
  .hero-subtitle{padding:16px 0 26px;}

  /* ── 2. vertical rhythm ─────────────────────────────────────────
     Desktop sections breathe at 90–120px top and bottom. Kept at that
     scale on a phone they turn a page into a corridor — the home page
     measured 12,960px, sixteen screens, most of it air. Roughly half,
     with every deliberate zero left at zero. */
  .trusted-s{padding:40px 0;}
  .carousel-s{padding:56px 0 44px;}
  .slider-s{padding:56px 0 60px;}
  .roster-s{padding:56px 0;}
  .focus-s{padding:0 0 52px;}
  .custom-s{padding:0 20px 56px;}
  .simple-hero-s{padding:calc(var(--nav-h) + 40px) 0 40px;}
  .faq-s{padding:0 0 56px;}
  .help-cats-s{padding:0 0 48px;}
  .case-grid-s{padding:0 0 56px;}
  .case-hero-s{padding:calc(var(--nav-h) + 36px) 0 0;}
  .case-stats-s{padding:36px 0 48px;}
  .article-s{padding:0 0 56px;}
  .blog-s{padding:0 0 56px;}
  .caps-s{padding:0 0 56px;}
  .benefits-s{padding:0 0 56px;}
  .ind-s{padding:56px 0;}
  .compare-s{padding:56px 0;}
  .contact-s{padding:56px 0;}
  .quality-s{padding:0 0 56px;}
  .creator-s{padding:0 20px 56px;}
  .cta-s{padding:60px 0;}
  .page-hero-s{padding:calc(var(--nav-h) + 34px) 0 44px;}
  .gallery-s{padding:0 0 56px;}
  .flow-s{padding:56px 0 48px;}
  .dada-s{padding:48px 0;}
  .steps-s{padding:56px 0;}
  .price-s{padding:0 0 32px;}
  .credit-s{padding:52px 0;}
  .anchor-s{padding:56px 0;}
  .ba-s{padding:56px 0;}
  .bts-s{padding:56px 0;}
  .reel-s{padding:0 0 56px;}
  .why-s{padding:0 0 56px;}
  .mq-s{padding:0 0 56px;}
  .tool-s{padding:0 0 52px;}
  .legal-s{padding:0 0 48px;}
  .footer-s{padding:44px 0 20px;}

  /* ── 3. type that survives a phone ──────────────────────────────
     A 10px eyebrow is a design detail at arm's length on a monitor and
     a squint on a handset. Nothing below 11.5px, and the smallest sizes
     get a little letter-spacing back so they stay legible rather than
     just larger. */
  .ba-kicker,
  .ba-pill,
  .compare-label,
  .contact-eyebrow,
  .price-tag,
  .price-inherit,
  .anchor-label,
  .tool-pill,
  .cat-slide-count,
  .flow-rm-name,
  .page-eyebrow,
  .focus-cap-line{font-size:12px;}
  .price-yield-s{font-size:12.5px;}
  .auth-or,
  .auth-legal{font-size:12.5px;}
  .hero-subtitle,
  .subtitle{font-size:15.5px;line-height:1.6;}

  /* ── 4. targets a thumb can actually hit ────────────────────────
     Footer links rendered 20px tall, the arrows 38px, the back link 19.
     Padding rather than height, so the text keeps its position and only
     the hit area grows. */
  .footer-link,
  .stat-link,
  .auth-back{display:inline-flex;align-items:center;min-height:40px;}
  .footer-links,
  .footer-col{gap:0;}
  .footer-social{width:42px;height:42px;}
  .reimagined-arrow{width:44px;height:44px;}
  .nav-logo,
  .footer-logo-link{min-height:40px;align-items:center;}
}

@media (max-width:760px){

  /* ── the category picker had lost its point ─────────────────────
     .ind-c is a two-column grid on desktop: the list on one side, the
     picture it controls on the other. Stacked on a phone the picture
     landed after all ten names — 575px below the thing that changes
     it — so the section read as a bare list of words and the tap
     appeared to do nothing. The picture goes first; the list under it
     is then visibly a set of buttons for the picture above. */
  .ind-c{display:flex;flex-direction:column;gap:18px;}
  .ind-stage-c{order:-1;}

  /* ── the comparison was already colour-blind ────────────────────
     The head row carrying "Traditional shoot" and "With Vitonize" is
     display:none on a phone, and the × and ✓ written to replace it
     were inked rgba(255,255,255,.45) and #ffffff — on a section whose
     rows are #ffffff and #f4f4f4. The marks were being drawn white on
     white, so every row was two lines of unlabelled copy and the
     comparison made no argument at all. Same marks, inked for the
     ground they actually sit on, and given room to sit in. */
  .compare-old,.compare-new{padding-left:19px;}
  .compare-old::before,
  .compare-new::before{top:1px;font-weight:600;}
  .compare-old::before{color:#b3b3b3;font-size:14px;}
  .compare-new::before{color:var(--ink-strong,#1a1a1a);font-size:12px;}

  /* ── the benefit stills were being cut in half ──────────────────
     Every one of these is a 3:4 portrait — some of them compositions
     with a chart card built into the lower third — dropped into a 4:3
     landscape box with object-fit:cover. That threw away 44% of each
     frame and sliced the card off mid-word. 4:5 costs the sources
     about six percent instead. */
  .benefits-item-img-c{aspect-ratio:4/5;}
}

@media (max-width:760px){

  /* ── every product and work hero was losing over half its picture ──
     .page-hero-visual is 4/5 on desktop and switches to 16/10 below
     991px. Every source behind it is a portrait: sixteen pages, ratios
     from 0.56 to 1.0, dropped into a 1.6 landscape box with
     object-fit:cover. That discards 53–65% of each frame, off the top
     and bottom — which on the on-model hero meant the packshot column
     sliced through and the model with no head.

     4/5 costs the 0.75 sources, which are fourteen of the sixteen,
     about six percent instead. */
  .page-hero-visual{aspect-ratio:4/5;}
}

@media (max-width:760px){

  /* The creator still is a 9:16 portrait in a 1.12 box — half of it
     thrown away. Same story as the page heroes, one section further
     down the home page. */
  .creator-img-c{aspect-ratio:4/5;}

  /* Sign-in: the brand line, the show-password toggle and the two legal
     links were 15–29px tall. Nothing here changes where the text sits,
     only how much of it answers to a thumb. */
  .auth-brand{min-height:40px;display:flex;align-items:center;justify-content:center;}
  .auth-peek{width:40px;height:40px;}
  .auth-legal a{display:inline-block;padding:6px 2px;}
}

@media (max-width:760px){

  /* The last labels still under 11.5px. The flow mock is a miniature of
     the app drawn inside the "how it works" panel — decorative, except
     that its tab labels are the actual step names, so they are worth
     being able to read. */
  .reel-kicker,
  .qp-avatar,
  .qm-meta{font-size:11.5px;}
  .flow-app-bar span,
  .flow-app-tabs span{font-size:11px;}
}

@media (max-width:760px){
  /* The flow mock's own rules are deeper than the ones above, so these
     need the same reach to land. */
  .flow-app-panel .flow-app-bar span,
  .flow-app-panel .flow-roster-tabs span,
  .flow-bgs .flow-bg span{font-size:11.5px;}

  /* min-height does nothing to an inline anchor. */
  .auth-legal a{display:inline-flex;align-items:center;min-height:40px;padding:0 3px;}
}

@media (max-width:760px){

  /* ── the menu was cut off at a hardcoded height ──────────────────
     .nav-s.menu-open .nav-mobile opens to max-height:420px, and the
     panel keeps overflow:hidden because that is what makes the
     max-height slide work. The panel now holds ten category links
     and a Get Started button — 648px of content — so the last three
     categories and the button sat 228px below the cut with no way to
     scroll to them. The primary navigation on a phone, and a third
     of it unreachable.

     Height comes off the viewport now, and once it is open the panel
     scrolls, so a short phone reaches the bottom too. overflow stays
     hidden while closed, which is what the animation needs. */
  .nav-s.menu-open .nav-mobile{
    max-height:calc(100vh - 116px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PHONE  ·  weight
   ═══════════════════════════════════════════════════════════════════
   Everything above this point was about things being broken. This is
   about things being heavy: the same black slab spanning the screen in
   section after section, and pictures at full bleed where a smaller
   one says the same thing.
   =================================================================== */

@media (max-width:760px){

  /* ── the buttons were slabs ──────────────────────────────────────
     .buttons-c .btn is flex:1 1 auto below 600px, so every call to
     action stretched to the full 327px column — a full-width black
     bar in the hero, again under the category browser, again at the
     close. Sized to their own words instead, they read as buttons
     rather than as dividers. */
  .buttons-c .btn,
  .cta-buttons .btn{flex:0 0 auto;padding:14px 26px;}

  /* ── and there were four of them saying the same thing ───────────
     Get Started sits in the nav, in the hero, under "Browse the work
     by category", and again in the closing panel. The third is the
     one that earns nothing: that section is a carousel of category
     cards which are themselves links, so the button offers a worse
     version of what is already on screen. The other three stay. */
  .slider-s .cta-buttons{display:none;}

  /* ── the before-and-after frames were the whole screen ───────────
     Three 3:4 frames at the full column width came to 1,421px of
     stacked picture. The comparison reads at two thirds of that, and
     stops being the only thing on the page. */
  .ba-grid{max-width:272px;margin-inline:auto;gap:14px;}

  /* ── and the copy under every heading ────────────────────────────
     15.5px over a 327px measure runs five and six lines. A step down
     with the leading pulled in holds the same words in four. */
  .subtitle,
  .hero-subtitle{font-size:14.5px;line-height:1.55;}
  .hero-subtitle{padding:14px 0 22px;}
}

@media (max-width:760px){
  /* The 56px under this subtitle was sized for a button that is no
     longer there, so it read as a hole rather than as breathing room. */
  .slider-title-c .subtitle{padding-bottom:6px;}
}

@media (max-width:760px){

  /* ── the comparison was breathing like a desktop table ───────────
     Each row is a band 149px tall: 16px of padding all round, a
     full-width uppercase label on its own line, then 8px of gap
     before each of the two answers. Seven of those, alternately
     shaded, and the section came to 2,008px — a lot of air around
     what is really seven short pairs.

     Nothing is removed. The padding comes in, the gaps close, the
     lines sit tighter, and the label stops taking a whole line's
     worth of space above the pair it belongs to. */
  .compare-row{padding:13px 14px;gap:3px;}
  .compare-label{font-size:11.5px;padding-bottom:2px;opacity:.6;}
  .compare-old,
  .compare-new{line-height:1.4;padding-left:17px;}
  .compare-old::before,
  .compare-new::before{top:0;}
  .compare-table{gap:2px;}
}

@media (max-width:760px){

  /* ── the same thing the comparison had, in seven more places ─────
     These are all repeated components sized on a wide screen, where
     32px above and below a row is proportion and on a 375px column
     it is more than half the row. Measured, worst first:

       .ind-item          58px tall,  32px of it padding   55%
       .help-cat         103px tall,  48px padding + gap    47%
       .tool-other-card  176px tall,  54px padding          31%
       .cap              176px tall,  52px padding          30%
       .step             228px tall,  64px padding          28%

     Each keeps its shape; the padding comes in by about a third. */
  .ind-item{padding-top:11px;padding-bottom:11px;}
  .help-cat{padding-top:13px;padding-bottom:13px;gap:8px;}
  .tool-other-card{padding-top:18px;padding-bottom:18px;}
  .cap{padding-top:18px;padding-bottom:18px;}
  .step{padding-top:22px;padding-bottom:22px;}

  /* ── and the gaps between them ───────────────────────────────────
     .benefits-items holds four blocks 64px apart: 192px of the page
     is the space between them. Desktop columns sit side by side and
     need that air horizontally; stacked, they do not. */
  .benefits-items{gap:40px;}
  .benefits-item{gap:18px;}
  .footer-content-c{gap:34px;}
  .footer-description-c{gap:20px;}
  .cta-c{gap:28px;}
  .page-hero-c{gap:26px;}
  .tool-row,
  .tool-row.tool-row-flip{gap:22px;}
}

@media (max-width:760px){
  /* 26px of padding on a 93px card. */
  .help-cat{padding-top:11px;padding-bottom:11px;}
}

@media (max-width:760px){

  /* ── the menu panel ─────────────────────────────────────────────
     Making it scrollable stopped links being unreachable, but it
     also put a grey scrollbar down the inside of a white rounded
     panel and left the Get Started button below the fold. This page
     carries fifteen destinations, so it will scroll — it should just
     not look like a form.

     The bar goes, the rows come in from 52px to 46, and the button
     sticks to the bottom of the panel so the main action is there
     from the moment the menu opens rather than fifteen rows down. */
  .nav-s.menu-open .nav-mobile{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .nav-s.menu-open .nav-mobile::-webkit-scrollbar{width:0;height:0;}

  .nav-mobile-inner{padding:10px 16px 12px;}
  .nav-mobile-link{padding:11px 12px;font-size:16px;}
  /* the last row's rule sat under nothing */
  .nav-mobile-link:last-of-type{border-bottom:0;}

  .nav-mobile .btn{
    position:sticky;bottom:0;
    margin-top:10px;
    /* the panel's own ground, so rows do not show through behind it */
    box-shadow:0 -10px 12px -6px var(--white);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE MENU  ·  ≤991px
   ═══════════════════════════════════════════════════════════════════
   The burger appears at 991px, not 760, so the menu's own rules run to
   991 — the earlier ones were scoped to 760 and left a gap between the
   two where the menu was styled for a desktop it never sees.
   =================================================================== */

@media (max-width:991px){

  .nav-s.menu-open .nav-mobile{
    max-height:calc(100vh - 116px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .nav-s.menu-open .nav-mobile::-webkit-scrollbar{width:0;height:0;}
  .nav-mobile-inner{padding:10px 16px 12px;}
  .nav-mobile-link{padding:11px 12px;font-size:16px;}

  /* ── the three groups ────────────────────────────────────────────
     Collapsed, the menu is five rows and a button instead of fifteen
     anonymous links. Open one and it pushes the rest down rather than
     covering them, which is what <details> does for free. */
  .nav-mgroup{border-bottom:1px solid var(--line);}
  .nav-mgroup-h{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 12px;font-size:16px;color:var(--ink);
    cursor:pointer;list-style:none;
  }
  .nav-mgroup-h::-webkit-details-marker{display:none;}
  /* the chevron is drawn rather than typed, so it can rotate */
  .nav-mgroup-h::after{
    content:"";width:8px;height:8px;margin-right:2px;
    border-right:1.6px solid var(--ink-mute);
    border-bottom:1.6px solid var(--ink-mute);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .25s var(--ease);
  }
  .nav-mgroup[open] > .nav-mgroup-h::after{transform:rotate(225deg) translate(-2px,-2px);}
  .nav-mgroup[open] > .nav-mgroup-h{color:var(--ink-strong);font-weight:500;}

  /* the links inside a group are indented and quieter than the group
     names, so the two levels read as two levels */
  .nav-mgroup .nav-mobile-link{
    padding:9px 12px 9px 22px;
    font-size:15px;color:var(--ink-mute);
    border-bottom:0;
  }
  .nav-mgroup .nav-mobile-link:first-of-type{padding-top:2px;}
  .nav-mgroup .nav-mobile-link:last-of-type{padding-bottom:12px;}

  .nav-msolo{border-bottom:1px solid var(--line);}
  .nav-msolo:last-of-type{border-bottom:0;}

  /* ── the button, then the way back in ────────────────────────────
     Get Started is for people who do not have an account. The line
     under it is for the ones who do, and it is the last thing in the
     panel because that is where you look when the answer was not in
     the list above. */
  .nav-mobile .btn{
    position:sticky;bottom:0;
    margin-top:12px;
    box-shadow:0 -10px 12px -6px var(--white);
  }
  .nav-msign{
    display:block;text-align:center;
    padding:14px 12px 4px;
    font-size:14px;color:var(--ink-mute);
  }
  .nav-msign b{color:var(--ink-strong);font-weight:500;}
}

@media (max-width:760px){

  /* ── the behind-the-scenes strip ─────────────────────────────────
     Five 4:5 frames at the full column width: 327×409 each, 2,245px
     of stacked photograph, one per screen. Narrowed to the same width
     the before-and-after cards use, they stop running edge to edge
     and two of them start sharing a screen. The 4:5 stays — the
     sources are 0.75 portraits and anything squarer would crop them. */
  .bts-grid{max-width:272px;margin-inline:auto;gap:12px;}
  .bts-cell figcaption{padding-top:8px;}

  /* ── the custom-casting card ─────────────────────────────────────
     48px of padding above and below the copy, and 28px either side,
     inside a card that is already only 335px wide. That is desktop
     proportion on a phone: the eyebrow, the heading, the line of copy
     and the button end up further apart than they are wide. */
  .custom-copy{padding:30px 22px;}
  .custom-sub{padding:12px 0 22px;}
  .custom-img-c{aspect-ratio:16/11;}
}

@media (max-width:760px){

  /* ── the custom-casting card ─────────────────────────────────────
     This one is half mine. The card is built to go edge to edge on a
     phone — .custom-c drops its radius to 0 below 991px because a
     full-bleed block has no corners to round. My section-rhythm pass
     then put 20px of side padding back on .custom-s, which pulled the
     card off both edges and left it square-cornered and floating: not
     full-bleed, not a card, just a slab.

     Inset and rounded, to match every other card on the phone — the
     before-and-after frames, the menu panel, the stills. .custom-c
     already clips its children, so the photograph picks up the same
     corners and the two halves become one object.

     And the photograph itself: a 0.81 portrait held at a fixed 300px
     in a 335px box is a 1.12 landscape slot, so a quarter of it was
     being thrown away and the crop pushed to 18% from the top to keep
     a face in frame. Square suits the source, and stops the picture
     reading as a strip stuck under the text. */
  .custom-c{border-radius:18px;}
  .custom-img-c{flex:0 0 auto;aspect-ratio:1/1;}
  .custom-img-c img{object-position:center 22%;}
}

@media (max-width:760px){

  /* ── the studio set is a mosaic, not a column ────────────────────
     The arrangement already exists and is good: a wide hero frame
     across the top, then two rows of two. It runs from 601 to 900px
     and then a rule at 600 flattens it to one frame per row, five
     4:5 portraits stacked — 1,879px of scrolling to see five
     photographs of the same room.

     The mosaic holds at 375px: the hero spans both columns at 4:3,
     the four square frames sit two by two under it. Same shape as
     the desktop, a third of the height.

     (My earlier pass capped this grid at 272px to stop the stacked
     frames going edge to edge. Two columns need the full width, so
     that cap goes with the stack it was written for.) */
  .bts-grid{
    max-width:none;margin-inline:0;
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "a a"
      "b c"
      "d e";
    gap:10px;
  }
  .bts-a img{aspect-ratio:4/3;}
  .bts-b img,.bts-c img,
  .bts-d img,.bts-e img{aspect-ratio:1/1;}

  /* a caption under a 157px frame needs to be able to take two lines
     without pushing its neighbour out of line */
  .bts-cell{justify-content:flex-start;}
  .bts-cell figcaption{padding-top:7px;font-size:11.5px;line-height:1.35;}
}

@media (max-width:760px){

  /* ── the reels ───────────────────────────────────────────────────
     Exactly what the studio set was doing: a two-column grid that
     exists between 561 and 1000px, flattened to one column below it.
     A 9:16 reel at the full column width is 327×581 — one per screen,
     four of them 2,599px deep — and a vertical video is the one thing
     that has no business filling a phone edge to edge. Two up, they
     read the way the format is meant to. */
  .reel-grid-3,
  .reel-grid-4{grid-template-columns:repeat(2,1fr);gap:12px;}
  .reel-card figcaption{padding:10px 2px 0;font-size:12.5px;line-height:1.4;}
}

@media (max-width:991px){

  /* ── the links inside a group were running as text ───────────────
     .nav-mobile-inner is a flex column, so its direct children become
     flex items and stack. The links inside a <details> are not direct
     children — they sit under the group, which is an ordinary block,
     so the anchors kept the inline display an <a> is born with and
     flowed like words: "Flat Lay / Photos", "AI / Fashion Video",
     wrapping mid-name across the panel.

     Each one is its own row, with a hairline down the left so the
     group reads as a group rather than as a list that lost its
     heading. */
  .nav-mgroup > .nav-mobile-link{
    display:block;
    margin-left:14px;
    padding:10px 12px;
    border-left:1px solid var(--line);
    border-bottom:0;
    font-size:15px;
    color:var(--ink-mute);
  }
  .nav-mgroup > .nav-mobile-link:first-of-type{padding-top:4px;}
  .nav-mgroup > .nav-mobile-link:last-of-type{padding-bottom:12px;}
}


/* ═══════════════════════════════════════════════════════════════════
   PLAN CAROUSEL  ·  the look
   ═══════════════════════════════════════════════════════════════════
   --f is written by js/plan-carousel.js on every scroll frame: 1 when a
   card is under the middle of the window, falling to 0 a card's width
   away. Everything below reads that one number, and only ever through
   transform and opacity — so the whole effect runs on the compositor
   and the swipe keeps its frame rate on a phone.
   =================================================================== */

.plan-nav{display:none;}

@media (max-width:760px){

  .price-grid,
  .pk-grid{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    align-items:stretch;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:24px;
    /* full bleed, so a card can travel to the edge instead of stopping
       inside a container's padding */
    width:100vw;margin-left:calc(50% - 50vw);
    padding:14px 24px 20px;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    /* the cards dissolve at the boundary rather than being cut by it */
    -webkit-mask-image:linear-gradient(to right,transparent,#000 22px,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  }
  .price-grid::-webkit-scrollbar,
  .pk-grid::-webkit-scrollbar{width:0;height:0;}

  .price-card,
  .pk-card{
    flex:0 0 84vw;max-width:340px;
    scroll-snap-align:start;
    /* the card you are on stands slightly proud of the ones beside it;
       they hold their place, dimmed, so the set still reads as a set */
    transform:scale(calc(.925 + .075 * var(--f, 1)));
    opacity:calc(.42 + .58 * var(--f, 1));
    transform-origin:50% 45%;
    will-change:transform,opacity;
  }

  /* the app card is a subgrid spanning three rows of .pk-grid; once the
     grid is a flex row there are no rows to span, so it becomes its own
     little column */
  .pk-card{
    display:flex;flex-direction:column;
    grid-row:auto;grid-template-rows:none;
  }

  /* the shadow arrives with the focus, so the front card lifts off the
     page rather than sitting on it */
  .price-card{
    box-shadow:
      inset 0 0 0 1px var(--line),
      0 calc(30px * var(--f, 1)) calc(60px * var(--f, 1)) -34px rgba(0,0,0,calc(.55 * var(--f, 1)));
  }
  .pk-card{
    box-shadow:
      inset 0 0 0 1px var(--a-line),
      0 calc(28px * var(--f, 1)) calc(56px * var(--f, 1)) -30px rgba(0,0,0,calc(.7 * var(--f, 1)));
  }
  /* a lift on hover is a desktop idea; here the scroll does that job */
  .pk-card:hover{transform:scale(calc(.925 + .075 * var(--f, 1)));}

  /* ── the controls ────────────────────────────────────────────────
     Big enough to hit, quiet enough not to compete with the cards. */
  .plan-nav{
    display:flex;align-items:center;justify-content:center;gap:16px;
    padding:4px 24px 0;
  }
  .plan-nav-a{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 44px;
    border:1px solid var(--line,var(--a-line));border-radius:50%;
    background:var(--white,var(--a-panel));
    color:var(--ink,var(--a-ink));
    cursor:pointer;
    transition:transform .18s var(--e-out,cubic-bezier(.25,1,.35,1)),
               opacity .2s var(--e-out,cubic-bezier(.25,1,.35,1));
  }
  .plan-nav-a svg{width:16px;height:16px;}
  .plan-nav-a:active{transform:scale(.9);}
  .plan-nav-a:disabled{opacity:.25;cursor:default;transform:none;}

  .plan-dots{display:flex;align-items:center;gap:7px;}
  .plan-dot{
    position:relative;
    width:7px;height:7px;padding:0;border:0;border-radius:100px;
    background:var(--line,var(--a-line));cursor:pointer;
    transition:width .3s var(--e-out,cubic-bezier(.25,1,.35,1)),
               background .3s var(--e-out,cubic-bezier(.25,1,.35,1));
  }
  /* the active dot stretches into the gap rather than just changing
     colour — the movement is what tells you which way you went */
  .plan-dot.is-on{width:22px;background:var(--ink-strong,var(--a-ink));}
  /* 7px of paint, 40px of target */
  .plan-dot::after{
    content:"";position:absolute;left:50%;top:50%;
    width:40px;height:40px;transform:translate(-50%,-50%);
  }
}

@media (prefers-reduced-motion:reduce){
  .price-card,.pk-card{transform:none!important;opacity:1!important;}
  .plan-dot,.plan-nav-a{transition:none;}
}

@media (max-width:760px){
  /* .price-card carries an entrance animation that deals the four cards
     in from the left, and a running CSS animation outranks a normal
     declaration for the properties it touches — so it was holding
     transform and opacity at the animation's values and the focus
     effect never showed. The deal-in is a desktop idea anyway: here the
     cards arrive one at a time under your thumb, which is its own
     entrance. */
  .price-card,
  .pk-card{animation:none!important;}
}

@media (max-width:760px){

  /* ── why these carry !important ───────────────────────────────────
     The reveal that deals these cards in is GSAP, and GSAP finishes by
     writing its result to the element:

       transform: translate(0px, 0px); opacity: 1;
       translate: none; rotate: none; scale: none;

     Inline, and permanent. A stylesheet cannot outrank an inline style
     by specificity — !important is the only thing that does, and this
     is the case it exists for. Scoped to the phone, to these two cards,
     to the two properties the carousel drives. */
  .price-card,
  .pk-card{
    transform:scale(calc(.925 + .075 * var(--f, 1)))!important;
    opacity:calc(.42 + .58 * var(--f, 1))!important;
  }
  .pk-card:hover{transform:scale(calc(.925 + .075 * var(--f, 1)))!important;}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .price-card,.pk-card{transform:none!important;opacity:1!important;}
}