/* Hughes Residential Services :: Industrial Residential Premium
   Locked direction: dark metallic, chrome white, burnt orange. Bebas Neue / Montserrat / Inter. */

:root{
  --bg:#05070A;          /* Hughes Black */
  --surface:#11161B;     /* Graphite Steel (a hair above bg) */
  --surface-2:#171E25;
  --ink:#F8F9F9;         /* Chrome White */
  --muted:#D9DEE2;       /* Metallic Silver */
  --muted-2:#9AA6B2;
  --accent:#C86B13;      /* Burnt Orange */
  --accent-2:#F0A12A;    /* Hot Ember Gold */
  --bronze:#6F350C;
  --steel:#26313A;       /* Steel Blue Gray */
  --line:#242C35;
  --line-soft:#1B222A;
  --radius:4px;
  --h:'Bebas Neue', Oswald, Impact, sans-serif;
  --sub:'Montserrat', system-ui, sans-serif;
  --b:'Inter', system-ui, sans-serif;
  --maxw:1180px;
  --pad:clamp(56px,8vw,104px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--b);font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-wrap:break-word;
  background-image:radial-gradient(1200px 600px at 80% -10%, rgba(200,107,19,.07), transparent 60%);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--h);font-weight:400;line-height:.92;margin:0;letter-spacing:.01em;text-wrap:balance;}
h1{font-size:clamp(3rem,8vw,6rem);}
h2{font-size:clamp(2.3rem,5vw,3.9rem);}
h3{font-size:clamp(1.5rem,2.4vw,2rem);}
p{margin:0 0 1rem;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{font-family:var(--sub);font-weight:700;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:30px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.lede{color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:54ch;}
section{padding:var(--pad) 0;position:relative;}
.section-head{max-width:62ch;margin-bottom:clamp(32px,4vw,52px);}
.section-head h2{margin:14px 0 0;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sub);font-weight:700;
  font-size:.95rem;letter-spacing:.02em;padding:14px 24px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#1a0e02;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -10px rgba(240,161,42,.6);border-color:rgba(255,210,150,.35);}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 28px -10px rgba(240,161,42,.75);}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:rgba(248,249,249,.7);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2);}
.btn svg{width:18px;height:18px;}

/* ---- header / nav ---- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;}
.site-header .nav a,.site-header .has-dropdown>button,.header-phone{text-shadow:0 1px 4px rgba(0,0,0,.5);}
.site-header.scrolled .nav a,.site-header.scrolled .has-dropdown>button,.site-header.scrolled .header-phone{text-shadow:none;}
.site-header .wrap{display:flex;align-items:center;gap:26px;height:86px;}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.logo-slot{width:60px;height:60px;flex:0 0 auto;}        /* reserves the nav logo position; morph-logo lands here */
.brand img{height:56px;width:auto;}                       /* footer + fallback logo */
.nav{display:none;align-items:center;gap:28px;margin-left:6px;}
.nav a{font-family:var(--sub);font-weight:600;font-size:.9rem;color:var(--muted);letter-spacing:.01em;transition:color .15s;}
.nav a:hover{color:var(--ink);}
.nav .has-dropdown{position:relative;}
.nav .has-dropdown>button{font:inherit;font-family:var(--sub);font-weight:600;font-size:.9rem;color:var(--muted);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0;}
.nav .has-dropdown>button:hover{color:var(--ink);}
.nav .has-dropdown>button svg{width:12px;height:12px;transition:transform .2s;}
.nav .has-dropdown:hover>button svg,.nav .has-dropdown:focus-within>button svg{transform:rotate(180deg);}
.nav .has-dropdown::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:20px;} /* hover bridge */
.submenu{position:absolute;top:calc(100% + 16px);left:-14px;min-width:300px;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s;border-top:2px solid var(--accent);}
.nav .has-dropdown:hover .submenu,.nav .has-dropdown:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0);}
.submenu a{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:6px;color:var(--ink);}
.submenu a:hover{background:var(--surface-2);}
.submenu a .si{width:20px;height:20px;color:var(--accent-2);flex:0 0 auto;margin-top:2px;}
.submenu a b{font-family:var(--sub);font-weight:600;font-size:.9rem;display:block;}
.submenu a span{font-size:.78rem;color:var(--muted-2);line-height:1.35;}
.header-cta{margin-left:auto;display:flex;align-items:center;gap:14px;}
.header-phone{display:none;font-family:var(--h);font-size:1.5rem;letter-spacing:.03em;color:var(--ink);}
.header-phone:hover{color:var(--accent-2);}
.menu-toggle{margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink);width:46px;height:42px;display:grid;place-items:center;cursor:pointer;}
.menu-toggle svg{width:22px;height:22px;}
@media(min-width:1000px){.nav{display:flex;}.menu-toggle{display:none;}.header-phone{display:block;}}

/* mobile menu panel */
.mobile-nav{display:none;border-top:1px solid var(--line-soft);background:var(--surface);}
.mobile-nav.open{display:block;}
.mobile-nav a{display:block;padding:15px 24px;border-bottom:1px solid var(--line-soft);font-family:var(--sub);font-weight:600;color:var(--ink);}
/* when the mobile menu is open: header always gets a solid bg (even at scroll-top), and the morph logo hides so it never sits on top of the drawer */
.site-header:has(.mobile-nav.open){background:rgba(5,7,10,.96);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-bottom-color:var(--line);}
body:has(.mobile-nav.open) .morph-logo{opacity:0;pointer-events:none;}

/* ---- hero (full-bleed bg image, content + review overlaid, morph-logo slot) ----
   NOTE: padding:0 overrides the global section{padding} so the hero height is
   content-driven (a <section> would otherwise gain ~200px of vertical padding). */
.hero{position:relative;padding:0;min-height:440px;display:flex;align-items:flex-start;overflow:hidden;background:var(--bg);}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:brightness(.66) contrast(1.03) saturate(.92);}
.hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg, rgba(5,7,10,.6) 0%, rgba(5,7,10,.42) 46%, rgba(5,7,10,.22) 70%, rgba(5,7,10,.07) 88%, rgba(5,7,10,0) 100%),
  linear-gradient(180deg, rgba(5,7,10,.26) 0%, transparent 18%),
  linear-gradient(0deg, rgba(5,7,10,.32), transparent 44%);}
