/* ==========================================================================
   AJB Group (Carpentry) Ltd — design system
   Palette extracted from the live logo (ajb-logo.png) and the van/banner
   livery: yellow #DBC336, near-black #292928, white wordmark.
   ========================================================================== */

:root{
  /* brand, taken from the logo */
  --yellow:#DBC336;
  --yellow-hi:#F0D64A;
  --yellow-deep:#8A7A1F;      /* accessible yellow-family text on white, 4.3:1 */
  --charcoal:#292928;          /* logo black */

  /* surfaces */
  --ink:#131312;
  --ink-2:#1C1C1A;
  --ink-3:#232321;
  --line-dark:#34342F;
  --paper:#FFFFFF;
  --paper-2:#F6F4EF;
  --paper-3:#EDEAE2;
  --line:#DEDACE;

  /* text */
  --text:#1A1A18;
  --text-2:#4A4A46;            /* 8.9:1 on white */
  --text-inv:#FFFFFF;
  --text-inv-2:#C9C7BE;

  /* accent from site PPE, used sparingly */
  --hivis:#F26722;

  --wrap:1200px;
  --wrap-narrow:760px;
  --r:4px;
  --r-lg:8px;
  --shadow:0 1px 2px rgba(19,19,18,.06),0 8px 24px rgba(19,19,18,.08);
  --shadow-lg:0 2px 4px rgba(19,19,18,.08),0 20px 48px rgba(19,19,18,.14);
  --ease:cubic-bezier(.22,.61,.36,1);

  --f-display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--f-body);color:var(--text);background:var(--paper);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.15rem,5.4vw,4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.01em}
h4{font-size:1.06rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--ink);padding:.8rem 1.2rem;z-index:200;font-weight:700}
.skip:focus{left:0}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
section{padding:clamp(3.2rem,7vw,6rem) 0}
.sec-dark{background:var(--ink);color:var(--text-inv)}
.sec-dark p{color:var(--text-inv-2)}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-tint{background:var(--paper-2)}
.grid{display:grid;gap:clamp(1.1rem,2.2vw,1.8rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.split{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.wide-left{grid-template-columns:1.15fr .85fr}}
/* grid items default to min-width:auto, so one wide child forces the whole
   track open and the page scrolls sideways on a phone. Let them shrink. */
.grid>*,.split>*,.cta-in>*{min-width:0}

/* ---------- eyebrow / rules ---------- */
.eyebrow{
  font-family:var(--f-display);font-weight:700;font-size:.775rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow-deep);margin:0 0 .85rem;display:flex;
  align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--yellow);flex:none}
