/* ── 01-tokens ── */
/* ═══════════════════════════════════════════════════════════════════════
   TROGDEN PLUMBING — Design tokens
   Brand sampled from the company truck: royal blue + charcoal.
   Copper accent added for warmth (copper pipe — the plumber's material).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Brand */
  --brand:        #1E7BE0;
  --brand-600:    #1567C6;
  --brand-700:    #0B4FA8;
  --brand-800:    #08397C;
  --brand-300:    #6FB3F5;
  --brand-200:    #A9D1FA;
  --brand-050:    #EAF3FE;

  --copper:       #D2833F;
  --copper-600:   #A85A1E;
  --copper-300:   #EBAE73;
  --copper-050:   #FCF3EA;

  /* Neutrals — cool navy-leaning greys */
  --ink:          #0A101B;
  --ink-800:      #0F1826;
  --ink-700:      #172236;
  --ink-600:      #22314A;
  --slate:        #47597A;
  --slate-400:    #67748C;   /* 4.6:1 on white — was #7A8AA5 at 3.3:1 */
  --slate-300:    #A6B2C6;
  --line:         #E2E8F1;
  --paper:        #F5F8FC;
  --paper-2:      #EDF2F9;
  --white:        #FFFFFF;

  /* Semantic */
  --bg:           var(--white);
  --fg:           var(--ink-700);
  --fg-strong:    var(--ink);
  --fg-muted:     var(--slate);

  /* Type */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-eyebrow:   clamp(.72rem, .68rem + .18vw, .84rem);
  --fs-small:     clamp(.86rem, .83rem + .16vw, .95rem);
  --fs-body:      clamp(1rem, .96rem + .22vw, 1.125rem);
  --fs-lead:      clamp(1.12rem, 1.02rem + .5vw, 1.4rem);
  --fs-h4:        clamp(1.18rem, 1.05rem + .6vw, 1.5rem);
  --fs-h3:        clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  --fs-h2:        clamp(2rem, 1.5rem + 2.3vw, 3.5rem);
  --fs-h1:        clamp(2.6rem, 1.7rem + 4.2vw, 5.75rem);
  --fs-mega:      clamp(3.2rem, 1.9rem + 5.8vw, 8rem);

  /* Layout */
  --container:    1240px;
  --gutter:       clamp(1.15rem, .8rem + 1.6vw, 2.5rem);
  --section-y:    clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --radius:       14px;
  --radius-lg:    22px;
  --radius-xl:    30px;

  /* Elevation — cool-tinted, never pure black */
  --sh-sm:  0 1px 2px rgba(10,16,27,.06), 0 2px 6px rgba(10,16,27,.05);
  --sh-md:  0 4px 12px rgba(10,16,27,.07), 0 12px 28px rgba(10,16,27,.07);
  --sh-lg:  0 10px 24px rgba(10,16,27,.09), 0 28px 60px rgba(10,16,27,.11);
  --sh-xl:  0 20px 44px rgba(10,16,27,.12), 0 48px 100px rgba(10,16,27,.16);
  --sh-brand: 0 10px 24px rgba(30,123,224,.22), 0 22px 48px rgba(11,79,168,.20);

  /* Semantic extras that were previously written as one-off literals */
  --ok:        #2FB36A;
  --star:      #F5A623;
  --focus:     0 0 0 4px rgba(30,123,224,.32);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    .18s var(--ease);
  --t:         .34s var(--ease);
  --t-slow:    .7s var(--ease-out);

  --header-h:  84px;
}
@media (max-width:900px){ :root{ --header-h:68px; } }

/* Wide-screen scale-up lives in 10-wide.css, which loads last. */

/* ── 02-base ── */
/* ═══════════════ Base & primitives ═══════════════ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 18px); }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.68;
  font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
/* <picture> wraps an <img> purely to offer a WebP source. Without this
   it becomes a real box between the layout parent and the image, and
   every `.card img{height:100%}` style stops reaching its target. */
picture{ display:contents; }
/* An .ico is an <svg> with no intrinsic size. As a flex item with no width it
   stretches to fill the line box — a 62px checkmark next to 13px text. Every
   component sets its own size, but one that forgets, or one whose rule still
   names an old class, should land slightly wrong rather than enormous. */
.ico{ width:1em; height:1em; flex:none; }
/* …but never into WordPress's own chrome. The global `height:auto` beats an
   <img height="20"> presentational attribute, so a 20px admin-bar icon
   renders at its intrinsic size — ours came out 122x154 over the toolbar. */
#wpadminbar img,#wpadminbar svg{ max-width:none; height:auto; display:inline-block; }
a{ color:var(--brand-700); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--brand-600); }

h1,h2,h3,h4,h5{
  font-family:var(--font-display); color:var(--fg-strong);
  font-weight:700; line-height:.98; letter-spacing:-.012em;
  margin:0 0 .5em; text-wrap:balance;
}
h1{ font-size:var(--fs-h1); letter-spacing:-.022em; }
h2{ font-size:var(--fs-h2); letter-spacing:-.018em; }
h3{ font-size:var(--fs-h3); line-height:1.06; }
h4{ font-size:var(--fs-h4); line-height:1.14; }
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:700; color:var(--fg-strong); }

::selection{ background:var(--brand); color:#fff; }
/* One focus language everywhere. On dark ground the brand blue is
   blue-on-blue at 1.8:1, so those surfaces get a light ring instead. */
:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:4px; }
.on-dark :focus-visible,
.hero :focus-visible,
.pagehead :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.topbar :focus-visible,
.drawer :focus-visible{ outline-color:#9AD6FF; }

/* ── Layout ── */
.container{ width:min(100% - (var(--gutter)*2), var(--container)); margin-inline:auto; }
.container-wide{ width:min(100% - (var(--gutter)*2), 1600px); margin-inline:auto; }
.section{ padding-block:var(--section-y); position:relative; }
.section-sm{ padding-block:calc(var(--section-y) * .62); }

/* ── Eyebrow ── */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brand-700);
  margin:0 0 1.1rem;
}
.eyebrow:not(.elementor-widget)::before{
  content:""; width:28px; height:2px; flex:none;
  background:linear-gradient(90deg,var(--brand),var(--copper));
}
.eyebrow-c{ justify-content:center; }
.on-dark .eyebrow, .eyebrow.is-light{ color:var(--brand-300); }

/* ── Lead paragraph ── */
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--fg-muted); font-weight:400; }
.on-dark .lead{ color:var(--slate-300); }

/* ── Section heading block ── */
.sec-head{ max-width:62ch; margin-bottom:clamp(2.2rem,1.5rem + 2vw,3.8rem); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ margin-bottom:.42em; }

/* ── Buttons ── */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-display); font-size:1.02rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; line-height:1;
  padding:1.12em 1.9em; border-radius:9px; border:2px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg); text-decoration:none;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  box-shadow:var(--sh-sm);
}
.btn::after{ /* sheen */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-brand); color:var(--btn-fg); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0); }

.btn-primary{ --btn-bg:linear-gradient(135deg,var(--brand) 0%,var(--brand-700) 100%); }
/* White on this copper is 2.98:1 — below AA for the button's own label.
   Ink on copper clears it comfortably and reads as deliberate. */