.hero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));}
/* ===== Hero ember ignition (homepage on-load wow): a spark traces the accent rule and the H1 accent word ignites ===== */
.hero .ignite-spark{display:none;}
@media (prefers-reduced-motion: no-preference){
  .hero-media::after{transform:scaleX(0);transform-origin:left center;animation:hero-rule-draw 1.05s cubic-bezier(.5,.08,.2,1) .3s forwards;}
  .hero .ignite-spark{display:block;position:absolute;bottom:-3px;left:0;z-index:4;width:16px;height:10px;border-radius:50%;pointer-events:none;opacity:0;
    background:radial-gradient(circle,#fff 0%,var(--accent-2) 38%,rgba(200,107,19,.5) 60%,transparent 75%);
    box-shadow:0 0 12px 4px rgba(240,161,42,.9),0 0 26px 9px rgba(200,107,19,.55);
    animation:hero-spark 1.35s cubic-bezier(.5,.08,.2,1) .3s forwards;}
  .hero-copy h1 .amp{animation:amp-ignite 1s ease .85s both;}
}
@keyframes hero-rule-draw{to{transform:scaleX(1);}}
@keyframes hero-spark{
  0%{left:-8px;opacity:0;}
  10%{opacity:1;}
  90%{left:calc(100% - 8px);opacity:1;}
  100%{left:calc(100% - 8px);opacity:0;}
}
@keyframes amp-ignite{
  0%,30%{color:var(--muted-2);text-shadow:0 2px 16px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5);}
  40%{color:#fff;text-shadow:0 0 22px rgba(240,161,42,.95),0 0 7px rgba(255,255,255,.7);}
  55%{color:var(--accent-2);text-shadow:0 0 9px rgba(240,161,42,.4),0 2px 12px rgba(0,0,0,.5);}
  70%{color:#ffe9c8;text-shadow:0 0 15px rgba(240,161,42,.8);}
  100%{color:var(--accent-2);text-shadow:0 2px 16px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5);}
}
.hero .wrap{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:1fr;align-items:start;
  padding:clamp(104px,13vh,134px) 24px clamp(62px,9vh,104px);}
.hero-copy{max-width:760px;}
.hero-logo-slot{width:90px;height:90px;margin-bottom:10px;justify-self:start;}
.hero-logo-static{width:100%;height:100%;object-fit:contain;display:none;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(200,107,19,.22));}
.hero-copy h1{position:relative;margin:0;font-size:clamp(2.95rem,6.3vw,5.1rem);text-shadow:0 2px 16px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5);}
/* 3.3 subtle ember radial halo behind the hero H1 (restrained: sparks, not the whole brand) */
.hero-copy h1::before{content:"";position:absolute;z-index:-1;left:-6%;top:50%;transform:translateY(-50%);
  width:62%;height:170%;pointer-events:none;
  background:radial-gradient(60% 56% at 38% 50%,rgba(240,161,42,.16),rgba(200,107,19,.06) 48%,transparent 74%);}
.hero-copy h1 .amp,.page-hero h1 .amp{color:var(--accent-2);}
.hero-copy .eyebrow{text-shadow:0 1px 6px rgba(0,0,0,.6);}
.hero-copy .lede{margin-top:16px;max-width:46ch;font-size:clamp(1rem,1.2vw,1.1rem);text-shadow:0 1px 10px rgba(0,0,0,.65);}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.hero-review{display:inline-flex;align-items:center;gap:12px;margin:18px 0 0;width:fit-content;max-width:min(100%,330px);
  background:rgba(8,11,15,.5);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:8px;padding:11px 15px;}
.hero-review .stars{color:var(--accent-2);font-size:.95rem;letter-spacing:2px;flex:0 0 auto;line-height:1;}
.hero-review blockquote{margin:0;font-size:.88rem;line-height:1.38;color:var(--ink);}
.hero-review cite{display:block;margin-top:3px;font-style:normal;font-family:var(--sub);font-weight:600;font-size:.75rem;color:var(--muted-2);}
@media(min-width:981px){
  .hero .wrap{grid-template-columns:minmax(0,1.42fr) minmax(186px,0.64fr);align-items:center;gap:clamp(20px,2.4vw,46px);}
  .hero-copy{grid-column:1;grid-row:1;}
  .hero-logo-slot{grid-column:2;grid-row:1;justify-self:center;align-self:center;margin:0;
    width:clamp(192px,17vw,250px);height:clamp(192px,17vw,250px);}
}
@media(max-width:980px){
  .hero-media::before{background:
    linear-gradient(180deg, rgba(5,7,10,.5) 0%, rgba(5,7,10,.28) 45%, rgba(5,7,10,.56) 100%),
    linear-gradient(90deg, rgba(5,7,10,.3), rgba(5,7,10,.1) 80%);}
  .hero .wrap{padding:clamp(78px,11vh,96px) 22px clamp(44px,7vh,68px);}
  .hero-copy{max-width:none;}
  .hero-logo-slot{display:block;justify-self:center;width:108px;height:108px;margin:0 0 14px;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
}

/* ---- trust strip ---- */
.trust{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--surface),transparent);}
.trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:0;}
/* Narrow mobile: stack to one column so the longer uppercase labels
   ("you get Andrew", "East Alton & nearby") never clip the cell edge. */
@media(max-width:520px){.trust .wrap{grid-template-columns:1fr;}.trust .item{border-bottom:1px solid var(--line-soft);}.trust .item:last-child{border-bottom:0;}}
.trust .item{padding:24px 22px;display:flex;gap:13px;align-items:center;}
/* 4.8 trust-strip icon depth: lighter ember glow (smaller icons, restrained) */
.trust .item .ic{width:34px;height:34px;flex:0 0 auto;color:var(--accent-2);
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)) drop-shadow(0 0 9px rgba(240,161,42,.28));}
.trust .item b{font-family:var(--h);font-size:1.6rem;letter-spacing:.02em;display:block;line-height:.9;}
.trust .item span{font-family:var(--sub);font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted-2);}
@media(min-width:760px){.trust .wrap{grid-template-columns:repeat(4,1fr);}.trust .item{border-left:1px solid var(--line-soft);}.trust .item:first-child{border-left:0;}}

