/* ASD Land Development Services  |  asdland.com
   Tokens from docs/plan/02-design-system.md. Do not hand-edit colours;
   change the token. */

/* ══════════════════════════════════════════════════════════════════
   ASD Land Development Services  ·  homepage concept
   Tokens are taken verbatim from docs/plan/02-design-system.md.
   Single visual world by intent: this is a brand mockup, so it paints
   every colour explicitly and renders identically on any host theme.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* brand orange */
  --o-200:#FFC79B; --o-300:#FFA765; --o-400:#FF8A33;
  --o-500:#F2710F; --o-600:#D65E08; --o-700:#B04B09; --o-900:#5E290C;

  /* warm ink ramp */
  --ink-950:#0B0A09; --ink-900:#131110; --ink-850:#191715; --ink-800:#201D1A;
  --ink-700:#2C2926; --ink-600:#423D38; --ink-500:#5C554E; --ink-400:#7E766D;
  --ink-300:#A79E94; --ink-200:#CBC3B9; --ink-150:#DED7CD; --ink-100:#EBE5DC;
  --ink-50:#F6F2EB;  --white:#FFFFFF;

  --silver-300:#B9BDC2; --silver-500:#8A9097;

  /* material swatches — never UI colour */
  --mat-fill-dirt:#7A6248; --mat-clay:#9C5B32; --mat-limerock:#CFC7B4;
  --mat-millings:#38352F;  --mat-stone:#A29C91; --mat-topsoil:#4A3B2C;

  --ff-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif;

  --fs-mega:clamp(2.6rem, 7.2vw, 5.5rem);
  --fs-h1:clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-h2:clamp(1.6rem, 3vw, 2.35rem);
  --fs-h3:clamp(1.12rem, 1.7vw, 1.35rem);
  --fs-lead:clamp(1.06rem, 1.5vw, 1.28rem);
  --fs-body:1.0625rem;
  --fs-sm:0.9375rem;
  --fs-xs:0.78rem;

  /* Full displayport width throughout. Line length is held by a measure in ch
     on the text blocks themselves, never by a page container. */
  --w-content:100%; --w-narrow:100%;
  --gutter:clamp(1.1rem, 3.4vw, 4.5rem);
  --section-y:clamp(3.5rem, 7vw, 6.75rem);
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-50); color:var(--ink-800);
  font-family:var(--ff-body); font-size:var(--fs-body); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
h1,h2,h3,h4{font-family:var(--ff-display); margin:0; text-wrap:balance; line-height:1.06; letter-spacing:-0.018em}
p{margin:0}
a{color:inherit}

.wrap{width:100%; max-width:var(--w-content); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--w-narrow)}
.section{padding-block:var(--section-y)}
.dark{background:var(--ink-950); color:var(--ink-150)}
.light{background:var(--ink-50); color:var(--ink-800)}
.stack{display:flex; flex-direction:column}

/* eyebrow — encodes section role, not decoration */
.eyebrow{
  font-family:var(--ff-display); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--o-500); flex:none}
.dark .eyebrow{color:var(--o-400)}
.light .eyebrow{color:var(--o-700)}

/* ── buttons ───────────────────────────────────────────────
   Law from the design system: orange fill takes a NEAR-BLACK
   label. White on orange is 2.94:1 and fails.                */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--ff-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.02em; text-decoration:none; cursor:pointer;
  padding:.86rem 1.35rem; border-radius:var(--r); border:1.5px solid transparent;
  min-height:48px; transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary{background:var(--o-500); color:var(--ink-950); border-color:var(--o-500)}
.btn--primary:hover{background:var(--o-400); border-color:var(--o-400)}
.btn--ghost-d{background:transparent; color:var(--ink-100); border-color:var(--ink-500)}
.btn--ghost-d:hover{border-color:var(--ink-300); background:rgba(255,255,255,.05)}
.btn--ghost-l{background:transparent; color:var(--ink-800); border-color:var(--ink-200)}
.btn--ghost-l:hover{border-color:var(--ink-400); background:rgba(0,0,0,.03)}
.btn--sm{padding:.6rem 1rem; min-height:42px; font-size:var(--fs-xs)}
:focus-visible{outline:3px solid var(--o-400); outline-offset:2px}