.btn-copper{ --btn-bg:linear-gradient(135deg,var(--copper) 0%,var(--copper-600) 100%); --btn-fg:#14100B; }
.btn-copper:hover{ --btn-fg:#14100B; }
.btn-copper:hover{ box-shadow:0 10px 24px rgba(210,131,63,.3), 0 22px 48px rgba(185,106,42,.22); }
/* The sheen is a white sweep across the button. On a dark fill it reads as
   gloss; on a near-white one it washes the label out for the length of the
   animation — which is exactly while someone is hovering to read a phone
   number. Light buttons get no sheen. */
.btn-ghost::after,.btn-light::after,.btn-outline-light::after{ content:none; }

/* A phone number is the most important thing on this site, so the button
   carrying it resolves to a solid brand fill on hover rather than tinting a
   pale button paler. The resting border is a real grey, not the hairline
   --line, so the button has an edge before you touch it. */
.btn-ghost{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:var(--slate-300); box-shadow:none; }
.btn-ghost:hover,.btn-ghost:focus-visible{
  --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:var(--brand); box-shadow:var(--sh-sm);
}
.btn-ghost:hover .ico,.btn-ghost:focus-visible .ico{ color:#fff; }
/* The phone number is the conversion on a plumber's site, so the button
   carrying it is not a secondary. As a pale outline next to a solid "Request a
   quote" it read as an afterthought and the number itself was hard to pick
   out. Solid ink gives two strong buttons that are still clearly different,
   and the number sits at 19:1. */
.btn-tel{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); }
.btn-tel::after{ content:none; }
.btn-tel .ico{ color:var(--brand-300); }
.btn-tel:hover,.btn-tel:focus-visible{
  --btn-bg:var(--brand); --btn-bd:var(--brand); --btn-fg:#fff;
}
.btn-tel:hover .ico,.btn-tel:focus-visible .ico{ color:#fff; }
/* On a dark band the ink button would disappear, so it inverts there. */
.on-dark .btn-tel,.hero .btn-tel{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }
.on-dark .btn-tel .ico,.hero .btn-tel .ico{ color:var(--brand-700); }

/* Same rule as the Elementor buttons in 09-elementor.css: a phone link is a
   solid button wherever it appears, whatever classes it happens to carry. */
.btn-ghost[href^="tel:"]{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); }
.btn-ghost[href^="tel:"]::after{ content:none; }
.btn-ghost[href^="tel:"] .ico{ color:var(--brand-300); }
.btn-ghost[href^="tel:"]:hover,.btn-ghost[href^="tel:"]:focus-visible{
  --btn-bg:var(--brand); --btn-bd:var(--brand); --btn-fg:#fff;
}
.btn-ghost[href^="tel:"]:hover .ico{ color:#fff; }
.btn-light[href^="tel:"] .ico{ color:var(--brand-700); }

.btn-light{ --btn-bg:#fff; --btn-fg:var(--ink); }
.btn-light:hover{ --btn-bg:var(--brand); --btn-fg:#fff; }
.btn-outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.42); box-shadow:none; }
.btn-outline-light:hover{ --btn-bd:#fff; background:rgba(255,255,255,.1); --btn-fg:#fff; }
.btn-lg{ font-size:1.12rem; padding:1.25em 2.3em; }
.btn-sm{ font-size:.9rem; padding:.9em 1.4em; }
.btn-block{ width:100%; }
.btn .ico{ width:1.15em; height:1.15em; flex:none; }

/* Button rows never break a label mid-word on a phone */
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }
.btn-row.center{ justify-content:center; }
@media (max-width:420px){ .btn-row > .btn{ width:100%; } }

/* ── Link with arrow ── */
.arrow-link{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  font-family:var(--font-display); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-size:.95rem; color:var(--brand-700);
}
.arrow-link .ico{ width:1.05em; height:1.05em; transition:transform var(--t); }
.arrow-link:hover .ico{ transform:translateX(5px); }
.on-dark .arrow-link{ color:var(--brand-300); }

/* ── Surfaces ── */
.on-dark{ background:var(--ink); color:var(--slate-300); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:#fff; }
.on-dark strong{ color:#fff; }
.bg-paper{ background:var(--paper); }
.bg-paper-2{ background:var(--paper-2); }

/* ── Utility ── */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:#fff; padding:.9rem 1.4rem; font-weight:700; }
.skip-link:focus{ left:0; }
.text-center{ text-align:center; }
.nowrap{ white-space:nowrap; }

/* ── 03-chrome ── */
/* ═══════════════ Site chrome: topbar, header, nav, footer ═══════════════ */

/* ── Announcement / topbar ── */
.topbar{
  background:linear-gradient(90deg,var(--ink) 0%,var(--brand-800) 55%,var(--brand-700) 100%);
  color:rgba(255,255,255,.88); font-size:.82rem; position:relative; z-index:60;
}
.topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; min-height:40px; padding-block:.4rem; }
.topbar-l,.topbar-r{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.topbar b{ color:#fff; }
.topbar a{ color:#fff; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:.45em; }
.topbar a:hover{ color:var(--brand-200); }
.topbar .ico{ width:1em; height:1em; opacity:.85; }
.topbar .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(47,179,106,.7); animation:pulse 2.4s infinite; flex:none; }
@keyframes pulse{ 70%{box-shadow:0 0 0 9px rgba(47,179,106,0);} 100%{box-shadow:0 0 0 0 rgba(47,179,106,0);} }
.topbar .topbar-call{ display:none; align-items:center; gap:.4em; font-weight:700; }
.topbar-call .ico{ width:1em; height:1em; }
@media (max-width:860px){ .topbar-l .hide-sm{ display:none; } }
@media (max-width:620px){
  /* On a phone the licence line is noise and the number is the point. */
  .topbar-r{ display:none; }
  .topbar .topbar-call{ display:inline-flex; }
  .topbar-in{ justify-content:space-between; gap:.8rem; }
  .topbar{ font-size:.78rem; }
}

/* ── Header ── */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(226,232,241,.9);
  transition:box-shadow var(--t), background var(--t);
}
.site-header.is-stuck{ box-shadow:0 6px 24px rgba(10,16,27,.09); background:rgba(255,255,255,.95); }
.header-in{ display:flex; align-items:center; gap:1.5rem; min-height:var(--header-h); }

/* Logo */
.logo{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.logo svg{ height:clamp(38px,3.2vw,50px); width:auto; }
.logo:hover{ opacity:.88; }

/* Primary nav.
   Two DOM shapes must both work: the theme's fallback emits
   `nav.nav > a`, while wp_nav_menu emits `nav.nav > ul > li > a`. Styling
   only the first leaves a real install showing a bulleted vertical list —
   and provisioning assigns a menu, so every install hits that path. */
.nav{ display:flex; align-items:center; gap:.18rem; margin-left:auto; }
.nav > ul,.nav .nav-list{
  display:flex; align-items:center; gap:.18rem;
  list-style:none; margin:0; padding:0;
}
.nav li{ position:relative; list-style:none; }
.nav a{
  font-family:var(--font-display); font-size:1.01rem; font-weight:600; letter-spacing:.055em;
  text-transform:uppercase; color:var(--ink-600); text-decoration:none;
  padding:.62rem .85rem; border-radius:7px; position:relative; transition:color var(--t-fast), background var(--t-fast);
  white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.34rem; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--copper)); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform var(--t);
}
.nav a:hover{ color:var(--brand-700); background:var(--brand-050); }
.nav a:hover::after,.nav a.current::after,.nav li.current-menu-item > a::after{ transform:scaleX(1); }
.nav a.current,.nav li.current-menu-item > a{ color:var(--brand-700); }

/* Header actions */
.header-cta{ display:flex; align-items:center; gap:.7rem; flex:none; }
.header-phone{
  display:inline-flex; flex-direction:column; line-height:1.1; text-decoration:none;
  padding-right:.2rem;
}
.header-phone .lbl{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--slate-400); font-weight:700; font-family:var(--font-display); }
.header-phone .num{ font-family:var(--font-display); font-size:1.28rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.header-phone:hover .num{ color:var(--brand); }
@media (max-width:1180px){ .header-phone{ display:none; } }
@media (max-width:1100px){ .nav{ display:none; } }

/* One-tap call, phones only — the burger alone buries the phone number
   two taps deep on the page that matters most. */
.icon-call{
  display:none; width:46px; height:46px; border-radius:10px; flex:none;
  place-items:center; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));
  box-shadow:0 6px 16px rgba(30,123,224,.36);
}
.icon-call .ico{ width:20px; height:20px; }
.icon-call:hover{ color:#fff; transform:translateY(-1px); }
@media (max-width:620px){ .icon-call{ display:grid; } }

/* Burger */
.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff;
  border-radius:10px; cursor:pointer; padding:0; place-items:center; flex:none;
}
.burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--t), opacity var(--t-fast); }
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:1100px){
  .burger{ display:grid; }
  /* Push the whole action group to the container's right edge; a stray
     margin-left:0 here left the burger floating mid-header. */
  .header-cta{ margin-left:auto; }
}
@media (max-width:620px){ .header-cta .btn{ display:none; } }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:90; color:#fff;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(30,123,224,.26), transparent 66%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink) 58%, #071019 100%);
  display:flex; flex-direction:column; padding:1rem var(--gutter) 0;
  /* dvh, not vh: on iOS the address bar otherwise steals the last 60px and
     takes the call button with it. */
  height:100dvh; max-height:100dvh;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .45s var(--ease-out), visibility .45s;
  overflow:hidden; overscroll-behavior:contain;
}
.drawer.open{ transform:translateY(0); visibility:visible; }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); }
.drawer-close{ width:46px; height:46px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; cursor:pointer; }
.drawer-close svg{ width:20px; height:20px; }
/* The nav scrolls if it must; the phone block below never does. */
.drawer nav{
  display:flex; flex-direction:column; margin-top:.6rem;
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding-bottom:.4rem;
}
.drawer nav > ul,.drawer .drawer-list{
  display:flex; flex-direction:column; list-style:none; margin:0; padding:0;
}
.drawer nav li{ list-style:none; }
.drawer nav a{
  font-family:var(--font-display); font-size:clamp(2rem,9vw,2.9rem); font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em; color:#fff; text-decoration:none;
  padding:.4em 0; border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform:translateY(16px);
}
.drawer.open nav a{ animation:drawerIn .5s var(--ease-out) forwards; }
.drawer.open nav > a:nth-child(1),.drawer.open nav li:nth-child(1) a{animation-delay:.06s}
.drawer.open nav > a:nth-child(2),.drawer.open nav li:nth-child(2) a{animation-delay:.11s}
.drawer.open nav > a:nth-child(3),.drawer.open nav li:nth-child(3) a{animation-delay:.16s}
.drawer.open nav > a:nth-child(4),.drawer.open nav li:nth-child(4) a{animation-delay:.21s}
.drawer.open nav > a:nth-child(5),.drawer.open nav li:nth-child(5) a{animation-delay:.26s}
.drawer.open nav > a:nth-child(6),.drawer.open nav li:nth-child(6) a{animation-delay:.31s}
@keyframes drawerIn{ to{opacity:1;transform:none;} }
.drawer nav a .n{ font-size:.8rem; letter-spacing:.2em; color:var(--brand-300); opacity:.7; }
.drawer nav a:hover{ color:var(--brand-300); }
.drawer-foot{
  flex:none; position:relative; z-index:2;
  margin-inline:calc(var(--gutter) * -1);
  /* The crest lives INSIDE this padding. Hanging it over the nav with a
     negative offset covered whichever menu item happened to be at the
     boundary — it read as a rendering fault, not as decoration. */
  padding:52px var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  display:grid; gap:.7rem;
}
/* Water gathering at the foot of the drawer. */
.drawer-foot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:52px; z-index:-1;
  pointer-events:none;
  /* Same water as the hero: three irregular swells drifting one way at
     different speeds. The old single sine read as a cartoon wave. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2824%2C92%2C178%2C.62%29'/%3E%3Cstop offset='1' stop-color='rgba%2811%2C79%2C168%2C.55%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0.0 36.7 L5.7 36.5 L11.4 36.2 L17.1 35.8 L22.9 35.2 L28.6 34.6 L34.3 33.9 L40.0 33.3 L45.7 32.8 L51.4 32.4 L57.1 32.2 L62.9 32.3 L68.6 32.6 L74.3 33.0 L80.0 33.7 L85.7 34.5 L91.4 35.4 L97.1 36.3 L102.9 37.1 L108.6 37.8 L114.3 38.4 L120.0 38.8 L125.7 39.0 L131.4 39.1 L137.1 39.0 L142.9 38.8 L148.6 38.5 L154.3 38.3 L160.0 38.1 L165.7 38.0 L171.4 38.0 L177.1 38.3 L182.9 38.7 L188.6 39.2 L194.3 39.9 L200.0 40.7 L205.7 41.6 L211.4 42.3 L217.1 43.0 L222.9 43.5 L228.6 43.9 L234.3 44.0 L240.0 43.9 L245.7 43.5 L251.4 43.0 L257.1 42.4 L262.9 41.6 L268.6 40.9 L274.3 40.2 L280.0 39.5 L285.7 39.0 L291.4 38.7 L297.1 38.6 L302.9 38.6 L308.6 38.7 L314.3 39.0 L320.0 39.3 L325.7 39.5 L331.4 39.7 L337.1 39.8 L342.9 39.7 L348.6 39.4 L354.3 38.9 L360.0 38.3 L365.7 37.5 L371.4 36.6 L377.1 35.7 L382.9 34.8 L388.6 33.9 L394.3 33.3 L400.0 32.8 L405.7 32.5 L411.4 32.5 L417.1 32.7 L422.9 33.0 L428.6 33.5 L434.3 34.1 L440.0 34.7 L445.7 35.3 L451.4 35.7 L457.1 36.1 L462.9 36.3 L468.6 36.3 L474.3 36.2 L480.0 35.9 L485.7 35.6 L491.4 35.2 L497.1 34.9 L502.9 34.6 L508.6 34.5 L514.3 34.6 L520.0 34.8 L525.7 35.3 L531.4 36.0 L537.1 36.8 L542.9 37.7 L548.6 38.7 L554.3 39.7 L560.0 40.5 L565.7 41.3 L571.4 41.9 L577.1 42.3 L582.9 42.4 L588.6 42.4 L594.3 42.2 L600.0 41.8 L605.7 41.4 L611.4 40.9 L617.1 40.5 L622.9 40.2 L628.6 40.0 L634.3 40.0 L640.0 40.1 L645.7 40.4 L651.4 40.8 L657.1 41.3 L662.9 41.8 L668.6 42.3 L674.3 42.6 L680.0 42.9 L685.7 42.9 L691.4 42.7 L697.1 42.3 L702.9 41.7 L708.6 40.9 L714.3 40.0 L720.0 39.1 L725.7 38.1 L731.4 37.2 L737.1 36.4 L742.9 35.8 L748.6 35.4 L754.3 35.2 L760.0 35.1 L765.7 35.3 L771.4 35.5 L777.1 35.8 L782.9 36.2 L788.6 36.4 L794.3 36.6 L800.0 36.7 L800 60 L0 60Z' fill='url%28%23c%29'/%3E%3Cpath d='M0.0 36.7 L5.7 36.5 L11.4 36.2 L17.1 35.8 L22.9 35.2 L28.6 34.6 L34.3 33.9 L40.0 33.3 L45.7 32.8 L51.4 32.4 L57.1 32.2 L62.9 32.3 L68.6 32.6 L74.3 33.0 L80.0 33.7 L85.7 34.5 L91.4 35.4 L97.1 36.3 L102.9 37.1 L108.6 37.8 L114.3 38.4 L120.0 38.8 L125.7 39.0 L131.4 39.1 L137.1 39.0 L142.9 38.8 L148.6 38.5 L154.3 38.3 L160.0 38.1 L165.7 38.0 L171.4 38.0 L177.1 38.3 L182.9 38.7 L188.6 39.2 L194.3 39.9 L200.0 40.7 L205.7 41.6 L211.4 42.3 L217.1 43.0 L222.9 43.5 L228.6 43.9 L234.3 44.0 L240.0 43.9 L245.7 43.5 L251.4 43.0 L257.1 42.4 L262.9 41.6 L268.6 40.9 L274.3 40.2 L280.0 39.5 L285.7 39.0 L291.4 38.7 L297.1 38.6 L302.9 38.6 L308.6 38.7 L314.3 39.0 L320.0 39.3 L325.7 39.5 L331.4 39.7 L337.1 39.8 L342.9 39.7 L348.6 39.4 L354.3 38.9 L360.0 38.3 L365.7 37.5 L371.4 36.6 L377.1 35.7 L382.9 34.8 L388.6 33.9 L394.3 33.3 L400.0 32.8 L405.7 32.5 L411.4 32.5 L417.1 32.7 L422.9 33.0 L428.6 33.5 L434.3 34.1 L440.0 34.7 L445.7 35.3 L451.4 35.7 L457.1 36.1 L462.9 36.3 L468.6 36.3 L474.3 36.2 L480.0 35.9 L485.7 35.6 L491.4 35.2 L497.1 34.9 L502.9 34.6 L508.6 34.5 L514.3 34.6 L520.0 34.8 L525.7 35.3 L531.4 36.0 L537.1 36.8 L542.9 37.7 L548.6 38.7 L554.3 39.7 L560.0 40.5 L565.7 41.3 L571.4 41.9 L577.1 42.3 L582.9 42.4 L588.6 42.4 L594.3 42.2 L600.0 41.8 L605.7 41.4 L611.4 40.9 L617.1 40.5 L622.9 40.2 L628.6 40.0 L634.3 40.0 L640.0 40.1 L645.7 40.4 L651.4 40.8 L657.1 41.3 L662.9 41.8 L668.6 42.3 L674.3 42.6 L680.0 42.9 L685.7 42.9 L691.4 42.7 L697.1 42.3 L702.9 41.7 L708.6 40.9 L714.3 40.0 L720.0 39.1 L725.7 38.1 L731.4 37.2 L737.1 36.4 L742.9 35.8 L748.6 35.4 L754.3 35.2 L760.0 35.1 L765.7 35.3 L771.4 35.5 L777.1 35.8 L782.9 36.2 L788.6 36.4 L794.3 36.6 L800.0 36.7' fill='none' stroke='rgba%28185%2C228%2C255%2C.5%29' stroke-width='1.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2830%2C110%2C205%2C.40%29'/%3E%3Cstop offset='1' stop-color='rgba%2811%2C79%2C168%2C.50%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0.0 35.5 L5.0 35.5 L10.0 35.4 L15.0 35.1 L20.0 34.7 L25.0 34.2 L30.0 33.5 L35.0 32.7 L40.0 31.9 L45.0 30.9 L50.0 30.0 L55.0 29.0 L60.0 28.0 L65.0 27.1 L70.0 26.3 L75.0 25.5 L80.0 24.9 L85.0 24.5 L90.0 24.1 L95.0 23.9 L100.0 23.9 L105.0 24.0 L110.0 24.2 L115.0 24.5 L120.0 24.9 L125.0 25.4 L130.0 25.8 L135.0 26.3 L140.0 26.7 L145.0 27.1 L150.0 27.5 L155.0 27.7 L160.0 27.9 L165.0 28.0 L170.0 28.0 L175.0 27.9 L180.0 27.8 L185.0 27.7 L190.0 27.5 L195.0 27.4 L200.0 27.3 L205.0 27.2 L210.0 27.2 L215.0 27.3 L220.0 27.6 L225.0 27.9 L230.0 28.3 L235.0 28.9 L240.0 29.6 L245.0 30.3 L250.0 31.2 L255.0 32.0 L260.0 32.9 L265.0 33.8 L270.0 34.6 L275.0 35.4 L280.0 36.0 L285.0 36.6 L290.0 37.0 L295.0 37.2 L300.0 37.3 L305.0 37.2 L310.0 37.0 L315.0 36.6 L320.0 36.2 L325.0 35.6 L330.0 34.9 L335.0 34.2 L340.0 33.4 L345.0 32.7 L350.0 32.0 L355.0 31.4 L360.0 30.8 L365.0 30.3 L370.0 29.9 L375.0 29.7 L380.0 29.5 L385.0 29.4 L390.0 29.4 L395.0 29.4 L400.0 29.5 L405.0 29.6 L410.0 29.7 L415.0 29.7 L420.0 29.7 L425.0 29.6 L430.0 29.5 L435.0 29.2 L440.0 28.9 L445.0 28.5 L450.0 27.9 L455.0 27.4 L460.0 26.7 L465.0 26.1 L470.0 25.4 L475.0 24.8 L480.0 24.2 L485.0 23.7 L490.0 23.3 L495.0 23.0 L500.0 22.9 L505.0 23.0 L510.0 23.1 L515.0 23.5 L520.0 24.0 L525.0 24.6 L530.0 25.3 L535.0 26.2 L540.0 27.1 L545.0 28.0 L550.0 28.9 L555.0 29.8 L560.0 30.7 L565.0 31.4 L570.0 32.1 L575.0 32.7 L580.0 33.1 L585.0 33.4 L590.0 33.6 L595.0 33.7 L600.0 33.7 L605.0 33.6 L610.0 33.4 L615.0 33.2 L620.0 33.0 L625.0 32.8 L630.0 32.6 L635.0 32.5 L640.0 32.4 L645.0 32.4 L650.0 32.5 L655.0 32.7 L660.0 33.0 L665.0 33.3 L670.0 33.7 L675.0 34.0 L680.0 34.4 L685.0 34.8 L690.0 35.1 L695.0 35.3 L700.0 35.5 L700 60 L0 60Z' fill='url%28%23b%29'/%3E%3Cpath d='M0.0 35.5 L5.0 35.5 L10.0 35.4 L15.0 35.1 L20.0 34.7 L25.0 34.2 L30.0 33.5 L35.0 32.7 L40.0 31.9 L45.0 30.9 L50.0 30.0 L55.0 29.0 L60.0 28.0 L65.0 27.1 L70.0 26.3 L75.0 25.5 L80.0 24.9 L85.0 24.5 L90.0 24.1 L95.0 23.9 L100.0 23.9 L105.0 24.0 L110.0 24.2 L115.0 24.5 L120.0 24.9 L125.0 25.4 L130.0 25.8 L135.0 26.3 L140.0 26.7 L145.0 27.1 L150.0 27.5 L155.0 27.7 L160.0 27.9 L165.0 28.0 L170.0 28.0 L175.0 27.9 L180.0 27.8 L185.0 27.7 L190.0 27.5 L195.0 27.4 L200.0 27.3 L205.0 27.2 L210.0 27.2 L215.0 27.3 L220.0 27.6 L225.0 27.9 L230.0 28.3 L235.0 28.9 L240.0 29.6 L245.0 30.3 L250.0 31.2 L255.0 32.0 L260.0 32.9 L265.0 33.8 L270.0 34.6 L275.0 35.4 L280.0 36.0 L285.0 36.6 L290.0 37.0 L295.0 37.2 L300.0 37.3 L305.0 37.2 L310.0 37.0 L315.0 36.6 L320.0 36.2 L325.0 35.6 L330.0 34.9 L335.0 34.2 L340.0 33.4 L345.0 32.7 L350.0 32.0 L355.0 31.4 L360.0 30.8 L365.0 30.3 L370.0 29.9 L375.0 29.7 L380.0 29.5 L385.0 29.4 L390.0 29.4 L395.0 29.4 L400.0 29.5 L405.0 29.6 L410.0 29.7 L415.0 29.7 L420.0 29.7 L425.0 29.6 L430.0 29.5 L435.0 29.2 L440.0 28.9 L445.0 28.5 L450.0 27.9 L455.0 27.4 L460.0 26.7 L465.0 26.1 L470.0 25.4 L475.0 24.8 L480.0 24.2 L485.0 23.7 L490.0 23.3 L495.0 23.0 L500.0 22.9 L505.0 23.0 L510.0 23.1 L515.0 23.5 L520.0 24.0 L525.0 24.6 L530.0 25.3 L535.0 26.2 L540.0 27.1 L545.0 28.0 L550.0 28.9 L555.0 29.8 L560.0 30.7 L565.0 31.4 L570.0 32.1 L575.0 32.7 L580.0 33.1 L585.0 33.4 L590.0 33.6 L595.0 33.7 L600.0 33.7 L605.0 33.6 L610.0 33.4 L615.0 33.2 L620.0 33.0 L625.0 32.8 L630.0 32.6 L635.0 32.5 L640.0 32.4 L645.0 32.4 L650.0 32.5 L655.0 32.7 L660.0 33.0 L665.0 33.3 L670.0 33.7 L675.0 34.0 L680.0 34.4 L685.0 34.8 L690.0 35.1 L695.0 35.3 L700.0 35.5' fill='none' stroke='rgba%28150%2C210%2C255%2C.22%29' stroke-width='1.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2852%2C140%2C232%2C.26%29'/%3E%3Cstop offset='1' stop-color='rgba%2811%2C79%2C168%2C.40%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0.0 27.1 L6.4 27.2 L12.9 27.2 L19.3 27.1 L25.7 26.9 L32.1 26.6 L38.6 26.2 L45.0 25.9 L51.4 25.6 L57.9 25.3 L64.3 25.1 L70.7 25.0 L77.1 25.0 L83.6 25.1 L90.0 25.3 L96.4 25.5 L102.9 25.9 L109.3 26.3 L115.7 26.7 L122.1 27.1 L128.6 27.5 L135.0 27.8 L141.4 28.0 L147.9 28.1 L154.3 28.0 L160.7 27.8 L167.1 27.4 L173.6 26.8 L180.0 26.1 L186.4 25.2 L192.9 24.2 L199.3 23.1 L205.7 21.9 L212.1 20.7 L218.6 19.6 L225.0 18.4 L231.4 17.4 L237.9 16.4 L244.3 15.6 L250.7 15.0 L257.1 14.5 L263.6 14.2 L270.0 14.1 L276.4 14.2 L282.9 14.5 L289.3 14.9 L295.7 15.4 L302.1 16.0 L308.6 16.6 L315.0 17.3 L321.4 17.9 L327.9 18.5 L334.3 19.1 L340.7 19.5 L347.1 19.8 L353.6 20.1 L360.0 20.2 L366.4 20.2 L372.9 20.2 L379.3 20.0 L385.7 19.9 L392.1 19.7 L398.6 19.5 L405.0 19.4 L411.4 19.3 L417.9 19.4 L424.3 19.6 L430.7 19.9 L437.1 20.3 L443.6 20.9 L450.0 21.6 L456.4 22.4 L462.9 23.4 L469.3 24.4 L475.7 25.4 L482.1 26.4 L488.6 27.5 L495.0 28.4 L501.4 29.2 L507.9 29.9 L514.3 30.5 L520.7 30.8 L527.1 31.0 L533.6 30.9 L540.0 30.7 L546.4 30.3 L552.9 29.7 L559.3 29.0 L565.7 28.1 L572.1 27.2 L578.6 26.3 L585.0 25.3 L591.4 24.3 L597.9 23.5 L604.3 22.6 L610.7 22.0 L617.1 21.4 L623.6 20.9 L630.0 20.6 L636.4 20.4 L642.9 20.4 L649.3 20.4 L655.7 20.5 L662.1 20.6 L668.6 20.8 L675.0 20.9 L681.4 21.0 L687.9 21.0 L694.3 21.0 L700.7 20.8 L707.1 20.5 L713.6 20.1 L720.0 19.6 L726.4 19.0 L732.9 18.3 L739.3 17.6 L745.7 16.8 L752.1 16.1 L758.6 15.4 L765.0 14.8 L771.4 14.3 L777.9 13.9 L784.3 13.7 L790.7 13.7 L797.1 13.8 L803.6 14.2 L810.0 14.7 L816.4 15.5 L822.9 16.3 L829.3 17.3 L835.7 18.4 L842.1 19.6 L848.6 20.7 L855.0 21.9 L861.4 23.0 L867.9 24.0 L874.3 24.9 L880.7 25.7 L887.1 26.3 L893.6 26.8 L900.0 27.1 L900 60 L0 60Z' fill='url%28%23a%29'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:0 bottom, 0 bottom, 0 bottom;
  background-size:800px 70%, 700px 85%, 900px 100%;
  animation:tp-drawer-wave 40s linear infinite;
}
.drawer-foot::after{
  /* starts under the crests, so the swells rise out of the dark menu
     instead of sitting on a blue band that already began above them */
  content:""; position:absolute; inset:46px 0 -40px; z-index:-2;
  background:linear-gradient(180deg, rgba(11,79,168,.55), rgba(8,42,88,.92));
}
@keyframes tp-drawer-wave{ to{ background-position:-1600px bottom, -1400px bottom, -900px bottom; } }

.drawer-phone{
  display:flex; align-items:center; gap:.85rem; text-decoration:none; color:#fff;
  padding:.2rem 0 .1rem;
}
.drawer-phone .ring{
  width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
}
.drawer-phone .ring .ico{ width:22px; height:22px; }
.drawer-phone .l{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.72); font-family:var(--font-display); font-weight:700; }
.drawer-phone .n{ display:block; font-family:var(--font-display); font-size:1.75rem; font-weight:800;
  line-height:1.05; letter-spacing:-.01em; }
.drawer-phone:hover{ color:#fff; }

.drawer-btns{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.drawer-btns .btn{ width:100%; padding:1em .7em; font-size:.92rem; }
.drawer-meta{ font-size:.78rem; color:rgba(255,255,255,.6); text-align:center; margin:0; }

/* Short phones in landscape: shrink the nav, keep the phone block. */
@media (max-height:560px){
  .drawer nav a{ font-size:1.15rem; padding:.3em 0; min-height:40px; }
  .drawer-phone .n{ font-size:1.35rem; }
  .drawer-foot::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .drawer-foot::before{ animation:none; } }
body.nav-open{ overflow:hidden; }

/* ── Mobile sticky CTA bar ── */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:rgba(10,16,27,.96); backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .4s var(--ease-out);
  box-shadow:0 -8px 28px rgba(0,0,0,.3);
}
.mobile-cta.show{ transform:translateY(0); }
.mobile-cta-in{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.mobile-cta .btn{ padding:1em .8em; font-size:.95rem; }
@media (max-width:900px){ .mobile-cta{ display:block; } body{ padding-bottom:0; } }

/* ── Footer ── */
.site-footer{ background:var(--ink); color:var(--slate-300); position:relative; overflow:hidden; }
.site-footer::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 12% 0%, rgba(30,123,224,.22), transparent 62%),
             radial-gradient(60% 100% at 92% 10%, rgba(210,131,63,.13), transparent 60%);
  pointer-events:none;
}
/* Five children: the brand block plus four link columns. A four-track grid
   wrapped the last one under the brand and left a full column of dead space
   down the middle of the footer. */
.footer-main{ position:relative; padding-block:clamp(3.2rem,2rem + 4vw,5.5rem) 2.6rem;
  display:grid; gap:clamp(1.6rem,1rem + 2vw,3rem) clamp(1.4rem,.8rem + 1.6vw,2.6rem);
  grid-template-columns:minmax(250px,1.5fr) repeat(4,minmax(0,1fr)); align-items:start; }
@media (max-width:1280px){
  .footer-main{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .footer-brand{ grid-column:1 / -1; max-width:60ch; }
}
@media (max-width:820px){ .footer-main{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .footer-main{ grid-template-columns:1fr; gap:2rem; } }

/* Phones: the footer was five full-width blocks stacked into one very long
   scroll of single-column links. Pair the two short lists side by side, run
   the services list in two columns, and give each block a quiet divider so it
   reads as sections rather than one list. */
@media (max-width:620px){
  .footer-main{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.2rem; padding-block:2.8rem 1.6rem; }
  .footer-brand{ grid-column:1 / -1; padding-bottom:1.8rem; }
  .footer-brand .logo svg{ height:46px; }
  .footer-blurb{ font-size:.92rem; }
  .footer-col{ padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.08); min-width:0; }
  .footer-col:nth-child(4),.footer-col:nth-child(5){ grid-column:1 / -1; }
  .footer-col:nth-child(4) ul{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.2rem; }
  .footer-col h5,.footer-col .footer-head{ display:flex; align-items:center; gap:.55rem; margin-bottom:.95rem; font-size:.72rem; }
  .footer-col h5::before,.footer-col .footer-head::before{
    content:""; width:18px; height:2px; flex:none; border-radius:2px;
    background:linear-gradient(90deg,var(--brand),var(--copper));
  }
  .footer-col ul{ gap:.15rem; }
  .footer-col a{ font-size:.92rem; line-height:1.35; padding-block:.32rem; }
  .footer-brand{ text-align:left; }
  .footer-blurb{ line-height:1.55; margin-top:1rem; }
  .footer-badge{ margin-top:1.2rem; }
  .footer-contact{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.2rem; font-size:.9rem; }
  .footer-contact .row:first-child,.footer-contact .row:nth-child(2){ grid-column:1 / -1; }
  .footer-scripture{ margin-top:1.4rem; }
}
.footer-brand .logo svg{ height:54px; }
.footer-blurb{ margin-top:1.2rem; max-width:40ch; font-size:.97rem; line-height:1.65; }
.footer-scripture{
  margin-top:1.4rem; padding-left:1rem; border-left:2px solid var(--copper);
  font-style:italic; color:var(--slate-300); font-size:.95rem; line-height:1.5;
}
.footer-scripture cite{ display:block; font-style:normal; font-family:var(--font-display);
  letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--copper-300); margin-top:.5rem; }
