:root{
  --sand:#FBF8F2;--tan:#F4EFE4;--tan-deep:#E8DFCE;
  --blue:#A9C4D8;--blue-pale:#CFE0EC;--blue-faint:#E7F0F6;
  --mid:#2E5D82;--navy:#0F2233;--black:#0A1722;--body:#4E6377;--fink:#20456A;
  --ease:cubic-bezier(.22,1,.36,1);
  --r-lg:26px;--r-md:18px;--r-sm:12px;
  --gut:clamp(20px,4vw,56px);--secpad:clamp(70px,9.5vw,140px);
  --curve-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2060%20V34%20C%20300%2034%20380%2014%20620%2014%20C%20860%2014%20940%2032%201200%2032%20V60%20Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
  --curve-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2060%20V16%20C%20260%2016%20340%2036%20600%2036%20C%20860%2036%20950%2018%201200%2018%20V60%20Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
  --curve-c:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2060%20V36%20C%20420%2036%20620%2016%201200%2014%20V60%20Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
  --curve-d:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2060%20V14%20C%20580%2016%20780%2036%201200%2036%20V60%20Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
  /* Aliases for names later sections were written against. Without these,
     every declaration using them was invalid and silently dropped - which on a
     `font:` shorthand means the element inherits its size. That is why the
     spec heading rendered huge and the type looked inconsistent. */
  --sans:Inter,system-ui,sans-serif;
  --serif:'Barlow Condensed',Impact,sans-serif;
  --paper:#FFFFFF;--cream:#FBF8F2;--ink:#0F2233;
  --ink-04:rgba(15,34,51,.04);--ink-05:rgba(15,34,51,.05);
  --ink-10:rgba(15,34,51,.10);--ink-12:rgba(15,34,51,.12);
  --ink-25:rgba(15,34,51,.25);--ink-50:rgba(15,34,51,.52);
  --ink-55:rgba(15,34,51,.58);--ink-60:rgba(15,34,51,.62);
  --ink-65:rgba(15,34,51,.68);--ink-70:rgba(15,34,51,.74);
  --ink-75:rgba(15,34,51,.80);
  --accent:linear-gradient(135deg,#E7F0F6 0%,#CFE0EC 38%,#A9C4D8 100%);
  --accent-solid:#A9C4D8;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  /* section-edge silhouettes (Johnson-style two-layer masks) */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background-color:#2E5D82;-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{background-color:#2E5D82;color:var(--body);font:400 17px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;position:relative}

img{max-width:100%;display:block}
a{color:var(--mid);text-decoration:none}
h1,h2,h3,.dsp{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;line-height:.96;letter-spacing:.005em;text-transform:uppercase;color:var(--navy)}
::selection{background:var(--blue);color:var(--navy)}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:var(--noise);background-size:240px 240px;z-index:0}
section{position:relative}
section>.wrap{position:relative;z-index:1}
/* pulled-up sculpted top edge: section keeps its own bg, previous section shows through the cutout */
/* soft curved section joins: a single smooth ease, ~16px of travel, never a corner */
.edged{--eh:clamp(26px,3vw,54px);--seam:var(--curve-a);position:relative;z-index:1;margin-top:calc(-1*var(--eh));
  -webkit-mask-image:var(--seam),linear-gradient(#000,#000);mask-image:var(--seam),linear-gradient(#000,#000);
  -webkit-mask-size:100% var(--eh),100% calc(100% - var(--eh) + 1px);mask-size:100% var(--eh),100% calc(100% - var(--eh) + 1px);
  -webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat}
.edged.e2{--seam:var(--curve-b)}.edged.e3{--seam:var(--curve-c)}.edged.e4{--seam:var(--curve-d)}

/* ---------- eyebrow ---------- */
.eyebrow{font:600 12px/1 Inter,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--mid);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--blue);flex:0 0 auto}
.sec-h2{font-size:clamp(34px,4.6vw,62px);margin-bottom:14px;text-wrap:balance}
/* ---- section masthead: rule-first, index numeral at the shoulder, lede on the same
   baseline as the title. Deliberately NOT the centred eyebrow-over-title pattern. ---- */
.shead{margin-bottom:clamp(34px,4.4vw,60px)}
.shead-top{display:flex;align-items:center;gap:20px;margin-bottom:clamp(20px,2.4vw,34px)}
.shead-top .rule{flex:1 1 auto;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.shead.in .shead-top .rule,.reveal.in .shead-top .rule{transform:none}
.shead-top .skick{flex:0 0 auto;font:800 clamp(12px,1.15vw,15px)/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--mid);white-space:nowrap}
.shead-body.solo{grid-template-columns:1fr}
#why .shead-body{grid-template-columns:1fr}
#why .shead-body .lede{padding-top:14px}
.shead-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,3.4vw,56px);align-items:start}
.shead-body h2{margin:0}
.shead-body .lede{margin:0;padding-top:.55em;font-size:clamp(15.5px,1.5vw,17.5px)}
#contact .shead-top{justify-content:center}
#contact .shead-top .rule{max-width:120px;flex:0 0 120px}
#contact .shead-body{grid-template-columns:1fr;justify-items:stretch;text-align:center;gap:14px}
#contact .shead-body .lede{padding-top:0;margin:0 auto}
#contact .sec-h2{max-width:none;margin-left:auto;margin-right:auto}
.shead.on-dark .skick{color:var(--blue)}
@media(max-width:900px){.shead-body,.shead-body.solo,#contact .shead-body{grid-template-columns:1fr;gap:16px}.shead-body .lede{padding-top:0}}
.lede{font-size:clamp(15px,1.6vw,19px);max-width:580px}
.ghost{position:absolute;top:clamp(20px,4.5vw,60px);right:clamp(8px,3vw,56px);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(80px,14vw,200px);line-height:1;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(15,34,51,.065);pointer-events:none;user-select:none;white-space:nowrap;z-index:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 13px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;padding:16px 28px;border-radius:100px;border:0;cursor:pointer;transition:.35s var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--mid)}
.btn-blue{background:var(--blue);color:var(--black)}
.btn-blue:hover{background:var(--blue-pale)}
.btn-ghost{border:1.5px solid rgba(15,34,51,.28);color:var(--navy);background:transparent}
.btn-ghost:hover{border-color:var(--mid);color:var(--mid)}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost.on-dark:hover{border-color:var(--blue);color:var(--blue-pale)}
.btn-lg{padding:19px 34px;font-size:14px}
@media(hover:hover) and (pointer:fine){.btn{will-change:transform}}

/* ---------- loader: garage door lift ---------- */
html.loading,html.loading body{overflow:hidden;height:100%;touch-action:none}
#loader{position:fixed;inset:0;z-index:999;pointer-events:none;background-color:#E9E1D0;perspective:1400px;perspective-origin:50% 0%}
html.loading body{background-color:#E9E1D0!important}
/* four door sections, each with an equal inset frame, separated by a hairline
   joint so the stack still reads as panels. Strokes kept very light. */
#loader .slat{position:absolute;left:0;right:0;height:25%;
  background-color:#F0EADC;
  background-image:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 14%,rgba(15,34,51,.035) 88%,rgba(15,34,51,.075) 100%);
  border-bottom:1px solid #E2DACA;transform-origin:50% 0%;backface-visibility:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(15,34,51,.05);
  transform:translateY(-102vh);transition:transform .8s var(--ease)}
#loader .slat:last-child{border-bottom:0}
#loader .slat::before{content:"";position:absolute;inset:20px;border-radius:3px;
  border:1px solid #E7E0D0;
  box-shadow:inset 0 2px 6px rgba(15,34,51,.055),inset 0 -2px 4px rgba(255,255,255,.7),
    0 1px 0 rgba(255,255,255,.65);}
@media(max-width:900px){#loader .slat::before{inset:13px}}
@media(max-width:560px){#loader .slat::before{inset:10px}}
#loader.shut .slat{transform:none}
/* a hairline of shade at each joint so the panels read as separate sections
   when they hinge, instead of one printed sheet */
#loader .slat::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background:linear-gradient(180deg,rgba(15,34,51,.09),transparent);opacity:0;
  transition:opacity .5s var(--ease);pointer-events:none}
#loader.done .slat::after{opacity:1}
/* once the door starts lifting the ground goes clear so the page shows through */
#loader.done{background-color:transparent!important;transition:background-color .25s linear}
#loader .slat:nth-child(1){top:0}#loader .slat:nth-child(2){top:25%}#loader .slat:nth-child(3){top:50%}#loader .slat:nth-child(4){top:75%}
#loader .lg{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s ease,transform .6s var(--ease)}
/* margin:0 auto is required — the global img rule sets display:block, which is why it sat left */
#loader .lg .lstack{text-align:center}
#loader .lg img{display:block;width:clamp(230px,30vw,420px);margin:0 auto;filter:drop-shadow(0 18px 34px rgba(15,34,51,.28))}
#loader .lt{margin-top:clamp(20px,2.4vw,30px);font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:min(5.5vw,74px);line-height:.95;letter-spacing:.01em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
#loader .lt i{display:inline-block;font-style:normal;margin-right:.26em}
#loader .lt i:last-child{margin-right:0}


#loader .lt i:nth-child(3){color:var(--mid)}
/* progress bar sits along the very bottom of the door */
#loader .bar{position:absolute;left:0;right:0;bottom:0;height:12px;width:auto;margin:0;border-radius:0;background:var(--tan-deep);overflow:hidden;box-shadow:inset 0 2px 4px rgba(15,34,51,.2)}
#loader .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue-pale),var(--blue),var(--mid));animation:loadbar 2.3s var(--ease) .3s forwards}
@media(max-width:820px){
  #loader .lt{white-space:normal;font-size:clamp(2.2rem,9vw,3.6rem)}
  #loader .lt i{display:block;margin-right:0}
}
#loader .lg{opacity:0;transition:opacity 1s ease}
#loader.lit .lg{opacity:1;transition:opacity .4s ease}

#loader.done .slat{transform:translateY(-108vh) rotateX(72deg) scale(.94)}
#loader.done .slat{transition:transform 1.05s cubic-bezier(.5,0,.32,1)}
#loader.done .slat:nth-child(1){transition-delay:0s}#loader.done .slat:nth-child(2){transition-delay:.09s}#loader.done .slat:nth-child(3){transition-delay:.18s}#loader.done .slat:nth-child(4){transition-delay:.27s}#loader.done .slat:nth-child(5){transition-delay:.36s}

@keyframes loadbar{to{width:100%}}
@keyframes loaderIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- progress ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--mid));z-index:120;transition:width .1s linear}

/* ---------- nav (dark glass when scrolled) ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:110;padding:calc(12px + env(safe-area-inset-top,0px)) 0 12px;transition:.45s var(--ease);overflow:visible}
#nav .wrap,#nav .bar,#nav .logo{overflow:visible}
/* no gradient scrim: transparent over the hero, crisp solid bar once scrolled */
#nav::after{content:"";position:absolute;inset:0;background:#2E5D82;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}
#nav.solid{background:#2E5D82;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:16px;box-shadow:0 2px 0 var(--blue)}
/* the bar is pale once scrolled, so the links have to flip to navy */
#nav.solid::after{opacity:1}
/* The bar gets more width than a content section, because it carries three
   things across it. At 1280px on a wide screen the logo, the links and the
   callback button were crowded into the middle with unused space either side -
   which is why the menu ended up almost touching the logo.

   This is the only header on the site, so widening it here moves it on every
   page, scrolled or not. The only thing that varies per page is the link
   colour, handled by `.on-cream`. */
#nav .wrap{max-width:1280px}   /* same as .wrap, so the logo lines up with the hero */
/* Logo stays big; the menu is compressed instead. Less air between the words,
   less between Contact and the button, and a slimmer button. */
#nav .bar{display:flex;align-items:center;gap:clamp(18px,2.4vw,42px)}
#nav .nav-links{gap:clamp(2px,.5vw,8px);margin-left:auto;margin-right:clamp(6px,1.2vw,18px)}
#nav .logo{display:block;line-height:0;flex:0 0 auto}
#nav .logo img{transition:transform .5s var(--ease),filter .5s var(--ease)}
#nav .logo:hover .badge{transform:translateY(-4px) rotate(-2deg) scale(1.04);filter:drop-shadow(0 8px 18px rgba(6,14,22,.42))}
#nav .logo:hover .wordmark{transform:translateY(-2px) scale(1.03)}
#nav .badge{height:clamp(100px,10.8vw,140px);width:auto;transition:.4s var(--ease);filter:drop-shadow(0 5px 14px rgba(6,14,22,.34))}
#nav .wordmark{display:none;height:50px;width:auto}
@media(max-width:760px){#nav .wordmark{height:44px}}
#nav.solid .badge{display:none}
#nav.solid .wordmark{display:block}
#nav.menu-open .btn-call{display:none!important}
#nav.menu-open .badge{display:block!important}
#nav.menu-open .wordmark{display:none!important}
#nav.menu-open{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
#nav.menu-open::after{opacity:0}

/* ---------- dropdown + mega panel ----------
   Opens on CLICK, never hover. Hover menus fire when the cursor merely crosses
   the bar, are unusable on touch laptops, and are invisible to keyboards.

   Every rule below is scoped under #nav so it outranks `.nav-links a`, which
   paints white type with a hero drop-shadow. Unscoped, those two rules tie on
   specificity and the later one wins - which is exactly how the first version
   ended up with glowing white links on a cream panel. */
#nav .hasmenu{position:relative;display:flex;align-items:center}
#nav .nav-links .mtrig{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  cursor:pointer;font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;padding:6px 0;position:relative;
  text-shadow:0 2px 14px rgba(6,14,22,.85),0 1px 3px rgba(6,14,22,.6)}
#nav .nav-links .mtrig::after{content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;
  background:var(--blue);transition:width .35s var(--ease),left .35s var(--ease)}
#nav .nav-links .mtrig:hover::after,
#nav .nav-links .mtrig[aria-expanded="true"]::after{width:100%;left:0}
#nav .mtrig .chev{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease);opacity:.8}
#nav .mtrig[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:1}

#nav .mpanel{position:absolute;top:calc(100% + 14px);z-index:120;
  background:#fff;border:1px solid var(--tan-deep);border-radius:14px;
  box-shadow:0 26px 64px rgba(6,14,22,.26);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
#nav .mpanel.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* Hover opens the panel on a real pointer, with a short delay so it does not
   flash open every time the cursor crosses the bar on its way somewhere else.
   Keyboard focus opens it instantly. Below 900px the panel is display:none and
   the mobile menu takes over, so touch never depends on hover. */
@media(hover:hover) and (pointer:fine){
  #nav .hasmenu:hover .mpanel,#nav .hasmenu:focus-within .mpanel{
    opacity:1;visibility:visible;pointer-events:auto;transition-delay:.12s}
  #nav .hasmenu:hover .mpanel.mp-sm,#nav .hasmenu:focus-within .mpanel.mp-sm{transform:none}
  #nav .hasmenu:hover .mpanel.mp-lg,#nav .hasmenu:focus-within .mpanel.mp-lg{transform:translate(-50%,0)}
  #nav .hasmenu:hover .chev{transform:rotate(180deg);opacity:1}
  #nav .hasmenu:hover .mtrig::after{width:100%;left:0}
  /* a bridge across the gap, so the cursor can travel from label to panel */
  #nav .hasmenu::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
}

#nav .mpanel.mp-sm{left:-18px;width:280px;padding:16px}
/* Bridge: the panel sits below the bar, and without something to travel
   through, moving the mouse toward it leaves the trigger and closes it. */
#nav .mpanel::before{content:"";position:absolute;left:0;right:0;top:-8px;
  height:8px}
#nav .mpanel.mp-lg{margin-top:0}
/* Centred on the viewport. It was absolutely positioned inside its own nav
   item, so "left:50%" meant the middle of the words "New Garage Doors" - which
   is what threw the whole panel off to the left. Fixed positioning with the
   nav's measured height keeps it under the bar and centred on the page. */
#nav .mpanel.mp-lg{position:fixed;top:var(--navh,120px);
  left:50%;transform:translate(-50%,-6px);width:min(1090px,calc(100vw - 48px));
  padding:28px 34px 34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 330px;
  gap:0 clamp(24px,2.6vw,40px);align-items:start}
#nav .mpanel.mp-lg.open{transform:translate(-50%,0)}
#nav .mp-lg>div+div:not(.mp-feat){border-left:1px solid var(--tan-deep);
  padding-left:clamp(24px,2.6vw,40px)}

/* The master page, made obvious. Without this the only way into the parent was
   the nav label itself, which reads as a menu trigger rather than a link.

   Note the selector weight: `#nav .mpanel a` (id+class+element) outranks
   `#nav .mp-all` (id+class), so the generic rule was winning and forcing
   display:block - which is what collapsed the flex gap and ran the title, the
   description and the arrow into each other. Matching its weight fixes it
   without a pile of !important. */
#nav .mpanel a.mp-all{display:flex;align-items:center;gap:20px;
  grid-column:1/-1;
  margin:0 0 26px;padding:18px 24px;border-radius:10px;
  background:#319600;color:#fff;transition:background .25s var(--ease)}
#nav .mpanel a.mp-all:hover{background:#3EAE0B;color:#fff}
#nav .mp-all b{flex:0 0 auto;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:18px;line-height:1;text-transform:uppercase;letter-spacing:.02em;color:#fff}
#nav .mp-all span{flex:1;min-width:0;font:400 12.5px/1.45 Inter,sans-serif;letter-spacing:0;
  text-transform:none;color:rgba(255,255,255,.66)}
#nav .mp-all i{flex:0 0 auto;font-style:normal;font-size:18px;line-height:1;
  color:#fff;transition:transform .3s var(--ease)}
#nav .mp-all .mp-thumb{flex:0 0 auto;display:flex;gap:5px}
#nav .mp-all .mp-thumb img{width:52px;height:38px;object-fit:cover;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.35);display:block}
#nav .mpanel a.mp-all:hover i{transform:translateX(5px)}
#nav .mp-sm a.mp-all{margin:0 0 14px}
#nav .mp-sm .mp-all b{font-size:16px}

#nav .mp-h{font:800 9.5px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);margin:0 0 14px;padding-bottom:13px;
  border-bottom:1px solid var(--tan-deep)}

/* The columns are a flow of block links. With `line-height:1` and 12px of
   padding, the hover pill is taller than the row it sits in, so it printed
   over the names above and below it. The column is now a flex stack with a
   real gap, the pill has room around the words, and there is space left for
   the highlight to sit in without touching anything. */

#nav .mpanel a{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:16.5px;line-height:1.2;letter-spacing:.015em;text-transform:uppercase;
  color:var(--navy);text-shadow:none;
  padding:13px 24px;margin:0 0 2px;border-radius:9px;
  transition:background .2s var(--ease),color .2s var(--ease)}
#nav .mp-lg>div>a:last-child{margin-bottom:0}
#nav .mpanel a:hover{background:var(--blue-faint);color:var(--fink)}
#nav .mpanel a::after{display:none}
#nav .mp-more{border-top:1px solid var(--tan-deep);margin-top:16px;padding-top:14px}
#nav .mp-h{margin-bottom:6px;padding-bottom:12px}
#nav .mp-lg>div+div:not(.mp-feat){padding-left:clamp(18px,2vw,30px)}
#nav .mp-lg{padding:clamp(20px,2.2vw,28px);gap:clamp(18px,2vw,30px)}

#nav .mp-feat{padding-left:clamp(24px,2.6vw,40px);border-left:1px solid var(--tan-deep)}
#nav .mp-ph{display:block;border-radius:10px;overflow:hidden;background:var(--navy);
  aspect-ratio:4/3}
#nav .mp-ph img{width:100%;height:100%;object-fit:cover;display:block}
#nav .mp-cap{display:block;margin-top:10px;font:700 9.5px/1.4 Inter,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:var(--body);text-shadow:none}

@media(max-width:1220px){
  #nav .mpanel.mp-lg{grid-template-columns:repeat(3,minmax(0,1fr))}
  #nav .mp-feat{display:none}
}
@media(max-width:900px){#nav .hasmenu .mpanel{display:none}}

/* mobile accordion inside the existing full-screen menu */
#mm .acc{display:flex;align-items:center;justify-content:space-between;gap:14px}
#mm .acc>a{flex:1}
#mm .accb{flex:0 0 auto;background:rgba(255,255,255,.08);border:1px solid rgba(169,196,216,.22);
  border-radius:10px;width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  transition:background .25s var(--ease)}
#mm .accb svg{width:15px;height:15px;stroke:var(--blue-pale);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
#mm .accb[aria-expanded="true"]{background:rgba(169,196,216,.2)}
#mm .accb[aria-expanded="true"] svg{transform:rotate(180deg)}
#mm .sub{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);
  border-left:2px solid var(--blue);margin-left:3px}
#mm .sub a{font-size:15px!important;padding:9px 0 9px 15px!important;
  color:rgba(255,255,255,.76)!important;border:0!important}
#mm .sub a:hover{color:#fff!important}

