/* Mission Hub, website showcase
   Brand system lifted verbatim from missionhub.ink (app/globals.css).
   Navy ground, champagne gold accent, Playfair display, Inter UI.
   House rules from the live site: no border radius, hairline rules,
   uppercase letterspaced micro-type, gold italic for emphasis. */

:root{
  --navy:#040B1C; --surface:#071629; --card:#0B1D38; --section:#071225;
  --gold:#C8A96E; --gold-bright:#E8C98E;
  --gold-dim:rgba(200,169,110,.1); --gold-border:rgba(200,169,110,.3);
  --blue:#4D8FFF; --teal:#2DD4BF;
  --txt:#F0EDE8; --txt2:#B8BDC8; --muted:#7E8CA8; --dim:#75849D;
  --line:rgba(77,143,255,.18); --line-sub:rgba(255,255,255,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:72px;

  /* The typeface the DEMO websites are set in. Swappable from the Fonts
     section and remembered across the whole showcase. Mission Hub's own
     chrome never uses these. */
  --f-display:'Playfair Display',Georgia,serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-dw:400;
  --f-ital:italic;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth}
body{
  margin:0; background:var(--navy); color:var(--txt);
  font-family:'Inter',-apple-system,system-ui,sans-serif; font-weight:300;
  font-size:16px; line-height:1.7; overflow-x:clip; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-family:'Playfair Display',Georgia,serif; font-weight:400; line-height:1.08}
p{margin:0}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
::selection{background:var(--gold); color:var(--navy)}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

.wrap{max-width:1680px; margin:0 auto; padding:0 clamp(20px,4vw,72px)}
.narrow{max-width:1180px}

/* micro type: the site's signature */
.micro{
  font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); line-height:1.6;
}
.micro-d{ color:var(--muted) }
.rule{height:1px; background:var(--line-sub); border:0; margin:0}

/* ── nav ─────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:200; height:var(--nav-h);
  background:rgba(4,11,28,.9); backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--line-sub);
}
.nav-in{height:100%; display:flex; align-items:center; gap:clamp(16px,3vw,48px)}
.brand{display:inline-flex; align-items:center; gap:.72rem; flex:0 0 auto}
.brand svg{display:block; flex:0 0 auto}
.brand b{
  font-family:'Inter',sans-serif; font-size:1rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; color:var(--txt);
}
.brand b i{font-style:normal; color:var(--gold)}
.tabs{display:flex; align-items:center; gap:clamp(14px,2vw,30px); margin-left:auto;
  overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  position:relative; padding:.5em 0; white-space:nowrap;
  font-size:.74rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt2); transition:color .3s;
}
.tabs a:hover{color:var(--txt)}
.tabs a.on{color:var(--gold)}
.tabs a.on::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold)}
.nav-cta{
  flex:0 0 auto; padding:.86em 1.5em; background:var(--gold); color:var(--navy);
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s;
}
.nav-cta:hover{background:var(--gold-bright)}
@media (max-width:1080px){ .nav-cta{display:none} }
@media (max-width:560px){ .brand b{display:none} }

/* ── page head ───────────────────────────────────────── */
.phead{position:relative; padding:clamp(64px,9vw,132px) 0 clamp(38px,5vw,64px)}
.phead::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 12% -10%, rgba(200,169,110,.10), transparent 62%),
             radial-gradient(ellipse 70% 80% at 92% 0%, rgba(77,143,255,.09), transparent 66%);
}
.phead .micro{margin-bottom:26px}
h1.display{font-size:clamp(2.6rem,6.6vw,5.6rem); letter-spacing:-.015em}
h1.display em{font-style:italic; color:var(--gold)}
.lede{
  margin-top:30px; max-width:62ch; font-size:clamp(1rem,1.2vw,1.14rem);
  line-height:1.85; color:var(--txt2); font-weight:300;
}
.lede b{color:var(--txt); font-weight:500}
.phead-meta{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line-sub);
  display:flex; gap:clamp(24px,5vw,72px); flex-wrap:wrap; align-items:baseline;
}
.phead-meta div b{display:block; font-family:'Playfair Display',serif; font-size:2rem; line-height:1; color:var(--txt)}
.phead-meta div span{display:block; margin-top:.55em; font-size:9px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}

/* ── make it yours ───────────────────────────────────────
   Type a business name and every demo on the page rebrands. The whole
   point of a showcase is answering "how would this look for me". */