.footer-col h5,.footer-col .footer-head{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; font-weight:700; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.footer-col a{ color:var(--slate-300); text-decoration:none; font-size:.96rem; transition:color var(--t-fast), transform var(--t-fast); display:inline-block; }
.footer-col a:hover{ color:#fff; transform:translateX(3px); }
/* "All services →" is a <strong>, which the base styles colour ink — invisible
   on the dark footer at every width. */
.footer-col a strong{ color:#fff; font-weight:700; }
.footer-col a:hover strong{ color:var(--brand-300); }
.footer-contact{ display:grid; grid-template-columns:minmax(0,1fr); gap:.9rem; font-size:.96rem; }
.footer-contact .row > span{ min-width:0; overflow-wrap:anywhere; }
.footer-contact a{ color:#fff; text-decoration:none; font-weight:600; }
.footer-contact a:hover{ color:var(--brand-300); }
.footer-contact .row{ display:flex; gap:.7rem; align-items:flex-start; }
.footer-contact .ico{ width:1.1em; height:1.1em; color:var(--brand-300); flex:none; margin-top:.28em; }
.footer-badge{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:.7rem .95rem; font-size:.84rem; line-height:1.3;
}
.footer-badge .ico{ width:1.4em; height:1.4em; color:var(--brand-300); flex:none; }
.footer-badge b{ color:#fff; display:block; font-family:var(--font-display); letter-spacing:.04em; }

.footer-bottom{
  position:relative; border-top:1px solid rgba(255,255,255,.1); padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; justify-content:space-between;
  font-size:.86rem; color:var(--slate-400);
}
.footer-bottom a{ color:var(--slate-400); text-decoration:none; }
.footer-bottom a:hover{ color:#fff; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; }
.ssq-credit{ display:inline-flex; align-items:center; gap:.35em; }
.ssq-credit:hover{ color:#fff !important; }
@media (max-width:620px){ .footer-bottom{ justify-content:center; text-align:center; } .footer-legal{ justify-content:center; } }

/* ── Services mega-menu ───────────────────────────────────────────────────
   The panel hangs off .has-mega but is positioned against .site-header, so
   it spans the page rather than the width of one nav item. It opens on hover
   and on :focus-within, which is what makes it reachable from the keyboard
   without any JavaScript. Hidden entirely below the nav breakpoint — the
   drawer owns navigation there. */
.has-mega{ position:static; display:inline-flex; align-items:center; }
.nav .has-mega > a{ display:inline-flex; align-items:center; gap:.3rem; }
.nav .has-mega > a .ico{ width:14px; height:14px; transition:transform var(--t-fast); }
.has-mega:hover > a .ico,.has-mega:focus-within > a .ico{ transform:rotate(180deg); }

.mega{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 26px 50px -18px rgba(10,16,27,.28);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--t), transform var(--t), visibility var(--t);
  z-index:60;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:none; }

.mega-in{
  max-width:var(--container); margin:0 auto;
  padding:clamp(1.6rem,1rem + 1.6vw,2.4rem) var(--gutter);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.05fr);
  gap:clamp(1.2rem,.6rem + 1.4vw,2.4rem);
}
.mega-h{
  font-family:var(--font-display); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brand-700);
  margin:0 0 .85rem; display:block;
}
/* .nav a sets uppercase, nowrap and an animated underline — none of which
   belong on a panel link whose second line is a full service name. */
.mega-col > a{
  display:block; padding:.46rem .6rem; margin-left:-.6rem; border-radius:8px;
  text-decoration:none; text-transform:none; letter-spacing:0; white-space:normal;
  transition:background var(--t-fast);
}
.mega-col > a::after{ content:none; }
.mega-col > a:hover{ background:var(--brand-050); }
.mg-t{
  display:block; font-family:var(--font-display); font-size:1.02rem; font-weight:700;
  color:var(--ink); line-height:1.2;
}
.mg-d{
  display:block; font-family:var(--font-body); font-size:.82rem; font-weight:400;
  color:var(--fg-muted); line-height:1.35; margin-top:.12rem; text-transform:none;
}
.mega-col > a:hover .mg-t{ color:var(--brand-700); }

/* The promo card. It is one big link, so everything inside it is a <span>. */
/* .nav a is (0,1,1); these have to match or beat it or they inherit its
   uppercase/nowrap/underline treatment, which truncates the promo copy. */
.nav a.mega-promo-link{ display:block; text-decoration:none; padding:0 !important;
  border-radius:var(--radius-lg); white-space:normal; }
.nav .mega-promo-link:hover{ background:none; }
.nav a.mega-promo-link::after{ content:none; }
.mega-promo{
  display:block; height:100%; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(165deg,var(--ink) 0%,var(--brand-800) 125%);
  transition:transform var(--t), box-shadow var(--t);
}
.mega-promo-link:hover .mega-promo{ transform:translateY(-3px); box-shadow:var(--sh-lg); }
.mega-promo-img{ display:block; aspect-ratio:16/7; overflow:hidden; }
.mega-promo-img img{ width:100%; height:100%; object-fit:cover; opacity:.82; }
.mega-promo-body{ display:block; padding:1.1rem 1.2rem 1.3rem; }
.mega-promo-body .mega-h{ color:#fff; letter-spacing:.02em; font-size:1.08rem; text-transform:none; margin-bottom:.4rem; }
.mega-p{
  display:block; font-family:var(--font-body); font-size:.87rem; line-height:1.55;
  color:rgba(255,255,255,.76); margin-bottom:1rem; text-transform:none; letter-spacing:0;
}
.mega-promo-body .btn{ display:inline-flex; }
.mega-tel{
  display:flex; align-items:center; gap:.4rem; margin-top:.8rem;
  font-family:var(--font-display); font-size:1.08rem; font-weight:700; color:#fff;
  text-transform:none; letter-spacing:0;
}
.mega-tel .ico{ width:16px; height:16px; color:var(--copper); }

.nav a.mega-all{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; white-space:normal;
  max-width:var(--container); margin:0 auto; padding:.95rem var(--gutter) !important;
  border-top:1px solid var(--line); text-decoration:none;
  font-family:var(--font-display); font-weight:700; color:var(--brand-700);
  text-transform:none; letter-spacing:0; border-radius:0 !important;
}
.nav a.mega-all::after{ content:none; }
.mega-all > span:first-child{ white-space:nowrap; }
.nav a.mega-all:hover{ background:var(--brand-050); }
/* 02-base sets svg{display:block}; inside an inline run that forces the
   icon onto its own line. */
.mega-all .ico{ width:16px; height:16px; display:inline-block; vertical-align:-3px; }
.mega-all > span:first-child{ flex:none; }
.mega-areas{
  font-family:var(--font-body); font-size:.84rem; font-weight:400; color:var(--fg-muted);
}

@media (max-width:1180px){
  .mega-in{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mega-promo-link{ display:none; }
}
@media (max-width:1100px){
  .has-mega .mega{ display:none; }
  .nav .has-mega > a .ico{ display:none; }
}

/* ── 04-hero ── */
/* ═══════════════ Hero & page banners ═══════════════ */
.hero{
  position:relative; overflow:hidden; background:var(--ink); color:#fff;
  isolation:isolate; padding-block:clamp(3.5rem,2rem + 7vw,7.5rem) clamp(3rem,2rem + 5vw,6rem);
}
.hero-bg{ position:absolute; inset:0; z-index:-3; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; }

/* Scrim + glow are PSEUDO-ELEMENTS, not divs.
   As markup they existed only in the static HTML, so the Elementor hero —
   whose photo comes from the section's background_image control — rendered
   as a bare sunlit photo with white text on it. Drawn here they apply to
   both, and Elementor never shows an empty widget placeholder for them. */
/* Scrim AND glow live together here so that ::after is free for the animated
   bubble field — which must be a pseudo-element, because the Elementor hero
   is section markup we do not control and a zero-height decoration widget
   would render as an empty placeholder that blocks editing. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(48% 62% at 8% 22%, rgba(56,142,232,.30), transparent 66%),
    radial-gradient(40% 55% at 78% 88%, rgba(210,131,63,.16), transparent 64%),
    linear-gradient(104deg, rgba(10,16,27,.95) 0%, rgba(10,16,27,.87) 34%, rgba(10,16,27,.55) 62%, rgba(10,16,27,.38) 100%),
    linear-gradient(to top, rgba(10,16,27,.9) 0%, transparent 42%);
}
@media (max-width:820px){
  .hero-bg img{ object-position:64% 50%; }
  .hero::before{ background:
      radial-gradient(70% 40% at 20% 10%, rgba(56,142,232,.26), transparent 70%),
      linear-gradient(180deg, rgba(10,16,27,.93) 0%, rgba(10,16,27,.86) 45%, rgba(10,16,27,.96) 100%); }
}
/* Elementor paints the section background first, then the negative-z
   pseudo-elements, then content — same stacking as the static markup. */
body .elementor .elementor-section.hero{ isolation:isolate; }

.hero-grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; }
@media (max-width:1040px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-badge{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.5rem;
  /* Dark glass, not light: the badge sits over sky in the photograph, where a
     white-on-white-tint pill all but disappears. */
  background:rgba(8,14,24,.58); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-radius:100px; padding:.5rem 1rem .5rem .6rem;
  font-size:.82rem; font-weight:600; color:#fff; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.hero-badge b,.hero-badge strong{ color:#fff; }
.hero-badge .stars{ display:inline-flex; gap:1px; color:var(--star); }
.hero-badge .stars svg{ width:14px; height:14px; }
.hero-badge .sep{ width:1px; height:14px; background:rgba(255,255,255,.25); }

.hero h1{
  color:#fff; font-size:var(--fs-h1); margin-bottom:.4em;
  letter-spacing:-.026em; line-height:.92; text-wrap:balance;
}
.hero h1 .accent{
  background:linear-gradient(100deg,#9AD6FF 0%,#4E9BF0 48%,#7FC2FA 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block;
  /* background-clip:text paints into the inline box, and line-height:.92
     crops that box above the descenders of p, g and y. Pad the box down and
     pull the same amount back off the layout. */
  padding-bottom:.14em; margin-bottom:-.14em;
}
.hero h1 .line{ display:block; }
.hero-lede{ font-size:var(--fs-lead); color:rgba(255,255,255,.82); max-width:52ch; margin-bottom:2rem; line-height:1.55; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-bottom:2.4rem; }
@media (max-width:460px){ .hero-actions > .btn{ width:100%; } }

.hero-chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip{
  display:inline-flex; align-items:center; gap:.45em;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:100px; padding:.48rem .95rem; font-size:.84rem; font-weight:600; color:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
}
.chip .ico{ width:1em; height:1em; color:var(--brand-300); }

/* Hero card — the "call now" panel */
.hero-card{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-radius:var(--radius-xl); padding:clamp(1.5rem,1rem + 2vw,2.4rem);
  box-shadow:0 30px 70px rgba(0,0,0,.4); position:relative; overflow:hidden;
}
.hero-card::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
.hero-card h3{ color:#fff; font-size:1.55rem; margin-bottom:.3em; }
.hero-card .sub{ color:rgba(255,255,255,.65); font-size:.95rem; margin-bottom:1.5rem; }
.hero-card .big-phone{
  display:flex; align-items:center; gap:.75rem; text-decoration:none;
  font-family:var(--font-display); font-size:clamp(1.9rem,1.3rem + 2.4vw,2.7rem); font-weight:800;
  color:#fff; letter-spacing:-.02em; line-height:1; margin-bottom:1.1rem;
  transition:color var(--t);
}
.hero-card .big-phone:hover{ color:var(--brand-300); }
.hero-card .big-phone .ring{
  width:clamp(44px,3.4vw,54px); height:clamp(44px,3.4vw,54px); flex:none; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-700)); display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(30,123,224,.45);
}
.hero-card .big-phone .ring svg{ width:45%; height:45%; color:#fff; }
.hero-card-list{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.6rem; }
.hero-card-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; color:rgba(255,255,255,.82); }
.hero-card-list .ico{ width:1.05em; height:1.05em; color:var(--ok); flex:none; margin-top:.35em; }
.hero-card .fine{ font-size:.78rem; color:rgba(255,255,255,.5); text-align:center; margin-top:.9rem; }

/* Hero stat strip */
.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-lg); overflow:hidden; margin-top:clamp(2.5rem,1.5rem + 3vw,4rem);
  backdrop-filter:blur(10px);
}
.hero-stats .st{ background:rgba(10,16,27,.55); padding:clamp(1.1rem,.8rem + 1vw,1.7rem); text-align:center; }
.hero-stats .v{ font-family:var(--font-display); font-size:clamp(1.7rem,1.1rem + 2vw,2.5rem); font-weight:800; color:#fff; line-height:1; letter-spacing:-.02em; }
.hero-stats .v .u{ color:var(--brand-300); }
.hero-stats .l{ font-size:.8rem; font-weight:600; color:rgba(255,255,255,.88); margin-top:.5rem; }
.hero-stats .n{ font-size:.72rem; color:rgba(255,255,255,.5); margin-top:.15rem; }
@media (max-width:760px){ .hero-stats{ grid-template-columns:repeat(2,1fr); } }

/* Stats band: its own section in Elementor, so it carries the hero's dark
   ground rather than inheriting it. */
.hero-stats-band{ background:var(--ink); padding-block:0 clamp(2rem,1.2rem + 2vw,3.2rem); }
.hero-stats-band > .elementor-container,
.hero-stats-band > .container{ max-width:var(--container); }
.hero-stats-band .hero-stats{ margin-top:0; }
body .elementor .elementor-section.hero-stats-band{ background-color:var(--ink); }

/* Short viewports — don't let the hero clip its CTA */
@media (max-height:600px) and (min-width:1040px){ .hero{ padding-block:3rem; } }

/* ── Inner page banner ── */
.pagehead{
  position:relative; overflow:hidden; background:var(--ink); color:#fff; isolation:isolate;
  padding-block:clamp(3rem,2rem + 5vw,5.5rem) clamp(2.6rem,1.8rem + 4vw,4.5rem);
}
.pagehead-bg{ position:absolute; inset:0; z-index:-3; }
.pagehead-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.pagehead::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(100deg, rgba(10,16,27,.95) 0%, rgba(10,16,27,.84) 45%, rgba(10,16,27,.66) 100%);
}
.pagehead::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(52% 70% at 6% 24%, rgba(30,123,224,.3), transparent 68%);
  mix-blend-mode:screen;
}
.pagehead h1{ color:#fff; max-width:18ch; margin-bottom:.34em; }
.pagehead .lead{ color:rgba(255,255,255,.78); max-width:58ch; }
.crumbs{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; font-size:.83rem; color:rgba(255,255,255,.6); margin-bottom:1.4rem; }
.crumbs a{ color:rgba(255,255,255,.82); text-decoration:none; }
.crumbs a:hover{ color:#fff; text-decoration:underline; }
.crumbs .sep{ opacity:.45; }

/* Phones: leave the water band clear below the stacked hero card. */
@media (max-width:767px){ .hero{ padding-bottom:calc(84px + 1.4rem); } }

/* ── 05-components ── */
/* ═══════════════ Components ═══════════════ */

/* ── Trust bar ── */
.trustbar{ background:var(--ink-800); color:#fff; padding-block:1.4rem; position:relative; overflow:hidden; }
.trust-inner{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem clamp(1.2rem,3vw,3rem); }
.trust-item{ display:inline-flex; align-items:center; gap:.6rem; font-size:.92rem; font-weight:600; color:rgba(255,255,255,.9); }
.trust-item .ico{ width:1.25em; height:1.25em; color:var(--brand-300); flex:none; }
.trust-sep{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.28); }
@media (max-width:760px){ .trust-sep{ display:none; } .trust-inner{ justify-content:flex-start; } }

/* ── Pillar cards (services) ── */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,.6rem + 1.2vw,1.7rem); }
@media (max-width:1150px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .pillars{ grid-template-columns:1fr; } }

.pillar{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--ink);
  min-height:clamp(380px,38vw,460px); display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; isolation:isolate; box-shadow:var(--sh-md);
  transition:transform var(--t), box-shadow var(--t);
}
.pillar:hover{ transform:translateY(-7px); box-shadow:var(--sh-xl); }
.pillar-img{ display:block; position:absolute; inset:0; z-index:-2; }
.pillar-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.pillar:hover .pillar-img img{ transform:scale(1.07); }
.pillar::before{
  content:""; position:absolute; inset:0; z-index:-1;
  /* Heavy enough for legible text at the bottom, light enough that the
     photograph is still the reason you look at the card. */
  background:linear-gradient(to top, rgba(10,16,27,.97) 0%, rgba(10,16,27,.9) 24%,
                                     rgba(10,16,27,.45) 56%, rgba(10,16,27,.08) 100%);
  transition:opacity var(--t);
}
.pillar-body{ display:block; padding:clamp(1.3rem,1rem + 1vw,1.9rem); color:#fff; position:relative; }
.pillar-icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:1rem;
  background:linear-gradient(135deg,rgba(30,123,224,.95),rgba(11,79,168,.95));
  box-shadow:0 8px 18px rgba(11,79,168,.4); border:1px solid rgba(255,255,255,.18);
}
.pillar-icon svg{ width:22px; height:22px; color:#fff; }
.pillar h3{ color:#fff; font-size:1.42rem; margin-bottom:.4em; line-height:1.05; }
.pillar p{ font-size:.94rem; color:rgba(255,255,255,.76); margin-bottom:1rem; line-height:1.55; }
.pillar-points{ list-style:none; margin:0 0 1.1rem; padding:0; display:grid; gap:.42rem;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .45s var(--ease-out), opacity .3s, margin .45s; }
.pillar:hover .pillar-points,.pillar:focus-within .pillar-points{ max-height:220px; opacity:1; }
.pillar-points li{ font-size:.86rem; color:rgba(255,255,255,.8); display:flex; gap:.5rem; align-items:flex-start; }
.pillar-points .ico{ width:.95em; height:.95em; color:var(--brand-300); flex:none; margin-top:.35em; }
.pillar .more{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--font-display);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.84rem; color:var(--brand-300); }
.pillar .more svg{ width:1em; height:1em; transition:transform var(--t); }
.pillar:hover .more svg{ transform:translateX(5px); }
/* Hover-reveal is a pointer affordance. Anything without hover — every
   touch device, not just phones — must simply see the list. */
@media (hover:none), (max-width:1150px){ .pillar-points{ max-height:220px; opacity:1; } }

/* ── Split section (image + copy) ── */
.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; }
.split.wide-text{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
@media (max-width:980px){ .split,.split.wide-text{ grid-template-columns:1fr; } .split .media{ order:-1; } }

.media-frame{ position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--sh-lg); }
.media-frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.media-frame.tall img{ aspect-ratio:3/4; }
.media-stack{ display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; align-items:end; }
.media-stack .media-frame:first-child img{ aspect-ratio:3/4; }
.media-stack .media-frame:last-child img{ aspect-ratio:1/1; }
@media (max-width:520px){ .media-stack{ grid-template-columns:1fr; } .media-stack .media-frame:last-child{ display:none; } }

/* Floating credential badge on media */
.media-tag{
  position:absolute; z-index:2; background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-radius:14px; padding:.95rem 1.2rem; box-shadow:var(--sh-lg); display:flex; align-items:center; gap:.8rem;
  border:1px solid rgba(255,255,255,.8);
}
.media-tag.bl{ left:clamp(.8rem,2vw,1.4rem); bottom:clamp(.8rem,2vw,1.4rem); }
.media-tag.tr{ right:clamp(.8rem,2vw,1.4rem); top:clamp(.8rem,2vw,1.4rem); }
.media-tag .ico{ width:2rem; height:2rem; color:var(--brand); flex:none; }
.media-tag > span{ display:block; }
.media-tag .v{ display:block; font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--ink); line-height:1; }
.media-tag .l{ display:block; font-size:.74rem; color:var(--slate); letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin-top:.2rem; }
@media (max-width:520px){ .media-tag{ padding:.7rem .9rem; } .media-tag .ico{ width:1.5rem; height:1.5rem; } .media-tag .v{ font-size:1.05rem; } }

/* ── Feature list with icons ── */
.feat-list{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1.1rem; }
.feat-list li{ display:flex; gap:1rem; align-items:flex-start; }
.feat-list .bullet{
  width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--brand-050); color:var(--brand-700); border:1px solid var(--brand-200); margin-top:.1em;
}
.on-dark .feat-list .bullet{ background:rgba(30,123,224,.16); border-color:rgba(111,179,245,.3); color:var(--brand-300); }
.feat-list .bullet svg{ width:15px; height:15px; }
.feat-list b{ display:block; font-family:var(--font-display); font-size:1.12rem; letter-spacing:.005em; margin-bottom:.15em; color:var(--fg-strong); }
.feat-list span{ font-size:.96rem; color:var(--fg-muted); line-height:1.55; }
.on-dark .feat-list span{ color:var(--slate-300); }

/* ── Checklist ── */
.checklist{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.7rem; }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1rem; }
.checklist .ico{ width:1.15em; height:1.15em; color:var(--brand); flex:none; margin-top:.3em; }
.on-dark .checklist .ico{ color:var(--ok); }
.checklist.cols{ grid-template-columns:repeat(2,1fr); }
@media (max-width:640px){ .checklist.cols{ grid-template-columns:1fr; } }

/* ── Process timeline ── */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,.5rem + 1.6vw,2.2rem); position:relative; }
@media (max-width:1000px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:2.6rem; }
.step::before{
  content:""; position:absolute; top:1.05rem; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--brand-200),rgba(169,209,250,.12));
}
.step:last-child::before{ background:linear-gradient(90deg,var(--brand-200),transparent); }
.on-dark .step::before{ background:linear-gradient(90deg,rgba(111,179,245,.45),rgba(111,179,245,.08)); }
.step .n{
  position:absolute; top:0; left:0; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:.9rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-700)); color:#fff;
  box-shadow:0 6px 16px rgba(30,123,224,.35); letter-spacing:.02em;
}
.step h4{ margin-bottom:.4em; font-size:1.25rem; }
.step p{ font-size:.95rem; color:var(--fg-muted); line-height:1.6; }
.on-dark .step p{ color:var(--slate-300); }
@media (max-width:560px){ .step::before{ display:none; } .step{ padding-top:0; padding-left:3.2rem; } .step .n{ top:.1rem; } }