/* ---- services ---- */
.services-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:620px){.services-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.services-grid{grid-template-columns:repeat(3,1fr);}}
.scard{background:linear-gradient(180deg,var(--surface),var(--bg));border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px 30px;position:relative;overflow:hidden;
  transition:border-color .2s ease,transform .22s ease,box-shadow .22s ease;}
.scard::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--accent),transparent);opacity:.7;
  transition:opacity .2s ease,background .25s ease,box-shadow .25s ease;}
/* metallic/bevel depth (design.md: no soft gray blur; brightened steel edge,
   inset top-highlight, ember glow, restrained dark shadow) */
.scard:hover{border-color:var(--accent);transform:translateY(-6px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(240,161,42,.14),
    0 18px 34px -22px rgba(0,0,0,.85),0 10px 30px -18px rgba(240,161,42,.32);}
/* category-leader refinement: the ember bottom rule sharpens to full-width and gains a
   light-reflection glow on hover (not just an opacity bump) */
.scard:hover::after{opacity:1;background:linear-gradient(90deg,var(--accent-2),var(--accent) 65%,transparent);
  box-shadow:0 0 14px -2px rgba(240,161,42,.5);}
/* 4.8 service-card icon depth: ember glow ring + tight dark drop so the ember SVG reads as a lit
   metal element, not a flat line icon (design.md: light/ember reflection, never soft gray blur).
   Sharpens on hover alongside the card lift. */
.scard .ic{width:46px;height:46px;color:var(--accent-2);margin-bottom:18px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(240,161,42,.34));
  transition:filter .22s ease,transform .22s ease;}
.scard:hover .ic{filter:drop-shadow(0 3px 7px rgba(0,0,0,.6)) drop-shadow(0 0 17px rgba(240,161,42,.5));
  transform:translateY(-1px);}
.scard h3{font-size:1.7rem;}
.scard p{margin:10px 0 0;color:var(--muted-2);font-size:.96rem;}
/* contextual deep-link on each service card / service row: ember micro-label with a
   nudging arrow. Inherits the global :focus-visible ring (Wave 3). */
.svc-link{display:inline-flex;align-items:center;gap:7px;margin-top:8px;min-height:44px;padding:10px 2px;
  font-family:"Montserrat",system-ui,sans-serif;font-weight:600;font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);
  text-decoration:none;transition:color .18s ease,gap .18s ease;}   /* 8.4 grow the tap area to the 44px floor */
.svc-link svg{width:15px;height:15px;flex:0 0 auto;transition:transform .18s ease;}
.svc-link:hover{color:var(--accent);gap:11px;}
.svc-link:hover svg{transform:translateX(2px);}

/* ---- gallery slider + lightbox ---- */
.gallery-rail-wrap{position:relative;}
.gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;
  scrollbar-width:thin;scrollbar-color:var(--steel) transparent;-webkit-overflow-scrolling:touch;}
.gallery::-webkit-scrollbar{height:8px;}
.gallery::-webkit-scrollbar-track{background:var(--line-soft);border-radius:4px;}
.gallery::-webkit-scrollbar-thumb{background:var(--steel);border-radius:4px;}
/* 4.6 gallery cards carry a restrained rest-state metallic ring + ember glow + bevel so the frame
   reads as deliberate before hover; the Wave-3 hover lift/zoom/glow builds on top of it. */
.gitem{position:relative;flex:0 0 auto;width:min(80vw,340px);aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);scroll-snap-align:start;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 0 0 1px rgba(240,161,42,.08),
    0 14px 30px -26px rgba(0,0,0,.8),0 8px 22px -20px rgba(240,161,42,.16);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gitem:hover{transform:translateY(-6px);border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(240,161,42,.16),0 18px 36px -24px rgba(0,0,0,.9),0 12px 30px -18px rgba(240,161,42,.3);}
.gitem:hover img{transform:scale(1.05);}
/* 4.9 caption fade-in: rests slightly dimmed + nudged down, lifts + fully resolves on hover/focus.
   Never fully hidden at rest (legible + accessible); reduced-motion users get it fully resolved. */
.gitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-family:var(--sub);font-weight:600;font-size:.82rem;
  color:var(--ink);background:linear-gradient(0deg,rgba(5,7,10,.92),transparent);pointer-events:none;
  opacity:.78;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease;}
.gitem:hover figcaption,.gitem:focus-visible figcaption,.gitem:focus-within figcaption{opacity:1;transform:translateY(0);}
.gitem .zoom{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:6px;background:rgba(8,11,15,.66);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);opacity:0;transition:opacity .2s;}
.gitem:hover .zoom,.gitem:focus-visible .zoom{opacity:1;}
@media(prefers-reduced-motion:reduce){.gitem figcaption{opacity:1;transform:none;}}
.gitem .zoom svg{width:17px;height:17px;}
.gallery-nav{display:none;}
@media(min-width:720px){
  .gitem{width:380px;}
  .gallery-nav{display:flex;gap:10px;position:absolute;top:-64px;right:0;}
  .gallery-nav button{width:46px;height:46px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,color .2s;}
  .gallery-nav button:hover{border-color:var(--accent);color:var(--accent-2);}
  .gallery-nav button svg{width:20px;height:20px;}
}
.gallery-foot{margin-top:26px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.gallery-foot .btn-primary{max-width:100%;white-space:normal;text-align:center;}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(3,4,6,.95);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:24px;}
.lightbox.open{display:flex;}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;}
.lightbox img{max-width:min(94vw,620px);max-height:80vh;border-radius:6px;border:1px solid var(--steel);box-shadow:0 30px 80px -20px #000;}
.lightbox figcaption{font-family:var(--sub);font-weight:600;color:var(--muted);font-size:.92rem;}
.lb-btn{position:absolute;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);cursor:pointer;display:grid;place-items:center;border-radius:8px;}
.lb-close{top:20px;right:24px;width:48px;height:48px;}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;}
.lb-prev{left:18px;} .lb-next{right:18px;}
.lb-btn:hover{background:rgba(200,107,19,.28);border-color:var(--accent);}
.lb-btn svg{width:22px;height:22px;}
@media(max-width:560px){.lb-prev,.lb-next{width:44px;height:44px;}.lb-prev{left:8px;}.lb-next{right:8px;}}