.mine{margin-top:clamp(26px,3vw,38px); display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border:1px solid var(--gold-border); background:rgba(200,169,110,.05); max-width:820px}
.mine label{font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); flex:0 0 auto}
.mine input{flex:1 1 240px; min-width:0; font:inherit; font-size:.98rem; font-weight:400; color:var(--txt);
  background:transparent; border:0; border-bottom:1px solid var(--line-sub); padding:.55em .2em;
  transition:border-color .3s}
.mine input::placeholder{color:var(--dim)}
.mine input:focus{border-bottom-color:var(--gold)}
.mine input:focus:not(:focus-visible){outline:none}
.mine button{font:inherit; cursor:pointer; background:none; border:0; padding:0; color:var(--muted);
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; transition:color .25s}
.mine button:hover{color:var(--gold-bright)}

/* ── the film strip: one full-width demo per row ─────── */
.film{border-top:1px solid var(--line-sub); padding:clamp(40px,5vw,76px) 0}
.film:first-of-type{border-top:0}
.film-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:clamp(20px,2.4vw,32px)}
.film-head .l{display:flex; align-items:baseline; gap:clamp(14px,1.6vw,26px)}
.film-head .n{font-family:'Playfair Display',serif; font-size:clamp(1rem,1.5vw,1.3rem); color:var(--gold); line-height:1}
.film-head h2{font-size:clamp(1.5rem,2.7vw,2.4rem); letter-spacing:-.01em}
.film-head .r{display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); flex-wrap:wrap}
.film-head .kind{font-size:9px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.btn-pick{
  font:inherit; cursor:pointer; white-space:nowrap; min-height:34px; padding:0 1.1em;
  border:1px solid var(--line-sub); background:none; color:var(--txt2);
  font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .25s, color .25s, background .25s;
}
.btn-pick:hover{border-color:var(--gold); color:var(--gold-bright)}
.btn-pick.on{background:var(--gold); border-color:var(--gold); color:var(--navy); font-weight:600}

.stage{
  position:relative; width:100%; height:min(56vw,78vh); min-height:340px; max-height:900px;
  overflow:hidden; background:#03060e; container-type:inline-size; isolation:isolate;
  border:1px solid var(--line-sub);
}
.shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.scrim{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(3,6,14,.66) 0%,rgba(3,6,14,.26) 34%,rgba(3,6,14,.84) 100%)}
.stage:has(.site-hero.mid) .scrim{
  background:radial-gradient(ellipse 76% 64% at 50% 52%, rgba(3,6,14,.52), transparent 76%),
             linear-gradient(180deg,rgba(3,6,14,.64) 0%,rgba(3,6,14,.22) 34%,rgba(3,6,14,.84) 100%)}
.stage:has(.site-hero:not(.mid)) .scrim{
  background:linear-gradient(100deg,rgba(3,6,14,.82) 0%,rgba(3,6,14,.46) 44%,rgba(3,6,14,.10) 74%),
             linear-gradient(180deg,rgba(3,6,14,.52) 0%,rgba(3,6,14,.10) 34%,rgba(3,6,14,.80) 100%)}

/* ── the mini website that lives inside every stage ───
   This is the point of the whole showcase: each demo has to look like
   a page a client would actually want, not a labelled effect swatch. */
