/* Convention Headshot Station - exhibition/expo-hall identity
   Tokens deliberately named for this site only. */
:root{
  --paper:#f7f5f1;
  --paper-2:#fffefb;
  --slate:#22262a;
  --slate-2:#4b5259;
  --slate-3:#767d84;
  --rule:#ddd8d0;
  --rule-2:#c9c3b9;
  --signal:hsl(176 62% 26%);
  --signal-deep:hsl(176 68% 17%);
  --signal-tint:hsl(176 34% 93%);
  --stage:#1b1f22;
  --edge:2px;
  --measure:68ch;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--slate);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:18px;line-height:1.62;
  font-optical-sizing:auto;
}
h1,h2,h3,h4,.sig,.btn,nav,.label,.stat-n,.eyebrow{
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3{line-height:1.08;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.1rem);font-weight:700;font-stretch:105%}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700}
h3{font-size:1.16rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1.1em;max-width:var(--measure)}
a{color:var(--signal-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px}

/* mono numerics */
.mono,.stat-n,td.num,.price{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* spec-sheet label */
.label{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-3);display:block;margin:0 0 14px;
}
.label b{color:var(--signal);font-weight:700}

/* header */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.site-head .wrap{display:flex;align-items:center;gap:24px;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--slate);margin-right:auto}
.brand .mk{width:26px;height:26px;flex:0 0 26px}
.brand .nm{font-family:Archivo,sans-serif;font-weight:700;font-size:.98rem;line-height:1.15;letter-spacing:-.01em}
.brand .nm small{display:block;font-weight:500;font-size:.72rem;color:var(--slate-3);letter-spacing:.02em}
nav{display:flex;gap:22px;align-items:center;font-size:.9rem;font-weight:600}
nav a{color:var(--slate-2);text-decoration:none}
nav a:hover,nav a[aria-current=page]{color:var(--signal-deep)}
.navtel{font-family:"JetBrains Mono",monospace;font-size:.86rem;color:var(--slate)}
@media(max-width:860px){
  .site-head .wrap{flex-wrap:wrap;gap:12px 18px}
  nav{width:100%;gap:16px;font-size:.83rem;flex-wrap:wrap}
}

/* buttons */
.btn{
  display:inline-block;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:13px 24px;border-radius:var(--edge);text-decoration:none;border:1px solid transparent;
  transition:transform .12s ease,background-color .15s ease;
}
.btn-primary{background:var(--signal-deep);color:#fff}
.btn-primary:hover{background:var(--signal);color:#fff}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{border-color:var(--rule-2);color:var(--slate)}
.btn-ghost:hover{border-color:var(--signal);color:var(--signal-deep)}

/* hero: gently asymmetric, 7/5 */
.hero{padding:clamp(44px,7vw,86px) 0 clamp(36px,5vw,60px)}
.hero-grid{display:grid;grid-template-columns:1.22fr 1fr;gap:clamp(28px,4vw,54px);align-items:center}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal-deep);margin:0 0 18px;display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--rule-2);max-width:120px}
.lede{font-size:1.2rem;color:var(--slate-2);max-width:52ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.hero-note{font-size:.86rem;color:var(--slate-3);margin:14px 0 0}

/* contact sheet: the signature element */
.sheet{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:var(--slate);padding:6px;border-radius:var(--edge);
}
.sheet img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;filter:saturate(.96)}
.sheet-cap{
  font-family:"JetBrains Mono",monospace;font-size:.68rem;color:var(--slate-3);
  margin:8px 0 0;letter-spacing:.02em;
}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:30px}}

/* strip of faces, full bleed */
.strip{display:flex;gap:4px;overflow:hidden;background:var(--slate);padding:4px}
.strip img{width:calc(100%/8);aspect-ratio:1/1;object-fit:cover;height:auto;flex:1 0 auto}
@media(max-width:860px){.strip img{width:calc(100%/4)}}