/* ---- morph logo (hero -> nav on scroll, per arctest lab pattern) ---- */
.morph-logo{position:fixed;z-index:70;top:150px;left:24px;width:200px;height:200px;pointer-events:none;}
.morph-logo a{display:block;width:100%;height:100%;pointer-events:auto;}
.morph-logo img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(200,107,19,.3));}
.nav-logo-static{display:none;}
.site-header.scrolled{background:rgba(5,7,10,.95);backdrop-filter:blur(12px) saturate(1.2);border-bottom-color:var(--line);}
/* Homepage morph runs on mobile too: morph-logo + nav .logo-slot stay visible at all widths,
   the hero logo is centered and flies up into the nav on scroll. Inner pages (.page) have no
   morph element and show the static nav logo via the .page rules below. */
@media(max-width:999px){
  .site-header .wrap{gap:10px;}
  /* Call button collapses to an icon-only square, sitting next to the hamburger */
  .header-cta{gap:8px;}
  .header-cta .btn-primary{width:46px;height:46px;padding:0;flex:0 0 auto;}
  .header-cta .btn-primary .btn-label{display:none;}
  .header-cta .btn-primary svg{width:20px;height:20px;}
  .menu-toggle{margin-left:0;width:46px;height:46px;}
}
@media (prefers-reduced-motion: reduce){ .hero-logo-slot{display:none;} }

/* ---- positioning split ---- */
.split{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:780px){.split{grid-template-columns:1fr 1fr;gap:24px;}}
.plist{list-style:none;margin:0;padding:0;}
.plist li{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start;}
.plist li:last-child{border-bottom:0;}
.plist .m{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:800;margin-top:1px;}
.good .m{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#1a0e02;}
.bad .m{background:transparent;border:1px solid var(--line);color:var(--muted-2);}
.bad li{color:var(--muted-2);}
.panel{background:linear-gradient(180deg,var(--surface),var(--bg));border:1px solid var(--line);border-radius:6px;padding:clamp(24px,3vw,36px);}
.panel.bad-panel{background:transparent;border-style:dashed;}
.panel h3{font-size:1.5rem;margin-bottom:8px;}
.panel .ph{font-family:var(--sub);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;display:block;}
.good .ph{color:var(--accent-2);}.bad .ph{color:var(--muted-2);}

/* ---- testimonial ---- */
.quote-sec{background:
  linear-gradient(180deg,var(--surface),var(--bg)),
  radial-gradient(600px 300px at 50% 0,rgba(200,107,19,.10),transparent 70%);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.quote{max-width:820px;margin:0 auto;text-align:center;}
.quote .stars{color:var(--accent-2);font-size:1.4rem;letter-spacing:5px;}
.quote blockquote{font-family:var(--h);font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.04;margin:20px 0 22px;color:var(--ink);text-wrap:balance;}
.quote cite{font-style:normal;font-family:var(--sub);font-weight:600;color:var(--muted);font-size:.95rem;}
.quote cite .src{color:var(--muted-2);font-weight:500;}

/* ---- about ---- */
.about .wrap{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:center;}
/* 4.6 framed-image depth (design.md: metallic ring + ember glow + bevel, NOT soft gray blur).
   Inset top highlight = brushed-steel bevel; inset 1px ember-tinted ring; restrained outer ember drop-glow. */
.about-media{border-radius:6px;overflow:hidden;border:1px solid var(--steel);position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(240,161,42,.12),
    0 22px 46px -28px rgba(0,0,0,.85),0 12px 32px -20px rgba(240,161,42,.24);
  transition:border-color .22s ease,box-shadow .22s ease;}
.about-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s ease;}
/* gradient bottom-fade so the pinned caption chip sits on darkness, not on the photo midtones (4.7) */
.about-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,7,10,.72),transparent);}
.about-media:hover{border-color:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(240,161,42,.2),
    0 26px 52px -28px rgba(0,0,0,.9),0 14px 36px -20px rgba(240,161,42,.34);}
.about-media:hover img{transform:scale(1.03);}
.about-media .cap{position:absolute;z-index:1;left:14px;bottom:12px;background:rgba(5,7,10,.72);border:1px solid var(--line);border-radius:5px;padding:7px 11px;font-family:var(--sub);font-size:.74rem;color:var(--muted);}
@media(min-width:840px){.about .wrap{grid-template-columns:.85fr 1.15fr;}}

/* ---- service area ---- */
.area{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.area .town{font-family:var(--sub);font-weight:600;font-size:.95rem;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);}
.area .town b{color:var(--ink);}
.area .town.anchor{border-color:var(--accent);color:var(--accent-2);}

/* ---- FAQ (centered, §7b) ---- */
.faq-list{max-width:780px;margin:0 auto;}
.faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:12px;overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;gap:16px;align-items:center;
  font-family:var(--sub);font-weight:600;font-size:1.02rem;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .chev{flex:0 0 auto;width:22px;height:22px;color:var(--accent-2);transition:transform .2s;}
.faq[open] summary .chev{transform:rotate(45deg);}
.faq .ans{padding:0 22px 20px;color:var(--muted);text-align:left;}

/* ---- big CTA band ---- */
.cta-band{background:linear-gradient(120deg,var(--bronze),var(--accent) 55%,var(--accent-2));border-radius:8px;
  padding:clamp(54px,7vw,100px) clamp(24px,4vw,52px);text-align:center;position:relative;overflow:hidden;}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 50% 120%,rgba(255,255,255,.25),transparent);}