/* ── Review cards ── */
/* Masonry, not a grid. Reviews are wildly different lengths — the featured
   one runs to a paragraph and the shortest is a sentence — and in a grid the
   row height is set by the tallest card, so the short ones leave a column of
   dead white space underneath them. Columns let each card take its own
   height and balance the three stacks. */
.reviews-grid{
  column-count:3; column-gap:clamp(1rem,.6rem + 1.2vw,1.6rem);
}
.reviews-grid > .review{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 clamp(1rem,.6rem + 1.2vw,1.6rem);
}
@media (max-width:1050px){ .reviews-grid{ column-count:2; } }
@media (max-width:680px){ .reviews-grid{ column-count:1; } }

.review{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.3rem,1rem + .9vw,1.9rem); box-shadow:var(--sh-sm); position:relative;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.review:hover{ box-shadow:var(--sh-lg); border-color:var(--brand-200); }
.review.featured{ background:linear-gradient(160deg,var(--ink) 0%,var(--brand-800) 120%); border-color:transparent; color:rgba(255,255,255,.86); }
.review.featured .rv-name,.review.featured .rv-text{ color:#fff; }
.review.featured .rv-text{ color:rgba(255,255,255,.9); }
.review.featured .rv-meta{ color:rgba(255,255,255,.55); }
.rv-stars{ display:flex; gap:2px; color:var(--star); margin-bottom:.9rem; }
.rv-stars svg{ width:17px; height:17px; }
.rv-quote{ font-family:var(--font-display); font-size:1.22rem; font-weight:700; line-height:1.24; color:var(--ink); margin-bottom:.7rem; letter-spacing:-.005em; }
.review.featured .rv-quote{ color:#fff; font-size:1.42rem; }
.rv-text{ font-size:.95rem; line-height:1.62; color:var(--fg-muted); margin-bottom:1.2rem; }
.rv-foot{ display:flex; align-items:center; gap:.7rem; padding-top:1rem; border-top:1px solid var(--line); }
.review.featured .rv-foot{ border-top-color:rgba(255,255,255,.16); }
.rv-avatar{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:.98rem; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-700)); letter-spacing:.02em;
}
.review.featured .rv-avatar{ background:linear-gradient(135deg,var(--copper),var(--copper-600)); }
.rv-foot > .rv-who{ display:block; min-width:0; }
.rv-name{ display:block; font-weight:700; font-size:.96rem; color:var(--ink); line-height:1.2; }
.rv-meta{ font-size:.79rem; color:var(--slate-400); display:flex; align-items:center; gap:.35em; }
.rv-meta .ico{ width:.95em; height:.95em; flex:none; }

/* ── Project cards ── */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,.6rem + 1.4vw,1.8rem); }
@media (max-width:1050px){ .proj-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .proj-grid{ grid-template-columns:1fr; } }

.proj-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; box-shadow:var(--sh-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); height:100%;
}
.proj-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-xl); border-color:transparent; }
.proj-thumb{ display:block; position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--paper-2); }
.proj-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease-out); }
.proj-card:hover .proj-thumb img{ transform:scale(1.06); }
.proj-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,16,27,.55),transparent 55%); }
.proj-tags{ position:absolute; left:.85rem; top:.85rem; z-index:2; display:flex; flex-wrap:wrap; gap:.35rem; }
.tag{
  font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:.36rem .7rem; border-radius:6px;
  background:rgba(255,255,255,.94); color:var(--ink); backdrop-filter:blur(8px);
}
.tag.brand{ background:linear-gradient(135deg,var(--brand),var(--brand-700)); color:#fff; }
.tag.copper{ background:linear-gradient(135deg,var(--copper),var(--copper-600)); color:#fff; }
.proj-meta-float{ position:absolute; left:.95rem; bottom:.85rem; z-index:2; color:#fff; font-size:.82rem; display:flex; align-items:center; gap:.4em; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.proj-meta-float .ico{ width:1em; height:1em; }
.proj-body{ padding:clamp(1.1rem,.9rem + .7vw,1.5rem); display:flex; flex-direction:column; flex:1; }
.proj-body h3{ font-size:1.3rem; margin-bottom:.4em; line-height:1.1; color:var(--ink); }
.proj-card:hover h3{ color:var(--brand-700); }
.proj-body p{ font-size:.93rem; color:var(--fg-muted); line-height:1.58; margin-bottom:1.1rem; }
.proj-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1rem; border-top:1px solid var(--line); }
.proj-spec{ font-size:.8rem; color:var(--slate-400); display:flex; align-items:center; gap:.4em; }
.proj-spec .ico{ width:1em; height:1em; color:var(--brand); }
.proj-card .more{ font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand-700); display:inline-flex; align-items:center; gap:.4em; }
.proj-card .more svg{ width:1em; height:1em; transition:transform var(--t); }
.proj-card:hover .more svg{ transform:translateX(4px); }

/* ── Filter pills ── */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filter{
  font-family:var(--font-display); font-size:.88rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.62rem 1.15rem; border-radius:100px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--slate); transition:all var(--t-fast);
}
.filter:hover{ border-color:var(--brand-300); color:var(--brand-700); }
.filter.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ── Service chip grid ── */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.7rem; }
.svc-chip{
  display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--line);
  border-radius:11px; padding:.9rem 1.1rem; font-size:.95rem; font-weight:500; color:var(--ink-600);
  transition:all var(--t-fast);
}
.svc-chip:hover{ border-color:var(--brand-300); background:var(--brand-050); transform:translateX(3px); }
.svc-chip .ico{ width:1.05em; height:1.05em; color:var(--brand); flex:none; }

/* ── County / service-area cards ── */
.counties{ display:grid; grid-template-columns:repeat(6,1fr); gap:.8rem; }
@media (max-width:980px){ .counties{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .counties{ grid-template-columns:repeat(2,1fr); } }
.county{
  text-align:center; padding:1.4rem .7rem; border-radius:var(--radius);
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  transition:all var(--t); backdrop-filter:blur(8px);
}
.county:hover{ background:rgba(30,123,224,.16); border-color:rgba(111,179,245,.4); transform:translateY(-3px); }
.county .ico{ width:1.6rem; height:1.6rem; color:var(--brand-300); margin:0 auto .6rem; }
.county b{ display:block; font-family:var(--font-display); font-size:1.18rem; color:#fff; letter-spacing:.01em; }
.county span{ font-size:.74rem; color:var(--slate-400); letter-spacing:.1em; text-transform:uppercase; }

/* ── CTA band ── */
.cta-band{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  background:linear-gradient(120deg,var(--ink) 0%,var(--brand-800) 52%,var(--brand-700) 100%);
}
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23fff' stroke-width='.5' fill='none' opacity='.35'/%3E%3C/svg%3E");
}
.cta-band::after{
  content:""; position:absolute; width:52vw; height:52vw; right:-14vw; top:-18vw; z-index:-1;
  background:radial-gradient(circle, rgba(210,131,63,.3), transparent 66%); border-radius:50%;
}
.cta-inner{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(1.8rem,1rem + 3vw,4rem); align-items:center; position:relative; }
@media (max-width:900px){ .cta-inner{ grid-template-columns:1fr; text-align:center; } .cta-inner .btn-row{ justify-content:center; } }
.cta-inner h2{ color:#fff; margin-bottom:.35em; }
.cta-inner .lead{ color:rgba(255,255,255,.84); }
.cta-phone{
  display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff;
  font-family:var(--font-display); font-size:clamp(1.8rem,1.2rem + 2.2vw,2.6rem); font-weight:800; letter-spacing:-.02em;
}
.cta-phone:hover{ color:var(--brand-200); }
.cta-phone .ring{ width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; flex:none; }
.cta-phone .ring svg{ width:24px; height:24px; }

/* ── FAQ accordion ── */
.faq-group + .faq-group{ margin-top:clamp(2rem,1.2rem + 2vw,3.2rem); }
.faq-group h2{ font-size:1.5rem; margin-bottom:1.1rem; padding-bottom:.6rem; border-bottom:2px solid var(--line);
  display:flex; align-items:center; gap:.6rem; }
.faq-group h3 .ico{ width:1.15em; height:1.15em; color:var(--brand); }
.faq-list{ display:grid; gap:.7rem; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color var(--t), box-shadow var(--t); }
.faq-item[open]{ border-color:var(--brand-200); box-shadow:var(--sh-md); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.15rem 3.2rem 1.15rem 1.3rem; position:relative;
  font-family:var(--font-display); font-size:1.16rem; font-weight:700; color:var(--ink); line-height:1.25;
  transition:color var(--t-fast);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--brand-700); }
.faq-item summary::after{
  content:""; position:absolute; right:1.25rem; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg); transition:transform var(--t); transform-origin:center;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq-item .a{ padding:0 1.3rem 1.3rem; color:var(--fg-muted); font-size:.98rem; line-height:1.7; }
.faq-item .a p:first-child{ margin-top:0; }

/* ── Stat row (light) ── */
/* Four tiles, so the column count has to divide four. auto-fit does not: at
   the width this sits in it fitted three and left the fourth alone beside an
   empty cell, which reads as a broken panel rather than a stat. */
.statrow{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
/* Always 2x2. It lives in the narrow (40%) column beside the pull quote, and a
   4-up row there squeezed each cell to ~150px: "24/7" was clipped at the card
   edge and every label wrapped onto three lines at a different height. */
.statrow .st{ background:#fff; padding:clamp(1.4rem,1rem + 1vw,2.1rem) 1rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; }
.statrow .v{ white-space:nowrap; }
.statrow .l,.statrow .n{ max-width:22ch; }
.statrow .v{ font-family:var(--font-display); font-size:clamp(2rem,1.4rem + 2vw,2.9rem); font-weight:800;
  line-height:1; letter-spacing:-.025em;
  background:linear-gradient(135deg,var(--brand-700),var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.statrow .l{ font-weight:700; font-size:.92rem; color:var(--ink); margin-top:.6rem; }
.statrow .n{ font-size:.79rem; color:var(--slate-400); margin-top:.2rem; }

/* ── Pull quote ── */
.pullquote{ position:relative; padding-left:clamp(1.5rem,1rem + 2vw,3rem); }
.pullquote::before{
  content:"“"; position:absolute; left:-.05em; top:-.35em; font-family:var(--font-display);
  font-size:clamp(5rem,3rem + 7vw,9rem); line-height:1; color:var(--brand-200); opacity:.55;
}
.on-dark .pullquote::before{ color:rgba(111,179,245,.28); }
.pullquote blockquote{ margin:0; font-family:var(--font-display); font-size:clamp(1.4rem,1rem + 1.8vw,2.2rem);
  font-weight:700; line-height:1.22; color:var(--ink); letter-spacing:-.012em; }
.on-dark .pullquote blockquote{ color:#fff; }
.pullquote cite{ display:block; margin-top:1.1rem; font-style:normal; font-size:.92rem; color:var(--fg-muted); }
.on-dark .pullquote cite{ color:var(--slate-400); }
.pullquote cite b{ color:var(--ink); }
.on-dark .pullquote cite b{ color:#fff; }

/* ── Gallery ── */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.8rem; }
.gallery a{ display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; background:var(--paper-2); position:relative; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.gallery a:hover img{ transform:scale(1.08); }
.gallery a::after{ content:""; position:absolute; inset:0; background:rgba(30,123,224,0); transition:background var(--t); }
.gallery a:hover::after{ background:rgba(30,123,224,.14); }
.gal-cap{ position:absolute; inset:auto 0 0 0; z-index:1; padding:1.4rem .7rem .6rem;
  font-size:.78rem; line-height:1.3; color:#fff; text-align:left;
  background:linear-gradient(to top,rgba(8,16,28,.88),rgba(8,16,28,0));
  opacity:0; transform:translateY(.5rem); transition:opacity var(--t),transform var(--t); }
.gallery a:hover .gal-cap,.gallery a:focus-visible .gal-cap{ opacity:1; transform:none; }
@media (hover:none){ .gal-cap{ opacity:1; transform:none; } }

/* ── Project status ───────────────────────────────────────────────────────
   Shown on a card only when a job is NOT completed — "Completed" on every
   card is noise, "In progress" is news. */
.tag.state{ border-color:transparent; color:#14100B; }
.tag.state-completed{ background:linear-gradient(135deg,#22A05A,#167A43); color:#fff;
  display:inline-flex; align-items:center; gap:.3em; }
.tag.state-completed .ico{ width:1.05em; height:1.05em; }
.spec-table .state-completed{ color:#167A43; }
.tag.state-in-progress{ background:linear-gradient(135deg,var(--copper),var(--copper-600)); color:#14100B; }
.tag.state-scheduled{ background:var(--brand-050); color:var(--brand-700); }
.tag.state-on-hold{ background:var(--slate-300); color:#14100B; }
.spec-table .state{ display:inline-block; font-weight:700; }
.spec-table .state-in-progress{ color:var(--copper-600); }
.spec-table .state-on-hold{ color:var(--slate-400); }

/* ── Full-width feature list → card grid ───────────────────────────────
   The About page's "What we do, all day" list sits under a CENTRED heading in
   a full-width column, so as a plain list it hugged the left edge and left
   half the section empty. Where the list has the whole width it becomes a
   row of cards, centred, with the last row centred too (5 = 3 + 2). The home
   page uses the same list in a narrow column and keeps the list form.
   Keyed on the existing markup (Elementor's 100% column / the static
   container) so layouts already saved in the database pick it up. */
.feat-grid,
.elementor-col-100 .feat-list,
.container > .reveal > .feat-list{
  display:flex; flex-wrap:wrap; justify-content:center;
  --fg-gap:clamp(1rem,.7rem + 1vw,1.6rem); gap:var(--fg-gap);
  margin-top:clamp(1.8rem,1.2rem + 2vw,3rem);
}
.feat-grid > li,
.elementor-col-100 .feat-list > li,
.container > .reveal > .feat-list > li{
  flex:0 1 calc((100% - 2 * var(--fg-gap)) / 3); min-width:0;
  flex-direction:column; gap:1rem; position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,1.1rem + 1vw,2.1rem);
  box-shadow:var(--sh-sm); transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.feat-grid > li::before,
.elementor-col-100 .feat-list > li::before,
.container > .reveal > .feat-list > li::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--copper));
  transform:scaleX(.18); transform-origin:left; transition:transform var(--t);
}
@media (hover:hover){
  .feat-grid > li:hover,
  .elementor-col-100 .feat-list > li:hover,
  .container > .reveal > .feat-list > li:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:transparent; }
  .feat-grid > li:hover::before,
  .elementor-col-100 .feat-list > li:hover::before,
  .container > .reveal > .feat-list > li:hover::before{ transform:scaleX(1); }
}
.feat-grid .bullet,
.elementor-col-100 .feat-list .bullet,
.container > .reveal > .feat-list .bullet{
  width:54px; height:54px; border-radius:15px;
  background:linear-gradient(145deg,var(--brand-050),#fff); border:1px solid var(--brand-200); color:var(--brand-700);
}
.feat-grid .bullet svg,
.elementor-col-100 .feat-list .bullet svg,
.container > .reveal > .feat-list .bullet svg{ width:24px; height:24px; }
.feat-grid b,
.elementor-col-100 .feat-list b,
.container > .reveal > .feat-list b{ font-size:1.38rem; margin-bottom:.35em; }
.feat-grid li > span:last-child > span,
.elementor-col-100 .feat-list li > span:last-child > span,
.container > .reveal > .feat-list li > span:last-child > span{ font-size:.97rem; line-height:1.6; }
@media (max-width:1024px){
  .feat-grid > li,
  .elementor-col-100 .feat-list > li,
  .container > .reveal > .feat-list > li{ flex-basis:calc((100% - var(--fg-gap)) / 2); }
}
@media (max-width:640px){
  .feat-grid > li,
  .elementor-col-100 .feat-list > li,
  .container > .reveal > .feat-list > li{ flex-basis:100%; }
}


/* ── …and dressed up ("make it look even better") ─────────────────────── */
.feat-grid,
.elementor-col-100 .feat-list,
.container > .reveal > .feat-list{ counter-reset:tp-feat; }
.feat-grid > li,
.elementor-col-100 .feat-list > li,
.container > .reveal > .feat-list > li{
  counter-increment:tp-feat; gap:1.15rem;
  padding:clamp(1.7rem,1.2rem + 1.2vw,2.4rem);
  background:linear-gradient(180deg,#fff 0%,#fff 60%,var(--brand-050) 160%);
  border-color:rgba(11,79,168,.10);
  box-shadow:0 1px 2px rgba(10,16,27,.04), 0 14px 34px -22px rgba(11,79,168,.35);
}
/* the full accent bar, faint until hover */
.feat-grid > li::before,
.elementor-col-100 .feat-list > li::before,
.container > .reveal > .feat-list > li::before{ transform:none; opacity:.28; height:4px; transition:opacity var(--t); }
/* big outlined number in the corner */
.feat-grid > li::after,
.elementor-col-100 .feat-list > li::after,
.container > .reveal > .feat-list > li::after{
  content:counter(tp-feat, decimal-leading-zero);
  position:absolute; top:.9rem; right:1.3rem; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:clamp(3rem,2.4rem + 1.6vw,4.2rem);
  line-height:1; letter-spacing:-.03em; color:transparent;
  -webkit-text-stroke:1.5px rgba(11,79,168,.16);
  transition:color var(--t), -webkit-text-stroke-color var(--t), transform var(--t);
}
/* solid brand icon tile */
.feat-grid .bullet,
.elementor-col-100 .feat-list .bullet,
.container > .reveal > .feat-list .bullet{
  width:58px; height:58px; border-radius:16px; border:0; color:#fff;
  background:linear-gradient(145deg,var(--brand) 0%,var(--brand-800) 100%);
  box-shadow:0 10px 22px -10px rgba(30,123,224,.75), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform var(--t), box-shadow var(--t);
}
.feat-grid .bullet svg,
.elementor-col-100 .feat-list .bullet svg,
.container > .reveal > .feat-list .bullet svg{ width:26px; height:26px; }
.feat-grid b,
.elementor-col-100 .feat-list b,
.container > .reveal > .feat-list b{ font-size:1.45rem; letter-spacing:.005em; }
.feat-grid li > span:last-child > span,
.elementor-col-100 .feat-list li > span:last-child > span,
.container > .reveal > .feat-list li > span:last-child > span{ color:var(--slate-600, #4A5568); }
@media (hover:hover){
  .feat-grid > li:hover,
  .elementor-col-100 .feat-list > li:hover,
  .container > .reveal > .feat-list > li:hover{
    background:linear-gradient(180deg,#fff 0%,var(--brand-050) 100%);
    border-color:var(--brand-200);
    box-shadow:0 2px 4px rgba(10,16,27,.04), 0 26px 48px -24px rgba(11,79,168,.45);
  }
  .feat-grid > li:hover::before,
  .elementor-col-100 .feat-list > li:hover::before,
  .container > .reveal > .feat-list > li:hover::before{ opacity:1; }
  .feat-grid > li:hover::after,
  .elementor-col-100 .feat-list > li:hover::after,
  .container > .reveal > .feat-list > li:hover::after{ color:rgba(30,123,224,.10); -webkit-text-stroke-color:rgba(30,123,224,.45); transform:translateY(-2px); }
  .feat-grid > li:hover .bullet,
  .elementor-col-100 .feat-list > li:hover .bullet,
  .container > .reveal > .feat-list > li:hover .bullet{ transform:rotate(-6deg) scale(1.06); box-shadow:0 14px 26px -10px rgba(30,123,224,.85), inset 0 1px 0 rgba(255,255,255,.25); }
}
/* the section behind it: a faint blueprint grid under a soft brand glow */
.section:has(> .elementor-container .elementor-col-100 .feat-list),
.section:has(> .container > .reveal > .feat-list){
  background-image:
    radial-gradient(60% 55% at 50% 38%, rgba(30,123,224,.10), transparent 70%),
    linear-gradient(rgba(11,79,168,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,79,168,.045) 1px, transparent 1px);
  background-size:100% 100%, 34px 34px, 34px 34px;
  background-position:center, center top, center top;
}

/* ── 06-forms ── */
/* ═══════════════ Forms — native fallback + PlugMatrix host styling ═══════════════ */
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:clamp(1.4rem,1rem + 1.8vw,2.6rem); box-shadow:var(--sh-lg); position:relative; overflow:hidden;
}
.form-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--brand),var(--copper)); }
.form-card h3{ font-size:1.7rem; margin-bottom:.3em; }
/* The card is white but usually sits in a dark section, and `.on-dark h3`
   turns every h3 in it white — the card's own title vanished, on Contact and
   on Careers alike. */
.on-dark .form-card h3,.form-card h3{ color:var(--ink); }
.form-card .sub{ color:var(--fg-muted); font-size:.98rem; margin-bottom:1.8rem; }

.field-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:620px){ .field-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-display); font-size:.86rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-600); }
.field label .req{ color:var(--copper-600); }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:.92rem 1.05rem; border:1.5px solid var(--line); border-radius:10px; background:var(--paper);
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); width:100%;
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2347597A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.05rem center; padding-right:2.6rem; }
/* Keep the global focus outline — the tinted halo alone was barely visible
   and left keyboard users without an indicator. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--brand); background:#fff; box-shadow:var(--focus);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand); background:#fff;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--slate-400); }
.field .hint{ font-size:.8rem; color:var(--slate-400); }
.form-consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.86rem; color:var(--fg-muted); margin-top:1.2rem; line-height:1.5; }
.form-consent input{ width:18px; height:18px; margin-top:.2em; flex:none; accent-color:var(--brand); }
.form-actions{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.form-note{ font-size:.82rem; color:var(--slate-400); display:flex; align-items:center; gap:.4em; }
.form-note .ico{ width:1em; height:1em; color:var(--brand); }

.form-alert{ padding:1rem 1.2rem; border-radius:10px; margin-bottom:1.4rem; font-size:.95rem;
  display:flex; gap:.7rem; align-items:flex-start; }
.form-alert .ico{ width:1.2em; height:1.2em; flex:none; margin-top:.2em; }
.form-alert.ok{ background:#E8F8EF; border:1px solid #9FDCBB; color:#14603C; }
.form-alert.err{ background:#FDECEC; border:1px solid #F3BDBD; color:#8A2020; }
.hp-field{ position:absolute!important; left:-9999px!important; opacity:0; height:0; overflow:hidden; }

/* ── Contact method cards ── */
.contact-methods{ display:grid; gap:1rem; }
.cm{
  /* Explicit colour: on a dark section this anchor would otherwise inherit
     the light-background link colour (--brand-700) at 2.2:1. */
  color:var(--slate-300);
  display:flex; gap:1.1rem; align-items:flex-start; padding:1.3rem;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius); text-decoration:none; transition:all var(--t); backdrop-filter:blur(8px);
}
.cm:hover{ background:rgba(30,123,224,.14); border-color:rgba(111,179,245,.36); transform:translateX(4px); }
.cm-icon{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-700)); box-shadow:0 6px 16px rgba(11,79,168,.36); }
.cm-icon svg{ width:20px; height:20px; color:#fff; }
.cm > span:last-child{ display:block; min-width:0; }
.cm .l{ display:block; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-300); font-weight:700; font-family:var(--font-display); }
.cm .v{ display:block; font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:#fff; line-height:1.15; margin-top:.15rem; word-break:break-word; }
.cm .n{ display:block; font-size:.85rem; color:var(--slate-400); margin-top:.25rem; }

/* ── Hours table ── */
.hours{ list-style:none; margin:0; padding:0; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.95rem; }
.hours li:last-child{ border-bottom:0; }
.hours .d{ color:var(--slate-300); }
.hours .t{ color:#fff; font-weight:600; }
.hours li.accent .t{ color:var(--copper-300); }

/* ── PlugMatrix embed host: inherit our design language ── */
.pm-form-host{ }
.pm-form-host input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.pm-form-host select, .pm-form-host textarea{
  font-family:var(--font-body)!important; font-size:1rem!important; color:var(--ink)!important;
  padding:.92rem 1.05rem!important; border:1.5px solid var(--line)!important; border-radius:10px!important;
  background:var(--paper)!important; width:100%!important; box-shadow:none!important;
}
.pm-form-host input:focus,.pm-form-host select:focus,.pm-form-host textarea:focus{
  border-color:var(--brand)!important; background:#fff!important; box-shadow:var(--focus)!important;
}
.pm-form-host label{ font-family:var(--font-display)!important; font-size:.86rem!important; font-weight:700!important;
  letter-spacing:.09em!important; text-transform:uppercase!important; color:var(--ink-600)!important; }
.pm-form-host button[type=submit], .pm-form-host input[type=submit]{
  font-family:var(--font-display)!important; font-size:1.02rem!important; font-weight:700!important;
  letter-spacing:.08em!important; text-transform:uppercase!important;
  padding:1.12em 1.9em!important; border-radius:9px!important; border:0!important; cursor:pointer!important;
  background:linear-gradient(135deg,var(--brand),var(--brand-700))!important; color:#fff!important;
  box-shadow:var(--sh-sm)!important; transition:transform var(--t-fast), box-shadow var(--t)!important;
}
.pm-form-host button[type=submit]:hover, .pm-form-host input[type=submit]:hover{
  transform:translateY(-2px)!important; box-shadow:var(--sh-brand)!important;
}
/* Placeholder shown to admins when no form is configured yet */
.pm-placeholder{
  border:2px dashed var(--brand-200); background:var(--brand-050); border-radius:var(--radius);
  padding:1.6rem; text-align:center; color:var(--brand-800);
}
.pm-placeholder b{ display:block; font-family:var(--font-display); font-size:1.15rem; margin-bottom:.3rem; }
.pm-placeholder code{ font-family:var(--font-mono); font-size:.85rem; background:#fff; padding:.15rem .45rem; border-radius:4px; }

/* ── 07-motion ── */
/* ═══════════════ Motion — FAIL OPEN ═══════════════
   Content is visible by default. Only once JS is confirmed live (html.js)
   do we hide it for the scroll reveal. The Elementor editor never runs our
   observer, so we force everything visible there. */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); }
html.js .reveal.in{ opacity:1; transform:none; }
html.js .reveal.d1{ transition-delay:.08s } html.js .reveal.d2{ transition-delay:.16s }
html.js .reveal.d3{ transition-delay:.24s } html.js .reveal.d4{ transition-delay:.32s }
html.js .reveal.d5{ transition-delay:.40s } html.js .reveal.d6{ transition-delay:.48s }

body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal.in{ opacity:1 !important; transform:none !important; }

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

/* Count-up numbers must read correctly before JS runs */
.countup{ font-variant-numeric:tabular-nums; }

/* Subtle floating accent */
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
html.js .floaty{ animation:floaty 6s ease-in-out infinite; }

/* ── 08-prose ── */
/* ═══════════════ Long-form / editor content ═══════════════ */
.prose{ max-width:72ch; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{ font-size:var(--fs-h3); margin-top:2em; margin-bottom:.5em; }
.prose h3{ font-size:var(--fs-h4); margin-top:1.7em; margin-bottom:.45em; }
.prose ul,.prose ol{ padding-left:1.35em; display:grid; gap:.5em; }
.prose li::marker{ color:var(--brand); }
.prose blockquote{
  margin:1.8em 0; padding:1.2rem 1.5rem; border-left:3px solid var(--brand);
  background:var(--paper); border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.08rem; color:var(--ink-600); font-style:italic;
}
.prose img{ border-radius:var(--radius); box-shadow:var(--sh-md); margin-block:1.6em; }
.prose a{ color:var(--brand-700); text-decoration:underline; }
.prose hr{ border:0; border-top:1px solid var(--line); margin-block:2.4em; }
.prose table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.prose th,.prose td{ text-align:left; padding:.75rem 1rem; border-bottom:1px solid var(--line); }
.prose th{ font-family:var(--font-display); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }

/* Spec table used on project detail pages */
.spec-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.spec-table th,.spec-table td{ text-align:left; padding:.85rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.spec-table th{ font-family:var(--font-display); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate); font-weight:700; width:42%; }
.spec-table td{ color:var(--ink); font-weight:600; }
.spec-table tr:last-child th,.spec-table tr:last-child td{ border-bottom:0; }

/* Sticky sidebar for detail pages */
.sticky-side{ position:sticky; top:calc(var(--header-h) + 22px); }
@media (max-width:980px){ .sticky-side{ position:static; } }

/* Pagination */
.pagination{ display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; margin-top:3rem; }
.pagination .page-numbers{
  min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 .9rem; border-radius:10px; border:1px solid var(--line); background:#fff;
  font-family:var(--font-display); font-weight:700; color:var(--ink-600); text-decoration:none; transition:all var(--t-fast);
}
.pagination .page-numbers:hover{ border-color:var(--brand); color:var(--brand-700); }
.pagination .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* 404 / search */
.big-404{ font-family:var(--font-display); font-size:var(--fs-mega); font-weight:800; line-height:.82;
  background:linear-gradient(135deg,var(--brand-300),var(--brand),var(--copper));
  -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.04em; }
.search-form{ display:flex; gap:.6rem; max-width:480px; }
.search-form input{ flex:1; padding:.9rem 1.1rem; border:1.5px solid var(--line); border-radius:10px; font-size:1rem; font-family:var(--font-body); }
.search-form input:focus{ border-color:var(--brand); box-shadow:var(--focus); }

/* ── 09-elementor ── */
/* ═══════════════════════════════════════════════════════════════════════
   ELEMENTOR COMPATIBILITY LAYER
   Elementor's DOM is not our DOM, and in the EDITOR its kit stylesheet
   loads *after* the theme — so equal-specificity rules lose there while
   winning on the frontend. Every rule that has to beat the kit is prefixed
   `body .elementor` → (0,3,1). That clears the kit's (0,3,0) but stays
   below a client's own per-widget setting at (0,4,0), so the style
   controls in the editor panel keep working.
   NEVER use !important here — it would silently break those controls.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Container width parity ── */
body .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:var(--container);
}
body .elementor-section-full_width > .elementor-container{ max-width:none; }

/* ── Typography: beat the kit, lose to the client ── */
body .elementor .elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-display); color:var(--fg-strong);
  font-weight:700; line-height:.98; letter-spacing:-.012em;
}
body .elementor .elementor-widget-text-editor{
  font-family:var(--font-body); color:var(--fg); line-height:1.68;
}
body .elementor .elementor-widget-text-editor p{ margin:0 0 1.1em; }
body .elementor .elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* Heading sizes mirror the theme scale */
body .elementor h1.elementor-heading-title{ font-size:var(--fs-h1); letter-spacing:-.022em; }
body .elementor h2.elementor-heading-title{ font-size:var(--fs-h2); letter-spacing:-.018em; }
body .elementor h3.elementor-heading-title{ font-size:var(--fs-h3); line-height:1.06; }
body .elementor h4.elementor-heading-title{ font-size:var(--fs-h4); line-height:1.14; }
body .elementor h5.elementor-heading-title{ font-size:1.1rem; }

