/* ==========================================================================
   AEO GARAGE — client.css
   Palette: off-white / warm gray / ink / muted silver, one signal accent.
   Type: Fraunces (display) + Inter (body/utility) + IBM Plex Mono (telemetry)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --off-white:#F5F2EA;
  --paper:#EFEAE0;
  --warm-gray:#C9C0AF;
  --ink:#16140F;
  --ink-70: rgba(22,20,15,.7);
  --ink-45: rgba(22,20,15,.45);
  --ink-16: rgba(22,20,15,.14);
  --silver:#AEA79A;
  --signal:#B8461C;
  --signal-dim: rgba(184,70,28,.14);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --fs-hero: clamp(3.2rem, 3vw + 6rem, 8.4rem);
  --fs-h1: clamp(2.4rem, 1.6vw + 2rem, 4.2rem);
  --fs-h2: clamp(1.7rem, 1vw + 1.3rem, 2.6rem);
  --fs-lg: clamp(1.15rem, .4vw + 1.05rem, 1.4rem);
  --fs-body: clamp(1rem, .15vw + .95rem, 1.08rem);
  --fs-sm: .85rem;
  --fs-label: .72rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4rem, 8vw, 9rem);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 260ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--off-white);color:var(--ink);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit;}
input{font:inherit;color:inherit;}
h1,h2,h3,p{margin:0;}
ul{list-style:none;margin:0;padding:0;}
::selection{background:var(--ink);color:var(--off-white);}

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

:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}

/* ---------- layout helpers ---------- */
.wrap{max-width:1400px;margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);border-top:1px solid var(--ink-16);}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);}
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---------- custom cursor ---------- */
.cursor-dot{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--signal);pointer-events:none;z-index:999;mix-blend-mode:multiply;
  transform:translate(-50%,-50%);transition:width var(--dur) var(--ease),height var(--dur) var(--ease),
  background var(--dur) var(--ease);}
.cursor-dot.is-active{width:34px;height:34px;background:transparent;border:1px solid var(--ink);}
@media (hover:none){.cursor-dot{display:none;}}

/* ---------- nav ---------- */
.nav{position:fixed;inset-inline:0;top:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem var(--gutter);transition:padding var(--dur) var(--ease),
  background var(--dur) var(--ease),border-color var(--dur) var(--ease);border-bottom:1px solid transparent;}
.nav.is-scrolled{padding-block:.65rem;background:rgba(245,242,234,.86);backdrop-filter:blur(10px);
  border-color:var(--ink-16);}
.nav__mark{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.06em;font-weight:500;}
.nav__mark span{color:var(--signal);}
.nav__links{display:flex;align-items:center;gap:2.1rem;}
.nav__links a{font-size:.86rem;letter-spacing:.02em;color:var(--ink-70);transition:color var(--dur) var(--ease);
  position:relative;}
.nav__links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--ink);
  transition:width var(--dur) var(--ease);}
.nav__links a:hover{color:var(--ink);}
.nav__links a:hover::after{width:100%;}
.nav__cta{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--ink);padding:.6rem 1.1rem;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.nav__cta:hover{background:var(--ink);color:var(--off-white);}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:.4rem;}
.nav__burger span{width:22px;height:1px;background:var(--ink);display:block;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);}

.mobile-panel{position:fixed;inset:0;z-index:90;background:var(--off-white);display:flex;
  flex-direction:column;justify-content:center;gap:1.6rem;padding:var(--gutter);}
.mobile-panel a{font-family:var(--font-display);font-size:2.2rem;}

/* ---------- telemetry strip (signature element) ---------- */
.telemetry{position:fixed;top:68px;inset-inline:0;z-index:90;background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;overflow:hidden;
  border-bottom:1px solid rgba(245,242,234,.1);transition:top var(--dur) var(--ease);}