.cta-band h2{color:#160a01;position:relative;font-size:clamp(2.4rem,5vw,4rem);line-height:1.0;}
.cta-band p{color:#2a1602;max-width:48ch;margin:14px auto 26px;position:relative;font-weight:500;}
.cta-band .btn{position:relative;background:#0a0d11;color:var(--ink);border-color:rgba(0,0,0,.3);font-size:1.15rem;padding:16px 30px;}
.cta-band .btn:hover{background:#000;}
.cta-band .phone{font-family:var(--h);font-size:1.5rem;letter-spacing:.04em;}
/* 7.4 real-proof line sits tight under the band CTA (real signals only) */
.cta-band .proof{position:relative;margin:18px auto 0;font-family:var(--sub);font-weight:600;font-size:.86rem;letter-spacing:.04em;color:#2a1602;display:flex;flex-wrap:nowrap;justify-content:center;gap:8px 12px;}
.cta-band .proof span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.cta-band .proof span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:#160a01;opacity:.55;margin-right:12px;}

/* ---- footer ---- */
.site-footer{background:#030506;border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 28px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:34px;}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr;}}
.footer-brand img{width:64px;height:64px;object-fit:contain;margin-bottom:16px;}
.footer-brand p{color:var(--muted-2);font-size:.92rem;max-width:38ch;}
.footer-col h2{font-family:var(--sub);font-weight:700;font-size:.78rem;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin:0 0 16px;}
.footer-col a,.footer-col p{display:block;color:var(--muted);font-size:.95rem;margin-bottom:11px;}
.footer-col a:hover{color:var(--accent-2);}
.footer-bottom{margin-top:42px;padding-top:22px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;}
.footer-bottom small{color:var(--muted-2);font-size:.82rem;}
.footer-bottom a{color:var(--muted);}
.footer-bottom a:hover{color:var(--accent-2);}
/* LocalCraft Digital attribution always renders in the brand primary accent (BUILD-STANDARDS) */
.footer-bottom a.lcd-credit{color:var(--accent);font-weight:700;}
.footer-bottom a.lcd-credit:hover{color:var(--accent-2);}

/* ---- mobile sticky call bar (§7a: mobile only, no desktop floating CTA) ---- */
.callbar{display:none;}
@media(max-width:720px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px;gap:10px;
    background:rgba(5,7,10,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
    transform:translateY(130%);transition:transform .32s ease;}
  .callbar.show{transform:translateY(0);}      /* revealed by JS after a little scroll */
  .callbar .btn{flex:1;min-width:0;min-height:44px;padding:13px 8px;font-size:.9rem;}   /* 8.4 tap-target floor */
  .callbar .btn-primary{flex:2.2;}
  .callbar .btn svg{width:17px;height:17px;flex:0 0 auto;}
  body{padding-bottom:0;}
  .site-footer{padding-bottom:84px;}           /* clear the sticky bar at the page bottom */
}

/* utilities */
.center{text-align:center;}
.mt-s{margin-top:18px;}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px;border-radius:2px;}

/* ---- 8.3 delight: ember glare-sweep ----
   One-shot diagonal ember/chrome light that sweeps across a framed element the first time its
   reveal-parent enters view. Used on EXACTLY one element per page (work featured frame, services
   first service photo, contact form card). Metallic/ember, never whimsical. The sweep rides a real
   non-interactive child span (.glint), NOT a pseudo-element, so it never collides with the metallic
   ::before/::after frames those elements already carry. It only animates once .is-visible lands on the
   reveal ancestor (or on the element itself). Reduced-motion users get no sweep at all. */
.glare-sweep{position:relative;}
.glare-sweep>.glint{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;overflow:hidden;opacity:0;}
.glare-sweep>.glint::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:60%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.16) 38%,rgba(240,161,42,.5) 50%,rgba(255,255,255,.16) 62%,transparent 100%);
  transform:translateX(-180%) skewX(-12deg);}
.is-visible .glare-sweep>.glint,.glare-sweep.is-visible>.glint{opacity:1;}
.is-visible .glare-sweep>.glint::before,.glare-sweep.is-visible>.glint::before{animation:emberGlare 1.2s ease-out .25s 1 both;}
@keyframes emberGlare{
  0%{transform:translateX(-180%) skewX(-12deg);}
  100%{transform:translateX(320%) skewX(-12deg);}
}
@media(prefers-reduced-motion:reduce){
  .glare-sweep>.glint{opacity:0!important;}
  .glare-sweep>.glint::before,.is-visible .glare-sweep>.glint::before,.glare-sweep.is-visible>.glint::before{animation:none!important;}
}

/* ---- entrance reveals (Wave 2 · §2.6) ----
   Content is NEVER permanently hidden: the hidden start-state is gated on
   html.js, set by an inline head script. No-JS users see everything painted.
   The above-the-fold hero is never tagged data-reveal. Reveal-on-intersect, once. */
.js [data-reveal]{opacity:0;transform:translateY(22px);will-change:opacity,transform;
  transition:opacity .7s cubic-bezier(.16,.62,.3,1),transform .7s cubic-bezier(.16,.62,.3,1);}
.js [data-reveal].is-visible{opacity:1;transform:none;}
/* staggered children (stat rows, service grids, trust items) */
.js [data-reveal-group]>*{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--ri,0)*70ms);}
.js [data-reveal-group].is-visible>*{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;}
  /* reduced-motion: never animate; show everything immediately, no transform/opacity shift */
  .js [data-reveal],.js [data-reveal].is-visible,
  .js [data-reveal-group]>*,.js [data-reveal-group].is-visible>*{opacity:1!important;transform:none!important;}
}

/* ============================================================
   INNER PAGES (Services, Work, Service Area, About, Contact)
   Shared shell; header is solid + logo lives in the nav (no morph).
   ============================================================ */
.page .site-header{background:rgba(5,7,10,.95);backdrop-filter:blur(12px) saturate(1.2);border-bottom-color:var(--line);}
.page .site-header .nav a,.page .site-header .has-dropdown>button,.page .header-phone{text-shadow:none;}
.page .logo-slot{display:none;}
.page .nav-logo-static{display:block;opacity:1;height:50px;width:auto;}
@media(max-width:999px){ .page .nav-logo-static{height:46px;} }

/* page hero banner */
.page-hero{position:relative;overflow:hidden;background:var(--surface);
  padding:clamp(118px,16vh,160px) 0 clamp(40px,6vh,64px);border-bottom:1px solid var(--line);}