.nav-links{display:flex;gap:clamp(14px,1.5vw,22px);align-items:center;flex:0 0 auto}
.nav-links a{font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff;position:relative;padding:6px 0;text-shadow:0 2px 14px rgba(6,14,22,.85),0 1px 3px rgba(6,14,22,.6)}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;background:var(--blue);transition:width .35s var(--ease),left .35s var(--ease)}
.nav-links a:hover::after{width:100%;left:0}
.nav-cta{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* On a desktop, calling means picking up a phone; asking for a callback is one
   click. So the callback is the green primary here and Call Now is the quiet
   one. Mobile is the other way round and is left alone below 760px. */
#nav .btn-quiet{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);box-shadow:none}
#nav .btn-quiet:hover{background:#fff;border-color:#fff}
#nav .btn-quiet:hover .cl u,#nav .btn-quiet:hover .cl small{color:var(--navy)}
#nav .btn-quiet:hover svg{stroke:var(--navy)}
#nav.solid .btn-quiet{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
#nav.solid .btn-quiet:hover{background:#fff}
#nav .btn-cb{background:#319600;border-color:#3EAE0B;box-shadow:0 8px 24px rgba(20,70,0,.34);appearance:none;cursor:pointer}
#nav .btn-cb .cl u{color:#fff}
#nav .btn-cb .cl small{color:var(--blue-pale)}
#nav .btn-cb svg{stroke:#fff}
#nav.solid .btn-cb{background:#319600;border-color:#3EAE0B}
#nav .btn-quiet{display:none!important}
#nav .btn-cb{display:inline-flex}
/* single call button with the number stacked inside */
.btn-call{position:relative;overflow:hidden;padding:12px 28px;align-items:center;
  background:#319600;color:#fff;border:2px solid #3EAE0B;
  box-shadow:0 12px 28px rgba(15,34,51,.34);transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
/* light blue wipes across from the left on hover */
.btn-call .fill{position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(100deg,#3EAE0B,#4BC414);
  transform:translateX(-101%);transition:transform .5s var(--ease);z-index:0}
.btn-call:hover .fill{transform:none}
.btn-call svg,.btn-call .cl{position:relative;z-index:1}
.btn-call svg{stroke:#fff;transition:stroke .4s var(--ease)}
.btn-call:hover{border-color:var(--blue-pale)}
.btn-call:hover svg{stroke:#fff}
.btn-call .cl{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1;white-space:nowrap}
.btn-call .cl u{text-decoration:none;font:800 13px/1 Inter,sans-serif;letter-spacing:.09em;white-space:nowrap;color:#fff;transition:color .4s var(--ease)}
.btn-call .cl small{font:700 10px/1 Inter,sans-serif;letter-spacing:.01em;white-space:nowrap;color:var(--blue-faint);transition:color .4s var(--ease)}
.btn-call:hover .cl u{color:#fff}
.btn-call:hover .cl small{color:rgba(255,255,255,.85)}
#burger{display:none;align-items:center;gap:11px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:rgba(10,23,34,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1.5px solid rgba(169,196,216,.4);border-radius:100px;padding:13px 20px;cursor:pointer;font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:.35s var(--ease)}
body.menu-open #burger{background:var(--accent);border-color:transparent;color:var(--navy)}
@media(hover:hover) and (pointer:fine){#burger:hover{background:var(--accent);border-color:transparent;color:var(--navy)}}
/* icon reads as a garage door: three stacked panels that fold open */
#burger .bl{position:relative;width:20px;height:16px;flex:0 0 auto}
#burger .bl i{position:absolute;left:0;width:20px;height:3px;border-radius:1px;background:currentColor;transition:.4s var(--ease)}
#burger .bt-close{display:none}
body.menu-open #burger .bt-open{display:none}
body.menu-open #burger .bt-close{display:inline}
#burger .bl i:nth-child(1){top:0}
#burger .bl i:nth-child(2){top:6.5px;width:14px}
#burger .bl i:nth-child(3){top:13px;width:20px}
body.menu-open #burger .bl i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open #burger .bl i:nth-child(2){opacity:0;transform:translateX(-8px)}
body.menu-open #burger .bl i:nth-child(3){width:20px;transform:translateY(-6.5px) rotate(-45deg)}
/* One breakpoint for both, and early enough that the callback button always
   has room. Below this it is: logo, Request Callback, MENU. Nothing else. */
@media(max-width:1180px){.nav-links{display:none}#burger{display:inline-flex}}
@media(max-width:760px){
  #proof{min-height:0;padding:clamp(52px,11vw,80px) 0 clamp(48px,10vw,72px)}
  #proof .bg img{height:100%;object-position:center 65%}
  .jimquote{margin-top:clamp(26px,5vw,36px)}
  .jimquote blockquote{font-size:clamp(19px,5.2vw,24px)}
  .sig{font-size:clamp(34px,10vw,46px)}}
@media(min-width:761px) and (max-width:1080px){#burger{display:inline-flex}}

/* ---------- mobile menu (dark) ---------- */
#mm{position:fixed;inset:0;z-index:104;background-color:#2E5D82;clip-path:circle(0 at calc(100% - 60px) 60px);transition:clip-path .7s var(--ease);display:none;flex-direction:column;justify-content:flex-start;padding:calc(var(--mmpad) + env(safe-area-inset-top,0px)) 26px calc(26px + env(safe-area-inset-bottom,0px))}
#mm.mounted{display:flex}
#mm.open{clip-path:circle(150% at calc(100% - 60px) 60px);transition:clip-path .7s var(--ease)}
#mm nav{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1.1vh,12px);margin:0;padding:clamp(14px,3vh,30px) 0;position:relative}
#mm nav a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(1.9rem,7.4vw,3rem);line-height:1.1;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(22px);transition:.5s var(--ease);display:block}
#mm.open nav a{opacity:1;transform:none}
#mm.open nav a:nth-child(1){transition-delay:.08s}#mm.open nav a:nth-child(2){transition-delay:.13s}#mm.open nav a:nth-child(3){transition-delay:.18s}#mm.open nav a:nth-child(4){transition-delay:.23s}#mm.open nav a:nth-child(5){transition-delay:.28s}#mm.open nav a:nth-child(6){transition-delay:.33s}
#mm .mm-foot .btn{width:100%;padding:14px 12px;gap:11px}
#mm .mm-call{background:#319600;color:#fff;border:2px solid #3EAE0B;box-shadow:0 10px 24px rgba(20,70,0,.4)}
#mm .mm-call svg{stroke:#fff;flex:0 0 auto;width:20px;height:20px}
#mm .mm-call .cl{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1}
#mm .mm-call .cl u{text-decoration:none;font:800 17px/1 Inter,sans-serif;letter-spacing:.05em;color:#fff}
#mm .mm-call .cl small{font:700 13px/1 Inter,sans-serif;letter-spacing:.02em;white-space:nowrap;color:var(--blue-faint)}
@media(max-width:400px){#mm .mm-foot{grid-template-columns:1fr}#mm .mm-call .cl u,}
#mm .mm-foot{position:relative;flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;opacity:0;transform:translateY(18px);transition:.5s var(--ease) .38s}
#mm.open .mm-foot{opacity:1;transform:none}
html.lock,body.lock{overflow:hidden;height:100%;overscroll-behavior:none;touch-action:none}
#mm{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#mm.open{touch-action:pan-y}


/* mobile menu: tighter rhythm, and the footer block earns its space */
#mm{--mmpad:clamp(150px,34vw,196px)}
#mm nav a{padding:2px 0}
#mm .mm-foot{display:block}
#mm .acc .accb,#mm .sub{display:none!important}
#mm .mm-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#mm .mm-btns .btn{width:100%;padding:14px 12px;gap:11px}
#mm .mm-call{background:#319600;color:#fff;border:0}
#mm .mm-call svg{stroke:#fff;flex:0 0 auto;width:20px;height:20px}
#mm .mm-call .cl u{color:#fff;font-size:17px;letter-spacing:.06em}
#mm .mm-call .cl small{color:rgba(255,255,255,.82)}
/* the callback button reads as the same size and weight as Call Now - it was
   a small ghost button next to a big green one, which made it look optional */
#mm .mm-cb{background:rgba(255,255,255,.09);border:1.5px solid rgba(169,196,216,.45);
  color:#fff;font:800 17px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:none}
#mm .mm-cb svg{stroke:#fff;flex:0 0 auto;width:20px;height:20px}
#mm .mm-cb:hover{background:rgba(255,255,255,.16);border-color:var(--blue)}
#mm .mm-info{list-style:none;display:grid;gap:12px;margin:20px 0 0;
  padding:18px 0 0;border-top:1px solid rgba(169,196,216,.2)}
#mm .mm-info li{display:flex;align-items:flex-start;gap:12px}
#mm .mm-info svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;stroke:var(--blue)}
#mm .mm-info span{display:block;font:400 13px/1.45 Inter,sans-serif;color:rgba(255,255,255,.55)}
#mm .mm-info b{display:block;font:800 12.5px/1.3 Inter,sans-serif;letter-spacing:.05em;color:#fff;margin-bottom:2px}
#mm .mm-soc{display:flex;gap:10px;margin-top:18px}
#mm .mm-soc a{width:42px;height:42px;flex:0 0 auto;border:1.5px solid rgba(169,196,216,.34);border-radius:50%;
  display:grid;place-items:center;background:rgba(169,196,216,.07);color:rgba(255,255,255,.82);transition:.35s var(--ease)}
#mm .mm-soc svg{width:18px;height:18px;fill:currentColor}
#mm .mm-soc a:hover{background:var(--blue);color:var(--navy);border-color:var(--blue)}
@media(max-height:720px){
  #mm nav a{font-size:clamp(1.6rem,5.6vw,2.1rem)}
  #mm .mm-info{margin-top:14px;padding-top:14px;gap:9px}
  #mm .mm-soc{margin-top:13px}
}
@media(max-width:400px){#mm .mm-btns{grid-template-columns:1fr}}

/* ---------- hero: full-screen photo carousel ---------- */
#top{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#2E5D82;padding:calc(env(safe-area-inset-top,0px) + clamp(172px,19.5vh,220px)) 0 clamp(72px,10vh,110px)}
#top .slides{position:absolute;inset:0}
#top .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;will-change:opacity}
#top .slide.on{opacity:1}
#top .slide img{width:104%;height:104%;margin:-2% 0 0 -2%;object-fit:cover;transform:scale(1.04);filter:blur(5px) brightness(1.14) saturate(.92);transition:transform 8.5s linear}
#top .slide.on img{transform:scale(1.12)}
#top .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,34,51,.52) 0%,rgba(46,93,130,.34) 38%,rgba(46,93,130,.4) 66%,rgba(15,34,51,.6) 100%)}
#top .scrim::after{content:"";position:absolute;inset:0;background:radial-gradient(68% 58% at 50% 50%,rgba(46,93,130,.2) 0%,rgba(15,34,51,.3) 100%)}
#top .grain{z-index:2;opacity:.06;mix-blend-mode:overlay}
.hero-inner{position:relative;z-index:3;width:100%;text-align:center}
.hero-inner .eyebrow{color:var(--blue-pale);opacity:0;animation:rise .8s var(--ease) .5s forwards;justify-content:center}
.hero-inner .eyebrow::before{background:var(--blue)}
.hero-inner .eyebrow::after{content:"";width:30px;height:2px;background:var(--blue);flex:0 0 auto}
.hero-inner .eyebrow b{color:#fff;font-weight:800}
.hero-inner h1{color:#fff;font-size:clamp(40px,5vw,74px);margin-bottom:16px}
.hero-inner h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hero-inner h1 .w i{display:inline-block;font-style:normal;transform:translateY(115%);animation:wordUp .85s var(--ease) forwards}
.hero-inner h1 em{font-style:normal;color:#fff}
@keyframes wordUp{to{transform:none}}
.hero-inner .sub{color:rgba(255,255,255,.9);max-width:620px;margin:0 auto;font-size:clamp(15.5px,1.5vw,18px);opacity:0;animation:rise .9s var(--ease) 1.15s forwards}
.hero-inner .sub b{color:#fff;font-weight:700}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;opacity:0;animation:rise .9s var(--ease) 1.3s forwards}
/* quiet trust line: deliberately NOT pill-shaped, so it never competes with the CTAs */

/* award row under the hero trust line. Reuses the same PNGs as the badges
   section - known-good URLs - forced to white so they read on the photography
   and sit as one monochrome row rather than five mismatched logos. */
.hero-awards{display:none}
/* tablet: the video was dominating a narrower row, so hand width back to the copy */
@media(min-width:761px) and (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(22px,2.6vw,36px)}
  .hero-video{width:min(100%,560px);margin-left:auto}
}
@media(min-width:761px){
  /* row spans the same width as the trust line above it, edges aligned, with
     the logos distributed across it rather than bunched in the middle */
  .hero-awards{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
    gap:16px clamp(20px,2.4vw,40px);width:min(100%,1000px);margin:clamp(18px,2.2vw,28px) auto 0;
    padding-top:clamp(16px,2vw,24px);border-top:1px solid rgba(255,255,255,.16);
    opacity:0;animation:rise .9s var(--ease) 1.6s forwards}
  .hero-awards img{height:clamp(34px,3.1vw,42px);width:auto;max-width:none;display:block;
    filter:brightness(0) invert(1);opacity:.82;
    transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .hero-awards .crop{display:block;overflow:hidden}
  .hero-awards .crop img{height:100%}
  .hero-awards .crop.tc{height:clamp(43px,4vw,54px);aspect-ratio:4.494}
  .hero-awards .crop.hz{height:clamp(34px,3.1vw,42px);aspect-ratio:2.273}
}
@media(hover:hover) and (pointer:fine){
  .hero-awards img:hover,.hero-awards .crop:hover img{opacity:1}
}
.hero-trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;width:min(100%,1000px);margin-left:auto;margin-right:auto;margin-top:clamp(38px,4.4vw,58px);opacity:0;animation:rise .9s var(--ease) 1.48s forwards}
.hero-trust span{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hero-trust span b{color:#fff;font-weight:800;letter-spacing:.14em}
.hero-trust svg{width:14px;height:14px;flex:0 0 auto;stroke:var(--blue);fill:none;stroke-width:2.2}
.hero-trust i{width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:.7;flex:0 0 auto}
@media(max-width:620px){.hero-trust i{display:none}.hero-trust{gap:10px 16px}.hero-trust span{font-size:10.5px;letter-spacing:.1em}}
.chip{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 Inter,sans-serif;letter-spacing:.03em;color:#fff;background:rgba(10,23,34,.45);border:1px solid rgba(169,196,216,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:100px;padding:10px 16px}
.chip svg{width:15px;height:15px;flex:0 0 auto}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero-dots{position:absolute;right:clamp(14px,2.6vw,34px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:4}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s;padding:0}
.hero-dots button.on{background:var(--blue);transform:scale(1.4);box-shadow:0 0 0 4px rgba(169,196,216,.25)}
.scrollcue{position:absolute;bottom:calc(clamp(16px,3vh,32px) + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:4;opacity:0;animation:rise 1s var(--ease) 2s forwards}
.scrollcue i{display:block;width:24px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:14px;position:relative}
.scrollcue i::after{content:"";position:absolute;top:7px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--blue);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(12px)}100%{opacity:0}}
@media(max-width:760px){.hero-dots{display:none}.scrollcue{display:none}}

/* ---------- service badge carousel ---------- */
.marquee{position:relative;background-color:#8FB2CE;background-image:linear-gradient(172deg,#E3EDF4 0%,#C4DAEA 38%,#A9C4D8 72%,#8FB2CE 100%);
  padding:calc(clamp(46px,5.6vw,76px) + var(--eh,0px)) 0 clamp(46px,5.4vw,72px);overflow:hidden}
.marquee::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 78% 110% at 50% 0%,rgba(255,255,255,.62),transparent 64%);pointer-events:none}
.marquee .mhead{position:relative;text-align:center;font:800 clamp(12px,1.15vw,15px)/1 Inter,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#1B4468;margin-bottom:clamp(26px,3.2vw,42px)}
/* drag or wheel to scroll; the auto-drift pauses while you interact */
.btrack{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;padding:clamp(40px,4.6vw,62px) 0 clamp(46px,5vw,68px)}
.brow{display:flex;align-items:flex-start;gap:clamp(22px,2.8vw,46px);width:max-content;will-change:transform;
  animation:bslide var(--bdur,70s) linear infinite}
/* --bshift is measured in JS: the exact width of one copy of the row, so the
   loop point is seamless. -50% would be short by half a gap and visibly jump. */
@keyframes bslide{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--bshift,50%)))}}
@media(hover:hover) and (pointer:fine){.btrack:hover .brow{animation-play-state:paused}}
.btrack.dragging{cursor:grabbing}
.btrack.dragging .brow{animation:none!important}
@media(prefers-reduced-motion:reduce){.brow{animation:none}}
.bitem{width:clamp(190px,18vw,268px);flex:0 0 auto;text-align:center;transform-origin:center center;position:relative;
  transition:transform .7s cubic-bezier(.22,1,.36,1);user-select:none;-webkit-user-drag:none}
.bitem img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 8px 16px rgba(15,34,51,.16));transition:filter .7s cubic-bezier(.22,1,.36,1)}
.bitem b{display:block;margin-top:16px;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(19px,1.8vw,24px);line-height:1.05;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);
  transition:color .7s ease}
.bitem span{display:block;margin-top:7px;font:400 13px/1.5 Inter,sans-serif;color:rgba(15,34,51,.66);
  max-width:24ch;margin-left:auto;margin-right:auto;transition:color .7s ease}
/* one gentle scale on the badge under the cursor. No sibling shuffling, no
   dimming: moving across the row should feel calm, not busy. */
@media(hover:hover) and (pointer:fine){
  .bitem:hover{z-index:2}
  .bitem:hover img{filter:drop-shadow(0 14px 24px rgba(15,34,51,.24))}
  .bitem:hover b{color:var(--mid)}
  .bitem:hover span{color:rgba(15,34,51,.9)}
}
@media(max-width:760px){.bitem{width:clamp(168px,46vw,208px)}
  .bitem b{font-size:19px}.bitem span{font-size:12px}}


/* ---------- credentials ---------- */
.badges{position:relative;background:var(--sand);padding-top:clamp(86px,9.5vw,150px);padding-bottom:clamp(64px,8vw,112px);padding-left:0;padding-right:0;overflow:hidden}
.badges::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(169,196,216,.3),transparent 68%);pointer-events:none}
.badges .wrap{position:relative}
.badges .cap{width:100%;text-align:center;font:800 clamp(12px,1.15vw,15px)/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);margin-bottom:clamp(34px,4.2vw,54px)}
.cred-row{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.32fr);
  gap:clamp(12px,1.6vw,20px);align-items:stretch}
/* the family card is the feature: full height on the left, photos large */
.cred.feature{grid-row:1 / span 2;justify-content:center;--credh:clamp(96px,10.5vw,150px)}
.cred-rest{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.cred{position:relative;background:#fff;border:1px solid var(--tan-deep);border-radius:var(--r-md,18px);padding:clamp(20px,2.4vw,30px) clamp(12px,1.4vw,18px);text-align:center;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.cred::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.cred:hover{border-color:var(--blue)}
.cred:hover::after{transform:scaleX(1)}
.cred .emb{display:block;width:clamp(92px,9.4vw,118px);height:auto;margin:0 auto 18px;filter:drop-shadow(0 10px 20px rgba(15,34,51,.18));transition:transform .55s var(--ease),filter .55s var(--ease)}
.cred:hover .emb{transform:translateY(-4px) scale(1.05);filter:drop-shadow(0 18px 30px rgba(46,93,130,.34))}
.cred .emb .rib{transform-origin:60px 96px;transition:transform .55s var(--ease)}
.cred:hover .emb .rib{transform:scaleY(1.07)}
.cred .emb .med{transform-origin:60px 58px;transition:transform .7s var(--ease)}
.cred:hover .emb .med{transform:rotate(-5deg)}
.cred b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(17px,1.7vw,21px);line-height:1.06;text-transform:uppercase;color:var(--navy);letter-spacing:.01em}
.cred small{display:block;margin-top:8px;font:600 10.5px/1.45 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--body);opacity:.78}

.cred{display:flex;flex-direction:column;--credh:clamp(46px,4.6vw,58px);
  transition:transform .75s cubic-bezier(.22,1,.36,1),box-shadow .75s ease,border-color .75s ease}

/* two small overlapping polaroids in place of an icon */
.polas{display:flex;justify-content:center;align-items:flex-end;margin:0 auto clamp(16px,1.8vw,22px);
  height:calc(var(--credh) + 16px)}
.pola{display:block;background:#fff;padding:5px 5px 14px;border-radius:2px;
  box-shadow:0 6px 16px rgba(15,34,51,.26);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.pola img{display:block;width:calc(var(--credh) - 2px);height:calc(var(--credh) - 2px);object-fit:cover;border-radius:1px}
.pola.p1{transform:rotate(-7deg);z-index:1}
.pola.p2{transform:rotate(6deg);margin-left:calc(var(--credh) * -0.3)}
.cred:hover .pola.p1{transform:rotate(-9deg) translateX(-3px)}
.cred:hover .pola.p2{transform:rotate(8deg) translateX(3px)}
.cred-logo,.cred-crop,.cred-pair{display:block;margin:0 auto clamp(16px,1.8vw,22px)}
.cred-logo{height:var(--credh);width:auto;max-width:100%;object-fit:contain;object-position:center;transition:transform .5s var(--ease)}
/* Top Choice art is 550x70 and the "2014-2017" glyphs begin at x=320 (measured by column scan).
   Keeping the left 318/550 = 57.8% means the crop box must be 4.541x the rendered height. */
.cred-crop{overflow:hidden;height:var(--credh);width:calc(var(--credh)*4.541);max-width:100%}
.cred-crop img{height:100%;width:auto;max-width:none;display:block;transition:transform .5s var(--ease)}
.cred-pair{display:flex;align-items:center;justify-content:center;gap:16px;height:calc(var(--credh)*.92)}
.cred-pair img{height:100%;width:auto;object-fit:contain;transition:transform .5s var(--ease)}
.cred:hover .cred-logo,.cred:hover .cred-crop img,.cred:hover .cred-pair img{transform:scale(1.03)}
.cred::after{background:var(--accent)}
@media(max-width:900px){
  .cred-row{grid-template-columns:1fr;gap:14px}
  .cred.feature{grid-row:auto;grid-column:1;--credh:clamp(120px,32vw,168px);padding-top:clamp(26px,4vw,34px);padding-bottom:clamp(26px,4vw,34px)}
  .cred-rest{grid-column:1;grid-template-columns:1fr 1fr;gap:12px}
}
@media(max-width:420px){.cred-rest{grid-template-columns:1fr}}


/* ---------- Jim's signed quote ---------- */
.jimquote{margin:clamp(38px,4.6vw,62px) 0 0;max-width:60ch}
.jimquote blockquote{margin:0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;
  font-size:clamp(21px,2.5vw,33px);line-height:1.24;letter-spacing:.005em;color:#fff}
.jimquote figcaption{margin-top:clamp(14px,1.8vw,22px);display:flex;flex-direction:column;gap:6px}
.sig{font-family:Caveat,'Segoe Script','Brush Script MT',cursive;font-weight:600;
  font-size:clamp(38px,4.4vw,58px);line-height:.9;color:var(--blue);transform:rotate(-3deg);transform-origin:left center;
  display:inline-block;text-shadow:0 2px 14px rgba(6,14,22,.35)}
.sigline{font:600 11px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:8px}

/* ---------- services ---------- */
/* a little spring in the card, and everything inside moves with it */
@media(hover:hover) and (pointer:fine){
  .svc:hover{border-color:var(--blue)}
  .svc:hover .tile img{transform:scale(1.09) rotate(.6deg)}
  .svc .tile img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
  .svc h3{transition:color .45s var(--ease),transform .55s cubic-bezier(.34,1.56,.44,1)}
  .svc:hover h3{color:var(--mid);transform:translateX(4px)}
  .svc .more{transition:transform .55s cubic-bezier(.34,1.56,.44,1),color .4s ease}
  .svc:hover .more{transform:translateX(8px);color:var(--mid)}
  .svc .more b{display:inline-block;transition:transform .55s cubic-bezier(.34,1.56,.44,1)}
  .svc:hover .more b{transform:translateX(6px)}
  .svc:active{transform:translateY(-6px) scale(.995);transition-duration:.16s}
}

#services{background:var(--tan);padding:var(--secpad) 0}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(34px,4vw,54px)}
.svc{background:var(--sand);border:1px solid var(--tan-deep);border-radius:var(--r-lg);position:relative;overflow:hidden;
  isolation:isolate;transition:transform .62s cubic-bezier(.34,1.56,.44,1),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.svc::after{content:"";position:absolute;inset:auto -30% -55% -30%;height:80%;background:radial-gradient(ellipse at 50% 100%,rgba(169,196,216,.4),transparent 70%);opacity:0;transition:.5s;z-index:-1}
.svc:hover{}
.svc:hover::after{opacity:1}
/* 16:9 photography instead of an icon tile - placeholder art for now */
.svc{padding:0;display:flex;flex-direction:column}
.svc .tile{width:auto;height:auto;aspect-ratio:16/9;border-radius:0;background:var(--tan);display:block;margin:0;overflow:hidden;transition:.4s var(--ease)}
.svc .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.svc .svc-body{padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,26px) clamp(22px,2.4vw,30px);display:flex;flex-direction:column;flex:1}
.svc h3{font-size:clamp(22px,2vw,28px);margin-bottom:10px}
.svc p{font-size:14.5px;margin-bottom:16px}
.svc .more{font:800 12px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);display:inline-flex;align-items:center;gap:8px}
.svc .more b{transition:transform .35s var(--ease)}
.svc:hover .more b{transform:translateX(5px)}
@media(max-width:1020px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* ---------- proof band ---------- */
#proof{min-height:92vh;display:flex;align-items:center;overflow:hidden;padding:calc(var(--secpad) + clamp(28px,4vw,62px)) 0 var(--secpad);background:#0A1722}
#proof .bg{position:absolute;inset:0}
/* bottom of the photo pinned to the bottom of the section, so the van never crops */
#proof .bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom;
  filter:blur(3px) brightness(.94);transform:scale(1.03)}
#proof .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,23,34,.66),rgba(10,23,34,.32) 45%,rgba(10,23,34,.76))}
#proof .wrap{color:#fff;width:100%}
#proof h2{color:#fff;font-size:clamp(34px,4.6vw,62px);max-width:22ch}
#proof .eyebrow{color:var(--blue-pale)}
.stat-row{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,80px);margin-top:clamp(30px,4vw,54px)}
.stat b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(48px,6vw,86px);line-height:1;color:var(--blue-pale)}
.stat span{display:block;font:600 12px/1.5 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:8px}

/* ---------- doors (real Clopay photos) ---------- */
#doors{background:var(--sand);padding:clamp(58px,6.4vw,92px) 0 var(--secpad)}
.door-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);margin-top:clamp(34px,4vw,54px);perspective:1200px}
.door-card{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--tan-deep);background:#fff;transition:transform .55s var(--ease),box-shadow .55s var(--ease);transform-style:preserve-3d}
.door-card:hover{}
.door-ph{aspect-ratio:4/3;position:relative;overflow:hidden}
.door-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.door-card:hover .door-ph img{transform:scale(1.08)}
.door-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(15,34,51,.32));opacity:0;transition:.5s}
.door-card:hover .door-ph::after{opacity:1}
.door-body{padding:clamp(20px,2.2vw,28px)}
.door-body h3{font-size:clamp(21px,1.9vw,26px);margin-bottom:8px}
.door-body p{font-size:14.5px}
.door-body .more{font:800 12px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);display:inline-flex;align-items:center;gap:8px;margin-top:12px}