.nav.is-scrolled ~ .telemetry{top:59px;}
.telemetry__track{display:flex;width:max-content;animation:marquee 34s linear infinite;}
.telemetry__row{display:flex;align-items:center;gap:2.6rem;padding:.5rem var(--gutter);white-space:nowrap;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.telemetry__item{display:inline-flex;align-items:center;gap:.5rem;color:rgba(245,242,234,.7);}
.telemetry__dot{width:5px;height:5px;border-radius:50%;background:#7C8A6B;flex:none;}
.telemetry__dot--live{background:#8FAE6E;animation:pulse 1.8s ease-in-out infinite;}
.telemetry__dot--wait{background:var(--signal);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- buttons (used across services/contact/footer) ---------- */
.btn{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--ink);padding:.95rem 1.6rem;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.btn:hover{background:var(--ink);color:var(--off-white);}
.btn--ghost{border-color:var(--ink-45);color:var(--ink-70);}
.btn--ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink);}
.btn.is-submitting{opacity:.5;cursor:wait;pointer-events:none;}

/* ---------- hero: scroll-driven garage door ---------- */
.garage-scroll-space{position:relative;height:200vh;}
.garage-hero{position:sticky;top:0;height:100svh;overflow:hidden;perspective:2200px;}
.garage-hero__interior{
  position:absolute;
  inset:0;
  background:var(--ink);
  z-index:0;

  display:flex;
  align-items:center;
  justify-content:center;
}
.garage-hero__message{
  max-width:50rem;
  padding:2rem;
  color:var(--off-white);
  text-align:center;
  transform:translateY(0vh);
}

.garage-hero__message p{
  font-family:var(--font-display);
  font-size:clamp(2rem,3vw,4rem);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
}

.garage-door{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--off-white) 0%,var(--paper) 100%);
  transform-origin:top center;
  transform:rotateX(calc(var(--door-progress, 0) * 114deg));
  box-shadow:0 40px 90px rgba(22,20,15,.28);
  will-change:transform;
  backface-visibility:hidden;
}
.garage-door__texture{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    transparent 0 68px, var(--warm-gray) 68px 69px, transparent 69px 138px);
  opacity:.5;}
.garage-door__texture::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,20,15,0) 72%,rgba(22,20,15,.16) 100%);}
.garage-door__handle{position:absolute;left:50%;bottom:9%;width:64px;height:6px;border-radius:3px;
  background:var(--silver);transform:translateX(-50%);}
.garage-door__face{position:relative;z-index:1;text-align:center;padding-inline:1.5rem;}
.garage-door__eyebrow{display:block;font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);margin-bottom:1.1rem;}
.garage-door__title{font-family:var(--font-display);font-weight:400;color:var(--ink);
  font-size:clamp(2.6rem, 3vw + 3rem, 6.4rem);line-height:1;letter-spacing:-.01em;}
.garage-door__title em{font-style:italic;color:var(--signal);font-weight:400;}
.garage-door__tagline{margin-top:1rem;font-size:var(--fs-lg);color:var(--ink-70);}

@media (prefers-reduced-motion: reduce){
  .garage-door{transform:none !important;transition:opacity .4s ease;
    opacity:calc(1 - var(--door-progress, 0));}
}

/* ---------- dark section variant (garage interior) ---------- */
.section--noir{
  --ink-70: rgba(245,242,234,.74);
  --ink-45: rgba(245,242,234,.5);
  --ink-16: rgba(245,242,234,.14);
  background:var(--ink);
  color:var(--off-white);
}

/* ---------- about ---------- */
.about__grid{display:grid;grid-template-columns:.5fr 1.5fr;gap:clamp(2rem,4vw,5rem);}
.about__q{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.15;max-width:15ch;
  margin-bottom:1rem;}
.about__body p{font-size:var(--fs-lg);color:var(--ink-70);max-width:56ch;margin-bottom:1.4rem;}
.about__body p:last-child{margin-bottom:0;}
.about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;
  padding-top:2rem;border-top:1px solid var(--ink-16);}
.about__stat b{display:block;font-family:var(--font-display);font-size:2rem;}
.about__stat span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-45);letter-spacing:.04em;}

/* ---------- services ---------- */
.services__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;
  gap:2rem;flex-wrap:wrap;}
.services__title{font-family:var(--font-display);font-size:var(--fs-h1);max-width:14ch;line-height:1.02;}
.service{border-top:1px solid var(--ink-16);}
.service:last-child{border-bottom:1px solid var(--ink-16);}
.service__row{display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:1.5rem;
  padding:1.6rem 0;cursor:pointer;}
.service__num{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-45);}
.service__name{font-family:var(--font-display);font-size:clamp(1.4rem,1.6vw,2.1rem);transition:color var(--dur) var(--ease);}
.service__row:hover .service__name{color:var(--signal);}
.service__plus{font-family:var(--font-mono);font-size:1.1rem;color:var(--ink-45);transition:transform var(--dur) var(--ease);}
.service[data-open="true"] .service__plus{transform:rotate(45deg);}
.service__panel{overflow:hidden;max-height:0;transition:max-height var(--dur) var(--ease);}
.service[data-open="true"] .service__panel{max-height:12rem;}
.service__panel p{padding:0 0 1.8rem 6.5rem;max-width:52ch;color:var(--ink-70);}

/* ---------- process ---------- */
.process__title{font-family:var(--font-display);font-size:var(--fs-h1);margin-bottom:3rem;max-width:16ch;}
.process__track{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative;}
.process__track::before{content:'';position:absolute;top:2rem;left:0;right:0;height:1px;background:var(--ink-16);}
.stop{position:relative;padding-top:.2rem;}
.stop__num{font-family:var(--font-mono);font-size:.85rem;color:var(--signal);background:var(--off-white);
  display:inline-block;padding-right:.6rem;position:relative;z-index:1;}