/* ── header ────────────────────────────────────────────── */
.hdr{position:sticky; top:0; z-index:50; background:var(--ink-950); border-bottom:1px solid var(--ink-800)}
.hdr__in{display:flex; align-items:center; gap:1.5rem; min-height:70px}
.logo{display:flex; align-items:center; gap:.65rem; text-decoration:none; flex:none}
.logo__badge{
  width:44px; height:44px; border-radius:50%; background:var(--ink-950);
  border:1.5px solid var(--ink-700); display:grid; place-items:center; position:relative; overflow:hidden;
}
.logo__badge span{
  font-family:var(--ff-display); font-weight:900; font-size:.98rem; letter-spacing:-.03em;
  color:var(--silver-300); position:relative; z-index:2;
}
.logo__badge::after{
  content:""; position:absolute; z-index:1; width:150%; height:6px; background:var(--o-500);
  transform:rotate(-38deg); opacity:.95;
}
.logo__wm{display:flex; flex-direction:column; line-height:1}
.logo__wm b{font-family:var(--ff-display); font-weight:800; font-size:1.02rem; color:var(--ink-50); letter-spacing:.01em}
.logo__wm i{font-style:normal; font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--o-400); margin-top:.24rem}
.nav{display:none; gap:1.45rem; margin-left:auto; align-items:center}
.nav a{
  font-family:var(--ff-display); font-weight:600; font-size:.86rem; letter-spacing:.03em;
  color:var(--ink-200); text-decoration:none; padding:.4rem 0; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--white); border-bottom-color:var(--o-500)}
.hdr .btn{margin-left:auto}
@media (min-width:1000px){ .nav{display:flex} .hdr .btn{margin-left:0} }

/* ── hero ──────────────────────────────────────────────── */
.hero{position:relative; background:var(--ink-950); overflow:hidden}
.hero__img{position:absolute; inset:0}
.hero__img img{width:100%; height:100%; object-fit:cover; object-position:52% 28%}
/* named scrim, per the design system: a gradient, never a filter */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(94deg, rgba(11,10,9,.94) 0%, rgba(11,10,9,.86) 34%, rgba(11,10,9,.45) 62%, rgba(11,10,9,.30) 100%),
    linear-gradient(0deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,0) 42%);
}
.hero__in{position:relative; z-index:2; padding-block:clamp(3.5rem,9vw,7.5rem)}
.hero__body{max-width:38ch}
.hero h1{
  font-size:var(--fs-mega); font-weight:800; color:var(--white);
  letter-spacing:-.032em; line-height:.98;
}
.hero h1 em{font-style:normal; color:var(--o-400); display:block}
.hero__sub{color:var(--ink-200); font-size:var(--fs-lead); margin-top:1.4rem; max-width:46ch}
.hero__sub strong{color:var(--white); font-weight:600}
.hero__cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem}

/* ── trust strip ───────────────────────────────────────── */
.trust{background:var(--ink-900); border-block:1px solid var(--ink-800)}
.trust ul{
  list-style:none; margin:0; padding:1.15rem 0; display:flex; flex-wrap:wrap;
  gap:.65rem 2rem; align-items:center;
}
.trust li{
  display:flex; align-items:center; gap:.6rem; font-size:var(--fs-sm);
  color:var(--ink-150); font-weight:600;
}
.trust li::before{content:""; width:7px; height:7px; background:var(--o-500); flex:none; transform:rotate(45deg)}
.trust li.slot{color:var(--ink-500); font-weight:400; font-style:italic}
.trust li.slot::before{background:var(--ink-600)}