/* Clopay sits in the door row as a fourth card, not its own band */
.door-grid{grid-template-columns:repeat(4,1fr)}
.dealer-card{background:var(--navy);border-color:var(--navy);color:#fff;display:flex}
.dealer-card::after{display:none}
.dc-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;
  padding:clamp(22px,2.2vw,30px) clamp(20px,2vw,26px)}
.dealer-card::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 100% 0%,rgba(169,196,216,.26),transparent 62%);pointer-events:none}
.dc-kick{font:800 9.5px/1.3 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.dc-brand{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(36px,3.6vw,50px);
  line-height:.88;letter-spacing:.02em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.dc-brand sup{font-size:.28em;vertical-align:super;letter-spacing:0}
.dc-note{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.7);margin-bottom:18px}
.dc-cta{margin-top:auto;font:800 11.5px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.dc-cta b{display:inline-block;transition:transform .5s var(--ease)}
.dealer-card:hover .dc-cta b{transform:translateX(6px)}
@media(max-width:1100px){.door-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.door-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}

/* ---------- why (photo collage) ---------- */
#why{background:var(--tan);padding:calc(var(--secpad) + clamp(28px,4vw,62px)) 0 var(--secpad);overflow:hidden}
.why-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,80px);align-items:center}
.collage{position:relative;padding-bottom:clamp(50px,6vw,80px)}
.collage .main{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px rgba(15,34,51,.2);aspect-ratio:4/4.3}
.collage .main img{width:100%;height:100%;object-fit:cover}
.collage .float{position:absolute;right:clamp(-18px,-2vw,-8px);bottom:0;width:52%;border-radius:var(--r-md);overflow:hidden;border:6px solid var(--sand);box-shadow:0 22px 50px rgba(15,34,51,.25);aspect-ratio:3/2}
.collage .float img{width:100%;height:100%;object-fit:cover}
.collage::before{content:"";position:absolute;top:26px;left:-26px;right:40%;bottom:clamp(70px,8vw,110px);border:2px solid var(--blue);border-radius:var(--r-lg);z-index:-1;opacity:.55}
.check-list{list-style:none;margin-top:26px;display:grid;gap:14px}
.check-list li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px}
.check-list li b{color:var(--navy);font-weight:600}
.check-list .ck{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--blue);display:grid;place-items:center;margin-top:2px}
.check-list .ck svg{width:13px;height:13px}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}.collage{max-width:520px}}

/* ---------- areas ---------- */
#areas{background:var(--sand);padding:var(--secpad) 0}
.area-panel{position:relative;overflow:hidden;background:var(--navy);border-radius:var(--r-lg);padding:clamp(30px,4.5vw,60px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(26px,4vw,60px);align-items:center;box-shadow:0 26px 60px rgba(15,34,51,.22)}
.area-panel .apbg{position:absolute;inset:0;opacity:.16}
.area-panel .apbg img{width:100%;height:100%;object-fit:cover}
.area-panel>div{position:relative;z-index:1}
.area-panel .eyebrow{color:var(--blue-pale)}
.area-panel h2{color:#fff}
.area-panel .lede{color:rgba(255,255,255,.82)}
.city-cols{columns:2;gap:34px;position:relative;z-index:1}
.city-cols li{list-style:none;font:600 14px/2.4 Inter,sans-serif;color:#fff;break-inside:avoid;display:flex;align-items:center;gap:10px;white-space:nowrap}
.city-cols li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:0 0 auto}
@media(max-width:820px){.area-panel{grid-template-columns:1fr}}
@media(min-width:560px){.city-cols{columns:3}}

/* ---------- reviews ---------- */
#reviews{background:var(--blue-faint);padding:calc(var(--secpad) + clamp(28px,4vw,62px)) 0 var(--secpad)}


/* ---------- faq ---------- */
#faq{background:var(--sand);padding:calc(var(--secpad) + clamp(28px,4vw,62px)) 0 var(--secpad)}
.faq-wrap{max-width:780px}
.q{border-bottom:1px solid var(--tan-deep)}
.q button{width:100%;background:none;border:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;text-align:left;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(20px,2.2vw,27px);text-transform:uppercase;color:var(--navy);letter-spacing:.01em}
.q .pm{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--blue);position:relative;transition:.4s var(--ease)}
.q .pm::before,.q .pm::after{content:"";position:absolute;background:var(--mid);top:50%;left:50%;transition:.4s var(--ease)}
.q .pm::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.q .pm::after{width:2px;height:12px;transform:translate(-50%,-50%)}
.q.open .pm{background:var(--blue)}
.q.open .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.q .a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.q .a p{padding:0 4px 26px;font-size:15.5px;max-width:64ch}

/* ---------- cta band ---------- */
#contact{background:var(--navy);padding:calc(var(--secpad) + clamp(28px,4vw,62px)) 0 var(--secpad);overflow:hidden;text-align:center}
#contact .cbg{position:absolute;inset:0;opacity:.14}
#contact .cbg img{width:100%;height:100%;object-fit:cover}
#contact .grain{opacity:.07;mix-blend-mode:overlay}
#contact .eyebrow{justify-content:center;color:var(--blue-pale)}
#contact h2{color:#fff;font-size:clamp(44px,7vw,96px);max-width:16ch;margin:0 auto 18px}
#contact .lede{color:rgba(255,255,255,.8);margin:0 auto 34px}
#contact .tel{display:inline-flex;align-items:center;gap:14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(36px,5.4vw,62px);color:#fff;margin:8px auto 22px;letter-spacing:.02em;line-height:1}
#contact .tel svg{width:.8em;height:.8em}
#contact .tel:hover{color:var(--blue-pale)}
#contact .hours{font:600 12px/1.6 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ---------- footer ---------- */
footer{position:relative;overflow:hidden;color:var(--fink);padding:0;background-color:#93B6D1;background-image:radial-gradient(ellipse 80% 70% at 14% 0%,rgba(255,255,255,.34) 0%,transparent 62%),linear-gradient(176deg,#C6DBEA 0%,#AFCBE0 40%,#93B6D1 100%)}
footer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background-image:var(--noise);background-size:240px 240px;mix-blend-mode:multiply}
footer .wrap{position:relative;z-index:1}
/* rule of doors across the very top */
.foot-rule{position:relative;height:10px;background:repeating-linear-gradient(90deg,var(--navy) 0 42px,rgba(15,34,51,.3) 42px 50px)}
/* top tier: full badge + promise + call */
.ftop{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(28px,4vw,60px);align-items:center;padding:clamp(46px,5.4vw,74px) 0 clamp(36px,4.4vw,56px)}
.fbadge{display:block;width:clamp(150px,15vw,208px);height:auto;filter:drop-shadow(0 16px 34px rgba(15,34,51,.34));transition:transform .6s var(--ease),filter .6s var(--ease);transform-origin:50% 60%}
.fbadge-w:hover .fbadge{transform:rotate(-3.5deg) scale(1.05);filter:drop-shadow(0 22px 42px rgba(15,34,51,.42))}
@media(max-width:980px){.fbadge{width:clamp(203px,34vw,270px)}}
.ftag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(1.5rem,3.1vw,2.35rem);line-height:1.02;text-transform:uppercase;color:var(--navy)}
.ftag em{font-style:normal;color:#1B4468}
.ftag span{display:block;margin-top:14px;font:400 15px/1.62 Inter,sans-serif;text-transform:none;color:var(--fink);max-width:46ch;letter-spacing:0}
.fcall{display:grid;gap:12px;justify-items:end;text-align:right}
.fcall .hrs{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#1B4468;opacity:1}
.fcall .num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;color:var(--navy);transition:.4s var(--ease)}
.fcall .num:hover{color:var(--mid);letter-spacing:.01em}
/* link tiers */
.fgrid{display:grid;grid-template-columns:1fr 1fr 1.25fr 1.15fr;gap:clamp(24px,3.4vw,48px);padding:clamp(30px,3.8vw,50px) 0 clamp(38px,4.6vw,58px)}
footer h4{font:800 10.5px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#1B4468;margin-bottom:20px;padding-bottom:13px;border-bottom:1px solid rgba(23,58,88,.34)}
footer li{list-style:none;font-size:14.5px}
footer li a,footer li span{font-weight:500}
footer li a,footer li span{display:inline-block;padding:6px 0;position:relative;color:var(--fink);transition:color .35s var(--ease),transform .35s var(--ease)}
footer li a::before{content:"";position:absolute;left:-14px;top:50%;width:8px;height:1.5px;background:var(--mid);transform:translateY(-50%) scaleX(0);transform-origin:left;transition:.35s var(--ease)}
footer li a:hover{color:var(--navy)}
footer li a:hover::before{transform:translateY(-50%) scaleX(1)}
.fcities{columns:2;column-gap:22px}
.fmap-link{display:inline-block;margin-top:14px;font:800 10.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#1B4468;border-bottom:1px solid rgba(27,68,104,.55);padding-bottom:4px;transition:.35s var(--ease)}
.fmap-link:hover{color:var(--navy);border-bottom-color:var(--navy)}
.fcities li a{font-size:14px}
.fbtns{display:grid;gap:9px;margin-bottom:16px}
.fbtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border-radius:100px;font:800 12.5px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid transparent;transition:.35s var(--ease);white-space:nowrap}
.fbtn.p{background:var(--navy);border-color:var(--navy);color:#fff}
.fbtn.p:hover{background:var(--mid);border-color:var(--mid)}
.fbtn.s{background:rgba(255,255,255,.6);border-color:var(--mid);color:var(--navy)}
.fbtn.s:hover{background:#fff;border-color:var(--navy)}
.fmeta{font-size:13.5px;line-height:1.75;color:var(--fink);opacity:1;margin-top:16px}
.fsoc{display:flex;gap:11px;margin-top:24px}
.fsoc a{width:46px;height:46px;flex:0 0 auto;border:1.5px solid rgba(23,58,88,.45);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.72);color:#1B4468;transition:.35s var(--ease)}
.fsoc svg{width:20px;height:20px;fill:currentColor;display:block}
.fsoc a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* bottom bar */
.buildstamp{margin:0;padding:0 0 calc(14px + env(safe-area-inset-bottom,0px));text-align:center;
  font:400 10px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(15,34,51,.42)}
.fbar{position:relative;padding:24px 0 calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(23,58,88,.32);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font:400 12.5px/1.7 Inter,sans-serif;color:var(--fink)}
.fbar-r{display:grid;gap:4px;text-align:right;margin-left:auto}
.devby{display:inline-flex;align-items:center;gap:20px;padding:18px 26px;border-radius:100px;border:1px solid rgba(23,58,88,.3);transition:.45s var(--ease)}
.devby:hover{border-color:var(--mid);background:rgba(255,255,255,.5)}
.dl-mark{width:clamp(132px,13vw,168px);height:auto;flex:0 0 auto;display:block;opacity:.9;filter:invert(1) brightness(.24);transition:opacity .45s var(--ease)}
.devby:hover .dl-mark{opacity:1}
.devby-t{font:600 11px/1.4 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--fink);opacity:1;display:grid;transition:color .45s var(--ease)}
.devby-t b{font-weight:800;font-size:13px;letter-spacing:.16em;color:var(--navy);transition:color .45s var(--ease)}
.devby:hover .devby-t b{color:var(--mid)}
@media(max-width:980px){.fcontact{padding-bottom:8px}.ftop{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px;padding-top:clamp(38px,6vw,58px)}.fcall{justify-items:center;text-align:center}.ftag span{margin-left:auto;margin-right:auto}.fgrid{grid-template-columns:1fr 1fr;gap:32px 22px;text-align:center}footer h4{text-align:center;padding-bottom:13px;border-bottom:1px solid rgba(23,58,88,.34);margin-bottom:18px}.fw-cities,.fcontact{grid-column:1 / -1}.fcities{columns:3;column-gap:12px}footer li a:hover{transform:none}footer li a::before{display:none}.fbtns{max-width:400px;margin:0 auto 14px}.fsoc{justify-content:center}.fbar{flex-direction:column;text-align:center;gap:16px;padding:20px 0 14px}.fbar-r{margin-left:0;text-align:center;justify-items:center}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr 1fr}.fcities{columns:2}
  .devby{display:flex;width:100%;justify-content:center;gap:16px;padding:20px 10px}
  .dl-mark{width:clamp(112px,29vw,190px)}
  .devby-t{font-size:clamp(8px,2.5vw,11px);letter-spacing:.08em;white-space:nowrap}
  .devby-t b{font-size:clamp(11px,3.3vw,15px);letter-spacing:.1em}
  .wrap{padding:0 16px}
  footer{padding-bottom:120px}}



/* ---------- owner story + inline player ---------- */
#story{position:relative;background:var(--navy);color:#fff;padding:clamp(52px,5.6vw,84px) 0 clamp(60px,6.6vw,96px);overflow:hidden}
#story::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 90% at 12% 0%,rgba(46,93,130,.55),transparent 62%),
             radial-gradient(ellipse 60% 80% at 100% 90%,rgba(169,196,216,.14),transparent 60%)}
#story .wrap{position:relative;z-index:1}
#story .sec-h2{color:#fff}
#story .lede{color:rgba(255,255,255,.7)}
/* video on the left, masthead and beats on the right */
.story-split{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  grid-template-rows:auto 1fr;gap:clamp(22px,2.6vw,40px) clamp(28px,3.4vw,56px);align-items:start}
.story-stage{display:contents}
#story .vplayer{cursor:pointer;grid-column:1;grid-row:1;align-self:start}
#story .story-head{grid-column:2;grid-row:1;margin-bottom:0;align-self:center}
#story .shead-body{grid-template-columns:1fr;gap:16px}
#story .shead-body .lede{padding-top:0;max-width:46ch}
#story .sec-h2{font-size:clamp(30px,3.4vw,50px)}
#story .story-list{grid-column:1 / -1;grid-row:2;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,30px);margin:clamp(8px,1.4vw,20px) 0 0}
#story .story-list li{padding:18px 0 0;border-left:0;border-top:2px solid rgba(169,196,216,.24)}
#story .story-list li:hover{border-top-color:var(--blue)}
/* facade: poster + play, swapped for the real iframe in place. No popup. */
.vplayer{position:relative;border-radius:clamp(18px,2.2vw,30px);overflow:hidden;aspect-ratio:16/9;background:#0A1722;
  box-shadow:0 34px 80px rgba(6,14,22,.6),0 0 0 1px rgba(169,196,216,.18)}
.vplay{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
.vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.vscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,23,34,.24) 0%,rgba(10,23,34,.1) 42%,rgba(10,23,34,.86) 100%)}
.vring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(88px,9.2vw,126px);height:clamp(88px,9.2vw,126px);
  border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(46,93,130,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2px solid rgba(255,255,255,.34);
  transition:transform .5s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
.vring::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--blue);
  animation:pbping 2.8s ease-out infinite}
.vring svg{width:40%;height:40%;margin-left:0;transform:translateX(-6%)}
.vlen{position:absolute;top:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);
  font:800 11.5px/1 Inter,sans-serif;letter-spacing:.1em;color:#fff;background:rgba(10,23,34,.68);
  border:1px solid rgba(169,196,216,.34);padding:8px 13px;border-radius:100px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vcap{position:absolute;left:clamp(18px,2.2vw,34px);right:clamp(18px,2.2vw,34px);bottom:clamp(16px,2vw,28px);
  text-align:left;transition:transform .5s var(--ease)}
.vcap b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(20px,2.2vw,30px);line-height:1.08;letter-spacing:.01em;color:#fff}
.vcap small{display:block;margin-top:7px;font:600 11px/1 Inter,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue)}
@media(prefers-reduced-motion:reduce){.vring::after{animation:none}}
.vplay:hover .vposter{transform:scale(1.045)}
.vplay:hover .vring{transform:translate(-50%,-50%) scale(1.09);background:var(--blue);color:var(--navy);border-color:#fff}
.vplay:hover .vcap{transform:translateY(-4px)}
.vplay:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.vplayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.story-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);margin:clamp(26px,3vw,40px) 0 0}
.story-list li{padding:18px 0 0;border-top:2px solid rgba(169,196,216,.24);transition:border-color .4s var(--ease)}
.story-list b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(16px,1.5vw,19px);
  letter-spacing:.02em;text-transform:uppercase;color:#fff;margin-bottom:6px;line-height:1.1}
