/* Vantage Studios — brand lifted from the delivered listing packs, not invented.
   black #0A0A0A · seagreen #1D4B43 · ivory #EDE8E1 · verified #5AD79B · blocked #B52A2A */

:root{
  --black:#0A0A0A; --ink:#2A2E2C; --sea:#1D4B43; --sea-tint:#8FB3A8;
  --ivory:#EDE8E1; --bright:#F5F2EC; --line:#D6D0C6; --muted:#63665F;
  --dim:#9A968E; --rule-dark:#262A28; --verified:#5AD79B; --blocked:#B52A2A; --blocked-lit:#E0524C; --sea-light:#2E7466;
  --grad:linear-gradient(90deg,#0A0A0A 0%,#0A0A0A 30%,#1D4B43 70%,#1D4B43 100%);
  --serif:'Newsreader','Newsreader Fallback',Georgia,'Times New Roman',serif;
  --sans:'Geist','Geist Fallback','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono','Geist Mono Fallback',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,5vw,64px);
}

@font-face{font-family:'Newsreader Fallback'; src:local('Georgia');
  size-adjust:93.7%; ascent-override:78.4%; descent-override:28.3%; line-gap-override:0%}
@font-face{font-family:'Geist Fallback'; src:local('Helvetica Neue'),local('Arial');
  size-adjust:105.8%; ascent-override:95%; descent-override:27.9%; line-gap-override:0%}
@font-face{font-family:'Geist Mono Fallback'; src:local('Menlo'),local('SFMono-Regular');
  size-adjust:100%; ascent-override:100.5%; descent-override:29.5%; line-gap-override:0%}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0; background:var(--grad); color:var(--ivory);   /* the brand gradient is the page ground; the footer stays black */
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--verified); text-decoration:none}
a:hover{color:var(--ivory)}

h1,h2,h3{font-family:var(--serif); font-weight:300; line-height:1.08; margin:0; text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,56px)}
h2{font-size:clamp(26px,3.6vw,36px)}
h3{font-size:clamp(20px,2.4vw,26px)}
p{margin:0 0 16px}

.wrap{max-width:1440px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.eyebrow{font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(237,232,225,.7); margin:0 0 14px}
.rec{font-family:var(--mono); font-size:13px; letter-spacing:-.01em}
.lede{font-size:clamp(16px,1.3vw,17px); line-height:1.65; color:var(--line); max-width:62ch}
.lede,p{text-wrap:pretty}
.muted{color:rgba(237,232,225,.74)}
.section{padding:clamp(56px,7vw,88px) 0}
.rule{border:0; border-top:1px solid rgba(237,232,225,.18); margin:0}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:var(--grad); border-bottom:1px solid rgba(237,232,225,.18); transition:box-shadow .2s}
.nav.stuck{box-shadow:0 1px 24px rgba(10,10,10,.35)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px}
.brand{font-family:var(--serif); font-size:24px; font-weight:500;
       letter-spacing:.13em; color:var(--ivory); white-space:nowrap}