/* ── promise line ──────────────────────────────────────── */
.promise{background:var(--ink-50); border-bottom:1px solid var(--ink-150)}
.promise p{
  font-family:var(--ff-display); font-weight:500; font-size:clamp(1.1rem,2.1vw,1.5rem);
  line-height:1.4; padding-block:clamp(1.8rem,3.5vw,2.75rem); color:var(--ink-800);
  letter-spacing:-.012em; max-width:60ch;
}
.promise b{font-weight:800}

/* ── section head ──────────────────────────────────────── */
.shead{max-width:62ch; margin-bottom:2.6rem}
.shead h2{font-size:var(--fs-h2); font-weight:800}
.dark .shead h2{color:var(--white)}
.shead p{margin-top:.9rem; font-size:var(--fs-lead)}
.dark .shead p{color:var(--ink-300)}
.light .shead p{color:var(--ink-600)}

/* ── the cleat: the frame device that carries the polish ── */
.fig{
  position:relative; overflow:hidden; background:var(--ink-800);
  border:1px solid rgba(255,255,255,.09); border-radius:var(--r);
}
.light .fig{border-color:var(--ink-150)}
.fig::before{
  content:""; position:absolute; top:0; left:0; width:52px; height:3px;
  background:var(--o-500); z-index:3;
}
.fig img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
/* shared grain layer over every photograph */
.fig::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── services grid ─────────────────────────────────────── */
/* auto-fill so a wide display gains columns instead of stretching cards */
.svcs{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,325px),1fr))}
.svc{
  background:var(--ink-900); border:1px solid var(--ink-800); border-radius:var(--r);
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:border-color .18s ease, transform .18s ease;
}
.svc:hover{border-color:var(--o-600); transform:translateY(-2px)}
.svc .fig img{aspect-ratio:16/10}
.svc__b{padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.svc h3{font-size:var(--fs-h3); font-weight:700; color:var(--white)}
.svc p{font-size:var(--fs-sm); color:var(--ink-300); line-height:1.55}
.svc__go{
  margin-top:auto; padding-top:.55rem; font-family:var(--ff-display); font-weight:700;
  font-size:var(--fs-xs); letter-spacing:.09em; text-transform:uppercase; color:var(--o-400);
  display:flex; align-items:center; gap:.4rem;
}
.svc:hover .svc__go{color:var(--o-300)}
.svc--new{border-color:var(--o-700)}
.tag{
  position:absolute; top:0; right:0; z-index:3; background:var(--o-500); color:var(--ink-950);
  font-family:var(--ff-display); font-weight:800; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.32rem .55rem;
}
/* graphic tile, for a service with no usable photograph */
.gtile{
  aspect-ratio:16/10; background:var(--ink-850); position:relative; overflow:hidden;
  display:grid; place-items:center; border-bottom:1px solid var(--ink-800);
}
.gtile svg{width:78%; height:auto}
/* stat variant, for a service whose numbers beat any photograph */
.gtile--stat{padding:1.3rem 1.35rem; place-items:start end; text-align:left}
.gtile--stat b{
  display:block; font-family:var(--ff-display); font-weight:800; font-size:clamp(1.9rem,4vw,2.5rem);
  color:var(--o-500); font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.03em;
}
.gtile--stat span{display:block; margin-top:.45rem; font-size:var(--fs-xs); color:var(--ink-300); line-height:1.45; max-width:30ch}
.gtile--stat em{display:block; margin-top:.6rem; font-style:normal; font-size:.72rem; color:var(--ink-500); line-height:1.45; max-width:36ch}
/* the eighth cell: a CTA, never filler */
.svc--cta{
  background:var(--ink-850); border-color:var(--ink-700); display:grid; place-items:center;
  padding:1.6rem 1.35rem; text-align:left;
}
.svc--cta h3{margin-bottom:.6rem}
.svc--cta p{font-size:var(--fs-sm); color:var(--ink-300); line-height:1.55; margin-bottom:1.1rem}
.svc--cta .eyebrow{margin-bottom:.8rem; color:var(--o-400)}

/* ── materials band ────────────────────────────────────── */
.mats{background:var(--ink-950); position:relative; overflow:hidden}
.mats::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(120% 78% at 8% 0%, rgba(242,113,15,.16), transparent 62%);
}
.mats > *{position:relative; z-index:1}
.mgrid{display:grid; gap:2.6rem; align-items:start}
@media (min-width:940px){ .mgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:3.4rem} }
.swatches{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem}
.sw{
  aspect-ratio:1; border-radius:var(--r); position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:.6rem; border:1px solid rgba(255,255,255,.1);
}
.sw span{
  font-family:var(--ff-display); font-weight:800; font-size:.64rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--white); text-shadow:0 1px 4px rgba(0,0,0,.85);
  position:relative; z-index:2; line-height:1.2;
}
.sw::after{ /* procedural aggregate texture */
  content:""; position:absolute; inset:0; opacity:.34; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23g)'/%3E%3C/svg%3E");
}
.ptable{width:100%; border-collapse:collapse; font-size:var(--fs-sm); margin-top:1.4rem}
.ptable caption{
  text-align:left; font-family:var(--ff-display); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--o-400); padding-bottom:.7rem;
}
.ptable th,.ptable td{padding:.62rem .5rem; border-bottom:1px solid var(--ink-800); text-align:left}
.ptable thead th{
  font-family:var(--ff-display); font-weight:700; font-size:var(--fs-xs); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-400); border-bottom-color:var(--ink-700);
}
.ptable td:first-child{color:var(--ink-100); font-weight:600}
.ptable td.num{text-align:right; font-variant-numeric:tabular-nums; color:var(--o-300); font-weight:700}
.ptable tbody tr:hover td{background:rgba(255,255,255,.03)}
.terms{
  margin-top:1.1rem; padding:.9rem 1rem; background:var(--ink-900);
  border-left:3px solid var(--o-600); border-radius:var(--r);
  font-size:var(--fs-sm); color:var(--ink-200);
}

