/* ============================================================
   Same Bird Services — "shop drawing" design system
   Palette: blueprint navy / warm ink / kraft paper / carpenter gold
   Type:    Zilla Slab (display) · Archivo (body) · IBM Plex Mono (annotations)
   ============================================================ */

/* ---- Fonts (self-hosted, no CDN) ---- */
@font-face{font-family:"Zilla Slab";src:url("/assets/fonts/zilla-slab-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Zilla Slab";src:url("/assets/fonts/zilla-slab-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plex-mono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

/* ---- Tokens ---- */
:root{
  --blueprint:#1B2A38;
  --blueprint-2:#152230;
  --ink:#15120C;
  --kraft:#E7DAC0;
  --kraft-card:#F1E9D6;
  --gold:#E0A32B;
  --gold-deep:#C6851A;
  --steel:#6E7580;

  --on-dark:#EFE7D5;
  --on-dark-mut:#A6B2BB;
  --on-light:#241E14;
  --on-light-mut:#5C5344;

  --line-dark:rgba(180,200,214,.16);   /* grid on blueprint */
  --line-light:rgba(37,30,20,.18);      /* rules on kraft */

  --ff-display:"Zilla Slab",Georgia,serif;
  --ff-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1140px;
  --pad:clamp(1.1rem,4vw,2.2rem);
  --r:3px;
  --shadow:0 1px 0 var(--line-light),0 14px 34px -22px rgba(21,18,12,.55);
}

/* ---- Reset-ish ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.65;
  color:var(--on-light);
  background:var(--kraft);
  /* faint kraft fiber */
  background-image:
    radial-gradient(rgba(37,30,20,.035) 1px,transparent 1px),
    radial-gradient(rgba(37,30,20,.025) 1px,transparent 1px);
  background-size:22px 22px,22px 22px;
  background-position:0 0,11px 11px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--ff-display);font-weight:700;line-height:1.02;margin:0;letter-spacing:.005em;}
p{margin:0 0 1rem;}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:2px;}

.wrap{width:min(100% - 2*var(--pad),var(--wrap));margin-inline:auto;}

.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);
  padding:.6rem 1rem;font-family:var(--ff-mono);font-size:.8rem;z-index:100;}
.skip-link:focus{left:.5rem;top:.5rem;}

/* ---- Eyebrows / labels ---- */
.eyebrow{font-family:var(--ff-mono);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 .9rem;}
.eyebrow-light{color:var(--gold);}

/* ---- Buttons ---- */
.btn{
  --bh:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.5ch;
  font-family:var(--ff-mono);font-weight:600;font-size:.9rem;letter-spacing:.03em;
  text-decoration:none;cursor:pointer;border:2px solid transparent;border-radius:var(--r);
  padding:.85rem 1.4rem;line-height:1;transition:transform .12s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-sm{padding:.6rem 1rem;font-size:.82rem;}
.btn-lg{padding:1.05rem 1.8rem;font-size:1rem;}
.btn-solid{background:var(--gold);color:var(--ink);box-shadow:0 10px 22px -12px rgba(198,133,26,.9);}
.btn-solid:hover{background:var(--gold-deep);transform:translateY(-2px);}
.btn-outline-light{background:transparent;color:var(--on-dark);border-color:rgba(239,231,213,.4);}
.btn-outline-light:hover{border-color:var(--gold);color:var(--gold);}
.btn-outline{background:transparent;color:var(--on-light);border-color:var(--line-light);}
.btn-outline:hover{border-color:var(--ink);}
.btn-ink{background:var(--ink);color:var(--on-dark);}
.btn-ink:hover{background:#000;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(21,34,48,.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line-dark);
  color:var(--on-dark);
}
.header-inner{display:flex;align-items:center;gap:1.2rem;padding:.7rem 0;}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--on-dark);}
.brand-logo{height:40px;width:auto;display:block;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:.98;}
.brand-name{font-family:var(--ff-display);font-weight:700;font-size:1.18rem;letter-spacing:.01em;}
.brand-sub{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--on-dark-mut);}
.header-nav{display:flex;gap:1.4rem;margin-left:auto;font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.02em;}
.header-nav a{text-decoration:none;color:var(--on-dark-mut);padding:.2rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.header-nav a:hover{color:var(--on-dark);border-color:var(--gold);}
.header-cta{display:flex;align-items:center;gap:1rem;}
.phone-link{display:flex;flex-direction:column;text-decoration:none;color:var(--on-dark);line-height:1.05;text-align:right;}
.phone-label{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mut);}
.phone-number{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;color:var(--gold);}

