@font-face{font-family:Jost;src:url('/media/jost-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('/media/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* Secret Location brand layer for the v2 sample and formats pages. Loads after ../walk.css and ../sales.css.
   r8: the hub's system (index.html). SL black #0F0F0F and off-white #FEFAF4, light Jost in sentence case,
   Inter for body, purple #5343CE only on the one "Book a creative call" button, sparse, one object per screen.
   Jost stands in for Brandon Grotesque (licence unconfirmed); swap --font-heading here if the site settles on another. */
:root,:root:not([data-theme="light"]),:root[data-theme="dark"],:root[data-theme="light"]{color-scheme:dark;
  --font-heading:"Jost","Futura","Avenir Next",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--font-heading);--body:var(--font-body);
  --sl-black:#0F0F0F;--sl-white:#FEFAF4;--sl-purple:#5343CE;--sl-purple-h:#6556E0;--sl-dark-purple:#210382;--sl-green:#6CEA9E;--sl-teal:#74F9FD;--sl-blue:#26A9E0;
  --bg:#0F0F0F;--surface:#151515;--ink:#FEFAF4;--muted:rgba(254,250,244,.66);--line:rgba(254,250,244,.14);
  --accent:#FEFAF4;--accent-soft:rgba(254,250,244,.08);--fill:#151515;--stage:#0F0F0F;
  --gut:clamp(16px,6vw,96px)}
*{box-sizing:border-box}
html{background:#0F0F0F;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;padding:0;background:#0F0F0F;color:#FEFAF4;font:400 16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,video{max-width:100%}

/* ---- fixed header: the mark and the one button, as on the hub ---- */
header.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,4vw,48px)}
header.top::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(to bottom,rgba(15,15,15,.78),rgba(15,15,15,0));z-index:-1;pointer-events:none}
.mark{font:500 15px/1 var(--font-heading);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:#FEFAF4}
.mark:focus-visible{outline:2px solid #FEFAF4;outline-offset:4px}
header.top .btn-p{min-height:42px;padding:0 20px!important;font-size:14px!important}

/* ---- the one button ---- */
.btn-p,form.lead button[type=submit],.end a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px!important;border-radius:999px!important;
  background:#5343CE!important;border:0!important;color:#fff!important;font:500 15px/1 var(--font-body)!important;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none!important;transition:background-color .25s}
.btn-p:hover,.btn-p:focus-visible,form.lead button[type=submit]:hover,.end a:hover{background:#6556E0!important}
.btn-p:focus-visible,form.lead button[type=submit]:focus-visible,.end a:focus-visible{outline:2px solid #FEFAF4;outline-offset:3px}
.sticky{display:none!important}

/* ---- type ---- */
h1,h2,h3{font-family:var(--font-heading);font-weight:400;text-transform:none;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.kicker{margin:0 0 18px;font:500 12px/1.2 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lede{margin:0;max-width:38em;font-size:clamp(16px,1.35vw,19px);color:var(--muted)}
.fine,.note{font-size:13px;color:var(--muted)}

/* ---- 1. hero: the still fills the screen; headline, one sentence, one button ---- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;display:flex;align-items:flex-end;padding:0 var(--gut) clamp(48px,10vh,104px);overflow:hidden;background:#0F0F0F}
.hero .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.78) contrast(1.05) saturate(.94);z-index:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(15,15,15,.9) 0%,rgba(15,15,15,.45) 34%,rgba(15,15,15,0) 60%),linear-gradient(to right,rgba(15,15,15,.72) 0%,rgba(15,15,15,.25) 42%,rgba(15,15,15,0) 62%)}
.hero .copy{position:relative;z-index:2;max-width:min(760px,100%);display:grid;gap:20px;justify-items:start}
.hero .label{margin:0;font:500 12px/1.2 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.hero .label b{font-weight:500;color:#FEFAF4}
.hero h1{margin:0;font-size:clamp(46px,7.2vw,112px);line-height:1;letter-spacing:-.02em}
.hero .lede{max-width:34em;color:rgba(254,250,244,.8)}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}

/* ---- quiet sections ---- */
.sec{position:relative;padding:clamp(80px,13vh,150px) var(--gut)}
.sec>.in{max-width:1240px;margin:0 auto}
.sec h2{margin:0 0 clamp(24px,4vh,44px);font-size:clamp(32px,4.4vw,64px);line-height:1.04;max-width:18ch}
.sec .lede{margin:calc(-1 * clamp(10px,2vh,24px)) 0 clamp(28px,5vh,52px)}
.sec+.sec{border-top:1px solid rgba(254,250,244,.08)}
.sec.light{background:#FEFAF4;color:#0F0F0F;border-top:0}
.sec.light+.sec{border-top:0}
.sec.light .kicker,.sec.light .lede,.sec.light .note{color:rgba(15,15,15,.62)}

/* ---- 2. watch it play ---- */
.watch .stage{border-radius:14px;box-shadow:none;outline:1px solid rgba(254,250,244,.12);outline-offset:-1px}
.watch .credit{margin:16px 0 0;font-size:12.5px;color:var(--muted);max-width:80ch}
.watch .mcap{margin-top:-6px}
/* 3. what guests do: a numbered list, no boxes */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:0 clamp(16px,2.4vw,32px);counter-reset:f}
.flow li{counter-increment:f}
.flow button{background:none!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:18px 0 8px!important;color:#FEFAF4;font:400 20px/1.25 var(--font-heading)!important;gap:6px!important;text-align:left}
.flow button::before{content:counter(f,decimal-leading-zero)!important;font:500 12px/1 var(--font-body)!important;letter-spacing:.2em!important;color:var(--muted)!important}
.flow button small{font:400 14px/1.45 var(--font-body);color:var(--muted)}
.flow button:hover,.flow button.now{border-top-color:#FEFAF4!important}
.flow button:focus-visible{outline:2px solid #FEFAF4;outline-offset:4px}
.facts{margin:clamp(40px,7vh,72px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px clamp(16px,2.4vw,32px)}
.facts div{display:grid;gap:6px;align-content:start}
.facts dt{font:500 12px/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-size:15px;line-height:1.45;color:#FEFAF4;font-weight:400}
/* 4. try it */
.tryit .textlink{font:400 clamp(20px,2vw,26px)/1.2 var(--font-heading);color:#FEFAF4;background:none;border:0;padding:0 0 4px;border-bottom:1px solid rgba(254,250,244,.5);cursor:pointer}
.tryit .textlink:hover{border-bottom-color:#FEFAF4}
.tryit .textlink:focus-visible{outline:2px solid #FEFAF4;outline-offset:4px}
.tryit .textlink .ar{display:inline-block;transition:transform .25s}.tryit .textlink:hover .ar{transform:translateX(4px)}
/* 5. make it yours */
.spins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px clamp(20px,3vw,48px)}
.spins div{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:10px;align-content:start}
.spins h3{margin:0;font-size:clamp(22px,2vw,28px);line-height:1.15}
.spins p{margin:0;color:var(--muted);max-width:34em}
/* 6. results: the numbers in one place */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(16px,2.4vw,32px)}
.nums div{display:grid;gap:8px;align-content:start;border-top:1px solid var(--line);padding-top:20px}
.nums b{font:300 clamp(44px,5.4vw,80px)/1 var(--font-heading);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nums span{font-size:15px;color:var(--muted);max-width:22em}
.basis{margin:clamp(24px,4vh,40px) 0 0;font-size:14px;color:var(--muted);max-width:72ch}
.proofline{margin:clamp(40px,7vh,72px) 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:var(--muted);max-width:72ch}
.proofline b{color:#FEFAF4;font-weight:500}
/* 7. how we work (legacy column layout; r10 pages use the .stabs tabs from steps-tabs.js) */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.steps3>div{display:grid;gap:10px;align-content:start;border-top:1px solid rgba(15,15,15,.18);padding-top:22px}
.steps3 .when{margin:0;font:500 12px/1.3 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:rgba(15,15,15,.6)}
.steps3 h3{margin:0;font-size:clamp(26px,2.4vw,34px);line-height:1.1}
.steps3 p{margin:0;color:rgba(15,15,15,.74);max-width:34em}
.steps3 .who{font-size:14.5px}
.steps3 .from{font-weight:500;color:#0F0F0F}
.steps3 a{color:#0F0F0F;text-underline-offset:3px}
.quietline{margin:clamp(28px,5vh,48px) 0 0;font-size:14px;color:var(--muted);max-width:72ch}
.quietline+.quietline{margin-top:12px}
.quietline.entry{color:#FEFAF4;font-weight:500}
/* r10: the steps band is part of the dark world (#0F0F0F, off-white type; purple only on the button). Tabs: steps-tabs.js */
.sec.stepsec{background:#0F0F0F;color:#FEFAF4}
/* 8. faq */
.faq{border-top:1px solid var(--line);max-width:920px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:400 clamp(19px,1.7vw,23px)/1.3 var(--font-heading);color:#FEFAF4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 26px/1 var(--font-heading);color:var(--muted);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid #FEFAF4;outline-offset:4px}
.faq details>div{padding:0 0 24px;display:grid;gap:10px;max-width:68ch}
.faq details p{margin:0;color:var(--muted);font-size:15.5px}
/* 9. the creative call */
.callsec .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:start}
.callsec h2{max-width:12ch}
.callsec .l{display:grid;gap:16px}
.callsec .l p{margin:0;color:var(--muted);max-width:40em}
.callsec .l ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--muted);font-size:15px}
form.lead{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
form.lead label{display:grid;gap:6px;font-size:13px;color:var(--muted);opacity:1!important}
form.lead label small{opacity:.8}
form.lead input,form.lead select{font:400 16px var(--font-body)!important;min-height:48px;padding:0 12px!important;border-radius:10px!important;border:1px solid rgba(254,250,244,.2)!important;background:#151515!important;color:#FEFAF4!important;width:100%}
form.lead input::placeholder{color:rgba(254,250,244,.4)}
form.lead input:focus-visible,form.lead select:focus-visible{outline:2px solid #FEFAF4!important;outline-offset:1px}
form.lead button[type=submit]{grid-column:1/-1;justify-self:start;margin-top:6px}
form.lead .fine{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted);opacity:1}
.thanks{grid-column:1/-1;background:#151515!important;color:#FEFAF4!important;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.thanks .keep{border-top-color:var(--line)!important}
.thanks .keep .copyb{color:#FEFAF4!important;background:transparent!important;border-color:var(--line)!important}
.thanks .keep .copyb.pri{background:#5343CE!important;border-color:#5343CE!important;color:#fff!important}
.thanks .keep textarea{color:#FEFAF4!important;background:#0F0F0F!important;border-color:var(--line)!important}
.thanks .keep .ok{color:#FEFAF4!important}
.copyb{color:#FEFAF4;background:transparent;border:1px solid var(--line)}
.copyb:focus-visible{outline:2px solid #FEFAF4;outline-offset:2px}
/* footer */
.foot{padding:0 var(--gut) 56px}
.foot .in{max-width:1240px;margin:0 auto;display:grid;gap:10px;padding-top:24px;border-top:1px solid var(--line)}
.foot p{margin:0;font-size:13px;color:var(--muted);max-width:90ch}
.foot a{color:#FEFAF4}

/* ---- the stage (walk.css) in brand colours: off-white chrome, purple only on the play button ---- */
.stage{background:#0F0F0F}
.bigplay{background:#5343CE!important;box-shadow:none!important;font-family:var(--font-body)!important;font-weight:500!important}
.bar .fill{background:#FEFAF4}
.lower{border-left-color:#FEFAF4;background:rgba(15,15,15,.72);font-family:var(--font-body);letter-spacing:.14em}
.brandtag{font-family:var(--font-heading);font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.brandtag i{background:#FEFAF4}
.loading{background:#0F0F0F}.loading i{border-top-color:#FEFAF4}
.pp:focus-visible,.bar:focus-visible,.tick:focus-visible,.fs:focus-visible,.vtabs button:focus-visible{outline:2px solid #FEFAF4;outline-offset:2px}
.tick:hover::before{background:#0F0F0F}
.mcap{background:#151515}
.cap{font-family:var(--font-heading);font-weight:400}
.end{background:rgba(15,15,15,.94)}
.end .k{color:rgba(254,250,244,.7);font-family:var(--font-body);letter-spacing:.2em}
.end h2{font-family:var(--font-heading);font-weight:400}
.end a{min-height:0;padding:1cqw 2.2cqw!important;font-size:max(12px,1.5cqw)!important}
.end button{border-color:rgba(254,250,244,.5)}
.phone .chk i{background:#5343CE}
.trip figcaption{font-family:var(--font-body)}
.stage.walking .cap{opacity:0}
.stage.clean .ov,.stage.clean .ctrl{display:none}
.shotn{display:none}
/* venue tabs inside the stage: "spaces like yours" */
.vtabs{position:absolute;top:1.8cqw;left:50%;transform:translateX(-50%);display:flex;gap:.4cqw;padding:.35cqw;background:rgba(15,15,15,.62);border:1px solid rgba(254,250,244,.16);border-radius:99px;z-index:6;pointer-events:auto;backdrop-filter:blur(6px)}
.vtabs button{font:500 max(11px,1.1cqw) var(--font-body);color:rgba(254,250,244,.8);background:none;border:0;border-radius:99px;padding:.55cqw 1.3cqw;cursor:pointer;white-space:nowrap}
.vtabs button.now{background:#FEFAF4;color:#0F0F0F}
.stage.overlay .vtabs{opacity:.35}

/* ---- phone: the still above the text ---- */
@media (max-width:860px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps3{grid-template-columns:1fr}
  .callsec .grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  header.top{padding:14px 16px}
  .mark{font-size:13px;letter-spacing:.16em}
  header.top .btn-p{min-height:40px;padding:0 16px!important;font-size:13px!important}
  .hero{display:block;height:auto;min-height:0;padding:0}
  .hero::before{display:none}
  .hero .still{position:relative;inset:auto;display:block;width:100%;height:52svh;min-height:300px;max-height:520px;filter:brightness(.9) contrast(1.04)}
  .hero .shade{display:block;position:absolute;left:0;right:0;top:0;height:52svh;min-height:300px;max-height:520px;background:linear-gradient(to bottom,rgba(15,15,15,.55),rgba(15,15,15,0) 26%,rgba(15,15,15,0) 70%,#0F0F0F);pointer-events:none;z-index:1}
  .hero .copy{padding:4px 16px 40px;gap:16px}
  .hero h1{font-size:clamp(40px,11vw,56px)}
  .hero .acts .btn-p{width:100%}
  .sec{padding:72px 16px}
  .flow{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr;gap:20px 16px}
  .nums b{font-size:44px}
  form.lead{grid-template-columns:1fr}
  form.lead button[type=submit]{width:100%}
  .stage .brandtag,.stage .lower{display:none}
  .vtabs{top:8px;left:8px;right:8px;transform:none;justify-content:center;padding:3px}
  .vtabs button{font-size:11px;padding:6px 9px}
  .foot{padding:0 16px 40px}
}
@media (min-width:641px){.hero .shade{display:none}}
@media (max-width:380px){.mark span{display:none}.facts{grid-template-columns:1fr}}

/* ---- formats page: the picker, the panel and the table on the same quiet system ---- */
.in.stack{display:grid;gap:24px}
.in.stack>*{min-width:0}
.watch .ftabs,.watch .legend,.watch .fpanel{margin-top:0!important}
.watch .ftabs button{font:500 14px var(--font-body);background:transparent;border-color:var(--line)}
.watch .ftabs button[aria-selected=true]{background:#FEFAF4;color:#0F0F0F;border-color:#FEFAF4}
.watch .ftabs button i{font-family:var(--font-body)}
.watch .fpanel{background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;padding:28px 0 0!important}
.fpanel h2{font-weight:400!important;font-size:clamp(28px,3vw,40px)!important;max-width:none}
.fpanel .k,.idea b,.gets1 b,.fpanel .four dt,.glance-t thead th{font-family:var(--font-body)!important;font-weight:500!important;letter-spacing:.16em!important;color:var(--muted)!important}
.fpanel .fline{font-weight:300}
.fpanel .four{background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;gap:0 24px!important}
.fpanel .four div{background:transparent!important;padding:14px 0!important;border-bottom:1px solid var(--line)}
.fpanel .four .fp,.pr .big{font-family:var(--font-heading)!important;font-weight:400!important;color:#FEFAF4!important}
.proofl{background:transparent!important;border-left-width:2px!important;border-radius:0!important}
.suits a{background:transparent!important;border:1px solid var(--line)!important;color:#FEFAF4!important;font-weight:500!important}
.pbadge{font-family:var(--font-body)!important;font-weight:500!important}
.ffacts{margin-top:8px}
.glance-w{background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important}
.glance-t td,.glance-t th{border-top-color:var(--line)!important}
.glance-t tbody th button{font-weight:500!important;color:#FEFAF4!important}
.ladder{background:transparent!important;border:0!important;border-radius:0!important;gap:24px clamp(16px,2.4vw,32px)!important;margin-top:40px!important}
.ladder div{background:transparent!important;border-top:1px solid var(--line);padding:18px 0 0!important}
.ladder b{font-family:var(--font-heading)!important;font-weight:400!important;font-size:clamp(26px,2.4vw,34px)!important;color:#FEFAF4!important}
.ladder strong{font-weight:500}
.fp-cta .btn-p{min-height:48px}
/* the stage's play button is not the call to action: off-white, so purple stays on "Book a creative call" */
.bigplay{background:#FEFAF4!important;color:#0F0F0F!important}
.bigplay svg{fill:#0F0F0F!important}
.bigplay:hover{background:#fff!important}

/* r10b: the Results Recap as one line of metrics; the table sits in a closed details */
.metrics{margin:0 0 10px;font:300 clamp(20px,2vw,28px)/1.35 var(--font-heading);color:#FEFAF4;max-width:40em}

/* Scene review: keyboard focus must not scroll the canvas inside its clipped stage.
   Keep a paused Resume control clear of two-line walkthrough captions. */
.stage{overflow:clip}
.stage.resumable .bigplay{top:42%;bottom:auto;transform:translate(-50%,-50%)}
.stage.playing.resumable .bigplay{transform:translate(-50%,-44%)}

/* Hidden narrative overlays must also leave keyboard and accessibility order. */
.stage .end:not(.on),.stage .spec:not(.on),.stage .phone:not(.on),.stage .trip:not(.on){visibility:hidden}
.stage.playing .bigplay{visibility:hidden}