/* ── stat tiles: a number where there is no photo ──────── */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ink-800); border:1px solid var(--ink-800); border-radius:var(--r); overflow:hidden}
@media (min-width:720px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--ink-950); padding:1.5rem 1.15rem}
.stat b{
  display:block; font-family:var(--ff-display); font-weight:800; font-size:clamp(2rem,4vw,2.9rem);
  color:var(--o-500); font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.03em;
}
.stat span{display:block; margin-top:.55rem; font-size:var(--fs-xs); color:var(--ink-400); letter-spacing:.05em; text-transform:uppercase; font-weight:600; line-height:1.4}

/* ── owner block ───────────────────────────────────────── */
.owner{display:grid; gap:2.4rem; align-items:center}
@media (min-width:860px){ .owner{grid-template-columns:0.78fr 1fr; gap:3.4rem} }
.owner .fig img{aspect-ratio:4/5}
.owner blockquote{margin:0; font-size:var(--fs-lead); line-height:1.66; color:var(--ink-700)}
.owner blockquote p + p{margin-top:1rem}
.sig{
  margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--ink-150);
  font-family:var(--ff-display); font-weight:800; font-size:1.05rem; color:var(--ink-900);
}
.sig small{display:block; font-family:var(--ff-body); font-weight:400; font-size:var(--fs-sm); color:var(--ink-500); letter-spacing:0; margin-top:.2rem}