.sec-dark .eyebrow{color:var(--yellow)}
.lede{font-size:clamp(1.06rem,1.7vw,1.24rem);color:var(--text-2);max-width:66ch}
.sec-dark .lede{color:var(--text-inv-2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.7rem;font-family:var(--f-display);font-weight:700;font-size:1rem;
  letter-spacing:.01em;border-radius:var(--r);text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn-primary:hover{background:var(--yellow-hi);border-color:var(--yellow-hi)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(26,26,24,.3)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(26,26,24,.05)}
.sec-dark .btn-ghost,.hero .btn-ghost,.phero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.sec-dark .btn-ghost:hover,.hero .btn-ghost:hover,.phero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-lg{padding:1.15rem 2.1rem;font-size:1.06rem}
.btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.hdr-in{display:flex;align-items:center;gap:1.4rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;padding:.5rem 0}
.brand img{height:34px;width:auto}
.brand-txt{font-family:var(--f-display);font-weight:800;font-size:1.16rem;color:#fff;letter-spacing:-.01em;line-height:1}
.brand-txt b{color:var(--yellow)}
.brand-txt small{display:block;font-size:.55rem;letter-spacing:.15em;color:var(--text-inv-2);font-weight:600;margin-top:3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav a{
  text-decoration:none;color:var(--text-inv-2);font-weight:600;font-size:.93rem;
  padding:.6rem .78rem;border-radius:var(--r);transition:color .16s,background .16s;
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:var(--yellow)}
.hdr-cta{display:flex;align-items:center;gap:.7rem;flex:none}
.hdr-tel{
  display:flex;align-items:center;gap:.5rem;text-decoration:none;color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;white-space:nowrap;
}
.hdr-tel svg{fill:var(--yellow);flex:none}
.hdr-tel:hover{color:var(--yellow)}
.burger{display:none;background:none;border:0;padding:.55rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){
  .burger{display:block;margin-left:auto;order:3}
  .hdr-cta{order:2;margin-left:auto}
  .nav{
    order:4;position:absolute;top:100%;left:0;right:0;background:var(--ink-2);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.25rem 1.5rem;
    border-bottom:3px solid var(--yellow);display:none;max-height:75vh;overflow:auto;
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem .25rem;border-bottom:1px solid var(--line-dark);border-radius:0}
}
@media(max-width:560px){
  .hdr-tel span{display:none}
  .brand-txt{font-size:1rem}
  .hdr-in{gap:.5rem}
  .brand{min-width:0}
  .brand-txt small{letter-spacing:.1em}
  .burger{padding:.55rem .2rem}
}
@media(max-width:400px){.brand img{height:28px}.brand-txt{font-size:.92rem}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(19,19,18,.9) 0%,rgba(19,19,18,.68) 42%,rgba(19,19,18,.93) 100%);
}
.hero-in{position:relative;padding:clamp(3.6rem,9vw,7.5rem) 0 clamp(3rem,7vw,6rem);max-width:56rem}
.hero h1{color:#fff;margin-bottom:.45em}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero-sub{font-size:clamp(1.08rem,1.9vw,1.3rem);color:#E6E4DA;max-width:56ch;margin-bottom:.4rem}
.hero-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.9rem;list-style:none;padding:0}
.hero-tags li{
  font-size:.83rem;font-weight:600;color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);padding:.42rem .8rem;border-radius:100px;
}
.hero-tags li b{color:var(--yellow);font-weight:700}
/* scroll-scrubbed hero video.
   The poster is always painted, so it is the LCP element and the hero never
   goes blank. The video sits on top at opacity 0 and only fades in once JS has
   confirmed it can render. Desktop and motion-safe only. */
.hero-media .hero-poster{position:absolute;inset:0}
.scrub{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease);
}
.scrub.ready{opacity:1}
@media(max-width:899px){.scrub{display:none}}
@media (prefers-reduced-motion:reduce){.scrub{display:none}}

/* ---------- dual route ---------- */
.routes{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:820px){.routes{grid-template-columns:1fr 1fr}}
.route{
  position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;
  border-radius:var(--r-lg);min-height:290px;padding:2.1rem;display:flex;flex-direction:column;
  justify-content:flex-end;border:1px solid var(--line-dark);
  transition:transform .28s var(--ease),box-shadow .28s;
}
.route img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.route::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(19,19,18,.55) 0%,rgba(19,19,18,.88) 72%);
  transition:background .28s;
}
.route:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.route:hover::after{background:linear-gradient(160deg,rgba(19,19,18,.42) 0%,rgba(19,19,18,.86) 72%)}
.route h3{color:#fff;margin-bottom:.4rem;font-size:1.55rem}
.route p{color:#D6D4CA;font-size:.98rem;margin-bottom:1rem}
.route-go{font-family:var(--f-display);font-weight:700;color:var(--yellow);display:inline-flex;align-items:center;gap:.45rem;font-size:.95rem}
.route:hover .route-go{gap:.75rem}
.route-go svg{transition:transform .24s var(--ease)}

/* ---------- cards ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .24s var(--ease),box-shadow .24s,border-color .24s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--yellow)}
.card-img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-img img{transform:scale(1.045)}
.card-body{padding:1.35rem 1.4rem 1.5rem;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.17rem;margin-bottom:.4rem}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card p{font-size:.94rem;color:var(--text-2);margin-bottom:1rem}
.card{position:relative}
.card-meta{
  margin-top:auto;font-family:var(--f-display);font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--yellow-deep);
  display:flex;align-items:center;gap:.4rem;
}
.sec-dark .card{background:var(--ink-2);border-color:var(--line-dark)}
.sec-dark .card p{color:var(--text-inv-2)}
.sec-dark .card-meta{color:var(--yellow)}

/* service list card, no image */
.slist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.slist a{
  display:flex;align-items:center;gap:.75rem;text-decoration:none;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:var(--r);font-weight:600;font-size:.97rem;
  background:var(--paper);transition:border-color .18s,background .18s,transform .18s var(--ease);
}
.slist a:hover{border-color:var(--yellow);background:#FEFDF7;transform:translateX(3px)}
.slist a::before{content:"";width:7px;height:7px;background:var(--yellow);flex:none;border-radius:1px}
.sec-dark .slist a{background:var(--ink-2);border-color:var(--line-dark);color:#fff}
.sec-dark .slist a:hover{background:var(--ink-3);border-color:var(--yellow)}

/* ---------- spec panel (drawing annotation) ---------- */
.spec{
  background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:1.7rem 1.8rem;
  border-left:5px solid var(--yellow);
  container-type:inline-size;
}
.spec h3{color:#fff;font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase;font-size:.9rem;margin-bottom:1.1rem}
/* Stacked by default. A nowrap two column dl has a min-content width wider than
   a phone, which pushed the whole page sideways. Restored to two columns by a
   container query, not a media query, because a .spec can sit in a half column
   on a wide screen and still be narrow. */
.spec dl{margin:0;display:grid;grid-template-columns:1fr;gap:.15rem 1.2rem;font-size:.94rem}
.spec dt{color:var(--yellow);font-weight:600;white-space:normal;overflow-wrap:anywhere}
.spec dd{margin:0 0 .7rem;color:#E6E4DA;overflow-wrap:anywhere}
.spec dd:last-child{margin-bottom:0}
@container (min-width:25rem){
  .spec dl{grid-template-columns:auto 1fr;gap:.55rem 1.2rem}
  .spec dt{white-space:nowrap}
  .spec dd{margin-bottom:0}
}
.spec-light{background:var(--paper-2);color:var(--text);border-left-color:var(--yellow)}
.spec-light h3{color:var(--text)}
.spec-light dt{color:var(--yellow-deep)}
.spec-light dd{color:var(--text-2)}

/* ---------- stats ---------- */
.stats{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));text-align:center}
.stat b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.1rem);color:var(--yellow);line-height:1}
.stat span{display:block;font-size:.9rem;color:var(--text-inv-2);margin-top:.45rem;font-weight:500}

/* ---------- proof strip ---------- */
.proof{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.proof li{
  font-size:.86rem;font-weight:600;padding:.5rem .9rem;border-radius:100px;
  background:var(--paper-2);border:1px solid var(--line);color:var(--text-2);
}
.sec-dark .proof li{background:var(--ink-2);border-color:var(--line-dark);color:var(--text-inv-2)}

/* plain text client list, kept as a fallback for pages without logo files.
   The homepage and /about/ now use .logo-wall below instead. */
.clients{display:flex;flex-wrap:wrap;gap:.55rem 1.9rem;list-style:none;margin:0;padding:0;align-items:center}
.clients li{
  font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--text-2);
  letter-spacing:.01em;
}
.sec-dark .clients li{color:var(--text-inv-2)}

/* ---------- client logo wall ---------- */
/* Logos of organisations AJB Group has worked for. Full colour, so the wall
   always sits on a light section (.sec-tint) and every logo gets its own white
   tile. Logos are constrained by HEIGHT only, never width, so wildly different
   aspect ratios still read as one system. Each tile is fenced by an HTML
   comment (<!-- logo:slug --> ... <!-- /logo:slug -->) so a single logo can be
   pulled in seconds. Organisations with no genuine logo file render as a
   wordmark tile instead, never a redrawn logo. */
.logo-wall-note{
  margin:.75rem 0 0;max-width:74ch;
  color:var(--text-2);font-size:.96rem;line-height:1.55;
}
.logo-wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
  gap:.6rem;list-style:none;margin:1.5rem 0 0;padding:0;
}
.logo-wall li{
  display:flex;align-items:center;justify-content:center;
  min-height:94px;padding:1.15rem 1.3rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
}
.logo-wall img{
  height:40px;width:auto;max-width:100%;object-fit:contain;
}
/* one or two brand logos are white-on-transparent and are simply invisible on
   white, so their tile takes the ink surface instead of being recoloured */
.logo-wall li.on-ink{background:var(--ink);border-color:var(--ink)}
/* brand-coloured tiles for logos supplied on their own solid background */
.logo-wall li.on-navy{background:#0F234A;border-color:#0F234A}
.logo-wall li.on-navy img,.logo-wall li.on-as img{height:56px}
.logo-wall li.on-as{background:#272224;border-color:#272224}
/* no genuine logo file found: styled wordmark, same tile, same grid rhythm */
.logo-wall .wordmark{
  font-family:var(--f-display);font-weight:800;font-size:.86rem;line-height:1.25;
  letter-spacing:.005em;color:var(--text-2);text-align:center;text-wrap:balance;
}
@media (max-width:640px){
  .logo-wall{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.45rem;margin-top:1.2rem}
  .logo-wall li{min-height:74px;padding:.8rem .85rem}
  .logo-wall img{height:32px}
  .logo-wall .wordmark{font-size:.76rem}
}

/* ---------- gallery ---------- */
.gal{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gal figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-3);aspect-ratio:4/3}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal .tall{aspect-ratio:3/4}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:1.25rem 2.6rem 1.25rem 0;font-family:var(--f-display);
  font-weight:700;font-size:1.06rem;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.55rem;width:11px;height:11px;
  border-right:2.5px solid var(--yellow-deep);border-bottom:2.5px solid var(--yellow-deep);
  transform:rotate(45deg);transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.85rem}
.faq .ans{padding:0 0 1.4rem;color:var(--text-2);max-width:72ch}
.sec-dark .faq,.sec-dark .faq details{border-color:var(--line-dark)}
.sec-dark .faq summary{color:#fff}
.sec-dark .faq summary::after{border-color:var(--yellow)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--yellow);color:var(--ink)}
.cta-band h2{color:var(--ink)}
.cta-band p{color:#3A3512}
.cta-in{display:grid;gap:1.6rem;align-items:center}
@media(min-width:860px){.cta-in{grid-template-columns:1.4fr auto}}
.cta-band .btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.cta-band .btn-primary:hover{background:#000;border-color:#000}
.cta-band .btn-ghost{border-color:rgba(19,19,18,.45);color:var(--ink)}
.cta-band .btn-ghost:hover{background:rgba(19,19,18,.08);border-color:var(--ink)}

/* ---------- breadcrumb ---------- */
.crumb{background:var(--paper-2);border-bottom:1px solid var(--line);padding:.85rem 0;font-size:.85rem}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;color:var(--text-2)}
.crumb a{color:var(--text-2);text-decoration:none}
.crumb a:hover{color:var(--yellow-deep);text-decoration:underline}
.crumb li+li::before{content:"/";margin-right:.4rem;color:var(--line)}
.crumb [aria-current]{color:var(--text);font-weight:600}

/* ---------- page hero (interior) ---------- */
.phero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.phero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(19,19,18,.86),rgba(19,19,18,.7) 50%,rgba(19,19,18,.94))}
.phero-in{padding:clamp(2.8rem,6vw,4.8rem) 0;max-width:52rem}
.phero h1{color:#fff}
.phero p{color:#E6E4DA;font-size:clamp(1.03rem,1.7vw,1.18rem);max-width:60ch}

/* ---------- prose ---------- */
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.9rem}
.prose ul,.prose ol{padding-left:1.25rem;margin:0 0 1.2rem;color:var(--text-2)}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--yellow-deep)}
.prose a{color:var(--yellow-deep);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.prose a:hover{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.95rem}
/* tables scroll sideways inside their own box on a phone rather than
   dragging the whole page with them */
.tbl{
  overflow-x:auto;margin:0 0 1.5rem;max-width:100%;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(90deg,var(--paper) 30%,rgba(255,255,255,0)) left/38px 100% no-repeat,
    linear-gradient(90deg,rgba(255,255,255,0),var(--paper) 70%) right/38px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(19,19,18,.16),rgba(19,19,18,0)) left/13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(19,19,18,.16),rgba(19,19,18,0)) right/13px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}
