:root{--ink:#0a0a0b;--panel:#17171a;--line:#302e32;--paper:#f6f3ef;--muted:#b8b3b0;--red:#fb786e;--green:#86efad;color:var(--paper);background:var(--ink);font:400 16px/1.5 Inter,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0}
img{display:block;max-width:100%}
p,h1,h2{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:6px}
html{scroll-behavior:smooth;scroll-padding-top:70px}
::selection{background:#c21f1a;color:white}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.masthead{height:72px;padding:0 clamp(17px,4.7vw,76px);display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0 0 auto;z-index:10;color:#fff}
.brand{display:flex;align-items:center;gap:9px;font-weight:640;letter-spacing:-.03em}
.brand img{opacity:.95}
.masthead nav{display:flex;gap:27px;font-size:13px;color:#d2cdca}
.masthead nav a:hover{color:#fff}
.masthead-action{border:1px solid #6b6264;background:#0c0c0e70;border-radius:100px;padding:8px 15px;font-size:12px;white-space:nowrap}
.hero{min-height:100svh;position:relative;overflow:hidden;background:#050505}
.hero-stage{position:relative;min-height:100svh;isolation:isolate;overflow:hidden;display:grid;align-content:end}
.hero-art{width:max(100%,calc(100svh * 1.5));max-width:none;aspect-ratio:3/2;position:absolute;left:50%;top:50%;translate:-50% -50%;scale:var(--hero-scale,1);transform-origin:50% 57%}
.hero-back,.hero-front{width:100%;height:100%;position:absolute;inset:0}
.hero-back{z-index:0}
.hero-front{z-index:2;clip-path:polygon(17.85% 64%,19.4% 58.8%,23.5% 55.9%,34.95% 53.6%,40.5% 48.2%,44% 45.45%,50% 44.35%,55.9% 43.9%,60.6% 44.5%,65.8% 46%,69.7% 48.5%,73.15% 51.4%,76.2% 53.9%,78.4% 55.2%,79.5% 56.8%,80.1% 64%,80.15% 72%,75.6% 77.6%,44.2% 80%,20.2% 77.5%)}
.hero-type{position:absolute;z-index:1;top:30.8%;left:50%;width:57%;translate:-50% var(--word-y,0px);text-align:center}
.hero-type p{font-size:clamp(10px,1vw,14px);font-weight:630;letter-spacing:.24em;text-transform:uppercase;color:#e9e1dc}
.hero-type h1{width:100%;margin:1.4% auto 0}
.hero-type h1 img{width:100%;height:auto}
.hero-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#080809 0%,#08080955 13%,transparent 34%),linear-gradient(180deg,#050505 0%,transparent 19%);z-index:3}
.hero-footer{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:end;gap:14px;padding:0 clamp(20px,4.7vw,76px) 31px;}
.hero-footer p{font-size:13px;color:#d5cfcb}
.jump{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;width:fit-content}
.jump span{display:grid;place-items:center;width:29px;height:29px;border:1px solid #73696a;border-radius:50%}
.jump:hover span{background:#ffffff18}
.chapter{position:relative;padding:clamp(68px,11vh,135px) clamp(20px,7vw,112px);background:#111113}
.chapter-grid{width:min(100%,1160px);margin:auto;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(42px,8vw,150px);align-items:center}
.chapter-copy{display:grid;justify-items:start;gap:20px;min-width:0}
.eyebrow{display:flex;gap:8px;align-items:center;text-transform:uppercase;letter-spacing:.17em;font-size:11px;font-weight:650;color:#ded4d1}
.eyebrow span{width:9px;height:9px;background:#e52b25;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
h2{font-size:clamp(46px,6.1vw,94px);line-height:.95;font-weight:640;letter-spacing:-.072em}
.chapter-copy>p:not(.eyebrow,.micro),.outcome-copy>p:not(.eyebrow){font-size:clamp(15px,1.45vw,20px);color:var(--muted);max-width:34ch}
.vin-visual{position:relative;min-height:438px;display:grid;align-items:end;padding:0 22px 26px}
.vin-photo{position:absolute;inset:0;background:#080809;border:1px solid #50464b;border-radius:16px;overflow:hidden}
.vin-photo img{width:100%;height:100%;object-fit:cover;object-position:center 55%;translate:0 var(--vin-y,0px)}
.vin-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#070708b0 80%)}
.vin-panel{position:relative;z-index:1;width:min(100%,360px);justify-self:end;padding:19px;background:#17171af5;border:1px solid #585055;border-radius:11px;box-shadow:0 18px 50px #0007}
.panel-title{font-weight:650;font-size:19px;letter-spacing:-.035em;margin-bottom:13px}
.vin-label{display:block;font-size:11px;color:#e9e2dd;margin-bottom:5px}
.mock-input{display:flex;align-items:center;gap:5px;min-height:36px;border:1px solid #9c6562;border-radius:5px;background:#101012;padding:6px 9px;letter-spacing:.06em;font:500 13px/1.4 Inter,monospace;font-variant-numeric:tabular-nums}
.mock-input span{height:15px;width:1px;background:#f3887e}
.micro{color:#bdb5b1;font-size:11px}
.vin-panel .micro{margin:7px 0 13px}
.panel-action{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:650;background:#c21f1a;padding:8px 10px;border-radius:5px}
.frame{background:#0c0c0e;border-top:1px solid #242125}
.frame-grid{gap:clamp(38px,6vw,106px)}
.frame-word{font-family:Geist,Inter,sans-serif;font-weight:850;font-size:.85em;position:relative;white-space:nowrap;display:block;letter-spacing:-.075em;padding:.1em .19em}
.frame-word::before,.frame-word::after{content:"";position:absolute;width:.2em;height:.17em;border:2px solid var(--red)}
.frame-word::before{top:0;left:0;border-right:0;border-bottom:0}
.frame-word::after{right:0;bottom:0;border-left:0;border-top:0}
.state-controls{display:flex;flex-wrap:wrap;gap:6px}
.state-controls button{cursor:pointer;font-size:12px;color:#e9e1dd;border:1px solid #5f5458;background:#1b181b;border-radius:99px;padding:8px 12px}
.state-controls button[aria-pressed=true]{color:#171518;background:#f6f3ef;border-color:#f6f3ef;font-weight:640}
.phone{width:min(100%,414px);padding:9px;justify-self:center;border-radius:28px;background:#080809;border:1px solid #645d60;box-shadow:0 0 0 5px #262326,0 30px 80px #0008;overflow:hidden;--guide:var(--red);--tint:#fb786e21}
.phone[data-state=aligned]{--guide:var(--green);--tint:#86efad21}
.phone-top{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:12px}
.phone-top span{color:#d0c9c5}
.phone-top span:first-child{font-size:24px}
.camera{position:relative;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:#242429}
.camera img{position:absolute;width:100%;height:100%;object-fit:cover;transform:translate(var(--camera-x, -3%),var(--camera-y, 2%)) scale(var(--camera-scale,.96));transition:transform .35s ease}
.outline{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 2px #000c)}
.outline path{stroke:var(--guide);fill:var(--tint);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:stroke .28s,fill .28s}
.corner{position:absolute;width:18px;height:18px;border:2px solid #fffc}
.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.bl{bottom:12px;left:12px;border-right:0;border-top:0}
.br{bottom:12px;right:12px;border-left:0;border-top:0}
.phone-copy{text-align:center;padding:15px 9px 8px}
.shot-name{font-size:16px;font-weight:660;margin-bottom:8px}
.status{font-size:12px;font-weight:650;color:var(--guide);min-height:18px}
.status span{padding-right:4px}
.status-ok,.phone[data-state=aligned] .status-guide{display:none}
.phone[data-state=aligned] .status-ok{display:block}
.shot-track{display:grid;width:min(100%,242px);grid-template-columns:repeat(8,1fr);gap:4px;margin:13px auto}
.shot-track i{height:3px;background:#50484d;border-radius:9px}
.shot-track i:first-child{background:var(--guide)}
.shutter{width:38px;height:38px;margin:0 auto 2px;border:2px solid #fff;border-radius:50%;box-shadow:inset 0 0 0 4px #111;background:#777}
.phone[data-state=aligned] .shutter{background:#fff}
.outcome{background:#141316;padding:clamp(56px,9vw,105px) clamp(20px,7vw,112px)}
.outcome-inner{max-width:1160px;margin:auto;display:grid;gap:24px}
.outcome-copy{display:flex;justify-content:space-between;align-items:end;gap:16px}
.outcome-copy .eyebrow{margin-bottom:12px}
.outcome h2{font-size:clamp(38px,5vw,67px)}
.photo-set{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.photo-set figure{margin:0;border:1px solid #40393b;background:#0a0a0b;border-radius:7px;overflow:hidden}
.photo-set img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.photo-set figcaption{padding:7px 10px;color:#dfd7d2;font-size:12px}
@media(max-width:760px){
  .masthead{height:58px}
.masthead nav{display:none}
.brand{font-size:14px}
.brand img{width:26px;height:26px}
  .hero,.hero-stage{min-height:86svh}
.hero-stage{background:#050505}
.hero-art{width:min(147vw,790px);top:51%}
  .hero-back,.hero-front{mask-image:linear-gradient(transparent,#000 13%,#000 83%,transparent)}
  .hero-type{top:25%;width:57%}
  .hero-type p{font-size:10px}
.hero-type h1{margin-top:2.2%}
.hero-footer{padding-bottom:22px}
.hero-footer p,.jump{font-size:11px}
  .chapter{padding-block:62px}
.chapter-grid{grid-template-columns:1fr;gap:28px}
.chapter-copy{gap:14px}
.vin-visual{min-height:360px;padding:0 13px 13px}
.vin-panel{width:min(100%,305px);padding:15px}
.vin-photo img{object-position:center 63%}
  .frame .chapter-copy>p:not(.eyebrow,.micro){font-size:15px}
.phone{width:min(100%,389px)}
.outcome-copy{align-items:start;flex-direction:column}
.photo-set{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.hero-art{scale:1}
.hero-type{translate:-50% 0}
.outline path,.camera img{transition:none}
.vin-photo img{translate:0 0}
}

@font-face{font-family:Inter;src:url("assets/inter-normal.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Geist;src:url("assets/geist-normal.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("assets/source-serif-4-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}

[hidden]{display:none!important}
figure{margin:0}
.skip-link{position:absolute;z-index:20;top:8px;left:12px;translate:0 -150%;padding:9px 14px;background:var(--paper);color:var(--ink);border-radius:5px}
.skip-link:focus{translate:0 0}
.product-intro{background:#ece7e2;color:#19171a;display:grid;gap:19px}
.product-intro p:not(.eyebrow){max-width:49ch;color:#544d51}
.product-intro .eyebrow{color:#594e52}
.availability,.site-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:22px clamp(20px,7vw,112px);border-block:1px solid #2b2529;background:#111113}
.availability strong,.site-footer>a:last-child{font-size:14px}
.frame{--frame-top:12px;--stage-height:calc(100svh - 24px);background:radial-gradient(ellipse at 72% 40%,#252125,#0d0c0e 54%)}
.frame-intro{padding-bottom:clamp(33px,6vh,70px)}
.shot-list{padding:18px 20px;border:1px solid #433b40;border-radius:12px;background:#161417cc}
.shot-list h3{margin:0 0 10px;font-size:15px}
.shot-list ol{margin:0;padding-left:21px;display:grid;grid-template-columns:1fr 1fr;gap:4px 25px;color:#cec6c4;font-size:13px}
.frame-sequence{display:grid;width:min(100%,1160px);margin-inline:auto;gap:24px}
.frame-stage{display:none}
.guide-steps{margin:0;padding-left:23px}
.guide-steps li{padding:13px 16px 15px;margin-bottom:8px;border:1px solid #40373d;border-radius:9px;background:#141215}
.guide-steps h3,.guide-display h3{margin:0 0 6px;font-weight:650;letter-spacing:-.035em}
.guide-steps p,.guide-display>p:last-child{max-width:45ch;color:#c8bfbd;font-size:14px}
.alignment-stills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.alignment-stills .still-camera{position:relative;display:block;overflow:hidden;aspect-ratio:3/2}
.alignment-stills img{width:100%;height:auto}
.alignment-stills svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.alignment-stills path{fill:none;stroke:var(--red);stroke-width:2.5;vector-effect:non-scaling-stroke}
.alignment-stills figure+figure path{stroke:var(--green)}
.alignment-stills figcaption{padding:7px;color:#e4dcd9;font-size:12px}
.enhanced .frame-stage{display:block}
.enhanced .alignment-stills{display:none}
.frame-stage-inner{max-width:560px;margin-inline:auto;display:grid;align-content:center;justify-items:center;gap:10px}
.guide-display{width:min(100%,390px)}
.guide-display h3{font-size:clamp(21px,3vw,36px)}
.guide-display .eyebrow{margin-bottom:4px}
.phone-depth{position:relative;width:min(100%,414px);perspective:900px}
.phone-depth::before{content:"";position:absolute;inset:6% -4%;border-radius:45%;background:#8f494535;filter:blur(30px);transform:translate(0,14%)}
.phone{position:relative;width:100%;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--phone-y,0px));box-shadow:0 0 0 4px #3c383f, 5px 7px 0 3px #252228,0 28px 60px #000a;outline:1px solid #81777e;transform-origin:center center}
.camera img{transition:none;transform:translate(var(--camera-x,0%),var(--camera-y,0%)) scale(var(--camera-scale,1))}
.phone-copy{padding:9px 6px 4px}
.phone-top{height:34px}
.shot-track{margin:7px auto}
.shutter{width:32px;height:32px}
.guide-controls{display:flex;align-items:center;gap:7px;color:#ded3d1;font-size:12px;margin:5px 0}
.guide-controls button{width:38px;height:38px;border-radius:50%;border:1px solid #6a6066;background:#1f1a1d;color:#f6f3ef;cursor:pointer}
.guide-controls button:disabled{opacity:.4;cursor:default}
.guide-count{min-width:70px;text-align:center}
.guide-skip{margin-left:7px;text-decoration:underline;text-underline-offset:3px}
.studio{background:#151316}
.studio-inner{width:min(100%,1160px);margin:auto;display:grid;gap:17px}
.studio-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.studio-pair figure,.review-card{overflow:hidden;border:1px solid #51454a;border-radius:10px;background:#100d10}
.studio-pair img,.review-card>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.studio-pair figcaption,.review-panel{padding:11px 14px;color:#e4dcd9;font-size:14px}
.pitglow{font:italic 700 1.1em/.98 "Source Serif 4",Georgia,serif;color:#f5d6ca}
.review-card{max-width:580px}
.review-panel output{display:block;margin-top:10px;font-weight:650}
.review-panel ul{margin:6px 0 0;padding-left:21px;color:#c8bfbd}
.review-choice{display:flex;align-items:center;gap:8px}
.review-choice input{width:18px;height:18px;accent-color:#e52b25}
.information{display:grid;grid-template-columns:1fr 1fr;gap:22px;background:#eee9e3;color:#221d20;padding:clamp(40px,8vw,95px) clamp(20px,7vw,112px)}
.information article{padding:20px;border-left:1px solid #c9beb9}
.information h2{font-size:clamp(24px,4vw,47px);margin-bottom:10px}
.information p{max-width:50ch;color:#4b4247}
.information article a{display:inline-block;margin-top:9px;text-decoration:underline;text-underline-offset:3px}

@media(min-width:761px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
  .enhanced .frame{padding-bottom:0}
  .enhanced .frame-sequence{display:grid;align-items:start}
  .enhanced .frame-stage{position:sticky;top:var(--frame-top);height:var(--stage-height);display:grid;align-items:center;grid-column:1;grid-row:1;min-width:0}
  .enhanced .frame-stage-inner{width:100%;max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:8%;row-gap:19px}
  .enhanced .guide-display{width:100%;grid-column:1;grid-row:1;align-self:center}
  .enhanced .guide-display h3{font-size:clamp(33px,5vw,76px);line-height:.98;letter-spacing:-.06em;margin:12px 0}
  .enhanced .guide-display>p:last-child{font-size:clamp(16px,1.6vw,21px);max-width:34ch}
  .enhanced .phone-depth{grid-column:2;grid-row:1}
  .enhanced .guide-controls{grid-column:2;grid-row:2}
  .enhanced .guide-steps{grid-column:1;grid-row:1;list-style:none;padding:0;visibility:hidden;pointer-events:none}
  .enhanced .guide-steps li{min-height:calc(var(--stage-height) * .75);margin:0;padding:0;border:0}
  .enhanced .guide-steps li:last-child{min-height:var(--stage-height)}
}
@media(max-width:760px){
  .masthead{flex-wrap:wrap;height:auto;min-height:58px;padding-block:11px;gap:7px}
  .masthead nav{display:flex;order:3;flex-basis:100%;gap:16px;justify-content:center;font-size:11px}
  .chapter h2{font-size:clamp(34px,9vw,57px)}
  .shot-list{padding:14px}
  .shot-list ol{font-size:12px;column-gap:15px}
  .frame-stage-inner{gap:4px}
  .guide-display>p:last-child{font-size:13px;min-height:38px}
  .phone-depth{width:min(100%,315px)}
  .studio-pair{gap:7px}
  .studio-pair figcaption{font-size:12px;padding:6px 8px}
  .information{grid-template-columns:1fr;gap:8px}
  .information article{padding:12px}
}
@media(max-width:760px) and (min-height:650px) and (prefers-reduced-motion:no-preference){
  .enhanced .frame{padding-bottom:0}
  .enhanced .frame-sequence{display:block}
  .enhanced .frame-stage{position:sticky;top:var(--frame-top);height:var(--stage-height);display:grid;align-items:center;z-index:3;background:radial-gradient(ellipse,#221e24 0%,#100e11 70%);border-bottom:1px solid #41363c}
  .enhanced .guide-steps{padding:0;list-style:none;margin-top:calc(-1 * var(--stage-height))}
  .enhanced .guide-steps li{min-height:calc(var(--stage-height) * .70);margin:0;padding:0;border:0;background:none;visibility:hidden}
  .enhanced .guide-steps li:last-child{min-height:var(--stage-height)}
}
@media(prefers-reduced-motion:reduce){
 .phone{transform:none}
 .outline path{transition:none}
}
@media(max-height:720px){
 .phone-depth{max-width:315px}
}