/* ── before / after slider ─────────────────────────────── */
.ba{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--ink-700); background:var(--ink-900)}
.ba__pane{position:relative; aspect-ratio:16/7}
.ba__pane img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba__top{clip-path:inset(0 0 0 var(--split,50%))}
.ba__lab{
  position:absolute; bottom:.85rem; z-index:4; font-family:var(--ff-display); font-weight:800;
  font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase;
  background:rgba(11,10,9,.8); color:var(--ink-100); padding:.34rem .62rem; border-radius:var(--r);
}
.ba__lab--a{left:.85rem} .ba__lab--b{right:.85rem}
.ba__demo--unused{
  position:absolute; top:.85rem; left:.85rem; z-index:4;
  font-family:var(--ff-display); font-weight:800; font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--o-300); padding:.3rem .55rem; border-radius:var(--r);
  border:1px dashed var(--o-600); background:rgba(11,10,9,.78);
}
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--split,50%); width:3px; background:var(--o-500);
  z-index:5; transform:translateX(-50%); pointer-events:none;
}
.ba__handle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--o-500); border:3px solid var(--ink-950);
}
.ba input[type=range]{
  position:absolute; inset:0; width:100%; height:100%; z-index:6; opacity:0; cursor:ew-resize; margin:0;
}
.ba input:focus-visible + .ba__handle{outline:3px solid var(--o-300); outline-offset:3px}
.ba__cap{padding:.9rem 1rem; font-size:var(--fs-sm); color:var(--ink-300); border-top:1px solid var(--ink-800)}
.ba__cap b{color:var(--ink-100)}

/* ── gallery ───────────────────────────────────────────── */
.filters{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.6rem}
.filters button{
  font-family:var(--ff-display); font-weight:700; font-size:var(--fs-xs); letter-spacing:.07em;
  text-transform:uppercase; padding:.55rem .95rem; border-radius:var(--r); cursor:pointer;
  background:transparent; border:1.5px solid var(--ink-700); color:var(--ink-300); min-height:42px;
  transition:.14s;
}
.filters button:hover{border-color:var(--ink-500); color:var(--ink-100)}
.filters button[aria-pressed="true"]{background:var(--o-500); border-color:var(--o-500); color:var(--ink-950)}
.gal{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.gcard{position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--ink-800); background:var(--ink-900)}
.gcard.is-hidden{display:none}
.gcard img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.gcard::before{content:""; position:absolute; top:0; left:0; width:44px; height:3px; background:var(--o-500); z-index:3}
.gcard figcaption{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:1.9rem .8rem .7rem;
  background:linear-gradient(0deg, rgba(11,10,9,.93) 12%, rgba(11,10,9,0) 100%);
  font-size:var(--fs-xs); color:var(--ink-150); line-height:1.4;
}
.gcard figcaption b{display:block; font-family:var(--ff-display); font-weight:800; letter-spacing:.09em; text-transform:uppercase; font-size:.62rem; color:var(--o-400); margin-bottom:.2rem}
.galcount{font-size:var(--fs-sm); color:var(--ink-400); margin-top:1.4rem}