/* the wordmark runs black to seagreen across the letters, the brand gradient */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .nav .brand{background:linear-gradient(90deg,var(--ivory) 0%,var(--ivory) 30%,var(--verified) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent}
  .nav .brand:hover,.nav .brand:focus-visible{color:transparent}
}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14px; color:var(--line)}
.nav-links a{color:var(--line)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--verified)}
.lnk{position:relative; text-decoration:none; color:inherit}
.lnk::after{content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .4s cubic-bezier(.2,.7,.25,1)}
.lnk:hover::after,.lnk:focus-visible::after,.nav-links .lnk[aria-current="page"]::after{transform:scaleX(1); transform-origin:0 50%}
@media(max-width:900px){.nav-links .lnk::after{display:none}}
.nav-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:1.5px; background:var(--ivory); margin:5px 0}
.nav::after{
  content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--sea); transform:scaleX(0); transform-origin:0 50%;
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .nav::after{
      animation:nav-progress linear both;
      animation-timeline:scroll(root block);
    }
    @keyframes nav-progress{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
  }
}
@media(max-width:900px){
  .brand{font-size:20px}
  .nav-toggle{display:block}
  .nav-links{position:absolute; top:72px; left:0; right:0; background:var(--black);
    border-bottom:1px solid rgba(237,232,225,.18); flex-direction:column; align-items:flex-start;
    gap:0; padding:8px var(--pad) 20px}
  .nav-links[hidden]{display:none}
  .nav-links{
    opacity:1; transform:translateY(0);
    transition:opacity .22s, transform .22s, display .22s allow-discrete;
  }
  @starting-style{ .nav-links{ opacity:0; transform:translateY(-8px) } }
  .nav-links[hidden]{opacity:0; transform:translateY(-8px)}
  .nav-links a,.nav-links .btn{width:100%; padding:12px 0}
  .nav-links .btn{justify-content:center; margin-top:8px}
}

/* ---------- buttons ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 26px; border-radius:2px; font-size:15px; font-weight:500; text-decoration:none;
  border:1px solid currentColor; color:inherit; background:transparent; overflow:hidden; isolation:isolate;
  cursor:pointer; font-family:inherit}
.btn span{position:relative; z-index:2; transition:color .35s}
.btn::before{content:''; position:absolute; inset:0; background:var(--sea); z-index:1;
  transform:translateY(101%); transition:transform .45s cubic-bezier(.2,.7,.25,1)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover span,.btn:focus-visible span{color:var(--ivory)}
.btn-p{background:var(--ivory); color:var(--black); border-color:var(--ivory)}
.btn-s{color:inherit; border-color:currentColor}
.btn-l{background:var(--ivory); color:var(--black); border-color:var(--ivory)}
.btn-sm{height:40px; padding:0 18px; font-size:14px}
.nav .btn-p{background:var(--black); color:var(--ivory); border-color:rgba(237,232,225,.35)}   /* the nav's Start a listing: black box, ivory type */
.btn:disabled{opacity:.6; cursor:default}

/* ---------- hero on the gradient ---------- */
.grad{background:var(--grad); color:var(--ivory); position:relative; isolation:isolate}
.grad::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grad .eyebrow{color:var(--dim)}
.grad .lede{color:var(--line)}
.grad h1,.grad h2,.grad h3{color:var(--ivory)}
.hero{padding:clamp(56px,8vw,96px) 0}

/* ---------- motion clips (decorative; poster is the default, script plays them) ---------- */
.clip{position:relative; overflow:hidden; background:var(--black)}
.clip video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.hero-art video{width:100%; height:100%; object-fit:cover; object-position:78% 50%; opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 44%,#000 80%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 44%,#000 80%)}
@media(max-width:900px){.hero-art video{opacity:.35; -webkit-mask-image:none; mask-image:none}}
.card-art video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s}
.card-art.playing video{opacity:1}
@media (prefers-reduced-motion: reduce){.card-art video{display:none}}

/* ---------- decorative visuals ----------
   Brand imagery only: the work grid and slider stay real files with real records. */