/* Dark sections: headings go white */
body .elementor .on-dark .elementor-heading-title,
body .elementor .hero .elementor-heading-title,
body .elementor .pagehead .elementor-heading-title,
body .elementor .cta-band .elementor-heading-title{ color:#fff; }
body .elementor .on-dark .elementor-widget-text-editor,
body .elementor .pagehead .elementor-widget-text-editor,
body .elementor .hero .elementor-widget-text-editor,
body .elementor .cta-band .elementor-widget-text-editor{ color:var(--slate-300); }
body .elementor .cta-band .elementor-widget-text-editor,
body .elementor .pagehead .elementor-widget-text-editor,
body .elementor .hero .elementor-widget-text-editor{ color:rgba(255,255,255,.84); }
/* …and anything else inside a dark banner: links, bold, list text. */
body .elementor .pagehead .elementor-widget-text-editor strong,
body .elementor .pagehead .elementor-widget-text-editor b{ color:#fff; }

/* Utility classes still work when placed on a widget */
body .elementor .elementor-widget.eyebrow .elementor-heading-title{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brand-700); line-height:1.4;
}
body .elementor .on-dark .elementor-widget.eyebrow .elementor-heading-title,
body .elementor .hero .elementor-widget.eyebrow .elementor-heading-title,
body .elementor .cta-band .elementor-widget.eyebrow .elementor-heading-title{ color:var(--brand-300); }
body .elementor .elementor-widget.lead .elementor-widget-container{
  font-size:var(--fs-lead); line-height:1.55; color:var(--fg-muted);
}
body .elementor .on-dark .elementor-widget.lead .elementor-widget-container,
body .elementor .hero .elementor-widget.lead .elementor-widget-container,
body .elementor .cta-band .elementor-widget.lead .elementor-widget-container{ color:rgba(255,255,255,.84); }

/* A design class that happens to carry a max-width (.hero-lede, .footer-blurb)
   lands on the WIDGET WRAPPER, which is a flex item of .elementor-widget-wrap.
   Narrowing it lets the NEXT widget float up beside it — which is how the hero
   buttons ended up level with the lede paragraph. Neutralise on the wrapper,
   re-apply on the container. */
body .elementor .elementor-widget.hero-lede,
body .elementor .elementor-widget.footer-blurb,
body .elementor .elementor-widget.lead{ max-width:none; width:100%; }
body .elementor .elementor-widget.hero-lede > .elementor-widget-container{ max-width:52ch; }
body .elementor .elementor-widget.footer-blurb > .elementor-widget-container{ max-width:40ch; }

/* Constrain measure on the CONTAINER, never the widget wrapper:
   widgets are flex items — narrowing the wrapper lets the next widget
   float up beside it. */
body .elementor .elementor-widget.measure > .elementor-widget-container{ max-width:62ch; }
body .elementor .elementor-widget.measure-sm > .elementor-widget-container{ max-width:48ch; }
body .elementor .center-text .elementor-widget-container{ text-align:center; }
body .elementor .elementor-widget.measure.center-text > .elementor-widget-container{ margin-inline:auto; }

/* Elementor 4 ("optimized markup") drops .elementor-widget-container: the
   heading's <h2> and the text widget's <p>s are the widget's own children.
   Every rule above keyed on the container then matches nothing — centred
   headings sit left, measures run full width, leads lose their size — while
   the page still looks broadly styled. The same rules again for that markup;
   on older Elementor the container is the only child, so these are inert. */
body .elementor .elementor-widget.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--fg-muted); }
body .elementor .on-dark .elementor-widget.lead,
body .elementor .hero .elementor-widget.lead,
body .elementor .pagehead .elementor-widget.lead,
body .elementor .cta-band .elementor-widget.lead{ color:rgba(255,255,255,.84); }
body .elementor .elementor-widget.hero-lede > :not(.elementor-widget-container):not(.elementor-element-overlay){ max-width:52ch; }
body .elementor .elementor-widget.footer-blurb > :not(.elementor-widget-container):not(.elementor-element-overlay){ max-width:40ch; }
body .elementor .elementor-widget.measure > :not(.elementor-widget-container):not(.elementor-element-overlay){ max-width:62ch; }
body .elementor .elementor-widget.measure-sm > :not(.elementor-widget-container):not(.elementor-element-overlay){ max-width:48ch; }
body .elementor .elementor-widget.center-text{ text-align:center; }
body .elementor .elementor-widget.measure.center-text > :not(.elementor-widget-container):not(.elementor-element-overlay){ margin-inline:auto; }