.page-hero .pbg{position:absolute;inset:0;z-index:0;}
.page-hero .pbg img{width:100%;height:100%;object-fit:cover;filter:brightness(.66) contrast(1.04) saturate(.92);}
.page-hero .pbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,7,10,.8),rgba(5,7,10,.46) 58%,rgba(5,7,10,.26)),linear-gradient(0deg,rgba(5,7,10,.65),transparent 55%);}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero h1{position:relative;font-size:clamp(2.6rem,6vw,4.4rem);margin:8px 0 0;text-shadow:0 2px 14px rgba(0,0,0,.5);}
/* 3.3 ember radial halo behind inner-page hero H1 (matches homepage, restrained) */
.page-hero h1::before{content:"";position:absolute;z-index:-1;left:-5%;top:50%;transform:translateY(-50%);
  width:58%;height:175%;pointer-events:none;
  background:radial-gradient(58% 56% at 36% 50%,rgba(240,161,42,.15),rgba(200,107,19,.05) 48%,transparent 74%);}
.page-hero .eyebrow{opacity:1;text-shadow:0 1px 6px rgba(0,0,0,.6);} /* P-002: overlaid-text legibility (BUILD-STANDARDS §7) */
.page-hero p{margin:16px 0 0;max-width:58ch;color:var(--muted);text-shadow:0 1px 10px rgba(0,0,0,.6);}

/* 5.3 per-page hero rhythm: each inner hero gets its own cadence so no two read as the same template.
   All variation stays inside the locked system (padding / H1 clamp / sub width / alignment / eyebrow gap only;
   no new color, font, or ornament). */

/* services: densest page (6 service rows follow). Tighten the handoff to the grid and let the longer
   descriptor breathe wider. Smaller H1, reduced bottom padding, wider sub. */
.hero--services{padding-bottom:clamp(32px,4.5vh,48px);}
.hero--services h1{font-size:clamp(2.4rem,5.4vw,4rem);}
.hero--services p{max-width:64ch;}

/* work: proof gallery. Most compact hero so the photo grid owns the page. Tightest top+bottom padding,
   narrowest sub (short one-liner), slightly smaller H1. */
.hero--work{padding:clamp(108px,13vh,140px) 0 clamp(28px,4vh,44px);}
.hero--work h1{font-size:clamp(2.5rem,5.6vw,4.2rem);}
.hero--work p{max-width:52ch;}

/* service-area: lightest page below the fold, so the hero carries more weight. Tallest + centered,
   largest H1 clamp, generous padding, sub centered with its own measure. A deliberate "map landing" feel. */
.hero--area{padding:clamp(132px,18vh,176px) 0 clamp(48px,7vh,72px);text-align:center;}
.hero--area h1{font-size:clamp(2.8rem,6.4vw,4.8rem);}
.hero--area h1::before{left:50%;transform:translate(-50%,-50%);width:74%;}
.hero--area p{max-width:56ch;margin-left:auto;margin-right:auto;}

/* about: bio. Story paragraph reads widest; extra breathing room above the H1 so the eyebrow sets the scene.
   Mid-size H1, standard-generous padding. */
.hero--about{padding-top:clamp(124px,17vh,168px);}
.hero--about .eyebrow{display:inline-block;margin-bottom:6px;}
.hero--about h1{font-size:clamp(2.7rem,6vw,4.5rem);}
.hero--about p{max-width:66ch;}

/* contact: action page. Compact and punchy. Tighter padding, constrained directive sub, tighter eyebrow→H1
   gap so it reads urgent. */
.hero--contact{padding:clamp(110px,14vh,144px) 0 clamp(34px,5vh,52px);}
.hero--contact h1{margin-top:4px;font-size:clamp(2.6rem,5.8vw,4.4rem);}
.hero--contact p{max-width:50ch;}
/* mobile guard: "broken." is the longest single accent word that lands alone on its last line,
   so ease the H1 floor at narrow widths to keep the ember word clear of the gutter. */
@media(max-width:520px){.hero--contact h1{font-size:2.3rem;}}

/* breadcrumbs removed per operator preference (trade sites skip them) */

/* generic prose + lists for service/about content */
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);max-width:62ch;}
.prose p{color:var(--muted);max-width:64ch;}
.prose p strong{color:var(--ink);}
.checklist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;}
.checklist li{display:flex;gap:11px;align-items:flex-start;color:var(--ink);}
.checklist li svg{width:20px;height:20px;color:var(--accent-2);flex:0 0 auto;margin-top:2px;}

/* service detail rows */
.svc{display:grid;grid-template-columns:1fr;gap:14px 36px;padding:clamp(26px,3.5vw,40px) 0;border-top:1px solid var(--line-soft);align-items:start;}
.svc:first-of-type{border-top:0;}
@media(min-width:760px){.svc{grid-template-columns:300px 1fr;}}
.svc .svc-head{display:flex;gap:14px;align-items:flex-start;}
/* 4.8 service-detail icon depth (matches the homepage service-card icon treatment) */
.svc .svc-ic{width:46px;height:46px;color:var(--accent-2);flex:0 0 auto;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(240,161,42,.34));}
.svc h2{font-size:1.7rem;}
.svc .svc-body p{color:var(--muted);margin:0 0 12px;}

/* work deep grid (reuses .gitem from the slider) */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:640px){.work-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.work-grid{grid-template-columns:repeat(4,1fr);}}
.work-grid .gitem{width:auto;flex:initial;scroll-snap-align:none;}