.hero-art{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.hero-art img{width:100%; height:100%; object-fit:cover; object-position:78% 50%; opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 44%,#000 80%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 44%,#000 80%)}
@media(max-width:900px){.hero-art img{opacity:.35; -webkit-mask-image:none; mask-image:none}}
.card-art{position:relative; margin:-26px -28px 22px; aspect-ratio:16/7; overflow:hidden; background:var(--black)}
.card-art img{width:100%; height:100%; object-fit:cover}
.phone-wrap{position:relative; width:min(100%,280px); justify-self:end}
@media(max-width:900px){.phone-wrap{justify-self:start; margin-top:8px}}
.phone{aspect-ratio:9/16; border-radius:26px; overflow:hidden; border:1px solid var(--rule-dark);
  background:var(--black); box-shadow:0 24px 60px rgba(10,10,10,.28)}
.phone img,.phone video{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- dark sections (raw material sits on black) ---------- */
.dark{background:transparent; color:var(--ivory)}
.dark .eyebrow,.grad .eyebrow{color:var(--dim)}
.dark .lede,.grad .lede{color:var(--line)}
.dark h1,.dark h2,.dark h3{color:var(--ivory)}
.dark .muted{color:var(--dim)}
.steps3 h3{font-family:var(--sans); font-size:19px; font-weight:600; margin:10px 0 8px}
.steps3 p{font-size:15px; margin:0}
.steps3 .n{color:var(--verified); margin:0}
.dark .steps3 p:not(.n){color:var(--line)}

/* ---------- video hero (home) ----------
   The montage is decorative. Its poster is the default; the script plays it in view, never under reduced motion. */
.vhero{position:relative; min-height:min(88vh,860px); display:flex; align-items:flex-end; background:var(--black); color:var(--ivory); overflow:hidden; isolation:isolate}
.vhero::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.18) 0%,rgba(10,10,10,.06) 35%,rgba(10,10,10,.74) 100%)}
.vhero .wrap{width:100%; padding-top:clamp(120px,22vh,220px); padding-bottom:clamp(40px,6vw,72px)}
.vhero .eyebrow{color:var(--line)}
.vhero .lede{color:var(--ivory)}
.vhero h1{max-width:18ch; text-shadow:0 2px 24px rgba(10,10,10,.45)}
@media(max-width:700px){.vhero{min-height:78vh}}
.vhero .media{position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--black)}
.vhero .media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vhero .media::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.18) 0%,rgba(10,10,10,.06) 35%,rgba(10,10,10,.74) 100%)}
.vhero::before{display:none}

/* ---------- hero hand-off: the shutter ----------
   With scroll timelines the hero pins for a short stretch. Viewfinder brackets appear and the frame tightens
   like a focus pull; the shutter blinks black, the screen flashes; then the captured frame pulls away from the
   screen as a bordered print, developing from overexposed, shrinking and tilting as it drifts down while the
   live montage dims behind it, and the next section slides over. Without timelines or with reduced motion:
   no brackets, no flash, no print, plain stacking. */
.vstage{position:relative; z-index:0}
.vstage + .section{position:relative; z-index:1; background:var(--grad)}
.vhero .print{position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; background:var(--ivory);
  padding:clamp(10px,1.2vw,18px); padding-bottom:clamp(30px,3.4vw,52px); box-shadow:0 40px 90px rgba(10,10,10,.5); transform-origin:50% 50%}