/* ── process: a real sequence, so numbers are earned ───── */
.steps{display:grid; gap:1px; background:var(--ink-150); border:1px solid var(--ink-150); border-radius:var(--r); overflow:hidden}
@media (min-width:800px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{background:var(--ink-50); padding:1.6rem 1.35rem}
.step b{
  display:block; font-family:var(--ff-display); font-weight:800; font-size:.82rem; color:var(--o-700);
  letter-spacing:.1em; margin-bottom:.75rem; font-variant-numeric:tabular-nums;
}
.step h3{font-size:1.02rem; font-weight:700; margin-bottom:.45rem; color:var(--ink-900)}
.step p{font-size:var(--fs-sm); color:var(--ink-600); line-height:1.55}

/* ── service area ──────────────────────────────────────── */
.area{display:grid; gap:2.4rem; align-items:center}
@media (min-width:900px){ .area{grid-template-columns:1.15fr .85fr; gap:3rem} }
.areamap{width:100%; height:auto; border:1px solid var(--ink-800); border-radius:var(--r); background:var(--ink-900)}
.towns{display:flex; flex-direction:column; gap:1.25rem; margin-top:1.6rem}
.towns div b{
  display:block; font-family:var(--ff-display); font-weight:800; font-size:var(--fs-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--o-400); margin-bottom:.35rem;
}
.towns div p{font-size:var(--fs-sm); color:var(--ink-200); line-height:1.6}

/* ── reviews: the honest empty state ───────────────────── */
.revask{
  border:1px solid var(--ink-150); border-left:3px solid var(--o-600); border-radius:var(--r);
  padding:1.7rem 1.6rem; background:var(--white); display:grid; gap:1.1rem;
}
@media (min-width:760px){ .revask{grid-template-columns:1fr auto; align-items:center; gap:2rem} }
.revask h3{font-size:var(--fs-h3); font-weight:800; margin-bottom:.5rem; color:var(--ink-900)}
.revask p{font-size:var(--fs-sm); color:var(--ink-600)}

/* ── quote form ────────────────────────────────────────── */
.formwrap{display:grid; gap:2.4rem}
@media (min-width:900px){ .formwrap{grid-template-columns:.85fr 1.15fr; gap:3.2rem} }
.qform{display:grid; gap:1rem}
.row2{display:grid; gap:1rem}
@media (min-width:560px){ .row2{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; gap:.4rem}
.field label{
  font-family:var(--ff-display); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-300);
}
.field label .req{color:var(--o-400)}
.field input,.field textarea,.field select{
  font-family:var(--ff-body); font-size:var(--fs-body); color:var(--white);
  background:var(--ink-900); border:1.5px solid var(--ink-700); border-radius:var(--r);
  padding:.72rem .85rem; min-height:48px; width:100%;
}
.field textarea{min-height:110px; resize:vertical; line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-500)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--o-500); outline:none}
.field .help{font-size:var(--fs-xs); color:var(--ink-500); line-height:1.5}
.picks{display:flex; flex-wrap:wrap; gap:.45rem}
.pick input{position:absolute; opacity:0; width:0; height:0}
.pick span{
  display:inline-block; padding:.5rem .8rem; border:1.5px solid var(--ink-700); border-radius:var(--r);
  font-size:var(--fs-sm); color:var(--ink-200); cursor:pointer; user-select:none; transition:.14s;
}
.pick input:checked + span{background:var(--o-500); border-color:var(--o-500); color:var(--ink-950); font-weight:700}
.pick input:focus-visible + span{outline:3px solid var(--o-300); outline-offset:2px}
.afterhours{
  margin-top:.4rem; font-size:var(--fs-sm); color:var(--ink-300);
  border-left:3px solid var(--ink-600); padding-left:.9rem; line-height:1.6;
}

/* ── footer ────────────────────────────────────────────── */
.foot{background:var(--ink-950); border-top:1px solid var(--ink-800); padding-block:3rem 2rem; color:var(--ink-400); font-size:var(--fs-sm)}
.foot__grid{display:grid; gap:2rem; margin-bottom:2.4rem}
@media (min-width:760px){ .foot__grid{grid-template-columns:1.4fr 1fr 1fr} }
.foot h4{font-family:var(--ff-display); font-weight:800; font-size:var(--fs-xs); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-200); margin-bottom:.9rem}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem}
.foot a{color:var(--ink-400); text-decoration:none}
.foot a:hover{color:var(--o-400)}
.foot__strap{font-family:var(--ff-display); font-weight:700; color:var(--ink-200); font-size:1rem; line-height:1.4; max-width:34ch; margin-bottom:1rem}
.foot__bot{border-top:1px solid var(--ink-800); padding-top:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; font-size:var(--fs-xs); color:var(--ink-500)}

/* ── mobile sticky call bar ────────────────────────────── */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--ink-800); border-top:1px solid var(--ink-700);
}
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:56px;
  font-family:var(--ff-display); font-weight:800; font-size:.9rem; text-decoration:none;
  letter-spacing:.03em;
}
.callbar a:first-child{background:var(--o-500); color:var(--ink-950)}
.callbar a:last-child{background:var(--ink-900); color:var(--ink-100)}
@media (min-width:1000px){ .callbar{display:none} }
body{padding-bottom:56px}
@media (min-width:1000px){ body{padding-bottom:0} }

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