/* ── Buttons ── */
body .elementor .elementor-button{
  font-family:var(--font-display); font-size:1.02rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; line-height:1;
  padding:1.12em 1.9em; border-radius:9px; border:2px solid transparent;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-700) 100%); color:#fff;
  box-shadow:var(--sh-sm); transition:transform var(--t-fast), box-shadow var(--t);
}
body .elementor .elementor-button:hover{ transform:translateY(-2px); box-shadow:var(--sh-brand); color:#fff; }
body .elementor .elementor-button .elementor-button-content-wrapper{ gap:.6em; }

/* Elementor's button icon is a Font Awesome SVG coloured by `fill`, which is
   set independently of the button's text colour. On the white phone button
   that meant a white icon on white — invisible until the hover turned the
   background blue and it reappeared, which is what "no phone icon unless you
   hover" was. Tie the fill to the text colour instead. Scoped to the button's
   own icon slot, because the theme's other icons are stroke-drawn with
   fill="none" and would turn into solid blobs. */
body .elementor .elementor-button .elementor-button-icon,
body .elementor .elementor-button .elementor-button-icon svg{ fill:currentColor; }

/* The button is an inline-block sitting on a text baseline, so its widget
   wrapper is ~20px taller than the button and that strip of leading shows
   under it as a pale band — the "weird underline". Drop the line box. */
body .elementor .elementor-widget-button,
body .elementor .elementor-widget-button .elementor-button-wrapper{ line-height:0; font-size:0; }
body .elementor .elementor-button{ vertical-align:top; }

/* Elementor's column is a flex container, so a widget with no bottom margin
   stretches to match a neighbour that has one. Two buttons side by side put
   20px of stretched, empty widget under the second one — the pale band that
   looked like an underline hanging off the button. Let them size to content. */
body .elementor .elementor-widget-wrap > .elementor-widget{ align-self:flex-start; }
body .elementor .btn-copper .elementor-button{ background:linear-gradient(135deg,var(--copper),var(--copper-600)); }

/* ── The pale buttons ─────────────────────────────────────────────────────
   Every page's buttons are Elementor widgets whose markup lives in the
   client's database, so they can only be fixed from here — and they have
   their own rules, separate from the static .btn system. Fixing one and not
   the other is why "the call button is hard to see" survived two passes.

   What was wrong: an outline button tinting to a pale wash on hover (text at
   the same moment going from ink to mid blue), and the generic :hover rule
   above adding a large blue glow shadow, which on a light button reads as a
   second ghost box sitting under the real one. Both resolve to a solid fill
   now, and the glow is for solid buttons only. */
body .elementor .btn-light .elementor-button{ background:#fff; color:var(--ink); }
body .elementor .btn-light .elementor-button:hover{
  background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:var(--sh-sm);
}
body .elementor .btn-outline-light .elementor-button{
  background:transparent; border-color:rgba(255,255,255,.55); color:#fff; box-shadow:none;
}
body .elementor .btn-outline-light .elementor-button:hover{
  border-color:#fff; background:#fff; color:var(--ink); box-shadow:none;
}
body .elementor .btn-ghost .elementor-button{
  background:#fff; border-color:var(--slate-300); color:var(--ink); box-shadow:none;
}
body .elementor .btn-ghost .elementor-button:hover{
  border-color:var(--brand); color:#fff; background:var(--brand); box-shadow:var(--sh-sm);
}

/* The phone number is the conversion on this site, so it is never a pale
   secondary. Matched on the href, not on a class, because the markup that
   carries it is already in the database and will not be re-seeded on a page
   the office has edited. */
/* Only the pale outline phone button turns solid ink. A blanket rule on every
   tel: link also caught the primary blue call buttons in the dark page
   headers and turned them near-black on a dark photograph — the fix for one
   button broke another. A primary call button stays the brand blue. */
body .elementor .btn-ghost .elementor-button[href^="tel:"]{
  background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:var(--sh-sm);
}
body .elementor .btn-ghost .elementor-button[href^="tel:"]:hover{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
body .elementor .on-dark .elementor-button[href^="tel:"],
body .elementor .hero .elementor-button[href^="tel:"],
body .elementor .btn-light .elementor-button[href^="tel:"]{
  background:#fff; border-color:#fff; color:var(--ink);
}
body .elementor .on-dark .elementor-button[href^="tel:"] .elementor-button-icon,
body .elementor .hero .elementor-button[href^="tel:"] .elementor-button-icon,
body .elementor .btn-light .elementor-button[href^="tel:"] .elementor-button-icon{
  color:var(--brand-700);
}
body .elementor .btn-ghost .elementor-button[href^="tel:"] .elementor-button-icon{ color:var(--brand-300); }
body .elementor .btn-ghost .elementor-button[href^="tel:"]:hover .elementor-button-icon{ color:#fff; }
body .elementor .on-dark .elementor-button[href^="tel:"]:hover,
body .elementor .hero .elementor-button[href^="tel:"]:hover,
body .elementor .btn-light .elementor-button[href^="tel:"]:hover{
  background:var(--brand); border-color:var(--brand); color:#fff;
}

/* ── Icon lists ──
   The kit colours the <i> DIRECTLY, so colouring the parent span leaves
   the icon untouched. Target the icon element itself. */
body .elementor .elementor-widget-icon-list .elementor-icon-list-item{ font-size:1rem; line-height:1.55; }
body .elementor .elementor-widget-icon-list .elementor-icon-list-icon i,
body .elementor .elementor-widget-icon-list .elementor-icon-list-icon svg{ color:var(--brand); fill:var(--brand); }
body .elementor .elementor-widget-icon-list .elementor-icon-list-text{ color:var(--fg); }
body .elementor .on-dark .elementor-widget-icon-list .elementor-icon-list-icon i,
body .elementor .on-dark .elementor-widget-icon-list .elementor-icon-list-icon svg,
body .elementor .cta-band .elementor-widget-icon-list .elementor-icon-list-icon i,
body .elementor .cta-band .elementor-widget-icon-list .elementor-icon-list-icon svg{ color:var(--ok); fill:var(--ok); }
body .elementor .on-dark .elementor-widget-icon-list .elementor-icon-list-text,
body .elementor .cta-band .elementor-widget-icon-list .elementor-icon-list-text{ color:var(--slate-300); }

/* ── Toggle / accordion (FAQ) ── */
body .elementor .elementor-toggle .elementor-tab-title{
  font-family:var(--font-display); font-size:1.16rem; font-weight:700; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  padding:1.15rem 1.3rem; margin-bottom:.7rem; line-height:1.25; transition:color var(--t-fast), border-color var(--t);
}
/* The kit colours the inner anchor, not the tab wrapper — style the anchor
   or every question renders in the default link blue. */
body .elementor .elementor-toggle .elementor-tab-title .elementor-toggle-title,
body .elementor .elementor-toggle .elementor-tab-title a{ color:var(--ink); text-decoration:none; }
body .elementor .elementor-toggle .elementor-tab-title:hover,
body .elementor .elementor-toggle .elementor-tab-title:hover .elementor-toggle-title{ color:var(--brand-700); }
body .elementor .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-title{ color:var(--brand-800); }
body .elementor .elementor-toggle .elementor-tab-title.elementor-active{
  border-color:var(--brand-200); border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0;
}
body .elementor .elementor-toggle .elementor-tab-title .elementor-toggle-icon{ color:var(--brand); }
body .elementor .elementor-toggle .elementor-tab-content{
  border:1px solid var(--brand-200); border-top:0; border-radius:0 0 var(--radius) var(--radius);
  background:#fff; padding:0 1.3rem 1.3rem; margin-bottom:.7rem;
  color:var(--fg-muted); font-size:.98rem; line-height:1.7;
}

/* ── Images ── */
body .elementor .elementor-widget-image img{ border-radius:var(--radius); }
body .elementor .media-frame .elementor-widget-image img,
body .elementor .elementor-widget-image.rounded-xl img{ border-radius:var(--radius-xl); box-shadow:var(--sh-lg); }
body .elementor .elementor-widget-image.no-round img{ border-radius:0; }

/* ═══════════════════════════════════════════════════════════════════════
   EDITOR-ONLY DOM SURVIVAL
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Sections/columns MUST keep position:relative.
   In the editor every section carries an absolutely-positioned
   .elementor-background-overlay contained by that positioning. Forcing
   `position:static` releases dozens of invisible full-page sheets onto the
   .elementor wrapper, which then swallow every click — the page looks fine
   and nothing can be selected. So we explicitly re-assert relative rather
   than let a design class strip it. */
body .elementor .elementor-section,
body .elementor .elementor-column,
body .elementor .e-con{ position:relative; }

/* 2. NEVER `width:auto` a column. Columns are flex items sized by
   .elementor-col-N { width:N% }. Re-apply any design-class layout on the
   inner .elementor-widget-wrap instead, leaving the column width alone. */
body .elementor .elementor-column > .elementor-widget-wrap{ align-content:flex-start; }

/* 3. Our section design classes, when Elementor owns the wrapper.
   Elementor replaces our .container with .elementor-container, so padding
   that lived on .section goes onto the Elementor section itself. */
body .elementor .section > .elementor-container{ padding-block:0; }
body .elementor .elementor-section.section{ padding-block:var(--section-y); }
body .elementor .elementor-section.section-sm{ padding-block:calc(var(--section-y) * .62); }
body .elementor .elementor-section.on-dark{ background-color:var(--ink); }
body .elementor .elementor-section.bg-paper{ background-color:var(--paper); }
body .elementor .elementor-section.bg-paper-2{ background-color:var(--paper-2); }

/* Dark section backgrounds set via Elementor still get our overlay art */
body .elementor .elementor-section.cta-band{
  background:linear-gradient(120deg,var(--ink) 0%,var(--brand-800) 52%,var(--brand-700) 100%);
}

/* 4. `.elementor-text-editor` exists ONLY in the editor. On the live page a
   text widget's HTML is the widget's direct child; in the editor it sits
   inside an extra div.elementor-text-editor. So a design class on the
   widget wrapper that sets `display:grid` gives one grid cell in the editor
   but shreds the live page into cells. Reset display on the wrapper and put
   the layout on the CONTENT element instead. */
body .elementor .elementor-widget.svc-rows,
body .elementor .elementor-widget.proj-rows,
body .elementor .elementor-widget.review-rows{ display:block; }
body .elementor .svc-rows .svc-grid,
body .elementor .svc-rows ul:not([class]){ /* scoped: never the editor toolbar <ul> */
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.7rem;
  list-style:none; margin:0; padding:0;
}

/* 5. The selection toolbar is a <ul>. Any generic `.thing ul {}` styles it
   too. Every list rule above is scoped to a class or `ul:not([class])`. */
body.elementor-editor-active .elementor-editor-element-settings{ list-style:none; }

/* 6. Editor canvas breathing room so sections aren't flush to the frame */
body.elementor-editor-active .hero,
body.elementor-editor-active .pagehead{ min-height:auto; }

/* Elementor Theme Builder header/footer locations inherit our chrome */
body .elementor-location-header{ position:relative; z-index:50; }
body .elementor-location-footer{ background:var(--ink); }

/* Kit reset guards: keep our own components immune to kit link colours */
body .elementor .pillar,
body .elementor .proj-card,
body .elementor .cm,
body .elementor .logo{ text-decoration:none; }

/* Buttons sit side by side instead of stacking full width.
   This sizes the WIDGET (a flex item of .elementor-widget-wrap) — never the
   column, whose width must stay owned by .elementor-col-N. */
body .elementor .elementor-widget.inline-w{ width:auto; max-width:100%; }
body .elementor .elementor-widget.inline-w + .elementor-widget.inline-w{ margin-left:.85rem; }
@media (max-width:420px){
  body .elementor .elementor-widget.inline-w{ width:100%; }
  body .elementor .elementor-widget.inline-w + .elementor-widget.inline-w{ margin-left:0; }
}
/* A centred button widget centres its own button, not just its text */
body .elementor .elementor-widget.center-text .elementor-button-wrapper{ text-align:center; }

/* ═══════════════════════════════════════════════════════════════════════
   THEME BUILDER HEADER & FOOTER
   Elementor replaces our .container with .elementor-container, so the flex
   and grid rules that lived on .header-in / .footer-main are re-homed onto
   the Elementor container here. The columns keep their own widths —
   .elementor-col-N owns those and must never be overridden.
   ═══════════════════════════════════════════════════════════════════════ */
body .elementor .tp-el-topbar > .elementor-container{ max-width:none; padding:0; }
body .elementor .tp-el-topbar .elementor-widget:not(:last-child){ margin-bottom:0; }

body .elementor-section.tp-el-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(226,232,241,.9);
}
body .elementor .tp-el-header > .elementor-container{
  max-width:var(--container); align-items:center; min-height:var(--header-h); gap:1.2rem;
}
body .elementor .tp-el-header .elementor-widget:not(:last-child){ margin-bottom:0; }
body .elementor .tp-el-logo img{ height:clamp(38px,3.2vw,50px); width:auto; border-radius:0; box-shadow:none; }
body .elementor .tp-el-nav-col > .elementor-widget-wrap{ justify-content:center; }
body .elementor .tp-el-nav-col .nav > ul,
body .elementor .tp-el-nav-col .nav-list{ display:flex; list-style:none; margin:0; padding:0; }
body .elementor .tp-el-cta-col > .elementor-widget-wrap{ justify-content:flex-end; align-items:center; gap:.7rem; }
body .elementor .tp-el-cta-col .elementor-widget{ width:auto; }
body .elementor .tp-el-cta .elementor-button{ font-size:.9rem; padding:.9em 1.4em; }
body .elementor .tp-el-burger{ display:none; }
@media (max-width:1100px){
  body .elementor .tp-el-nav-col{ display:none; }
  body .elementor .tp-el-burger{ display:block; }
}
@media (max-width:1180px){ body .elementor .tp-el-cta-col .header-phone{ display:none; } }

body .elementor-section.tp-el-footer{ background:var(--ink); color:var(--slate-300); }
body .elementor .tp-el-footer > .elementor-container{
  max-width:var(--container); padding-block:clamp(3.2rem,2rem + 4vw,5.5rem) 2.6rem;
  gap:clamp(1.6rem,1rem + 2vw,3rem); align-items:flex-start;
}
body .elementor .tp-el-footer .elementor-heading-title{ color:#fff; }
body .elementor .tp-el-fhead .elementor-heading-title{
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; line-height:1.4;
}
body .elementor .tp-el-flogo img{ height:54px; width:auto; border-radius:0; box-shadow:none; }
body .elementor .tp-el-footer .footer-blurb{ color:var(--slate-300); font-size:.97rem; }
body .elementor .tp-el-flist .elementor-icon-list-item a,
body .elementor .tp-el-flist .elementor-icon-list-text{ color:var(--slate-300); font-size:.96rem; }
body .elementor .tp-el-flist .elementor-icon-list-item a:hover .elementor-icon-list-text{ color:#fff; }
body .elementor .tp-el-flist .elementor-icon-list-icon i,
body .elementor .tp-el-flist .elementor-icon-list-icon svg{ color:var(--brand-300); fill:var(--brand-300); }

body .elementor-section.tp-el-footer-bottom{ background:var(--ink); }
body .elementor .tp-el-footer-bottom > .elementor-container{ max-width:var(--container); }
.footer-bottom-inner{
  border-top:1px solid rgba(255,255,255,.1); padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; justify-content:space-between;
  font-size:.86rem; color:var(--slate-400);
}
.footer-bottom-inner a{ color:var(--slate-400); text-decoration:none; }
.footer-bottom-inner a:hover{ color:#fff; }
@media (max-width:620px){ .footer-bottom-inner{ justify-content:center; text-align:center; } }

/* The Theme Builder canvas renders the header/footer alone — don't let the
   sticky header collapse to nothing while it is being edited. */
body.elementor-editor-active .tp-el-header{ position:relative; }

/* ═══════════════════════════════════════════════════════════════════════
   CLASSES THAT WERE EMITTED BUT NEVER DEFINED
   Each of these ships on an Elementor section or widget and had no rule at
   all, so the block silently lost its design on the WordPress render only.
   ═══════════════════════════════════════════════════════════════════════ */

/* Trust bar: the dark full-bleed band lives on .trustbar inside the widget,
   so the Elementor section around it needs the same ground or the band ends
   at the container edge. */
body .elementor-section.trustbar-wrap{ background-color:var(--ink-800); }
body .elementor .trustbar-wrap > .elementor-container{ max-width:none; padding:0; }
body .elementor .trustbar-wrap .elementor-widget:not(:last-child){ margin-bottom:0; }
body .elementor .trustbar-wrap .trustbar{ padding-inline:0; }

/* FAQ page: width limit and group rhythm. */
body .elementor .faq-section > .elementor-container{ max-width:min(920px, 100%); }
body .elementor .faq-col .elementor-widget-heading.faq-group-title{ margin-top:clamp(2rem, 1.2rem + 2vw, 3.2rem); }
body .elementor .faq-col .elementor-widget-heading.faq-group-title:first-child{ margin-top:0; }
body .elementor .faq-col .elementor-widget-heading.faq-group-title .elementor-heading-title{
  font-size:1.5rem; padding-bottom:.6rem; border-bottom:2px solid var(--line);
}

/* Large CTA buttons were shipping at default size in Elementor. */
body .elementor .elementor-widget.btn-lg .elementor-button{ font-size:1.12rem; padding:1.25em 2.3em; }
body .elementor .elementor-widget.btn-sm .elementor-button{ font-size:.9rem; padding:.9em 1.4em; }

/* Sticky sidebars: the position:relative guard (which protects the editor
   from released background overlays) also defeated position:sticky on the
   column it was applied to. Re-home it onto the widget wrap. */
body .elementor .elementor-column.sticky-side > .elementor-widget-wrap{
  position:sticky; top:calc(var(--header-h) + 22px);
}
@media (max-width:980px){
  body .elementor .elementor-column.sticky-side > .elementor-widget-wrap{ position:static; }
}
/* …and the column keeps the design class's `top`. With the editor guard's
   position:relative on it, that offset is no longer sticky — it just shoves
   the whole column 90px down, over the form card below it on a phone
   (Contact and Careers both). */
body .elementor .elementor-column.sticky-side{ top:auto; }

/* Contact page county tiles sit on a LIGHT section, but .county is written
   for dark ground — white text on near-white. */
.counties-light .county{
  background:#fff; border-color:var(--line); box-shadow:var(--sh-sm);
}
.counties-light .county:hover{ background:var(--brand-050); border-color:var(--brand-200); }
.counties-light .county b{ color:var(--ink); }
.counties-light .county span{ color:var(--slate); }
.counties-light .county .ico{ color:var(--brand); }

/* .measure was re-applying a max-width to the WIDGET WRAPPER — the very
   trap 09-elementor.css documents further up. Same treatment as .hero-lede. */
body .elementor .elementor-widget.measure,
body .elementor .elementor-widget.measure-sm{ max-width:none; width:100%; }

/* Tablet parity: the static hero stacks at 1040, the Elementor one did not,
   so 768–1040 showed two cramped columns on the WordPress render only. */
@media (max-width:1040px){
  body .elementor .elementor-section.hero > .elementor-container{ flex-wrap:wrap; }
  body .elementor .elementor-section.hero > .elementor-container > .elementor-column{ width:100%; }
}
/* …and the split sections, which Elementor stacks at 767 but the theme at 980. */
@media (max-width:980px){
  body .elementor .elementor-section.section > .elementor-container{ flex-wrap:wrap; }
  body .elementor .elementor-section.section > .elementor-container > .elementor-column.elementor-col-40,
  body .elementor .elementor-section.section > .elementor-container > .elementor-column.elementor-col-60{ width:100%; }
}

/* Theme Builder header: below 1100 the nav is hidden and the burger appears,
   but the action column kept its 25% track, stranding the burger mid-header. */
@media (max-width:1100px){
  body .elementor .tp-el-header > .elementor-container{ flex-wrap:nowrap; }
  body .elementor .tp-el-header .tp-el-logo-col{ width:auto; flex:0 0 auto; }
  body .elementor .tp-el-header .tp-el-cta-col{ width:auto; flex:1 1 auto; }
}
/* Theme Builder footer: four tracks will not fit at tablet widths. */
@media (max-width:1000px){
  body .elementor .tp-el-footer > .elementor-container{ flex-wrap:wrap; row-gap:2.4rem; }
  body .elementor .tp-el-footer > .elementor-container > .elementor-column{ width:50%; }
  body .elementor .tp-el-footer > .elementor-container > .elementor-column.footer-brand{ width:100%; }
}
@media (max-width:620px){
  body .elementor .tp-el-footer > .elementor-container > .elementor-column{ width:100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ELEMENTOR'S IMG RESET
   `.elementor img{height:auto;max-width:100%}` is (0,1,1) and loads AFTER
   the theme sheet on the front end, so it ties and beats our own
   `.card img{height:100%}`. Every cover image then collapses to its natural
   height and stops filling its frame — visible only on the live site.
   These are (0,3,1) and restore the intent.
   ═══════════════════════════════════════════════════════════════════════ */
body .elementor .hero-bg img,
body .elementor .pagehead-bg img,
body .elementor .pillar-img img,
body .elementor .proj-thumb img,
body .elementor .rel-img img,
body .elementor .svc-card-img img,
body .elementor .gallery img,
body .elementor .media-frame img{ height:100%; width:100%; object-fit:cover; }
body .elementor .media-frame img{ height:auto; aspect-ratio:4/3; }
body .elementor .media-frame.tall img{ aspect-ratio:3/4; }
body .elementor .media-stack .media-frame:first-child img{ aspect-ratio:3/4; }
body .elementor .media-stack .media-frame:last-child img{ aspect-ratio:1/1; }

/* The eyebrow's rule sits on the widget WRAPPER, so its ::before line drew
   above the text instead of beside it. Draw it on the heading itself. */
body .elementor .elementor-widget.eyebrow .elementor-heading-title{
  display:inline-flex; align-items:center; gap:.6em;
}
body .elementor .elementor-widget.eyebrow .elementor-heading-title::before{
  content:""; width:28px; height:2px; flex:none;
  background:linear-gradient(90deg,var(--brand),var(--copper));
}
body .elementor .elementor-widget.eyebrow.center-text .elementor-heading-title{ justify-content:center; }
/* The .eyebrow design class makes the widget itself a flex row, and in
   Elementor 4 the heading is its direct child — so it is the row that has to
   centre, or a centred section's eyebrow sits at the left edge. */
body .elementor .elementor-widget.eyebrow.center-text{ justify-content:center; }

/* The hero's bottom padding has to clear the water band drawn on ::after.
   The theme sets it on `.hero` at (0,1,0), which Elementor's own section
   padding beats — so the CTA card ended up sitting in the water. */
body .elementor .elementor-section.hero{
  --water-h:clamp(96px, 10vw, 150px);
  padding-top:clamp(3.5rem, 2rem + 7vw, 7.5rem);
  padding-bottom:calc(var(--water-h) + clamp(1.75rem, 1rem + 2.5vw, 3.5rem));
}

/* Phones: the water is 84px tall there, and the stacked hero card sat on top
   of it, so the swell was mostly hidden behind the card. */
@media (max-width:767px){
  body .elementor .elementor-section.hero{ --water-h:84px; padding-bottom:calc(84px + 1.4rem); }
}

/* ── 10-wide ── */
/* ═══════════════════════════════════════════════════════════════════════
   WIDE SCREENS — 1600 / 2000 / 2400 / 2800
   1440 is the laptop everyone designs on; it is the baseline, not the proof.
   On a 27" or a waiting-room TV the failure mode is a 1240px column of
   content floating in a sea of background with 16px body text. So the
   container, the type scale and the section rhythm all step up together —
   and grids gain columns rather than just stretching their cards.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width:1600px){
  :root{
    --container:1360px;
    --fs-body:1.06rem;
    --fs-lead:1.45rem;
    --section-y:clamp(5rem,3rem + 5vw,9rem);
  }
}

@media (min-width:2000px){
  :root{
    --container:1560px;
    --fs-body:1.14rem;
    --fs-small:1rem;
    --fs-lead:1.55rem;
    --fs-h4:1.6rem;
    --fs-h3:2.3rem;
    --fs-h2:3.9rem;
    --fs-h1:6.4rem;
    --radius:16px; --radius-lg:24px; --radius-xl:34px;
  }
  .hero-lede,.pagehead .lead{ max-width:56ch; }
  /* Four across instead of three — cards stay a readable width. */
  .reviews-grid{ grid-template-columns:repeat(4,1fr); }
  .proj-grid{ grid-template-columns:repeat(4,1fr); }
  .gallery{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}

@media (min-width:2400px){
  :root{
    --container:1760px;
    --fs-body:1.22rem;
    --fs-lead:1.7rem;
    --fs-h2:4.4rem;
    --fs-h1:7.2rem;
    --section-y:clamp(6rem,3rem + 5vw,11rem);
  }
  .svc-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
  .counties{ grid-template-columns:repeat(6,1fr); }
  .hero-card{ padding:2.8rem; }
  .hero-card .big-phone{ font-size:3rem; }
}

@media (min-width:2800px){
  :root{ --container:1960px; --fs-body:1.3rem; }
  .reviews-grid{ grid-template-columns:repeat(4,1fr); }
}

/* Full-bleed photography must COVER, never letterbox, at any width. */
.hero-bg img,.pagehead-bg img,.pillar-img img,.proj-thumb img,.media-frame img{
  object-fit:cover;
}

/* On a very wide viewport the hero's two columns drift apart; cap the gap
   and keep the card from ballooning. */
@media (min-width:2000px){
  .hero-grid{ gap:6rem; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  .hero-card{ max-width:620px; margin-left:auto; }
  .split{ gap:6rem; }
}

/* Elementor's own container gets the same treatment, so a Theme Builder or
   page layout does not stay pinned at 1240 on a 27" display. */
@media (min-width:1600px){
  body .elementor-section.elementor-section-boxed > .elementor-container{ max-width:var(--container); }
}

/* ── Short viewports (landscape phones, small laptops) ───────────────── */
@media (max-height:560px){
  .hero{ padding-block:2.5rem; }
  .hero-stats{ margin-top:1.6rem; }
}

/* ── Ultra-wide safety: never let a single line of text run 200 characters ── */
.prose,.measure{ max-width:min(72ch, 100%); }
.sec-head{ max-width:min(62ch, 100%); }

/* ── 11-water ── */
/* ═══════════════════════════════════════════════════════════════════════
   WATER — the brand's signature motion.

   All of it is decoration drawn with pseudo-elements and CSS gradients:
   no extra markup, so the Elementor render gets it too and the editor never
   shows an empty widget placeholder. Every effect degrades to a still image
   under prefers-reduced-motion, and none of it can hide content.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. A water surface across the foot of the hero ────────────────────
   The earlier version was a pair of soft blue blooms over a blue photograph,
   which is to say: invisible. Water has to be legible as water — a defined
   crest with a bright surface line, moving. The first pass was two identical
   sine waves sliding over each other, which looked mechanical ("two waves,
   looks weird"); now it is three irregular swells (see below).
   Drawn on ::after so the Elementor hero (whose markup we do not control)
   gets it too, with no decoration widget to clutter the editor. */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:-1;
  height:clamp(96px, 10vw, 150px); pointer-events:none;
  /* Three swells, back to front: each is a sum of sines whose periods all
     divide the tile, so the crests are irregular — no two alike — yet the
     tile still repeats seamlessly. They drift at different speeds and the
     nearer ones move faster, which is what reads as depth on real water. */
  background-image:
    /* depth: the water darkens as it goes down, into the section below */
    linear-gradient(to bottom, rgba(10,16,27,0) 0%, rgba(10,16,27,0) 40%, rgba(10,16,27,.72) 78%, var(--ink) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2824%2C92%2C178%2C.62%29'/%3E%3Cstop offset='1' stop-color='%230A101B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0.0 75.4 L8.8 74.7 L17.5 73.9 L26.2 73.1 L35.0 72.5 L43.8 72.0 L52.5 71.7 L61.2 71.6 L70.0 71.6 L78.8 71.7 L87.5 71.8 L96.2 71.7 L105.0 71.5 L113.8 71.1 L122.5 70.5 L131.2 69.8 L140.0 69.2 L148.8 68.7 L157.5 68.4 L166.2 68.5 L175.0 69.0 L183.8 69.8 L192.5 70.9 L201.2 72.3 L210.0 73.7 L218.8 75.0 L227.5 76.2 L236.2 77.1 L245.0 77.8 L253.8 78.2 L262.5 78.5 L271.2 78.6 L280.0 78.6 L288.8 78.8 L297.5 79.1 L306.2 79.5 L315.0 80.1 L323.8 80.7 L332.5 81.3 L341.2 81.7 L350.0 81.9 L358.8 81.9 L367.5 81.5 L376.2 80.9 L385.0 80.1 L393.8 79.2 L402.5 78.3 L411.2 77.6 L420.0 77.2 L428.8 77.1 L437.5 77.3 L446.2 77.7 L455.0 78.4 L463.8 79.1 L472.5 79.8 L481.2 80.4 L490.0 80.7 L498.8 80.8 L507.5 80.7 L516.2 80.4 L525.0 80.0 L533.8 79.6 L542.5 79.3 L551.2 79.1 L560.0 79.1 L568.8 79.2 L577.5 79.4 L586.2 79.5 L595.0 79.5 L603.8 79.3 L612.5 78.8 L621.2 78.0 L630.0 76.9 L638.8 75.5 L647.5 74.0 L656.2 72.6 L665.0 71.3 L673.8 70.2 L682.5 69.5 L691.2 69.1 L700.0 69.1 L708.8 69.3 L717.5 69.6 L726.2 70.0 L735.0 70.3 L743.8 70.5 L752.5 70.6 L761.2 70.5 L770.0 70.4 L778.8 70.3 L787.5 70.2 L796.2 70.4 L805.0 70.8 L813.8 71.4 L822.5 72.3 L831.2 73.3 L840.0 74.3 L848.8 75.2 L857.5 75.9 L866.2 76.4 L875.0 76.5 L883.8 76.3 L892.5 75.8 L901.2 75.1 L910.0 74.5 L918.8 73.8 L927.5 73.4 L936.2 73.2 L945.0 73.3 L953.8 73.7 L962.5 74.3 L971.2 75.0 L980.0 75.6 L988.8 76.2 L997.5 76.7 L1006.2 77.0 L1015.0 77.1 L1023.8 77.2 L1032.5 77.2 L1041.2 77.3 L1050.0 77.6 L1058.8 78.2 L1067.5 79.0 L1076.2 80.0 L1085.0 81.1 L1093.8 82.3 L1102.5 83.4 L1111.2 84.2 L1120.0 84.8 L1128.8 84.9 L1137.5 84.7 L1146.2 84.2 L1155.0 83.3 L1163.8 82.4 L1172.5 81.4 L1181.2 80.5 L1190.0 79.8 L1198.8 79.3 L1207.5 78.9 L1216.2 78.7 L1225.0 78.6 L1233.8 78.3 L1242.5 78.0 L1251.2 77.5 L1260.0 76.8 L1268.8 76.0 L1277.5 75.0 L1286.2 74.1 L1295.0 73.3 L1303.8 72.7 L1312.5 72.5 L1321.2 72.5 L1330.0 72.9 L1338.8 73.5 L1347.5 74.2 L1356.2 74.9 L1365.0 75.5 L1373.8 75.9 L1382.5 76.0 L1391.2 75.8 L1400.0 75.4 L1400 120 L0 120Z' fill='url%28%23c%29'/%3E%3Cpath d='M0.0 75.4 L8.8 74.7 L17.5 73.9 L26.2 73.1 L35.0 72.5 L43.8 72.0 L52.5 71.7 L61.2 71.6 L70.0 71.6 L78.8 71.7 L87.5 71.8 L96.2 71.7 L105.0 71.5 L113.8 71.1 L122.5 70.5 L131.2 69.8 L140.0 69.2 L148.8 68.7 L157.5 68.4 L166.2 68.5 L175.0 69.0 L183.8 69.8 L192.5 70.9 L201.2 72.3 L210.0 73.7 L218.8 75.0 L227.5 76.2 L236.2 77.1 L245.0 77.8 L253.8 78.2 L262.5 78.5 L271.2 78.6 L280.0 78.6 L288.8 78.8 L297.5 79.1 L306.2 79.5 L315.0 80.1 L323.8 80.7 L332.5 81.3 L341.2 81.7 L350.0 81.9 L358.8 81.9 L367.5 81.5 L376.2 80.9 L385.0 80.1 L393.8 79.2 L402.5 78.3 L411.2 77.6 L420.0 77.2 L428.8 77.1 L437.5 77.3 L446.2 77.7 L455.0 78.4 L463.8 79.1 L472.5 79.8 L481.2 80.4 L490.0 80.7 L498.8 80.8 L507.5 80.7 L516.2 80.4 L525.0 80.0 L533.8 79.6 L542.5 79.3 L551.2 79.1 L560.0 79.1 L568.8 79.2 L577.5 79.4 L586.2 79.5 L595.0 79.5 L603.8 79.3 L612.5 78.8 L621.2 78.0 L630.0 76.9 L638.8 75.5 L647.5 74.0 L656.2 72.6 L665.0 71.3 L673.8 70.2 L682.5 69.5 L691.2 69.1 L700.0 69.1 L708.8 69.3 L717.5 69.6 L726.2 70.0 L735.0 70.3 L743.8 70.5 L752.5 70.6 L761.2 70.5 L770.0 70.4 L778.8 70.3 L787.5 70.2 L796.2 70.4 L805.0 70.8 L813.8 71.4 L822.5 72.3 L831.2 73.3 L840.0 74.3 L848.8 75.2 L857.5 75.9 L866.2 76.4 L875.0 76.5 L883.8 76.3 L892.5 75.8 L901.2 75.1 L910.0 74.5 L918.8 73.8 L927.5 73.4 L936.2 73.2 L945.0 73.3 L953.8 73.7 L962.5 74.3 L971.2 75.0 L980.0 75.6 L988.8 76.2 L997.5 76.7 L1006.2 77.0 L1015.0 77.1 L1023.8 77.2 L1032.5 77.2 L1041.2 77.3 L1050.0 77.6 L1058.8 78.2 L1067.5 79.0 L1076.2 80.0 L1085.0 81.1 L1093.8 82.3 L1102.5 83.4 L1111.2 84.2 L1120.0 84.8 L1128.8 84.9 L1137.5 84.7 L1146.2 84.2 L1155.0 83.3 L1163.8 82.4 L1172.5 81.4 L1181.2 80.5 L1190.0 79.8 L1198.8 79.3 L1207.5 78.9 L1216.2 78.7 L1225.0 78.6 L1233.8 78.3 L1242.5 78.0 L1251.2 77.5 L1260.0 76.8 L1268.8 76.0 L1277.5 75.0 L1286.2 74.1 L1295.0 73.3 L1303.8 72.7 L1312.5 72.5 L1321.2 72.5 L1330.0 72.9 L1338.8 73.5 L1347.5 74.2 L1356.2 74.9 L1365.0 75.5 L1373.8 75.9 L1382.5 76.0 L1391.2 75.8 L1400.0 75.4' fill='none' stroke='rgba%28185%2C228%2C255%2C.55%29' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1150 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2830%2C110%2C205%2C.42%29'/%3E%3Cstop offset='1' stop-color='rgba%2810%2C16%2C27%2C.85%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0.0 66.5 L7.2 66.2 L14.4 65.7 L21.6 65.3 L28.8 64.9 L35.9 64.5 L43.1 64.2 L50.3 63.8 L57.5 63.5 L64.7 63.2 L71.9 62.9 L79.1 62.5 L86.2 62.1 L93.4 61.6 L100.6 61.0 L107.8 60.3 L115.0 59.5 L122.2 58.6 L129.4 57.6 L136.6 56.6 L143.8 55.5 L150.9 54.4 L158.1 53.3 L165.3 52.4 L172.5 51.5 L179.7 50.8 L186.9 50.3 L194.1 50.0 L201.2 49.9 L208.4 50.1 L215.6 50.4 L222.8 51.0 L230.0 51.7 L237.2 52.5 L244.4 53.5 L251.6 54.5 L258.8 55.5 L265.9 56.4 L273.1 57.3 L280.3 58.0 L287.5 58.7 L294.7 59.2 L301.9 59.5 L309.1 59.8 L316.2 59.9 L323.4 59.9 L330.6 59.9 L337.8 59.8 L345.0 59.8 L352.2 59.8 L359.4 59.8 L366.6 59.9 L373.8 60.1 L380.9 60.3 L388.1 60.6 L395.3 61.0 L402.5 61.4 L409.7 61.8 L416.9 62.2 L424.1 62.6 L431.2 62.9 L438.4 63.1 L445.6 63.3 L452.8 63.4 L460.0 63.4 L467.2 63.3 L474.4 63.2 L481.6 63.1 L488.8 62.9 L495.9 62.8 L503.1 62.8 L510.3 62.8 L517.5 63.0 L524.7 63.2 L531.9 63.6 L539.1 64.1 L546.2 64.6 L553.4 65.2 L560.6 65.9 L567.8 66.5 L575.0 67.0 L582.2 67.5 L589.4 67.8 L596.6 68.0 L603.8 68.0 L610.9 67.7 L618.1 67.3 L625.3 66.6 L632.5 65.8 L639.7 64.7 L646.9 63.6 L654.1 62.4 L661.2 61.1 L668.4 59.8 L675.6 58.6 L682.8 57.4 L690.0 56.3 L697.2 55.4 L704.4 54.7 L711.6 54.1 L718.8 53.6 L725.9 53.3 L733.1 53.1 L740.3 53.0 L747.5 53.0 L754.7 53.0 L761.9 53.0 L769.1 53.1 L776.2 53.1 L783.4 53.1 L790.6 53.1 L797.8 53.1 L805.0 53.1 L812.2 53.2 L819.4 53.2 L826.6 53.4 L833.8 53.6 L840.9 53.9 L848.1 54.3 L855.3 54.8 L862.5 55.5 L869.7 56.3 L876.9 57.1 L884.1 58.0 L891.2 58.9 L898.4 59.8 L905.6 60.6 L912.8 61.4 L920.0 62.1 L927.2 62.6 L934.4 62.9 L941.6 63.1 L948.8 63.1 L955.9 63.0 L963.1 62.7 L970.3 62.3 L977.5 61.9 L984.7 61.4 L991.9 61.0 L999.1 60.6 L1006.2 60.3 L1013.4 60.1 L1020.6 60.1 L1027.8 60.2 L1035.0 60.5 L1042.2 61.0 L1049.4 61.5 L1056.6 62.2 L1063.8 62.9 L1070.9 63.7 L1078.1 64.5 L1085.3 65.2 L1092.5 65.8 L1099.7 66.4 L1106.9 66.8 L1114.1 67.1 L1121.2 67.2 L1128.4 67.2 L1135.6 67.1 L1142.8 66.8 L1150.0 66.5 L1150 120 L0 120Z' fill='url%28%23b%29'/%3E%3Cpath d='M0.0 66.5 L7.2 66.2 L14.4 65.7 L21.6 65.3 L28.8 64.9 L35.9 64.5 L43.1 64.2 L50.3 63.8 L57.5 63.5 L64.7 63.2 L71.9 62.9 L79.1 62.5 L86.2 62.1 L93.4 61.6 L100.6 61.0 L107.8 60.3 L115.0 59.5 L122.2 58.6 L129.4 57.6 L136.6 56.6 L143.8 55.5 L150.9 54.4 L158.1 53.3 L165.3 52.4 L172.5 51.5 L179.7 50.8 L186.9 50.3 L194.1 50.0 L201.2 49.9 L208.4 50.1 L215.6 50.4 L222.8 51.0 L230.0 51.7 L237.2 52.5 L244.4 53.5 L251.6 54.5 L258.8 55.5 L265.9 56.4 L273.1 57.3 L280.3 58.0 L287.5 58.7 L294.7 59.2 L301.9 59.5 L309.1 59.8 L316.2 59.9 L323.4 59.9 L330.6 59.9 L337.8 59.8 L345.0 59.8 L352.2 59.8 L359.4 59.8 L366.6 59.9 L373.8 60.1 L380.9 60.3 L388.1 60.6 L395.3 61.0 L402.5 61.4 L409.7 61.8 L416.9 62.2 L424.1 62.6 L431.2 62.9 L438.4 63.1 L445.6 63.3 L452.8 63.4 L460.0 63.4 L467.2 63.3 L474.4 63.2 L481.6 63.1 L488.8 62.9 L495.9 62.8 L503.1 62.8 L510.3 62.8 L517.5 63.0 L524.7 63.2 L531.9 63.6 L539.1 64.1 L546.2 64.6 L553.4 65.2 L560.6 65.9 L567.8 66.5 L575.0 67.0 L582.2 67.5 L589.4 67.8 L596.6 68.0 L603.8 68.0 L610.9 67.7 L618.1 67.3 L625.3 66.6 L632.5 65.8 L639.7 64.7 L646.9 63.6 L654.1 62.4 L661.2 61.1 L668.4 59.8 L675.6 58.6 L682.8 57.4 L690.0 56.3 L697.2 55.4 L704.4 54.7 L711.6 54.1 L718.8 53.6 L725.9 53.3 L733.1 53.1 L740.3 53.0 L747.5 53.0 L754.7 53.0 L761.9 53.0 L769.1 53.1 L776.2 53.1 L783.4 53.1 L790.6 53.1 L797.8 53.1 L805.0 53.1 L812.2 53.2 L819.4 53.2 L826.6 53.4 L833.8 53.6 L840.9 53.9 L848.1 54.3 L855.3 54.8 L862.5 55.5 L869.7 56.3 L876.9 57.1 L884.1 58.0 L891.2 58.9 L898.4 59.8 L905.6 60.6 L912.8 61.4 L920.0 62.1 L927.2 62.6 L934.4 62.9 L941.6 63.1 L948.8 63.1 L955.9 63.0 L963.1 62.7 L970.3 62.3 L977.5 61.9 L984.7 61.4 L991.9 61.0 L999.1 60.6 L1006.2 60.3 L1013.4 60.1 L1020.6 60.1 L1027.8 60.2 L1035.0 60.5 L1042.2 61.0 L1049.4 61.5 L1056.6 62.2 L1063.8 62.9 L1070.9 63.7 L1078.1 64.5 L1085.3 65.2 L1092.5 65.8 L1099.7 66.4 L1106.9 66.8 L1114.1 67.1 L1121.2 67.2 L1128.4 67.2 L1135.6 67.1 L1142.8 66.8 L1150.0 66.5' fill='none' stroke='rgba%28150%2C210%2C255%2C.22%29' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1700 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2852%2C140%2C232%2C.30%29'/%3E%3Cstop offset='1' stop-color='rgba%2810%2C16%2C27%2C.55%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0.0 50.2 L10.6 50.1 L21.2 50.1 L31.9 50.2 L42.5 50.4 L53.1 50.7 L63.8 51.0 L74.4 51.3 L85.0 51.5 L95.6 51.6 L106.2 51.5 L116.9 51.2 L127.5 50.8 L138.1 50.3 L148.8 49.6 L159.4 49.1 L170.0 48.6 L180.6 48.3 L191.2 48.2 L201.9 48.4 L212.5 49.0 L223.1 49.7 L233.8 50.8 L244.4 51.9 L255.0 53.0 L265.6 54.1 L276.2 55.0 L286.9 55.6 L297.5 55.8 L308.1 55.6 L318.8 54.9 L329.4 53.9 L340.0 52.6 L350.6 51.1 L361.2 49.4 L371.9 47.7 L382.5 46.1 L393.1 44.6 L403.8 43.3 L414.4 42.3 L425.0 41.5 L435.6 40.9 L446.2 40.5 L456.9 40.1 L467.5 39.8 L478.1 39.5 L488.8 39.1 L499.4 38.7 L510.0 38.2 L520.6 37.7 L531.2 37.2 L541.9 36.9 L552.5 36.7 L563.1 36.7 L573.8 37.0 L584.4 37.6 L595.0 38.4 L605.6 39.5 L616.2 40.7 L626.9 42.0 L637.5 43.2 L648.1 44.4 L658.8 45.3 L669.4 45.8 L680.0 46.1 L690.6 45.9 L701.2 45.5 L711.9 44.8 L722.5 43.8 L733.1 42.9 L743.8 41.9 L754.4 41.1 L765.0 40.5 L775.6 40.3 L786.2 40.3 L796.9 40.7 L807.5 41.4 L818.1 42.4 L828.8 43.5 L839.4 44.7 L850.0 45.9 L860.6 47.1 L871.2 48.1 L881.9 48.9 L892.5 49.7 L903.1 50.3 L913.8 50.8 L924.4 51.2 L935.0 51.7 L945.6 52.2 L956.2 52.9 L966.9 53.6 L977.5 54.4 L988.1 55.3 L998.8 56.2 L1009.4 56.9 L1020.0 57.4 L1030.6 57.7 L1041.2 57.7 L1051.9 57.2 L1062.5 56.4 L1073.1 55.3 L1083.8 53.8 L1094.4 52.2 L1105.0 50.4 L1115.6 48.7 L1126.2 47.1 L1136.9 45.7 L1147.5 44.6 L1158.1 43.9 L1168.8 43.6 L1179.4 43.6 L1190.0 43.9 L1200.6 44.4 L1211.2 45.0 L1221.9 45.6 L1232.5 46.1 L1243.1 46.5 L1253.8 46.7 L1264.4 46.6 L1275.0 46.4 L1285.6 45.9 L1296.2 45.4 L1306.9 44.7 L1317.5 44.1 L1328.1 43.6 L1338.8 43.1 L1349.4 42.8 L1360.0 42.6 L1370.6 42.5 L1381.2 42.4 L1391.9 42.3 L1402.5 42.1 L1413.1 41.7 L1423.8 41.2 L1434.4 40.5 L1445.0 39.6 L1455.6 38.6 L1466.2 37.4 L1476.9 36.4 L1487.5 35.4 L1498.1 34.6 L1508.8 34.2 L1519.4 34.1 L1530.0 34.5 L1540.6 35.3 L1551.2 36.5 L1561.9 38.0 L1572.5 39.8 L1583.1 41.7 L1593.8 43.6 L1604.4 45.3 L1615.0 46.9 L1625.6 48.3 L1636.2 49.3 L1646.9 50.0 L1657.5 50.4 L1668.1 50.5 L1678.8 50.5 L1689.4 50.4 L1700.0 50.2 L1700 120 L0 120Z' fill='url%28%23a%29'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, transparent 0%, rgba(10,16,27,.42) 55%, var(--ink) 100%);
  background-repeat:no-repeat, repeat-x, repeat-x, repeat-x, no-repeat;
  background-position:0 bottom, 0 bottom, 0 bottom, 0 bottom, 0 bottom;
  background-size:100% 100%, 1400px 62%, 1150px 80%, 1700px 100%, 100% 100%;
  animation:tp-water 60s linear infinite;
}
/* Phones: the desktop tiles are 1150-1700px wide, so a 390px screen shows a
   fraction of one swell — it read as a flat band, as if the wave had not
   changed at all. Smaller tiles put several crests on screen. */
@media (max-width:767px){
  .hero::after{
    height:84px;
    background-size:100% 100%, 640px 62%, 520px 80%, 780px 100%, 100% 100%;
    animation-name:tp-water-sm; animation-duration:40s;
  }
}
@keyframes tp-water-sm{
  to{ background-position:0 bottom, -1280px bottom, -1040px bottom, -780px bottom, 0 bottom; }
}
@keyframes tp-water{
  to{ background-position:0 bottom, -2800px bottom, -2300px bottom, -1700px bottom, 0 bottom; }
}

/* ── 2. (removed) ──────────────────────────────────────────────────────
   There was a two-layer wave divider at the foot of the trust bar. Over a
   dark band, two translucent crests in near-white read as a rendering
   artefact rather than as water, and they crowded the line of text above.
   The hero's water surface is the signature; a second one was noise. */

/* ── 3. Water running through the process timeline ─────────────────────
   The connector between steps already exists; give it a travelling highlight
   so the four steps read as a flow rather than four separate boxes. */
.on-dark .step::before{
  background-image:linear-gradient(90deg,
    rgba(111,179,245,.35) 0%, rgba(111,179,245,.35) 38%,
    rgba(154,214,255,1) 50%,
    rgba(111,179,245,.35) 62%, rgba(111,179,245,.35) 100%);
  background-size:260% 100%;
  animation:tp-flow 3.6s linear infinite;
}
.on-dark .step:nth-child(2)::before{ animation-delay:.45s }
.on-dark .step:nth-child(3)::before{ animation-delay:.9s }
.on-dark .step:nth-child(4)::before{ animation-delay:1.35s }
@keyframes tp-flow{ from{ background-position:130% 0 } to{ background-position:-130% 0 } }

/* ── 4. The phone ring "drips" a ripple, inviting the tap ──────────────*/
.hero-card .big-phone .ring{ position:relative; }
.hero-card .big-phone .ring::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(110,180,245,.75); pointer-events:none;
  animation:tp-ripple 2.8s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes tp-ripple{
  0%   { transform:scale(1);    opacity:.85 }
  70%  { transform:scale(1.85); opacity:0 }
  100% { transform:scale(1.85); opacity:0 }
}

/* ── 5. A droplet falls from the logo's spout on hover ─────────────────*/
.logo{ position:relative; }
.logo::after{
  content:""; position:absolute; left:1.42em; top:1.15em;
  width:5px; height:7px; border-radius:0 50% 50% 50%;
  transform:rotate(45deg) scale(0); transform-origin:center;
  background:linear-gradient(180deg,#6FB3F5,#1E7BE0); opacity:0; pointer-events:none;
}
.logo:hover::after{ animation:tp-drip 1.1s ease-in forwards; }
@keyframes tp-drip{
  0%  { transform:rotate(45deg) scale(.4) translate(0,0);      opacity:0 }
  25% { transform:rotate(45deg) scale(1)  translate(0,0);      opacity:1 }
  100%{ transform:rotate(45deg) scale(.8) translate(14px,14px);opacity:0 }
}

/* ── 6. Section CTA band gets a slow shimmer across its grid ───────────*/
.cta-band::before{ animation:tp-drift 40s linear infinite; }
@keyframes tp-drift{ to{ background-position:60px 60px; } }

/* ── Reduced motion: keep every effect, stop every animation ───────────*/
@media (prefers-reduced-motion:reduce){
  .hero::after,
  .on-dark .step::before,.hero-card .big-phone .ring::after,
  .cta-band::before,.logo:hover::after{ animation:none !important; }
  .hero-card .big-phone .ring::after{ opacity:.35; }
}

/* The Elementor canvas should show the design, not a disco. */
body.elementor-editor-active .hero::after,
body.elementor-editor-active .on-dark .step::before,
body.elementor-editor-active .hero-card .big-phone .ring::after{ animation:none; }

/* ── 12-services ── */
/* ═══════════════ Service pages ═══════════════ */

/* Scope list — denser than .checklist, since these run to eight items */
.scope-list{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.scope-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.99rem; line-height:1.55; }
.scope-list .ico{ width:1.05em; height:1.05em; color:var(--brand); flex:none; margin-top:.36em; }

/* Related-service cards — internal links that look like an offer,
   not like a footer link farm */
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem, .6rem + 1.2vw, 1.6rem); }
@media (max-width:900px){ .rel-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .rel-grid{ grid-template-columns:1fr; } }
.rel-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; text-decoration:none;
  box-shadow:var(--sh-sm); transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.rel-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--brand-200); }
.rel-img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.rel-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.rel-card:hover .rel-img img{ transform:scale(1.06); }
.rel-body{ display:block; padding:1.15rem 1.25rem 1.3rem; }
.rel-t{ display:block; font-family:var(--font-display); font-size:1.18rem; font-weight:700;
  line-height:1.15; color:var(--ink); margin-bottom:.5rem; }
.rel-card:hover .rel-t{ color:var(--brand-700); }
.rel-m{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-display);
  font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-700); }
.rel-m .ico{ width:1em; height:1em; transition:transform var(--t); }
.rel-card:hover .rel-m .ico{ transform:translateX(4px); }

/* The services index grid */
.svc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem, .6rem + 1.2vw, 1.7rem); }
@media (max-width:1000px){ .svc-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .svc-cards{ grid-template-columns:1fr; } }
@media (min-width:2000px){ .svc-cards{ grid-template-columns:repeat(4,1fr); } }
.svc-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  position:relative;
  border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; height:100%;
  box-shadow:var(--sh-sm); transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-xl); border-color:transparent; }