.vhero .print canvas{width:100%; height:100%; object-fit:cover; display:block; background:var(--black)}
.vhero .flash{position:absolute; inset:0; background:var(--ivory); opacity:0; pointer-events:none; z-index:6}
.vhero .blink{position:absolute; inset:0; background:var(--black); opacity:0; pointer-events:none; z-index:5}
.vhero .finder{position:absolute; inset:clamp(18px,4vw,56px); opacity:0; pointer-events:none; z-index:4}
.vhero .finder i{position:absolute; width:34px; height:34px; border:0 solid var(--ivory)}
.vhero .finder i:nth-child(1){top:0; left:0; border-top-width:2px; border-left-width:2px}
.vhero .finder i:nth-child(2){top:0; right:0; border-top-width:2px; border-right-width:2px}
.vhero .finder i:nth-child(3){bottom:0; left:0; border-bottom-width:2px; border-left-width:2px}
.vhero .finder i:nth-child(4){bottom:0; right:0; border-bottom-width:2px; border-right-width:2px}
.hero-strip{list-style:none; margin:34px 0 0; padding:18px 0 0; border-top:1px solid rgba(237,232,225,.28);
  display:flex; gap:clamp(18px,3vw,40px); flex-wrap:wrap; color:var(--line); font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.hero-strip li{display:flex; align-items:center; gap:10px}
.hero-strip li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--verified); flex:0 0 auto}
@keyframes focus-pull{to{transform:scale(1.04)}}
@keyframes finder-in{from{opacity:0} 40%{opacity:1} to{opacity:1}}
@keyframes finder-out{to{opacity:0}}
@keyframes shutter-blink{0%{opacity:0} 45%{opacity:1} 100%{opacity:0}}
@keyframes shutter-flash{0%{opacity:0} 5%{opacity:1} 30%{opacity:.18} 100%{opacity:0}}
@keyframes media-dim{to{filter:brightness(.38)}}
@keyframes print-out{
  0%{opacity:1; transform:none; filter:brightness(1.9) contrast(.75)}
  22%{filter:brightness(1) contrast(1)}
  100%{opacity:1; transform:translate(22vw,26vh) scale(.34) rotate(-4deg); filter:brightness(1) contrast(1)}
}
@keyframes hero-text-out{to{transform:translateY(-40px); opacity:0}}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .vstage{height:190vh; view-timeline-name:--vs; view-timeline-axis:block}
    .vhero{position:sticky; top:0; height:100vh; min-height:0}
    /* contain = the pinned stretch. brackets + focus pull 18–52%, blink 52–56%, flash 56–70%, print 58–100%, media dims 58–72% */
    .vhero .media video{animation:focus-pull linear both; animation-timeline:--vs; animation-range:contain 18% contain 52%}
    .vhero .media{animation:media-dim linear both; animation-timeline:--vs; animation-range:contain 58% contain 72%}
    .vhero .finder{animation:finder-in linear both, finder-out linear forwards; animation-timeline:--vs, --vs; animation-range:contain 20% contain 50%, contain 58% contain 62%}
    .vhero .blink{animation:shutter-blink linear both; animation-timeline:--vs; animation-range:contain 52% contain 56%}
    .vhero .flash{animation:shutter-flash linear both; animation-timeline:--vs; animation-range:contain 56% contain 72%}
    .vhero .print{animation:print-out linear forwards; animation-timeline:--vs; animation-range:contain 58% contain 100%}
    .vhero .wrap{animation:hero-text-out linear both; animation-timeline:--vs; animation-range:contain 28% contain 52%}
  }
}

/* ---------- before / after sliders ----------
   Handle starts in the middle. The hint sweep is a one-shot in the script; nothing here animates. */
.ba{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--black); user-select:none; border-radius:2px}
.ba picture,.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ba .after{clip-path:inset(0 var(--clip,50%) 0 0)}
.ba input[type=range]{position:absolute; inset:auto 0 0 0; width:100%; margin:0; opacity:0; height:100%; cursor:ew-resize; z-index:3}
.ba .handle{position:absolute; top:0; bottom:0; width:2px; background:var(--ivory); pointer-events:none; left:calc(100% - var(--clip,50%)); z-index:2}
.ba .handle::after{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; border:2px solid var(--ivory); background:rgba(10,10,10,.35)}
.ba .handle::before{content:'\2039 \203A'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  font-family:var(--mono); font-size:15px; color:var(--ivory); letter-spacing:2px; pointer-events:none}
.ba:hover .handle::after{background:rgba(10,10,10,.6)}
.ba input[type=range]:focus-visible + .handle::after{outline:2px solid var(--verified); outline-offset:2px}
.ba .lbl{position:absolute; bottom:12px; padding:5px 10px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(10,10,10,.75); color:var(--ivory); border-radius:2px; z-index:2; pointer-events:none}
.ba-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,40px) clamp(18px,2.4vw,30px)}
@media(max-width:760px){.ba-grid{grid-template-columns:minmax(0,1fr)}}
.ba-item{margin:0}
.ba-item figcaption{display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:12px; flex-wrap:wrap}
.ba-item figcaption strong{font-size:15px}