/* ============================================================
   BLUEPRINT GRID (hero / why / footer)
   ============================================================ */
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:32px 32px,32px 32px;
  mask-image:radial-gradient(120% 90% at 70% 10%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 40%,transparent 100%);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--blueprint);color:var(--on-dark);overflow:hidden;
  border-bottom:3px solid var(--gold);}
.hero-inner{position:relative;display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem);}
.hero-title{font-size:clamp(2.9rem,4.4vw + 1.6rem,5.6rem);line-height:.9;margin:.2rem 0 1.3rem;}
.hero-title span{display:block;}
.hero-title .accent{color:var(--gold);}
.hero-lede{font-size:clamp(1.08rem,.5vw + 1rem,1.28rem);max-width:34ch;color:var(--on-dark);
  margin-bottom:1.8rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2rem;}
.trust-row{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem .5rem;margin:0;padding:0;}
.trust-row li{font-family:var(--ff-mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-dark);border:1px solid var(--line-dark);
  padding:.4rem .7rem;border-radius:var(--r);background:rgba(255,255,255,.02);}

/* Title block (signature) */
.title-block{position:relative;background:var(--blueprint-2);border:1.5px solid rgba(180,200,214,.32);
  border-radius:var(--r);box-shadow:0 24px 50px -28px rgba(0,0,0,.7);}
.tb-head{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem;border-bottom:1.5px solid rgba(180,200,214,.24);}
.tb-bird{width:36px;height:auto;flex:none;}
.tb-title{font-family:var(--ff-display);font-weight:700;font-size:1.12rem;margin:0;line-height:1;}
.tb-scale{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-mut);margin:.25rem 0 0;}
.tb-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;}
.tb-grid > div{padding:.75rem 1.1rem;border-bottom:1px solid rgba(180,200,214,.16);}
.tb-grid > div:nth-child(odd){border-right:1px solid rgba(180,200,214,.16);}
.tb-grid dt{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mut);margin-bottom:.25rem;}
.tb-grid dd{margin:0;font-family:var(--ff-display);font-weight:600;font-size:1.02rem;color:var(--on-dark);}
.tb-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;text-decoration:none;color:var(--gold);
  font-family:var(--ff-mono);font-size:.82rem;font-weight:600;letter-spacing:.03em;}
.tb-foot:hover{background:rgba(224,163,43,.08);}

/* ============================================================
   SECTION shell
   ============================================================ */
.section{padding:clamp(3.2rem,7vw,5.5rem) 0;position:relative;}
.section-head{max-width:60ch;margin-bottom:clamp(1.8rem,4vw,2.8rem);}
.section-title{font-size:clamp(1.9rem,2.4vw + 1.2rem,3rem);margin:0 0 .7rem;}
.section-title.light{color:var(--on-dark);}
.section-lede{color:var(--on-light-mut);font-size:1.1rem;margin:0;max-width:52ch;}

/* ============================================================
   SERVICES — punch list
   ============================================================ */
.services{background:var(--kraft);}
.punch-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--r);overflow:hidden;}
.punch-item{display:flex;gap:1rem;padding:1.35rem 1.5rem;background:var(--kraft-card);align-items:flex-start;
  transition:background .15s ease;}
.punch-item:hover{background:#fff;}
.check{flex:none;width:26px;height:26px;margin-top:.15rem;border:2px solid var(--gold-deep);border-radius:4px;
  position:relative;background:transparent;}
.check::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;
  border:solid var(--gold-deep);border-width:0 2.5px 2.5px 0;transform:rotate(42deg);
  transition:opacity .2s ease;}
