@charset "UTF-8";
:root{
    /* Light theme. Both brand colours are sampled from the logo artwork:
       red #B6000E hits 7:1 on white and navy #021129 hits 18.8:1, so unlike the
       dark build one red serves as both fill and text — no lightened tint needed. */
    --bg:#FFFFFF;
    --surface:#F5F6F8;
    --surface-2:#ECEEF2;
    --muted:#C7CDD6;
    --line:#E2E5EA;
    --brand:#B6000E;
    --brand-dk:#8E000B;
    --brand-soft:#FDEDEE;
    --navy:#021129;
    --navy-2:#0A1E3C;
    --yellow:#F2C230;
    --text:#021129;
    --text-dim:#5B6472;
    /* on the navy bands the light-theme text tokens invert */
    --on-navy:#F2F4F8;
    --on-navy-dim:#A9B4C6;
    --ease:cubic-bezier(.16,1,.3,1);
    /* accent red resolved per context: the deep logo red is 7:1 on white but only
       2.7:1 on navy, so the navy bands swap in the bright tint */
    --brand-lt:var(--brand);
  }
  /* the two dark anchor bands (emergency + footer) flip the text tokens locally,
     so every child rule keeps working without a parallel set of selectors */
  .on-navy{
    --text:var(--on-navy); --text-dim:var(--on-navy-dim);
    --line:rgba(255,255,255,.14); --surface-2:rgba(255,255,255,.06);
    --brand-lt:#FF2A36;
    color:var(--text);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Google Sans',system-ui,sans-serif;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:0.001ms !important;}
  }

  /* ---- SCROLL REVEAL (fades sections/groups in once, on first view) ---- */
  [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
  [data-reveal].in-view{opacity:1; transform:translateY(0);}
  [data-reveal-group] > *{opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  [data-reveal-group].in-view > *{opacity:1; transform:translateY(0);}
  [data-reveal-group] > *:nth-child(1){transition-delay:0ms;}
  [data-reveal-group] > *:nth-child(2){transition-delay:90ms;}
  [data-reveal-group] > *:nth-child(3){transition-delay:180ms;}
  [data-reveal-group] > *:nth-child(4){transition-delay:270ms;}
  [data-reveal-group] > *:nth-child(5){transition-delay:360ms;}
  [data-reveal-group] > *:nth-child(6){transition-delay:450ms;}
  [data-reveal-group] > *:nth-child(7){transition-delay:540ms;}
  [data-reveal-group] > *:nth-child(8){transition-delay:630ms;}
  a{color:inherit; text-decoration:none;}
  .display{font-family:'Bebas Neue',sans-serif; letter-spacing:0.02em;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  ::selection{background:var(--brand); color:#fff;}
  :focus-visible{outline:2px solid var(--brand); outline-offset:3px;}

  /* ---- Signature element: fixed pressure gauge rail ---- */
  .gauge-rail{
    position:fixed; left:0; top:0; bottom:0; width:46px;
    background:var(--surface); border-right:1px solid var(--line);
    z-index:500; display:flex; flex-direction:column; align-items:center;
    padding:16px 0;
  }
  .gauge-rail .cap{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.15em; color:var(--text-dim); writing-mode:vertical-rl;}
  .gauge-track{position:relative; flex:1; width:3px; background:var(--line); margin:14px 0; border-radius:2px; overflow:hidden;}
  .gauge-fill{position:absolute; bottom:0; left:0; width:100%; height:0%; background:linear-gradient(180deg,var(--yellow),var(--brand-lt)); transition:height .05s linear;}
  .gauge-rail .psi{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--brand-lt); letter-spacing:.1em;}
  @media (max-width:720px){ .gauge-rail{width:28px;} .gauge-rail .cap{font-size:8px;} .gauge-rail .psi{font-size:8px;} }

  main{margin-left:46px;}
  @media (max-width:720px){ main{margin-left:28px;} }

  section{position:relative;}

  /* ---- NAV (fixed; solid from the top now the hero is light, lifts on scroll) ---- */
  nav{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 32px; position:fixed; top:0; left:46px; right:0; z-index:600;
    background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:background 300ms ease-out, box-shadow 300ms ease-out;
  }
  nav.scrolled{background:rgba(255,255,255,.97); box-shadow:0 1px 16px rgba(2,17,41,.07);}
  @media (max-width:720px){ nav{left:28px;} }
  /* light nav means the navy-on-white logo art sits directly on the bar — the
     white containment chip the dark build needed is now redundant */
  .brand{display:flex; align-items:center;}
  .brand img{display:block; height:44px; width:auto;}
  .navlinks{display:flex; gap:28px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;}
  .navlinks a{transition:color 160ms ease-out;}
  .navlinks a:hover{color:var(--brand-lt);}
  .nav-actions{display:flex; align-items:center; gap:18px;}
  .callbtn{border:1px solid var(--brand-lt); color:var(--brand-lt); padding:8px 16px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; transition:background 160ms ease-out, color 160ms ease-out;}
  .callbtn:hover{background:var(--brand); color:#fff;}

  /* ---- MOBILE MENU TOGGLE (animated hamburger -> X) ---- */
  .menu-toggle{
    display:none; position:relative; width:30px; height:22px;
    background:none; border:none; padding:0; cursor:pointer; flex:none;
  }
  .menu-toggle span{
    position:absolute; left:0; width:100%; height:2px; background:var(--text);
    transition:transform 320ms var(--ease), opacity 200ms var(--ease), background 200ms ease-out;
  }
  .menu-toggle span:nth-child(1){top:0;}
  .menu-toggle span:nth-child(2){top:10px;}
  .menu-toggle span:nth-child(3){top:20px;}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){top:10px; transform:rotate(45deg); background:var(--brand-lt);}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0; transform:translateX(-8px);}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){top:10px; transform:rotate(-45deg); background:var(--brand-lt);}

  /* ---- MOBILE MENU PANEL ---- */
  .menu-scrim{
    position:fixed; inset:0; background:rgba(2,17,41,.55); backdrop-filter:blur(2px);
    z-index:550; opacity:0; visibility:hidden; transition:opacity 320ms var(--ease);
  }
  .menu-scrim.open{opacity:1; visibility:visible;}
  .mobile-menu{
    position:fixed; top:0; right:0; bottom:0; width:min(84vw,380px);
    background:var(--surface); border-left:1px solid var(--line);
    z-index:560; display:flex; flex-direction:column; justify-content:center; gap:8px;
    padding:32px; transform:translateX(100%); visibility:hidden;
    transition:transform 420ms var(--ease), visibility 0s linear 420ms;
  }
  .mobile-menu.open{transform:translateX(0); visibility:visible; transition:transform 420ms var(--ease);}
  .mm-links{display:flex; flex-direction:column;}
  .mm-links a{
    font-family:'Bebas Neue'; font-size:clamp(28px,8vw,42px); text-transform:uppercase;
    padding:14px 0; border-bottom:1px solid var(--line);
    opacity:0; transform:translateX(24px);
    transition:opacity .4s var(--ease), transform .4s var(--ease), color 160ms ease-out;
  }
  .mobile-menu.open .mm-links a{opacity:1; transform:translateX(0);}
  .mm-links a:nth-child(1){transition-delay:80ms;}
  .mm-links a:nth-child(2){transition-delay:140ms;}
  .mm-links a:nth-child(3){transition-delay:200ms;}
  .mm-links a:nth-child(4){transition-delay:260ms;}
  .mm-links a:nth-child(5){transition-delay:320ms;}
  .mm-links a:hover{color:var(--brand-lt);}
  .mm-call{
    margin-top:24px; background:var(--brand); color:#fff;
    padding:18px 20px; display:flex; flex-direction:column; gap:4px;
    opacity:0; transform:translateY(16px);
    transition:opacity .4s var(--ease) 320ms, transform .4s var(--ease) 320ms, background 160ms ease-out;
  }
  .mobile-menu.open .mm-call{opacity:1; transform:translateY(0);}
  .mm-call:hover{background:var(--brand-dk);}
  .mm-call-label{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.15em; text-transform:uppercase;}
  .mm-call-num{font-family:'Bebas Neue'; font-size:24px;}
  body.menu-open{overflow:hidden;}

  @media (max-width:820px){
    .navlinks{display:none;}
    .menu-toggle{display:block;}
  }
  @media (max-width:480px){
    nav{padding:18px 20px;}
    .brand{padding:7px 11px;}
    .brand img{height:32px;}
    .callbtn{padding:7px 12px; font-size:11px;}
    .nav-actions{gap:14px;}
  }

  /* ---- HERO (light split: copy on paper, image as a contained panel) ---- */
  .hero{
    border-bottom:1px solid var(--line);
    display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
    padding-top:82px;
  }
  .hero-main{
    position:relative; display:flex; flex-direction:column; justify-content:center;
    padding:72px 44px 78px 32px; min-height:min(78vh,700px);
  }
  .hero-media{
    position:relative; margin:24px 32px 24px 0; border-radius:16px; overflow:hidden;
    background:var(--surface);
  }
  .hero-media img{width:100%; height:100%; object-fit:cover; display:block;}
  /* red keyline anchors the photo to the brand without tinting the image */
  .hero-media::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--brand);
  }
  @media (max-width:900px){
    .hero{grid-template-columns:1fr; padding-top:74px;}
    .hero-main{padding:52px 24px 34px; min-height:0;}
    .hero-media{margin:0 24px 32px; aspect-ratio:16/10;}
  }
  /* Desktop: hold the panel to the photos' own landscape ratio.
     Stretching it to the full hero height made it near-square (~652x652), so
     object-fit:cover cropped the sides off wide workshop scenes — the packaged
     photos are 3:2 and 1.88:1. Matching 3:2 and centring in the column shows
     the frame that was actually shot instead of a tall crop out of its middle.
     Mobile keeps its 16:10 panel above. */
  @media (min-width:901px){
    /* The scrolling strip is pinned to the bottom of the first screen: the hero
       takes the viewport less the fixed nav (82px) and the strip itself.
       The strip's height is pinned rather than left to its content because its
       Bebas face is fluid — clamp(22px,4vw,40px) makes it 72px at 901w and 77px
       at 1000w and above. Subtracting a fixed guess against a fluid height
       would leave a white sliver under it at the narrow end.
       svh, not vh, so collapsing browser chrome cannot push the strip out of
       frame; the vh line is the fallback for anything that lacks svh. */
    :root{--marquee-h:78px;}
    .hero + .marquee-wrap{
      height:var(--marquee-h); padding:0;
      display:flex; align-items:center;
    }
    .hero-main{
      min-height:calc(100vh - 82px - var(--marquee-h));
      min-height:calc(100svh - 82px - var(--marquee-h));
      padding-block:56px;
    }
    /* Panel holds the photos' own landscape ratio; see the note above. */
    .hero-media{aspect-ratio:3/2; align-self:center; margin-block:0;}
  }
  .eyebrow{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.2em; color:var(--brand); text-transform:uppercase; margin-bottom:18px;}
  /* split hero gets ~half the width the full-bleed dark hero had, so the
     display size steps down to keep the CTAs above the fold.
     Sized so each heading field renders as ONE line (two lines total) — the
     longest packaged line is ~25ch of Bebas, so no ch cap and a smaller clamp. */
  .hero h1{
    font-family:'Bebas Neue'; font-weight:400;
    font-size:clamp(24px, 11.2vw - 10.5px, 60px); line-height:1.04; letter-spacing:.01em;
    text-transform:uppercase; white-space:nowrap;
  }
  /* Sized so each heading field renders as ONE line: the longest packaged line
     (25ch of Bebas) needs ~8.9px of width per 1px of font-size, measured
     against the copy column at each layout. Headings much longer than ~25ch
     will clip — trim the copy, not this rule. */
  @media (min-width:901px){ .hero h1{font-size:min(66px, calc(5.7vw - 9px));} }
  .hero h1 em{font-style:normal; color:var(--brand-lt);}
  .hero-sub{max-width:520px; margin-top:22px; font-size:16px; color:var(--text-dim); line-height:1.6;}
  .hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
  .btn-primary{background:var(--brand); color:#fff; padding:15px 26px; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; transition:background 160ms ease-out;}
  .btn-primary:hover{background:var(--brand-dk);}
  .btn-ghost{border:1px solid var(--line); color:var(--text); padding:15px 26px; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; transition:border-color 160ms ease-out, background 160ms ease-out;}
  .btn-ghost:hover{border-color:var(--navy); background:var(--surface);}

  @keyframes riseIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
  .hero-main .eyebrow{animation:riseIn .9s var(--ease) both;}
  .hero-main h1{animation:riseIn 1s var(--ease) .12s both;}
  .hero-main .hero-sub{animation:riseIn 1s var(--ease) .24s both;}
  .hero-main .hero-cta{animation:riseIn 1s var(--ease) .36s both;}

  /* ---- MARQUEE ---- */
  .marquee-wrap{
    background:var(--brand); color:#fff; overflow:hidden;
    border-bottom:1px solid var(--line); padding:14px 0;
  }
  .marquee{display:flex; width:max-content; animation:scroll 26s linear infinite;}
  .marquee span{
    font-family:'Bebas Neue'; font-size:clamp(22px,4vw,40px);
    letter-spacing:.03em; padding:0 28px; white-space:nowrap; text-transform:uppercase;
  }
  .marquee span::after{content:'◆'; margin-left:28px; font-size:16px; vertical-align:middle;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* brand-partner strip: same marquee, quiet grey beat so it reads as a second voice */
  .marquee-wrap.brands{background:var(--surface); color:var(--text); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0;}
  .marquee-wrap.brands .marquee{animation-duration:44s;}
  .marquee-wrap.brands span{font-size:clamp(16px,2.4vw,26px); color:var(--text-dim);}
  .marquee-wrap.brands span::after{color:var(--brand-lt); font-size:11px;}

  /* ---- CAPABILITIES (native <details> accordion — no JS) ---- */
  .caps{padding:0 32px; margin-top:10px; border-top:1px solid var(--line);}
  details.cap{border-bottom:1px solid var(--line);}
  details.cap summary{
    display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:22px;
    padding:24px 22px 24px 26px; cursor:pointer; list-style:none; position:relative;
    transition:background 200ms ease-out;
  }
  details.cap summary::-webkit-details-marker{display:none;}
  details.cap summary::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--brand-lt); transform:scaleY(0); transform-origin:top;
    transition:transform 320ms var(--ease);
  }
  details.cap[open] summary::before, details.cap summary:hover::before{transform:scaleY(1);}
  details.cap summary:hover{background:var(--surface-2);}
  details.cap[open] summary{background:var(--surface);}
  .cap-code{font-family:'IBM Plex Mono'; font-size:12px; color:var(--brand-lt);}
  .cap-title{font-family:'Bebas Neue'; font-size:clamp(20px,2.6vw,28px); text-transform:uppercase; letter-spacing:.02em;}
  .cap-meta{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim);}
  .cap-mark{position:relative; width:16px; height:16px; flex:none;}
  .cap-mark::before, .cap-mark::after{
    content:''; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--text-dim);
    transition:transform 320ms var(--ease), background 200ms ease-out;
  }
  .cap-mark::after{transform:rotate(90deg);}
  details.cap[open] .cap-mark::before, .cap[open] .cap-mark::after{background:var(--brand-lt);}
  details.cap[open] .cap-mark::after{transform:rotate(180deg);}
  .cap-body{padding:4px 26px 34px 26px; max-width:900px; animation:riseIn .5s var(--ease) both;}
  .cap-body p{font-size:14px; color:var(--text-dim); line-height:1.7;}
  .cap-list{list-style:none; margin-top:18px; display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px;}
  .cap-list li{
    font-size:13px; color:var(--text); padding:10px 0 10px 20px;
    border-bottom:1px solid var(--line); position:relative;
  }
  .cap-list li::before{content:'/'; position:absolute; left:0; color:var(--brand-lt); font-family:'IBM Plex Mono'; font-size:12px;}
  .cap-specs{display:grid; grid-template-columns:repeat(4,1fr); margin-top:20px; border-top:1px solid var(--line);}
  .cap-specs div{padding:14px 14px 14px 0; border-right:1px solid var(--line);}
  .cap-specs div:last-child{border-right:none;}
  .cap-specs span{display:block; font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);}
  .cap-specs strong{display:block; font-family:'Bebas Neue'; font-weight:400; font-size:26px; color:var(--brand); margin-top:4px;}
  .cap-note{margin-top:18px; font-size:12px; font-style:italic;}
  .caps-cta{
    display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
    margin:0 32px; padding:38px 0 70px;
  }
  .caps-cta h3{font-family:'Bebas Neue'; font-weight:400; font-size:clamp(24px,3.4vw,42px); text-transform:uppercase; line-height:1.05; max-width:640px;}
  @media (max-width:820px){
    details.cap summary{grid-template-columns:1fr auto; gap:6px 16px; padding:20px 16px 20px 20px;}
    .cap-code{grid-column:1; font-size:11px;}
    .cap-mark{grid-column:2; grid-row:1/3;}
    .cap-title{grid-column:1;}
    .cap-meta{display:none;}
    .cap-body{padding:4px 20px 28px;}
    .cap-list{grid-template-columns:1fr;}
    .cap-specs{grid-template-columns:repeat(2,1fr);}
    .cap-specs div{border-bottom:1px solid var(--line);}
    .caps, .caps-cta{margin-inline:0; padding-inline:20px;}
  }

  /* ---- ABOUT (image | copy, the opener the reference leads with) ---- */
  .about{
    display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:stretch;
    padding:64px 32px 60px; border-bottom:1px solid var(--line);
  }
  /* ponytail: stretch makes the media column inherit the copy's height, so both
     columns end on the same line without hard-coding a height anywhere. */
  .about-media{border-radius:16px; overflow:hidden; position:relative; background:var(--surface);}
  .about-media img{width:100%; height:100%; object-fit:cover; display:block;}
  .about-media::after{content:''; position:absolute; inset:auto 0 0 0; height:5px; background:var(--brand);}
  .sec-tag-h{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.2em; color:var(--brand); text-transform:uppercase;}
  .about-copy h2{font-family:'Bebas Neue'; font-size:clamp(30px,3.6vw,50px); text-transform:uppercase; line-height:1.02; margin-top:10px;}
  .about-copy p{color:var(--text-dim); font-size:15px; line-height:1.7; margin-top:14px; max-width:62ch;}
  .about-marks{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:26px; border-top:1px solid var(--line);}
  .am{padding:16px 16px 0 0;}
  .am strong{display:block; font-family:'Bebas Neue'; font-weight:400; font-size:24px; text-transform:uppercase; color:var(--brand);}
  .am span{display:block; font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); margin-top:4px;}
  @media (max-width:900px){
    .about{grid-template-columns:1fr; gap:28px; padding:52px 24px 48px;}
    .about-media img{aspect-ratio:16/10;}
  }
  @media (max-width:560px){ .about-marks{grid-template-columns:1fr; gap:0;} .am{padding:14px 0; border-bottom:1px solid var(--line);} }

  /* ---- SECTION HEADER W/ VERTICAL LABEL ---- */
  .sec-head{display:flex; gap:22px; align-items:flex-end; padding:70px 32px 34px; border-bottom:1px solid var(--line);}
  .sec-tag{
    writing-mode:vertical-rl; font-family:'IBM Plex Mono'; font-size:11px;
    letter-spacing:.2em; color:var(--text-dim); text-transform:uppercase; padding-bottom:4px;
  }
  .sec-head h2{font-family:'Bebas Neue'; font-size:clamp(34px,5vw,64px); text-transform:uppercase; line-height:1;}
  .sec-head p{max-width:420px; color:var(--text-dim); font-size:14px; margin-left:auto; padding-bottom:6px;}
  @media (max-width:720px){ .sec-head{flex-wrap:wrap;} .sec-head p{margin-left:0;} }

  /* ---- SERVICES (spec-sheet cards) ---- */
  .services{padding:0 32px 60px;}
  .svc-grid{display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--line); border-top:1px solid var(--line);}
  .svc-card{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 22px; min-height:260px; display:flex; flex-direction:column; justify-content:space-between; transition:background .2s;}
  .svc-card:hover{background:var(--surface-2);}
  .svc-code{font-family:'IBM Plex Mono'; font-size:12px; color:var(--brand-lt);}
  .svc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}

  /* ---- Service card media ----
     Photo sits above the copy; the icon chip straddles the image's bottom edge
     (bottom:-24px) so the two layers overlap instead of stacking. .svc-body
     carries the matching top margin so the chip never lands on the heading. */
  .svc-card.has-media{padding:20px 20px 26px;}
  /* .svc-frame clips (so the zoom stays inside the rounded corners) and
     .svc-media does not (so the chip can hang past the bottom edge). One
     element cannot do both. */
  .svc-media{position:relative; margin:0; aspect-ratio:16/10;}
  .svc-frame{
    position:absolute; inset:0; display:block; border-radius:6px;
    overflow:hidden; background:var(--surface-2);
  }
  .svc-img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,.61,.36,1);}
  .svc-card:hover .svc-img{transform:scale(1.06);}
  /* Scrim: the code sits on a photo, so contrast cannot be left to chance. */
  .svc-frame::after{
    content:''; position:absolute; inset:0 0 auto; height:96px;
    background:linear-gradient(to bottom, rgba(11,18,32,.62), rgba(11,18,32,0));
    pointer-events:none;
  }
  .svc-media .svc-code{
    position:absolute; top:14px; left:14px; z-index:2; color:#fff;
    letter-spacing:.08em; text-shadow:0 1px 3px rgba(0,0,0,.45);
  }
  .svc-media .svc-icon{
    position:absolute; left:14px; bottom:-24px; z-index:2;
    background:#fff; box-shadow:0 6px 18px rgba(11,18,32,.16);
  }
  .svc-card.has-media .svc-body{margin-top:38px;}
  .svc-card.has-media h3{margin-top:0;}

  /* ---- Animated service icons ----
     Stroke SVGs from inc/icons.php. Parts tagged a-* animate on card hover;
     pivots are inlined per element (gear centres, gauge hub), so transforms
     resolve against the viewBox rather than each part's own bounding box. */
  .svc-icon{
    width:60px; height:60px; flex:none; display:grid; place-items:center;
    background:var(--brand-soft); border-radius:14px; color:var(--brand);
    transition:background .25s ease-out, color .25s ease-out, transform .25s ease-out;
  }
  .svc-icon svg{width:36px; height:36px; display:block;}
  .svc-card:hover .svc-icon{background:var(--brand); color:#fff; transform:scale(1.08);}
  .svc-icon [class^="a-"]{transform-box:view-box;}
  .svc-card:hover .a-spin-slow{animation:svcSpin 7s linear infinite;}
  .svc-card:hover .a-blink{animation:svcBlink 1s steps(2,end) infinite;}
  .svc-card:hover .a-spin{animation:svcSpin 2.6s linear infinite;}
  .svc-card:hover .a-spin-rev{animation:svcSpin 2.6s linear infinite reverse;}
  .svc-card:hover .a-dash-spin{animation:svcSpin 6s linear infinite;}
  .svc-card:hover .a-rock{animation:svcRock 1.1s ease-in-out infinite;}
  .svc-card:hover .a-peek{animation:svcPeek 1.6s ease-in-out infinite;}
  .svc-card:hover .a-needle{animation:svcNeedle 1.5s ease-in-out infinite;}
  .svc-card:hover .a-piston{animation:svcPiston 1.4s ease-in-out infinite;}
  .svc-card:hover .a-shift{animation:svcShift 1.2s ease-in-out infinite alternate;}
  .svc-card:hover .a-pulse{animation:svcPulse 1.2s ease-in-out infinite;}
  .svc-card:hover .a-scanline{animation:svcScan 1.5s ease-in-out infinite;}
  .svc-card .a-draw{stroke-dasharray:32; stroke-dashoffset:0;}
  .svc-card:hover .a-draw{animation:svcDraw .8s ease-out both;}
  /* flow overlay: chip-coloured dashes punch moving gaps in the solid path under them */
  .svc-card .a-flow{opacity:0; stroke:var(--brand-soft);}
  .svc-card:hover .a-flow{opacity:1; stroke:var(--brand); animation:svcFlow 1s linear infinite;}
  @keyframes svcSpin{to{transform:rotate(360deg);}}
  @keyframes svcRock{0%,100%{transform:rotate(-14deg);} 50%{transform:rotate(14deg);}}
  @keyframes svcPeek{0%,100%{transform:translate(0,0);} 33%{transform:translate(3px,2px);} 66%{transform:translate(-2px,3px);}}
  @keyframes svcNeedle{0%,100%{transform:rotate(-55deg);} 55%{transform:rotate(62deg);} 75%{transform:rotate(48deg);}}
  @keyframes svcPiston{0%,100%{transform:translateX(0);} 50%{transform:translateX(-5px);}}
  @keyframes svcShift{to{transform:translateY(var(--d,8px));}}
  @keyframes svcPulse{50%{transform:scale(1.5);}}
  @keyframes svcScan{0%,100%{transform:translateY(0);} 50%{transform:translateY(20px);}}
  @keyframes svcDraw{from{stroke-dashoffset:32;} to{stroke-dashoffset:0;}}
  @keyframes svcFlow{to{stroke-dashoffset:-22;}}
  @keyframes svcBlink{50%{opacity:.25;}}
  @media (prefers-reduced-motion:reduce){
    .svc-card:hover .svc-icon *{animation:none;}
    .svc-img, .svc-card:hover .svc-img{transition:none; transform:none;}
  }
  .svc-card h3{font-family:'Bebas Neue'; font-size:26px; text-transform:uppercase; margin-top:34px; letter-spacing:.02em;}
  .svc-card p{font-size:13px; color:var(--text-dim); margin-top:10px; line-height:1.55;}
  .svc-spec{font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-dim); border-top:1px solid var(--line); padding-top:12px; margin-top:16px; display:flex; justify-content:space-between;}
  @media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .svc-grid{grid-template-columns:1fr;} .svc-media{aspect-ratio:16/9;} }

  /* ---- PROCESS ---- */
  .process{padding:0 32px 70px;}
  .proc-track{display:flex; position:relative; border-top:1px solid var(--line); margin-top:10px;}
  .proc-track::before{content:''; position:absolute; top:0; left:0; right:0; height:1px;}
  .proc-step{flex:1; padding:34px 20px; border-right:1px solid var(--line); position:relative;}
  .proc-step:last-child{border-right:none;}
  .proc-num{font-family:'Bebas Neue'; font-size:54px; color:var(--muted); line-height:1;}
  .proc-step h4{font-family:'Bebas Neue'; font-size:22px; text-transform:uppercase; margin-top:14px;}
  .proc-step p{font-size:13px; color:var(--text-dim); margin-top:8px; line-height:1.55;}
  @media (max-width:820px){ .proc-track{flex-direction:column;} .proc-step{border-right:none; border-bottom:1px solid var(--line);} }

  /* ---- EMERGENCY BAND ---- */
  .emergency{
    display:grid; grid-template-columns:1.3fr 1fr;
    background:var(--navy);
  }
  .em-left{padding:60px 32px; display:flex; flex-direction:column; justify-content:center;}
  .em-left .eyebrow{color:var(--brand-lt);}
  .em-left h2{font-family:'Bebas Neue'; font-size:clamp(32px,5vw,58px); text-transform:uppercase; line-height:1;}
  .em-left p{color:var(--text-dim); max-width:460px; margin-top:16px; font-size:15px; line-height:1.6;}
  /* Matches the footer's call link: same body face, same weight, same icon.
     It was IBM Plex Mono at .03em tracking, and a monospace advance width puts
     a full character cell around every digit and space — which is what made the
     number read as far too loosely set next to everything else on the site. */
  .em-phone{
    display:inline-flex; align-items:center; gap:12px; margin-top:26px;
    font-size:clamp(24px,3.2vw,34px); font-weight:600; letter-spacing:.01em;
    color:var(--yellow); transition:color 160ms ease-out;
    /* .em-left is a flex column, which blockifies inline-flex to flex and
       stretched the anchor across the full column — a 715px click target for a
       220px number. fit-content pins the box to the content in either layout. */
    width:fit-content;
  }
  .em-phone svg{width:26px; height:26px; flex:none;}
  .em-phone:hover{color:#fff;}
  .em-right{position:relative; min-height:280px;
    background:linear-gradient(180deg, rgba(2,17,41,.15), rgba(2,17,41,.85)), url('../images/cylinders-lineup.webp') center/cover;
  }
  @media (max-width:820px){ .emergency{grid-template-columns:1fr;} }

  /* ---- STATS ---- */
  .stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .stat{padding:44px 24px; border-right:1px solid var(--line); text-align:left;}
  .stat:last-child{border-right:none;}
  .stat .num{font-family:'Bebas Neue'; font-size:clamp(38px,5vw,64px); color:var(--brand-lt); line-height:1;}
  .stat .lbl{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; color:var(--text-dim); text-transform:uppercase; margin-top:8px;}
  @media (max-width:820px){ .stats{grid-template-columns:repeat(2,1fr);} .stat{border-bottom:1px solid var(--line);} }

  /* ---- GALLERY (masonry via CSS columns — each photo keeps its own aspect ratio) ---- */
  .gallery{padding:0 32px 80px;}
  .gal-grid{column-count:4; column-gap:10px; margin-top:10px;}
  /* Now a <button> so the viewer is keyboard-reachable; strip the UA chrome and
     restore the block behaviour the CSS-columns masonry depends on. */
  .gal-item{
    overflow:hidden; break-inside:avoid; margin-bottom:10px;
    display:block; width:100%; padding:0; border:0; background:none;
    font:inherit; color:inherit; cursor:zoom-in; text-align:left;
  }
  .gal-item:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}
  /* every source photo is 3:2, so masonry needs the stagger authored in —
     without varied aspect-ratios the columns render as a flat grid */
  .gal-grid img{width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover; filter:grayscale(15%) contrast(1.05); transition:transform 550ms var(--ease), filter 550ms ease-out;}
  .gal-item:nth-child(3n+2) img{aspect-ratio:3/4;}
  .gal-item:nth-child(4n+4) img{aspect-ratio:1/1;}
  @media (hover:hover) and (pointer:fine){
    .gal-item:hover img{transform:scale(1.06); filter:grayscale(0%) contrast(1.05);}
  }
  @media (max-width:900px){ .gal-grid{column-count:3;} }
  @media (max-width:640px){ .gal-grid{column-count:2;} }

  /* ---- LIGHTBOX (native <dialog>; no library) ---- */
  dialog.lightbox{
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    margin:0; padding:0; border:0; background:transparent; overflow:hidden;
    display:none; place-items:center; grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(8px,2vw,28px);
  }
  dialog.lightbox[open]{display:grid;}
  dialog.lightbox::backdrop{background:rgba(2,17,41,.92); backdrop-filter:blur(6px);}
  .lb-frame{
    grid-column:2; display:flex; flex-direction:column; align-items:center; gap:14px;
    max-height:100dvh; padding:clamp(48px,7vh,80px) 0;
  }
  .lb-frame img{
    max-width:100%; max-height:calc(100dvh - 170px);
    width:auto; height:auto; object-fit:contain; display:block; border-radius:10px;
    background:var(--navy-2);
  }
  .lb-meta{
    font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--on-navy-dim); text-align:center; max-width:60ch; line-height:1.6;
  }
  .lb-meta #lbCount{color:var(--brand-lt); margin-right:10px;}
  .lb-close, .lb-nav{
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
    color:var(--on-navy); border-radius:50%; cursor:pointer;
    display:grid; place-items:center; flex:none;
    transition:background 160ms ease-out, border-color 160ms ease-out;
  }
  .lb-close:hover, .lb-nav:hover{background:var(--brand); border-color:var(--brand);}
  .lb-close:focus-visible, .lb-nav:focus-visible{outline:2px solid #fff; outline-offset:2px;}
  .lb-nav{width:clamp(40px,5vw,52px); height:clamp(40px,5vw,52px);}
  .lb-nav svg{width:22px; height:22px;}
  .lb-prev{grid-column:1; margin-left:clamp(8px,2vw,24px);}
  .lb-next{grid-column:3; margin-right:clamp(8px,2vw,24px);}
  .lb-close{
    position:absolute; top:18px; right:18px; z-index:2;
    width:42px; height:42px;
  }
  .lb-close svg{width:18px; height:18px;}
  /* Below 640px the side arrows would crowd the photo off the screen, so they
     drop to the bottom edge and the image takes the full width. */
  @media (max-width:640px){
    dialog.lightbox{grid-template-columns:1fr; gap:0;}
    .lb-frame{grid-column:1; padding:64px 12px 92px;}
    .lb-frame img{max-height:calc(100dvh - 200px);}
    /* Same safe-area reasoning as the WhatsApp button: these sit at the very
       bottom edge, which is where phone chrome lives. */
    .lb-nav{position:absolute; bottom:calc(22px + env(safe-area-inset-bottom, 0px));}
    .lb-prev{left:calc(50% - 62px); margin:0;}
    .lb-next{right:calc(50% - 62px); margin:0;}
  }

  /* ---- FOOTER ---- */
  footer{
    background:var(--navy);
    --footer-bg-img:url('../images/pump-parts-flatlay.webp');
  }
  .footer-main{
    display:grid; grid-template-columns:1.2fr 1fr 1.1fr .95fr;
    min-height:460px;
    background:
      linear-gradient(90deg, var(--navy) 0%, var(--navy) 40%, rgba(2,17,41,.94) 56%, rgba(2,17,41,.55) 80%, rgba(2,17,41,.42) 100%),
      var(--footer-bg-img) right center / cover no-repeat,
      var(--navy);
  }
  .foot-headline{display:flex; flex-direction:column; justify-content:center; padding:56px 16px 56px 32px;}
  .foot-headline h2{font-family:'Bebas Neue'; font-weight:400; font-size:clamp(46px,6vw,86px); line-height:.95; text-transform:uppercase;}
  .foot-headline h2 em{font-style:normal; color:var(--brand-lt);}
  .foot-emergency{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:56px 32px;}
  .fe-label{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.2em; color:var(--text-dim); text-transform:uppercase;}
  .fe-phone{display:inline-flex; align-items:center; gap:12px; margin-top:18px; color:var(--text); font-weight:600; font-size:clamp(17px,1.7vw,22px); letter-spacing:.02em; white-space:nowrap;}
  .fe-phone svg{width:22px; height:22px; flex:none;}
  .fe-phone:hover{color:var(--brand-lt);}
  .fe-phone-alt{margin-top:10px;}
  .foot-emergency p{margin-top:18px; font-size:13px; color:var(--text-dim); line-height:1.6; max-width:300px;}
  .foot-contact{display:flex; flex-direction:column; justify-content:center; padding:48px 40px; border-left:1px solid var(--line);}
  .fc-row{display:flex; align-items:flex-start; gap:16px; padding:18px 0;}
  .fc-icon{width:22px; height:22px; color:var(--brand-lt); flex:none; margin-top:2px;}
  .fc-label{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; transition:color 160ms ease-out;}
  .fc-desc{font-size:13px; color:var(--text-dim); margin-top:4px; line-height:1.5;}
  a.fc-mail{display:block;}
  a.fc-mail:hover{color:var(--brand-lt);}
  a.fc-row:hover .fc-label{color:var(--brand-lt);}
  .fc-arrow{margin-left:auto; align-self:center; width:36px; height:36px; flex:none; background:var(--brand-lt); color:var(--navy); display:grid; place-items:center; transition:background 160ms ease-out, transform 160ms ease-out;}
  .fc-arrow svg{width:18px; height:18px;}
  a.fc-row:hover .fc-arrow{background:var(--text);}
  @media (hover:hover) and (pointer:fine){
    a.fc-row:hover .fc-arrow{transform:translateX(3px);}
  }
  .foot-bar{display:flex; align-items:center; gap:28px; padding:24px 32px; border-top:1px solid var(--line);}
  .foot-brand{line-height:1;}
  .foot-brand img{display:block; height:38px; width:auto; background:#fff; padding:8px 13px; border-radius:5px;}
  .foot-brand .sub{font-family:'IBM Plex Mono'; font-size:8.5px; letter-spacing:.42em; color:var(--text-dim); margin-top:5px; text-transform:uppercase;}
  .foot-nav{display:flex; gap:34px; margin-inline:auto; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;}
  .foot-nav a{color:var(--text-dim);}
  .foot-nav a:hover{color:var(--brand-lt);}
  .foot-copy{font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--text-dim); text-align:right; line-height:1.7;}
  /* The floating WhatsApp button is fixed bottom-right and lands on the footer's
     right-aligned copy at full scroll, leaving the tail of the credit link
     under it and unclickable. The overlap is horizontal — roughly the last 48px
     of one line — so it is solved horizontally: inset the copy column just past
     the button's edge. Clearing it vertically instead would need ~104px of
     bottom padding, since the button occupies the lowest 80px of the viewport,
     and that reads as a large band of dead footer for no visible reason.
     Applied only when the button is actually rendered; it is conditional on the
     WhatsApp field. */
  body:has(.whatsapp-btn) .foot-copy{padding-right:64px;}
  /* Below 640px the bar becomes a centred column, so there is no right-hand
     gutter to inset into and the clearance has to be vertical after all. */
  @media (max-width:640px){
    body:has(.whatsapp-btn) .foot-copy{padding-right:0;}
    body:has(.whatsapp-btn) .foot-bar{padding-bottom:88px;}
  }
  /* Build credit sits under the copyright, a step quieter than it. */
  .foot-credit{display:block; margin-top:6px; font-size:9.5px; letter-spacing:.04em; opacity:.72;}
  .foot-credit a{border-bottom:1px solid transparent; transition:color 160ms ease-out, border-color 160ms ease-out;}
  .foot-credit a:hover{color:var(--brand-lt); border-bottom-color:currentColor;}
  @media (max-width:1000px){
    .footer-main{
      grid-template-columns:1fr 1fr;
      background:
        linear-gradient(90deg, var(--navy) 0%, rgba(2,17,41,.95) 55%, rgba(2,17,41,.78) 100%),
        var(--footer-bg-img) right center / cover no-repeat,
        var(--navy);
    }
    .foot-headline{grid-column:1/-1; padding:48px 32px 4px;}
    .foot-emergency{padding:32px;}
    .foot-contact{padding:32px 32px 40px;}
    .foot-media{display:none;}
    .foot-bar{flex-wrap:wrap; row-gap:16px;}
  }
  @media (max-width:640px){
    .footer-main{grid-template-columns:1fr;}
    .foot-contact{border-left:none; border-top:1px solid var(--line);}
    .foot-bar{flex-direction:column; text-align:center; gap:18px;}
    .foot-nav{margin:0; flex-wrap:wrap; justify-content:center; gap:12px 22px;}
    .foot-copy{text-align:center;}
  }

  /* ---- WHATSAPP STICKY BUTTON ---- */
  .whatsapp-btn{
    /* Offset by the safe-area inset, not a bare 24px. On a phone with a home
       indicator — or Safari's bottom toolbar — a flat offset drops the button
       underneath the browser chrome, where it is neither visible nor tappable.
       The 0px fallback keeps every other browser exactly where it was. */
    position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:590;
    width:56px; height:56px; border-radius:50%; background:#25D366;
    display:grid; place-items:center; box-shadow:0 8px 22px rgba(2,17,41,.22);
    transition:transform 160ms ease-out, box-shadow 160ms ease-out, opacity 200ms ease-out;
  }
  .whatsapp-btn:hover{transform:scale(1.08); box-shadow:0 10px 28px rgba(2,17,41,.3);}
  /* The panel slides in at z-index 560 and the button sits at 590, so it would
     otherwise hover over the open menu as a stray green bubble. */
  body.menu-open .whatsapp-btn{opacity:0; visibility:hidden; pointer-events:none;}
  .whatsapp-btn svg{width:30px; height:30px;}
  @media (max-width:480px){
    .whatsapp-btn{right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:50px; height:50px;}
    .whatsapp-btn svg{width:26px; height:26px;}
  }

  /* ---- LEAD CAPTURE DIALOG ---- */
  dialog.lead-dialog{
    border:1px solid var(--line); background:var(--surface); color:var(--text);
    padding:0; margin:auto; width:min(92vw,460px); max-height:88vh; overflow:auto;
    border-radius:14px;
    transition:opacity 320ms var(--ease), transform 320ms var(--ease);
    scrollbar-width:thin; scrollbar-color:var(--line) var(--surface);
  }
  dialog.lead-dialog::-webkit-scrollbar{width:8px;}
  dialog.lead-dialog::-webkit-scrollbar-track{background:var(--surface);}
  dialog.lead-dialog::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
  dialog.lead-dialog::-webkit-scrollbar-thumb:hover{background:var(--muted);}
  dialog.lead-dialog[open]{opacity:1; transform:translateY(0) scale(1);}
  @starting-style{ dialog.lead-dialog[open]{opacity:0; transform:translateY(16px) scale(.97);} }
  dialog.lead-dialog::backdrop{background:rgba(2,17,41,.55); backdrop-filter:blur(2px); transition:opacity 320ms var(--ease);}
  dialog.lead-dialog[open]::backdrop{opacity:1;}
  @starting-style{ dialog.lead-dialog[open]::backdrop{opacity:0;} }
  /* The close button is a child of the dialog now rather than of the form, so
     the dialog itself is the positioning context. */
  dialog.lead-dialog{position:relative;}
  .lead-body{padding:32px; display:flex; flex-direction:column; gap:18px;}
  /* Contact Form 7 wraps its fields in <form class="wpcf7-form">; it inherits
     the stack the old .lead-form used to provide. */
  .lead-body .wpcf7-form{display:flex; flex-direction:column; gap:18px;}
  .lead-body .wpcf7{margin:0;}
  .lead-close{
    position:absolute; top:16px; right:16px; width:32px; height:32px; z-index:2;
    background:none; border:none; border-radius:8px; color:var(--text-dim); cursor:pointer;
    display:grid; place-items:center; transition:color 160ms ease-out, background 160ms ease-out;
  }
  .lead-close:hover{color:var(--brand-lt); background:var(--surface-2);}
  .lead-close svg{width:18px; height:18px;}
  .lead-head .sec-tag{writing-mode:horizontal-tb; font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.2em; color:var(--text-dim); text-transform:uppercase;}
  .lead-head h3{font-family:'Bebas Neue'; font-weight:400; font-size:32px; text-transform:uppercase; margin-top:6px; line-height:1;}
  .lead-head p{font-size:13px; color:var(--text-dim); margin-top:8px; line-height:1.5;}
  .lead-fields{display:flex; flex-direction:column; gap:14px;}
  .lead-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:380px){ .lead-row{grid-template-columns:1fr;} }
  .lead-fields label{display:flex; flex-direction:column; gap:6px; font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; color:var(--text-dim); text-transform:uppercase;}
  .lead-fields input, .lead-fields select, .lead-fields textarea{
    background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--text);
    padding:11px 12px; font-family:'Google Sans',system-ui,sans-serif; font-size:14px; text-transform:none; letter-spacing:normal;
    transition:border-color 160ms ease-out;
  }
  .lead-fields input:focus, .lead-fields select:focus, .lead-fields textarea:focus{outline:none; border-color:var(--brand-lt);}
  .lead-fields textarea{resize:vertical;}
  .lead-submit{border:none; border-radius:8px; cursor:pointer; margin-top:4px; width:100%;}
  .lead-thanks{padding:52px 32px; text-align:center;}
  .lead-thanks h3{font-family:'Bebas Neue'; font-weight:400; font-size:32px; text-transform:uppercase; color:var(--brand);}
  .lead-thanks p{font-size:14px; color:var(--text-dim); margin-top:10px; line-height:1.6;}

  /* Contact Form 7 chrome. CF7 wraps every field in its own <span>, which would
     otherwise break the label/input stack, and ships unstyled validation text. */
  .lead-fields .wpcf7-form-control-wrap{display:block;}
  .lead-fields .wpcf7-form-control{width:100%;}
  .lead-fields .wpcf7-not-valid{border-color:var(--brand);}
  .wpcf7-not-valid-tip{
    font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--brand); margin-top:6px; display:block;
  }
  .wpcf7-response-output{
    margin:0; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--brand);
    border-radius:8px; background:var(--surface-2); font-size:13px; line-height:1.5; color:var(--text-dim);
  }
  /* CF7 ships per-state border colours — amber for invalid, green for sent —
     at .wpcf7 form.invalid specificity, which outranks the rule above. Restate
     them per state rather than reaching for !important. */
  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output,
  .wpcf7 form.payment-required .wpcf7-response-output{
    border-color:var(--line); border-left-color:var(--brand);
  }
  .wpcf7 form.sent .wpcf7-response-output{border-color:var(--line); border-left-color:#1a7f37;}
  /* CF7 marks the whole form busy mid-submit; dim it so the wait reads as
     deliberate rather than as a dead button. */
  .wpcf7-form.submitting .lead-submit{opacity:.6; pointer-events:none;}
  /* The spinner is only visibility:hidden when idle, so it would otherwise
     reserve a blank strip under the button for the entire time the form sits
     untouched. */
  .wpcf7-spinner{display:none;}
  .wpcf7-form.submitting .wpcf7-spinner{display:block; margin:8px auto 0;}

  .lead-fallback{display:flex; flex-direction:column; gap:12px; text-align:center;}
  .lead-fallback p{font-size:13px; color:var(--text-dim); line-height:1.5;}
  .lead-fallback .btn-primary, .lead-fallback .btn-ghost{width:100%; text-align:center;}

  /* ---- INNER PAGES (blog index, page, single, 404) ---- */
  .entry-list{padding:40px 32px 80px; display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line);}
  .entry-card{background:var(--bg); padding:28px 24px; transition:background 200ms ease-out;}
  .entry-card:hover{background:var(--surface);}
  .entry-card h3{font-family:'Bebas Neue'; font-size:26px; text-transform:uppercase; letter-spacing:.02em;}
  .entry-card p{font-size:14px; color:var(--text-dim); margin-top:8px; line-height:1.6;}
  .entry-empty{padding:60px 32px; color:var(--text-dim);}
  .entry-content{padding:40px 32px 90px; max-width:76ch; font-size:16px; line-height:1.75; color:var(--text-dim);}
  .entry-content > * + *{margin-top:20px;}
  .entry-content h2, .entry-content h3, .entry-content h4{font-family:'Bebas Neue'; text-transform:uppercase; color:var(--text); letter-spacing:.02em; line-height:1.1;}
  .entry-content h2{font-size:34px;} .entry-content h3{font-size:27px;} .entry-content h4{font-size:22px;}
  .entry-content a{color:var(--brand); text-decoration:underline; text-underline-offset:3px;}
  .entry-content img{max-width:100%; height:auto; border-radius:10px;}
  .entry-content blockquote{border-left:3px solid var(--brand); padding-left:20px; font-style:italic;}
  .entry-content ul, .entry-content ol{padding-left:22px;}
  .entry-content li + li{margin-top:8px;}
  .entry-media{margin-bottom:26px;}
  .entry-media img{width:100%; height:auto; border-radius:12px;}
  .pagination, .page-links{display:flex; gap:10px; flex-wrap:wrap; padding:34px 32px 0; font-family:'IBM Plex Mono'; font-size:12px;}
  .pagination .page-numbers{padding:9px 14px; border:1px solid var(--line); color:var(--text);}
  .pagination .page-numbers.current, .pagination .page-numbers:hover{background:var(--brand); border-color:var(--brand); color:#fff;}
  /* the phone in the navy band became an <a> in the theme; keep the flat look */
  /* inline-flex, not inline-block: the icon and number sit on one row now. */
  a.em-phone{display:inline-flex; text-decoration:none;}
  @media (max-width:720px){
    .entry-list, .entry-content{padding-inline:20px;}
    .pagination, .page-links{padding-inline:20px;}
  }