/* ---------- layout helpers ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,64px); align-items:start}
.split.even{align-items:stretch}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .split{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.card{border:1px solid rgba(237,232,225,.18); background:rgba(10,10,10,.32); padding:26px 28px}
.card-dark{border:1px solid var(--black); background:var(--black); color:var(--ivory)}
.card-dark .rec,.card-dark .muted{color:var(--dim)}
.card-dark,.plan.best{position:relative}
.card-dark::before,.plan.best::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgba(90,215,155,.10), transparent 62%);
}
.card-dark:hover::before,.plan.best:hover::before{opacity:1}
@media (hover:none){.card-dark::before,.plan.best::before{display:none}}
.card-sea{border:1px solid var(--sea); background:var(--sea); color:var(--ivory)}
.card-sea .muted{color:var(--sea-tint)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:14px}
@media(max-width:620px){table{min-width:0} th,td{padding:10px 8px; font-size:13px}}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid rgba(237,232,225,.18)}
th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(237,232,225,.7); font-weight:500}
td:not(:first-child),th:not(:first-child){text-align:right}
tbody tr:last-child td{border-bottom:0}
.t-hi td{background:rgba(237,232,225,.08); font-weight:600}

/* ---------- plan cards ---------- */
.plans{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media(max-width:1000px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid rgba(237,232,225,.18); background:rgba(10,10,10,.32); padding:24px 22px;
  display:flex; flex-direction:column; gap:14px; min-height:250px; position:relative}
.plan.best{border-color:var(--verified); background:var(--black); color:var(--ivory)}
.plan.best .muted,.plan.best .rec{color:var(--dim)}
.plan h3{font-size:16px; font-weight:600; font-family:var(--sans); letter-spacing:.04em}
.plan .price{font-family:var(--serif); font-size:40px; line-height:1}
.plan .pfoot{margin-top:auto; padding-top:14px; border-top:1px solid rgba(237,232,225,.18)}
.plan.best .pfoot{border-top-color:var(--rule-dark)}
/* the whole plan card is the link; the button is its visible label */
.plan .plan-cta{margin-top:12px; align-self:flex-start}
.plan:has(.plan-cta),[data-select-card]:has(.plan-cta){cursor:pointer}
.plan,[data-select-card]{transition:border-color .25s}
.plan:has(.plan-cta:hover),.plan:has(.plan-cta:focus-visible),[data-select-card]:has(.plan-cta:hover),[data-select-card]:has(.plan-cta:focus-visible){border-color:var(--verified)}
.plan:has(.plan-cta:focus-visible),[data-select-card]:has(.plan-cta:focus-visible){outline:2px solid var(--verified); outline-offset:3px}
.tag{position:absolute; top:-1px; right:-1px; background:var(--verified); color:var(--black);
  font-family:var(--mono); font-size:11px; padding:4px 9px}

/* ---------- billing toggle ---------- */
.toggle{display:inline-flex; border:1px solid rgba(237,232,225,.28); border-radius:2px; overflow:hidden; background:rgba(10,10,10,.32)}
.toggle button{border:0; background:transparent; font-family:inherit; font-size:14px; font-weight:500;
  padding:11px 20px; cursor:pointer; color:var(--line)}
.toggle button[aria-pressed="true"]{background:var(--ivory); color:var(--black)}
.saver{font-family:var(--mono); font-size:12px; color:var(--verified); margin-left:12px}

/* ---------- record block ---------- */
.record{border:1px solid var(--verified); background:var(--black); color:var(--ivory)}
.record-h{display:flex; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--rule-dark)}
.record-b{padding:16px 18px; display:flex; flex-direction:column; gap:9px}
.record-row{display:flex; justify-content:space-between; gap:20px}
.record-row .k{color:var(--dim)}
.ok{color:var(--verified)}

/* ---------- disclosure stamp ---------- */
.stamp{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px;
  padding:5px 10px; border:1px solid var(--ivory); background:transparent; color:var(--ivory); border-radius:2px}

