/* ------------------------------------------------------------------
     Cyber Bees IT — home page design direction, v2 (animated logo)
     Palette measured from the client's own logo files and the live
     Elementor kit (see ../brand.md). Inter is already deployed site-wide.
     Structure only is borrowed from the Apple España reference: alternating
     bands instead of dividers, no shadows, one action per section,
     oversized headline, left-aligned body. No Apple color or typeface.
     ------------------------------------------------------------------ */
  :root{
    --amber:#E4B723;
    --orange:#F58220;
    --navy:#1E3A5F;
    --ink:#2E2E2E;
    --canvas:#F7F7F7;
    --paper:#FFFFFF;
    --rule:#E4E4E4;
    --muted:#5E6670;
    --page:1180px;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--sans); color:var(--ink); background:var(--paper);
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
    font-feature-settings:"tnum" 0;
  }
  .wrap{max-width:var(--page);margin:0 auto;padding:0 32px;}
  section{padding:40px 0;}
  section.canvas{background:var(--canvas);}
  section.navy{background:var(--navy);color:#fff;}
  h1,h2,h3{margin:0;letter-spacing:-0.022em;line-height:1.08;color:var(--navy);}
  .navy h2,.navy h3{color:#fff;}
  h1{font-size:64px;font-weight:700;max-width:16ch;}
  h2{font-size:42px;font-weight:700;max-width:20ch;}
  h3{font-size:21px;font-weight:600;letter-spacing:-0.01em;line-height:1.3;}
  p{margin:0;max-width:62ch;}
  /* Orange is a shape, never type: on white it reads 2.59:1. The label is navy (11.5:1)
     and the orange moves into a small bar beside it, the same mark the cards carry. */
  .eyebrow{
    display:flex;align-items:center;gap:12px;
    font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--navy);margin-bottom:18px;
  }
  .eyebrow::before{content:"";flex:none;width:22px;height:3px;border-radius:2px;background:var(--orange);}
  .navy .eyebrow{color:var(--amber);}
  .navy .eyebrow::before{background:var(--amber);}
  .lede{font-size:21px;line-height:1.5;color:var(--muted);margin-top:22px;}
  .navy .lede{color:#D6DEE9;}

  /* Buttons: the Young Bucks & a Truck interaction (dewitt-web base theme, reveal.js) in
     Cyber Bees colors. On hover, a copy of the button face in its hover colors grows as a
     circle from the point where the cursor came in, and the button lifts 2px. The shape
     stays this page's pill. Amber only ever carries a black label (11.1:1); the hover face
     is navy with a white label (11.5:1), or white with a navy label on the navy band.
     Without JavaScript the plain color change runs instead. See ../brand.md. */
  .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
  section:not(.hero) .actions{margin-top:20px;}   /* tighter outside the hero (2026-10-14) */
  .btn,.callbtn{
    --btn:var(--amber);--btn-text:#000;--btn-border:var(--amber);
    --btn-hover:var(--navy);--btn-hover-text:#fff;--btn-shadow:rgba(30,58,95,.5);
    position:relative;overflow:hidden;isolation:isolate;display:inline-block;white-space:nowrap;cursor:pointer;
    border-radius:999px;padding:14px 30px;font-size:17px;font-weight:600;text-decoration:none;
    background:var(--btn);color:var(--btn-text);border:1.5px solid var(--btn-border);
    transition:background-color .18s ease,border-color .18s ease,color .18s ease,
      transform .2s var(--ease-out),box-shadow .2s ease;
  }
  .btn-ghost{--btn:transparent;--btn-text:var(--navy);--btn-border:var(--navy);}
  .navy .btn,.navy .callbtn{--btn-hover:#fff;--btn-hover-text:var(--navy);--btn-shadow:rgba(0,0,0,.55);}
  .navy .btn-ghost{--btn-text:#fff;--btn-border:rgba(255,255,255,.7);}
  @media (hover:hover) and (pointer:fine){
    .btn:hover,.callbtn:hover{border-color:var(--btn-hover);transform:translateY(-2px);
      box-shadow:0 9px 20px -9px var(--btn-shadow);}
    html:not([data-js]) .btn:hover,html:not([data-js]) .callbtn:hover{
      background:var(--btn-hover);color:var(--btn-hover-text);}
  }
  .btn:active,.callbtn:active{transform:translateY(0);box-shadow:none;}
  .btn:focus-visible,.callbtn:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
  .navy .btn:focus-visible{outline-color:#fff;}
  /* the sweep layer the script adds: the button face in its hover colors, clipped to a circle */
  .btn__reveal{
    position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
    pointer-events:none;font:inherit;letter-spacing:inherit;
    background:var(--btn-hover);color:var(--btn-hover-text);
    clip-path:circle(0% at var(--dw-x,50%) var(--dw-y,50%));
    transition:clip-path 420ms var(--ease-out);
  }
  .dw-anchoring .btn__reveal{transition:none;clip-path:circle(0% at var(--dw-x,50%) var(--dw-y,50%));}
  .dw-anchoring-full .btn__reveal{transition:none;clip-path:circle(var(--dw-max,140%) at var(--dw-x,50%) var(--dw-y,50%));}
  .is-revealed .btn__reveal{clip-path:circle(var(--dw-max,140%) at var(--dw-x,50%) var(--dw-y,50%));}
  .btn:focus-visible .btn__reveal,.callbtn:focus-visible .btn__reveal{clip-path:circle(140% at 50% 50%);}
  @media (prefers-reduced-motion:reduce){
    .btn,.callbtn{transition:background-color .18s ease,border-color .18s ease,color .18s ease;}
    .btn:hover,.callbtn:hover{transform:none;box-shadow:none;}
    .btn__reveal{clip-path:none;opacity:0;transition:opacity 140ms ease;}
    .is-revealed .btn__reveal,.btn:focus-visible .btn__reveal,.callbtn:focus-visible .btn__reveal{clip-path:none;opacity:1;}
  }

  header.site{
    position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--rule);
  }
  header.site .wrap{display:flex;align-items:center;gap:28px;height:68px;}
  
  nav{display:flex;gap:26px;margin-left:auto;}
  nav a{position:relative;padding:6px 0;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;}
  nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;
    background:var(--orange);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s var(--ease-out);}
  nav a:focus-visible::after{transform:scaleX(1);}
  @media (hover:hover) and (pointer:fine){ nav a:hover::after{transform:scaleX(1);} }
  @media (prefers-reduced-motion:reduce){ nav a::after{transition:none;} }
  .callbtn{padding:10px 20px;font-size:15px;}

  .hero{padding:88px 0 0;overflow-x:clip;}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:stretch;}
  .hero-copy{align-self:center;padding-bottom:40px;}   /* 96 until 2026-10-14 */
  .hero h1{font-size:56px;max-width:none;text-wrap:balance;}   /* three lines beside the video, not four */
  /* Kevin is sized past his column: the box runs through the page margin toward the edge of
     the window, and up into the hero's top padding, so he can be large without touching the
     text. The frame's own top and right are empty white, so nothing is covered. */
  .hero-media{position:relative;min-height:540px;
    margin-right:calc(-1 * max(0px, (100vw - var(--page)) / 2) - 16px);}
  .hero-video{position:absolute;left:0;bottom:0;display:block;width:min(100%,700px);height:auto;
    aspect-ratio:1/1;background:#fff;}
  .hero .trust{margin-top:34px;font-size:15px;color:var(--muted);}

  .grid{display:grid;gap:22px;margin-top:26px;}
  .g3{grid-template-columns:repeat(3,1fr);}
  .g2{grid-template-columns:repeat(2,1fr);}
  .card{
    background:var(--paper);border:1px solid var(--rule);border-radius:28px;
    padding:34px 32px;
  }
  .canvas .card{background:var(--paper);}
  .card p{margin-top:12px;color:var(--muted);font-size:16px;}
  .card .tag{
    display:inline-block;width:34px;height:4px;border-radius:2px;
    background:var(--amber);margin-bottom:20px;
  }
  .card:nth-child(2) .tag{background:var(--orange);}
  .card:nth-child(4) .tag{background:var(--orange);}

  ul.checks{list-style:none;padding:0;margin:20px 0 0;display:grid;
    grid-template-columns:repeat(2,1fr);gap:16px 34px;max-width:900px;}
  ul.checks li{position:relative;padding-left:30px;font-size:17px;}
  ul.checks li::before{
    content:"";position:absolute;left:0;top:.52em;width:12px;height:12px;
    border-radius:3px;background:var(--amber);
  }

  /* Answer blocks — question heading with a short, liftable answer directly
     beneath it. 40–60 words each: the length AI assistants quote cleanly. */
  .qa{margin-top:22px;display:grid;gap:18px;max-width:860px;}
  .qa h3{color:var(--navy);}
  .qa p{margin-top:10px;color:var(--muted);}

  .areas{margin-top:26px;font-size:17px;color:var(--muted);max-width:70ch;}
  .affil{display:flex;flex-wrap:wrap;gap:40px;align-items:center;margin-top:16px;
    font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.02em;}
  /* membership logos (Kevin, 2026-10-27: "logo artwork" instead of names); same tiles as the About page */
  .affil{gap:14px;}
  .affil-tile{display:grid;place-items:center;height:76px;padding:10px 18px;border-radius:16px;background:#fff;}
  .affil-tile.dark{background:#16304F;}
  .affil-tile.dark img{max-height:36px;}
  .affil-tile img{max-height:54px;max-width:170px;width:auto;height:auto;display:block;}

  footer.site{background:var(--navy);color:#fff;padding:72px 0 40px;}
  footer.site img{height:48px;width:auto;}
  footer.site a{color:#fff;}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
  .fgrid h4{margin:0 0 14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--amber);font-weight:600;}
  .fgrid a{display:block;text-decoration:none;font-size:16px;margin-bottom:9px;color:#D6DEE9;}
  .fgrid p{color:#D6DEE9;font-size:16px;}
  .fgrid .fline{display:block;font-size:16px;margin-bottom:9px;}
  .fgrid a{transition:color .18s ease;}
  @media (hover:hover) and (pointer:fine){ .fgrid a:hover{color:var(--amber);} }
  .fgrid a:focus-visible{color:var(--amber);outline:2px solid var(--amber);outline-offset:3px;border-radius:2px;}
  .legal{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);
    font-size:14px;color:#A9B6C7;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}


  /* ------------------------------------------------------------------
     Logo intro — the bee flies in and lands in the lockup.
     Rare / first-time tier: plays once per session, home page only.
     The resting state is the DEFAULT state. Every rule below is scoped to
     html.bee-intro, which a script adds only when the intro should play, so
     if the script never runs the logo is simply there, correct and still.

     Only transform and opacity animate. The wing blur is a static SVG filter
     on a separate layer that is cross-faded in and out, so no filter value
     is ever animated.
     Curves are the two named house curves plus linear; none are invented.
     Inside @keyframes they are written as literals, never as var().
     ------------------------------------------------------------------ */
  :root{
    --ease-out:cubic-bezier(0.23,1,0.32,1);
    --ease-in-out:cubic-bezier(0.77,0,0.175,1);
    --fly:1.8s;
  }
  .logo{position:relative;display:block;height:38px;aspect-ratio:454/158;flex:none;}
  header.site .logo img.wordmark{position:absolute;inset:0;width:100%;height:100%;}
  .logo .fly-x,.logo .fly-y,.logo .flip{position:absolute;inset:0;display:block;}
  .logo svg.bee{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
  /* the bee sits in the left 34% of the lockup; pivot on its own center */
  .logo .flip,.logo svg.bee{transform-origin:22% 49%;}
  .bee .bee-wings{transform-box:view-box;transform-origin:184px 127px;}
  /* Abdomen rig. His logo is drawn in the landed pose: abdomen tucked under,
     stinger curling forward. Two hinges un-curl it for flight: the narrow waist,
     and the inner edge of the stinger base (hinging on the inner edge means the
     joint overlaps instead of opening a gap). At rotate(0) the rig is his artwork:
     a pixel diff against the original shows 0.025% of pixels differing. */
  .bee .bee-abdomen{transform-box:view-box;transform-origin:153.5px 164px;}
  .bee .bee-sting{transform-box:view-box;transform-origin:206px 200.5px;}
  .bee .wings-blur{opacity:0;}
  .bee .ghost{transform-box:view-box;transform-origin:184px 127px;}
  .bee .g1{transform:rotate(-13deg);opacity:.5;}
  .bee .g2{opacity:.6;}
  .bee .g3{transform:rotate(12deg);opacity:.5;}

  html.bee-intro,html.bee-intro body{overflow-x:clip;}
  html.bee-intro .fly-x{animation:bee-path var(--fly) linear both;}
  html.bee-intro .flip{animation:bee-flip var(--fly) linear both;}
  html.bee-intro svg.bee{animation:bee-tilt var(--fly) linear both;}
  /* 30 beats x 60ms = the 1.8s flight; an even count ends where it began */
  html.bee-intro .bee-wings{animation:wing-flutter 60ms linear 30 alternate, wing-fold 260ms var(--ease-out) var(--fly) forwards;}
  html.bee-intro .bee-abdomen{animation:abdomen-curl var(--fly) linear both;}
  html.bee-intro .bee-sting{animation:sting-curl var(--fly) linear both;}
  html.bee-intro .wings-blur{animation:wing-blur var(--fly) linear both;}
  html.bee-intro .wings-sharp{animation:wing-sharp var(--fly) linear both;}
  html.bee-intro .wordmark{animation:mark-in 520ms var(--ease-out) 1.38s both;}

  /* The flight path is BAKED: a spline through control points, sampled along its
     arc length with one continuous slow-down, written as 30 short linear steps
     (work/gen_flight.py). Two things forced this. var() inside a keyframe's
     animation-timing-function is silently dropped and resolves to linear, and
     per-axis easing between waypoints stops and restarts at every one. */
  @keyframes bee-path{
    0%{transform:translate(108.00vw,26.00vh);}
    3.33%{transform:translate(100.46vw,31.14vh);}
    6.67%{transform:translate(93.10vw,36.19vh);}
    10%{transform:translate(85.89vw,40.97vh);}
    13.33%{transform:translate(78.79vw,45.36vh);}
    16.67%{transform:translate(71.77vw,49.11vh);}
    20%{transform:translate(64.83vw,52.15vh);}
    23.33%{transform:translate(58.01vw,54.66vh);}
    26.67%{transform:translate(51.33vw,56.53vh);}
    30%{transform:translate(44.80vw,57.67vh);}
    33.33%{transform:translate(38.45vw,58.00vh);}
    36.67%{transform:translate(32.33vw,57.42vh);}
    40%{transform:translate(26.47vw,56.13vh);}
    43.33%{transform:translate(20.91vw,54.26vh);}
    46.67%{transform:translate(15.64vw,51.94vh);}
    50%{transform:translate(10.70vw,49.22vh);}
    53.33%{transform:translate(6.15vw,45.97vh);}
    56.67%{transform:translate(1.99vw,42.34vh);}
    60%{transform:translate(-1.78vw,38.42vh);}
    63.33%{transform:translate(-5.10vw,34.20vh);}
    66.67%{transform:translate(-7.64vw,29.35vh);}
    70%{transform:translate(-7.83vw,23.57vh);}
    73.33%{transform:translate(-6.34vw,18.64vh);}
    76.67%{transform:translate(-4.75vw,14.30vh);}
    80%{transform:translate(-2.88vw,10.89vh);}
    83.33%{transform:translate(-0.95vw,8.28vh);}
    86.67%{transform:translate(0.72vw,6.00vh);}
    90%{transform:translate(1.69vw,3.56vh);}
    93.33%{transform:translate(1.11vw,1.52vh);}
    96.67%{transform:translate(0.32vw,0.50vh);}
    100%{transform:translate(0.00vw,0.00vh);}
  }
  @keyframes bee-flip{
    0%{transform:scaleX(-1.000);}
    3.33%{transform:scaleX(-1.000);}
    6.67%{transform:scaleX(-1.000);}
    10%{transform:scaleX(-1.000);}
    13.33%{transform:scaleX(-1.000);}
    16.67%{transform:scaleX(-1.000);}
    20%{transform:scaleX(-1.000);}
    23.33%{transform:scaleX(-1.000);}
    26.67%{transform:scaleX(-1.000);}
    30%{transform:scaleX(-1.000);}
    33.33%{transform:scaleX(-1.000);}
    36.67%{transform:scaleX(-1.000);}
    40%{transform:scaleX(-1.000);}
    43.33%{transform:scaleX(-1.000);}
    46.67%{transform:scaleX(-1.000);}
    50%{transform:scaleX(-1.000);}
    53.33%{transform:scaleX(-1.000);}
    56.67%{transform:scaleX(-1.000);}
    60%{transform:scaleX(-1.000);}
    63.33%{transform:scaleX(-0.997);}
    66.67%{transform:scaleX(-0.660);}
    70%{transform:scaleX(0.000);}
    73.33%{transform:scaleX(0.660);}
    76.67%{transform:scaleX(0.997);}
    80%{transform:scaleX(1.000);}
    83.33%{transform:scaleX(1.000);}
    86.67%{transform:scaleX(1.000);}
    90%{transform:scaleX(1.000);}
    93.33%{transform:scaleX(1.000);}
    96.67%{transform:scaleX(1.000);}
    100%{transform:scaleX(1.000);}
  }
  @keyframes bee-tilt{
    0%{transform:rotate(12.69deg) scale(3.000);}
    3.33%{transform:rotate(12.73deg) scale(2.872);}
    6.67%{transform:rotate(12.58deg) scale(2.748);}
    10%{transform:rotate(12.00deg) scale(2.628);}
    13.33%{transform:rotate(10.89deg) scale(2.512);}
    16.67%{transform:rotate(9.30deg) scale(2.400);}
    20%{transform:rotate(7.78deg) scale(2.293);}
    23.33%{transform:rotate(6.31deg) scale(2.190);}
    26.67%{transform:rotate(4.47deg) scale(2.091);}
    30%{transform:rotate(2.24deg) scale(1.996);}
    33.33%{transform:rotate(-0.40deg) scale(1.905);}
    36.67%{transform:rotate(-3.06deg) scale(1.819);}
    40%{transform:rotate(-5.40deg) scale(1.737);}
    43.33%{transform:rotate(-7.46deg) scale(1.659);}
    46.67%{transform:rotate(-9.44deg) scale(1.585);}
    50%{transform:rotate(-11.80deg) scale(1.516);}
    53.33%{transform:rotate(-14.45deg) scale(1.451);}
    56.67%{transform:rotate(-16.92deg) scale(1.390);}
    60%{transform:rotate(-19.62deg) scale(1.333);}
    63.33%{transform:rotate(-24.00deg) scale(1.281);}
    66.67%{transform:rotate(-24.00deg) scale(1.233);}
    70%{transform:rotate(-24.00deg) scale(1.190);}
    73.33%{transform:rotate(-24.00deg) scale(1.151);}
    76.67%{transform:rotate(-24.00deg) scale(1.116);}
    80%{transform:rotate(-24.00deg) scale(1.086);}
    83.33%{transform:rotate(-22.15deg) scale(1.060);}
    86.67%{transform:rotate(-23.84deg) scale(1.039);}
    90%{transform:rotate(-19.24deg) scale(1.022);}
    93.33%{transform:rotate(-11.14deg) scale(1.010);}
    96.67%{transform:rotate(-3.19deg) scale(1.003);}
    100%{transform:rotate(0.00deg) scale(1.000);}
  }
  /* stretched out behind for the flight, tucking under over the last half-second */
  @keyframes abdomen-curl{0%,72%{transform:rotate(105deg);animation-timing-function:cubic-bezier(0.77,0,0.175,1);}100%{transform:rotate(0);}}
  @keyframes sting-curl{0%,72%{transform:rotate(64deg);animation-timing-function:cubic-bezier(0.77,0,0.175,1);}100%{transform:rotate(0);}}
  @keyframes wing-flutter{from{transform:rotate(-9deg);}to{transform:rotate(11deg);}}
  @keyframes wing-fold{from{transform:rotate(-9deg);}to{transform:rotate(0);}}
  @keyframes wing-blur{0%,84%{opacity:1;}100%{opacity:0;}}
  @keyframes wing-sharp{0%,84%{opacity:0;}100%{opacity:1;}}
  @keyframes mark-in{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:none;}}

  /* Reduced motion: no flight, no flutter. The lockup simply fades in. */
  @media (prefers-reduced-motion:reduce){
    html.bee-intro .fly-x,html.bee-intro .fly-y,html.bee-intro .flip,html.bee-intro svg.bee,
    html.bee-intro .bee-wings,html.bee-intro .wings-blur,html.bee-intro .wings-sharp,
    html.bee-intro .bee-abdomen,html.bee-intro .bee-sting{animation:none;}
    html.bee-intro .logo{animation:logo-fade 300ms ease both;}
    html.bee-intro .wordmark{animation:none;}
    @keyframes logo-fade{from{opacity:0;}to{opacity:1;}}
  }

  /* ------------------------------------------------------------------
     By the numbers, inside the navy band. Three figures, each checked against the
     publisher's own report on 2026-10-12 (sources are linked on the page). With no
     JavaScript, or with reduced motion, everything renders in its final state; the
     script arms the start state and plays each figure once as it scrolls into view.
     Amber is used here only as shapes and as 13px+ type on navy (6.1:1).
     ------------------------------------------------------------------ */
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;
    border-top:1px solid rgba(255,255,255,.18);}
  .stat{display:flex;flex-direction:column;padding:40px 36px 0;border-left:1px solid rgba(255,255,255,.18);}
  .stat:first-child{border-left:0;padding-left:0;}
  .stat:last-child{padding-right:0;}
  .stat-viz{height:230px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;}
  .stat-num{font-weight:700;font-size:clamp(48px,4.8vw,64px);line-height:1;letter-spacing:-0.03em;
    color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
  .stat-num .unit{font-size:.36em;font-weight:600;letter-spacing:0;margin-left:.4em;color:#D6DEE9;}
  .stat-label{margin:22px 0 0;max-width:30ch;font-size:19px;line-height:1.4;font-weight:600;color:#fff;text-wrap:pretty;}
  .stat-src{margin:14px 0 0;max-width:40ch;font-size:13px;line-height:1.45;color:#A9B6C7;}
  .stat-src a{color:inherit;text-underline-offset:3px;}
  @media (hover:hover) and (pointer:fine){ .stat-src a:hover{color:#fff;} }
  .navy .stat-row + .actions{margin-top:26px;}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  /* 1 · ring: the arc draws to 48% while the number counts up inside it */
  .ring{position:relative;width:200px;height:200px;}
  .ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg);}
  .ring circle{fill:none;stroke-width:13;}
  .ring .track{stroke:rgba(255,255,255,.14);}
  .ring .arc{stroke:var(--amber);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:52;
    transition:stroke-dashoffset 1.8s var(--ease-out);}
  .ring .stat-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:clamp(40px,3.8vw,50px);}
  .numbers.armed .stat:not(.live) .ring .arc{stroke-dashoffset:100;}
  /* 2 · calendar: 43 squares, one per day, light up in order */
  .cal{display:grid;grid-template-columns:repeat(7,15px);gap:5px;}
  .cal i{display:block;width:15px;height:15px;border-radius:3px;background:var(--amber);
    transition:opacity .32s ease,transform .45s var(--ease-out);transition-delay:calc(var(--i) * 22ms);}
  .numbers.armed .stat:not(.live) .cal i{opacity:.16;transform:scale(.6);}
  /* 3 · odometer: each digit spins through a full turn and lands, left to right; a rule sweeps under it */
  .odo{display:inline-flex;align-items:flex-start;}
  .odo .col{display:inline-block;height:1em;overflow:hidden;
    -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);
    mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);}
  .odo .col.sep{overflow:visible;-webkit-mask-image:none;mask-image:none;}   /* the comma hangs below the line: never clip it */
  .odo .col span{display:block;transform:translateY(calc(var(--d) * -1em));transition:transform 1.6s var(--ease-out);}
  .odo .col span i{display:block;height:1em;font-style:normal;}
  .odo .col:nth-child(2) span{transition-delay:.1s;}
  .odo .col:nth-child(4) span{transition-delay:.2s;}
  .odo .col:nth-child(5) span{transition-delay:.3s;}
  .odo .col:nth-child(6) span{transition-delay:.4s;}
  .numbers.armed .stat:not(.live) .odo .col span{transform:translateY(0);}
  .rule{width:100%;max-width:260px;height:4px;border-radius:2px;background:var(--amber);
    transform-origin:0 50%;transition:transform 1.4s var(--ease-out) .5s;}
  .numbers.armed .stat:not(.live) .rule{transform:scaleX(0);}
  .stat-tag{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}
  @media (max-width:860px){
    .stat-row{grid-template-columns:1fr;margin-top:24px;}
    .stat,.stat:first-child,.stat:last-child{padding:36px 0 34px;border-left:0;border-bottom:1px solid rgba(255,255,255,.18);}
    .stat:last-child{border-bottom:0;padding-bottom:0;}
    .stat-viz{height:auto;}
  }
  .numbers.no-tx *{transition:none!important;}
  @media (prefers-reduced-motion:reduce){ .ring .arc,.cal i,.odo .col span,.rule{transition:none!important;} }

  /* ------------------------------------------------------------------
     Service cards: navy, with the hover from the Young Bucks & a Truck homepage cards (its
     .depts/.dept rules, newest deploy): the card under the cursor comes forward, 1.04 over
     350ms, with a shadow. Only that card moves. Young Bucks also shrinks the other cards;
     Sean asked for that to be removed here (2026-10-12), so the rest stay put. Mouse only;
     still under reduced motion. White on navy is 11.5:1 and the body color 8.5:1; the amber
     and orange bars are shapes.
     ------------------------------------------------------------------ */
  #services .card{position:relative;display:flex;flex-direction:column;background:var(--navy);border-color:var(--navy);
    transition:transform .35s cubic-bezier(.25,.46,.45,.94),box-shadow .35s cubic-bezier(.25,.46,.45,.94);}
  #services .card h3{color:#fff;}
  #services .card p{color:#D6DEE9;}
  /* Each card links to its service page. The link sits in the heading, so its name is the
     service; its ::after is stretched over the card, so the whole card is the target. */
  #services .card h3 a{color:inherit;text-decoration:none;outline:none;}
  #services .card h3 a::after{content:"";position:absolute;inset:0;border-radius:28px;}
  #services .card h3 a:focus-visible::after{outline:2px solid var(--navy);outline-offset:4px;}
  #services .card .more{margin-top:auto;padding-top:22px;font-size:15px;font-weight:600;color:var(--amber);}
  #services .card .more::after{content:" →";}
  #services .card:focus-within{transform:scale(1.04);box-shadow:0 18px 34px -18px rgba(30,58,95,.6);z-index:2;}
  @media (hover:hover) and (pointer:fine){
    #services .card:hover{transform:scale(1.04);box-shadow:0 18px 34px -18px rgba(30,58,95,.6);z-index:2;}
  }
  @media (prefers-reduced-motion:reduce){
    #services .card{transition:none;}
    #services .card:hover,#services .card:focus-within{transform:none;}
  }

  /* Rotating word (second section). Amber is a ground here; the word is navy like the rest of
     the sentence (Sean, 2026-10-13). Navy on amber measures 6.08:1. */
  h2.rotator{max-width:none;line-height:1.16;}   /* a little more air between lines, so the pill clears the line above */
  .rotator .tr-line{display:block;}
  .text-rotate{display:inline-flex;vertical-align:baseline;overflow:hidden;white-space:nowrap;
    background:var(--amber);color:var(--navy);border-radius:.22em;line-height:.9;padding:0 .2em .19em;margin-left:.04em;
    /* a tight pill: it stops just above the tallest letters, so it cannot reach the descenders
       of the line above ("support"), and keeps room below for g, p and y */
    transition:width .42s var(--ease-out);}
  .tr-word{display:inline-flex;}
  .tr-char{display:inline-block;}
  @media (max-width:860px){
    .rotator .tr-line{display:inline;}
    .rotator .text-rotate{display:flex;width:fit-content;margin:.14em 0 .1em;}   /* the pill takes a line of its own */
  }
  @media (prefers-reduced-motion:reduce){ .text-rotate{transition:none;} }

  /* Reviews, above the footer: one thin row that drifts from left to right (Sean's pick,
     2026-10-13). The script copies the row so the drift can loop; without it, or with reduced
     motion, the row stays put and can be scrolled by hand. It waits under the pointer and on
     keyboard focus, and has a pause button. */
  #reviews{padding:28px 0 32px;}
  .reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 40px;flex-wrap:wrap;}
  #reviews h2{font-size:32px;max-width:none;}
  #reviews .eyebrow{margin-bottom:10px;}
  .reviews-band{margin-top:20px;overflow-x:auto;scrollbar-width:none;}
  .reviews-band::-webkit-scrollbar{display:none;}
  .reviews-band:focus-visible{outline:2px solid var(--navy);outline-offset:4px;}
  .reviews-track{display:flex;width:max-content;}
  .reviews-set{display:flex;gap:20px;padding-right:20px;}
  .reviews-track > .reviews-set:first-child{padding-left:max(32px, calc((100vw - var(--page)) / 2 + 32px));}
  .review{flex:none;width:min(520px,84vw);margin:0;background:var(--navy);border-radius:22px;padding:22px 26px 24px;}
  .review figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:14px;color:#A9B6C7;}
  .review .stars{display:inline-flex;gap:3px;}
  .review .stars svg{width:15px;height:15px;fill:var(--amber);}
  .review figcaption b{font-size:15px;font-weight:600;color:#fff;}
  .review blockquote{margin:12px 0 0;font-size:16px;line-height:1.5;color:#fff;}
  .reviews-band.is-marquee{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
  .reviews-band.is-marquee .reviews-track{animation:reviews-drift var(--drift-time,64s) linear infinite;}
  .reviews-band.is-marquee .reviews-set:first-child{padding-left:0;}
  .reviews-band.is-marquee:hover .reviews-track,
  .reviews-band.is-marquee:focus .reviews-track,
  .reviews-band.is-paused .reviews-track,
  .reviews-band.is-stopped .reviews-track{animation-play-state:paused;}
  @keyframes reviews-drift{from{transform:translateX(calc(-1 * var(--drift,50%)));}to{transform:translateX(0);}}
  .rv-toggle{display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%;cursor:pointer;
    border:1.5px solid var(--navy);background:transparent;color:var(--navy);}
  .rv-toggle svg{width:10px;height:10px;fill:currentColor;}
  .rv-toggle:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
  @media (max-width:860px){ #reviews{padding:24px 0 28px;} #reviews h2{font-size:26px;} .review blockquote{font-size:15px;} }

  /* footer rule: an elastic line the mouse can pull (script swaps the border for an SVG path) */
  .legal.has-eline{position:relative;border-top-color:transparent;}
  .eline{position:absolute;left:0;top:-61px;width:100%;height:121px;pointer-events:none;overflow:hidden;}
  .eline path{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1;transition:stroke .9s ease,stroke-width .9s ease;}
  .eline.is-grabbed path{stroke:var(--amber);stroke-width:1.5;transition-duration:.15s;}

  /* contact band: a step darker than the canvas so it separates from the white bands either side */
  section#contact{background:#ECECEC;}

  /* footer rule: the note that pops up above the rule after it has been touched twice */
  .eline-pop{position:absolute;left:0;bottom:calc(100% + 16px);z-index:3;box-sizing:border-box;
    width:max-content;max-width:min(380px,100%);padding:20px 22px 22px;border-radius:20px;
    background:#fff;color:var(--navy);text-align:left;
    box-shadow:0 22px 44px -18px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.18);
    visibility:hidden;opacity:0;pointer-events:none;
    transform:translateY(6px) scale(.96);transform-origin:var(--caret,50%) 100%;
    transition:opacity .16s ease,transform .18s var(--ease-out),visibility 0s linear .18s;}
  .eline-pop.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s;}
  .eline-pop::after{content:"";position:absolute;left:var(--caret,50%);top:100%;width:16px;height:16px;
    margin:-8px 0 0 -8px;background:#fff;transform:rotate(45deg);border-radius:0 0 3px 0;}
  .eline-pop__text{margin:0 34px 16px 0;max-width:none;font-size:17px;line-height:1.45;font-weight:600;color:var(--navy);}
  /* the pill sits inside the footer, where "footer.site a" turns every link white: white on
     amber is 1.89:1, so the pill's own black label is restated here with enough weight to win */
  .eline-pop .btn{font-size:15px;padding:11px 22px;color:var(--btn-text);}
  .eline-pop__close{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;
    padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;
    transition:background-color .15s ease,color .15s ease;}
  .eline-pop__close svg{width:14px;height:14px;display:block;}
  @media (hover:hover) and (pointer:fine){ .eline-pop__close:hover{background:var(--canvas);color:var(--navy);} }
  .eline-pop__close:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    .eline-pop{transform:none;transition:opacity .16s ease,visibility 0s linear .16s;}
    .eline-pop.is-open{transition-delay:0s;}
  }

  /* comp-only control so the intro can be shown again without a new session */

  @media (max-width:860px){
    section{padding:32px 0;} .hero{padding:64px 0 0;}
    /* phones (Sean, 2026-10-20): Kevin sits beside the title, smaller, instead of in his own block
       under the hero. The copy's children join the hero grid (display:contents) so the video can
       share the title's row. Scoped to the home .hero (2026-10-24): unscoped, it also split every
       inner page's .page-hero into two cramped columns on phones. */
    .hero .hero-grid{grid-template-columns:minmax(0,1fr) 40%;column-gap:6px;row-gap:0;
      grid-template-areas:"eyebrow eyebrow" "title media" "lede lede" "actions actions" "trust trust";}
    .hero .hero-copy{display:contents;}
    .hero .hero-copy .eyebrow{grid-area:eyebrow;} .hero h1{grid-area:title;align-self:center;font-size:33px;}
    .hero .lede{grid-area:lede;} .hero .actions{grid-area:actions;} .hero .trust{grid-area:trust;padding-bottom:28px;}
    .hero .hero-media{grid-area:media;align-self:center;min-height:0;margin:0 -14px 0 0;}
    .hero-video{position:static;width:100%;max-width:none;margin:0;
      -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);}
    @media (max-width:370px){ .hero h1{font-size:30px;} }
    h1{font-size:40px;max-width:none;} h2{font-size:30px;max-width:none;}
    .lede{font-size:18px;}
    .g3,.g2,ul.checks,.fgrid{grid-template-columns:1fr;}
    nav{display:none;}
    .wrap{padding:0 20px;}
  }

  /* ==================================================================
     Site pages beyond the home page (2026-10-14). Everything above this
     line is the approved home page stylesheet, unchanged. What follows
     only adds: the site navigation (menus, phone menu), the inner-page
     hero, icon cards, step rows, the animated hero art, and the scroll
     reveal. Same tokens, same type, same buttons.
     ================================================================== */

  /* ---- navigation: menus on desktop, a panel on phones ---- */
  nav .nav-item{position:relative;display:flex;align-items:center;}
  nav .nav-item > a{display:inline-flex;align-items:center;gap:6px;}
  nav .nav-item > a .caret{width:9px;height:9px;flex:none;transition:transform .2s var(--ease-out);}
  nav .sub{position:absolute;left:-18px;top:calc(100% + 10px);min-width:250px;padding:10px;
    background:#fff;border:1px solid var(--rule);border-radius:18px;box-shadow:0 18px 40px -22px rgba(30,58,95,.45);
    display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-4px);transform-origin:20px 0;
    transition:opacity .16s ease,transform .18s var(--ease-out),visibility 0s linear .18s;z-index:30;}
  nav .sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}   /* keeps the menu open while the pointer crosses the gap */
  nav .sub a{display:block;padding:9px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;}
  nav .sub a::after{display:none;}
  nav .sub a:hover,nav .sub a:focus-visible{background:var(--canvas);color:var(--navy);}
  nav .sub a.all{margin-top:4px;border-top:1px solid var(--rule);border-radius:0 0 10px 10px;padding-top:11px;color:var(--navy);font-weight:600;}
  nav .nav-item:hover .sub,nav .nav-item:focus-within .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
  nav .nav-item:hover > a .caret,nav .nav-item:focus-within > a .caret{transform:rotate(180deg);}
  nav a[aria-current="page"]::after,nav .nav-item.is-current > a::after{transform:scaleX(1);}
  .menu-btn{display:none;}
  .mobile-menu{display:none;}
  @media (max-width:860px){
    header.site .wrap{gap:12px;}
    .callbtn{margin-left:auto;}
    .menu-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:1px solid var(--rule);
      border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;}
    .menu-btn svg{width:20px;height:20px;}
    .menu-btn .x{display:none;}
    .menu-btn[aria-expanded="true"] .bars{display:none;}
    .menu-btn[aria-expanded="true"] .x{display:block;}
    .mobile-menu{display:block;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 68px);overflow-y:auto;
      background:#fff;border-bottom:1px solid var(--rule);box-shadow:0 24px 40px -24px rgba(30,58,95,.45);
      padding:8px 20px 22px;opacity:0;visibility:hidden;transform:translateY(-6px);
      transition:opacity .16s ease,transform .2s var(--ease-out),visibility 0s linear .2s;}
    .mobile-menu.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
    .mobile-menu h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:18px 0 6px;}
    .mobile-menu a{display:block;padding:11px 0;font-size:17px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);}
    .mobile-menu a[aria-current="page"]{color:var(--navy);font-weight:600;}
    .mobile-menu .btn{display:block;text-align:center;margin-top:18px;border-bottom:1.5px solid var(--btn-border);color:var(--btn-text);}
  }
  @media (prefers-reduced-motion:reduce){ nav .sub,.mobile-menu{transform:none;transition:opacity .16s ease,visibility 0s linear .16s;} }

  /* ---- inner-page hero: smaller than the home hero, with an animated picture beside it ---- */
  .page-hero{padding:52px 0 44px;overflow-x:clip;}
  .page-hero .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;}
  .page-hero h1{font-size:52px;max-width:15ch;text-wrap:balance;}
  .page-hero .lede{max-width:34em;}
  .crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none;font-size:14px;color:var(--muted);}
  .crumbs li+li::before{content:"/";margin-right:8px;color:#9AA3AD;}
  .crumbs a{color:var(--muted);text-decoration:none;}
  .crumbs a:hover{color:var(--navy);text-decoration:underline;}
  .art{position:relative;width:100%;max-width:460px;margin-left:auto;aspect-ratio:23/19;}
  .art svg{display:block;width:100%;height:100%;overflow:visible;}
  .art img.art3d{display:block;width:100%;height:100%;}
  /* /service-area/ hero: the relief map under the unchanged overlay svg (2026-10-20); same box, same frame */
  .art img.area3d{position:absolute;inset:0;width:100%;height:100%;display:block;}
  .art img.area3d ~ svg{position:relative;}
  /* Cybersecurity "How we protect you": the 3D layers still with HTML pills (2026-10-20). The pills, dots and leaders
     are placed in % of the 520:480 frame, and the text scales with the box (container units), so all of it scales together. */
  .lay3d{position:relative;width:100%;aspect-ratio:520/480;container-type:inline-size;}
  .lay3d-img{display:block;width:100%;height:100%;}
  .lay3d-leads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
  .lay3d-leads line{stroke:var(--navy);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.7;}
  .lay3d-labels{position:absolute;inset:0;pointer-events:none;}
  .lay3d-dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 2px #fff;}
  .lay3d-label{position:absolute;white-space:nowrap;font-size:max(10.5px,2.7cqw);line-height:1.2;font-weight:600;color:var(--navy);
    background:#fff;border-radius:999px;padding:.5em .85em .55em;box-shadow:0 1px 2px rgba(30,58,95,.08),0 8px 20px -10px rgba(30,58,95,.35);}
  .art.photo{aspect-ratio:4/5;max-width:400px;}
  .art.photo img{width:100%;height:100%;object-fit:cover;border-radius:28px;display:block;background:#fff;}
  /* About: Kevin's router-spin loop in the photo frame (2026-10-24). Same box and corners as the photo; the
     pause button sits inside the frame, solid navy so it holds 3:1 on the white video. */
  .photo-vid{position:relative;width:100%;height:100%;}
  .art.photo.sq{aspect-ratio:1/1;max-width:540px;}   /* About router clip is square like the home hero (2026-10-24) */
  /* About hero (Sean, 2026-10-24): Kevin larger, running into the right page margin like the home hero (to 16px from
     the window edge at most), and standing on the gray founder section: no bottom padding, the clip bottom-aligned. */
  /* Then (same day) moved toward the center: no bleed into the margin; the clip keeps its size by taking a wider
     column, its right edge on the content edge. */
  .page-hero.kev{padding-bottom:0;}
  .page-hero.kev .hero-grid{align-items:end;grid-template-columns:minmax(0,1fr) min(590px,52%);gap:32px;}
  .page-hero.kev .hero-copy{align-self:center;padding-bottom:44px;}
  .page-hero.kev .art.photo.sq{max-width:none;width:100%;margin:0;}
  .art.photo .vid-clip{width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:0;display:block;background:#fff;}   /* square: he runs off the bottom edge, and the white video sits on the white page (Sean, 2026-10-24) */
  .photo-vid .vid-toggle{right:14px;bottom:14px;background:var(--navy);border-color:var(--navy);}
  .photo-vid .vid-toggle:focus-visible{outline-color:var(--navy);}

  /* ---- section heads used on inner pages ---- */
  .sec-head{max-width:760px;}
  .sec-head p{margin-top:16px;color:var(--muted);font-size:18px;}
  .navy .sec-head p{color:#D6DEE9;}
  .center{text-align:center;margin-left:auto;margin-right:auto;}
  .center .eyebrow{justify-content:center;}
  .center h2,.center p{margin-left:auto;margin-right:auto;}

  /* ---- icon cards ---- */
  .g4{grid-template-columns:repeat(4,1fr);}
  .card.ico{padding:30px 28px;}
  .card .icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--amber);color:var(--navy);margin-bottom:18px;}
  .card .icon svg{width:26px;height:26px;}
  /* 3D card icons (2026-10-20): a Hive resident rendered with the films' light, transparent, 64px at every breakpoint;
     replaces the amber 52px square. The object is centered in its square, so the box sits 4px out to align its silhouette. */
  .card .icon3d{width:64px;height:64px;border-radius:0;background:none;margin:-4px 0 14px -4px;}
  .card .icon3d img{display:block;width:64px;height:64px;}
  .card .icon3d img.lg{width:76px;height:76px;margin:-6px;max-width:none;}
  .card h3{color:var(--navy);}
  .navy .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
  .navy .card h3{color:#fff;}
  .navy .card p{color:#D6DEE9;}
  .card.quote{display:flex;flex-direction:column;}
  .card.quote blockquote{margin:0;font-size:19px;line-height:1.5;color:var(--navy);font-weight:500;}
  .card.quote figcaption{margin-top:auto;padding-top:18px;font-size:15px;color:var(--muted);}
  .card.quote figcaption strong{color:var(--ink);font-weight:600;}
  /* a quote under the text in a navy card (Managed IT, 2026-10-20): white quote 11:1, caption #C9D3E0 7.6:1 */
  /* light gray cards (Cybersecurity "What attackers try first", 2026-10-20): muted text 5.1:1, navy 10.1:1 */
  .gray-cards .card{background:#EEF0F3;border-color:#EEF0F3;}
  .gray-cards .sign{background:#EEF0F3;border-color:#EEF0F3;}
  .gray-cards .sign .n{background:#fff;}   /* unlit number on gray; .sign.is-seen .n (later, same weight) still turns it amber */
  .gray-band{background:#EEF0F3;}   /* the same light gray as a section background (M365 "money's worth") */
  .quote-under{max-width:760px;margin-top:28px;}
  .quote-under figure,.navy-quotes figure{margin:0;}
  .quote-under .card.quote,.navy-quotes .card.quote{background:var(--navy);border-color:var(--navy);}
  .quote-under .card.quote blockquote,.navy-quotes .card.quote blockquote{color:#fff;}
  .quote-under .card.quote figcaption,.navy-quotes .card.quote figcaption{color:#C9D3E0;}
  .quote-under .card.quote figcaption strong,.navy-quotes .card.quote figcaption strong{color:#fff;}

  /* ---- plain lists that read as tags ---- */
  ul.chips{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px;}
  ul.chips li{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--rule);font-size:15px;font-weight:500;color:var(--navy);}
  .navy ul.chips li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;}

  /* ---- two columns: words on one side, a picture or list on the other ---- */
  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;}
  .split.top{align-items:start;}
  .split p + p{margin-top:14px;}
  .pull{font-size:24px;line-height:1.35;font-weight:600;color:var(--navy);letter-spacing:-.01em;max-width:28ch;}
  .navy .pull{color:#fff;}
  .pull .mark{background:var(--amber);color:var(--navy);border-radius:.18em;padding:0 .18em;white-space:nowrap;}   /* never split a highlight across lines (Sean, 2026-10-20) */

  /* ---- numbered steps with a line that draws between them ---- */
  .steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px;counter-reset:step;}
  .steps::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:var(--rule);}
  .steps .line{position:absolute;left:28px;right:28px;top:27px;height:2px;background:var(--orange);transform:scaleX(var(--p,1));transform-origin:0 50%;}
  .step{position:relative;}
  .step .num{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
    background:var(--navy);color:#fff;font-weight:700;font-size:20px;margin-bottom:18px;box-shadow:0 0 0 6px var(--paper);}
  .canvas .step .num{box-shadow:0 0 0 6px var(--canvas);}
  .step p{margin-top:8px;color:var(--muted);font-size:16px;}
  /* in order (Sean, 2026-10-20): site.js arms the row, then step 1 is lit, the line draws to 2 and 2
     appears, then to 3 and 3 appears. Sized (with or without motion), the track and line run exactly from the first number's
     centre to the last's (--x1/--span, measured). Without the script, or with reduced motion, all
     three steps simply show with the full line. Transitions switch on (is-live) only after the
     empty start state has painted, so the first segment draws from step 1 like the second. */
  .steps.is-sized::before,.steps.is-sized .line{left:var(--x1);right:auto;width:var(--span);}
  .steps.is-live .line{transition:transform .7s cubic-bezier(.77,0,.175,1);}
  .steps.is-live .step .num{transition:background-color .3s ease,color .3s ease,box-shadow .3s ease,transform .4s cubic-bezier(.23,1,.32,1);}
  .steps.is-live .step h3,.steps.is-live .step p{transition:opacity .45s cubic-bezier(.23,1,.32,1),transform .45s cubic-bezier(.23,1,.32,1);}
  .steps.is-live .step p{transition-delay:.06s;}
  .steps.is-armed .step:not(.is-on) .num{background:#fff;color:var(--muted);transform:scale(.92);
    box-shadow:0 0 0 6px var(--paper),inset 0 0 0 2px var(--rule);}
  .canvas .steps.is-armed .step:not(.is-on) .num{box-shadow:0 0 0 6px var(--canvas),inset 0 0 0 2px var(--rule);}
  .steps.is-armed .step:not(.is-on) h3,.steps.is-armed .step:not(.is-on) p{opacity:0;transform:translateY(8px);}

  /* ---- warning signs: a numbered list with a progress rail ---- */
  .signs{position:relative;margin-top:30px;display:grid;gap:14px;max-width:900px;}
  .sign{position:relative;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:24px 26px;border:1px solid var(--rule);border-radius:24px;background:#fff;}
  .sign .n{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--canvas);color:var(--navy);font-weight:700;font-size:20px;
    transition:background-color .35s ease,color .35s ease;}
  .sign.is-seen .n{background:var(--amber);}
  .sign p{margin-top:8px;color:var(--muted);}
  .sign blockquote{margin:12px 0 0;padding-left:14px;border-left:3px solid var(--amber);font-weight:600;color:var(--navy);}

  /* ---- the contact band that closes most pages (same as the home page's) ---- */
  section.cta{background:#ECECEC;}

  /* ---- service area list ---- */
  .towns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 28px;margin-top:20px;padding:0;list-style:none;}
  .towns li{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--navy);}
  .towns li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none;}
  /* each town in a white pill so the list reads as tidy chips on the canvas band (Sean, 2026-10-20) */
  .towns{display:flex;flex-wrap:wrap;gap:10px;}
  .towns li{background:#fff;border:1px solid var(--rule);border-radius:999px;padding:9px 16px 9px 13px;line-height:1.25;
    white-space:nowrap;box-shadow:0 1px 2px rgba(30,58,95,.05);}
  /* the two town lists as two white cards side by side; the chips inside turn the site's light gray */
  .split.town-cards{align-items:stretch;}   /* beats .split.top{align-items:start}: both cards the same height */
  .town-card{background:#fff;border:1px solid var(--rule);border-radius:28px;padding:34px 32px;}
  .town-card .sec-head h2{font-size:34px;}
  .town-card .towns li{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:none;}   /* navy chips, white names (11.5:1), amber dot kept (Sean, 2026-10-20) */
  @media (max-width:860px){ .town-card{padding:24px 20px;} .town-card .sec-head h2{font-size:26px;} }

  /* ---- contact page ---- */
  .contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start;}
  .form{display:grid;gap:16px;padding:32px;border:1px solid var(--rule);border-radius:28px;background:#fff;}
  .form label{display:grid;gap:7px;font-size:15px;font-weight:600;color:var(--navy);}
  .form input,.form textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);padding:13px 16px;border:1.5px solid #8A939D;border-radius:14px;background:#fff;}
  .form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-color:var(--navy);}
  .form textarea{min-height:140px;resize:vertical;}
  .form .btn{justify-self:start;}
  .form .note{font-size:14px;color:var(--muted);}
  .form .sent{display:none;padding:14px 16px;border-radius:14px;background:var(--canvas);color:var(--navy);font-weight:500;}
  .form.is-sent .sent{display:block;}
  .form.is-failed .sent{background:#FDECEA;color:#7A1C12;}
  /* spam trap: off-screen, never shown or announced */
  .form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
  .info dl{margin:0;display:grid;gap:18px;}
  .info dt{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
  .info dd{margin:4px 0 0;font-size:19px;font-weight:600;color:var(--navy);}
  .info dd a{color:var(--navy);}
  .info p{margin-top:8px;color:var(--muted);}

  /* ---- memberships ---- */
  .members{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;}
  .members .tile{display:grid;place-items:center;height:120px;padding:16px 24px;border-radius:22px;background:#fff;}
  .members .tile.dark{background:#16304F;}
  .members img{max-height:88px;max-width:240px;width:auto;height:auto;display:block;}

  /* ---- big number with a count-up ---- */
  .bignum{display:flex;align-items:baseline;gap:12px;margin-top:24px;}
  .bignum b{font-size:72px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums;}
  .bignum span{font-size:18px;font-weight:600;color:var(--muted);max-width:14ch;line-height:1.3;}
  /* About, founder (2026-10-24): one centered column */
  .founder .bignum{justify-content:center;}
  .founder .bignum span{text-align:left;}
  .founder-copy{max-width:1000px;margin:32px auto 0;text-align:center;}   /* wider (Sean, 2026-10-24) */
  .founder-copy p{font-size:18px;line-height:1.65;max-width:none;}   /* the site's 704px reading cap pinned each line to the left */
  .founder-copy p + p{margin-top:16px;}

  /* ---- scroll reveal: content rises into place once, then stays put ---- */
  html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s var(--ease-out);}
  html.js [data-reveal].is-in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){ html.js [data-reveal]{opacity:1;transform:none;transition:none;} }

  /* ---- hero art: shared animation parts (each picture plays once, under 5 s, then rests) ---- */
  .art .draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);}
  .art.play .draw{animation:art-draw var(--dur,1.6s) var(--ease-out) var(--d,0s) forwards;}
  .art .pop{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;}
  .art.play .pop{animation:art-pop .5s cubic-bezier(.34,1.56,.64,1) var(--d,0s) forwards;}
  .art .fade{opacity:0;}
  .art.play .fade{animation:art-fade .6s ease var(--d,0s) forwards;}
  .art .rise{opacity:0;transform:translateY(14px);transform-box:fill-box;}
  .art.play .rise{animation:art-rise .6s cubic-bezier(.23,1,.32,1) var(--d,0s) forwards;}
  .art .spin{transform-box:view-box;transform-origin:var(--ox,50%) var(--oy,50%);}
  .art.play .spin{animation:art-spin var(--dur,2.4s) cubic-bezier(.45,0,.55,1) var(--d,0s) 1 both;}
  .art .wave{opacity:0;transform-box:fill-box;transform-origin:center;}
  .art.play .wave{animation:art-wave 1.6s ease-out var(--d,0s) 2 both;}
  .art .bar{transform-box:fill-box;transform-origin:50% 100%;}
  .art.play .bar{animation:art-bar .5s ease-in-out var(--d,0s) 7 alternate both;}   /* odd count: bars end tall */
  .art .travel{offset-rotate:0deg;opacity:0;}
  .art.play .travel{animation:art-travel 1.4s cubic-bezier(.45,0,.55,1) var(--d,0s) 2 both;}
  .art .needle{transform-box:view-box;transform-origin:230px 250px;transform:rotate(-70deg);}
  .art.play .needle{animation:art-needle 2.6s cubic-bezier(.34,1.3,.64,1) .5s forwards;}
  .art .ring{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);}
  .art.play .ring{animation:art-ring 1.8s ease-out var(--d,0s) 2 both;}
  @keyframes art-draw{to{stroke-dashoffset:0;}}
  @keyframes art-pop{to{opacity:1;transform:scale(1);}}
  @keyframes art-fade{to{opacity:1;}}
  @keyframes art-rise{to{opacity:1;transform:none;}}
  @keyframes art-spin{0%{transform:rotate(0deg);opacity:1;}85%{opacity:1;}100%{transform:rotate(720deg);opacity:0;}}   /* the sweep fades once it has done its two turns */
  @keyframes art-wave{0%{opacity:.7;transform:scale(.55);}100%{opacity:0;transform:scale(1.25);}}
  @keyframes art-bar{from{transform:scaleY(.35);}to{transform:scaleY(1);}}
  @keyframes art-travel{0%{offset-distance:0%;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
  @keyframes art-needle{0%{transform:rotate(-70deg);}55%{transform:rotate(52deg);}100%{transform:rotate(44deg);}}
  @keyframes art-ring{0%{opacity:.75;transform:scale(.4);}100%{opacity:0;transform:scale(1.6);}}
  /* reduced motion: every picture shows its finished state, nothing moves */
  @media (prefers-reduced-motion:reduce){
    .art .draw{stroke-dashoffset:0;}
    .art .pop,.art .fade,.art .rise{opacity:1;transform:none;}
    .art .needle{transform:rotate(44deg);}
    .art .wave,.art .ring,.art .travel,.art .spin{opacity:0;}
    .art.play *{animation:none!important;}
  }
  /* without scripts the pictures are simply shown finished */
  html:not(.js) .art .draw{stroke-dashoffset:0;}
  html:not(.js) .art .pop,html:not(.js) .art .fade,html:not(.js) .art .rise{opacity:1;transform:none;}
  html:not(.js) .art .needle{transform:rotate(44deg);}


  /* Managed IT picture (Sean, 2026-10-14): a heart-rate monitor. A straight red flatline for
     about 1 s; then a bright dot sweeps left to right at a steady 219 px/s (two beats per
     1.66 s pass, one beat every 0.83 s, about 72 a minute) with a wiped gap just ahead of it,
     wrapping at the right edge. The first pass overwrites the red line (the "ahead" layer
     shrinks toward the right) and its beats overshoot (the jolt). The heart beats lub-dub as
     each spike is drawn. Pause button (WCAG 2.2.2); also paused off screen and in a hidden tab.
     Reduced motion: a still green beat, no dot, no button. */
  .art .ecg-amp{transform:scaleY(1);}
  .art .ecg-trace{opacity:0;}
  .art .ecg-ahead{transform-origin:364px 0;}
  .art .ecg-ahead path{opacity:0;}
  .art .ecg-sweep{opacity:0;}
  .art .ecg-heart{transform-box:fill-box;transform-origin:center;}
  .art .ecg-heart path{fill:#D62839;}
  .art.play .ecg-ahead path{animation:art-fade .3s ease .1s forwards;}
  .art.play .ecg-trace{animation:art-fade .01s linear 1.2s forwards;}
  .art.play .ecg-ahead{animation:ecg-overwrite 1.66s linear 1.2s forwards;}
  .art.play .ecg-amp{animation:ecg-revive 1.4s cubic-bezier(.3,0,.3,1) 1.2s both;}
  .art.play .ecg-sweep{animation:art-fade .01s linear 1.2s forwards,ecg-sweep-x 1.66s linear 1.2s infinite;}
  .art.play .ecg-dot{animation:ecg-dot-y 1.66s linear 1.2s infinite;}
  .art.play .ecg-heart{animation:ecg-lubdub .83s ease-out 1.61s infinite;}
  .art.play .ecg-heart path{animation:ecg-fill-green .01s linear 1.2s forwards;}
  .art.is-paused [class*="ecg-"],.art.is-offscreen [class*="ecg-"],.art.is-tabhidden [class*="ecg-"]{animation-play-state:paused;}
  @keyframes ecg-overwrite{from{transform:scaleX(1);}to{transform:scaleX(0);}}
  @keyframes ecg-sweep-x{from{transform:translateX(0);}to{transform:translateX(364px);}}
  @keyframes ecg-revive{0%{transform:scaleY(.6);}18%{transform:scaleY(1.35);}40%{transform:scaleY(.8);}62%{transform:scaleY(1.08);}100%{transform:scaleY(1);}}
  @keyframes ecg-dot-y{0.000%{transform:translateY(0px);}16.484%{transform:translateY(0px);}18.681%{transform:translateY(-8px);}20.879%{transform:translateY(0px);}26.374%{transform:translateY(0px);}28.022%{transform:translateY(14px);}30.769%{transform:translateY(-48px);}33.516%{transform:translateY(28px);}35.165%{transform:translateY(0px);}38.462%{transform:translateY(0px);}39.835%{transform:translateY(-6px);}41.209%{transform:translateY(-8px);}42.582%{transform:translateY(-6px);}43.956%{transform:translateY(0px);}50.000%{transform:translateY(0px);}66.484%{transform:translateY(0px);}68.681%{transform:translateY(-8px);}70.879%{transform:translateY(0px);}76.374%{transform:translateY(0px);}78.022%{transform:translateY(14px);}80.769%{transform:translateY(-48px);}83.516%{transform:translateY(28px);}85.165%{transform:translateY(0px);}88.462%{transform:translateY(0px);}89.835%{transform:translateY(-6px);}91.209%{transform:translateY(-8px);}92.582%{transform:translateY(-6px);}93.956%{transform:translateY(0px);}100.000%{transform:translateY(0px);}}
  @keyframes ecg-fill-green{to{fill:#1B9E5A;}}
  @keyframes ecg-lubdub{0%{transform:scale(1);}12%{transform:scale(1.3);}24%{transform:scale(1);}34%{transform:scale(1.18);}48%{transform:scale(1);}100%{transform:scale(1);}}
  .anim-toggle{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;padding:0;display:grid;place-items:center;
    border:1px solid var(--rule);border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;
    transition:background-color .15s ease,border-color .15s ease;}
  .anim-toggle svg{width:13px;height:13px;}
  .anim-toggle .i-play{display:none;}
  .anim-toggle[aria-pressed="true"] .i-pause{display:none;}
  .anim-toggle[aria-pressed="true"] .i-play{display:block;}
  @media (hover:hover) and (pointer:fine){ .anim-toggle:hover{background:var(--canvas);border-color:#9AA3AD;} }
  .anim-toggle:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
  .anim-toggle::before{content:"";position:absolute;inset:-7px;}   /* 44px touch target around a 30px button */
  @media (prefers-reduced-motion:reduce){
    .art .ecg-trace{opacity:1;} .art .ecg-ahead,.art .ecg-sweep{display:none;} .art .ecg-amp{transform:none;}
    .art .ecg-heart path{fill:#1B9E5A;} .anim-toggle{display:none;}
  }
  html:not(.js) .art .ecg-trace{opacity:1;}
  html:not(.js) .art .ecg-ahead,html:not(.js) .art .ecg-sweep{display:none;}
  html:not(.js) .art .ecg-heart path{fill:#1B9E5A;}
  html:not(.js) .anim-toggle{display:none;}
  /* ---- section diagrams that play when scrolled into view ---- */
  .diagram{width:100%;max-width:520px;margin:0 auto;}
  .diagram svg{display:block;width:100%;height:auto;overflow:visible;}

  @media (max-width:1020px){
    .g4{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:860px){
    .page-hero{padding:32px 0 32px;}
    .page-hero .hero-grid{grid-template-columns:1fr;gap:28px;}
    .page-hero h1{font-size:36px;}
    .art{max-width:360px;margin:0 auto;}
    .art.photo{max-width:300px;} .art.photo.sq{max-width:380px;}
    .page-hero.kev .hero-grid{grid-template-columns:1fr;gap:28px;}
    .page-hero.kev .art.photo.sq{width:100%;max-width:440px;margin:0 auto;} .page-hero.kev .hero-copy{padding-bottom:0;}
    .g4,.split,.contact-grid{grid-template-columns:1fr;}
    .split{gap:28px;}
    .steps{grid-template-columns:1fr;gap:22px;}
    .steps::before,.steps .line{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;}
    .steps .line{transform:scaleY(var(--p,1));transform-origin:50% 0;}
    .steps.is-sized::before,.steps.is-sized .line{left:27px;width:2px;top:var(--x1);bottom:auto;height:var(--span);}
    .step{padding-left:76px;min-height:56px;}
    .step .num{position:absolute;left:0;top:0;margin:0;}
    .sign{grid-template-columns:1fr;gap:12px;padding:20px;}
    .towns{grid-template-columns:repeat(2,minmax(0,1fr));}
    .pull{font-size:21px;}
    .bignum b{font-size:56px;}
    .form{padding:22px;}
  }

  /* 7. B-roll banner on the service pages (2026-10-20). The clip fills the band behind a navy wash:
     at .8 over a pure-white frame white text still measures 6.3:1, so the copy column holds 4.5:1
     over any footage. Until a clip is cut the band is the plain navy ground. */
  .page-hero.vid{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;
    min-height:560px;display:flex;align-items:center;padding:72px 0 80px;}
  .page-hero.vid > .wrap{width:100%;}
  .vid-media{position:absolute;inset:0;z-index:-2;}
  .vid-clip{width:100%;height:100%;object-fit:cover;object-position:68% 14%;display:block;}   /* crop from the bottom so heads stay in (Sean, 2026-10-23) */
  .vid-scrim{position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg,rgba(30,58,95,.84) 0,rgba(30,58,95,.8) 58%,rgba(30,58,95,.42) 100%);}
  @media (max-width:1180px){ .vid-scrim{background:rgba(30,58,95,.8);} }
  .page-hero.vid .hero-copy{max-width:620px;}
  .page-hero.vid h1,.page-hero.vid .lede{color:#fff;}
  .page-hero.vid .eyebrow{color:#fff;}
  .page-hero.vid .eyebrow::before{background:var(--orange);}
  .page-hero.vid .crumbs,.page-hero.vid .crumbs a,.page-hero.vid .crumbs li+li::before{color:rgba(255,255,255,.88);}
  .page-hero.vid .crumbs a:hover{color:#fff;}
  .page-hero.vid :focus-visible{outline-color:#fff;}
  .vid-toggle{position:absolute;right:max(16px,calc((100vw - 1200px)/2));bottom:20px;width:36px;height:36px;padding:0;
    display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(30,58,95,.55);color:#fff;cursor:pointer;}
  .vid-toggle[hidden]{display:none;}
  .vid-toggle .i-play{display:none;}
  .vid-toggle[aria-pressed="true"] .i-play{display:block;}
  .vid-toggle[aria-pressed="true"] .i-pause{display:none;}
  .vid-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px;}
  @media (hover:hover) and (pointer:fine){ .vid-toggle:hover{background:rgba(30,58,95,.85);border-color:#fff;} }
  @media (max-width:860px){
    .page-hero.vid{min-height:0;padding:40px 0 48px;}
    .vid-scrim{background:rgba(30,58,95,.8);}
    .vid-toggle{bottom:14px;}
  }

  /* 8. document pages (privacy policy, how we handle your data; 2026-10-20) */
  .page-hero.doc .hero-copy{max-width:760px;}
  .prose{max-width:760px;}
  .prose h2{font-size:26px;margin-top:40px;}
  .prose h2:first-child{margin-top:0;}
  .prose p,.prose li{font-size:17px;line-height:1.65;color:var(--ink,#2E2E2E);}
  .prose p{margin-top:12px;}
  .prose ul{margin:12px 0 0;padding-left:22px;}
  .prose li+li{margin-top:6px;}
  .prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
  .prose .updated{color:var(--muted);font-size:15px;}
  .doc-qa{max-width:820px;}
  .doc-qa .qa > div + div{margin-top:8px;}
  .tbc{display:block;margin-top:10px;padding:10px 14px;border:1px dashed #9AA3AD;border-radius:12px;background:#fff;
    color:var(--navy);font-size:15px;line-height:1.5;}
  .tbc strong{font-weight:700;}
  .footer-legal{display:inline-flex;gap:18px;flex-wrap:wrap;}
  .footer-legal a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
  .more-link{margin-top:22px;font-weight:600;}
  .more-link a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
  @media (max-width:860px){ .prose h2{font-size:22px;} .prose p,.prose li{font-size:16px;} }

  /* ---- cookie choice (2026-10-24): bottom notice + footer "Cookie settings" ---- */
  .consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:45;display:flex;justify-content:center;pointer-events:none;}
  .consent[hidden]{display:none;}
  .consent-in{pointer-events:auto;width:100%;max-width:880px;display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap;
    background:#fff;color:var(--ink);border:1px solid var(--rule);border-radius:22px;padding:18px 22px;
    box-shadow:0 2px 6px rgba(30,58,95,.08),0 18px 40px -16px rgba(30,58,95,.45);
    animation:consent-in .22s cubic-bezier(.23,1,.32,1);}
  @keyframes consent-in{from{transform:translateY(8px);}to{transform:none;}}   /* no opacity: a stalled animation must never leave it invisible */
  .consent-in p{flex:1 1 360px;margin:0;font-size:15px;line-height:1.55;}
  .consent-in p strong{color:var(--navy);}
  .consent-in a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
  .consent-acts{display:flex;gap:10px;flex:none;}
  .consent-acts .btn{margin:0;font:inherit;font-size:15px;font-weight:600;cursor:pointer;min-height:44px;}
  .consent-acts .btn-ghost{--btn-text:var(--navy);--btn-border:var(--navy);}
  .consent :focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
  @media (prefers-reduced-motion:reduce){ .consent-in{animation:none;} }
  @media (max-width:560px){ .consent{left:10px;right:10px;bottom:10px;} .consent-in{padding:16px;} .consent-acts{width:100%;} .consent-acts .btn{flex:1;} }
  .cookie-settings{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
  .cookie-settings:focus-visible{outline:2px solid #fff;outline-offset:3px;}
  html:not(.js) .cookie-settings{display:none;}
  /* home hero clip pause button (WCAG 2.2.2, 2026-10-24): solid navy so it holds 3:1 on the white video */
  .hero-media .vid-toggle{right:14px;bottom:14px;background:var(--navy);border-color:var(--navy);z-index:2;}
  .hero-media .vid-toggle:focus-visible{outline-color:var(--navy);}

  /* ---- accessibility review fixes (2026-10-26) ---- */
  /* Contact: the extra lines are part of the definition (a <p> inside a dl group is invalid, WCAG 1.3.1) */
  .info dd.note{margin-top:8px;font-size:inherit;font-weight:400;color:var(--muted);}
  .info dd.note a{color:var(--navy);}
  /* focus never lands under the sticky header (WCAG 2.4.11), whatever the browser's scroll-into-view does */
  html{scroll-padding-top:84px;}
  /* footer links reach the 24px target size (WCAG 2.5.8) */
  .footer-legal a,.footer-legal .cookie-settings{display:inline-block;padding:2px 0;min-height:24px;line-height:20px;}
  /* Escape dismisses an open dropdown (site.js 1b) */
  nav .nav-item.is-dismissed .sub{opacity:0;visibility:hidden;}
  nav .nav-item.is-dismissed > a .caret{transform:none;}
  /* home "Sound familiar?": pause for the rotating word, top right of the section, level with the eyebrow */
  #why > .wrap{position:relative;}
  .rot-toggle{position:absolute;top:0;right:32px;}
  @media (max-width:860px){ .rot-toggle{right:20px;} }

  /* footer gains a Company column on the full site; phones keep the single column */
  @media (min-width:861px){ .fgrid{grid-template-columns:1.3fr 1fr 1fr 1fr;} }
  .skip{position:absolute;left:-9999px;top:10px;z-index:60;padding:10px 16px;border-radius:12px;background:#fff;color:var(--navy);font-weight:600;}
  .skip:focus{left:16px;}
  .art.dia{aspect-ratio:auto;max-width:520px;margin:0 auto;}