.story-list span{display:block;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.58)}
@media(max-width:980px){
  .story-split{grid-template-columns:1fr;grid-template-rows:auto}
  #story .vplayer,#story .story-head,#story .story-list{grid-column:1;grid-row:auto}
  #story .story-head{order:-1}
  #story .story-list{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){#story .story-list{grid-template-columns:1fr}}

/* ---------- service area + branded map ---------- */
#areas{background:var(--sand);padding:var(--secpad) 0;position:relative;overflow:hidden}
.area-wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(26px,3.6vw,58px);align-items:start}
.map{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--tan-deep);background:#E7F0F6;box-shadow:0 26px 60px rgba(15,34,51,.14)}
.map svg{display:block;width:100%;height:auto}
.map .zone{animation:zonepulse 6s ease-in-out infinite}
@keyframes zonepulse{0%,100%{stroke-opacity:.5}50%{stroke-opacity:.85}}
.map .pin{cursor:pointer}
.map .pin:focus-visible{outline:3px solid var(--mid);outline-offset:2px}
.map .pin circle{fill:var(--mid);stroke:#fff;stroke-width:3;transition:.4s var(--ease)}
.map .pin text{paint-order:stroke;stroke:#FBF8F2;stroke-width:5;stroke-linejoin:round}
.map .pin:hover circle{fill:var(--navy);r:12}
.map .pin.hq circle{fill:var(--navy);stroke-width:5}
.map .pin.hq .ping{fill:none;stroke:var(--mid);stroke-width:3;transform-origin:400px 462px;animation:ping 2.8s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}
.area-side{padding-top:6px}
.area-stat{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:var(--r-md,18px);background:var(--accent);margin-bottom:24px}
.area-stat b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(40px,4.6vw,58px);line-height:.85;color:var(--navy)}
.area-stat span{font:600 12.5px/1.45 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);opacity:.78}
.area-note{font-size:15px;color:var(--body);margin-bottom:18px}
.area-note.small{font-size:14px;margin:18px 0 0}
.area-note.small b{color:var(--navy);font-weight:800;letter-spacing:.02em}
.area-note a{color:var(--mid);font-weight:700;border-bottom:1.5px solid var(--blue)}
.city-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.city-grid a{display:block;padding:12px 13px;border-radius:11px;border:1px solid var(--tan-deep);background:#fff;transition:.35s var(--ease)}
.city-grid a b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(16px,1.5vw,19px);letter-spacing:.02em;color:var(--navy);text-transform:uppercase;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city-grid a:hover{border-color:var(--blue);background:var(--blue-faint)}
.city-grid a:hover b{color:var(--mid)}
@media(max-width:960px){.area-wrap{grid-template-columns:1fr}}
@media(max-width:520px){.city-grid{grid-template-columns:1fr 1fr}}


/* ---------- mobile header ---------- */
@media(max-width:760px){
  #top{padding:calc(env(safe-area-inset-top,0px) + clamp(186px,41vw,232px)) 0 clamp(64px,11vh,100px)}
  #nav .badge{height:clamp(112px,30vw,150px);filter:drop-shadow(0 3px 9px rgba(6,14,22,.28))}
  .wrap{padding:0 24px}
  .hero-inner .eyebrow{font-size:11.5px;letter-spacing:.2em;margin-bottom:16px}
  .hero-inner .eyebrow::before,.hero-inner .eyebrow::after{width:18px}
  .hero-inner h1{font-size:clamp(34px,8.6vw,52px);margin-bottom:14px}
  .hero-inner .sub{font-size:16px;line-height:1.6;max-width:30ch;padding:0}
  /* facts sit as a spaced, quiet list - no card, no blur, nothing crowding the logo */
  .hero-trust{display:grid;grid-template-columns:1fr;justify-items:center;gap:13px;margin-top:clamp(34px,7vw,48px)}
  .hero-trust i{display:none}
  .hero-trust span{font-size:13px;letter-spacing:.13em;color:rgba(255,255,255,.86)}
  .hero-trust svg{width:15px;height:15px}
}
@media(max-width:420px){
  .hero-trust{gap:12px;margin-top:28px}
  .hero-trust span{font-size:12px;letter-spacing:.1em}
}


/* ---------- iOS Safari status bar + toolbar tint ----------
   Same approach as Johnson's Quality: html AND body carry the nav colour so
   Safari samples it for the status bar and the translucent URL bar, and the
   scrolled nav is a glass panel rather than an opaque block, so the toolbar
   tint blends into it instead of banding against it. */
html{background-color:#2E5D82}
body{background-color:#2E5D82}
body>footer{background-color:transparent}
#nav.solid{
  background:#2E5D82!important;
  box-shadow:0 2px 0 rgba(169,196,216,.45)}
@media(max-width:760px){
  #nav.solid{
  background:#2E5D82!important;
    padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px}
}
/* the page itself keeps the warm document colour, sitting on the navy shell */
#top,.marquee,section,.badges{position:relative}
main,#wrap-bg{background:var(--sand)}



/* hero lower row: video button beside the copy on desktop so nothing is pushed down */

/* ---------- hero variation: copy left, dominant video right ---------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);
  gap:clamp(26px,3.6vw,60px);align-items:center;text-align:left}
.hero-copy{min-width:0}
.hero-inner .hero-copy .sub{margin:0 0 clamp(20px,2.4vw,28px);text-align:left;max-width:40ch;
  font-size:clamp(15.5px,1.35vw,18px)}

.hero-cta2{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:rise .9s var(--ease) 1.34s forwards}
.hbtn{display:inline-flex;align-items:center;gap:12px;padding:14px 24px 14px 18px;border-radius:100px;
  border:2px solid transparent;text-align:left;cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease)}
.hbtn svg{width:20px;height:20px;flex:0 0 auto}
.hbtn span{display:grid;gap:3px;line-height:1;min-width:0}
.hbtn b{font:800 14.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.hbtn small{font:600 11.5px/1 Inter,sans-serif;letter-spacing:.04em;opacity:.85;white-space:nowrap}
/* the green from their live site, so the primary action pops off the photography */
.hbtn-call{background:#319600;color:#fff;border-color:#3EAE0B;box-shadow:0 14px 30px rgba(20,70,0,.4)}
.hbtn-help{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media(hover:hover) and (pointer:fine){
  .hbtn-call:hover{background:#3EAE0B}
  .hbtn-help:hover{background:rgba(255,255,255,.22);border-color:#fff}
}
/* desktop: the nav's green Call Now is the only phone CTA, so the hero keeps
   just Request a callback. Mobile has no nav CTA (burger sits top right), so
   the green Call Now stays in the hero there. */
/* Desktop: calling means picking up a phone, so the hero carries Call Now and
   the header carries Request Callback. Below 761px it flips - on a phone the
   call is the easy action. */
@media(min-width:761px){
  .hero-cta2 .hbtn-help{display:none}
  .hero-cta2 .hbtn-call{background:rgba(255,255,255,.12);color:#fff;
    border-color:rgba(255,255,255,.5);box-shadow:none}
  .hero-cta2 .hbtn-call:hover{background:#fff;border-color:#fff}
  .hero-cta2 .hbtn-call:hover b,.hero-cta2 .hbtn-call:hover small{color:var(--navy)}
  .hero-cta2 .hbtn-call:hover svg{stroke:var(--navy)}
}
@media(max-width:760px){.hero-cta2 .hbtn-call{display:inline-flex}}

.hero-video{min-width:0;opacity:0;animation:rise .9s var(--ease) 1.2s forwards}
.hvid{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  border-radius:clamp(16px,1.8vw,26px);overflow:hidden;background:var(--navy);
  box-shadow:0 30px 70px rgba(6,14,22,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.hvid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.hvid::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,14,22,.05) 0%,transparent 34%,rgba(6,14,22,.78) 100%)}
.hvid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:clamp(60px,6vw,84px);height:clamp(60px,6vw,84px);border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.26);
  border:2px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);
  box-shadow:0 12px 34px rgba(6,14,22,.45);transition:transform .45s var(--ease),background .45s}
.hvid-play svg{width:44%;height:44%;margin-left:8%}
.hvid-play::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(255,255,255,.8);animation:playPulse 2.6s var(--ease) infinite;pointer-events:none}
/* stroke that travels around the video and clears out on hover */
@property --hva{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --hvc{syntax:'<color>';initial-value:rgba(255,255,255,.95);inherits:false}
@property --hvc2{syntax:'<color>';initial-value:rgba(169,196,216,.55);inherits:false}
.hvid-ring{position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;padding:4px;
  background:conic-gradient(from var(--hva),transparent 0 68%,var(--hvc2) 78%,var(--hvc) 86%,var(--hvc2) 92%,transparent 99%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:hvRing 4.6s linear infinite;transition:--hvc .45s ease,--hvc2 .45s ease}
@keyframes hvRing{to{--hva:360deg}}

.hvid-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:4px;
  padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,24px);text-align:left}
.hvid-cap b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(18px,1.8vw,23px);letter-spacing:.02em;text-transform:uppercase;color:#fff;line-height:1}
.hvid-cap small{font:700 10.5px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-pale)}
@media(hover:hover) and (pointer:fine){
  .hvid:hover{}
  .hvid:hover img{transform:scale(1.05)}
  .hvid:hover .hvid-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.4)}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:0;text-align:center}
  .hero-inner .hero-copy .sub{margin-left:auto;margin-right:auto;text-align:center;max-width:34ch}
  .hero-copy{display:contents}
  .hero-inner h1{order:1}
  .hero-inner .hero-copy .sub{order:2}
  .hero-video{order:3}
  .hero-cta2{order:4;justify-content:center}
  .hvid-cap{text-align:left}
  /* two lines: "Greater Vancouver's" / "Garage Door Experts." */
  .hero-inner h1 br.b1,.hero-inner h1 br.b3{display:none}
  .hero-inner h1{font-size:clamp(33px,8.4vw,50px);margin-bottom:8px}
  /* sub sits tight under the headline */
  .hero-inner .hero-copy .sub{font-size:15px;line-height:1.5;margin:0 auto clamp(16px,3.4vw,22px)}
  /* bigger video, and enough room beneath that its shadow clears the buttons */
  .hero-video{width:min(100%,92vw);margin:0 auto clamp(26px,6vw,38px)}
  .hvid-play{width:clamp(54px,15vw,70px);height:clamp(54px,15vw,70px)}
  .hvid-cap{padding:11px 14px}
  .hvid-cap b{font-size:17px}
  .hvid-cap small{font-size:9.5px;letter-spacing:.12em}
  /* video shadow was reaching past the gap and darkening the green button */
  .hvid{box-shadow:0 12px 26px rgba(6,14,22,.45)}

  /* 3. nudge people to play, and to call */
  .hbtn-call{animation:callNudge 3.6s ease-in-out infinite}
}
@keyframes playPulse{
  0%{transform:scale(.94);opacity:.85}
  70%{transform:scale(1.4);opacity:0}
  100%{transform:scale(1.4);opacity:0}
}
@keyframes callNudge{
  0%,84%,100%{transform:none;box-shadow:0 14px 30px rgba(20,70,0,.4)}
  88%{transform:translateY(-2px);box-shadow:0 18px 36px rgba(20,70,0,.55),0 0 0 7px rgba(62,174,11,.24)}
  94%{transform:none;box-shadow:0 14px 30px rgba(20,70,0,.4)}
}
@media(max-width:430px){
  .hbtn{flex:1 1 0;justify-content:center;padding:13px 12px;gap:9px}
  .hbtn b{font-size:12.5px;letter-spacing:.05em}
  .hbtn small{font-size:10px}
  .hbtn svg{width:17px;height:17px}
}
.hero-lower{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,2.8vw,36px);margin-top:4px}
.hero-lower .sub{margin:0;text-align:center;max-width:52ch}
.hero-lower .hero-play{margin-top:0;flex:0 0 auto}
@media(max-width:900px){
  .hero-lower{gap:26px}
  .hero-lower .sub{max-width:34ch;order:1}
  .hero-lower .hero-play{order:2}
}
/* ---------- hero play button ---------- */
.hero-play{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;opacity:0;animation:rise .9s var(--ease) 1.34s forwards}
.playbtn{display:inline-flex;align-items:center;gap:16px;padding:10px 26px 10px 10px;border-radius:100px;cursor:pointer;
  background:rgba(10,23,34,.42);border:1.5px solid rgba(169,196,216,.4);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.playbtn:hover{background:rgba(10,23,34,.62);border-color:var(--blue)}
.pb-ring{position:relative;flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--mid);color:#fff;transition:background .35s var(--ease),transform .35s var(--ease)}
.pb-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue);
  animation:pbping 2.6s ease-out infinite}
@keyframes pbping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.playbtn:hover .pb-ring{background:var(--navy);transform:scale(1.06)}
.pb-ring svg{width:20px;height:20px;margin-left:2px}
.pb-txt{text-align:left;line-height:1}
.pb-txt b{display:block;font:800 13px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.pb-txt small{display:block;margin-top:6px;font:600 11.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--blue)}
@media(prefers-reduced-motion:reduce){.pb-ring::after{animation:none}}