/* ---------- work grid ---------- */
.shot{display:flex; flex-direction:column; gap:12px}
.shot figcaption{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.shot figcaption strong{font-size:15px}
.shot figcaption .rec.muted,.ba-item figcaption .rec.muted{color:rgba(237,232,225,.7)}
.shot.span2{grid-column:span 2}
@media(max-width:620px){.shot.span2{grid-column:auto}}
.tile{position:relative; overflow:hidden; background:#000; aspect-ratio:16/9; cursor:zoom-in; isolation:isolate}
.tile img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1);
  transition:transform .7s cubic-bezier(.2,.7,.25,1), filter .5s}
.tile::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.78) 100%); opacity:0; transition:opacity .45s}
.tile .rule{position:absolute; left:18px; right:18px; bottom:44px; height:1px; z-index:2; border:0; margin:0;
  background:var(--ivory); transform:scaleX(0); transform-origin:0 50%; transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.tile .meta{position:absolute; left:18px; right:18px; bottom:16px; z-index:2; display:flex; justify-content:space-between; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory);
  transform:translateY(14px); opacity:0; transition:transform .5s cubic-bezier(.2,.7,.25,1), opacity .4s}
.tile:hover img,.tile:focus-within img,.tile:focus-visible img{transform:scale(1.055); filter:saturate(1.04)}
.tile:hover::after,.tile:focus-within::after,.tile:focus-visible::after{opacity:1}
.tile:hover .rule,.tile:focus-within .rule,.tile:focus-visible .rule{transform:scaleX(1)}
.tile:hover .meta,.tile:focus-within .meta,.tile:focus-visible .meta{transform:none; opacity:1}
.tile:focus-visible{outline-offset:-3px}
@media (hover:none){
  .tile::after,.tile .meta{opacity:1}
  .tile .rule{transform:scaleX(1)}
}
@media (prefers-reduced-motion: reduce){
  .tile img,.tile::after,.tile .meta,.tile .rule,.lnk::after,.btn::before,.btn span{transition:none}
}
.lightbox{border:0; padding:0; background:transparent; max-width:min(96vw,1400px); max-height:96vh; overflow:visible; color:var(--ivory)}
.lightbox::backdrop{background:rgba(10,10,10,.92)}
.lightbox figure{margin:0}
.lightbox img{display:block; width:auto; height:auto; max-width:min(96vw,1400px); max-height:82vh}
.lightbox figcaption{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:12px;
  font-family:var(--mono); font-size:12px; color:var(--line)}
.lightbox .lb-close{position:absolute; top:-46px; right:0; background:none; border:0; color:var(--ivory);
  font-size:30px; line-height:1; padding:6px 10px; cursor:pointer}
.lightbox[open]{animation:lb-in .22s ease-out}
@keyframes lb-in{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}


/* ---------- steps ---------- */
.step{display:flex; gap:18px; padding:20px 0; border-bottom:1px solid rgba(237,232,225,.18)}
.step:last-child{border-bottom:0}
.step .n{font-family:var(--mono); font-size:13px; color:var(--verified); flex-shrink:0; width:30px; padding-top:3px}

/* ---------- the chain that runs (standard page) ---------- */
.chain{ position:relative; padding-left:46px }
.chain::before{                    /* the unfilled rail */
  content:''; position:absolute; left:14px; top:0; bottom:0;
  width:1px; background:rgba(237,232,225,.22);
}
.chain::after{                     /* the filling rail */
  content:''; position:absolute; left:14px; top:0;
  width:1px; height:100%; background:var(--verified);
  transform:scaleY(0); transform-origin:50% 0;
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .chain::after{
      animation:rail linear both;
      animation-timeline:view(block);
      animation-range:cover 12% cover 78%;
    }
    @keyframes rail{ to{ transform:scaleY(1) } }

    .chain .step .n{
      animation:step-lit linear both;
      animation-timeline:view(block);
      animation-range:entry 55% entry 95%;
    }
    @keyframes step-lit{
      from{ color:rgba(237,232,225,.45); transform:scale(.94) }
      to  { color:var(--verified); transform:none }
    }
  }
}
.chain .step .n{ width:54px }      /* room for the BLOCKING marker below the number */
.step[data-blocking] .n::after{
  content:'BLOCKING'; display:block; margin-top:5px;
  font-size:9px; letter-spacing:.1em; color:var(--blocked);
}