.site{
  position:absolute; inset:0; z-index:5; display:grid; grid-template-rows:auto 1fr auto;
  padding:3cqw 4.2cqw; color:var(--on,#F5F2ED); font-size:max(9.5px,1.28cqw);
  font-family:var(--f-body);
  text-shadow:0 1px 30px rgba(0,0,0,.5);
}
.site.sk-ink{text-shadow:none}
.site-nav{display:flex; align-items:center; justify-content:space-between; gap:2em}
.site-brand{font-size:1.02em; font-weight:500; letter-spacing:.34em; text-transform:uppercase; white-space:nowrap}
.site-links{display:flex; gap:1.9em; align-items:center}
.site-links i{font-style:normal; font-size:.62em; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; opacity:.74; white-space:nowrap}
.site-links u{text-decoration:none; font-size:.6em; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; border:1px solid currentColor; padding:.7em 1.3em; opacity:.9; white-space:nowrap}
@media (max-width:860px){ .site-links i{display:none} }

.site-hero{align-self:center; display:grid; justify-items:start; max-width:min(66cqw,30em)}
.site-hero.mid{justify-items:center; text-align:center; justify-self:center; max-width:min(84cqw,37em)}
.site-eye{font-size:.6em; font-weight:500; letter-spacing:.32em; text-transform:uppercase;
  color:var(--acc,#E4CFA3); margin-bottom:1.5em}
.site-h{font-family:var(--f-display); font-weight:var(--f-dw); font-size:3.35em;
  line-height:1.04; letter-spacing:-.012em}
.site-h em{font-style:var(--f-ital); color:var(--acc,#E4CFA3)}
.site-p{margin-top:1.25em; font-size:.72em; font-weight:300; line-height:1.85; opacity:.8; max-width:26em}
.site-cta{display:inline-block; margin-top:2.1em; font-size:.6em; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; padding:1.15em 2.2em;
  border:1px solid currentColor;
  border-color:color-mix(in srgb, currentColor 42%, transparent);
  background:transparent;
  background:color-mix(in srgb, currentColor 5%, transparent);
}
.site-cta.solid{background:var(--acc,#E4CFA3); border-color:var(--acc,#E4CFA3); color:#0B0906}
.site-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:2em;
  font-size:.56em; font-weight:400; letter-spacing:.26em; text-transform:uppercase; opacity:.62}

/* type personalities, so the showcase reads as range rather than one look */
.site[data-t="modern"] .site-h{font-family:var(--f-body); font-weight:200; font-size:2.5em;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.16}
.site[data-t="modern"] .site-h em{font-style:normal; font-weight:400}
.site[data-t="classic"] .site-h{font-size:2.15em; text-transform:uppercase; letter-spacing:.15em; line-height:1.4}
.site[data-t="classic"] .site-h em{font-style:italic; letter-spacing:.06em}

/* skins */
/* Skins defer to the chosen palette. With none set the six keep their own
   variety; pick one and every demo unifies on that color, which is what a
   real brand does. */
.sk-bone {--on:var(--p-on,#F6F3EE); --acc:var(--p-acc,#E4CFA3)}
.sk-sand {--on:var(--p-on,#FDF8F0); --acc:var(--p-acc,#E8C98E)}
.sk-ivory{--on:var(--p-on,#FFFDF9); --acc:var(--p-acc,#D9C9AC)}
.sk-blush{--on:var(--p-on,#FDF4F0); --acc:var(--p-acc,#E9C3B0)}
.sk-mist {--on:var(--p-on,#F2F5F8); --acc:var(--p-acc,#BFD2E4)}
.sk-ink  {--on:#12100B; --acc:var(--p-acc,#8C6C31)}

/* ── controls ────────────────────────────────────────────
   The play button is a real 48px-tall control, not a text link, and
   there is a second one on the stage itself, because that is where
   people look first. */
.film-foot{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(22px,3vw,60px);
  margin-top:clamp(18px,2vw,28px); align-items:start}
@media (max-width:900px){ .film-foot{grid-template-columns:1fr; gap:18px} }
.ctl{display:flex; align-items:center; gap:clamp(14px,1.6vw,22px); grid-column:1 / -1; margin-bottom:6px;
  flex-wrap:wrap}
.ctl button{
  font:inherit; cursor:pointer; background:none; border:0; padding:0; color:var(--gold);
  font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.7em; transition:color .3s; white-space:nowrap;
}
.ctl button::before{content:''; width:6px; height:6px; background:currentColor; flex:0 0 auto}
.ctl button:hover{color:var(--gold-bright)}

.ctl .btn-play::before{content:none}
.ctl .btn-play{
  background:rgba(200,169,110,.1); border:1px solid var(--gold); color:var(--gold-bright);
  min-height:48px; padding:0 1.7em; font-size:.74rem; font-weight:600; letter-spacing:.16em;
}
.ctl .btn-play:hover{background:var(--gold); border-color:var(--gold); color:var(--navy)}
.btn-play{
  font:inherit; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.8em;
  min-height:48px; padding:0 1.7em;
  border:1px solid var(--gold); background:rgba(200,169,110,.1); color:var(--gold-bright);
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:background .25s, color .25s, border-color .25s;
}
.btn-play::before{content:none}
.btn-play:hover{background:var(--gold); border-color:var(--gold); color:var(--navy)}
.ico{width:0; height:0; flex:0 0 auto;
  border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent}
.is-playing .ico{width:10px; height:12px; border:0; background:currentColor;
  clip-path:polygon(0 0,3.5px 0,3.5px 100%,0 100%,0 0,6.5px 0,10px 0,10px 100%,6.5px 100%,6.5px 0)}
.ctl .hint{font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}

.stage-play{
  position:absolute; left:50%; bottom:clamp(16px,2.4cqw,34px); transform:translateX(-50%);
  z-index:40; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.75em;
  min-height:46px; padding:0 1.6em; border:0;
  background:var(--gold); color:var(--navy);
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  transition:opacity .45s, transform .45s var(--ease), background .25s;
}
.stage-play:hover{background:var(--gold-bright)}
.stage.playing .stage-play{opacity:0; transform:translateX(-50%) translateY(10px); pointer-events:none}
@media (max-width:560px){ .stage-play{font-size:.64rem; min-height:40px; padding:0 1.2em} }
.ctl .track{position:relative; flex:1 1 auto; height:22px; display:flex; align-items:center; cursor:pointer}
.ctl .track::before{content:''; position:absolute; left:0; right:0; height:1px; background:var(--line-sub)}
.ctl .track i{position:absolute; left:0; height:1px; background:var(--gold); width:calc(var(--p,0)*100%)}
.ctl .track input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0}
/* the input is opacity:0, so its own focus ring is invisible; paint the wrapper */
.ctl .track:has(input:focus-visible){outline:2px solid var(--blue); outline-offset:3px}
.ctl .val{font-size:9px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums; min-width:44px; text-align:right}
.ctl .hint{font-size:9px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}

.film-foot .what{font-size:.94rem; line-height:1.85; color:var(--txt2); font-weight:300}
.film-foot .what b{color:var(--txt); font-weight:500}
.film-foot .who{font-size:.86rem; line-height:1.8; color:var(--muted); font-weight:300}
.film-foot .who span{display:block; margin-bottom:.5em; font-size:9px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}

/* ── overview page pieces ────────────────────────────── */
.sec{padding:clamp(56px,8vw,120px) 0; border-top:1px solid var(--line-sub)}
.sec-head{max-width:64ch}
.sec-head h2{font-size:clamp(1.9rem,3.8vw,3.1rem); letter-spacing:-.012em}
.sec-head h2 em{font-style:italic; color:var(--gold)}
.sec-head p{margin-top:20px; color:var(--txt2); font-weight:300; line-height:1.85}

.split2{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,5vw,90px)}
@media (max-width:960px){ .split2{grid-template-columns:1fr} }
.rows{display:grid}
.rows .row{padding:clamp(22px,2.6vw,34px) 0; border-top:1px solid var(--line-sub);
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,2.4vw,34px); align-items:baseline;
  transition:background .35s}
.rows .row:hover{background:rgba(200,169,110,.035)}
.rows .row .n{font-family:'Playfair Display',serif; font-size:1rem; color:var(--gold)}
.rows .row h3{font-size:clamp(1.2rem,1.9vw,1.6rem)}
.rows .row p{margin-top:10px; font-size:.9rem; color:var(--txt2); font-weight:300; line-height:1.8}
.rows .row .go{font-size:9px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap}

.btn{
  display:inline-block; padding:1.15em 2.3em; font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; transition:all .3s var(--ease);
  border:1px solid var(--gold-border); color:var(--txt);
}
.btn:hover{border-color:var(--gold); color:var(--gold-bright)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--navy)}
.btn.gold:hover{background:var(--gold-bright); border-color:var(--gold-bright); color:var(--navy)}

/* ── jump strip + footer ─────────────────────────────── */
.jump{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:1px;
  background:var(--line-sub); border-top:1px solid var(--line-sub); border-bottom:1px solid var(--line-sub)}
.jump a{background:var(--navy); padding:clamp(24px,3vw,38px) clamp(18px,2vw,28px); transition:background .35s}
.jump a:hover{background:var(--surface)}
.jump a small{display:block; font-size:9px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.9em}
.jump a b{font-family:'Playfair Display',serif; font-weight:400; font-size:1.25rem}

.foot{background:var(--section); border-top:1px solid var(--line-sub)}
.foot-in{padding:clamp(44px,6vw,86px) 0; display:grid; grid-template-columns:minmax(0,1.3fr) auto;
  gap:clamp(26px,4vw,60px); align-items:center}
@media (max-width:820px){ .foot-in{grid-template-columns:1fr} }
.foot p{color:var(--muted); font-size:.86rem; font-weight:300; line-height:1.85; max-width:64ch}
.foot p em{font-style:italic; color:var(--gold)}
.foot-bar{border-top:1px solid var(--line-sub); padding:22px 0;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}
.foot-bar span{font-size:9px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* staged reveal of the mini-site chrome: nav, then headline, then footer.
   Defaults to 1 so pages that don't animate it are unaffected. */
.site-nav{opacity:var(--u1,1); transform:translateY(calc((1 - var(--u1,1)) * -.7em))}
.site-hero > *{opacity:var(--u2,1); transform:translateY(calc((1 - var(--u2,1)) * .85em))}
.site-foot{opacity:calc(.62 * var(--u3,1))}