/* the call button only appears on phones, where the header has no other CTA */
.hcall{display:none;text-decoration:none}
.hcall .pb-ring{background:var(--blue);color:var(--navy)}
.hcall .pb-ring::after{border-color:rgba(255,255,255,.5)}
.hcall:hover .pb-ring{background:#fff;color:var(--navy)}
@media(max-width:900px){
  .hero-play{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:440px;margin:0 auto}
  .hcall{display:inline-flex}
  /* identical box so the pair reads as one control */
  .hero-play .playbtn{width:100%;min-height:66px;justify-content:flex-start;padding:10px 14px 10px 10px;gap:11px}
  .hero-play .pb-ring{width:44px;height:44px}
  .hero-play .pb-ring svg{width:18px;height:18px}
  .pb-txt b{font-size:12px;letter-spacing:.09em}
  .pb-txt small{margin-top:5px;font-size:10.5px;letter-spacing:.04em}
}
@media(max-width:380px){
  .hero-play .playbtn{padding:9px 10px 9px 9px;gap:9px}
  .hero-play .pb-ring{width:38px;height:38px}
  .pb-txt b{font-size:11px}.pb-txt small{font-size:9.5px}
}

/* ---------- Call Now: the loudest thing on a phone ---------- */
/* hero pair: Call is a solid light-blue slab, Play stays quiet glass beside it */
@media(max-width:900px){
  .hcall{background:var(--mid);border:2px solid var(--blue);box-shadow:0 12px 30px rgba(6,14,22,.5)}
  .hcall .pb-ring{background:var(--blue);color:var(--navy);border:0}
  .hcall .pb-ring::after{border-color:rgba(255,255,255,.6)}
  .hcall .pb-txt b{color:#fff;font-size:13.5px;letter-spacing:.1em}
  .hcall .pb-txt small{color:#fff;opacity:.92;font-weight:800;font-size:12px}
  .hero-play .playbtn:not(.hcall){background:rgba(10,23,34,.5);border-color:rgba(169,196,216,.45)}
}
/* scrolled header button: light blue slab with a white keyline */
#nav.solid .btn-call{background:#319600;border-color:#3EAE0B;box-shadow:0 8px 24px rgba(20,70,0,.4)}
#nav.solid .btn-call .cl u{color:#fff}
#nav.solid .btn-call .cl small{color:var(--blue-pale)}
#nav.solid .btn-call svg{stroke:#fff}
/* the sticky mobile bar matches */
#callbar .c1{background-color:transparent;background-image:linear-gradient(var(--mid),var(--mid));color:#fff;border:2px solid var(--blue)}
#callbar .c1 svg{stroke:#fff}
/* ---------- video lightbox ---------- */
/* an ID rule beats the UA [hidden]{display:none}, so the closed lightbox was
   sitting over the whole page and eating every hover and click. */
#vid[hidden]{display:none!important}
#vid{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:clamp(12px,2vw,28px);opacity:0;pointer-events:none;transition:opacity .3s ease}
#vid.open{pointer-events:auto}
#vid.open{opacity:1}
#vid .vid-back{position:absolute;inset:0;background:rgba(6,14,22,.9)}
/* blur only on pointer devices: per the iOS notes, backdrop-filter on a fixed
   overlay is the prime suspect for re-tinting Safari's chin on iPhone. */
@media(min-width:761px){#vid .vid-back{background:rgba(6,14,22,.82);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15)}}
@media(max-width:760px){#vid .vid-back{background:rgba(6,14,22,.95)}}
#vid .vid-box{position:relative;z-index:1;margin:auto;height:min(78svh,calc(92vw * 9 / 16));aspect-ratio:16/9;width:auto;max-width:92vw;transform:scale(.96);transition:transform .35s var(--ease)}
#vid.open .vid-box{transform:none}
@media(max-width:760px),(max-height:560px){
  #vid .vid-box{height:auto;width:min(96vw,100%);aspect-ratio:16/9;max-height:70svh}
  }
#vid .vid-frame{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.65)}
#vid .vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
#vid .vid-x{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));right:18px;z-index:6;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(169,196,216,.5);
  background:rgba(10,23,34,.7);color:#fff;font-size:16px;cursor:pointer;display:grid;place-items:center;transition:.3s}
#vid .vid-x:hover{background:var(--blue);color:var(--navy);border-color:var(--blue)}
@media(max-width:600px){.playbtn{padding:8px 20px 8px 8px;gap:12px}.pb-ring{width:42px;height:42px}
  .pb-txt b{font-size:12px}.pb-txt small{font-size:10.5px}}


/* ---------- touch devices: no sticky hover ----------
   Phones synthesise :hover on tap and leave it stuck until you tap elsewhere,
   which is what made the menu button look glitchy. On anything without a real
   pointer, hover states are neutralised and replaced by a brief :active press.
   A narrowed desktop window still keeps its hover, because it still has a mouse. */
@media(hover:none){
  .btn:hover,.btn-call:hover,.playbtn:hover,.hcall:hover,.fbtn:hover,.fbtn.p:hover,.fbtn.s:hover,
  .cred:hover,.bitem:hover,.svc:hover,.door-card:hover,.rev:hover,.city-grid a:hover,
  .story-list li:hover,.fsoc a:hover,#mm .mm-soc a:hover,.vplay:hover,.dealer:hover,
  .area-stat:hover,.mm-call:hover{transform:none!important}
  .btn-call:hover .fill{transform:translateX(-101%)!important}
  .btn-call:hover .cl u{color:#fff!important}
  .btn-call:hover .cl small{color:var(--blue-faint)!important}
  .btn-call:hover svg{stroke:#fff!important}
  .city-grid a:hover{background:#fff!important;border-color:var(--tan-deep)!important}
  .city-grid a:hover b{color:var(--navy)!important}
  .fsoc a:hover,#mm .mm-soc a:hover{background:rgba(169,196,216,.07)!important;color:rgba(255,255,255,.8)!important;border-color:rgba(169,196,216,.35)!important}
  .story-list li:hover{border-top-color:rgba(169,196,216,.24)!important}
  .vplay:hover .vposter{transform:none!important}
  .vplay:hover .vring{transform:translate(-50%,-50%)!important;background:rgba(46,93,130,.9)!important;color:#fff!important}
  .vplay:hover .vcap{transform:none!important}
  /* a short, honest press state instead */
  .btn:active,.playbtn:active,.fbtn:active,#burger:active,.city-grid a:active,
  .fsoc a:active,#mm .mm-soc a:active,.vplay:active{transform:scale(.975)!important;transition:transform .1s ease}
  a,button{-webkit-tap-highlight-color:transparent}
}


/* ---------- get-help modal ---------- */
@media(max-width:760px){#vid{bottom:-150px;padding-bottom:150px}#help{bottom:-150px;padding-bottom:calc(150px + 14px)}}
#help[hidden]{display:none!important}
#help{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(12px,3vw,34px);
  opacity:0;pointer-events:none;transition:opacity .32s ease}
#help.open{opacity:1;pointer-events:auto}
.help-back{position:absolute;inset:0;background:rgba(6,14,22,.9)}
@media(min-width:761px){.help-back{background:rgba(6,14,22,.8);-webkit-backdrop-filter:blur(20px) saturate(1.1);backdrop-filter:blur(20px) saturate(1.1)}}
.help-card{position:relative;z-index:1;width:min(940px,100%);max-height:92svh;overflow:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:.82fr 1.18fr;background:var(--sand);border-radius:var(--r-lg);isolation:isolate;
  box-shadow:0 50px 120px rgba(4,10,16,.6);transform:translateY(22px) scale(.97);transition:transform .42s var(--ease)}
#help.open .help-card{transform:none}
.help-side{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:clamp(30px,3.4vw,46px) clamp(22px,2.4vw,32px);text-align:center;overflow:hidden;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  background:radial-gradient(ellipse 120% 95% at 50% 4%,rgba(255,255,255,.85) 0%,transparent 58%),
  linear-gradient(168deg,#DCE8F1 0%,#C2D9E9 44%,#A2C2DA 100%)}
.help-side img{width:min(88%,290px);height:auto;filter:drop-shadow(0 14px 28px rgba(15,34,51,.26))}
.help-side-t{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(22px,2.3vw,29px);
  line-height:1.18;text-transform:uppercase;letter-spacing:.03em;color:rgba(15,34,51,.72)}
.help-side-t b{color:var(--mid)}
.help-main{padding:clamp(28px,3.2vw,46px) clamp(24px,2.8vw,42px)}
.help-kick{font:800 clamp(11px,1vw,13px)/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--mid);margin-bottom:12px}
.help-main h3{font-size:clamp(26px,3vw,40px);margin-bottom:12px}
.help-lede{font-size:14.5px;line-height:1.6;color:var(--body);margin-bottom:20px;max-width:44ch}
.help-form{display:grid;gap:13px}
.help-form label{display:block;font:800 10.5px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.help-form label i{font-style:normal;opacity:.55;letter-spacing:.1em}
.help-form input,.help-form textarea{width:100%;margin-top:8px;background:#fff;border:1.5px solid var(--tan-deep);
  border-radius:12px;padding:13px 15px;font:400 16px/1.4 Inter,sans-serif;color:var(--navy);transition:.3s}
.help-form input:focus,.help-form textarea:focus{outline:0;border-color:var(--mid);box-shadow:0 0 0 4px rgba(169,196,216,.35)}
.help-form textarea{resize:vertical;min-height:60px}
.help-send{width:100%;justify-content:center;background:#319600;color:#fff;border:2px solid #3EAE0B;transform:none!important;
  padding:16px 20px;font-size:14px;margin-top:4px}
@media(hover:hover) and (pointer:fine){.help-send:hover{background:#3EAE0B;border-color:#4BC414}}
.help-alt{margin-top:14px;text-align:center;font-size:16px;color:var(--body)}
.help-alt a{color:var(--mid);font-weight:800;font-size:17px;border-bottom:2px solid var(--blue)}
.help-x{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));right:18px;z-index:6;width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(169,196,216,.5);background:rgba(10,23,34,.7);color:#fff;font-size:16px;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;transition:.3s}
.help-x:hover{background:var(--blue);color:var(--navy);border-color:var(--blue)}
.ghelp .pb-ring{background:var(--navy);color:#fff}
.ghelp .pb-ring::after{border-color:rgba(169,196,216,.6)}
.ghelp:hover .pb-ring{background:var(--blue);color:var(--navy)}
@media(max-width:820px){
  .help-card{grid-template-columns:1fr;max-height:90svh}
  .help-side{padding:26px 22px 20px;flex-direction:row;gap:16px;justify-content:flex-start;text-align:left;
    border-radius:var(--r-lg) var(--r-lg) 0 0}
  .help-side img{width:118px}
  .help-side-t{font-size:18px}
}
@media(max-width:900px){.ghelp{display:none}}


/* ---------- testimonials: video + rotating cards ---------- */
#reviews{position:relative;color:var(--navy);padding:var(--secpad) 0;overflow:hidden;
  background:linear-gradient(170deg,#DCE8F1 0%,#CFE0EC 46%,#BFD5E6 100%)}
#reviews::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 66% 80% at 88% 0%,rgba(255,255,255,.55),transparent 62%),
             radial-gradient(ellipse 60% 70% at 0% 100%,rgba(46,93,130,.1),transparent 60%)}
#reviews .wrap{position:relative;z-index:1}
#reviews .sec-h2{color:var(--navy)}
#reviews .lede{color:var(--body)}
#reviews .lede b{color:var(--mid)}
/* mirrored against the owner story above: cards left, video right */
.rev-split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(24px,3vw,48px);align-items:stretch}
.rev-video{grid-column:2;grid-row:1}
.rev-deck{grid-column:1;grid-row:1}
.rev-video{align-self:start}
/* the deck: one card visible, the rest stacked behind it */
.rev-deck{display:flex;flex-direction:column;justify-content:space-between;position:relative}
.rev-deck::before,.rev-deck::after{content:"";position:absolute;left:0;right:0;border-radius:clamp(18px,2.2vw,30px);
  background:rgba(255,255,255,.4);border:1px solid rgba(46,93,130,.13);pointer-events:none;z-index:0}
/* two tilted layers peeking out behind the live card */
.rev-deck::before{top:14px;bottom:78px;transform:rotate(-1.4deg) scale(.985)}
.rev-deck::after{top:7px;bottom:85px;transform:rotate(.9deg) scale(.993)}
.rev-stack{position:relative;z-index:1;height:clamp(310px,30vw,380px);
  background:rgba(255,255,255,.78);border:1px solid rgba(46,93,130,.18);
  border-radius:clamp(18px,2.2vw,30px);padding:clamp(26px,3vw,42px);overflow:hidden;
  box-shadow:0 18px 44px rgba(15,34,51,.13)}
.rev-stack::before{content:"\201C";position:absolute;top:-30px;right:16px;font-family:'Barlow Condensed',serif;
  font-size:180px;line-height:1;color:rgba(46,93,130,.09);pointer-events:none}
.rev-stack .rev{position:absolute;inset:clamp(26px,3vw,42px);opacity:0;pointer-events:none;
  transform:translateX(26px) scale(.97);
  transition:opacity .5s var(--ease),transform .6s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;justify-content:center;background:none;border:0;padding:0}
.rev-stack .rev.on{opacity:1;transform:none;pointer-events:auto}
.rev-stack .rev.out{opacity:0;transform:translateX(-26px) scale(.97)}
.rev-stack .stars{color:var(--mid);letter-spacing:4px;font-size:17px;margin-bottom:16px}
.rev-stack p{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;
  font-size:clamp(21px,2.3vw,30px);line-height:1.26;color:var(--navy);margin:0 0 22px;text-wrap:balance}
.rev-stack p::before{content:"\201C"}
.rev-stack p::after{content:"\201D"}
.rev-stack b{display:block;font:800 12.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.rev-stack small{display:block;margin-top:7px;font:400 13px/1 Inter,sans-serif;color:var(--body);opacity:.8}
.rev-nav{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,2.4vw,26px);position:relative;z-index:1}
.rev-arrow{width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:1.5px solid rgba(46,93,130,.32);
  background:rgba(255,255,255,.7);color:var(--navy);font-size:15px;cursor:pointer;display:grid;place-items:center;
  transition:.35s var(--ease)}
.rev-arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.rev-dots{display:flex;gap:8px;margin-left:auto}
.rev-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(15,34,51,.24);transition:.35s var(--ease)}
.rev-dots button.on{background:var(--mid);transform:scale(1.5)}
@media(max-width:960px){.rev-split{grid-template-columns:1fr}
  .rev-video{grid-column:1;grid-row:1}.rev-deck{grid-column:1;grid-row:2}}

/* ---------- recent projects ---------- */
#projects{background:var(--tan);padding:var(--secpad) 0;position:relative;overflow:hidden}
.proj-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.8vw,24px)}
.proj{grid-column:span 2;display:flex;flex-direction:column;background:var(--sand);
  border:1px solid var(--tan-deep);border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  transition:transform .62s cubic-bezier(.34,1.56,.44,1),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.proj-lg{grid-column:span 3}
.proj:nth-child(2){grid-column:span 3}
.proj-ph{aspect-ratio:16/9;overflow:hidden;background:var(--tan)}
.proj-lg .proj-ph{aspect-ratio:16/8}
.proj-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.proj-body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.proj-tag{align-self:flex-start;font:800 9.5px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);background:var(--blue-faint);border:1px solid var(--blue);padding:7px 11px;border-radius:100px;margin-bottom:14px}
.proj h3{font-size:clamp(19px,1.9vw,25px);margin-bottom:9px;transition:color .45s var(--ease)}
.proj p{font-size:14.5px;line-height:1.6;color:var(--body);margin-bottom:16px}
.proj-meta{margin-top:auto;font:600 10.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body);opacity:.62}
@media(hover:hover) and (pointer:fine){
  .proj:hover{border-color:var(--blue)}
  .proj:hover .proj-ph img{transform:scale(1.07)}
  .proj:hover h3{color:var(--mid)}
}
.proj-note{margin-top:clamp(26px,3vw,40px);text-align:center;font-size:15px;color:var(--body)}
.gtee{margin-top:clamp(30px,3.6vw,48px);border:1px solid var(--tan-deep);border-radius:var(--r-lg);
  background:linear-gradient(168deg,#F4EFE4 0%,#EAE1CF 100%);padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap}
.gtee-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px);flex:1 1 460px}
.gtee-i{display:grid;gap:3px;position:relative;padding-left:56px;min-height:44px;align-content:center}
.gtee-ic{position:absolute;left:0;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1px solid var(--tan-deep);color:var(--mid);
  transition:transform .4s var(--ease),background .4s,color .4s,border-color .4s}
.gtee-ic svg{width:21px;height:21px}
.gtee-i b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(16px,1.5vw,19px);
  line-height:1.05;text-transform:uppercase;letter-spacing:.01em;color:var(--navy)}
.gtee-i span{font:400 12.5px/1.45 Inter,sans-serif;color:var(--body)}
.gtee-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;
  border:2px solid var(--navy);border-radius:100px;padding:15px 26px;
  font:800 12.5px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;transition:.4s var(--ease)}
.gtee-cta svg{width:17px;height:17px}
@media(hover:hover) and (pointer:fine){
  .gtee-i:hover .gtee-ic{transform:translateY(-50%) scale(1.08);background:var(--mid);color:#fff;border-color:var(--mid)}
  .gtee-cta:hover{background:var(--mid);border-color:var(--mid)}
}
@media(max-width:900px){.gtee{flex-direction:column;text-align:left}
  .gtee-items{grid-template-columns:1fr;gap:14px;width:100%;flex:1 1 auto}
  .gtee-cta{width:100%;justify-content:center}}

.proj-note a{color:var(--mid);font-weight:700;border-bottom:1.5px solid var(--blue)}
@media(max-width:1000px){.proj-grid{grid-template-columns:repeat(2,1fr)}
  .proj,.proj-lg,.proj:nth-child(2){grid-column:span 1}
  .proj-lg .proj-ph{aspect-ratio:16/9}}
@media(max-width:620px){.proj-grid{grid-template-columns:1fr}}

.guides{margin-top:clamp(34px,4vw,54px)}
.guides-h{font:800 10.5px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);
  margin-bottom:16px;display:flex;align-items:center;gap:12px}
.guides-h::after{content:"";flex:1;height:1px;background:var(--tan-deep)}
.guides ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,16px)}
.guides li{display:flex}
.gcard{display:flex;flex-direction:column;width:100%;border:1px solid var(--tan-deep);border-radius:var(--r-lg);
  background:var(--sand);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.gcard .gart{position:relative;aspect-ratio:4/3;display:block;background:linear-gradient(165deg,#F4EFE4 0%,#E7DECB 100%);
  border-bottom:1px solid var(--tan-deep);overflow:hidden}
.gcard .gart svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.gcard .gart::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 8%,rgba(255,255,255,.7),transparent 70%);pointer-events:none}
.gcard .gtx{padding:14px clamp(13px,1.1vw,17px) 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.gcard .gkick{font:800 9px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mid)}
.gcard .gt{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(15px,1.35vw,18px);
  line-height:1.08;text-transform:uppercase;letter-spacing:.01em;color:var(--navy);transition:color .35s var(--ease)}
.gcard .gmore{margin-top:auto;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mid);display:inline-flex;align-items:center;gap:6px;transition:gap .35s var(--ease)}
.gcard .gmore i{font-style:normal}
@media(hover:hover) and (pointer:fine){
  .gcard:hover{border-color:var(--blue)}
  .gcard:hover .gt{color:var(--mid)}
  .gcard:hover .gmore{gap:12px}
  .gcard:hover .g-anim{animation:gnudge .8s var(--ease)}
}
@keyframes gnudge{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
@media(max-width:1080px){.guides ul{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.guides ul{grid-template-columns:repeat(2,1fr);gap:10px}
  .gcard .gart{aspect-ratio:16/10}}

/* The callbar wins the tint selection but has no background-color anywhere -
   its box is transparent and the pills use background-image gradients - so it
   abstains and Safari falls through to the next source, #nav.solid #2E5D82.
   That is exactly the colour seen on screen. 3% gives the winner a value of
   its own: proven to register, proven invisible, and nothing to out-compete. */

/* iOS 26 Safari bottom-toolbar shim. Safari samples a fixed element near the
   bottom edge that is >=80% wide and >=3px tall, and reads its background-color:
   semi-transparent = glass. bottom:-12px puts zero pixels on screen while the
   box still sits at the sampled edge - at -8px a 4px hairline shows. No
   backdrop-filter here: it forces a compositing layer and paints a seam. */
#chin{position:fixed;bottom:-12px;left:0;width:100%;height:12px;min-height:12px;z-index:5;
  margin:0;padding:0;pointer-events:none;opacity:0;
  background-color:rgba(255,255,255,.02);display:none}
@supports (-webkit-text-size-adjust:none) and (font:-apple-system-body) and (-webkit-touch-callout:none){
  @media (width < 768px){#chin{display:block}}
}

/* ---------- callbar ---------- */
#callbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:none;gap:10px;transform:translateY(calc(100% + 160px));transition:transform .5s var(--ease)}
#callbar.show{transform:none}
#callbar a,#callbar button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;font:800 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:18px 10px;border-radius:999px;box-shadow:0 2px 6px rgba(6,14,22,.26)}
#callbar .c1{background-color:transparent;background-image:linear-gradient(#319600,#319600);color:#fff;flex:1 1 0}
#callbar .c2{background-color:transparent;background-image:linear-gradient(var(--navy),var(--navy));color:#fff;border:1px solid rgba(169,196,216,.35);flex:1 1 0;cursor:pointer;-webkit-appearance:none;appearance:none}
@media(max-width:760px){
  /* container under the 80% eligibility threshold; pills overhang it so they
     still land 12px from each screen edge at their original size */
  #callbar{display:none;left:11%;right:11%;overflow:visible}
  #callbar.mounted{display:flex}
  #callbar .c1{margin-left:calc(12px - 11vw)}
  #callbar .c2{margin-right:calc(12px - 11vw)}
}

/* ---------- callback modal (deep blur) ---------- */
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.left{transform:translateX(-44px)}
.reveal.right{transform:translateX(44px)}
.reveal.zoom{transform:scale(.94)}
.reveal.in.left,.reveal.in.right{transform:none}
.reveal.in.zoom{transform:scale(1)}
.reveal.sec-title{transform:translateY(54px);transition:opacity .8s ease,transform .95s var(--ease)}
.reveal.sec-title.in{transform:none}
/* extra motion */
.reveal.blur{filter:blur(9px)}
.reveal.in.blur{filter:none;transition:opacity .9s ease,transform .9s var(--ease),filter .9s ease}
.mag{transition:transform .28s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.fbadge-w{display:block;flex:0 0 auto;animation:floaty 7s ease-in-out infinite}
.fbadge-w:hover{animation-play-state:paused}
@keyframes sheen{to{background-position:200% 0}}
.foot-rule{background-size:200% 100%;animation:sheen 9s linear infinite}
@media(prefers-reduced-motion:reduce){.hero-awards,.hvid-ring,.hvid-play::before,.hbtn-call,.fbadge-w,.fbadge,.foot-rule,.marquee-track{animation:none!important}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.hero-inner .eyebrow,.hero-inner .sub,.hero-ctas,.hero-chips,.hero-cta2,.hero-video,.hero-inner h1 .w i,.scrollcue{opacity:1;transform:none}
  #loader{display:none}
}


@media(max-width:760px){
  /* phones swap the text line for the logo row: "urgent calls available" doesn't
     earn its space, BBB + the rating repeat further down, and 30+ years is
     already in the loader. Sizes scale with vw so both rows still fit at 320px.
     align-content:flex-start pulls them up under the buttons while min-height
     holds the block so nothing else in the hero shifts. */
  .hero-trust{display:none}
  .hero-awards{display:flex;align-items:center;align-content:flex-start;justify-content:center;
    flex-wrap:wrap;gap:18px 20px;margin-top:clamp(22px,4.6vw,32px);min-height:138px;
    opacity:0;animation:rise .9s var(--ease) 1.6s forwards}
  .hero-awards img{height:clamp(24px,7.2vw,32px);width:auto;max-width:none;display:block;
    filter:brightness(0) invert(1);opacity:.88}
  .hero-awards .crop{display:block;overflow:hidden}
  .hero-awards .crop img{height:100%}
  .hero-awards .crop.tc{height:clamp(30px,9.1vw,40px);aspect-ratio:4.494}
  .hero-awards .crop.hz{height:clamp(24px,7.2vw,32px);aspect-ratio:2.273}
}

/* mobile menu: one dominant green Call Now, two quieter alternates beneath it,
   and the socials pulled up beside the hours so the extra button costs no
   height - everything still has to fit without scrolling. */
#mm .acc .accb,#mm .sub{display:none!important}
#mm .mm-btns{display:grid;grid-template-columns:1fr;gap:9px}
#mm .mm-call{min-height:62px}
#mm .mm-call .cl u{font-size:19px}
#mm .mm-cb{min-height:48px;font-size:13.5px;letter-spacing:.04em;gap:8px;padding:10px 8px}
#mm .mm-cb svg{width:17px;height:17px;flex:0 0 auto}
#mm .mm-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(169,196,216,.2)}
#mm .mm-info{margin:0;padding:0;border-top:0;flex:1 1 auto;gap:10px}
#mm .mm-soc{margin:0;flex:0 0 auto}
#mm .mm-soc a{width:38px;height:38px}
#mm .mm-soc svg{width:16px;height:16px}
@media(max-height:720px){
  #mm .mm-call{min-height:54px}
  #mm .mm-cb{min-height:44px}
  #mm .mm-meta{margin-top:14px;padding-top:12px}
}

/* callback modal on phones: drop the after-hours sentence, tighten the type and
   give the card more height so the whole form fits without scrolling. */
@media(max-width:820px){
  .help-lede .lede-x{display:none}
  .help-card{max-height:94svh}
  .help-main{padding:20px 20px 24px}
  .help-main h3{font-size:clamp(23px,6vw,30px);margin-bottom:9px}
  .help-kick{margin-bottom:9px}
  .help-lede{font-size:13.5px;line-height:1.5;margin-bottom:15px}
  .help-form{gap:10px}
  .help-form input,.help-form textarea{margin-top:6px;padding:11px 13px}
  .help-form textarea{min-height:52px}
  .help-send{padding:14px 18px}
  .help-alt{margin-top:11px;font-size:15px}
  .help-alt a{font-size:16px}
  /* strapline larger and stood off from the logo */
  .help-side{padding:20px 20px 18px;gap:20px}
  .help-side img{width:122px}
  .help-side-t{font-size:20px;line-height:1.2}
}

/* ---- one video treatment everywhere: hero, Meet the Owners, Word Around Town ----
   travelling stroke always running, turning green on hover, and the hero's glass
   play button on every poster. */
.vplayer .hvid-ring{position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;padding:4px;
  background:conic-gradient(from var(--hva),transparent 0 68%,var(--hvc2) 78%,var(--hvc) 86%,var(--hvc2) 92%,transparent 99%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:hvRing 4.6s linear infinite;transition:--hvc .45s ease,--hvc2 .45s ease}
@media(hover:hover) and (pointer:fine){
  .hvid:hover .hvid-ring,.vplayer:hover .hvid-ring{--hvc:#4BC414;--hvc2:rgba(62,174,11,.5)}
}
/* the hero's play button, reused on the other two posters */
.vring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:clamp(60px,6vw,84px);height:clamp(60px,6vw,84px);border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.26);
  border:2px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);
  box-shadow:0 12px 34px rgba(6,14,22,.45);transition:transform .45s var(--ease),background .45s}
.vring svg{width:44%;height:44%;margin-left:8%;transform:none}
.vring::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(255,255,255,.8);animation:playPulse 2.6s var(--ease) infinite;pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .vplay:hover .vring{transform:translate(-50%,-50%) scale(1.08)!important;
    background:rgba(255,255,255,.4)!important;color:#fff!important;border-color:rgba(255,255,255,.9)!important}
}
@media(prefers-reduced-motion:reduce){.vplayer .hvid-ring,.vring::after{animation:none}}

/* same travelling stroke as the videos, in green, on the hero's secondary CTA */
@media(hover:hover) and (pointer:fine){
  .hbtn-help{position:relative}
  .hbtn-help::after{content:"";position:absolute;inset:-2px;border-radius:100px;padding:2px;
    pointer-events:none;opacity:0;transition:opacity .3s ease;
    background:conic-gradient(from var(--hva),transparent 0 66%,rgba(62,174,11,.45) 77%,#4BC414 86%,rgba(62,174,11,.45) 93%,transparent 99%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude}
  .hbtn-help:hover::after{opacity:1;animation:hvRing 2.4s linear infinite}
}
@media(prefers-reduced-motion:reduce){.hbtn-help::after{animation:none}}

/* travelling stroke on the Call Now buttons. Lives on a pseudo-element, so it
   never gives #callbar .c1 a background-color - the iOS toolbar tint still
   reads the bar as having none. */
@property --cnc{syntax:'<color>';initial-value:rgba(255,255,255,.95);inherits:false}
.hbtn-call,#mm .mm-call,#callbar .c1,#nav .btn-call{position:relative}
.hbtn-call::after,#mm .mm-call::after,#callbar .c1::after,#nav .btn-call::after{
  content:"";position:absolute;inset:-2px;border-radius:100px;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--hva),transparent 0 70%,rgba(255,255,255,.35) 80%,var(--cnc) 87%,rgba(255,255,255,.35) 93%,transparent 99%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:hvRing 3.2s linear infinite}
#nav .btn-call::after{inset:0}   /* that one clips its own overflow for the fill wipe */
@media(prefers-reduced-motion:reduce){
  .hbtn-call::after,#mm .mm-call::after,#callbar .c1::after,#nav .btn-call::after{animation:none}
}


/* credential cards: keep the original box sizes, just stop the logos clipping.
   1fr is minmax(auto,1fr), so with overflow:hidden gone the wider lockups were
   able to push their own grid track and unbalance the row - minmax(0,1fr) pins
   the columns back to equal. */
.cred-rest{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cred{overflow:visible}
.cred::after{border-radius:0 0 var(--r-md,18px) var(--r-md,18px)}
.cred-logo,.cred-pair{max-width:100%}
.cred-pair img{max-width:calc(50% - 8px);object-fit:contain}

/* Best of Houzz carries its year in the artwork like Top Choice does - same
   crop treatment, its own ratio (272x70, keeping 58.5%). */
.cred-crop.hz{width:calc(var(--credh) * 2.273)}
/* the hover scale was being applied to the image INSIDE the clipping wrapper,
   so Top Choice grew into its own crop edge. Scale the wrapper instead. */
.cred:hover .cred-crop img{transform:none}
.cred .cred-crop{transition:transform .5s var(--ease)}
.cred:hover .cred-crop{transform:scale(1.03)}

/* ---------- insights strip ---------- */
#insights{background:var(--sand);padding:var(--secpad) 0;position:relative;overflow:hidden}
.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(30px,3.6vw,48px)}
.ins-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tan-deep);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.ins-ph{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.ins-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.ins-tx{display:flex;flex-direction:column;gap:9px;flex:1;padding:clamp(20px,2.2vw,28px)}
.ins-kick{font:800 10px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mid)}
.ins-card h3{font-size:clamp(19px,1.8vw,24px);line-height:1.06;color:var(--navy)}
.ins-card p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0}
.ins-more{margin-top:auto;padding-top:6px;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mid);display:inline-flex;align-items:center;gap:6px;
  transition:gap .35s var(--ease)}
.ins-more i,.ins-all i{font-style:normal}
.ins-all{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(22px,2.6vw,32px);
  font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  border-bottom:2px solid var(--blue);padding-bottom:5px;transition:gap .35s var(--ease),color .35s}
@media(hover:hover) and (pointer:fine){
  .ins-card:hover{border-color:var(--blue)}
  .ins-card:hover .ins-ph img{transform:scale(1.07)}
  .ins-card:hover .ins-more{gap:12px}
  .ins-all:hover{gap:14px;color:var(--mid)}
}
@media(max-width:900px){.ins-grid{grid-template-columns:1fr;gap:12px}}

/* ---------- brands we carry ---------- */
#brands{background:var(--tan);padding:clamp(44px,5.2vw,78px) 0;position:relative;overflow:hidden}
.br-head{display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);flex-wrap:wrap;
  padding-bottom:clamp(18px,2.2vw,28px);border-bottom:1px solid var(--tan-deep)}
.br-head h2{font-size:clamp(21px,2.3vw,32px);line-height:1;color:var(--navy);margin:0}
.br-head p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0;max-width:46ch}
.br-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.br-grid span{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(74px,7.4vw,104px);padding:12px;
  border-right:1px solid var(--tan-deep);border-bottom:1px solid var(--tan-deep);
  font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(17px,1.9vw,26px);letter-spacing:.02em;text-transform:uppercase;
  color:var(--fink);opacity:.72;transition:opacity .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.br-grid span:nth-child(4n){border-right:0}
.br-grid span:nth-last-child(-n+4){border-bottom:0}
.br-grid span.more{font-family:Inter,sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;
  color:var(--body);opacity:.6}
@media(hover:hover) and (pointer:fine){
  .br-grid span:hover{opacity:1;color:var(--navy);background:rgba(255,255,255,.5)}
}
@media(max-width:720px){
  .br-grid{grid-template-columns:1fr 1fr}
  .br-grid span:nth-child(4n){border-right:1px solid var(--tan-deep)}
  .br-grid span:nth-child(2n){border-right:0}
  .br-grid span:nth-last-child(-n+4){border-bottom:1px solid var(--tan-deep)}
  .br-grid span:nth-last-child(-n+2){border-bottom:0}
}




/* ================= INTERIOR PAGES =================
   Photography-led, no breadcrumbs, and enough block types that four pages in a
   row do not read as one template with the words swapped. */

/* ---- hero: one photograph, one idea, centred, no buttons.
   The Call Now pill already lives in the nav; repeating it here just made the
   top of every page a wall of CTAs. ---- */
.phero{position:relative;min-height:clamp(540px,76svh,780px);display:flex;align-items:center;
  text-align:center;overflow:hidden;background:var(--navy);
  padding:calc(env(safe-area-inset-top,0px) + clamp(170px,19vh,220px)) 0 clamp(66px,8vh,104px)}
.phero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.phero-bg img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.08);animation:pheroIn 4.2s var(--ease) forwards}
@keyframes pheroIn{to{transform:scale(1)}}
.phero-scrim{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 46%,rgba(8,19,29,.86) 0%,rgba(8,19,29,.72) 42%,rgba(8,19,29,.5) 74%,rgba(8,19,29,.42) 100%),
             linear-gradient(180deg,rgba(8,19,29,.62) 0%,transparent 30%,transparent 60%,rgba(8,19,29,.72) 100%)}
.phero-inner{position:relative;z-index:2;max-width:1000px;margin:0 auto}
.phero-kick{display:inline-flex;align-items:center;gap:13px;font:800 11px/1 Inter,sans-serif;
  letter-spacing:.26em;text-transform:uppercase;color:var(--blue-pale);margin-bottom:clamp(18px,2.2vw,28px);
  opacity:0;animation:rise .8s var(--ease) .3s forwards}
.phero-kick::before,.phero-kick::after{content:"";width:clamp(24px,3vw,46px);height:2px;background:var(--blue)}
.phero h1{color:#fff;font-size:clamp(42px,6.4vw,92px);line-height:.92;letter-spacing:-.005em;
  margin:0 auto clamp(20px,2.4vw,30px);max-width:16ch;text-shadow:0 4px 44px rgba(6,14,22,.55)}
.phero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.phero h1 .w i{display:inline-block;font-style:normal;transform:translateY(115%);
  animation:wordUp .9s var(--ease) forwards}
.phero h1 em{font-style:normal;color:var(--blue-pale)}
.phero-lede{color:rgba(255,255,255,.9);font-size:clamp(16px,1.55vw,20px);line-height:1.62;
  max-width:56ch;margin:0 auto;opacity:0;animation:rise .9s var(--ease) .95s forwards}
/* a quiet scroll hint instead of a second row of buttons */
.phero-dn{position:absolute;left:50%;bottom:clamp(22px,3vh,38px);z-index:2;transform:translateX(-50%);
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.34);border-radius:14px;
  opacity:0;animation:rise .9s var(--ease) 1.4s forwards}
.phero-dn::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;border-radius:2px;
  background:var(--blue-pale);transform:translateX(-50%);animation:dnDot 2s var(--ease) infinite}
@keyframes dnDot{0%{transform:translate(-50%,0);opacity:0}22%{opacity:1}70%{transform:translate(-50%,15px);opacity:0}100%{opacity:0}}
@media(max-width:760px){
  .phero{min-height:auto;
    padding:calc(env(safe-area-inset-top,0px) + clamp(178px,39vw,224px)) 0 clamp(74px,13vw,96px)}
  .phero-scrim{background:linear-gradient(180deg,rgba(8,19,29,.86) 0%,rgba(8,19,29,.66) 46%,rgba(8,19,29,.92) 100%)}
  .phero h1{font-size:clamp(38px,10.5vw,58px);max-width:none}
  .phero-lede{max-width:40ch}
}

/* ---- big numbered index: the repair hub's spine ---- */
.idx{list-style:none;counter-reset:ix;margin-top:clamp(26px,3.2vw,42px);
  border-top:1px solid var(--tan-deep)}
.idx li{counter-increment:ix;position:relative;display:grid;
  grid-template-columns:clamp(56px,7vw,110px) minmax(0,1.05fr) minmax(0,1.25fr);
  gap:clamp(14px,2.4vw,44px);align-items:baseline;
  padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--tan-deep)}
.idx li::before{content:"0" counter(ix);font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(26px,3.4vw,50px);line-height:.9;color:var(--tan-deep);
  transition:color .45s var(--ease),transform .45s var(--ease)}
.idx b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(21px,2.5vw,36px);line-height:1;text-transform:uppercase;color:var(--navy)}
.idx p{font-size:15.5px;line-height:1.62;color:var(--body);margin:0}
@media(hover:hover) and (pointer:fine){
  .idx li:hover::before{color:var(--mid);transform:translateY(-3px)}
  .idx li:hover b{color:var(--mid)}
}
@media(max-width:820px){
  .idx li{grid-template-columns:clamp(44px,12vw,64px) minmax(0,1fr);align-items:start}
  .idx li p{grid-column:2}
}

/* ---- comparison table: the openers page's spine ---- */
.cmp{margin-top:clamp(28px,3.4vw,46px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;min-width:640px;border-collapse:collapse;text-align:left}
.cmp th,.cmp td{padding:clamp(15px,1.7vw,22px) clamp(12px,1.5vw,22px);
  border-bottom:1px solid var(--tan-deep);vertical-align:top}
.cmp thead th{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(19px,2vw,27px);text-transform:uppercase;color:var(--navy);
  border-bottom:3px solid var(--navy)}
.cmp thead th:first-child{color:var(--body);font-size:11px;font-family:Inter,sans-serif;
  letter-spacing:.16em;font-weight:700;vertical-align:bottom;padding-bottom:calc(clamp(15px,1.7vw,22px) + 4px)}
.cmp tbody th{font:700 11px/1.4 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body);white-space:nowrap}
.cmp td{font-size:15px;line-height:1.55;color:var(--navy)}
.cmp td.no{color:var(--body)}
.cmp tbody tr{transition:background .35s var(--ease)}
@media(hover:hover) and (pointer:fine){.cmp tbody tr:hover{background:var(--blue-faint)}}