.svc-card-img{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); position:relative; }
.svc-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.svc-card:hover .svc-card-img img{ transform:scale(1.06); }
.svc-card-img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,16,27,.42), transparent 62%); }
.svc-card-body{ display:flex; flex-direction:column; flex:1; padding:1.2rem 1.3rem 1.4rem; }
.svc-card-t{ display:block; font-family:var(--font-display); font-size:1.28rem; font-weight:700;
  line-height:1.12; color:var(--ink); margin-bottom:.5rem; }
.svc-card:hover .svc-card-t{ color:var(--brand-700); }
.svc-card-d{ display:block; font-size:.93rem; line-height:1.58; color:var(--fg-muted); margin-bottom:1.1rem; }
.svc-card-m{ display:inline-flex; align-items:center; gap:.4em; margin-top:auto;
  font-family:var(--font-display); font-size:.8rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand-700); }
.svc-card-m .ico{ width:1em; height:1em; transition:transform var(--t); }
.svc-card:hover .svc-card-m .ico{ transform:translateX(4px); }

/* Elementor parity — these grids live inside html widgets, so the widget
   wrapper must not impose a display of its own. */
body .elementor .elementor-widget.rel-wrap,
body .elementor .elementor-widget.svc-wrap{ display:block; }
body .elementor .scope-list,
body .elementor .svc-cards,
body .elementor .rel-grid{ list-style:none; }