/* service area towns */
.area-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:620px){.area-grid{grid-template-columns:1fr 1fr;}}
.area-card{background:linear-gradient(180deg,var(--surface),var(--bg));border:1px solid var(--line);border-radius:var(--radius);padding:24px;border-left:3px solid var(--accent);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.area-card:hover{transform:translateY(-6px);border-color:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(240,161,42,.12),
    0 18px 34px -22px rgba(0,0,0,.85),0 10px 28px -18px rgba(240,161,42,.28);}
.area-card h2{font-size:1.5rem;line-height:1.05;margin:0;}
.area-card p{color:var(--muted-2);margin:8px 0 0;font-size:.95rem;}
/* 8.3 delight (service-area): ember corner-brackets frame the East Alton home-base card. They draw
   in once when the grid reveals, a single industrial "you are here" flourish, metallic/ember.
   Brackets render at full size by default (no-JS / reduced-motion); the draw-in only runs on reveal. */
.area-anchor{position:relative;}
.area-anchor .bracket{position:absolute;width:18px;height:18px;pointer-events:none;z-index:2;}
.area-anchor .bracket-tl{top:9px;left:9px;border-top:2px solid var(--accent-2);border-left:2px solid var(--accent-2);}
.area-anchor .bracket-br{bottom:9px;right:9px;border-bottom:2px solid var(--accent-2);border-right:2px solid var(--accent-2);}
.area-grid.is-visible .area-anchor .bracket{animation:bracketDraw .55s ease-out .35s 1 both;}
@keyframes bracketDraw{
  0%{width:0;height:0;opacity:0;}
  40%{opacity:1;}
  100%{width:18px;height:18px;opacity:1;}
}
@media(prefers-reduced-motion:reduce){
  .area-grid.is-visible .area-anchor .bracket{animation:none!important;}
}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);}
@media(min-width:880px){.contact-grid{grid-template-columns:1fr 1.1fr;}}
.contact-info .ci{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-soft);}
.contact-info .ci:last-child{border-bottom:0;}
.contact-info .ci svg{width:24px;height:24px;color:var(--accent-2);flex:0 0 auto;margin-top:3px;}
.contact-info .ci b{font-family:var(--sub);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:3px;}
.contact-info .ci a,.contact-info .ci span{color:var(--ink);font-size:1.05rem;overflow-wrap:anywhere;}
.contact-info .ci>div{min-width:0;}
.contact-form{position:relative;background:linear-gradient(180deg,var(--surface),var(--bg));border:1px solid var(--line);border-radius:8px;padding:clamp(26px,3vw,36px);overflow:hidden;}
/* 7.1 gradient top accent bar: ties the form card to the brand button */
.contact-form::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
/* 7.1 expectation-setter: truthful for a static pixel-capture form, no auto-reply (BUILD-STANDARDS 9c) */
.form-expect{margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid var(--line-soft);}
.form-expect b{display:block;font-family:var(--h);font-weight:400;font-size:1.6rem;letter-spacing:.02em;line-height:1.04;color:var(--ink);}
.form-expect span{display:block;font-size:.98rem;line-height:1.5;color:var(--muted);margin-top:7px;}
.contact-form .field{margin-bottom:16px;}
/* 8.6 form labels are a conversion surface: hold them at the 14px floor (was .82rem ~13.1px) */
.contact-form label{display:block;font-family:var(--sub);font-weight:600;font-size:.875rem;color:var(--muted);margin-bottom:6px;}
.contact-form input,.contact-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--ink);
  padding:12px 14px;font-family:var(--b);font-size:1rem;}
/* outline:none is paired with an explicit ember focus ring (3.8), never bare */
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(240,161,42,.22);}
.contact-form textarea{min-height:130px;resize:vertical;}
.contact-form .btn-primary{width:100%;justify-content:center;font-size:1rem;padding:15px;}
.form-note{font-size:.82rem;color:var(--muted-2);margin-top:12px;text-align:center;}
/* 7.4 real-proof line under a standalone brand-button CTA (e.g. work-page gallery foot) */
.cta-note{font-family:var(--sub);font-weight:600;font-size:.86rem;letter-spacing:.03em;color:var(--muted-2);margin:16px auto 0;max-width:100%;display:flex;flex-wrap:nowrap;justify-content:center;gap:6px 10px;}
.cta-note span{display:inline-flex;align-items:center;white-space:nowrap;}
.cta-note span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.7;margin-right:10px;}
@media(max-width:600px){
  /* mobile: stack the CTA trust signals on separate lines, no dot separators */
  .cta-band .proof, .cta-note{flex-direction:column;flex-wrap:nowrap;gap:6px;}
  .cta-band .proof span+span::before, .cta-note span+span::before{display:none;}
}
.form-ok{display:none;background:rgba(31,64,40,.4);border:1px solid #2e6b3f;border-radius:6px;padding:14px;color:#bfe6c9;margin-bottom:16px;}
.form-ok.show{display:block;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* about split */
.about-split{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);align-items:center;}
@media(min-width:840px){.about-split{grid-template-columns:.9fr 1.1fr;}}
/* 4.6 framed-image depth on the About-page founder figure (same metallic ring + ember glow + bevel) */
.about-split .am{border-radius:8px;overflow:hidden;border:1px solid var(--steel);position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(240,161,42,.12),
    0 22px 46px -28px rgba(0,0,0,.85),0 12px 32px -20px rgba(240,161,42,.24);
  transition:border-color .22s ease,box-shadow .22s ease;}
.about-split .am img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease;}
/* 4.7 bottom-fade overlay grounds the founder photo into the dark page */
.about-split .am::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,7,10,.6),transparent);}
.about-split .am:hover{border-color:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(240,161,42,.2),
    0 26px 52px -28px rgba(0,0,0,.9),0 14px 36px -20px rgba(240,161,42,.34);}
.about-split .am:hover img{transform:scale(1.03);}
/* 8.2 owner sign-off (BRAND ADAPTATION): the skill suggests a handwritten-script signature, but the
   locked brand forbids script/decorative fonts. Satisfied instead with a condensed-display (Bebas)
   "Andrew Hughes" name over an ember rule, a confident industrial sign-off, not a cursive flourish. */
.signoff{margin-top:30px;padding-top:22px;}
.signoff .sig-name{display:inline-block;font-family:var(--h);font-weight:400;font-size:clamp(2.2rem,4vw,3rem);
  line-height:.9;letter-spacing:.03em;color:var(--ink);position:relative;padding-bottom:10px;}
.signoff .sig-name::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:2px;
  transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),var(--accent-2) 70%,transparent);
  box-shadow:0 0 12px -2px rgba(240,161,42,.5);}
/* 8.3 delight (about): the ember sign-off rule wipes in left-to-right the first time the bio reveals.
   Full-width by default for no-JS / reduced-motion; the wipe only runs once on reveal. */
.is-visible .signoff .sig-name::after{animation:ruleWipe .7s ease-out .3s 1 both;}
@keyframes ruleWipe{0%{transform:scaleX(0);}100%{transform:scaleX(1);}}
@media(prefers-reduced-motion:reduce){.is-visible .signoff .sig-name::after{animation:none!important;}}
.signoff .sig-role{display:block;margin-top:12px;font-family:var(--sub);font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);}