/* ---- 'try this first' card: the remotes page's spine ---- */
.chk{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);
  align-items:center;background:var(--navy);border-radius:var(--r-lg);overflow:hidden;
  padding:clamp(30px,4vw,64px);margin-top:clamp(28px,3.4vw,44px)}
.chk h2{color:#fff;font-size:clamp(28px,3.4vw,48px);line-height:.98;margin-bottom:14px}
.chk>div>p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.65;max-width:40ch}
.chk ol{list-style:none;counter-reset:ck;display:grid;gap:12px}
.chk li{counter-increment:ck;display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.055);border:1px solid rgba(169,196,216,.16);
  border-radius:14px;padding:clamp(14px,1.6vw,20px);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.chk li::before{content:counter(ck);flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--blue);color:var(--navy);font:800 13px/28px Inter,sans-serif;text-align:center}
.chk li b{display:block;color:#fff;font-size:15.5px;margin-bottom:3px}
.chk li span{display:block;color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.55}
@media(hover:hover) and (pointer:fine){
  .chk li:hover{background:rgba(255,255,255,.1);border-color:var(--blue)}
}
@media(max-width:860px){.chk{grid-template-columns:1fr}}


/* ---- manufacturer content: summary, spec list, style options ----
   Their site carries a Summary panel and a Design Overview on every door page.
   The first rebuild dropped both and paraphrased the description. This is the
   information a buyer actually compares on, so it comes across verbatim. */
.msum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,20px);
  margin-top:clamp(26px,3.2vw,42px)}
.msum div{background:#fff;border:1px solid var(--tan-deep);border-radius:var(--r-lg);
  padding:clamp(18px,2vw,26px)}
.msum dt{font:700 10px/1 Inter,sans-serif;letter-spacing:.17em;text-transform:uppercase;
  color:var(--body);margin-bottom:11px}
.msum dd{margin:0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(19px,2vw,27px);line-height:1.05;text-transform:uppercase;color:var(--navy)}
@media(max-width:820px){.msum{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.msum{grid-template-columns:1fr}}

.mspec{list-style:none;display:grid;gap:11px;margin-top:clamp(22px,2.6vw,32px);
  max-width:82ch}
.mspec li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.6;
  color:var(--body)}
.mspec li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--blue);margin-top:.6em}

.mopt{list-style:none;display:grid;gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(22px,2.6vw,34px);counter-reset:mo}
.mopt li{counter-increment:mo;display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:clamp(14px,1.8vw,22px);align-items:start;background:#fff;
  border:1px solid var(--tan-deep);border-radius:var(--r-lg);padding:clamp(18px,2vw,26px)}
.mopt li::before{content:counter(mo);display:grid;place-items:center;width:36px;height:36px;
  border-radius:50%;background:var(--navy);color:#fff;font:800 14px/1 Inter,sans-serif}
.mopt b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(18px,1.8vw,24px);line-height:1.05;text-transform:uppercase;
  color:var(--navy);margin-bottom:6px}
.mopt p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}

.mnote{background:var(--blue-faint);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px);margin-top:clamp(24px,3vw,38px);max-width:76ch}
.mnote b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(19px,1.9vw,26px);text-transform:uppercase;color:var(--navy);margin-bottom:10px}
.mnote p{margin:0;font-size:15.5px;line-height:1.68;color:var(--fink)}

/* brochure cards now show the actual PDF cover, as their site does */
.dlx-cov{display:block;aspect-ratio:3/4;border-radius:9px;overflow:hidden;
  background:var(--sand);border:1px solid var(--tan-deep)}
.dlx-cov img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
@media(hover:hover) and (pointer:fine){.dlx:hover .dlx-cov img{transform:scale(1.04)}}


/* ---- three big buttons: the sub-pages of a hub, immediately ---- */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
/* A white card on cream, with a stroke that draws itself round the edge on
   hover. The previous version set its background to --paper, which IS the
   cream - so three cards sat invisibly on the page looking like plain links. */
.hub a{position:relative;display:flex;flex-direction:column;background:#fff;
  border-radius:16px;overflow:hidden;text-decoration:none;isolation:isolate;
  box-shadow:0 1px 0 var(--tan-deep),0 12px 28px -22px rgba(11,26,42,.5);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.hub a::before{content:"";position:absolute;inset:0;border-radius:16px;padding:2px;
  background:conic-gradient(from var(--a,0turn),#319600,var(--blue),#3EAE0B,#319600);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .35s var(--ease);z-index:3;
  pointer-events:none}
.hub a:hover{}
.hub a:hover::before{opacity:1;animation:hubspin 4s linear infinite}
@keyframes hubspin{to{--a:1turn}}
.hub .ph{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--navy)}
.hub .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.hub a:hover .ph img{transform:scale(1.06)}
.hub .tx{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1;
  border-top:1px solid var(--tan-deep)}
.hub .tx b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(21px,2vw,28px);line-height:1.02;text-transform:uppercase;
  color:var(--navy);margin:0 0 10px;letter-spacing:.005em}
.hub .tx p{margin:0 0 20px;font-size:.97rem;line-height:1.6;color:var(--ink-70);flex:1}
.hub .go{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font:700 .78rem/1 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:#319600;padding:13px 20px;border-radius:99px;
  transition:background .3s var(--ease)}
.hub a:hover .go{background:#3EAE0B}
.hub .go i{font-style:normal;transition:transform .3s var(--ease)}
.hub a:hover .go i{transform:translateX(4px)}
@media(max-width:860px){.hub{grid-template-columns:1fr;gap:14px}
  .hub a{flex-direction:row;align-items:stretch}
  .hub .ph{width:40%;aspect-ratio:auto;flex:none}
  .hub .tx{padding:18px;border-top:0;border-left:1px solid var(--tan-deep)}
  .hub .tx p{display:none}.hub .go{padding:11px 16px;font-size:.72rem}}

.wall{columns:4 220px;column-gap:clamp(10px,1.3vw,16px);margin-top:clamp(26px,3.2vw,44px)}
.wall figure{break-inside:avoid;margin:0 0 clamp(10px,1.3vw,16px);border-radius:12px;
  overflow:hidden;background:var(--navy);position:relative}
.wall img{width:100%;height:auto;display:block;transition:transform 1s var(--ease)}
@media(hover:hover) and (pointer:fine){.wall figure:hover img{transform:scale(1.05)}}
@media(max-width:640px){.wall{columns:2 140px}}

/* ---- brochure downloads ----
   These are manufacturer PDFs people send to a spouse before buying. They were
   missing entirely from the first build, which is why this block exists. */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:clamp(12px,1.5vw,20px);margin-top:clamp(28px,3.4vw,44px)}
.dlx{display:flex;flex-direction:column;gap:12px;background:#fff;
  border:1px solid var(--tan-deep);border-radius:var(--r-lg);padding:clamp(20px,2.2vw,28px);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.dlx-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--blue-faint);color:var(--mid);transition:background .4s,color .4s}
.dlx-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dlx b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(17px,1.7vw,21px);line-height:1.05;text-transform:uppercase;color:var(--navy)}
.dlx span.meta{font:700 10px/1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;
  color:var(--body)}
.dlx span.go{margin-top:auto;padding-top:6px;font:800 10.5px/1 Inter,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mid);
  display:inline-flex;align-items:center;gap:7px;transition:gap .35s var(--ease)}
.dlx span.go i{font-style:normal}
@media(hover:hover) and (pointer:fine){
  .dlx:hover{border-color:var(--blue)}
  .dlx:hover .dlx-ic{background:var(--navy);color:#fff}
  .dlx:hover span.go{gap:13px}
}

/* ---- manufacturer product gallery ---- */
.pgal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(10px,1.3vw,18px);margin-top:clamp(26px,3.2vw,42px)}
.pgal figure{margin:0;border-radius:12px;overflow:hidden;background:var(--navy);
  aspect-ratio:3/2;position:relative}
.pgal img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease)}
@media(hover:hover) and (pointer:fine){.pgal figure:hover img{transform:scale(1.06)}}

/* ---- the doors launcher: all 16, no hiding ---- */
.launch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);margin-top:clamp(26px,3.2vw,44px)}
.launch a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tan-deep);
  border-radius:14px;overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.launch .ph{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--navy)}
.launch .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.launch .tx{padding:20px 20px 24px;display:flex;flex-direction:column;gap:8px}
.launch b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(22px,2.1vw,30px);line-height:1.02;text-transform:uppercase;
  letter-spacing:.005em;color:var(--navy)}
/* The Clopay collection is not a footnote - J.Mac is a Clopay dealer and the
   collection name is what people search and what they say on the phone. It was
   set at 9.5px, which is smaller than a legal disclaimer. */
.launch em{font-style:normal;font-family:'Barlow Condensed',Impact,sans-serif;
  font-weight:700;font-size:clamp(14px,1.35vw,19px);line-height:1.15;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
@media(hover:hover) and (pointer:fine){
  .launch a:hover{border-color:var(--blue)}
  .launch a:hover .ph img{transform:scale(1.07)}
}
@media(max-width:1000px){.launch{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.launch{grid-template-columns:1fr 1fr}}

/* ---- work: real finished jobs, photograph first ----
   Alternating full-bleed photographs with the caption card overlapping the
   image, so the page reads as a portfolio rather than a grid of thumbnails. */
.work{display:grid;gap:clamp(56px,7vw,120px);margin-top:clamp(34px,4vw,58px)}
.wk{display:grid;grid-template-columns:minmax(0,1fr);position:relative}
.wk-ph{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy);
  aspect-ratio:16/10;box-shadow:0 30px 70px rgba(15,34,51,.16)}
.wk-ph img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.03);transition:transform 1.4s var(--ease)}
.wk:hover .wk-ph img{transform:scale(1.08)}
.wk-card{position:relative;z-index:2;background:var(--sand);border:1px solid var(--tan-deep);
  border-radius:var(--r-lg);padding:clamp(24px,2.8vw,40px);
  width:min(440px,86%);margin:clamp(-64px,-5vw,-40px) 0 0 clamp(20px,3vw,52px);
  box-shadow:0 24px 54px rgba(15,34,51,.12)}
.wk:nth-child(even) .wk-card{margin-left:auto;margin-right:clamp(20px,3vw,52px)}
.wk-n{font:800 10px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mid);display:block;margin-bottom:12px}
.wk-card h3{font-size:clamp(26px,3vw,40px);line-height:.98;color:var(--navy);margin-bottom:12px}
.wk-card p{font-size:15.5px;line-height:1.65;color:var(--body);margin:0}
.wk-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,2vw,22px)}
.wk-tags span{font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fink);background:var(--blue-faint);border-radius:999px;padding:9px 14px}
@media(max-width:700px){
  .wk-ph{aspect-ratio:4/3}
  .wk-card{width:auto;margin:-32px 12px 0}
  .wk:nth-child(even) .wk-card{margin-right:12px}
}

/* ---- gallery grid ---- */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);
  margin-top:clamp(28px,3.4vw,46px)}
.gal figure{position:relative;margin:0;overflow:hidden;border-radius:14px;
  background:var(--navy);aspect-ratio:3/2}
.gal figure:nth-child(6n+1){grid-column:span 2;aspect-ratio:3/1.32}
.gal img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(28px,3vw,44px) clamp(14px,1.6vw,22px) clamp(13px,1.5vw,19px);
  background:linear-gradient(180deg,transparent,rgba(8,19,29,.82));
  font:700 10.5px/1.35 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .gal figure:hover img{transform:scale(1.06)}
  .gal figure:hover figcaption{opacity:1;transform:none}
}
@media(max-width:760px){
  .gal{grid-template-columns:1fr 1fr}
  .gal figure:nth-child(6n+1){grid-column:span 2}
  .gal figcaption{opacity:1;transform:none}
}

/* ---- review destinations ---- */
.rev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,20px);
  margin-top:clamp(28px,3.4vw,46px)}
.rev-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;
  border:1px solid var(--tan-deep);border-radius:var(--r-lg);padding:clamp(22px,2.5vw,32px);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.rev-card svg{width:30px;height:30px;flex:0 0 auto}
.rev-card b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(20px,2vw,27px);text-transform:uppercase;color:var(--navy);line-height:1}
.rev-card p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0}
.rev-card span.go{margin-top:auto;padding-top:10px;font:700 10.5px/1 Inter,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mid);
  display:inline-flex;align-items:center;gap:7px;transition:gap .35s var(--ease)}
.rev-card span.go i{font-style:normal}
@media(hover:hover) and (pointer:fine){
  .rev-card:hover{border-color:var(--blue)}
  .rev-card:hover span.go{gap:13px}
}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr 1fr}}

/* ---- article body: one narrow column, generous measure ---- */
.art{max-width:720px;margin:0 auto}
.art>*+*{margin-top:clamp(20px,2.2vw,28px)}
.art p{font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.72;color:var(--body)}
.art p.lead{font-size:clamp(19px,1.75vw,24px);line-height:1.55;color:var(--navy);font-weight:500}
.art h2{font-size:clamp(25px,2.6vw,36px);line-height:1.04;color:var(--navy);
  margin-top:clamp(38px,4.2vw,58px)}
.art h3{font-size:clamp(19px,1.8vw,24px);line-height:1.1;color:var(--navy);
  margin-top:clamp(28px,3vw,40px)}
.art ul{list-style:none;display:grid;gap:12px}
.art ul li{display:flex;gap:13px;align-items:flex-start;font-size:16.5px;line-height:1.65;color:var(--body)}
.art ul li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--blue);margin-top:.62em}
.art blockquote{margin:clamp(30px,3.4vw,46px) 0;padding-left:clamp(20px,2.4vw,32px);
  border-left:3px solid var(--blue);font-family:'Barlow Condensed',Impact,sans-serif;
  font-weight:700;font-size:clamp(22px,2.4vw,32px);line-height:1.1;text-transform:uppercase;
  color:var(--navy)}
.art .callout{background:var(--blue-faint);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px);margin:clamp(30px,3.4vw,46px) 0}
.art .callout b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(19px,1.9vw,26px);text-transform:uppercase;color:var(--navy);margin-bottom:9px}
.art .callout p{margin:0;font-size:16px;color:var(--fink)}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  padding-bottom:clamp(20px,2.4vw,30px);margin-bottom:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--tan-deep);
  font:700 10.5px/1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--body)}
.art-meta em{font-style:normal;color:var(--mid)}

/* ---- neighbourhood chips (city pages) ---- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(20px,2.4vw,30px)}
.chips span{font:700 11px/1 Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fink);background:#fff;border:1px solid var(--tan-deep);border-radius:999px;
  padding:11px 16px;transition:border-color .35s var(--ease),color .35s,transform .35s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .chips span:hover{border-color:var(--blue);color:var(--navy)}
}

/* ---- door-style hero: split, not full-bleed. On a product page the door is
   the subject, so it gets its own half of the screen instead of sitting
   behind a scrim with type over it. ---- */
.dhero{position:relative;background:var(--navy);overflow:hidden;
  /* the light header keeps the tall badge logo, so this clears more than the
     wordmark bar needed */
  padding:calc(env(safe-area-inset-top,0px) + clamp(150px,15.5vh,206px))
          var(--gut) clamp(30px,3.6vw,56px)}
.dhero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,3.6vw,64px);align-items:center;
  max-width:1280px;margin:0 auto}
.dhero-tx{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(14px,2vw,34px) 0}
.dhero-tx .phero-kick{color:var(--blue-pale);opacity:0;animation:rise .8s var(--ease) .25s forwards}
.dhero-tx .phero-kick::before,.dhero-tx .phero-kick::after{background:var(--blue)}
.dhero h1{font-size:clamp(36px,4.3vw,62px);line-height:.94;color:#fff;
  margin:0 0 clamp(16px,2vw,24px);max-width:13ch}
.dhero h1 em{font-style:normal;color:var(--blue-pale)}
.dhero-lede{font-size:clamp(16px,1.4vw,19px);line-height:1.62;color:rgba(255,255,255,.85);
  max-width:40ch;margin:0;opacity:0;animation:rise .9s var(--ease) .8s forwards}
.dhero-ph{position:relative;overflow:hidden;background:var(--navy);
  border-radius:var(--r-lg);aspect-ratio:3/2;
  box-shadow:0 26px 60px rgba(15,34,51,.16)}
.dhero-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);animation:pheroIn 4s var(--ease) forwards}
.dhero-mat{position:absolute;left:clamp(14px,1.6vw,22px);bottom:clamp(14px,1.6vw,22px);
  z-index:2;font:800 10px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:rgba(10,23,34,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:10px 15px}
@media(max-width:900px){
  .dhero{padding-top:calc(env(safe-area-inset-top,0px) + clamp(112px,24vw,140px))}
  .dhero-grid{grid-template-columns:1fr;gap:clamp(22px,5vw,32px)}
  .dhero-tx{order:2;padding:0}
  .dhero-ph{order:1;aspect-ratio:16/10}
  .dhero h1{max-width:none}
}

/* ---- spec strip: a floating card, not a band welded to both neighbours ---- */
.specwrap{background:var(--navy);padding:0 var(--gut) clamp(40px,5vw,72px)}
.spec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  max-width:1280px;margin:0 auto;background:#fff;
  border:1px solid var(--tan-deep);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 16px 40px rgba(15,34,51,.07)}
.spec div{padding:clamp(20px,2.3vw,32px) clamp(16px,1.9vw,28px);
  border-right:1px solid var(--tan-deep)}
.spec div:last-child{border-right:0}
.spec dt{font:700 10px/1 Inter,sans-serif;letter-spacing:.17em;text-transform:uppercase;
  color:var(--body);margin-bottom:11px}
.spec dd{margin:0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(17px,1.7vw,23px);line-height:1.06;text-transform:uppercase;color:var(--navy)}
@media(max-width:900px){
  .spec{grid-template-columns:1fr 1fr}
  .spec div:nth-child(2n){border-right:0}
  .spec div{border-bottom:1px solid var(--tan-deep)}
  .spec div:nth-last-child(-n+1){border-bottom:0}
}
@media(max-width:520px){
  .spec{grid-template-columns:1fr}
  .spec div{border-right:0}
  .spec div:last-child{border-bottom:0}
}

/* ---- style switcher: every door in the material, always one click away ---- */
.sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);
  margin-top:clamp(26px,3.2vw,44px)}
.sw a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tan-deep);
  border-radius:14px;overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.sw a[aria-current]{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.sw span.ph{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.sw span.ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.sw b{display:block;padding:14px 15px 16px;font-family:'Barlow Condensed',Impact,sans-serif;
  font-weight:700;font-size:clamp(15px,1.4vw,19px);line-height:1.06;text-transform:uppercase;
  color:var(--navy)}
@media(hover:hover) and (pointer:fine){
  .sw a:hover{border-color:var(--blue)}
  .sw a:hover span.ph img{transform:scale(1.08)}
}
@media(max-width:900px){.sw{grid-template-columns:1fr 1fr}}

/* ---- why us: big ghost numerals behind the cards (about page) ---- */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(30px,3.6vw,48px);counter-reset:wy}
.why article{counter-increment:wy;position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--tan-deep);border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,38px);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.why article::before{content:"0" counter(wy);position:absolute;right:-.14em;top:-.3em;
  font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(96px,11vw,168px);
  line-height:1;color:var(--tan);pointer-events:none;transition:color .5s var(--ease)}
.why h3{position:relative;font-size:clamp(20px,2vw,27px);line-height:1.02;color:var(--navy);
  margin-bottom:11px;max-width:14ch}
.why p{position:relative;font-size:15px;line-height:1.65;color:var(--body);margin:0}
@media(hover:hover) and (pointer:fine){
  .why article:hover{border-color:var(--blue)}
  .why article:hover::before{color:var(--blue-pale)}
}
@media(max-width:900px){.why{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.why{grid-template-columns:1fr}}

/* ---- warranty ledger (about page) ---- */
.warr{background:var(--navy);border-radius:var(--r-lg);overflow:hidden;
  margin-top:clamp(28px,3.4vw,44px)}
.warr-row{display:grid;grid-template-columns:minmax(0,1.25fr) auto auto;
  gap:clamp(14px,2.4vw,40px);align-items:baseline;padding:clamp(20px,2.4vw,32px) clamp(22px,3vw,44px);
  border-bottom:1px solid rgba(169,196,216,.14)}
.warr-row:last-child{border-bottom:0}
.warr-row.hd{background:rgba(255,255,255,.04)}
.warr-row.hd span{font:700 10.5px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.warr-row b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(19px,2vw,28px);line-height:1.04;text-transform:uppercase;color:#fff}
.warr-row i{font-style:normal;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(19px,2.1vw,30px);color:var(--blue-pale);white-space:nowrap;text-align:right}
@media(max-width:700px){
  .warr-row{grid-template-columns:1fr auto;gap:6px 18px}
  .warr-row.hd{display:none}
  .warr-row b{grid-column:1/-1}
  .warr-row i::before{content:attr(data-l) " ";font-family:Inter,sans-serif;font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
}

/* ---- big category cards (doors pages) ---- */
.cat-grid{display:grid;gap:clamp(16px,2vw,28px);margin-top:clamp(30px,3.6vw,48px)}
.cat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  background:#fff;border:1px solid var(--tan-deep);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.cat:nth-child(even) .cat-ph{order:2}
.cat-ph{position:relative;min-height:clamp(230px,26vw,360px);overflow:hidden;background:var(--navy)}
.cat-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.cat-tx{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,3.6vw,58px)}
.cat-tx .skick{color:var(--mid)}
.cat-tx h3{font-size:clamp(26px,3.2vw,46px);line-height:.98;color:var(--navy);margin:13px 0 13px}
.cat-tx p{font-size:15.5px;line-height:1.65;color:var(--body);margin:0 0 clamp(16px,2vw,24px);max-width:42ch}
.cat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(18px,2.2vw,26px)}
.cat-tags span{font:700 10.5px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fink);background:var(--blue-faint);border-radius:999px;padding:9px 14px}
.cat-go{font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  display:inline-flex;align-items:center;gap:9px;border-bottom:2px solid var(--blue);
  padding-bottom:5px;align-self:flex-start;transition:gap .35s var(--ease),color .35s}
.cat-go i{font-style:normal}
@media(hover:hover) and (pointer:fine){
  .cat:hover{border-color:var(--blue)}
  .cat:hover .cat-ph img{transform:scale(1.06)}
  .cat:hover .cat-go{gap:15px;color:var(--mid)}
}
@media(max-width:820px){
  .cat{grid-template-columns:1fr}
  .cat:nth-child(even) .cat-ph{order:0}
  .cat-ph{min-height:210px}
}

/* ---- awards strip, dates cropped off the artwork ---- */
.awrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,4vw,60px);margin-top:clamp(28px,3.4vw,44px);
  padding:clamp(26px,3vw,42px) 0;border-top:1px solid var(--tan-deep);
  border-bottom:1px solid var(--tan-deep)}