/* A service page's FAQ block is narrower than the FAQ page's */
.faq-section .faq-list{ display:grid; gap:.7rem; }

/* ── County cards ─────────────────────────────────────────────────────────
   These share .svc-card with the services index, where the photograph is
   right. They are told apart by where they link, not by a class — the markup
   on the client's service-area page lives in their database and will not be
   re-seeded if the office has ever edited that page, so a new class would
   never reach it. Matching the href fixes what is already published. */
.svc-card[href*="/service-area/"] .svc-card-img,
.svc-card[href^="loc-"] .svc-card-img,
/* 1.9.1 briefly put a pin marker in these cards and 1.9.2 dropped the rule
   that styled it. The markup for that version is still in the database on any
   page that has been re-seeded since, so without this it renders as a bare
   unstyled icon in the card's top corner. Hidden, not re-styled, so every
   page looks the same whichever markup it happens to be holding. */
.svc-card[href*="/service-area/"] .svc-card-mark,
.svc-card[href^="loc-"] .svc-card-mark{ display:none; }

.svc-card[href*="/service-area/"],
.svc-card[href^="loc-"]{
  border-top:3px solid var(--brand);
  background:linear-gradient(180deg,var(--brand-050) 0%,#fff 58%);
}
.svc-card[href*="/service-area/"] .svc-card-body,
.svc-card[href^="loc-"] .svc-card-body{
  padding:clamp(1.5rem,1.1rem + 1vw,2rem) clamp(1.3rem,1rem + .8vw,1.7rem);
}
.svc-card[href*="/service-area/"] .svc-card-t,
.svc-card[href^="loc-"] .svc-card-t{
  font-size:clamp(1.25rem,1.05rem + .5vw,1.5rem); line-height:1.15; margin-bottom:.45rem;
}
/* The towns are the useful part of the card — somebody scanning for their own
   town should find it without squinting. */
.svc-card[href*="/service-area/"] .svc-card-d,
.svc-card[href^="loc-"] .svc-card-d{
  font-size:.93rem; line-height:1.55; color:var(--fg-muted); margin-bottom:1.1rem;
}
.svc-card[href*="/service-area/"] .svc-card-m,
.svc-card[href^="loc-"] .svc-card-m{ margin-top:auto; }
.svc-card[href*="/service-area/"]::before,
.svc-card[href^="loc-"]::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%,rgba(30,123,224,.07),transparent 70%);
  opacity:0; transition:opacity var(--t);
}
.svc-card[href*="/service-area/"]:hover::before,
.svc-card[href^="loc-"]:hover::before{ opacity:1; }

/* Seven counties in a three-column grid leaves one card stranded on its own
   row. Flex lets the last row centre, so an odd count reads as deliberate
   rather than as a layout that ran out. :has() keeps this off the services
   index, which shares .svc-cards and whose cards keep their photographs. */
.svc-cards:has(> .svc-card[href*="/service-area/"]),
.svc-cards:has(> .svc-card[href^="loc-"]){
  display:flex; flex-wrap:wrap; justify-content:center;
}
/* Four to a row, so seven counties read 4 + 3 with the short row centred.
   Letting them flex freely produced five then two, which looks like an
   accident rather than a layout. */
/* Basis has to subtract the gap or the fourth card wraps: for n per row each
   one is (100% - (n-1) * gap) / n. Guessing a round number got five cards on
   one row and two on the next. */
.svc-cards:has(> .svc-card[href*="/service-area/"]),
.svc-cards:has(> .svc-card[href^="loc-"]){ --cgap:clamp(1rem,.6rem + 1.2vw,1.7rem); gap:var(--cgap); }
.svc-cards:has(> .svc-card[href*="/service-area/"]) > .svc-card,
.svc-cards:has(> .svc-card[href^="loc-"]) > .svc-card{
  flex:0 1 calc(25% - var(--cgap) * 3 / 4); max-width:330px;
}
@media (max-width:1040px){
  .svc-cards:has(> .svc-card[href*="/service-area/"]) > .svc-card,
  .svc-cards:has(> .svc-card[href^="loc-"]) > .svc-card{
    flex:0 1 calc(33.333% - var(--cgap) * 2 / 3); max-width:none;
  }
}
@media (max-width:760px){
  .svc-cards:has(> .svc-card[href*="/service-area/"]) > .svc-card,
  .svc-cards:has(> .svc-card[href^="loc-"]) > .svc-card{ flex:0 1 calc(50% - var(--cgap) / 2); }
}
@media (max-width:520px){
  .svc-cards:has(> .svc-card[href*="/service-area/"]) > .svc-card,
  .svc-cards:has(> .svc-card[href^="loc-"]) > .svc-card{ flex:1 1 100%; }
}

/* ── 13-faq ── */
/* ═══════════════ FAQ — a designed page, not a list of boxes ═══════════════ */

.faq-layout{
  display:grid; gap:clamp(2rem, 1rem + 3vw, 4rem);
  grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  align-items:start;
}
@media (max-width:1040px){ .faq-layout{ grid-template-columns:1fr; } }

/* ── Group heading: a numbered rule rather than a bare h2 ── */
.faq-group{ position:relative; }
.faq-group + .faq-group{ margin-top:clamp(2.4rem, 1.5rem + 2.5vw, 4rem); }
.faq-group > h2,
.faq-group-title .elementor-heading-title{
  display:flex; align-items:center; gap:.7rem;
  font-size:clamp(1.35rem, 1.1rem + .8vw, 1.75rem); line-height:1.15;
  margin:0 0 1.1rem; padding-bottom:.75rem;
  border-bottom:2px solid var(--line);
}
.faq-group > h2 .ico{
  width:1.6rem; height:1.6rem; flex:none; padding:.42rem; box-sizing:content-box;
  border-radius:10px; color:var(--brand-700);
  background:var(--brand-050); border:1px solid var(--brand-200);
}

/* ── One question ── */
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:border-color var(--t), box-shadow var(--t);
  position:relative;
}
.faq-item + .faq-item{ margin-top:.65rem; }
.faq-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--brand),var(--brand-700));
  transform:scaleY(0); transform-origin:top; transition:transform var(--t);
}
.faq-item[open]{ border-color:var(--brand-200); box-shadow:var(--sh-md); }
.faq-item[open]::before{ transform:scaleY(1); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.15rem 3.4rem 1.15rem 1.4rem;
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(1.02rem, .96rem + .35vw, 1.18rem); line-height:1.3;
  transition:color var(--t-fast);
}
.faq-item summary::-webkit-details-marker,
.faq-item summary::marker{ display:none; content:""; }
.faq-item summary:hover{ color:var(--brand-700); }
/* the +/− indicator */
.faq-item summary::after{
  content:""; position:absolute; right:1.3rem; top:50%; width:13px; height:13px;
  margin-top:-6.5px;
  background:
    linear-gradient(var(--brand),var(--brand)) center/13px 2.5px no-repeat,
    linear-gradient(var(--brand),var(--brand)) center/2.5px 13px no-repeat;
  transition:transform var(--t), background-size var(--t);
}
.faq-item[open] summary::after{ transform:rotate(90deg); background-size:13px 2.5px, 0 13px; }
.faq-item .a{
  padding:0 3.4rem 1.35rem 1.4rem; color:var(--fg-muted);
  font-size:.98rem; line-height:1.72;
}
.faq-item .a p:first-child{ margin-top:0; }

/* ── Sticky help card beside the questions ── */
.faq-aside{ position:sticky; top:calc(var(--header-h) + 22px); display:grid; gap:1rem; }
@media (max-width:1040px){ .faq-aside{ position:static; } }
.faq-help{
  background:linear-gradient(160deg,var(--ink) 0%,var(--brand-800) 130%);
  border-radius:var(--radius-lg); padding:1.6rem; color:rgba(255,255,255,.84);
  box-shadow:var(--sh-lg);
}
.faq-help h3{ color:#fff; font-size:1.3rem; margin-bottom:.4em; }
.faq-help p{ font-size:.94rem; line-height:1.6; margin-bottom:1.2rem; }
.faq-help .btn{ width:100%; }
.faq-help .btn + .btn{ margin-top:.6rem; }
.faq-jump{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1.3rem 1.5rem;
}
.faq-jump h4{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate); margin-bottom:.9rem; }
.faq-jump ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.faq-jump a{
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
  color:var(--ink-600); font-size:.95rem; transition:color var(--t-fast), transform var(--t-fast);
}
.faq-jump a:hover{ color:var(--brand-700); transform:translateX(3px); }
.faq-jump .ico{ width:1em; height:1em; color:var(--brand); flex:none; }

/* ── Elementor parity: the toggle widget is the editable version ── */
body .elementor .faq-col .elementor-widget-toggle{ margin-bottom:0; }
body .elementor .elementor-toggle .elementor-toggle-item + .elementor-toggle-item{ margin-top:.65rem; }
body .elementor .elementor-toggle .elementor-tab-title{
  border-radius:var(--radius); padding:1.15rem 1.4rem;
  font-size:clamp(1.02rem, .96rem + .35vw, 1.18rem);
}
body .elementor .elementor-toggle .elementor-tab-content{ border-radius:0 0 var(--radius) var(--radius); }

/* The help card is dark, so its outline button must be the light-on-dark one
   even though the section around it is light. */
.faq-help .btn-outline-light{ --btn-bd:rgba(255,255,255,.42); --btn-fg:#fff; }
.faq-help .btn-outline-light:hover{ --btn-bd:#fff; background:rgba(255,255,255,.1); }

/* Elementor renders the aside in its own column; keep it sticky there too. */
body .elementor .elementor-column.faq-aside-col > .elementor-widget-wrap{
  position:sticky; top:calc(var(--header-h) + 22px);
}
@media (max-width:1040px){
  body .elementor .elementor-column.faq-aside-col > .elementor-widget-wrap{ position:static; }
}

/* ── 14-team ── */

/* ── About dropdown (About · Meet the Team · Careers) ─────────────────────
   A small panel under the About item, positioned against the item itself —
   unlike the Services mega-menu, which spans the header. Opens on hover and
   on :focus-within, so it is reachable from the keyboard with no script.
   Every link in it is also a `.nav a`, so the rules here cancel that
   selector's uppercase, nowrap padding and animated underline explicitly. */
.has-drop{ position:relative; display:inline-flex; align-items:center; }
.nav .has-drop > a{ display:inline-flex; align-items:center; gap:.3rem; }
.nav .has-drop > a .ico{ width:14px; height:14px; transition:transform var(--t-fast); }
.has-drop:hover > a .ico,.has-drop:focus-within > a .ico{ transform:rotate(180deg); }

.drop{
  position:absolute; top:100%; left:-.4rem; padding-top:.7rem; min-width:230px; z-index:61;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:none; }
.drop-in{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 22px 44px -16px rgba(10,16,27,.28); padding:.45rem;
  display:flex; flex-direction:column;
}
.drop-in::before{
  content:""; display:block; height:3px; margin:-.45rem -.45rem .45rem;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--brand),var(--copper));
}
.nav .drop a{
  display:block; padding:.62rem .8rem; border-radius:9px; white-space:normal;
  text-transform:none; letter-spacing:0; font-size:1rem; font-weight:700; color:var(--ink);
}
.nav .drop a::after{ content:none; }
.nav .drop a:hover{ background:var(--brand-050); color:var(--brand-700); }
@media (max-width:1100px){
  .has-drop .drop{ display:none; }
  .nav .has-drop > a .ico{ display:none; }
}

/* Drawer: About's children sit under it, smaller and indented, so the
   drawer still reads as seven big items. */
.drawer nav .drawer-sub{
  display:flex; flex-direction:column; padding:.2rem 0 .5rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.drawer nav .drawer-sub a{
  font-size:clamp(1.05rem,4.4vw,1.3rem); text-transform:none; letter-spacing:0;
  font-weight:600; color:rgba(255,255,255,.82); border-bottom:0; padding:.32em 0;
  justify-content:flex-start; gap:.5rem;
}
.drawer nav .drawer-sub a::before{ content:"—"; color:var(--brand-300); }
.drawer nav a:has(+ .drawer-sub){ border-bottom:0; }

/* ── Meet the Team ────────────────────────────────────────────────────────
   Flex rather than grid so one, two or seven people all sit centred: the
   office adds people over time, and an auto-fill grid with one card in it
   leaves that card stranded at the left edge. */
.team-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.2rem,.8rem + 1.4vw,2rem); margin-top:clamp(1.6rem,1rem + 2vw,2.8rem);
}
.team-card{
  flex:0 1 290px; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--sh-sm, 0 6px 18px -10px rgba(10,16,27,.18));
  transition:box-shadow var(--t), transform var(--t);
}
.team-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }
.team-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--brand-050); position:relative; }
.team-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.team-initials{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; letter-spacing:.02em;
  font-size:clamp(3.4rem,2.6rem + 3vw,4.8rem); color:#fff;
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(160deg,var(--brand) 0%,var(--brand-800) 100%);
}
.team-body{ padding:1.25rem 1.35rem 1.45rem; display:flex; flex-direction:column; gap:.45rem; }
.team-name{ font-size:1.45rem; line-height:1.1; margin:0; }
.team-role{
  margin:0; font-family:var(--font-display); font-weight:700; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-700);
}
.team-cred{
  align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .65rem; border-radius:999px; background:var(--copper-050);
  color:var(--copper-600); font-size:.8rem; font-weight:700; line-height:1.2;
}
.team-cred .ico{ width:14px; height:14px; }
.team-bio{ margin:.2rem 0 0; color:var(--fg-muted); font-size:.95rem; line-height:1.55; }
.tp-empty-note{
  text-align:center; padding:1.2rem; border:1.5px dashed var(--line); border-radius:var(--radius);
  color:var(--fg-muted); max-width:560px; margin:2rem auto 0;
}
@media (max-width:640px){
  .team-card{ flex-basis:100%; max-width:380px; }
}
@media (min-width:2000px){
  .team-card{ flex-basis:340px; }
}

/* ── Careers ──────────────────────────────────────────────────────────── */
.role-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,.6rem + 1.2vw,1.8rem); margin-top:clamp(1.6rem,1rem + 2vw,2.6rem);
}
.role-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.4rem,1rem + 1vw,2rem); position:relative; overflow:hidden;
}
.role-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--copper));
}
.role-ic{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--brand-050); color:var(--brand-700); margin-bottom:1rem;
}
.role-ic .ico{ width:24px; height:24px; }
.role-card h3{ font-size:1.35rem; margin:0 0 .45rem; }
.role-card p{ margin:0; color:var(--fg-muted); line-height:1.6; }
@media (max-width:1024px){ .role-grid{ grid-template-columns:1fr; max-width:620px; margin-inline:auto; } }

.job-card .pm-form-host{ min-height:2rem; }
.job-note{
  margin:0; padding:1rem 1.1rem; border:1.5px dashed var(--line); border-radius:10px;
  color:var(--fg-muted); font-size:.92rem;
}
.job-alt{
  margin:1.4rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.92rem; color:var(--fg-muted);
}
.job-alt a{ color:var(--brand-700); font-weight:700; white-space:nowrap; }