.stop__title{font-family:var(--font-display);font-size:1.5rem;margin-top:1.1rem;}
.stop__body{color:var(--ink-70);font-size:.94rem;margin-top:.6rem;max-width:26ch;}

/* ---------- metrics ---------- */
.metrics{background:var(--paper);}
.metrics__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.metric{text-align:left;}
.metric b{display:block;font-family:var(--font-display);font-size:clamp(2.4rem,3.2vw,4rem);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.metric span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-45);letter-spacing:.04em;
  text-transform:uppercase;display:block;margin-top:.4rem;}

/* ---------- philosophy (the one bold risk) ---------- */
.philosophy{background:var(--ink);color:var(--off-white);text-align:center;border-top:none;}
.philosophy__title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,6vw,6rem);
  line-height:1.04;}
.philosophy__title em{font-style:italic;color:#C98A6E;}
.philosophy__foot{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:rgba(245,242,234,.5);
  margin-top:2rem;text-transform:uppercase;}

/* ---------- contact ---------- */
.contact__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,6rem);}
.contact__title{font-family:var(--font-display);font-size:var(--fs-h1);line-height:1.03;max-width:12ch;}
.contact__lede{color:var(--ink-70);font-size:var(--fs-lg);margin-top:1.4rem;max-width:32ch;}
.contact__meta{margin-top:3rem;display:flex;flex-direction:column;gap:.4rem;font-family:var(--font-mono);
  font-size:.82rem;color:var(--ink-45);}
.field{border-bottom:1px solid var(--ink-16);padding-block:.9rem;position:relative;}
.field input{width:100%;background:transparent;border:0;font-size:1rem;padding:0;}
.field input:focus{outline:0;}
.field label{position:absolute;top:.9rem;left:0;font-size:1rem;color:var(--ink-45);pointer-events:none;
  transition:transform var(--dur) var(--ease),font-size var(--dur) var(--ease),color var(--dur) var(--ease);}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-1.15rem);
  font-size:.68rem;font-family:var(--font-mono);letter-spacing:.06em;color:var(--ink-70);}
.field::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--ink);
  transition:width var(--dur) var(--ease);}
.field:focus-within::after{width:100%;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;}
form .btn{margin-top:2.2rem;width:100%;justify-content:center;}
.form-status{margin-top:1.2rem;padding:1.2rem 0;}
.form-status__eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--signal);}
.form-status__body{margin-top:.4rem;color:var(--ink-70);}
.form-status--error .form-status__eyebrow{color:#8A3A22;}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--ink-16);padding-block:3rem;}
.footer__row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem;}
.footer__mark{font-family:var(--font-display);font-size:1.6rem;}
.footer__cols{display:flex;gap:4rem;flex-wrap:wrap;}
.footer__col b{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--ink-45);text-transform:uppercase;margin-bottom:.7rem;}
.footer__col a,.footer__col span{display:block;font-size:.88rem;color:var(--ink-70);padding-block:.15rem;}
.footer__sub{display:flex;border-bottom:1px solid var(--ink-16);gap:1rem;margin-top:.5rem;padding-bottom:.5rem;}
.footer__sub input{flex:1;background:transparent;border:0;font-size:.88rem;}
.footer__sub input:focus{outline:0;}
.footer__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--ink-16);display:flex;
  justify-content:space-between;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-45);
  flex-wrap:wrap;gap:.5rem;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
  .about__grid{grid-template-columns:1fr;}
  .about__stats{grid-template-columns:1fr 1fr;}
  .services__title{font-size:var(--fs-h2);}
  .service__row{grid-template-columns:3.2rem 1fr auto;}
  .service__panel p{padding-left:3.2rem;}
  .process__track{grid-template-columns:1fr 1fr;row-gap:2.5rem;}
  .process__track::before{display:none;}
  .metrics__grid{grid-template-columns:1fr 1fr;row-gap:2.2rem;}
  .contact__grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .footer__row{flex-direction:column;align-items:flex-start;}
}
@media (max-width:520px){
  .about__stats{grid-template-columns:1fr;}
  .metrics__grid{grid-template-columns:1fr;}
  .telemetry__row{gap:1.4rem;}
  .garage-door__texture{background:repeating-linear-gradient(180deg,
    transparent 0 44px, var(--warm-gray) 44px 45px, transparent 45px 89px);}
}

.garage-hero__message > .nav__cta{
  display:inline-block;
  margin-top:30px !important;
}