.tbl table{margin-bottom:0;min-width:34rem}
.prose th,.prose td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--f-display);font-weight:700;background:var(--paper-2)}

/* ---------- form ---------- */
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;border:1.5px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:1rem;background:#fff;color:var(--text);transition:border-color .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--yellow);outline:none}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:.82rem;color:var(--text-2);margin-top:.3rem}
.form .btn{width:100%}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--text-inv-2);padding:clamp(3rem,6vw,4.5rem) 0 0;font-size:.93rem}
.ftr h4,.ftr .ft-h{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.05rem;font-family:var(--f-display)}
.ftr a{color:var(--text-inv-2);text-decoration:none}
.ftr a:hover{color:var(--yellow)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ftr-grid{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ftr-brand p{color:var(--text-inv-2);font-size:.93rem;max-width:34ch}
.nap{font-style:normal;line-height:1.75}
.nap b{color:#fff;display:block;font-family:var(--f-display);margin-bottom:.3rem}
.nap a{color:var(--yellow);font-weight:600}
.ftr-btm{
  margin-top:3rem;border-top:1px solid var(--line-dark);padding:1.5rem 0;
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;font-size:.85rem;
}
.ftr-btm nav{display:flex;flex-wrap:wrap;gap:1.2rem}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:1px;
  background:var(--line-dark);box-shadow:0 -4px 20px rgba(0,0,0,.25);
}
.sticky-cta a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem .5rem;
  font-family:var(--f-display);font-weight:700;text-decoration:none;font-size:.98rem;
}
.sticky-cta .call{background:var(--yellow);color:var(--ink)}
.sticky-cta .quote{background:var(--ink);color:#fff}
@media(max-width:820px){.sticky-cta{display:flex}body{padding-bottom:58px}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- utilities ---------- */
.tc{text-align:center}
.mt0{margin-top:0}
.mb0{margin-bottom:0}
.mt-s{margin-top:1rem}
.mt-m{margin-top:2rem}
.mt-l{margin-top:3rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* spam honeypot: must be invisible to people and not affect layout, but still
   present in the DOM and submitted, so Netlify can read it */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.max60{max-width:62ch}
.sec-tight{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}