.awrow .crop{display:block;overflow:hidden;opacity:.62;transition:opacity .4s var(--ease)}
.awrow .crop img{display:block;height:100%;width:auto;max-width:none}
.awrow .crop.tc{height:clamp(38px,3.6vw,50px);aspect-ratio:4.494}
.awrow .crop.hz{height:clamp(30px,2.8vw,39px);aspect-ratio:2.273}
.awrow .plain{height:clamp(30px,2.8vw,39px);width:auto;opacity:.62;transition:opacity .4s var(--ease)}
@media(hover:hover) and (pointer:fine){.awrow .crop:hover,.awrow .plain:hover{opacity:1}}

/* ---- contact page ---- */
.ctop{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.4vw,76px);align-items:start}
.cways{display:grid;gap:clamp(12px,1.4vw,18px)}
.cway{display:flex;gap:clamp(14px,1.8vw,22px);align-items:flex-start;background:#fff;
  border:1px solid var(--tan-deep);border-radius:var(--r-lg);padding:clamp(18px,2.1vw,26px);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.cway-ic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--blue-faint);color:var(--mid);transition:background .4s,color .4s}
.cway-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.cway b{display:block;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body);margin-bottom:7px}
.cway a,.cway span.v{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(20px,2.1vw,29px);line-height:1.05;color:var(--navy);text-transform:uppercase}
.cway p{font-size:14px;line-height:1.55;color:var(--body);margin:6px 0 0}
@media(hover:hover) and (pointer:fine){
  .cway:hover{border-color:var(--blue)}
  .cway:hover .cway-ic{background:var(--navy);color:#fff}
}
.chours{background:var(--navy);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);color:#fff}
.chours h3{font-size:clamp(21px,2.2vw,30px);line-height:1;color:#fff;margin-bottom:clamp(16px,2vw,24px)}
.chours dl{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0}
.chours dt,.chours dd{padding:11px 0;border-bottom:1px solid rgba(169,196,216,.15);margin:0;
  font-size:15px;line-height:1.3}
.chours dt{color:rgba(255,255,255,.72)}
.chours dd{text-align:right;color:#fff;font-weight:600}
.chours dd.shut{color:rgba(255,255,255,.42);font-weight:400}
.chours .note{margin-top:clamp(16px,2vw,22px);font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.66)}
.chours .note b{color:var(--blue-pale);font-weight:700}

.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,40px);
  margin-top:clamp(30px,3.6vw,48px)}
.tm{background:#fff;border:1px solid var(--tan-deep);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.tm h3{font-size:clamp(23px,2.4vw,34px);line-height:1;color:var(--navy);margin-bottom:6px}
.tm .role{display:block;font:700 10.5px/1.4 Inter,sans-serif;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mid);margin-bottom:clamp(14px,1.7vw,20px)}
.tm p{font-size:15px;line-height:1.68;color:var(--body);margin:0 0 14px}
.tm a{font:700 13px/1 Inter,sans-serif;color:var(--fink);border-bottom:1.5px solid var(--blue);
  padding-bottom:3px;transition:color .35s,border-color .35s}
@media(hover:hover) and (pointer:fine){
  .tm:hover{border-color:var(--blue)}
  .tm a:hover{color:var(--mid);border-color:var(--mid)}
}
.pay{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px);margin-top:clamp(22px,2.6vw,34px)}
.paycard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  min-width:clamp(112px,12vw,152px);padding:clamp(16px,1.9vw,24px) clamp(14px,1.6vw,20px);
  background:#fff;border:1px solid var(--tan-deep);border-radius:14px;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.paycard i{display:flex;align-items:center;justify-content:center;height:30px}
.paycard i svg{height:100%;width:auto;max-width:64px;display:block}
.paycard b{font:700 11px/1 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy)}
@media(hover:hover) and (pointer:fine){
  .paycard:hover{border-color:var(--blue)}
}

/* team cards carry the real photographs */
.tm{display:grid;grid-template-columns:clamp(104px,12vw,150px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px);align-items:start}
.tm-ph{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--blue-faint);
  aspect-ratio:1;border:1px solid var(--tan-deep)}
.tm-ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease)}
@media(hover:hover) and (pointer:fine){.tm:hover .tm-ph img{transform:scale(1.06)}}
@media(max-width:560px){.tm{grid-template-columns:1fr}.tm-ph{width:clamp(120px,42vw,180px)}}

@media(max-width:900px){.ctop{grid-template-columns:1fr}.team{grid-template-columns:1fr}}

/* ---- danger band: springs page only ---- */
.dngr{background:var(--black);padding:clamp(40px,5vw,72px) 0;position:relative;overflow:hidden}
.dngr::before{content:"";position:absolute;inset:0;opacity:.4;
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.028) 22px 44px)}
.dngr-in{position:relative;display:flex;gap:clamp(18px,2.6vw,36px);align-items:center;
  max-width:900px;margin:0 auto}
.dngr svg{flex:0 0 auto;width:clamp(38px,4.4vw,60px);height:clamp(38px,4.4vw,60px);
  stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dngr b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(22px,2.8vw,38px);line-height:1.02;text-transform:uppercase;color:#fff;margin-bottom:8px}
.dngr p{color:rgba(255,255,255,.76);font-size:15.5px;line-height:1.62;margin:0;max-width:60ch}
@media(max-width:600px){.dngr-in{flex-direction:column;text-align:center;align-items:center}}

.psec{background:var(--sand);padding:var(--secpad) 0;position:relative;overflow:hidden}
.psec-alt{background:var(--tan)}

/* ---- symptom list: two columns, editorial, not six identical boxes ---- */
.sg{list-style:none;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(30px,4vw,72px);margin-top:clamp(28px,3.4vw,44px)}
.sg li{display:flex;gap:clamp(14px,1.6vw,20px);align-items:flex-start;
  padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--tan-deep)}
.sg-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-faint);color:var(--mid);
  transition:transform .45s var(--ease),background .45s,color .45s}
.sg-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sg b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(19px,1.8vw,24px);line-height:1.04;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.sg p{font-size:15px;line-height:1.6;color:var(--body);margin:0}
@media(hover:hover) and (pointer:fine){
  .sg li:hover .sg-ic{transform:translateY(-3px) rotate(-5deg);background:var(--navy);color:#fff}
}
@media(max-width:820px){.sg{grid-template-columns:1fr;gap:0}}

/* ---- alternating photo/text split ---- */
.pfeat{position:relative;overflow:hidden;background:var(--navy);padding:0}
.pfeat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.pfeat.rev .pfeat-img{order:2}
.pfeat-img{position:relative;min-height:clamp(320px,44vw,620px);overflow:hidden}
.pfeat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pfeat-body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(38px,5.4vw,92px) clamp(24px,4.4vw,76px)}
.pfeat-body .skick{color:var(--blue-pale)}
.pfeat-body h2{color:#fff;font-size:clamp(30px,3.9vw,58px);line-height:.98;margin:16px 0 16px}
.pfeat-body p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.7;max-width:44ch}
.pfeat-list{list-style:none;display:grid;gap:12px;margin-top:clamp(20px,2.4vw,30px)}
.pfeat-list li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.9);font-size:15px;line-height:1.5}
.pfeat-list svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;stroke:var(--blue);fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover) and (pointer:fine){.pfeat:hover .pfeat-img img{transform:scale(1.06)}}
@media(max-width:900px){.pfeat-grid{grid-template-columns:1fr}.pfeat.rev .pfeat-img{order:0}.pfeat-img{min-height:280px}}

/* ---- numbered process on a rail ---- */
.stp{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,30px);margin-top:clamp(30px,3.6vw,48px);position:relative}
.stp li{position:relative;padding-top:clamp(20px,2.4vw,30px);border-top:3px solid var(--tan-deep);
  transition:border-color .5s var(--ease)}
.stp-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;font:800 14px/1 Inter,sans-serif;margin-bottom:13px}
.stp b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(18px,1.7vw,23px);text-transform:uppercase;color:var(--navy);margin-bottom:7px;line-height:1.04}
.stp p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0}
@media(hover:hover) and (pointer:fine){.stp li:hover{border-color:var(--blue)}}
@media(max-width:900px){.stp{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stp{grid-template-columns:1fr}}

/* ---- pull quote from Jim ---- */
.pq{background:var(--tan);padding:var(--secpad) 0;position:relative;overflow:hidden}
.pq-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3.4vw,52px);align-items:center;
  max-width:960px;margin:0 auto}
.pq img{width:clamp(96px,11vw,150px);height:clamp(96px,11vw,150px);border-radius:50%;object-fit:cover;
  border:4px solid #fff;box-shadow:0 18px 40px rgba(15,34,51,.18)}
.pq blockquote{margin:0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(24px,3.2vw,44px);line-height:1.06;text-transform:uppercase;color:var(--navy)}
.pq cite{display:block;margin-top:14px;font:700 11px/1 Inter,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid);font-style:normal}
@media(max-width:700px){.pq-in{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* ---- stats ---- */
.pstat{background:var(--sand);padding:clamp(40px,5vw,72px) 0}
.pstat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px);text-align:center}
.pstat b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(38px,5vw,72px);line-height:1;color:var(--navy)}
.pstat b i{font-style:normal;color:var(--mid)}
.pstat span{display:block;margin-top:8px;font:700 10.5px/1.4 Inter,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body)}
@media(max-width:700px){.pstat-grid{grid-template-columns:1fr 1fr;gap:26px 16px}}

/* ---- CTA band ---- */
.pband{background:var(--navy);padding:clamp(44px,5.6vw,84px) 0}
.pband-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.pband h2{color:#fff;font-size:clamp(28px,3.6vw,50px);line-height:.98;margin-bottom:10px}
.pband p{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.6;max-width:46ch;margin:0}

/* ---- related services, photo-led ---- */
.sib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(30px,3.6vw,46px)}
.sib{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tan-deep);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.sib-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.sib-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.sib-tx{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:7px;flex:1}
.sib b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(19px,1.8vw,24px);
  text-transform:uppercase;color:var(--navy);line-height:1.04}
.sib p{font-size:14.5px;line-height:1.55;color:var(--body);margin:0}
.sib-go{margin-top:auto;padding-top:8px;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mid);display:inline-flex;align-items:center;gap:6px;transition:gap .35s var(--ease)}
.sib-go i{font-style:normal}
@media(hover:hover) and (pointer:fine){
  .sib:hover{border-color:var(--blue)}
  .sib:hover .sib-ph img{transform:scale(1.07)}
  .sib:hover .sib-go{gap:12px}
}
@media(max-width:900px){.sib-grid{grid-template-columns:1fr}}

/* ---- project case studies: real before/after pairs, spec kept intact ---- */
.wk-ba{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wk-ba figure{position:relative;margin:0;border-radius:12px;overflow:hidden;
  background:var(--ink-05)}
.wk-ba img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.wk-ba figcaption{position:absolute;left:12px;top:12px;
  font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(11,26,42,.72);backdrop-filter:blur(6px);
  padding:7px 11px;border-radius:99px}
.wk-ba figure:last-child figcaption{background:#319600}
.wk-sum{font-size:1.06rem;color:var(--ink-70);margin:0 0 14px}
.wk-q{margin:18px 0;padding:16px 20px;border-left:3px solid #319600;
  background:var(--ink-04);border-radius:0 10px 10px 0}
.wk-q p{font-style:italic;margin:0 0 8px}
.wk-q cite{font-style:normal;font-weight:600;font-size:.9rem;color:var(--ink-60)}
.wk-spec{margin:20px 0 16px;padding:18px 20px;border:1px solid var(--ink-12);
  border-radius:12px;background:var(--paper)}
.wk-spec b{display:block;font:600 .82rem/1.35 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:#319600;margin:0 0 10px}
.wk-spec ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wk-spec li{position:relative;padding-left:18px;font-size:.95rem;color:var(--ink-75)}
.wk-spec li:before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--ink-25)}
.wk-n time{opacity:.55;margin-left:8px;font-variant-numeric:tabular-nums}
@media(max-width:640px){.wk-ba{gap:8px}.wk-ba figcaption{left:8px;top:8px;padding:5px 9px;font-size:10px}}

/* ---- the installed-door wall: captions are the point, not decoration ---- */
.wall{columns:4 260px;column-gap:16px}
.wall figure{break-inside:avoid;margin:0 0 16px;border-radius:12px;overflow:hidden;
  background:var(--paper);border:1px solid var(--ink-10)}
.wall img{width:100%;height:auto;display:block}
.wall figcaption{padding:12px 14px 14px;font-size:.86rem;line-height:1.5;
  color:var(--ink-65)}
/* was a bare sentence sitting on the cream with nothing holding it */
.wall-note{margin:clamp(16px,2vw,24px) 0 0;padding:clamp(16px,1.8vw,22px);
  background:#fff;border:1px solid var(--tan-deep);border-radius:12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wall-note b{font:700 10px/1 Inter,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid);margin-right:4px}
.wall-note span{display:flex;flex-wrap:wrap;gap:8px}
.wall-note i{font-style:normal;font:600 12px/1 Inter,sans-serif;letter-spacing:.02em;
  color:var(--navy);background:var(--sand);border:1px solid var(--tan-deep);
  padding:8px 13px;border-radius:99px}
@media(max-width:600px){.wall{columns:2 150px;column-gap:10px}
  .wall figure{margin-bottom:10px}.wall figcaption{padding:9px 10px 11px;font-size:.78rem}}

/* ---- named product collections: entry doors, Swisstrax tile lines ---- */
.ecolls{display:grid;gap:18px}
.ecoll{border:1px solid var(--ink-12);border-radius:14px;background:var(--paper);
  overflow:hidden}
.ecoll-tx{padding:26px 28px 28px}
.ecoll h3{font:600 1.34rem/1.25 var(--serif);color:var(--ink);margin:0 0 6px;
  letter-spacing:-.01em}
.ecoll-tag{margin:0 0 14px;font:500 .92rem/1.5 var(--sans);color:#319600}
.ecoll p{margin:0 0 16px;color:var(--ink-70);line-height:1.65;max-width:74ch}
.ecoll .mspec{margin:0}
@media(min-width:900px){.ecolls{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ecoll-tx{padding:20px 20px 22px}}

/* ================= product masthead: theirs, in our clothes ================
   Cream ground, not navy - that is where this page was before and where it
   reads best against the photography. Carousel left, Summary right, brochures
   under the summary, all above the fold. */
.pmast{background:var(--cream);padding:clamp(96px,11vw,150px) 0 clamp(40px,5vw,64px);
  position:relative}
.pmast .phero-kick{color:var(--blue);opacity:0;animation:rise .8s var(--ease) .2s forwards}
.pmast .phero-kick::before,.pmast .phero-kick::after{background:var(--blue)}
.pmast h1{font-size:clamp(38px,5vw,72px);line-height:.94;color:var(--navy);
  margin:.18em 0 0;letter-spacing:-.015em}
.pmast-coll{margin:.4em 0 0;font-family:'Barlow Condensed',Impact,sans-serif;
  font-weight:700;font-size:clamp(19px,2.1vw,30px);line-height:1.15;
  letter-spacing:.035em;text-transform:uppercase;color:var(--blue)}
.pmast-lede{margin:1em 0 0;max-width:68ch;font-size:clamp(16px,1.35vw,19px);
  line-height:1.62;color:var(--ink-70)}
.pmast-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(20px,2.6vw,40px);margin-top:clamp(26px,3vw,44px);align-items:start}

/* --- carousel: every product photo in one frame, swipe or tap a dot --- */
.pm-car{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--tan-deep);background:#fff}
.pm-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pm-track::-webkit-scrollbar{display:none}
.pm-track figure{margin:0;flex:0 0 100%;scroll-snap-align:center}
.pm-track img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pm-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;
  gap:7px;pointer-events:none}
.pm-dots a{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 1px 4px rgba(11,26,42,.45);pointer-events:auto;transition:background .25s}
.pm-dots a:hover{background:#fff}

/* --- summary: label, the value exactly as Clopay prints it, then the bar --- */
.pm-sum,.pm-broch{background:#fff;border:1px solid var(--tan-deep);
  border-radius:var(--r-lg);padding:clamp(18px,2vw,26px)}
.pm-broch{margin-top:14px}
.pm-sum h2,.pm-broch h2{font:700 11px/1 Inter,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin:0 0 16px}
.pm-sum dl{margin:0;display:grid;gap:15px}
.pm-row dt{font:700 9.5px/1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-50);margin:0 0 5px}
.pm-row dd{margin:0 0 7px;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(17px,1.7vw,22px);line-height:1.1;letter-spacing:.02em;color:var(--navy)}
.pm-bar{display:block;height:7px;border-radius:99px;background:var(--tan-deep);overflow:hidden}
.pm-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),#319600);
  transform-origin:left;animation:pmgrow .9s var(--ease) both}
.pm-bar-na{opacity:.45}
@keyframes pmgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- brochures, right where the decision is being made --- */
.pm-broch-row{display:flex;gap:10px;flex-wrap:wrap}
.pm-broch-row a{display:block;width:74px;text-decoration:none}
.pm-broch-row img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;
  border:1px solid var(--tan-deep);display:block;transition:transform .3s var(--ease)}
.pm-broch-row a:hover img{transform:translateY(-3px)}
.pm-broch-row span{display:block;margin-top:6px;font-size:10.5px;line-height:1.3;
  color:var(--ink-60)}

@media(max-width:900px){
  .pmast-grid{grid-template-columns:1fr}
  .pm-sum dl{grid-template-columns:1fr 1fr;gap:14px 18px}
}
@media(max-width:520px){
  .pm-sum dl{grid-template-columns:1fr}
  .pm-broch-row a{width:62px}
}

/* ============ before / after: one frame, drag the handle ==================
   Two photographs side by side make you compare. One photograph revealing the
   other makes you feel the change, which is the whole reason the page exists. */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--tan-deep);background:var(--navy);aspect-ratio:3/2;
  touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-b{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none;z-index:3}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
  background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(11,26,42,.25);
  transform:translateX(-1px);pointer-events:none;z-index:2}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 4px 16px rgba(11,26,42,.35)}
.ba-handle::before{content:"";position:absolute;top:50%;left:50%;width:17px;height:10px;
  transform:translate(-50%,-50%);z-index:1;
  background:var(--navy);
  clip-path:polygon(0 50%,6px 0,6px 35%,11px 35%,11px 0,17px 50%,11px 100%,11px 65%,6px 65%,6px 100%)}
.ba-lab{position:absolute;top:14px;z-index:2;font:600 10.5px/1 Inter,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:#fff;padding:7px 12px;
  border-radius:99px;backdrop-filter:blur(6px);pointer-events:none}
.ba-lab-b{left:14px;background:rgba(11,26,42,.72)}
.ba-lab-a{right:14px;background:rgba(49,150,0,.9)}

/* the story is there for whoever wants it, not stacked three screens tall */
.wk-more{margin-top:16px;border-top:1px solid var(--tan-deep);padding-top:14px}
.wk-more summary{cursor:pointer;font:600 .86rem/1 Inter,sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue);list-style:none}
.wk-more summary::-webkit-details-marker{display:none}
.wk-more summary::after{content:" +";font-weight:700}
.wk-more[open] summary::after{content:" \2013"}
.wk-more p{margin:14px 0 0;font-size:.95rem;line-height:1.65;color:var(--ink-70)}
@media(max-width:640px){.ba-lab{top:9px;font-size:9.5px;padding:5px 9px}
  .ba-lab-b{left:9px}.ba-lab-a{right:9px}
  .ba-handle::after{width:34px;height:34px}}

/* Buttons hold still under the cursor. Any lift belongs to cards and tiles,
   which are large enough that a 4px move cannot break their own hover. */
#nav .btn,.hero-cta2 .hbtn,.fbtn,.gtee-cta{will-change:auto}
#nav .btn:hover,#nav .btn:focus-visible,
.hero-cta2 .hbtn:hover,.hero-cta2 .hbtn:focus-visible{transform:none!important}
#nav .btn:active,.hero-cta2 .hbtn:active{transform:translateY(1px)!important}

/* ---- shorter masthead where the content is the point ---- */
.phero-short{min-height:clamp(430px,54vh,560px)}
.phero-short .phero-inner{padding-top:clamp(96px,11vw,132px);
  padding-bottom:clamp(28px,3.5vw,48px)}
.phero-short h1{font-size:clamp(34px,4.6vw,64px)}
.phero-short .phero-lede{max-width:60ch}
.phero-cta{margin:26px 0 0}
.phero-cta .btn{cursor:pointer;font-size:15px;padding:15px 26px}

/* ============ the header on a cream masthead ==============================
   Same header, not a variant: same full badge logo, same Request Callback
   button, same solid bar arriving on scroll. Only the resting link colour
   changes, because white on cream cannot be read. The drop shadow goes too -
   it exists to lift white text off a photograph and has no job on cream. */
#nav.on-cream:not(.solid) .nav-links a,
#nav.on-cream:not(.solid) .nav-links a:visited{color:var(--navy);text-shadow:none}
#nav.on-cream:not(.solid) .nav-links a::after{background:var(--blue)}
#nav.on-cream:not(.solid) .nav-links .caret{color:var(--navy);opacity:.55}
#nav.on-cream:not(.solid) #burger{background:rgba(11,26,42,.06);color:var(--navy);
  border-color:rgba(11,26,42,.22);backdrop-filter:none;-webkit-backdrop-filter:none}
#nav.on-cream:not(.solid) #burger .bl i{background:var(--navy)}
#nav.on-cream:not(.solid) .btn-quiet{color:var(--navy);border-color:rgba(11,26,42,.3);
  background:rgba(11,26,42,.04);text-shadow:none}
#nav.on-cream:not(.solid) .btn-quiet:hover{background:var(--navy);color:#fff}
/* the badge logo carries its own shadow for a photograph; on cream that reads
   as a smudge */
#nav.on-cream:not(.solid) .badge{filter:none}

/* ---- bigger hit areas on the desktop links ----
   13px uppercase text is a small target. The padding grows the clickable box
   without moving anything, and the dropdown still hangs off the same row. */
@media(min-width:901px){
  /* the highlight has to be bigger than the words it sits behind */
  .nav-links a{padding:16px 12px;margin:-16px -2px;border-radius:10px}
  .nav-links a::after{bottom:10px;left:calc(50% - 0px)}
  .nav-links a:hover::after{left:12px;width:calc(100% - 24px)}
  #nav.on-cream:not(.solid) .nav-links a:hover{background:rgba(11,26,42,.05)}
  #nav.solid .nav-links a:hover{background:rgba(255,255,255,.1)}
}

/* ---- the scroll cue was straddling the curved section edge ---- */
.phero-dn{bottom:clamp(58px,7vw,86px)}
.phero-short .phero-dn{display:none}

/* ---- carousel controls you can actually hit ---- */
.pm-car{position:relative}
.pm-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:clamp(46px,4vw,58px);height:clamp(46px,4vw,58px);border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;color:var(--navy);
  background:rgba(255,255,255,.93);box-shadow:0 6px 22px rgba(11,26,42,.3);
  transition:background .25s var(--ease),color .25s var(--ease),opacity .25s}
.pm-arw svg{width:44%;height:44%}
.pm-arw:hover{background:#319600;color:#fff}
.pm-arw:disabled{opacity:.32;cursor:default}
.pm-arw:disabled:hover{background:rgba(255,255,255,.93);color:var(--navy)}
.pm-prev{left:clamp(10px,1.2vw,18px)}
.pm-next{right:clamp(10px,1.2vw,18px)}
.pm-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;
  gap:8px;z-index:4;padding:0 70px}
.pm-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(11,26,42,.45);
  transition:background .25s,transform .25s}