/* sections */
section{padding:clamp(46px,6vw,84px) 0}
.sec-dark{background:var(--stage);color:#e8e6e2}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:#bdbcb8}
.sec-dark .label{color:#8b8f92}
.sec-tint{background:var(--signal-tint)}
.rule-top{border-top:1px solid var(--rule)}

/* answer block, liftable */
.answer{
  border-left:3px solid var(--signal);padding:2px 0 2px 22px;margin:0 0 34px;
  font-size:1.14rem;max-width:64ch;
}

/* steps: real sequence, so numbered */
.steps{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--edge);overflow:hidden}
.step{background:var(--paper-2);padding:26px clamp(20px,3vw,32px);display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start}
.step .n{font-family:"JetBrains Mono",monospace;font-size:.9rem;color:var(--signal);font-weight:700;padding-top:4px}
.step p{margin:0;font-size:.98rem;color:var(--slate-2)}
.step h3{margin-bottom:.3em}
@media(max-width:600px){.step{grid-template-columns:1fr;gap:6px}}

/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 8px}
.spec th,.spec td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--rule)}
.spec th{font-family:Archivo,sans-serif;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-3);font-weight:700}
.spec tr:last-child td{border-bottom:none}
.spec td.num{white-space:nowrap}
.spec caption{caption-side:bottom;text-align:left;font-size:.82rem;color:var(--slate-3);padding-top:12px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--edge);overflow:hidden}
.stat{background:var(--paper-2);padding:28px 24px}
.sec-dark .stats{background:#2b3034;border-color:#2b3034}
.sec-dark .stat{background:#212528}
.stat-n{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:700;letter-spacing:-.03em;color:var(--signal-deep);display:block;line-height:1}
.sec-dark .stat-n{color:hsl(176 52% 62%)}
.stat p{margin:10px 0 0;font-size:.92rem;color:var(--slate-2)}
.sec-dark .stat p{color:#a9adb0}
@media(max-width:700px){.stats{grid-template-columns:1fr}}

/* case cards: varied, not identical triplet */
.cases{display:grid;grid-template-columns:1.4fr 1fr;gap:26px}
.case{border:1px solid var(--rule);border-radius:var(--edge);padding:clamp(22px,3vw,34px);background:var(--paper-2)}
.case.lead{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}
.case .logo{height:34px;width:auto;margin:0 0 20px;opacity:.9}
.case .fig{font-family:"JetBrains Mono",monospace;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;color:var(--signal-deep);letter-spacing:-.03em;display:block;margin:0 0 10px}
.case p{font-size:.95rem;color:var(--slate-2);margin:0}
.case .where{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--slate-3);display:block;margin:14px 0 0}
@media(max-width:860px){.cases{grid-template-columns:1fr}.case.lead{grid-row:auto}}

/* pricing */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.tier{border:1px solid var(--rule);border-radius:var(--edge);background:var(--paper-2);padding:clamp(24px,3vw,34px)}
.tier.pick{border-color:var(--signal);border-width:2px}
.tier .price{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;display:block;margin:6px 0 4px;color:var(--slate)}
.tier .per{font-size:.84rem;color:var(--slate-3);display:block;margin-bottom:20px}
.tier ul{list-style:none;padding:0;margin:0 0 24px}
.tier li{padding:9px 0 9px 22px;border-bottom:1px solid var(--rule);font-size:.94rem;position:relative}
.tier li:last-child{border-bottom:none}
.tier li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--signal)}
@media(max-width:800px){.tiers{grid-template-columns:1fr}}

/* faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:4px 0}
.faq summary{
  cursor:pointer;padding:18px 0;font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--signal);font-weight:700;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 18px;font-size:.98rem;color:var(--slate-2)}

/* form */
.quote{border:1px solid var(--rule);border-radius:var(--edge);background:var(--paper-2);padding:clamp(24px,3.5vw,40px)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f-full{grid-column:1/-1}
label{display:block;font-family:Archivo,sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-3);margin:0 0 7px}
input,select,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--rule-2);border-radius:var(--edge);
  background:#fff;font-family:inherit;font-size:1rem;color:var(--slate);
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--signal);outline:2px solid var(--signal-tint);outline-offset:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.84rem;color:var(--slate-3);margin:16px 0 0}
.form-msg{margin:16px 0 0;font-size:.95rem;font-weight:600}
.form-msg.ok{color:var(--signal-deep)}
.form-msg.err{color:#9b2c1f}
@media(max-width:640px){.fields{grid-template-columns:1fr}}

/* footer: fixed grid, never content-width flex */
.site-foot{background:var(--stage);color:#a9adb0;padding:54px 0 40px;font-size:.9rem}
.site-foot a{color:#d6d4d0;text-decoration:none;display:block;margin:0 0 9px}
.site-foot a:hover{color:#fff}
.site-foot .cols{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:32px;align-items:start}
.site-foot .brand{margin:0 0 14px}
.site-foot .brand .nm{color:#fff}
.site-foot .brand .mk rect{fill:#fff}
.site-foot .brand .mk path{fill:var(--stage)}
.site-foot h4{font-family:Archivo,sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#7e8386;margin:0 0 16px;font-weight:700}
.site-foot .fine{border-top:1px solid #2f3437;margin-top:34px;padding-top:20px;font-size:.82rem;color:#7e8386}
.site-foot p{color:#a9adb0;max-width:38ch;font-size:.9rem}
@media(max-width:760px){.site-foot .cols{grid-template-columns:1fr 1fr}}

/* motion, restrained */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
  .reveal.in{opacity:1;transform:none}
}