/* service section image (under the label): 4.6 rest-state metallic ring + ember glow + bevel */
.svc-img{margin-top:16px;border-radius:6px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(240,161,42,.1),
    0 16px 32px -26px rgba(0,0,0,.8),0 9px 24px -20px rgba(240,161,42,.18);
  transition:border-color .22s ease,box-shadow .22s ease;}
.svc-img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .5s ease;}
.svc-img:hover{border-color:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(240,161,42,.2),0 16px 32px -24px rgba(0,0,0,.85),0 10px 28px -18px rgba(240,161,42,.3);}
.svc-img:hover img{transform:scale(1.04);}

/* service-area map embed */
.map-embed{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin-top:8px;}
.map-embed iframe{width:100%;height:clamp(300px,44vh,460px);border:0;display:block;}
.map-embed::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none;}

/* featured project / spotlight */
.spotlight{background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.spot-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3.4vw,48px);align-items:center;margin-top:6px;}
@media(min-width:880px){.spot-grid{grid-template-columns:0.94fr 1fr;}}
/* featured before/after: 4.6 metallic ring + ember glow + bevel atop the existing dark drop */
.spot-media{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);cursor:zoom-in;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(240,161,42,.12),
    0 26px 64px -30px rgba(0,0,0,.82),0 14px 40px -22px rgba(240,161,42,.22);
  transition:border-color .22s ease,box-shadow .22s ease;}
.spot-media img{width:100%;height:auto;display:block;transition:transform .6s ease;}
/* bonus (category-leader refinement): a thin top light-catch hairline so the frame reads as a
   dimensional metal bevel catching light from above, not a flat border. */
.spot-media::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 28%,rgba(240,161,42,.3) 72%,transparent);}
/* 4.7 bottom-fade overlay (sits under the zoom affordance, above the image) */
.spot-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;z-index:1;
  background:linear-gradient(0deg,rgba(5,7,10,.5),transparent);}
.spot-media:hover{border-color:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(240,161,42,.2),
    0 26px 64px -30px rgba(0,0,0,.86),0 16px 44px -22px rgba(240,161,42,.32);}
.spot-media:hover img{transform:scale(1.03);}
.spot-media .spot-tag,.spot-media .zoom{z-index:2;}
.spot-media .zoom{position:absolute;right:14px;bottom:14px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(5,7,10,.6);border:1px solid rgba(248,249,249,.22);color:var(--ink);opacity:0;transition:opacity .25s ease;}
.spot-media .zoom svg{width:20px;height:20px;}
.spot-media:hover .zoom,.spot-media:focus-visible .zoom{opacity:1;}
.spot-tag{position:absolute;top:14px;left:14px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:rgba(5,7,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(248,249,249,.22);padding:7px 12px;border-radius:4px;}
.spot-copy>p{color:var(--muted);margin:0 0 15px;font-size:1.05rem;line-height:1.72;}
.spot-copy .checklist{margin:20px 0 26px;}
/* ---- premium stat row (Wave 2 · §2.3): Bebas numerals + accent bar above + small label ----
   .stat-row is the canonical container; .spot-stat is the inline featured-project variant. */
.stat-row{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);margin:6px 0 4px;}
.stat-row .stat{position:relative;padding-top:14px;}
.stat-row .stat::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px;}
.stat-row .stat b{font-family:var(--h);font-size:clamp(2.8rem,5vw,3.9rem);line-height:.92;color:var(--ink);letter-spacing:.5px;display:block;}
.stat-row .stat b .u{color:var(--accent-2);}
.stat-row .stat span{font-family:var(--sub);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);display:block;margin-top:4px;}
@media(max-width:600px){
  /* mobile: two stats on the first row, one on the second, equal columns; labels wrap under each number */
  .stat-row{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:26px;}
}
.spot-stat{position:relative;display:inline-flex;align-items:baseline;gap:9px;margin-bottom:18px;padding-top:13px;}
.spot-stat::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px;}
.spot-stat b{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;line-height:1;color:var(--accent-2);letter-spacing:.5px;}
.spot-stat span{font-family:'Montserrat',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* ---- legal pages (Privacy Policy): readable long-form, brand-consistent ---- */
.legal{max-width:74ch;}
.legal-updated{font-family:var(--sub);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:30px;}
.legal h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:36px 0 12px;}
.legal h2:first-of-type{margin-top:0;}
.legal p{color:var(--muted);max-width:74ch;}
.legal .checklist{margin-top:14px;}
.legal .checklist li{color:var(--muted);}
.legal-link{color:var(--accent-2);font-weight:600;overflow-wrap:anywhere;}
.legal .checklist li{min-width:0;}
.legal-link:hover{color:var(--accent);text-decoration:underline;}
.footer-bottom a:hover{color:var(--accent-2);}

/* ---- print (Section L): hide the sticky call bar, fixed header, morph + lightbox;
   flatten the dark theme to ink-on-white so a printed page is legible and ink-light. ---- */
@media print{
  .callbar,.site-header,.morph-logo,.lightbox,.menu-toggle,.mobile-nav,.gallery-nav,.hero-logo-slot{display:none!important;}
  html,body{background:#fff!important;color:#111!important;}
  body{background-image:none!important;}
  a{color:#111!important;text-decoration:underline;}
  .hero,.page-hero{min-height:0!important;padding:24px 0!important;}
  .hero-media,.page-hero .pbg,.hero-media::before,.hero-media::after,.page-hero .pbg::after{display:none!important;}
  .hero .wrap,.page-hero .wrap{padding:0 24px!important;}
  h1,h2,h3,h4,.hero-copy h1,.page-hero h1{color:#111!important;text-shadow:none!important;}
  .lede,p,.prose p,.spot-copy>p,.contact-info .ci a,.contact-info .ci span{color:#222!important;text-shadow:none!important;}
  .cta-band{background:#f3f3f3!important;}
  .cta-band h2,.cta-band p{color:#111!important;}
  .cta-band .btn{background:#111!important;color:#fff!important;}
  section{padding:18px 0!important;}
  [data-reveal],[data-reveal-group]>*{opacity:1!important;transform:none!important;}
}