.pm-dots button[aria-current="true"]{background:#fff;transform:scale(1.35)}
.pm-count{position:absolute;right:14px;bottom:12px;z-index:4;
  font:700 11px/1 Inter,sans-serif;letter-spacing:.1em;color:#fff;
  background:rgba(11,26,42,.66);padding:7px 11px;border-radius:99px}
.pm-count b{font-weight:700}
@media(max-width:560px){.pm-dots{padding:0 56px}.pm-count{display:none}}

/* the same drawn stroke the hub cards use, so the two read as one family */
.gtile::before{content:"";position:absolute;inset:0;border-radius:12px;padding:2px;
  background:conic-gradient(from var(--a,0turn),#319600,var(--blue),#3EAE0B,#319600);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .3s var(--ease);z-index:3;
  pointer-events:none}
.gtile:hover::before,.gtile:focus-visible::before{opacity:1;animation:hubspin 4s linear infinite}
.gtile:hover img{transform:scale(1.07)}
.gtile-zoom{position:absolute;right:10px;bottom:10px;z-index:2;width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;color:var(--navy);
  background:rgba(255,255,255,.92);opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.gtile-zoom svg{width:17px;height:17px}
.gtile:hover .gtile-zoom,.gtile:focus-visible .gtile-zoom{opacity:1;transform:none}


.glb::backdrop{background:rgba(11,26,42,.9);backdrop-filter:blur(4px)}
.glb img{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain;
  border-radius:12px;background:var(--navy)}
.glb p{margin:14px auto 0;max-width:70ch;text-align:center;color:#fff;
  font-size:.98rem;line-height:1.6}
.glb-x{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer}
.glb-x:hover{background:#fff;color:var(--navy)}
.glb-nav{position:absolute;top:-46px;left:0;display:flex;gap:8px}
.glb-nav button{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:17px}
.glb-nav button:hover{background:#fff;color:var(--navy)}
@media(max-width:640px){.gwall{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .glb p{font-size:.88rem}}

/* ---- video facades: poster now, YouTube only if you press play ---- */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(14px,1.6vw,22px)}
.vid{position:relative;border-radius:12px;overflow:hidden;background:var(--navy);
  aspect-ratio:16/9;isolation:isolate}
.vid img,.vid iframe{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;display:block}
.vid img{transition:transform .7s var(--ease),filter .4s var(--ease);filter:brightness(.82)}
.vid:hover img{transform:scale(1.05);filter:brightness(.66)}
.vid>button{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
  background:none;cursor:pointer;display:grid;place-items:center;z-index:2}
.vid>button svg{width:66px;height:47px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
  transition:transform .3s var(--ease)}
.vid:hover>button svg{transform:scale(1.09)}
.vid-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 14px 13px;
  font:600 .88rem/1.4 Inter,sans-serif;color:#fff;pointer-events:none;
  background:linear-gradient(transparent,rgba(11,26,42,.86))}
.faq-wrap .vid{margin:16px 0 4px;max-width:460px}
.faq-wrap .vid-cap{display:none}

/* ---- the two people, on About as well as Contact ---- */
.tmrow{display:grid;gap:clamp(18px,2.2vw,30px)}
@media(min-width:860px){.tmrow{grid-template-columns:1fr 1fr}}
/* ============ installed-door mosaic ======================================
   Three tile shapes on a masonry-ish grid, so a wall of forty-seven doors has
   rhythm rather than reading as a spreadsheet. Every tile declares its own
   aspect ratio, so nothing jumps as the images arrive. */
/* Masonry by columns, not grid.
   On a grid, tiles of different heights leave the short ones with dead space
   under them - which is where those uneven gaps came from as the layout
   narrowed. Columns pack each tile directly under the one above it, so the
   gutter is the same everywhere: left, right, top and bottom. */
.gwall{columns:4 230px;column-gap:var(--gg,12px);orphans:1;widows:1}
.gtile{position:relative;display:block;width:100%;padding:0;border:0;
  margin:0 0 var(--gg,12px);background:var(--navy);cursor:zoom-in;
  border-radius:12px;overflow:hidden;aspect-ratio:var(--ar,3/2);isolation:isolate;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  transition:transform .35s var(--ease)}

.gtile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease),filter .4s var(--ease)}
/* the same drawn stroke as the hub cards, so the two read as one family */
.gtile::before{content:"";position:absolute;inset:0;border-radius:12px;padding:2px;
  background:conic-gradient(from var(--a,0turn),#319600,var(--blue),#3EAE0B,#319600);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .3s var(--ease);z-index:3;
  pointer-events:none}
.gtile:hover::before,.gtile:focus-visible::before{opacity:1;animation:hubspin 4s linear infinite}
.gtile:hover img{transform:scale(1.06)}
.gtile-zoom{position:absolute;right:10px;bottom:10px;z-index:2;width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;color:var(--navy);
  background:rgba(255,255,255,.92);opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.gtile-zoom svg{width:17px;height:17px}
.gtile:hover .gtile-zoom,.gtile:focus-visible .gtile-zoom{opacity:1;transform:none}

/* ---- lightbox ----
   Rendered as a direct child of <body>. It has to be: every section here is
   `.edged`, which paints its curved seams with a CSS mask, and a mask makes
   that section a containing block for `position:fixed`. Nested inside one, the
   overlay covered the section rather than the screen and the page scrolled
   behind it. */
.glb{position:fixed;inset:0;z-index:9999;max-width:none;max-height:none;
  display:flex;align-items:center;
  justify-content:center;padding:clamp(64px,7vw,90px) clamp(56px,7vw,110px);
  background:rgba(8,20,32,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s var(--ease);overscroll-behavior:contain}
.glb[hidden]{display:none}
.glb.on{opacity:1}
.glb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;
  max-width:100%;max-height:100%;min-height:0}
.glb-fig img{display:block;min-height:0;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.55)}
.glb-fig figcaption{flex:0 0 auto;max-width:70ch;text-align:center;
  color:rgba(255,255,255,.9);font-size:clamp(.86rem,1vw,1rem);line-height:1.55}
.glb button{position:absolute;z-index:2;display:grid;place-items:center;border:0;
  cursor:pointer;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  transition:background .25s var(--ease),color .25s var(--ease)}
.glb button:hover{background:#fff;color:var(--navy)}
.glb-x{top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);width:46px;height:46px;
  font-size:27px;line-height:1}
.glb-prev,.glb-next{top:50%;transform:translateY(-50%);width:54px;height:54px}
.glb-prev{left:clamp(10px,1.6vw,26px)}
.glb-next{right:clamp(10px,1.6vw,26px)}
.glb-prev svg,.glb-next svg{width:23px;height:23px}
.glb-count{position:absolute;bottom:clamp(14px,2vw,24px);left:50%;
  transform:translateX(-50%);color:rgba(255,255,255,.55);
  font:600 12px/1 Inter,sans-serif;letter-spacing:.12em}
html.glb-open,body.glb-open{overflow:hidden;touch-action:none}
@media(max-width:900px){.gwall{columns:3 190px;--gg:10px}}
@media(max-width:640px){
  .gwall{columns:2 150px;--gg:8px}
  .glb{padding:60px 8px 76px}
  .glb-prev,.glb-next{width:42px;height:42px;top:auto;bottom:14px;transform:none}
  .glb-prev{left:calc(50% - 56px)}.glb-next{right:calc(50% - 56px)}
  .glb-count{bottom:70px}
  .glb-fig img{max-height:calc(100vh - 260px)}
}


/* ---- tablet header: bigger logo, MENU the same height as the callback ---- */
#nav .nav-cta{display:flex;align-items:stretch;gap:clamp(10px,1.2vw,16px)}
#nav .nav-cta .btn,#burger{align-self:stretch}
#burger{padding:0 22px;min-height:54px}
@media(max-width:1180px){
  #nav .badge{height:clamp(104px,12vw,132px)}
  #nav.solid .wordmark{height:56px}
  #burger{padding:0 24px;font-size:12.5px}
}
@media(max-width:560px){
  #nav .btn-cb .cl small{display:none}
  #nav .btn-cb{padding:12px 18px}
  #burger{padding:0 16px}
  #burger .bt-open,#burger .bt-close{display:none}
  #nav .badge{height:clamp(84px,20vw,104px)}
}

/* ---- project case studies ------------------------------------------------
   One card per job. Spacing comes from a single flex `gap` on the text column
   instead of a margin on every child - competing margins are what pushed the
   divider hard against the pills and let the summary collide with the spec
   panel. Two type sizes only: the condensed face for the name, Inter for the
   rest. */
.work{display:grid;gap:clamp(20px,2.4vw,32px);margin-top:clamp(34px,4vw,58px)}
.wk{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,3vw,46px);align-items:center;
  background:#fff;border:1px solid var(--tan-deep);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,32px);
  box-shadow:0 1px 0 var(--tan-deep),0 18px 44px -30px rgba(15,34,51,.4)}
.wk:nth-child(even){direction:rtl}
.wk:nth-child(even)>*{direction:ltr}
.wk .ba{aspect-ratio:4/3;border-radius:14px}
.wk-card{position:static;width:auto;margin:0;padding:0;background:transparent;
  border:0;box-shadow:none;display:flex;flex-direction:column;gap:14px;
  align-self:stretch;justify-content:center}
.wk-card>*{margin:0}
.wk-n{display:flex;align-items:baseline;gap:10px;
  font:700 10px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mid)}
.wk-n time{opacity:.6;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.wk-card h3{font-size:clamp(25px,2.7vw,38px);line-height:1;color:var(--navy)}
.wk-sum{font:400 15.5px/1.62 Inter,sans-serif;color:var(--body)}
.wk-spec{padding:18px 20px;border:1px solid var(--tan-deep);border-radius:12px;
  background:var(--sand)}
.wk-spec b{display:block;font:700 10px/1 Inter,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:#2C7A00;margin-bottom:12px}
.wk-spec ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wk-spec li{position:relative;padding-left:16px;
  font:400 14.5px/1.45 Inter,sans-serif;color:var(--body)}
.wk-spec li::before{content:"";position:absolute;left:0;top:.58em;width:5px;
  height:5px;border-radius:50%;background:var(--blue)}
.wk-tags{display:flex;flex-wrap:wrap;gap:8px}
.wk-tags span{font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fink);background:var(--blue-faint);
  border:1px solid var(--blue-pale);padding:9px 13px;border-radius:99px}
.wk-go{display:inline-flex;align-items:center;gap:9px;width:100%;
  margin-top:6px;padding-top:18px;border-top:1px solid var(--tan-deep);
  font:700 11.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#2C7A00;text-decoration:none}
.wk-go i{font-style:normal;transition:transform .3s var(--ease)}
.wk-go:hover i{transform:translateX(5px)}
@media(max-width:900px){
  .wk{grid-template-columns:1fr;gap:20px;padding:16px}
  .wk:nth-child(even){direction:ltr}
  .wk-card{justify-content:flex-start}
}
/* ---- closing band ----
   Green ground so the last thing on the page is the brand's action colour,
   and the Call Now button goes quiet-white against it: on green, a green
   button is invisible. */
.pband{background:#2C7A00}
.pband-in{align-items:center}
.pband h2,.pband p{color:#fff}
.pband p{opacity:.86}
.pband .btn-call{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.6);
  box-shadow:none;backdrop-filter:blur(6px)}
.pband .btn-call .fill{background:#fff}
.pband .btn-call .cl u{color:#fff}
.pband .btn-call .cl small{color:rgba(255,255,255,.8)}
.pband .btn-call svg{stroke:#fff}
.pband .btn-call:hover{border-color:#fff}
.pband .btn-call:hover .cl u,.pband .btn-call:hover .cl small{color:#14401A}
.pband .btn-call:hover svg{stroke:#14401A}

/* ============ shared lightbox =============================================
   One component for every modal that is not the callback form, built on the
   same pattern as it: fixed to the viewport, grid-centred, dark backdrop, X in
   the top right. Appended to <body> by build.py - inside a section it would be
   trapped by the CSS mask that draws the curved seams. */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(12px,3vw,40px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease)}
.lb[hidden]{display:none}
.lb.open{opacity:1;pointer-events:auto}
.lb-back{position:absolute;inset:0;background:rgba(6,14,22,.86);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.lb-card{position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(760px,100%);max-height:92svh;background:var(--sand);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 50px 120px rgba(4,10,16,.6);
  transform:translateY(18px) scale(.98);transition:transform .38s var(--ease)}
.lb.open .lb-card{transform:none}
.lb-head{position:relative;flex:0 0 auto;padding:20px clamp(58px,7vw,74px) 18px clamp(20px,2.4vw,30px);
  background:var(--navy);color:#fff}
.lb-head b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(20px,2.2vw,27px);text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.lb-head span{display:block;margin-top:5px;font:400 13px/1.4 Inter,sans-serif;
  color:rgba(255,255,255,.72)}
.lb-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;
  border-radius:50%;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;
  font-size:15px;line-height:1;display:grid;place-items:center;
  transition:background .25s var(--ease),color .25s var(--ease)}
.lb-x:hover{background:#fff;color:var(--navy)}
.lb-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  background:#fff;-webkit-overflow-scrolling:touch}
.lb-body img{width:100%;height:auto;display:block}
.lb-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px clamp(20px,2.4vw,30px);background:var(--sand);
  border-top:1px solid var(--tan-deep)}
.lb-foot span{font:400 12.5px/1.3 Inter,sans-serif;color:var(--body)}
.lb-foot a{font:700 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:#2C7A00;padding:12px 18px;border-radius:99px}
.lb-foot a:hover{background:#3EAE0B}
html.lb-open,body.lb-open{overflow:hidden}
@media(max-width:560px){.lb-foot{flex-direction:column;align-items:stretch;text-align:center}}

/* ---- the chart's trigger card ----
   The old one put a stamp-sized thumbnail beside a mostly empty white field.
   The chart is the product here, so it gets real size and the text sits beside
   it in a column that actually ends. */
.cchart{display:grid;grid-template-columns:clamp(150px,17vw,230px) minmax(0,1fr);
  gap:clamp(20px,2.6vw,38px);align-items:center;width:100%;text-align:left;
  cursor:pointer;background:#fff;border:1px solid var(--tan-deep);
  border-radius:var(--r-lg);padding:clamp(18px,2.2vw,28px);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cchart:hover{border-color:var(--blue)}
.cchart-thumb{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--tan-deep);
  background:#fff;box-shadow:0 10px 26px -16px rgba(15,34,51,.5)}
.cchart-thumb img{width:100%;height:auto;display:block}
.cchart-tx{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cchart-tx b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;
  font-size:clamp(23px,2.4vw,34px);line-height:1.02;text-transform:uppercase;
  color:var(--navy)}
.cchart-p{font:400 15px/1.6 Inter,sans-serif;color:var(--body);max-width:56ch}
.cchart-meta{display:flex;flex-wrap:wrap;gap:8px}
.cchart-meta i{font-style:normal;font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fink);background:var(--blue-faint);
  border:1px solid var(--blue-pale);padding:9px 13px;border-radius:99px}
.cchart-go{display:inline-flex;align-items:center;gap:9px;
  font:700 11.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:#2C7A00;padding:14px 22px;border-radius:99px}
.cchart:hover .cchart-go{background:#3EAE0B}
.cchart-go em{font-style:normal;transition:transform .3s var(--ease)}
.cchart:hover .cchart-go em{transform:translateX(4px)}
@media(max-width:700px){.cchart{grid-template-columns:1fr;gap:18px}
  .cchart-thumb{max-width:200px}}

/* ---- buttons never move under the cursor ----
   A lift of a couple of pixels takes the button out from under the pointer at
   its lower edge: hover ends, it drops back, hover fires again. That is the
   jitter, and it was still on every button outside the header. */
/* superseded: a blanket button rule also stripped structural transforms
   such as the carousel arrows' translateY(-50%) centring */
.btn:hover,.btn:focus-visible{transform:none}
.btn:active{transform:translateY(1px)}

/* ---- header proportions ----
   The logo is the fixed point: it stays at full size and everything else is
   trimmed to fit beside it. Aligning the menu to the logo's optical centre
   stops it sitting high against a badge this tall. */
#nav .badge{height:clamp(104px,11vw,148px)}
#nav .nav-links{align-self:center}
#nav .nav-cta{margin-left:0}
#nav .btn-call{padding:12px 20px}
#nav .btn-call .cl u{letter-spacing:.06em}
@media(min-width:1181px) and (max-width:1420px){
  .nav-links a{padding:16px 9px;font-size:12.5px}
  #nav .btn-call{padding:11px 16px}
  #nav .badge{height:clamp(96px,9.4vw,120px)}
}

/* ---- the two dropdown triggers carry a caret ----
   `.mtrig` had `padding:6px 0` while the plain links had `16px 12px`, so the
   caret sat hard against the next word with nothing after it. These need MORE
   right padding than a plain link, not less: the caret is part of the control,
   so the gap has to be measured from the caret's edge, not the text's. */
@media(min-width:1181px){
  #nav .nav-links .mtrig{padding:16px 16px 16px 12px;margin:-16px -2px;
    border-radius:10px}
  #nav .nav-links .mtrig .caret{margin-left:1px}
  #nav .nav-links .mtrig::after{bottom:10px;left:12px;width:0}
  /* the earlier hover rule sets left:0; without restating it here the
     underline starts at the box edge instead of under the first letter */
  #nav .nav-links .mtrig:hover::after,
  #nav .nav-links .mtrig[aria-expanded="true"]::after,
  #nav .hasmenu:hover .mtrig::after{left:12px;width:calc(100% - 28px)}
  #nav.on-cream:not(.solid) .nav-links .mtrig:hover{background:rgba(11,26,42,.05)}
  #nav.solid .nav-links .mtrig:hover{background:rgba(255,255,255,.1)}
}

/* ---- buttons hold absolutely still ----
   Not just no transform: no change of shadow geometry either. A shadow that
   grows and drops 14px below the button on hover looks exactly like the button
   lifting - which is the "glitch" that survived three rounds of me removing
   transforms that were never there. The glow sits at the same offset always;
   only its opacity moves. */
.btn,.gtee-cta,.fbtn{--glow:0;
  box-shadow:0 8px 22px rgba(15,34,51,calc(.18 * var(--glow)));
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover,.btn:focus-visible,.gtee-cta:hover,.fbtn:hover{--glow:1}
.btn:hover,.btn:focus-visible,.gtee-cta:hover,.gtee-cta:focus-visible,
.fbtn:hover,.fbtn:focus-visible,.cchart:hover,.cchart:focus-visible{transform:none}
/* structural transforms must survive hover, or the element relocates */
.pm-arw:hover,.pm-arw:focus-visible{transform:translateY(-50%)}
.glb-prev:hover,.glb-next:hover{transform:translateY(-50%)}
.lb-x:hover,.glb-x:hover,.cmp-x:hover{transform:none}
.btn:active,.gtee-cta:active,.fbtn:active{transform:translateY(1px)}

/* ---- the menu sits closer to the callback button ---- */
@media(min-width:1181px){
  #nav .bar{gap:clamp(10px,1.2vw,20px)}
  #nav .nav-links{margin-right:clamp(3px,.5vw,8px)}
}

/* ---- dropdown: highlight stays inside the card, text lines up with the
   green button above it ---- */
#nav .mpanel{padding:18px}
#nav .mpanel.mp-sm{padding:18px}
#nav .mpanel.mp-lg{padding:22px 26px 28px}
#nav .mpanel a.mp-all{padding:18px 24px}
#nav .mp-h{padding-left:24px}
#nav .mp-lg>div+div:not(.mp-feat){padding-left:clamp(10px,1.4vw,20px)}

/* ---- largest desktop: 50px of extra reach each way ----
   The header and the hero share one width, so the logo lines up with the
   headline on the left and the callback button lines up with the video on the
   right. Widening only one of them is what knocked them out of alignment
   before. */
@media(min-width:1440px){
  #nav .wrap,#hero .hero-inner,.hero-inner{max-width:1380px}
}

/* ---- product masthead: clear the header, and less of a plain wall ----
   The kicker was landing under the logo because the masthead's top padding was
   measured against a shorter bar than the one we now have. */
.pmast{padding-top:clamp(150px,15vw,210px);position:relative;overflow:hidden}
.pmast::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 88% -10%,rgba(169,196,216,.34) 0%,transparent 62%),
    radial-gradient(90% 70% at -10% 8%,rgba(232,223,206,.55) 0%,transparent 58%)}
.pmast>.wrap{position:relative;z-index:1}
.pmast .phero-kick{display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.72);border:1px solid var(--tan-deep);
  padding:9px 16px;border-radius:99px;backdrop-filter:blur(4px)}
.pmast h1{margin-top:.28em}
.pmast-coll{position:relative;display:inline-block;padding-bottom:12px}
.pmast-coll::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;
  border-radius:2px;background:linear-gradient(90deg,#2C7A00,var(--blue))}
.pm-car{box-shadow:0 30px 70px -40px rgba(15,34,51,.7)}
.pm-sum{box-shadow:0 20px 50px -38px rgba(15,34,51,.6)}
@media(max-width:900px){.pmast{padding-top:clamp(128px,26vw,168px)}}

/* ---- door masthead: centred ---- */
.pmast>.wrap{text-align:center}
.pmast .phero-kick{margin-left:auto;margin-right:auto}
.pmast-lede{margin-left:auto;margin-right:auto}
.pmast-coll::after{left:50%;transform:translateX(-50%)}
.pmast-grid{text-align:left}

/* ---- the bar gets out of the way at the footer ----
   A fixed header over the footer is just a lid on the page. It slides away
   once the footer is in view and comes back the moment you leave it. */
#nav{transition:.45s var(--ease),transform .4s var(--ease)}
#nav.atfoot{transform:translateY(-102%);pointer-events:none}
#nav.atfoot .mpanel{opacity:0!important;visibility:hidden!important}

/* ---- the bar on a phone ----
   Wordmark and the menu button. No CTA. The callback button belongs to tablet
   and desktop; it crept onto phones when the old `max-width:900px` rule that
   hid it was removed, and it has been wrong ever since. */
@media(max-width:760px){
  #nav .nav-cta .btn,#nav .btn-cb,#nav .btn-quiet{display:none!important}
  #nav .bar{gap:12px}
}

/* ---- tablet: callback + MENU pinned right ----
   Below 1180px `.nav-links` is display:none, so the `margin-left:auto` that
   pushes the group right on desktop is sitting on an element that no longer
   exists in the layout - and the button and burger collapse back against the
   logo. The auto margin has to move to whatever is actually the first visible
   item in the group at this width. */
@media(max-width:1180px){
  /* v80's mechanism, restored verbatim: the logo's auto margin absorbs the
     free space and pins the callback + MENU group to the right edge. This is
     what was deleted in v142 to close the desktop logo gap, and it is why
     tablet and phone collapsed against the logo. */
  #nav .logo{margin-right:auto}
  #nav .nav-cta{margin-left:auto}
}
@media(max-width:760px){
  /* Phone: logo + MENU only, group pinned right.

     The auto margin has to be on `.nav-cta`, not on `#burger` - the burger is
     a CHILD of .nav-cta, so an auto margin on it only pushes it within a box
     that is already only as wide as its contents, and the whole group stays
     against the logo.

     v80 achieved this with `#nav .logo{margin-right:auto}`, one rule that
     pushed the right-hand group out at every width. That was removed in v142
     to close the desktop logo gap; desktop and tablet were given their own
     auto margins to compensate and the phone case was missed. */
  #nav .logo{margin-right:auto}
  #nav .nav-cta{margin-left:auto}
}