.punch-item:hover .check{background:var(--gold);}
.punch-item:hover .check::after{border-color:var(--ink);}
.punch-body h3{font-size:1.24rem;font-weight:600;margin:0 0 .3rem;}
.spec{font-family:var(--ff-mono);font-size:.82rem;line-height:1.5;color:var(--on-light-mut);margin:0;letter-spacing:.01em;}
.services-foot{margin:1.6rem 0 0;font-size:1.02rem;color:var(--on-light-mut);}
.services-foot a,.section-lede a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;font-weight:500;}

/* ============================================================
   WHY — blueprint band
   ============================================================ */
.why{position:relative;background:var(--blueprint);color:var(--on-dark);overflow:hidden;
  border-block:3px solid var(--gold);}
.why-grid{mask-image:radial-gradient(120% 100% at 20% 0%,#000 45%,transparent 100%);
  -webkit-mask-image:radial-gradient(120% 100% at 20% 0%,#000 45%,transparent 100%);}
.why-inner{position:relative;display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;}
.why-copy p{color:var(--on-dark);max-width:46ch;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden;}
.stat{background:var(--blueprint-2);padding:1.4rem 1.3rem;}
.stat dt{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mut);margin:0 0 .4rem;line-height:1.3;}
.stat dd{margin:0;font-family:var(--ff-display);font-weight:700;font-size:clamp(2.2rem,3vw,2.9rem);color:var(--gold);line-height:1;}

/* ============================================================
   WORK — plates
   ============================================================ */
.work{background:var(--kraft);}
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.plate{margin:0;}
.plate-img{aspect-ratio:4/5;border:1px solid var(--line-light);border-radius:var(--r);
  background:
    repeating-linear-gradient(45deg,rgba(37,30,20,.05) 0 10px,transparent 10px 20px),
    var(--kraft-card);
  display:grid;place-items:center;}
.plate-img span{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  border:1px dashed var(--steel);padding:.35rem .7rem;border-radius:2px;}
.plate figcaption{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.03em;color:var(--on-light-mut);margin-top:.6rem;text-transform:uppercase;}

/* ============================================================
   AREA
   ============================================================ */
.area{background:var(--kraft);border-top:1px solid var(--line-light);}
.area-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;}
.area-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--r);overflow:hidden;}
.area-list li{background:var(--kraft-card);padding:.85rem 1.1rem;font-family:var(--ff-mono);font-size:.86rem;letter-spacing:.02em;
  display:flex;align-items:center;gap:.6rem;}
.area-list li::before{content:"";width:6px;height:6px;background:var(--gold-deep);flex:none;border-radius:1px;transform:rotate(45deg);}

/* ============================================================
   ESTIMATE — job ticket
   ============================================================ */
.estimate{background:var(--blueprint);position:relative;}
.estimate::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:32px 32px;opacity:.5;pointer-events:none;
  mask-image:radial-gradient(100% 80% at 50% 0%,#000,transparent);
  -webkit-mask-image:radial-gradient(100% 80% at 50% 0%,#000,transparent);}
.ticket{position:relative;max-width:680px;margin-inline:auto;background:var(--kraft-card);
  border-radius:var(--r);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);overflow:hidden;
  border:1px solid rgba(37,30,20,.14);}
.ticket-head{padding:1.6rem clamp(1.3rem,4vw,2.2rem) 1.2rem;border-bottom:2px dashed var(--line-light);position:relative;}
.ticket-ref{font-family:var(--ff-mono);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 .5rem;}
.ticket-title{font-size:clamp(1.7rem,3vw,2.3rem);margin:0 0 .4rem;}
.ticket-note{font-family:var(--ff-mono);font-size:.8rem;color:var(--on-light-mut);margin:0;}
.ticket-form{padding:clamp(1.3rem,4vw,2.2rem);}
.field{margin-bottom:1.1rem;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.field label{display:block;font-family:var(--ff-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-light-mut);margin-bottom:.4rem;}
.req{color:var(--gold-deep);}
.opt{color:var(--steel);font-weight:400;text-transform:none;letter-spacing:.02em;}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--ff-body);font-size:1rem;color:var(--on-light);
  background:#fff;border:1.5px solid var(--line-light);border-radius:var(--r);
  padding:.8rem .9rem;transition:border-color .15s,box-shadow .15s;}
