/* ==========================================================================
   BKM Building Solutions — global stylesheet

   All presentation lives here. No page, include or script writes a style
   attribute except for genuinely per-instance values (a photo URL, a carousel
   offset, a count-up figure); everything else is a class in this file.

   Contents
     1.  Tokens
     2.  Reset and base
     3.  Keyframes
     4.  Utilities
     5.  Buttons and links
     6.  Header / navigation
     7.  Mobile drawer
     8.  Footer
     9.  Shared page sections (hero, split, cards, stats, pills, CTA)
     10. Home page
     11. Inner pages (projects, blog, article, contact, about)
     12. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  --ink:#16283a;
  --ink-deep:#0f1e2c;
  --ink-mid:#2c4055;
  --body:#455b70;
  --muted:#74879a;
  --line:#d9e3ed;
  --line-mid:#b6c6d6;
  --paper:#f4f8fc;
  --blue:#1e4a72;
  --blue-dark:#16385a;
  --sky:#8fc1f0;
  --fog:#9db1c5;
  --mist:#c6d4e2;
  --hair-light:rgba(244,248,252,.16);

  --serif:'Source Serif 4',serif;
  --sans:'Libre Franklin',sans-serif;

  --pad:64px;          /* section side padding, narrowed at breakpoints */
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */
*{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  overflow-x:hidden;-webkit-text-size-adjust:100%;
}
/* overflow-x:hidden makes the root a scroll container, and that stops
   position:sticky working anywhere on the page — including the scrubbed hero.
   `clip` keeps the horizontal overflow hidden without the side effect; the
   declaration above stays as the fallback for browsers without it, and
   assets/js/main.js checks the same feature before pinning the hero. */
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
img{max-width:100%;display:block}
svg{display:block}
button{font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ==========================================================================
   3. Keyframes
   ========================================================================== */
@keyframes gridDrift{from{background-position:0 0}to{background-position:36px 36px}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hatchDrift{from{background-position:0 0}to{background-position:28.28px 28.28px}}

/* The sent popup. Both play on the element's first paint, which is what lets
   the popup be opened by removing [hidden] and nothing else. */
@keyframes modalVeil{from{opacity:0}to{opacity:1}}
@keyframes modalCard{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ==========================================================================
   4. Utilities
   ========================================================================== */
.sec{padding:88px var(--pad)}
/* A narrower column for sections that read rather than scan — the questions and
   answers, where a full-width row makes for an uncomfortably long line.
   Everything inside shrinks together, so the heading and the list keep the same
   edges. max() is what stops it: below about 1300px the inset falls back to the
   ordinary section padding rather than squeezing the content further. */
.sec--inset{
  padding-left:max(var(--pad),(100% - 1180px) / 2);
  padding-right:max(var(--pad),(100% - 1180px) / 2);
}
.sec--tight{padding:80px var(--pad) 20px}
.sec--light{background:#fff}
.sec--paper{background:var(--paper)}
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--divider{border-top:1px solid var(--line)}
/* dotted field used behind most card grids */
.sec--dotted{
  background:var(--paper);
  background-image:radial-gradient(rgba(30,74,114,.13) 1.5px,transparent 1.5px);
  background-size:28px 28px;
}
.hpad{padding-left:var(--pad);padding-right:var(--pad)}
.nowrap{white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   Photo classes

   The site draws on a fixed set of six photographs. Naming them here keeps the
   URLs out of the markup entirely — pages and main.js pick a photo by adding
   one of these classes to any element that already has background-size:cover.
   Mirrors bkm_photo() in includes/config.php and PHOTO in assets/js/main.js.
   -------------------------------------------------------------------------- */
.ph-interior{background-image:url(https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1800&q=80&auto=format&fit=crop)}
.ph-kitchen {background-image:url(https://images.unsplash.com/photo-1556912167-f556f1f39fdf?w=1800&q=80&auto=format&fit=crop)}
.ph-bath    {background-image:url(https://images.unsplash.com/photo-1620626011761-996317b8d101?w=1800&q=80&auto=format&fit=crop)}
/* a finished basement lounge — the room a development ends at, rather than the
   bare space it starts from */
.ph-basement{background-image:url(https://images.unsplash.com/photo-1765959617888-30837a158667?w=1800&q=80&auto=format&fit=crop)}
.ph-exterior{background-image:url(https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1800&q=80&auto=format&fit=crop)}
.ph-reno    {background-image:url(https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1800&q=80&auto=format&fit=crop)}
.ph-living  {background-image:url(https://images.unsplash.com/photo-1633330977020-2bdfb8530cc2?w=1800&q=80&auto=format&fit=crop)}
/* Commercial and multi-family. Kept in step with the map in bkm_photo(). */
.ph-childcare  {background-image:url(https://images.unsplash.com/photo-1567746455504-cb3213f8f5b8?w=1800&q=80&auto=format&fit=crop)}
.ph-medclinic  {background-image:url(https://images.unsplash.com/photo-1608979827489-2b855e79debe?w=1800&q=80&auto=format&fit=crop)}
.ph-dental     {background-image:url(https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=1800&q=80&auto=format&fit=crop)}
.ph-pharmacy   {background-image:url(https://images.unsplash.com/photo-1754321159253-8c9bd02cfb4c?w=1800&q=80&auto=format&fit=crop)}
.ph-restaurant {background-image:url(https://images.unsplash.com/photo-1551530241-1ccbaa7a9a84?w=1800&q=80&auto=format&fit=crop)}
.ph-retail     {background-image:url(https://images.unsplash.com/photo-1759050486852-fdfe2fdc7bea?w=1800&q=80&auto=format&fit=crop)}
.ph-office     {background-image:url(https://images.unsplash.com/photo-1637665627832-dcd730049fbb?w=1800&q=80&auto=format&fit=crop)}
.ph-industrial {background-image:url(https://images.unsplash.com/photo-1771530789155-b1f03fbf82b5?w=1800&q=80&auto=format&fit=crop)}
.ph-groundup   {background-image:url(https://images.unsplash.com/photo-1649587345666-0f4ad68aa723?w=1800&q=80&auto=format&fit=crop)}
.ph-multifamily{background-image:url(https://images.unsplash.com/photo-1778375744848-e7757f0254e6?w=1800&q=80&auto=format&fit=crop)}
/* The four stages of a job — used by the "How it works" steps on the home page. */
.ph-consult   {background-image:url(https://images.unsplash.com/photo-1632862378069-4ad0348cea4f?w=1800&q=80&auto=format&fit=crop)}
.ph-planning  {background-image:url(https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1800&q=80&auto=format&fit=crop)}
.ph-building  {background-image:url(https://images.unsplash.com/photo-1587582423116-ec07293f0395?w=1800&q=80&auto=format&fit=crop)}
.ph-handover  {background-image:url(https://images.unsplash.com/photo-1733244766159-f58f4184fd38?w=1800&q=80&auto=format&fit=crop)}
/* The five reasons panels on the home page. */
.ph-crew      {background-image:url(https://images.unsplash.com/photo-1632862378103-8248dccb7e3d?w=1800&q=80&auto=format&fit=crop)}
.ph-paperwork {background-image:url(https://images.unsplash.com/photo-1562564055-71e051d33c19?w=1800&q=80&auto=format&fit=crop)}
.ph-updates   {background-image:url(https://images.unsplash.com/photo-1608303588026-884930af2559?w=1800&q=80&auto=format&fit=crop)}
.ph-tiling    {background-image:url(https://images.unsplash.com/photo-1523413307857-ef24c53571ae?w=1800&q=80&auto=format&fit=crop)}
/* The second band on each commercial page — the thing that actually decides the
   job, not another photograph of the finished room. */
.ph-playroom  {background-image:url(https://images.unsplash.com/photo-1763310225230-6e15b125935a?w=1800&q=80&auto=format&fit=crop)}
.ph-ductwork  {background-image:url(https://images.unsplash.com/photo-1673978484102-f91886ca3452?w=1800&q=80&auto=format&fit=crop)}
.ph-roughin   {background-image:url(https://images.unsplash.com/photo-1768321910936-7b127ebbd5e4?w=1800&q=80&auto=format&fit=crop)}
.ph-dispensary{background-image:url(https://images.unsplash.com/photo-1671108503276-1d3d5ab23a3a?w=1800&q=80&auto=format&fit=crop)}
.ph-hood      {background-image:url(https://images.unsplash.com/photo-1760001553414-5634201efc36?w=1800&q=80&auto=format&fit=crop)}
.ph-mall      {background-image:url(https://images.unsplash.com/photo-1762807039386-35cf41decf51?w=1800&q=80&auto=format&fit=crop)}
.ph-fitout    {background-image:url(https://images.unsplash.com/photo-1736182615481-3795ea557614?w=1800&q=80&auto=format&fit=crop)}
.ph-warehouse {background-image:url(https://images.unsplash.com/photo-1553413077-190dd305871c?w=1800&q=80&auto=format&fit=crop)}
.ph-landsite  {background-image:url(https://images.unsplash.com/photo-1628158088936-68ccaaa400dc?w=1800&q=80&auto=format&fit=crop)}
.ph-multiunit {background-image:url(https://images.unsplash.com/photo-1732589701739-e59f2441cbeb?w=1800&q=80&auto=format&fit=crop)}
/* The home page's "What we build" cards. */
/* a low-rise Calgary commercial building with its parking out front — the
   scale of work the firm actually takes on, not a downtown tower */
.ph-plaza     {background-image:url(https://images.unsplash.com/photo-1461694901205-be808d220b0a?w=1800&q=80&auto=format&fit=crop)}
.ph-island    {background-image:url(https://images.unsplash.com/photo-1704383014594-01bc24b6b840?w=1800&q=80&auto=format&fit=crop)}
.ph-ensuite   {background-image:url(https://images.unsplash.com/photo-1696987007764-7f8b85dd3033?w=1800&q=80&auto=format&fit=crop)}
.ph-recroom   {background-image:url(https://images.unsplash.com/photo-1650090974911-94b90ea2a833?w=1800&q=80&auto=format&fit=crop)}
/* One per testimonial. */
.ph-waitroom  {background-image:url(https://images.unsplash.com/photo-1779281887548-f676406dea2f?w=1800&q=80&auto=format&fit=crop)}
.ph-openplan  {background-image:url(https://images.unsplash.com/photo-1773578978637-c9771e7a9913?w=1800&q=80&auto=format&fit=crop)}
.ph-plexfront {background-image:url(https://images.unsplash.com/photo-1650856530024-acd586363504?w=1800&q=80&auto=format&fit=crop)}
/* The same band on the residential and multi-family pages. */
.ph-lotwork   {background-image:url(https://images.unsplash.com/photo-1778066994998-97f74a5bf901?w=1800&q=80&auto=format&fit=crop)}
.ph-selections{background-image:url(https://images.unsplash.com/photo-1752321531399-1e2b66043b52?w=1800&q=80&auto=format&fit=crop)}
.ph-stripout  {background-image:url(https://images.unsplash.com/photo-1768321902047-2296fd495fa4?w=1800&q=80&auto=format&fit=crop)}
.ph-lots      {background-image:url(https://images.unsplash.com/photo-1770936996689-e2a9d61a144f?w=1800&q=80&auto=format&fit=crop)}
.ph-cabinetry {background-image:url(https://images.unsplash.com/photo-1618832515490-e181c4794a45?w=1800&q=80&auto=format&fit=crop)}
.ph-wetwall   {background-image:url(https://images.unsplash.com/photo-1632214531975-b4c9198c01f8?w=1800&q=80&auto=format&fit=crop)}
.ph-unfinished{background-image:url(https://images.unsplash.com/photo-1768321916027-d0f69289227f?w=1800&q=80&auto=format&fit=crop)}
.ph-mechanical{background-image:url(https://images.unsplash.com/photo-1650551182991-b07558247564?w=1800&q=80&auto=format&fit=crop)}

/* Drifting blueprint grid overlay, used on dark heroes and the CTA band */
.grid-drift{
  position:absolute;left:0;top:0;bottom:0;width:58%;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(244,248,252,.05) 0 1px,transparent 1px 36px),
    repeating-linear-gradient(90deg,rgba(244,248,252,.05) 0 1px,transparent 1px 36px);
  animation:gridDrift 5s linear infinite;
}
.grid-drift--wide{width:60%}

/* Eyebrow label above headings */
.eyebrow{
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);font-weight:600;margin-bottom:16px;
}
.eyebrow--light{color:var(--sky)}
.eyebrow--rule{display:flex;align-items:center;gap:12px;letter-spacing:.2em}
.eyebrow--rule::before{content:"";width:36px;height:1px;background:currentColor;flex:none}

/* Display headings */
.h-sec{font-family:var(--serif);font-size:36px;line-height:1.15;font-weight:600;text-wrap:pretty}
.h-display{font-family:var(--serif);font-weight:600;text-wrap:pretty}

.link-arrow{display:inline-block;margin-top:26px;font-size:14px;font-weight:600;color:var(--blue)}
.link-arrow:hover{color:var(--blue-dark)}

/* Dash bullet list */
.dash-list{display:grid;gap:11px;font-size:14.5px}
.dash-list li{display:flex;gap:11px;align-items:baseline}
.dash-list li::before{content:"—";color:var(--blue);font-weight:700;flex:none}

/* Tick list (CTA band reassurances) */
.tick-row{display:flex;gap:26px;margin-top:30px;font-size:13px;color:var(--fog);flex-wrap:wrap}
.tick-row li{display:flex;gap:8px;align-items:baseline}
.tick-row li::before{content:"✓";color:var(--sky)}

.check-list{display:grid;gap:12px;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.check-list li{display:flex;gap:12px;align-items:baseline;font-size:15px;font-weight:600}
.check-list li::before{content:"✓";color:var(--blue)}

.tag{
  background:var(--sky);color:var(--ink-deep);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:3px;
}

/* ==========================================================================
   5. Buttons and links
   ========================================================================== */
.btn-nav{transition:all .25s ease;background:var(--ink);color:var(--paper);padding:11px 22px;border-radius:3px;font-size:14px;font-weight:600;flex:none}
.btn-nav:hover{background:var(--blue);color:#fff}

.btn-primary{display:inline-block;transition:all .25s ease;background:var(--sky);color:var(--ink-deep);padding:17px 32px;border-radius:3px;font-size:15px;font-weight:700}
.btn-primary:hover{background:#fff;color:var(--ink-deep);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.35)}

.btn-ghost{display:inline-block;transition:all .25s ease;padding:17px 28px;border:1px solid rgba(244,248,252,.4);border-radius:3px;font-size:15px;font-weight:600;color:var(--paper)}
.btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.btn-ghost-dark{display:inline-block;transition:all .25s ease;padding:17px 28px;border:1px solid #3a5570;border-radius:3px;font-size:15px;font-weight:600;color:var(--paper)}
.btn-ghost-dark:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.btn-pill{transition:all .25s ease;display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff;padding:16px 30px;border-radius:999px;font-size:15px;font-weight:600;margin-top:32px}
.btn-pill:hover{background:var(--blue-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,32,50,.22)}
.btn-pill__mark{font-size:15px}

.btn-block{display:block;text-align:center;background:var(--sky);color:var(--ink-deep);padding:14px 20px;border-radius:4px;font-size:14.5px;font-weight:700;transition:all .25s ease;margin-top:20px}
.btn-block:hover{background:#fff;color:var(--ink-deep)}

.btn-submit{
  display:block;width:100%;border:0;cursor:pointer;transition:all .25s ease;
  background:var(--blue);color:#fff;padding:16px 30px;border-radius:4px;
  font-size:15px;font-weight:600;text-align:center;
}
.btn-submit:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,32,50,.22)}

/* ==========================================================================
   6. Header / navigation
   ========================================================================== */
.header-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--pad);border-bottom:1px solid var(--line);
  position:relative;z-index:30;background:var(--paper);flex-wrap:wrap;gap:16px;
}

/* Sticky on the way back. The bar scrolls away with the page as normal, and
   once it is gone main.js pins it to the top and it slides down. The spacer
   takes over its height in the flow at the same moment, so nothing jumps.

   Kept off the sticky hero's stacking context on purpose: .hero__stage is
   position:sticky and therefore its own context, but with z-index auto it
   paints below this bar's z-index:30. */
.header-bar.is-stuck{
  position:fixed;top:0;left:0;right:0;
  box-shadow:0 6px 20px rgba(15,32,50,.13);
  animation:headerDrop .3s ease-out;
}
@keyframes headerDrop{from{transform:translateY(-100%)}to{transform:none}}
.header-spacer[hidden]{display:none}

/* Anchor targets would otherwise land underneath the pinned bar. */
section[id],header[id],.article__body h2[id]{scroll-margin-top:104px}
.brand{display:flex;align-items:center;flex:none}
.brand svg,.mnav-head svg{display:block}

.nav-links{
  display:flex;gap:28px;align-items:center;margin-left:auto;margin-right:30px;
  font-size:14px;font-weight:500;color:var(--body);
}
.nav-link{transition:color .2s ease}
.nav-link--drop{display:flex;align-items:center;gap:6px}
.nav-link.is-current{color:var(--blue);font-weight:600}
.nav-chev{width:12px;height:12px;flex:none}

.navdrop{position:relative}
.navdrop-menu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  padding-top:14px;opacity:0;visibility:hidden;transition:all .25s ease;z-index:50;
}
.navdrop:hover .navdrop-menu,
.navdrop:focus-within .navdrop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.navdrop-panel{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 18px 40px rgba(15,32,50,.16);padding:10px;display:grid;gap:1px;
  /* the longest child label sets the width — no per-menu number to maintain */
  min-width:max-content;
}
.dd-item{display:block;padding:9px 14px;border-radius:6px;font-size:13.5px;font-weight:600;color:var(--ink);transition:all .2s}
.dd-item:hover{background:var(--paper);color:var(--blue)}
.dd-item.is-current{background:var(--paper);color:var(--blue)}

/* ==========================================================================
   7. Mobile drawer
   ========================================================================== */
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:6px;place-items:center;cursor:pointer;background:#fff;color:var(--ink)}

.nav-overlay{position:fixed;inset:0;background:rgba(11,24,37,.55);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:60}
.nav-overlay.open{opacity:1;visibility:visible}

.mobile-nav{
  position:fixed;top:0;left:0;bottom:0;width:86vw;max-width:340px;background:#fff;
  display:flex;flex-direction:column;z-index:61;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .38s cubic-bezier(.4,0,.2,1),visibility .38s;
  box-shadow:0 0 40px rgba(15,32,50,.28);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.mobile-nav.open{transform:none;visibility:visible}
body.nav-open{overflow:hidden}
/* Only one menu control at a time — while the drawer is open its X takes over,
   so the hamburger peeking past the drawer edge steps out of the way. */
body.nav-open .nav-toggle{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}

.mnav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex:none}
.mnav-close{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);cursor:pointer;padding:0;transition:all .2s ease}
.mnav-close:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.mnav-list{flex:1;padding:8px 10px 4px}
.mnav-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:14px 12px;border-radius:6px;border:0;background:none;text-align:left;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);transition:all .2s ease;
}
.mnav-link:hover,.mnav-toggle[aria-expanded="true"]{background:var(--paper);color:var(--blue)}
.mnav-link.is-current{color:var(--blue)}
.mnav-group + .mnav-group,.mnav-group + .mnav-link,.mnav-link + .mnav-group{border-top:1px solid #eef3f8}

.mnav-chev{width:15px;height:15px;flex:none;transition:transform .3s ease}
.mnav-toggle[aria-expanded="true"] .mnav-chev{transform:rotate(180deg)}

/* Accordion body: 0fr -> 1fr animates to the natural height */
.mnav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.mnav-group.open .mnav-sub{grid-template-rows:1fr}
.mnav-sub-inner{min-height:0;overflow:hidden}
.mnav-sub-inner a{
  display:block;padding:11px 12px 11px 26px;margin:1px 0;border-radius:6px;
  font-size:13.5px;font-weight:500;color:var(--body);border-left:2px solid var(--line);transition:all .2s ease;
}
.mnav-sub-inner a:hover,.mnav-sub-inner a.is-current{background:var(--paper);color:var(--blue);border-left-color:var(--blue)}

.mnav-foot{flex:none;padding:16px 18px 22px;border-top:1px solid var(--line);display:grid;gap:12px;background:var(--paper)}
.mnav-cta{display:block;text-align:center;background:var(--ink);color:var(--paper);padding:14px 18px;border-radius:3px;font-size:14.5px;font-weight:600;transition:all .25s ease}
.mnav-cta:hover{background:var(--blue);color:#fff}
.mnav-phone{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;color:var(--blue)}

/* The drawer is a mobile-only element */
@media (min-width:821px){
  .mobile-nav,.nav-overlay{display:none}
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer{position:relative;overflow:hidden;background:var(--ink-deep);color:var(--fog)}
.site-footer__photo{
  position:absolute;inset:0;
  background-image:url(https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600&q=80&auto=format&fit=crop);
  background-size:cover;background-position:center;opacity:.1;filter:grayscale(45%);
}
.site-footer__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,44,.55) 0%,rgba(15,30,44,.92) 100%)}
.footer-grid{
  position:relative;z-index:1;padding:76px var(--pad) 64px;
  display:grid;grid-template-columns:1.4fr .8fr 1.3fr 1fr 1.15fr;gap:44px;
  font-size:14.5px;line-height:1.75;
}
.footer-logo{background:var(--paper);border-radius:8px;padding:18px 22px;display:inline-block}
/* The bottom strip's letters graze the viewBox edge and svg clips by default,
   which cuts the R and S off "RESIDENTIAL GENERAL CONTRACTORS". */
.footer-logo svg{overflow:visible}
.footer-blurb{max-width:34ch;margin:20px 0 24px}
.socials{display:flex;gap:12px}
.soc{width:42px;height:42px;border:1px solid #223850;border-radius:6px;display:grid;place-items:center;transition:all .25s ease;color:var(--paper)}
.soc svg{width:19px;height:19px}
.soc--f{font-size:17px;font-weight:700}
.soc:hover{background:var(--sky);border-color:var(--sky);color:var(--ink-deep)}

.footer-head{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--paper);margin-bottom:18px}
.footer-head a{transition:color .2s ease}
.footer-head a:hover{color:var(--sky)}
/* Second heading in a shared column — Multi-Family under Residential. */
.footer-head--spaced{margin-top:32px}
.footer-links{display:grid;gap:12px}
.footer-links a:hover{color:var(--sky)}
.footer-contact{display:grid;gap:14px}
.footer-contact p{display:flex;gap:12px}
.footer-contact svg{width:17px;height:17px;flex:none;margin-top:3px}
.footer-contact a:hover{color:var(--sky)}

.footer-bar{
  position:relative;z-index:1;color:var(--muted);padding:20px var(--pad);
  border-top:1px solid #223850;display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;
}
.footer-credit{font-weight:700;color:var(--fog)}
.footer-credit:hover{color:var(--sky)}

/* ==========================================================================
   9. Shared page sections
   ========================================================================== */

/* ---- Inner-page hero ---- */
.page-hero{position:relative;overflow:hidden;min-height:320px;display:flex;align-items:flex-end;color:var(--paper)}
.page-hero--tall{min-height:380px}
.page-hero__photo{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
.page-hero__veil{position:absolute;inset:0;background:linear-gradient(80deg,rgba(11,24,37,.94) 0%,rgba(15,32,50,.8) 44%,rgba(15,32,50,.42) 75%,rgba(15,32,50,.25) 100%)}
.page-hero__veil--deep{background:linear-gradient(80deg,rgba(11,24,37,.96) 0%,rgba(13,28,44,.9) 46%,rgba(15,32,50,.66) 78%,rgba(15,32,50,.45) 100%)}
.page-hero__inner{position:relative;z-index:2;padding:56px var(--pad) 46px;max-width:860px}
.page-hero__title{font-family:var(--serif);font-size:44px;line-height:1.1;font-weight:600;text-wrap:pretty}
.page-hero__lede{font-size:17px;line-height:1.65;color:var(--mist);max-width:52ch;margin-top:16px}

.crumbs{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--fog);margin-bottom:16px;flex-wrap:wrap}
.crumbs--nowrap{flex-wrap:nowrap;white-space:nowrap}
.crumbs a{color:var(--fog)}
.crumbs a:hover{color:var(--sky)}
.crumbs__sep{opacity:.5}
.crumbs__here{color:var(--sky)}

.page-hero__meta{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.page-hero__metatext{font-size:13px;color:var(--fog)}

.byline{display:flex;align-items:center;gap:14px;margin-top:24px}
.byline__badge{
  width:42px;height:42px;flex:none;border-radius:999px;background:rgba(143,193,240,.2);
  border:1px solid rgba(143,193,240,.45);display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:15px;color:var(--sky);
}
.byline__name{display:block;font-size:14.5px;font-weight:700}
.byline__note{display:block;font-size:12.5px;color:var(--fog)}

/* ---- Section heading ---- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.sec-head__note{font-size:14.5px;color:var(--body);max-width:34ch;line-height:1.6;text-align:right}
.sec-head__link{font-size:14px;font-weight:600;color:var(--blue);flex:none}

/* ---- Split band ---- */
.split{display:grid;grid-template-columns:1.05fr 1fr;background:#fff}
.split--flip{grid-template-columns:1fr 1.05fr}
.split--flip .split__body{order:2}
.split--flip .split__photo{order:1}
.split--divider{border-top:1px solid var(--line)}
.split__body{padding:80px var(--pad)}
.split__title{font-family:var(--serif);font-size:32px;line-height:1.15;font-weight:600;margin-bottom:16px;text-wrap:pretty}
.split__copy{font-size:15.5px;line-height:1.7;color:var(--body);margin-bottom:24px;max-width:48ch}
.split__photo{min-height:460px;background-size:cover;background-position:center}

/* ---- Card grid ---- */
.cards{display:grid;gap:20px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;display:block;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:30px 26px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
a.card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(15,32,50,.13);border-color:var(--blue);color:inherit}
.card__num{
  position:absolute;right:16px;top:6px;font-family:var(--serif);font-size:64px;
  font-weight:700;line-height:1;color:rgba(30,74,114,.08);pointer-events:none;
}
.card__title{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:10px;position:relative}
.card__desc{font-size:14px;line-height:1.65;color:var(--body);position:relative}
.card__more{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--blue);margin-top:18px;position:relative}
a.card:hover .card__more span{transform:translateX(4px)}
.card__more span{display:inline-block;transition:transform .3s ease}

/* ---- Static stat band ---- */
.statband{background:var(--ink);color:var(--paper);padding:66px var(--pad)}
.statband__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.statband__item{padding:4px 30px;border-left:1px solid var(--hair-light)}
.statband__val{font-family:var(--serif);font-size:50px;font-weight:700;line-height:1}
.statband__label{font-size:13px;color:var(--fog);margin-top:12px;line-height:1.5}

/* ---- Pill row ---- */
.pill-row{padding:80px var(--pad);background:#fff;border-top:1px solid var(--line)}
.pill-row .eyebrow{margin-bottom:28px}
.pills{display:flex;gap:12px;flex-wrap:wrap}
.pill{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--paper);
  border-radius:999px;padding:12px 22px;font-size:14px;font-weight:600;color:var(--ink);transition:all .25s ease;
}
.pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- CTA band ---- */
.cta{position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.cta__photo{position:absolute;right:0;top:0;width:52%;height:100%;background-size:cover;background-position:center}
.cta__veil{position:absolute;inset:0;background:linear-gradient(90deg,#16283a 0%,#16283a 50%,rgba(22,40,58,.82) 68%,rgba(22,40,58,.45) 100%)}
.cta__inner{position:relative;z-index:2;padding:92px var(--pad);max-width:640px}
.cta__title{font-family:var(--serif);font-size:46px;line-height:1.1;font-weight:600;text-wrap:pretty}
.cta__meta{font-size:16px;color:var(--fog);margin-top:16px}
.cta__actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* ==========================================================================
   10. Home page
   ========================================================================== */

/* ---- Hero (scroll-scrubbed build sequence) ----
   .hero is the scroll runway and must NOT clip, or the sticky stage inside it
   stops sticking; the stage does the clipping instead. The runway only exists
   once main.js has added .is-scrub — until then the stage is an ordinary
   full-width hero, which is what no-JS and reduce-motion visitors get. */
.hero{position:relative;color:var(--paper)}
.hero__stage{
  position:relative;overflow:hidden;min-height:600px;
  display:flex;align-items:flex-end;background:var(--ink-deep);
}
/* The pin is what sticks — stage and sector cards together, so they hold and
   release as one. It is taller than the screen: the banner fills the top, the
   cards hang past the fold, and what shows of them is whatever the banner
   leaves. Nothing is clipped, so when the runway ends and the pin lets go the
   banner leaves upwards and the cards arrive whole. */
.hero.is-scrub .hero__pin{position:sticky;top:0}
.hero.is-scrub .hero__stage{height:100vh;height:100svh;min-height:0}
/* Wide screens give the banner less than the full screen, and the cards in the
   pin take what is left over. A fixed subtraction rather than a fraction, so
   the strip of card showing under it is the same on a short laptop as on a
   tall monitor: 210px covers the header, the sector band's top padding and
   enough of a card to read as the page carrying on below. The floor stops a
   very short window from crushing the headline.

   A phone keeps the full screen — a 380px banner with a strip of card under it
   is not worth the trade on a small screen. */
@media (min-width:900px){
  .hero.is-scrub .hero__stage{height:calc(100vh - 210px);min-height:460px}
}

.hero__poster,.hero__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__poster{background-size:cover;background-position:center;transition:opacity .5s ease}
.hero__canvas{display:block;opacity:0;transition:opacity .5s ease}
.hero__canvas.is-on{opacity:1}
.hero__veil{position:absolute;inset:0;background:linear-gradient(75deg,rgba(11,24,37,.92) 0%,rgba(15,32,50,.78) 38%,rgba(15,32,50,.32) 65%,rgba(15,32,50,.15) 100%)}
.hero__fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,24,37,.35) 0%,transparent 30%,transparent 55%,rgba(11,24,37,.75) 100%)}
/* Both overlays exist only to keep the copy readable over the photograph, so
   they leave and return with it — the film plays untinted. */
.hero__veil,.hero__fade{transition:opacity .45s ease}
.hero.is-playing .hero__veil,
.hero.is-playing .hero__fade{opacity:0}
.hero__inner{
  position:relative;z-index:2;padding:84px var(--pad) 44px;width:100%;
  transition:opacity .45s ease,transform .55s var(--ease);
}
/* While the build sequence is running the film has the screen to itself. The
   copy is put fully out of reach, not just faded, so nothing under it can be
   clicked or tabbed to while it is invisible. main.js adds this class between
   the first frame moving and the last one landing. */
.hero.is-playing .hero__inner{
  opacity:0;transform:translateY(20px);pointer-events:none;visibility:hidden;
}
.hero__lead{max-width:760px}
.hero-h1{font-family:var(--serif);font-size:62px;line-height:1.06;font-weight:600;text-wrap:pretty}
.hero-h1 em,.h-display em,.h-sec em,.split__title em{font-style:italic;color:var(--sky)}
.sec--light .h-sec em,.sec--light .split__title em,.split__title em{color:var(--blue)}
.hero__lede{font-size:17.5px;line-height:1.65;color:var(--mist);max-width:48ch;margin:24px 0 36px}
.hero__actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

.hero-stats{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(244,248,252,.22);
}
.hero-figs{display:flex;gap:48px}
.fig__val{font-family:var(--serif);font-size:28px;font-weight:700}
.fig__label{font-size:13px;color:var(--fog)}

/* Pinned to the bottom right of the stage, and deliberately not inside
   .hero__inner — that whole block is hidden while the sequence plays, and this
   is the one thing that has to stay up for exactly that stretch. main.js sets
   --heroCue to 0 once the last frame lands.

   The overlays fade with the copy, so by then the cue is sitting on the bare
   photograph: the shadow is what keeps it readable over a bright sky. */
.hero__cue{
  display:none;position:absolute;right:var(--pad);bottom:32px;z-index:3;
  align-items:center;gap:12px;pointer-events:none;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);
  text-shadow:0 1px 14px rgba(11,24,37,.9),0 0 4px rgba(11,24,37,.7);
}
.hero.is-scrub .hero__cue{display:flex;opacity:var(--heroCue,1);transition:opacity .35s ease}
/* Once the last frame has landed there is nothing left to scroll for, so the
   cue goes out of the layer entirely rather than merely to opacity 0 — the
   sweep on the rule is an infinite animation and kept repainting behind the
   finished picture. visibility is delayed by the length of the fade so it
   still fades rather than vanishing. */
.hero.is-built .hero__cue{
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.hero.is-built .hero__cue-rule::after{animation:none}
.hero__cue-rule{width:46px;height:2px;background:rgba(244,248,252,.75);position:relative;overflow:hidden;box-shadow:0 0 8px rgba(11,24,37,.7)}
.hero__cue-rule::after{
  content:'';position:absolute;inset:0;background:var(--sky);
  animation:heroCueSweep 2.4s ease-in-out infinite;
}
@keyframes heroCueSweep{
  0%   {transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}

/* ---- Who we are (framed photo composition) ---- */
.about-band{position:relative;overflow:hidden;padding:96px var(--pad);background:#fff}
.two-col{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
.two-col--wide{grid-template-columns:1.1fr 2fr;gap:72px}

.framed{position:relative;min-height:520px}
.framed__rule{position:absolute;left:26px;top:26px;width:78%;height:440px;border:2px solid var(--blue);border-radius:6px;opacity:.5}
.framed__main{position:absolute;left:0;top:0;width:78%;height:440px;object-fit:cover;border-radius:6px;box-shadow:0 24px 48px rgba(15,32,50,.18)}
.framed__inset{position:absolute;right:0;bottom:0;width:46%;height:220px;object-fit:cover;border-radius:6px;border:6px solid #fff;box-shadow:0 18px 40px rgba(15,32,50,.22)}
.framed__stamp{position:absolute;left:-24px;top:-24px;width:118px;height:118px;animation:spinSlow 16s linear infinite;z-index:2}
.framed__stamp svg{width:100%;height:100%}
.stamp__text{font-size:9px;letter-spacing:.28em;font-weight:600;fill:var(--blue);font-family:var(--sans)}
.framed__badge{position:absolute;left:8%;bottom:34px;background:var(--ink);color:var(--paper);border-radius:6px;padding:18px 22px;box-shadow:0 16px 36px rgba(15,32,50,.3)}
.framed__badge-val{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--sky)}
.framed__badge-label{font-size:12px;color:var(--fog);letter-spacing:.06em}

.prose-lead{font-size:16.5px;line-height:1.7;color:var(--body);margin-top:24px}
.h-band{font-family:var(--serif);font-size:40px;line-height:1.12;font-weight:600;text-wrap:pretty}

/* ---- Animated stats band (home) ---- */
.statsband{background:var(--ink);color:var(--paper);padding:84px var(--pad)}
.statsband .h-sec{font-size:34px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats-grid > div{padding:4px 28px;border-left:1px solid var(--hair-light)}
.stat__val{font-family:var(--serif);font-size:58px;font-weight:700;color:var(--paper);line-height:1}
.stat__label{font-size:13px;color:var(--fog);margin-top:12px;line-height:1.5}

/* ---- Services mosaic (home) ----
   Commercial holds the left column full height, and the residential work fills
   the rest: the three rooms most jobs start as in a row, with the whole house
   banded under them — card 5 is the step up from a single room, not a fourth
   room. Cards are photo-filled with a gradient veil; the description slides
   open on hover/focus via the 0fr→1fr grid-rows idiom. */
.services-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);grid-auto-rows:264px;gap:18px}
.svc-card{
  position:relative;display:block;border-radius:8px;overflow:hidden;
  background:var(--ink-deep);color:var(--paper);
  opacity:0;transform:translateY(26px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.services-grid.is-seen .svc-card{opacity:1;transform:none}
.services-grid.is-seen .svc-card:nth-child(2){transition-delay:.08s}
.services-grid.is-seen .svc-card:nth-child(3){transition-delay:.16s}
.services-grid.is-seen .svc-card:nth-child(4){transition-delay:.24s}
.services-grid.is-seen .svc-card:nth-child(5){transition-delay:.32s}
.svc-card:hover{color:var(--paper)}
.svc-card--1{grid-row:span 2}
/* column 2 to the end, so it sits under the rooms and clears the tall card —
   and still lands correctly when the grid drops to two columns */
.svc-card--5{grid-column:2 / -1}
.svc-card__photo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.01);filter:saturate(.9);transition:transform .8s var(--ease),filter .8s;
}
.svc-card:hover .svc-card__photo,.svc-card:focus-visible .svc-card__photo{transform:scale(1.07);filter:saturate(1.05)}
.svc-card__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(15,30,44,.42) 0,transparent 32%),
    linear-gradient(to top,rgba(15,30,44,.94) 0,rgba(15,30,44,.44) 42%,rgba(15,30,44,.06) 72%);
}
.svc-card__veil::after{content:'';position:absolute;inset:0;background:rgba(15,30,44,.28);opacity:0;transition:opacity .5s}
.svc-card:hover .svc-card__veil::after{opacity:1}
.svc-card__num{
  position:absolute;right:18px;top:8px;z-index:1;pointer-events:none;
  font-family:var(--serif);font-size:72px;font-weight:700;line-height:1.15;
  color:rgba(244,248,252,.16);transition:color .5s;
}
.svc-card:hover .svc-card__num{color:rgba(143,193,240,.55)}
.svc-card__body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 24px 24px}
.svc-card__rule{display:block;width:26px;height:3px;border-radius:2px;background:var(--sky);margin-bottom:14px;transition:width .5s var(--ease)}
.svc-card:hover .svc-card__rule{width:46px}
.svc-card__title{font-family:var(--serif);font-size:24px;font-weight:600}
.svc-card--1 .svc-card__title,.svc-card--5 .svc-card__title{font-size:30px}
.svc-card__reveal{
  display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(8px);
  transition:grid-template-rows .5s var(--ease),opacity .45s,transform .5s var(--ease);
}
.svc-card:hover .svc-card__reveal,.svc-card:focus-visible .svc-card__reveal{grid-template-rows:1fr;opacity:1;transform:none}
.svc-card__reveal > div{min-height:0;overflow:hidden}
.svc-card__desc{font-size:14px;line-height:1.6;color:var(--mist);margin-top:10px;max-width:44ch}

/* ---- Process ---- */
.process{
  padding:88px var(--pad);background:var(--ink);color:var(--paper);
  background-image:repeating-linear-gradient(45deg,rgba(244,248,252,.04) 0 2px,transparent 2px 20px);
  animation:hatchDrift 4s linear infinite;
}
.process--light{
  background:#fff;color:var(--ink);
  background-image:repeating-linear-gradient(45deg,rgba(30,74,114,.05) 0 2px,transparent 2px 20px);
}
.sec-center{text-align:center;margin-bottom:56px}
.sec-center .eyebrow{justify-content:center}
.sec-center .h-sec{font-size:34px}
.sec-center__lede{font-size:15px;line-height:1.65;color:var(--fog);margin:14px auto 0;max-width:52ch}
.process--light .sec-center__lede{color:var(--body)}

.proc-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:center}
.proc-rail{position:relative;padding-left:34px}
.proc-rail__track{position:absolute;left:10px;top:26px;bottom:26px;width:2px;background:rgba(244,248,252,.14);border-radius:2px}
.process--light .proc-rail__track{background:var(--line)}
.proc-rail__fill{
  position:absolute;left:10px;top:26px;width:2px;background:var(--sky);border-radius:2px;
  height:0;transition:height .6s var(--ease);box-shadow:0 0 12px rgba(143,193,240,.5);
}
.process--light .proc-rail__fill{background:var(--blue);box-shadow:0 0 10px rgba(30,74,114,.35)}

.proc-steps{display:grid;gap:8px}
.step{
  position:relative;padding:18px 22px 18px 30px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid transparent;
  opacity:0;transform:translateX(-26px);transition:all .5s var(--ease);
}
.proc-steps.is-seen .step{opacity:1;transform:none}
.step.is-active{background:rgba(143,193,240,.08);border-color:rgba(143,193,240,.3)}
.process--light .step.is-active{background:var(--paper);border-color:#c3d3e2}
.step__dot{
  position:absolute;left:-30px;top:26px;width:14px;height:14px;border-radius:999px;
  background:var(--ink);border:2px solid rgba(244,248,252,.35);transition:all .4s;
}
.process--light .step__dot{background:#fff;border-color:var(--line-mid)}
.step.is-active .step__dot{background:var(--sky);border-color:var(--sky);box-shadow:0 0 0 6px rgba(143,193,240,.18)}
.process--light .step.is-active .step__dot{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 6px rgba(30,74,114,.14)}
.step__ghost{
  position:absolute;right:14px;top:2px;font-family:var(--serif);font-size:64px;font-weight:700;
  color:rgba(244,248,252,.06);line-height:1;transition:color .4s;pointer-events:none;
}
.process--light .step__ghost{color:rgba(30,74,114,.06)}
.step.is-active .step__ghost{color:rgba(143,193,240,.22)}
.process--light .step.is-active .step__ghost{color:rgba(30,74,114,.16)}
.step__content{position:relative;z-index:1}
.step__head{display:flex;align-items:center;gap:12px}
.step__title{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--fog);transition:color .4s}
.process--light .step__title{color:var(--muted)}
.step.is-active .step__title{color:#fff}
.process--light .step.is-active .step__title{color:var(--ink)}
.step__chev{font-size:15px;color:var(--sky);opacity:0;transform:translateX(-8px);transition:all .4s}
.process--light .step__chev{color:var(--blue)}
.step.is-active .step__chev{opacity:1;transform:translateX(0)}
.step__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);overflow:hidden}
.step.is-active .step__body{grid-template-rows:1fr}
.step__body > div{min-height:0;overflow:hidden;font-size:14px;line-height:1.6;color:var(--fog);padding-top:8px;max-width:52ch}
.process--light .step__body > div{color:var(--body)}

.proc-stage{position:relative;min-height:460px}
.proc-stage__rule{position:absolute;right:-18px;bottom:-18px;width:80%;height:70%;border:2px solid rgba(143,193,240,.35);border-radius:8px}
.process--light .proc-stage__rule{border-color:rgba(30,74,114,.28)}
.proc-stage__img{
  position:absolute;inset:0;border-radius:8px;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.04);transition:opacity .8s ease,transform 3.8s ease;
  box-shadow:0 24px 50px rgba(0,0,0,.35);
}
.proc-stage__img.is-active{opacity:1;transform:scale(1)}
.proc-stage__plate{
  position:absolute;left:26px;bottom:26px;background:rgba(15,30,44,.88);backdrop-filter:blur(4px);
  border:1px solid rgba(143,193,240,.3);border-radius:6px;padding:14px 20px;z-index:2;color:var(--paper);
}
.proc-stage__step{font-family:var(--serif);font-size:13px;letter-spacing:.14em;color:var(--sky);font-weight:700}
.proc-stage__title{font-family:var(--serif);font-size:19px;font-weight:600;margin-top:4px}

/* ---- Why panels ---- */
.why-band{position:relative;padding:104px var(--pad) 110px;background:var(--ink-deep);color:var(--paper);overflow:hidden}
.deco-num{
  position:absolute;right:var(--pad);top:96px;font-family:var(--serif);font-size:190px;
  line-height:.8;font-weight:700;color:rgba(143,193,240,.06);pointer-events:none;user-select:none;
}
.why-intro{max-width:640px;position:relative;z-index:1;margin-bottom:52px}
.why-intro .h-display{font-size:42px;line-height:1.12}
.why-row{display:flex;gap:14px;height:420px}
.why-panel{
  position:relative;overflow:hidden;border-radius:6px;
  flex:1 1 0;border:1px solid rgba(244,248,252,.1);
  opacity:0;transform:translateY(30px);
  transition:flex-grow .7s cubic-bezier(.65,0,.35,1),min-height .7s cubic-bezier(.65,0,.35,1),
             opacity .6s ease,transform .55s var(--ease),border-color .5s;
}
.why-row.is-seen .why-panel{opacity:1;transform:none}
.why-panel.is-active{flex-grow:3.4;border-color:rgba(143,193,240,.35)}
.why-panel__photo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1);filter:grayscale(20%) brightness(.92);transition:transform 1.4s ease,filter 1.4s ease;
}
.why-panel.is-active .why-panel__photo{transform:scale(1.06);filter:none}
.why-panel__veil{
  position:absolute;inset:0;transition:background .6s,box-shadow .6s;
  background:linear-gradient(180deg,rgba(15,30,44,.32) 0%,rgba(15,30,44,.72) 100%);
  box-shadow:inset 0 -60px 60px -30px rgba(143,193,240,.12);
}
.why-panel.is-active .why-panel__veil{
  background:linear-gradient(180deg,rgba(15,30,44,.12) 0%,rgba(15,30,44,.5) 55%,rgba(15,30,44,.9) 100%);
  box-shadow:inset 0 0 0 1px rgba(143,193,240,.25);
}
.why-panel__inner{position:absolute;inset:0;z-index:2}
.why-panel__num{
  position:absolute;top:28px;left:28px;display:flex;align-items:center;gap:10px;
  font-family:var(--serif);font-size:22px;font-weight:700;color:var(--paper);transition:color .5s;
}
.why-panel.is-active .why-panel__num{color:var(--sky)}
.why-panel__num span{display:inline-block;width:16px;height:2px;background:rgba(244,248,252,.5);transition:all .5s}
.why-panel.is-active .why-panel__num span{width:28px;background:var(--sky)}
.why-panel__spine{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;white-space:nowrap;
  font-family:var(--serif);font-size:18px;font-weight:600;color:var(--paper);
  transition:opacity .5s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.why-panel.is-active .why-panel__spine{opacity:0;transform:translate(-50%,-50%) rotate(180deg) translateX(10px)}
.why-panel__open{
  position:absolute;left:30px;right:30px;bottom:36px;display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .85s cubic-bezier(.22,.61,.36,1),opacity .6s ease;
}
.why-panel.is-active .why-panel__open{grid-template-rows:1fr;opacity:1;transition-delay:0s,.18s}
.why-panel__clip{min-height:0;overflow:hidden}
.why-panel__body{transform:translateY(18px);opacity:0;transition:transform .85s cubic-bezier(.22,.61,.36,1),opacity .7s ease}
.why-panel.is-active .why-panel__body{transform:translateY(0);opacity:1;transition-delay:.1s,.2s}
.why-panel__bar{width:34px;height:2px;background:var(--sky);margin-bottom:16px}
.why-panel__title{font-family:var(--serif);font-size:24px;font-weight:600;margin-bottom:12px;text-wrap:pretty}
.why-panel__desc{font-size:14.5px;line-height:1.65;color:var(--mist);max-width:34ch}

/* ---- Projects carousel ---- */
.proj-band{padding:88px var(--pad);background:#fff;border-top:1px solid var(--line);overflow:hidden}
/* --step / --slide-w set the coverflow geometry per breakpoint; main.js only
   writes --d, the signed distance of a slide from the active one. */
.proj-wrap{position:relative;height:520px;margin:0 40px;--step:15%;--slide-w:30%}
.proj-slides{position:absolute;inset:0}
/* Base state is the far tier (two steps out); .is-d1 and .is-active step in. */
.proj-slide{
  position:absolute;top:50%;left:calc(50% + var(--step) * var(--d,0));
  width:var(--slide-w);height:320px;transform:translate(-50%,-50%);z-index:8;
  background-size:cover;background-position:center;border-radius:10px;
  transition:all .7s cubic-bezier(.4,0,.2,1);
  box-shadow:0 12px 28px rgba(15,32,50,.14);cursor:pointer;
  filter:brightness(.76) saturate(.3);
  display:block;text-decoration:none;   /* the slide is an <a> when it has a page */
}
.proj-slide.is-d1{height:400px;z-index:9;filter:brightness(.88) saturate(.65)}
.proj-slide.is-active{height:490px;z-index:10;filter:none;box-shadow:0 30px 60px rgba(15,32,50,.28)}
/* the centre slide is the one that opens its project, so it is the one that
   answers to the pointer */
a.proj-slide.is-active:hover{box-shadow:0 36px 72px rgba(15,32,50,.34)}
a.proj-slide.is-active:hover .proj-slide__title{text-decoration:underline;text-underline-offset:3px}
.proj-slide:focus-visible{outline:2px solid var(--sky);outline-offset:4px}
.proj-slide.is-hidden{opacity:0;pointer-events:none}
.proj-slide__veil{
  position:absolute;inset:0;border-radius:10px;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(180deg,rgba(15,30,44,0) 45%,rgba(15,30,44,.82) 100%);
}
.proj-slide.is-active .proj-slide__veil{opacity:1}
.proj-slide__caption{
  position:absolute;left:26px;right:26px;bottom:26px;opacity:0;transform:translateY(14px);
  pointer-events:none;transition:opacity .6s ease .15s,transform .7s cubic-bezier(.22,.61,.36,1) .1s;
}
.proj-slide.is-active .proj-slide__caption{opacity:1;transform:translateY(0)}
.proj-slide__cat{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:7px}
.proj-slide__title{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.25;color:#fff;text-wrap:pretty}

.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:999px;
  background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(15,32,50,.28);transition:all .25s ease;
  display:grid;place-items:center;font-size:19px;cursor:pointer;user-select:none;z-index:20;border:0;
}
.carousel-arrow:hover{background:var(--blue);color:#fff;transform:translateY(-50%) scale(1.08)}
.carousel-arrow--prev{left:26px}
.carousel-arrow--next{right:26px}

/* ---- Testimonials ---- */
.tst-band{position:relative;overflow:hidden;padding:100px var(--pad);background:var(--ink);color:var(--paper)}
.tst-band--light{background:var(--paper);color:var(--ink)}
.deco-quote{
  position:absolute;right:8%;top:56px;font-family:var(--serif);font-size:300px;line-height:1;
  color:rgba(143,193,240,.06);pointer-events:none;user-select:none;
}
.tst-band--light .deco-quote{color:rgba(30,74,114,.08)}
.tst-band .eyebrow{margin-bottom:56px;position:relative;z-index:1}
.tst-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:76px;align-items:center;position:relative;z-index:1}
.tst-frame{position:relative}
.tst-frame__rule{position:absolute;left:-18px;top:-18px;right:26px;bottom:26px;border:1px solid rgba(143,193,240,.4);border-radius:4px}
.tst-band--light .tst-frame__rule{border-color:#c3d3e2}
.tst-photos{position:relative;height:420px}
.tst-photo{
  position:absolute;inset:0;border-radius:4px;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 1.2s ease;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.tst-photo.is-active{opacity:1;transform:scale(1)}
.tst-score{
  position:absolute;right:-24px;bottom:30px;background:var(--paper);color:var(--ink);
  padding:16px 22px;border-radius:4px;box-shadow:0 20px 40px rgba(0,0,0,.35);z-index:3;text-align:center;
}
.tst-band--light .tst-score{background:var(--ink);color:var(--paper)}
.tst-score__val{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1}
.tst-score__stars{color:#c9922e;font-size:13px;letter-spacing:2px;margin-top:2px}

.tst-body{position:relative;min-height:340px;display:flex;flex-direction:column;justify-content:center}
.tst-quotes{position:relative;min-height:250px}
.tst-quote{
  position:absolute;inset:0;opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .7s ease,transform .7s var(--ease);
}
.tst-quote.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.tst-quote__text{font-family:var(--serif);font-size:31px;line-height:1.42;font-weight:400;text-wrap:pretty}
.tst-quote__who{display:flex;align-items:center;gap:16px;margin-top:34px}
.tst-quote__badge{
  width:44px;height:44px;flex:none;border-radius:999px;background:rgba(143,193,240,.18);
  border:1px solid rgba(143,193,240,.4);display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:15px;color:var(--sky);
}
.tst-band--light .tst-quote__badge{background:#fff;border-color:#c3d3e2;color:var(--blue)}
.tst-quote__name{font-weight:700;font-size:15.5px}
.tst-quote__note{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:2px}

.tst-nav-row{display:flex;align-items:center;gap:24px;margin-top:44px;padding-top:30px;border-top:1px solid rgba(244,248,252,.14)}
.tst-band--light .tst-nav-row{border-top-color:var(--line)}
.tst-counter{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.05em}
.tst-track{flex:1;height:2px;background:rgba(244,248,252,.14);border-radius:2px;overflow:hidden}
.tst-band--light .tst-track{background:var(--line)}
.tst-progress{height:100%;background:var(--sky);width:33.33%;transition:width .5s var(--ease)}
.tst-band--light .tst-progress{background:var(--blue)}
.tst-nav{display:flex;gap:10px}
.tst-btn{
  width:44px;height:44px;border-radius:999px;border:1px solid rgba(244,248,252,.3);background:none;
  display:grid;place-items:center;cursor:pointer;transition:all .25s ease;color:inherit;
}
.tst-btn svg{width:17px;height:17px}
.tst-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tst-band--light .tst-btn{border-color:var(--line-mid);background:#fff;color:var(--blue)}
.tst-band--light .tst-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- Commercial sector rail ---- */
.sectors{padding:96px 0 74px;background:var(--paper);border-top:1px solid var(--line)}
.sectors__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:48px;
  padding:0 var(--pad);margin-bottom:44px;
}
.sectors__intro{max-width:44ch}
.sectors .h-display{font-size:44px;line-height:1.1}
.sectors__copy{font-size:16.5px;line-height:1.7;color:var(--body);margin-top:22px}
.sectors__aside{display:flex;align-items:center;gap:18px;flex:none}
.sectors__nav{display:flex;gap:10px}
.sectors__btn{
  width:46px;height:46px;border-radius:999px;cursor:pointer;display:grid;place-items:center;
  border:1px solid var(--line-mid);background:#fff;color:var(--ink);transition:all .25s ease;
}
.sectors__btn svg{width:19px;height:19px}
.sectors__btn:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.sectors__btn:disabled{opacity:.35;cursor:default}

/* Runs off the right edge on purpose — a card cut by the viewport is what says
   there is more to see, and it is the only horizontal rail on the page. */
.sectors__rail{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--pad) 26px;scrollbar-width:none;
  /* without this the snap points ignore the padding and the rail rests one
     gutter in, cutting the left edge off the first card */
  scroll-padding-left:var(--pad);
}
.sectors__rail::-webkit-scrollbar{display:none}
.sectors__rail:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}

.sector{
  position:relative;flex:0 0 300px;height:380px;border-radius:14px;overflow:hidden;
  scroll-snap-align:start;background:var(--ink-deep);
  box-shadow:0 10px 26px rgba(15,32,50,.12);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.sector:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(15,32,50,.24)}
.sector__media{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s var(--ease);
}
.sector:hover .sector__media{transform:scale(1.06)}
.sector__veil{
  position:absolute;inset:0;
  /* dark enough at the top for the index number to read on a pale ceiling */
  background:linear-gradient(180deg,rgba(11,24,37,.42) 0%,rgba(11,24,37,.16) 26%,rgba(11,24,37,.56) 60%,rgba(11,24,37,.92) 100%);
}
.sector__num{
  position:absolute;top:18px;left:20px;z-index:2;
  font-family:var(--serif);font-size:15px;font-weight:700;color:var(--sky);letter-spacing:.06em;
}
.sector__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px 24px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;color:var(--paper);
}
.sector__name{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.22;text-wrap:pretty}
.sector__go{
  flex:none;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  border:1px solid rgba(244,248,252,.45);font-size:15px;transition:all .3s var(--ease);
}
.sector:hover .sector__go{background:var(--sky);border-color:var(--sky);color:var(--ink-deep)}

.sectors__bar{height:2px;background:var(--line);margin:0 var(--pad);border-radius:999px;overflow:hidden}
.sectors__bar span{display:block;height:100%;width:0;background:var(--blue);border-radius:999px;transition:width .2s linear}

/* ---- Three sectors (the row under the hero) ----
   Photograph, veil, then the copy on top of it. The veil is the whole trick:
   these are outdoor photographs whose bottom edge is grass or sidewalk, and
   white type over that is unreadable without something between them. */
.pillars{padding:88px var(--pad) 0;background:#fff}
/* Inside the pin it is the page arriving under the banner, so it carries the
   white all the way down rather than stopping at the cards. */
.hero .pillars{padding-bottom:88px}

/* Desktop: three-up overlay cards. Photograph, veil, then the copy on top of
   it. The veil is the whole trick: these are outdoor photographs whose
   bottom edge is grass or sidewalk, and white type over that is unreadable
   without something between them. Swaps for the stacked rows below 820px. */
.pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pillar{
  position:relative;display:block;height:420px;border-radius:14px;overflow:hidden;
  background:var(--ink-deep);
  transition:transform .35s var(--ease);
}
.pillar:hover{transform:translateY(-6px)}
.pillar__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.pillar:hover .pillar__img{transform:scale(1.06)}
.pillar__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,24,37,.42) 0%,rgba(11,24,37,.14) 26%,rgba(11,24,37,.62) 58%,rgba(11,24,37,.94) 100%);
}
.pillar__num{
  position:absolute;top:18px;left:22px;z-index:2;
  font-family:var(--serif);font-size:15px;font-weight:700;color:var(--sky);letter-spacing:.06em;
}
.pillar__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;
  padding:24px 22px 26px;color:var(--paper);
}
.pillar__name{display:block;font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.15}
.pillar__blurb{display:block;margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--mist);text-wrap:pretty}
.pillar__go{
  display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;
  letter-spacing:.04em;color:var(--sky);
}
.pillar:hover .pillar__go{color:#fff}

/* Mobile: the stacked image/content rows, hidden until the grid above steps
   aside at 820px (see the breakpoint further down). */
.pillars__list{display:none;flex-direction:column;width:100%}
.pillar-row{
  position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;
  padding:56px 0;border-top:1px solid var(--line);text-decoration:none;
  opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.pillar-row:first-child{border-top:none;padding-top:0}
.pillars__list.is-seen .pillar-row{opacity:1;transform:none}
.pillars__list.is-seen .pillar-row:nth-child(2){transition-delay:.1s}
.pillars__list.is-seen .pillar-row:nth-child(3){transition-delay:.2s}
/* image on the right, copy on the left by default; --reverse swaps them */
.pillar-row__media{order:2}
.pillar-row__content{order:1}
.pillar-row--reverse .pillar-row__media{order:1}
.pillar-row--reverse .pillar-row__content{order:2}
/* Unclipped, so the outline square, dot grid and big numeral behind the
   frame can spill past its edges instead of being cut off. */
.pillar-row__media{position:relative;display:block;height:500px}
/* Hollow square, offset off the frame's far corner. */
.pillar-row__media::before{
  content:'';position:absolute;z-index:0;width:104px;height:104px;
  top:-22px;right:-22px;border:2px solid var(--sky);border-radius:14px;
  transition:transform .5s var(--ease);
}
.pillar-row--reverse .pillar-row__media::before{right:auto;left:-22px}
.pillar-row:hover .pillar-row__media::before{transform:translate(6px,-6px)}
/* Dot grid, tucked behind the frame's near corner. */
.pillar-row__media::after{
  content:'';position:absolute;z-index:0;width:132px;height:96px;
  bottom:-20px;left:-20px;opacity:.8;
  background-image:radial-gradient(var(--line-mid) 1.6px,transparent 1.6px);
  background-size:15px 15px;
}
.pillar-row--reverse .pillar-row__media::after{left:auto;right:-20px}
.pillar-row__frame{
  position:relative;display:block;height:100%;border-radius:16px;overflow:hidden;z-index:1;
  padding:3px;background:var(--ink-deep);
  background-image:linear-gradient(115deg,var(--line) 0%,var(--sky) 45%,var(--blue) 55%,var(--line) 100%);
  background-size:260% 260%;background-position:0% 50%;
  transition:background-position .8s var(--ease),box-shadow .35s var(--ease);
}
.pillar-row:hover .pillar-row__frame{
  animation:pillarBorderFlow 3.5s linear infinite;
  box-shadow:0 18px 40px rgba(15,32,50,.22);
}
@keyframes pillarBorderFlow{
  0%{background-position:0% 50%}
  100%{background-position:260% 50%}
}
.pillar-row__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:13px;
  transition:transform .6s var(--ease);
}
.pillar-row:hover .pillar-row__img{transform:scale(1.06)}
.pillar-row__content{display:block;position:relative;z-index:1}
.pillar-row__num{
  display:block;font-family:var(--serif);font-size:15px;font-weight:700;color:var(--blue);letter-spacing:.06em;
}
.pillar-row__name{
  display:block;margin-top:14px;font-family:var(--serif);font-size:36px;font-weight:600;line-height:1.15;color:var(--ink);
}
.pillar-row__blurb{display:block;margin-top:18px;max-width:none;font-size:17px;line-height:1.75;color:var(--muted);text-wrap:pretty}
.pillar-row__go{
  display:inline-flex;align-items:center;gap:6px;margin-top:26px;font-size:13.5px;font-weight:700;
  letter-spacing:.04em;color:var(--blue);
}
.pillar-row__go span{transition:transform .35s var(--ease)}
.pillar-row:hover .pillar-row__go span{transform:translateX(4px)}

/* ---- Insights ---- */
.insights{padding:88px var(--pad);background:var(--paper)}
.insights-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start}
.ins-row{
  display:flex;align-items:center;gap:26px;padding:24px 18px;border-top:1px solid var(--line);
  border-radius:6px;cursor:pointer;background:transparent;transition:all .35s ease;
}
.ins-row.is-active{background:#fff;box-shadow:0 12px 28px rgba(15,32,50,.09)}
.ins-row__num{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--line-mid);flex:none;width:42px;transition:color .35s}
.ins-row.is-active .ins-row__num{color:var(--blue)}
.ins-row__mid{flex:1;min-width:0}
.ins-row__meta{display:flex;gap:14px;align-items:baseline;margin-bottom:6px}
.ins-row__cat{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .35s}
.ins-row.is-active .ins-row__cat{color:var(--blue)}
.ins-row__read{font-size:12.5px;color:var(--muted)}
.ins-row__title{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);line-height:1.3;text-wrap:pretty}
.ins-row__arrow{
  flex:none;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-size:16px;
  border:1px solid var(--line);background:transparent;color:var(--muted);transition:all .35s;
}
.ins-row.is-active .ins-row__arrow{border-color:var(--blue);background:var(--blue);color:#fff;transform:rotate(-45deg)}

.ins-stage{position:relative;min-height:380px}
.ins-stage__rule{position:absolute;right:-14px;top:-14px;width:70%;height:60%;border:2px solid rgba(30,74,114,.25);border-radius:8px}
.ins-stage__img{
  position:absolute;inset:0;border-radius:8px;background-size:cover;background-position:center;
  opacity:0;transform:rotate(2.5deg) scale(.96);
  transition:opacity .55s ease,transform .55s var(--ease);box-shadow:0 24px 48px rgba(15,32,50,.2);
}
.ins-stage__img.is-active{opacity:1;transform:rotate(0) scale(1)}
.ins-stage__tag{
  position:absolute;left:20px;bottom:20px;background:var(--ink);color:var(--paper);font-size:11.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-radius:4px;z-index:2;
}

/* ==========================================================================
   11. Inner pages
   ========================================================================== */

/* ---- Projects grid ---- */
/* ---- Project cards ----
   The photograph is the whole card; the detail lifts in over it on hover. */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{
  position:relative;overflow:hidden;border-radius:14px;aspect-ratio:4 / 3;
  background:var(--ink-deep);box-shadow:0 10px 26px rgba(15,32,50,.12);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(15,32,50,.24)}
.pcard__media{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s var(--ease);
}
.pcard:hover .pcard__media{transform:scale(1.05)}

/* The folded corner, always visible — it is what marks these as ours. */
.pcard__corner{
  position:absolute;left:0;top:0;z-index:3;width:74px;height:74px;pointer-events:none;
  background:var(--blue);
  clip-path:polygon(0 0,100% 0,0 100%);
}

.pcard__veil{
  position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(180deg,rgba(11,24,37,.35) 0%,rgba(11,24,37,.82) 55%,rgba(11,24,37,.94) 100%);
}
.pcard__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 26px 28px;
  color:var(--paper);opacity:0;transform:translateY(14px);
  transition:opacity .35s ease,transform .45s var(--ease);
}
.pcard__title{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.2;margin-bottom:12px;text-wrap:pretty}
.pcard__line{font-size:14px;line-height:1.55;color:var(--mist);margin-top:4px}
.pcard__line span{font-weight:700;color:var(--paper)}

/* The ring, borrowed from the site's other marks — a target on the photo. */
.pcard__ring{
  position:absolute;z-index:2;right:30%;top:40%;width:56px;height:56px;border-radius:999px;
  border:1.5px solid rgba(244,248,252,.75);display:grid;place-items:center;
  opacity:0;transform:scale(.7);transition:all .45s var(--ease);pointer-events:none;
}
.pcard__ring::after{content:'';width:11px;height:11px;border-radius:999px;background:var(--sky)}

.pcard:hover .pcard__veil{opacity:1}
.pcard:hover .pcard__body{opacity:1;transform:none}
.pcard:hover .pcard__ring{opacity:1;transform:scale(1)}

/* No hover on a touch screen, so the detail is simply shown. */
@media (hover:none){
  .pcard__veil{opacity:1}
  .pcard__body{opacity:1;transform:none}
  .pcard__ring{display:none}
}

/* ---- Phase band (service detail: how the work runs) ---- */
.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:8px}
.phase{position:relative}
.phase__num{
  font-family:var(--serif);font-size:15px;font-weight:700;color:var(--blue);
  letter-spacing:.06em;display:block;
}
.phase__rule{display:block;height:2px;background:var(--line-mid);margin:12px 0 16px;position:relative}
.phase__rule::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:34px;background:var(--blue);
}
.phase__title{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25;text-wrap:pretty}
.phase__desc{font-size:14px;line-height:1.65;color:var(--body);margin-top:9px}

/* ---- Questions and answers ---- */
/* Full width, like .sec-head and .cards above it — a centred, narrower list
   lined up with nothing else on the page. The answers keep their own reading
   measure below, which is where a cap actually belongs. */
.qa-list{display:grid;gap:12px;margin-top:6px}
.qa{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:0 24px;transition:border-color .25s ease,box-shadow .25s ease;
}
.qa[open]{border-color:var(--line-mid);box-shadow:0 12px 28px rgba(15,32,50,.08)}
.qa__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.35;text-wrap:pretty;
}
/* Safari still draws its own triangle without this. */
.qa__q::-webkit-details-marker{display:none}
.qa__mark{
  flex:none;width:26px;height:26px;margin-top:2px;border-radius:999px;
  border:1px solid var(--line-mid);position:relative;transition:all .25s ease;
}
.qa__mark::before,.qa__mark::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--blue);
  transform:translate(-50%,-50%);transition:opacity .2s ease;
}
.qa__mark::before{width:11px;height:1.5px}
.qa__mark::after{width:1.5px;height:11px}
.qa[open] .qa__mark{background:var(--blue);border-color:var(--blue)}
.qa[open] .qa__mark::before{background:#fff}
.qa[open] .qa__mark::after{opacity:0}
.qa__a{padding:0 0 24px;max-width:72ch}
.qa__a p{font-size:15.5px;line-height:1.75;color:var(--body)}

/* ---- Project detail ---- */
.pj-plate{background:#fff;padding:62px var(--pad) 10px}
.pj-plate__inner{position:relative;max-width:1180px;margin:0 auto}
.pj-shot{
  aspect-ratio:16 / 10;border-radius:14px;
  background-size:cover;background-position:center;box-shadow:0 22px 50px rgba(15,32,50,.18);
}
/* The two accent rules the layout hangs the photograph between. Anchored to the
   photo rather than the window, so the gap does not grow with the screen. */
.pj-plate__rule{position:absolute;top:14%;width:3px;height:44%;background:var(--blue)}
.pj-plate__rule--l{left:-30px}
.pj-plate__rule--r{right:-30px}

.pj-facts{background:#fff;padding-top:56px}
.pj-facts__title{
  font-family:var(--serif);font-size:33px;line-height:1.18;font-weight:700;
  text-align:center;text-wrap:pretty;padding-bottom:34px;border-bottom:1px solid var(--line);
}

.pj-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:34px 0 46px;text-align:center}
.pj-meta dt{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.pj-meta dd{margin:0;font-size:15px;line-height:1.6;color:var(--blue)}

.pj-write{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.pj-write__copy p{font-size:15.5px;line-height:1.8;color:var(--body);margin-bottom:16px}
.pj-write__services{font-size:14.5px;color:var(--body);margin-top:22px}
.pj-write__services span{font-weight:700;color:var(--ink)}
.pj-write__shot{
  aspect-ratio:16 / 10;border-radius:12px;background-size:cover;background-position:center;
  box-shadow:0 16px 34px rgba(15,32,50,.16);
}

.pj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pj-grid__shot{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  aspect-ratio:4 / 3;border-radius:12px;background-size:cover;background-position:center;
  box-shadow:0 10px 24px rgba(15,32,50,.13);transition:transform .35s var(--ease);
}
.pj-grid__shot:hover{transform:translateY(-4px)}
/* The magnifier, so it reads as something that opens rather than decoration. */
.pj-grid__zoom{
  position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:999px;
  background:rgba(11,24,37,.62);display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:all .3s var(--ease);
}
.pj-grid__zoom::before,.pj-grid__zoom::after{content:'';position:absolute;background:#fff}
.pj-grid__zoom::before{width:12px;height:1.5px}
.pj-grid__zoom::after{width:1.5px;height:12px}
.pj-grid__shot:hover .pj-grid__zoom,
.pj-grid__shot:focus-visible .pj-grid__zoom{opacity:1;transform:scale(1)}

/* ---- Lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px}
.lightbox[hidden]{display:none}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(8,17,27,.94);backdrop-filter:blur(3px)}
.lightbox__figure{position:relative;z-index:1;max-width:min(1180px,100%);max-height:100%;display:grid;gap:14px}
.lightbox__img{
  display:block;max-width:100%;max-height:calc(100vh - 120px);
  margin:0 auto;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.lightbox__count{text-align:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.lightbox__btn{
  position:absolute;z-index:2;width:46px;height:46px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,248,252,.3);background:rgba(11,24,37,.6);color:var(--paper);
  display:grid;place-items:center;font-size:22px;line-height:1;transition:all .25s ease;
}
.lightbox__btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lightbox__close{top:18px;right:18px}
.lightbox__prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:18px;top:50%;transform:translateY(-50%)}
.lightbox__prev:hover,.lightbox__next:hover{transform:translateY(-50%)}
/* Only one photograph — nothing to step through. */
.lightbox--single .lightbox__prev,
.lightbox--single .lightbox__next,
.lightbox--single .lightbox__count{display:none}
body.lightbox-open{overflow:hidden}

/* ---- Blog cards ---- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.post:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(15,32,50,.13);border-color:var(--blue);color:inherit}
/* Every card is the same card — three to a row, one design. The first post used
   to run double width with a taller photo and a bigger title, which made the
   grid read as a feature plus leftovers. */
.post{display:flex;flex-direction:column}
.post__media{height:250px;flex:none;background-size:cover;background-position:center}
.post__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.post__meta{display:flex;gap:14px;align-items:baseline;margin-bottom:8px}
.post__cat{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.post__read{font-size:12.5px;color:var(--muted)}
.post__title{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.28;text-wrap:pretty}
.post__blurb{font-size:14px;line-height:1.65;color:var(--body);margin-top:10px}
/* margin-top:auto pins the link to the bottom of the card, so the three in a
   row line up however long their blurbs run. */
.post__more{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--blue);margin-top:auto;padding-top:18px}

/* ---- Article ----
   The text column is capped at its reading measure, so a 1fr track just stretches
   empty space between the end of the line and the sidebar — on a wide screen that
   read as a gap several hundred pixels wide, quite unlike the 64px between any
   other pair of columns. Sizing the track to the measure and centring the pair
   keeps that gap at 64px whatever the screen does; the white background still
   runs edge to edge, because it is the tracks that are centred, not the section. */
.article{
  display:grid;grid-template-columns:minmax(0,74ch) 320px;justify-content:center;
  gap:64px;padding:80px var(--pad);background:#fff;align-items:start;
}
.article__body{max-width:74ch}
.article__body p{font-size:17px;line-height:1.8;color:var(--ink-mid);margin-bottom:20px}
.article__body h2{font-family:var(--serif);font-size:29px;line-height:1.2;font-weight:600;margin:52px 0 16px;text-wrap:pretty}
.article__body .dash-list{font-size:15.5px;margin-bottom:22px}
.article__body h3{font-size:19px;font-weight:700;margin:30px 0 10px}
.article__body strong{font-weight:700;color:var(--ink)}
.article__body a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* The legal pages have no sidebar. Collapsing the grid to one column is not
   enough on its own: the body keeps its reading measure, so left-aligning it
   leaves a third of a wide screen empty beside the text. Centre the measure
   instead, and let it fill the width once the screen is narrower than that. */
.article--solo{grid-template-columns:minmax(0,1fr);justify-items:center;padding:72px var(--pad) 88px}
.article--solo .article__body{width:100%;max-width:76ch}
.legal-meta{
  font-size:13.5px;color:var(--muted);padding-bottom:22px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}

.tiers{margin:8px 0 12px}
.tiers__row{display:grid;grid-template-columns:1fr 1.1fr 2fr;gap:20px;padding:20px 0;border-top:1px solid var(--line);align-items:baseline}
.tiers__name{font-family:var(--serif);font-size:19px;font-weight:600}
.tiers__price{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--blue)}
.tiers__note{font-size:14.5px;line-height:1.6;color:var(--body)}

.pullquote{
  background:var(--paper);border-left:3px solid var(--blue);border-radius:0 8px 8px 0;
  padding:26px 30px;margin:36px 0;
}
.pullquote p{font-family:var(--serif);font-size:21px;line-height:1.5;font-weight:600;text-wrap:pretty;margin:0;color:var(--ink)}

.share{display:flex;align-items:center;gap:16px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap}
.share__label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.share__btns{display:flex;gap:10px}
.share__btn{
  width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--blue);
  cursor:pointer;transition:all .25s ease;
}
.share__btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 104px, not 24: the pinned header overlays the top of the viewport, and a
   smaller offset slides the card underneath it — same offset as the anchor
   scroll-margin above. */
.aside{position:sticky;top:104px;display:grid;gap:18px}
.aside__card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:24px 24px 26px}
.aside__label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.aside__toc{display:grid;gap:10px;font-size:14px;font-weight:600}
.aside__toc a{color:var(--ink);line-height:1.45;transition:color .2s}
.aside__toc a:hover{color:var(--blue)}
.aside__cta{background:var(--ink);color:var(--paper);border-radius:10px;padding:28px 26px}
.aside__cta-title{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.25;text-wrap:pretty}
.aside__cta-copy{font-size:14px;color:var(--fog);line-height:1.6;margin-top:10px}

/* ---- Contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;padding:96px var(--pad)}
.contact-lede{font-size:16px;line-height:1.7;color:var(--body);max-width:44ch;margin:0 0 36px}
.contact-cards{display:grid;gap:14px}
.contact-card{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 22px;transition:all .28s ease}
.contact-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,32,50,.1);color:inherit}
.contact-card__icon{width:46px;height:46px;border-radius:12px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.contact-card__icon svg{width:21px;height:21px}
/* both are spans inside a span, so they need to be blocks to stack */
.contact-card__label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.contact-card__val{display:block;font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.1}
.contact-card > span:last-child{min-width:0}
.contact-card__val--sm{font-size:17px;line-height:1.2;word-break:break-word}

.contact-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fact{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.fact__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fact__head svg{width:17px;height:17px;flex:none}
.fact__label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fact__val{font-size:15px;color:var(--ink);font-weight:600;line-height:1.5}
.fact__val span{color:var(--muted);font-weight:400}

.follow{display:flex;align-items:center;gap:16px;margin-top:10px;padding-top:22px;border-top:1px solid var(--line)}
.follow__label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.follow__btns{display:flex;gap:10px}
.follow__btn{
  width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--blue);transition:all .25s ease;
}
.follow__btn svg{width:17px;height:17px}
.follow__btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.form-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:44px 44px 48px;box-shadow:0 18px 40px rgba(15,32,50,.07)}
.form-grid{display:grid;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field__label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field__input,.field__textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line-mid);border-radius:4px;
  font-size:14.5px;background:var(--paper);font-family:var(--sans);color:var(--ink);
  transition:border-color .2s ease,background .2s ease;
}
.field__input:focus,.field__textarea:focus{border-color:var(--blue);background:#fff;outline:none}
.field__textarea{min-height:120px;resize:vertical}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{
  padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--line-mid);background:none;color:var(--body);transition:all .25s ease;
}
.chip:hover{border-color:var(--ink)}
.chip.is-active{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* SMS opt-ins and the legal line. The boxes are deliberately plain and plainly
   unticked — a consent control that looks pre-selected is worse than useless. */
.consent{display:grid;gap:14px;padding-top:4px;border-top:1px solid var(--line)}
.consent__row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.consent__box{
  width:17px;height:17px;margin:2px 0 0;flex:none;cursor:pointer;
  accent-color:var(--blue);
}
.consent__label{font-size:13px;line-height:1.6;color:var(--body);cursor:pointer}
.consent__legal{font-size:13px;line-height:1.6;color:var(--body)}
.consent__legal a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.consent__legal a:hover{color:var(--ink)}

/* Validation summary above the contact fields */
.form-alert{
  background:#fdeceb;border:1px solid #f3c4c1;border-radius:6px;
  padding:14px 16px;color:#b3261e;font-size:14px;line-height:1.55;
}
.form-alert p + p{margin-top:6px}

/* Honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

.btn-submit:disabled{opacity:.65;cursor:progress;transform:none;box-shadow:none}

/* --------------------------------------------------------------------------
   Sent popup

   Used by the contact form. There is no .is-open class: the popup animates in
   whenever it stops being [hidden], which is what both routes into it do —
   main.js after an accepted AJAX post, and contact.php itself when a visitor
   without JavaScript arrives back on ?sent=1.
   -------------------------------------------------------------------------- */
/* Flex with margin:auto rather than place-items:center — a grid-centred child
   taller than the viewport gets its top clipped, and this one has to survive a
   phone in landscape. */
.modal{position:fixed;inset:0;z-index:200;overflow-y:auto;display:flex;justify-content:center;padding:22px}
.modal__veil{
  /* Fixed, not absolute: it must still cover the viewport if the popup scrolls. */
  position:fixed;inset:0;background:rgba(11,24,37,.62);backdrop-filter:blur(3px);
  animation:modalVeil .3s ease both;
}

.modal__card{
  position:relative;margin:auto;width:100%;max-width:460px;background:#fff;border-radius:12px;
  padding:52px 44px 40px;text-align:center;box-shadow:0 30px 70px rgba(11,24,37,.35);
  animation:modalCard .34s var(--ease) both;
}
.modal__card:focus{outline:none}

.modal__x{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;color:var(--muted);transition:all .2s ease;
}
.modal__x svg{width:17px;height:17px}
.modal__x:hover{background:var(--paper);color:var(--ink)}

.modal__mark{
  width:62px;height:62px;margin:0 auto 22px;border-radius:999px;
  display:grid;place-items:center;background:var(--blue);color:#fff;
}
.modal__mark svg{width:28px;height:28px}

.modal__title{font-family:var(--serif);font-size:30px;line-height:1.15;font-weight:600;margin-bottom:12px}
.modal__copy{font-size:15px;line-height:1.65;color:var(--body)}

.modal__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.modal__btn{
  display:inline-block;padding:13px 24px;border-radius:4px;font-size:14.5px;font-weight:600;
  border:1px solid var(--line-mid);color:var(--ink);transition:all .25s ease;
}
.modal__btn:hover{border-color:var(--ink);background:var(--paper)}
.modal__btn--dark{background:var(--blue);border-color:var(--blue);color:#fff}
.modal__btn--dark:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}

/* The page behind must not scroll while the popup is up. Both elements carry
   the class: html has overflow-x:hidden, which stops body's overflow
   propagating to the viewport, so locking body alone would not hold. */
html.is-modal-open,body.is-modal-open{overflow:hidden}

[hidden]{display:none !important}

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width:1200px){
  /* :not() because the legal pages have no sidebar — this rule was handing them
     a 280px column that nothing sat in, which pushed their text off-centre by
     exactly that much. They keep the single centred track set above. */
  .article:not(.article--solo){grid-template-columns:minmax(0,74ch) 280px;gap:44px}
}

@media (max-width:1024px){
  .two-col,.two-col--wide{grid-template-columns:1fr;gap:48px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:24px}
  .statband__grid{grid-template-columns:1fr 1fr;gap:24px}
  /* two columns: commercial keeps the tall left card, the four residential
     cards stack down the right and then across the bottom row */
  .services-grid{grid-template-columns:1fr 1fr;grid-auto-rows:236px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .cards--3,.cards--4{grid-template-columns:1fr 1fr}
  /* the third card takes the full width of the second row — a photograph card
     that wide still reads, where a half-empty third column would not */
  .pillars__grid{grid-template-columns:1fr 1fr}
  .pillars__grid > :last-child{grid-column:1 / -1;height:320px}
  .phases{grid-template-columns:1fr 1fr 1fr;gap:30px 26px}
  .pcards,.posts{grid-template-columns:1fr 1fr}
  .pj-grid{grid-template-columns:1fr 1fr}
  .pj-write{grid-template-columns:1fr;gap:34px}
  .pj-plate__rule{display:none}
  /* Sidebar drops below the article; the single column keeps the measure and
     stays centred rather than hugging the left edge. Same :not() as the 1200px
     rule above, or that one's specificity would keep the two columns here. */
  .article:not(.article--solo){grid-template-columns:minmax(0,74ch);gap:52px}
  .aside{position:static;grid-template-columns:1fr 1fr;width:100%}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  /* grid items default to min-width:auto, which lets wide content (the 58px
     stat figures) push the track past the viewport instead of shrinking */
  .two-col > *,.stats-grid > *,.statband__grid > *,.services-grid > *,.footer-grid > *,
  .proc-grid > *,.tst-grid > *,.insights-grid > *,.cards > *,.pcards > *,.posts > *{min-width:0}
}

@media (max-width:820px){
  :root{--pad:22px}
  .sec,.sec--tight{padding:60px var(--pad)}
  .pillars{padding:48px var(--pad) 0}
  /* The row's own bottom padding is enough tail on a phone. */
  .hero .pillars{padding-bottom:0}
  /* Swap over to compact side-by-side rows for phones: a small square photo
     next to its copy, alternating left/right — mirrored from the desktop
     pairing, which puts row 1's photo on the right rather than the left. */
  .pillars__grid{display:none}
  .pillars__list{display:flex}
  /* Photo track scales with the screen so a 360px phone keeps room for the
     one-line blurb; it stays square because the height uses the same clamp. */
  .pillar-row{grid-template-columns:clamp(86px,29vw,128px) 1fr;gap:clamp(10px,4vw,16px);padding:22px 0;align-items:center}
  .pillar-row__media{order:1}
  .pillar-row__content{order:2}
  /* The photo track has to move with the photo, or the reversed row hands the
     narrow track to the copy and squeezes it. */
  .pillar-row--reverse{grid-template-columns:1fr clamp(86px,29vw,128px)}
  .pillar-row--reverse .pillar-row__media{order:2}
  .pillar-row--reverse .pillar-row__content{order:1}
  .pillar-row__media{height:clamp(86px,29vw,128px)}
  /* Grid items default to min-width:auto, so the nowrap blurb's min-content
     width would push the whole row past the viewport instead of ellipsising. */
  .pillar-row__media,.pillar-row__content{min-width:0}
  /* Too small a box for the corner flourishes — drop them here. */
  .pillar-row__media::before,.pillar-row__media::after{display:none}
  .pillar-row__num{font-size:12px}
  .pillar-row__name{font-size:clamp(19px,5.6vw,22px);margin-top:5px}
  .pillar-row__blurb{
    font-size:clamp(11.5px,3.7vw,14.5px);line-height:1.5;margin-top:7px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .pillar-row__go{font-size:12px;margin-top:10px}
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:grid}
  /* CSS beats the svg width/height presentation attributes */
  .brand svg{height:56px;width:auto}
  /* Direct child only — the drawer logo. The close button's svg lives in
     .mnav-head too and must keep its own 20px size. */
  .mnav-head > svg{height:48px;width:auto}
  .header-bar{padding:10px var(--pad)}

  /* The pinned stage stays a full screen tall: it is sticky at top:0, so any
     height under 100svh leaves the runway showing under it for the whole
     scrub. Only the fallback height — no-JS and reduce-motion, where nothing
     pins — and the copy's own padding come down here. */
  .hero__stage{min-height:420px}
  .hero__inner{padding:44px var(--pad) 26px}
  .hero-h1{font-size:40px}
  /* Sized so "Calgary Renovation Specialists" and its rule hold one line on a
     360px phone. */
  .hero__lead .eyebrow{font-size:11px;margin-bottom:12px}
  .hero__lead .eyebrow--rule{gap:10px}
  .hero__lead .eyebrow--rule::before{width:24px}
  .hero__lede{font-size:16px;margin:16px 0 24px;max-width:42ch}
  .hero__actions{gap:10px}
  .h-display,.sectors .h-display,.why-intro .h-display{font-size:31px}
  .h-band{font-size:30px}
  .h-sec,.sec-center .h-sec,.statsband .h-sec{font-size:28px}
  .page-hero__title{font-size:32px}
  .cta__title{font-size:32px}
  .split__title{font-size:27px}
  /* One row of three, small enough to stay one row on a 360px phone — the
     wrapped 2+1 grid pushed the copy up and buried the photograph. */
  .hero-stats{margin-top:30px;padding-top:18px;gap:24px}
  .hero-figs{width:100%;justify-content:space-between;gap:12px}
  .fig__val{font-size:22px}
  .fig__label{font-size:12px}
  /* The cue is pinned to the corner rather than sitting in the wrapping stats
     row, so it no longer crowds anything here — it just needs to be smaller. */
  .hero__cue{bottom:22px;font-size:11px;gap:9px}
  .hero__cue-rule{width:30px}

  .about-band{padding:60px var(--pad)}
  .framed{min-height:420px}
  .framed__main{height:320px}
  .framed__rule{height:320px}
  .framed__inset{height:160px}
  .framed__stamp{width:88px;height:88px;left:-10px;top:-14px}

  .statsband,.statband{padding:56px var(--pad)}
  .stats-grid > div,.statband__item{padding:4px 0 4px 18px}
  .stat__val{font-size:40px}
  .statband__val{font-size:38px}

  .cards--2,.cards--3,.cards--4,.pcards,.posts{grid-template-columns:1fr}
  .pj-plate{padding-top:38px}
  .pj-facts__title{font-size:25px}
  .pj-meta{grid-template-columns:1fr;gap:18px;text-align:left}
  .phases{grid-template-columns:1fr;gap:24px}
  .qa{padding:0 18px}
  .qa__q{font-size:17px;padding:18px 0;gap:14px}
  .services-grid{grid-template-columns:1fr;grid-auto-rows:248px}
  .svc-card--1{grid-row:auto}
  .svc-card--5{grid-column:auto}
  /* no hover on touch — keep the description open, and carry the veil higher
     so the always-visible copy stays legible over the lighter photos */
  .svc-card__reveal{grid-template-rows:1fr;opacity:1;transform:none}
  .svc-card__veil{
    background:
      linear-gradient(to bottom,rgba(15,30,44,.42) 0,transparent 32%),
      linear-gradient(to top,rgba(15,30,44,.95) 0,rgba(15,30,44,.8) 46%,rgba(15,30,44,.3) 76%,rgba(15,30,44,.06) 100%);
  }
  .svc-card--1 .svc-card__title,.svc-card--5 .svc-card__title{font-size:24px}
  .post__media{height:220px}
  /* Reflowed for a phone: brand, then Commercial across the full width — its
     labels are too long for half a column — then Quick Links beside
     Residential/Multi-Family, then the office block full-width (the email
     address is one unbreakable word and does not fit half a phone). */
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 24px;padding:52px var(--pad) 44px}
  .footer-grid > div:nth-child(1){order:1;grid-column:1 / -1}
  .footer-grid > div:nth-child(3){order:2;grid-column:1 / -1}
  .footer-grid > div:nth-child(2){order:3}
  .footer-grid > div:nth-child(4){order:4}
  .footer-grid > div:nth-child(5){order:5;grid-column:1 / -1}
  /* Full-width group: as many link columns as fit without wrapping a label —
     two on a phone, three on a tablet. */
  .footer-grid > div:nth-child(3) .footer-links{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .footer-contact a{overflow-wrap:anywhere}
  /* CSS beats the svg width/height presentation attributes */
  .footer-logo{padding:14px 18px}
  .footer-logo svg{height:96px;width:auto}
  .footer-blurb{margin:16px 0 18px}
  .footer-head{margin-bottom:12px}
  .footer-head--spaced{margin-top:24px}
  .footer-links{gap:9px}
  .footer-bar{padding:20px var(--pad)}

  .process,.why-band,.proj-band,.tst-band,.insights,.pill-row{padding:60px var(--pad)}
  .sectors{padding:60px 0 48px}
  .proc-grid{grid-template-columns:1fr;gap:44px}
  /* Scaled so a step title holds one line in a 355px column — at desktop sizes
     the titles wrap into the 64px ghost numerals and the two collide. */
  .step{padding:14px 16px 14px 24px}
  .step__title{font-size:18px}
  .step__dot{top:22px}
  .step__ghost{font-size:40px;top:8px;right:10px}
  .step__body > div{font-size:13.5px}
  .proc-stage{min-height:340px}
  .split{grid-template-columns:1fr}
  .split--flip{grid-template-columns:1fr}
  .split--flip .split__body{order:1}
  .split--flip .split__photo{order:2}
  .split__body{padding:52px var(--pad)}
  .split__photo{min-height:280px}

  .why-row{flex-direction:column;height:auto}
  /* Stacked vertically, flex-grow has no fixed height to share — min-height
     drives the open/closed size instead. */
  .why-panel{flex-basis:auto;min-height:128px}
  .why-panel.is-active{min-height:300px}
  .why-panel__spine{
    left:28px;right:28px;top:auto;bottom:22px;transform:none;
    writing-mode:horizontal-tb;white-space:normal;line-height:1.25;
  }
  .why-panel.is-active .why-panel__spine{transform:none}

  .tst-grid{grid-template-columns:1fr;gap:44px}
  .tst-photos{height:300px}
  .tst-quote__text{font-size:23px;line-height:1.4}
  .insights-grid{grid-template-columns:1fr;gap:36px}
  /* Slimmer row furniture on a phone — at desktop sizes the numeral, gaps and
     arrow leave the titles ~185px and they wrap four lines deep. */
  .ins-row{gap:14px;padding:18px 12px}
  .ins-row__num{width:26px;font-size:17px}
  .ins-row__title{font-size:17px}
  .ins-row__meta{gap:10px}
  .ins-row__read{white-space:nowrap}
  .ins-row__arrow{width:32px;height:32px;font-size:14px}
  .ins-stage{min-height:280px}
  /* the arrows go with the card width: below this the rail is swiped, not clicked */
  .sectors__head{flex-direction:column;align-items:flex-start;gap:26px;margin-bottom:30px}
  .sectors__nav{display:none}
  .sector{flex:0 0 76vw;max-width:300px;height:340px}

  .sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .sec-head__note{text-align:left}

  /* Projects carousel: wider slides, shallower stack */
  .proj-wrap{margin:0;height:400px;--step:20%;--slide-w:80%}
  .proj-slide{height:240px}
  .proj-slide.is-d1{height:290px}
  .proj-slide.is-active{height:360px}
  .carousel-arrow{width:40px;height:40px;font-size:16px}
  .carousel-arrow--prev{left:4px}
  .carousel-arrow--next{right:4px}
  .proj-slide__caption{left:20px;right:20px;bottom:20px}

  /* Oversized decorative glyphs */
  .deco-num{font-size:110px;right:var(--pad);top:60px}
  .deco-quote{font-size:170px;right:12px}

  .article{padding:56px var(--pad)}
  .article__body h2{font-size:24px;margin:40px 0 14px}
  .article__body p{font-size:16px}
  .tiers__row{grid-template-columns:1fr;gap:6px}
  .aside{grid-template-columns:1fr}
  .contact-grid{padding:60px var(--pad)}
  .form-card{padding:28px 24px 32px}
  .form-row{grid-template-columns:1fr}
  .modal{padding:16px}
  .modal__card{padding:44px 24px 32px}
  .modal__title{font-size:25px}
  .modal__actions{flex-direction:column;gap:10px}
  .modal__btn{width:100%;text-align:center}
  .cta__inner{padding:64px var(--pad)}
  .cta__photo{width:100%;opacity:.35}
  .page-hero__inner{padding:44px var(--pad) 38px}
  .crumbs--nowrap{flex-wrap:wrap;white-space:normal}
}

@media (max-width:520px){
  :root{--pad:18px}
  .hero-h1{font-size:33px}
  .hero__stage{min-height:380px}
  .hero__inner{padding:36px var(--pad) 22px}
  .hero__lede{margin:14px 0 20px}
  .h-display,.sectors .h-display,.why-intro .h-display{font-size:27px}
  .page-hero__title{font-size:27px}
  .cta__title{font-size:28px}
  .stats-grid,.statband__grid{grid-template-columns:1fr 1fr;gap:18px}
  .stat__val{font-size:34px}
  .statband__val{font-size:32px}
  .proj-wrap{height:340px;--slide-w:86%}
  .proj-slide{height:200px}
  .proj-slide.is-d1{height:240px}
  .proj-slide.is-active{height:300px}
  .contact-pair{grid-template-columns:1fr}
  .tst-quote__text{font-size:20px}
}

/* The banner takes its height from the viewport but the copy inside it was
   sized once, so a short viewport ran the two into each other — and the stage
   clips, with the copy sitting on its bottom edge, so what went missing was
   the top of the headline.

   Browser zoom is the usual way to get there rather than a genuinely small
   monitor: at 125% a 1600x900 screen reports 1280x720 CSS pixels, which took
   118px off the copy, and 1440x900 at the same zoom took 168px. These step the
   type down with the height actually available. Height queries, not width —
   the banner is short because the viewport is short, whatever its width. */
@media (min-width:900px) and (max-height:880px){
  .hero-h1{font-size:52px}
  .hero__lede{font-size:16.5px;margin:20px 0 28px}
  .hero__inner{padding:64px var(--pad) 36px}
  .hero-stats{margin-top:32px;padding-top:18px}
}
@media (min-width:900px) and (max-height:780px){
  .hero-h1{font-size:44px}
  .hero__lede{font-size:16px;margin:16px 0 22px}
  .hero__inner{padding:52px var(--pad) 30px}
  .hero-stats{margin-top:24px;padding-top:15px}
  .fig__val{font-size:24px}
}
@media (min-width:900px) and (max-height:680px){
  .hero-h1{font-size:37px}
  .hero__lede{font-size:15.5px;margin:12px 0 18px}
  .hero__inner{padding:38px var(--pad) 24px}
  .hero-stats{margin-top:18px;padding-top:12px}
  .hero__lead .eyebrow{margin-bottom:10px}
}