/* ---------- reels path switch ---------- */
.js [data-pane="company"]:not(.pane-on){display:none}
.js [data-pane].pane-off{display:none}

/* ---------- calculator ---------- */
input[type=range].slider{-webkit-appearance:none; appearance:none; width:100%; height:2px;
  background:var(--rule-dark); outline:none; margin:18px 0 6px}
input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%; background:var(--verified); cursor:pointer; border:0}
input[type=range].slider::-moz-range-thumb{width:24px; height:24px; border-radius:50%;
  background:var(--verified); cursor:pointer; border:0}
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{padding:10px 16px; border:1px solid var(--dim); background:transparent; color:var(--line);
  border-radius:2px; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit}
.chip[aria-pressed="true"]{background:var(--ivory); color:var(--black); border-color:var(--ivory)}

/* ---------- contact form ---------- */
.field{display:block}
.field > span{display:block; margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; height:46px; padding:0 14px; border:1px solid var(--line); background:#fff;
  color:var(--black); font-family:inherit; font-size:15px; border-radius:2px;
  transition:border-color .15s}
.field textarea{height:auto; padding:12px 14px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--verified)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.notice{display:none; padding:14px 16px; border:1px solid rgba(237,232,225,.28); border-radius:2px; margin-bottom:18px;
  font-size:14px; line-height:1.6; background:rgba(10,10,10,.35)}
.notice:target,.notice.show{display:block}
.notice.is-ok{border-color:var(--verified); color:var(--verified)}
.notice.is-err{border-color:var(--blocked)}
.notice:focus{outline:none}

/* ---------- footer ---------- */
.foot{background:var(--black); color:var(--ivory); padding:clamp(44px,6vw,64px) 0 32px}
.foot a{color:var(--line)} .foot a:hover{color:var(--ivory)}
.foot .muted{color:var(--dim)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
@media(max-width:760px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.foot-grid{grid-template-columns:minmax(0,1fr); gap:26px}}
.foot .foot-h{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  margin:0 0 14px; font-weight:500; font-family:var(--sans); line-height:1.6}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:14px}
.foot ul a{display:inline-block; padding:5px 0}
.foot-base{margin-top:36px; padding-top:22px; border-top:1px solid var(--rule-dark);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* accessibility */
:focus-visible{outline:2px solid var(--verified); outline-offset:3px}
.grad :focus-visible,.card-dark :focus-visible,.foot :focus-visible{outline-color:var(--verified)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--pad); top:10px; z-index:100; background:var(--black); color:var(--ivory); padding:10px 16px}

/* ---------- cross-document view transitions ---------- */
@view-transition{ navigation: auto; }

/* hold the chrome still while the body cross-fades */
.nav { view-transition-name: nav; }
.foot{ view-transition-name: foot; }

::view-transition-old(root){ animation-duration:180ms }
::view-transition-new(root){ animation-duration:260ms }

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important }
}

/* ---------- scroll reveals ---------- */
@keyframes reveal-in{
  from{opacity:0; transform:translateY(22px)}
  to  {opacity:1; transform:none}
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
    /* stagger inside a grid without writing a rule per child */
    .reveal-stagger > *{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 24%;
    }
    .reveal-stagger > *:nth-child(2){animation-range:entry 6% cover 30%}
    .reveal-stagger > *:nth-child(3){animation-range:entry 10% cover 34%}
    .reveal-stagger > *:nth-child(4){animation-range:entry 14% cover 38%}
  }
}