.field textarea{resize:vertical;min-height:96px;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(224,163,43,.22);}
.field input:user-invalid,.field select:user-invalid{border-color:#b1442e;}
.ticket-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.6rem;}
.ticket-alt{font-family:var(--ff-mono);font-size:.82rem;color:var(--on-light-mut);margin:0;}
.ticket-alt a{color:var(--gold-deep);font-weight:600;text-decoration:none;}
.form-status{margin:1.1rem 0 0;font-family:var(--ff-mono);font-size:.88rem;padding:.85rem 1rem;border-radius:var(--r);border:1px solid;}
.form-status.ok{color:#1f5130;background:rgba(46,120,70,.12);border-color:rgba(46,120,70,.4);}
.form-status.err{color:#8a2f1c;background:rgba(177,68,46,.1);border-color:rgba(177,68,46,.4);}

/* Honeypot: off-screen, not display:none */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{position:relative;background:var(--blueprint-2);color:var(--on-dark);
  border-top:3px solid var(--gold);overflow:hidden;}
.footer-grid{mask-image:radial-gradient(100% 100% at 80% 0%,#000 30%,transparent 90%);
  -webkit-mask-image:radial-gradient(100% 100% at 80% 0%,#000 30%,transparent 90%);}
.footer-inner{position:relative;padding:clamp(2.4rem,5vw,3.4rem) 0 2rem;}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;margin-bottom:1.8rem;}
.footer-logo{height:52px;width:auto;display:block;}
.footer-tag{font-family:var(--ff-mono);font-size:.76rem;color:var(--on-dark-mut);margin:0;letter-spacing:.02em;}
.why-yelp{margin-top:1.3rem;margin-bottom:0;}
.why-yelp a{font-family:var(--ff-mono);font-size:.85rem;font-weight:600;letter-spacing:.03em;color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(224,163,43,.4);padding-bottom:2px;}
.why-yelp a:hover{border-color:var(--gold);}
.footer-sheet a{color:var(--on-dark-mut);text-decoration:none;border-bottom:1px solid rgba(166,178,187,.35);}
.footer-sheet a:hover{color:var(--gold);}
.footer-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 0 1.8rem;
  background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden;}
.footer-facts > div{background:var(--blueprint-2);padding:1rem 1.1rem;}
.footer-facts dt{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mut);margin-bottom:.35rem;}
.footer-facts dd{margin:0;font-family:var(--ff-display);font-weight:600;font-size:1.02rem;}
.footer-facts a{color:var(--gold);text-decoration:none;}
.footer-fine{display:flex;flex-wrap:wrap;gap:.6rem 1rem;justify-content:space-between;
  font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.04em;color:var(--on-dark-mut);
  border-top:1px solid var(--line-dark);padding-top:1.2rem;margin:0;}
.footer-sheet{color:var(--steel);}
.footer-copy{font-family:var(--ff-mono);font-size:.72rem;color:var(--steel);margin:.8rem 0 0;}

/* ============================================================
   MOBILE STICKY BAR
   ============================================================ */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:.5rem;
  padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(21,34,48,.97);backdrop-filter:blur(6px);border-top:1px solid var(--line-dark);}
.mobile-bar .btn{flex:1;padding:.85rem .5rem;}

/* ============================================================
   REVEAL (progressive; only when JS present)
   ============================================================ */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
html.js .reveal.in{opacity:1;transform:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:2.2rem;}
  .title-block{max-width:420px;}
  .why-inner{grid-template-columns:1fr;}
  .area-inner{grid-template-columns:1fr;}
  .plates{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .header-nav{display:none;}
  .header-cta .btn{display:none;}
  .punch-list{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .footer-facts{grid-template-columns:1fr 1fr;}
  .mobile-bar{display:flex;}
  body{padding-bottom:4.4rem;}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr;}
  .footer-facts{grid-template-columns:1fr;}
}

/* ============================================================
   MOTION / PRINT PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js .reveal{opacity:1;transform:none;transition:none;}
  .btn,.punch-item,.check::after{transition:none;}
}