/* home-system/home.css — the approved home design (GENERATED by home_apply.py from /colour-system-20-k3w/, 2026-09-17).
   Edit the design in the lab and run the script again; do not edit this file. */
/* ===== base/m9r-first.css ===== */
/* ==========================================================================
   M9R · THE FIRST SCREEN IN V5 "BUILT STRUCTURE"
   --------------------------------------------------------------------------
   The header, its section rail, the hero and the All Work band exactly as
   /doctor/dmd-uxr-6ivzlb/v5.html draws them, on today's live homepage.

   GENERATED by _m9r_make_css.py from three parts:
     _m9r_prelude.css  this file — the lane, v5's tokens, the band's frame
     v5.css §3 + §4    the header and the hero/band, copied VERBATIM
     _m9r_tail.css     v5's responsive rules for those same parts only
   Edit the parts and re-run; do not edit m9r-first.css by hand.

   WHAT IS PAGE-WIDE AND WHAT IS NOT
   The LANE is page-wide on purpose: --maxw 82vw between 940 and 1480 gives
   the 130px edge at 1440 the header and the band stand on, and every section
   that builds its frame from --grid-edge follows it (m9r-align.css squares
   the ones that do not). v5's other shared tokens — the shelf, the paper
   ladder, the CTA edge and the selection ink — re-skin whatever reads them,
   so they are set on the header and the first screen ONLY. The sections
   below keep their live look; only their edges move.
   ========================================================================== */

:root{
  /* -- the lane (v5 §1) ------------------------------------------------- */
  --pad:  clamp(18px, 4vw, 84px);
  --maxw: clamp(940px, 82vw, 1480px);
  --wpad: var(--grid-edge);

  /* -- v5's own tokens: prefixed, read by nothing but this layer --------- */
  --v5-paper:  #FFFFFF;
  --v5-tint:   #EDF1F6;
  --v5-row:    #E3E9F1;
  --v5-row-2:  #EDF1F6;
  --v5-hov:    #F5F7FA;
  --v5-well:   #F4F6FA;

  --v5-edge:   #B4BFCD;
  --v5-edge-2: #D3DAE3;
  --v5-edge-h: #8D9BAC;
  --v5-ew:     1.5px;

  --v5-sel:     #17203A;
  --v5-sel-2:   #27324F;
  --v5-sel-ink: #FFFFFF;
  --v5-sel-dim: #B9C2D4;
  --v5-sel-dim2:#98A4BC;
  --v5-sel-h:   #232E4E;
  --v5-ring:    rgba(23,32,58,.42);

  --v5-r:   3px;
  --v5-r-2: 2px;

  --v5-ink:    #0B0D12;
  --v5-ink-2:  #39404B;
  --v5-ink-3:  #5C6675;
  --v5-ink-4:  #8B94A2;
  --v5-eyebrow-fs: 10.5px;
  --v5-sub-fs: clamp(15.5px, 1.02vw, 16.5px);
  --v5-prose:  13.5px;
  --v5-prose-lh: 1.55;

  --v5-noshadow: 0 0 0 0 rgba(11,13,18,0);
}

/* the shared tokens v5 retunes, held to the first screen */
header.bar,
.screen{
  --sh-shelf:  var(--v5-tint);
  --sh-floor:  var(--v5-paper);
  --sh-close:  #E7EDF6;
  --sh-edge:   var(--v5-edge);
  --sh-edge-c: var(--v5-edge);

  --pl-row:    var(--v5-row);
  --pl-row-2:  var(--v5-row-2);
  --pl-row-3:  var(--v5-well);
  --pl-hov:    var(--v5-hov);
  --pl-hov-s:  var(--v5-hov);
  --pl-prs:    var(--v5-row-2);
  --pl-ring:   var(--v5-edge-2);
  --pl-ring-2: var(--v5-edge);
  --pl-ink:    var(--v5-ink);
  --pl-off:    var(--v5-ink-2);

  --cta-edge-1: #5F6B6E;
  --cta-edge:   var(--v5-edge);
  --cta-edge-h: var(--v5-edge-h);
  --cta-ring:   var(--v5-ring);

  --hr-sel:     var(--v5-sel);
  --hr-sel-2:   var(--v5-sel-2);
  --hr-quiet:   #6E7787;
  --hr-quiet-2: #C0C8D4;
}

/* the house rule: an authored display beats the UA sheet */
[hidden]{ display: none !important; }

/* -- the band's frame (v5 §2, the band's lines only) ----------------------
   v5 gives up the band's lower hairline, and so does this: a 1.5px line there
   lifts the whole hero 1px off v5's position. */
.tail.show .stage{
  background: var(--v5-tint);
  border-top: var(--v5-ew) solid var(--v5-edge);
  border-bottom: 0;
}


/* ==========================================================================
   3 · SECTION 0 — THE HEADER AND ITS IN-PAGE RAIL
   Two rows, one rectangle, on the page's own gutter. The section rail below
   the pages is a locator, so its current entry takes the selected ink and a
   solid 2px mark rather than a second colour.
   ========================================================================== */
header.bar{
  --nav-gutter: var(--grid-edge);
  border-bottom: var(--v5-ew) solid var(--v5-edge);
  background: var(--v5-paper);
}
header.bar .nav a.ptab{ font-weight: 600; color: var(--v5-ink-2); }
header.bar .nav a.ptab:hover{ color: var(--v5-ink); }
header.bar .nav a.ptab.cur{ color: var(--v5-sel); font-weight: 750; }
header.bar .nav a.ptab.cur::before{ height: 2px; background: var(--v5-sel); }
header.bar .krow{ border-top: 1px solid var(--v5-edge-2); }
header.bar .krow a.kid{
  font-size: 11.5px; font-weight: 550; letter-spacing: .01em; color: var(--v5-ink-3);
  padding-bottom: 3px;
}
header.bar .krow a.kid:hover{ color: var(--v5-ink); }
header.bar .krow a.kid.on{ color: var(--v5-sel); font-weight: 700; }
header.bar .krow a.kid.on::after{ height: 2px; background: var(--v5-sel); }
header.bar .barbtn,
header.bar .sitemenu,
header.bar .barmenu{
  border-radius: var(--v5-r);
  box-shadow: inset 0 0 0 var(--v5-ew) var(--cta-edge-1);
}
header.bar .barmenu,
header.bar .sitemenu{
  background: var(--v5-paper);
  color: var(--v5-ink);
  box-shadow: inset 0 0 0 var(--v5-ew) var(--v5-edge);
}
header.bar .barmenu:hover,
header.bar .sitemenu:hover{ box-shadow: inset 0 0 0 var(--v5-ew) var(--v5-edge-h); }
header.bar .barmenu:active,
header.bar .sitemenu:active{ background: var(--v5-row-2); }
header.bar .sitemenu[aria-expanded="true"]{
  background: var(--v5-sel);
  color: var(--v5-sel-ink);
  box-shadow: none;
}
header.bar .barbtn{
  height: 38px;
  background: var(--v5-sel);
  color: var(--v5-sel-ink);
  font-weight: 700;
  letter-spacing: -.008em;
  box-shadow: none;
}
header.bar .barbtn:hover{ background: var(--v5-sel-2); }
header.bar .barbtn:active{ background: var(--v5-sel); }

/* -- the two rows are one rectangle, so the wordmark, the page tabs and the
      section rail all start on the page's own vertical ---------------------- */
header.bar .brow{ align-items: center; }
header.bar .wm{ font-weight: 800; letter-spacing: -.036em; color: var(--v5-ink); }
header.bar .wm .mark{ border-radius: var(--v5-r-2); }

/* THE SECTION RAIL is a locator, not an offer: it is set on a tint strip so
   the reader can see it is a second, subordinate row rather than more
   navigation, and the current entry takes the selection ink plus a solid 2px
   mark on the strip's own lower edge — the same "a mark on the line the
   control stands on" the proof chooser and the service index use. */
header.bar .krow{
  background: var(--v5-row-2);
  border-top: 1px solid var(--v5-edge-2);
}
header.bar .krow .kids{ align-items: center; }
header.bar .krow a.kid{ transition: color .14s ease; }
header.bar .krow a.kid.on::after{ border-radius: 0; bottom: -3px; }
header.bar .krow a.kid:focus-visible{
  outline: 3px solid var(--v5-sel); outline-offset: 3px; border-radius: 0;
}
header.bar .nav a.ptab:focus-visible{
  outline: 3px solid var(--v5-sel); outline-offset: 4px; border-radius: 0;
}
header.bar .nav a.ptab::after{ font-weight: 750; }
header.bar .nav a.ptab .ptip{
  border-radius: var(--v5-r-2);
  box-shadow: none;
  background: var(--v5-sel);
  color: var(--v5-sel-ink);
  font-size: 11px;
  letter-spacing: 0;
}

/* the two hanging panels — the site menu and the services menu — are objects,
   so they take the object edge and the object corner and give up their drop
   shadow. Neither rule touches `display`: #navSvc is a [hidden] target. */
header.bar .nd[data-open="true"] .nd-p,
header.bar .svcm{
  border: var(--v5-ew) solid var(--v5-edge);
  border-radius: var(--v5-r);
  box-shadow: none;
  background: var(--v5-paper);
}
header.bar .nd-h{
  font-size: 10px; letter-spacing: .18em; color: var(--v5-ink-4); font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid var(--v5-edge-2); margin-bottom: 10px;
}
header.bar .nd-p a,
header.bar .svcm a{ border-radius: var(--v5-r-2); font-size: var(--v5-prose); }
header.bar .nd-p a:hover,
header.bar .svcm a:hover{ background: var(--v5-row-2); color: var(--v5-ink); }
header.bar .nd-na,
header.bar .svcm .nd-na{ font-size: var(--v5-prose); color: var(--v5-ink-4); }
header.bar .nd-soon{
  border-radius: var(--v5-r-2); border: 1px solid var(--v5-edge-2);
  background: var(--v5-paper); font-size: 8.5px; letter-spacing: .1em;
}
header.bar .nd-live{ border-radius: 0; width: 5px; height: 5px; box-shadow: none; }


/* ==========================================================================
   4 · SECTION 1 — THE HERO AND THE ALL WORK BAND
   --------------------------------------------------------------------------
   The headline comes off the zoom (4.75cqw of the page's own lane, not the
   old wide gutter's), the microline rises to meet it, and the capture stops
   being a floating pill: it is a hard-edged object with a prefix cell, a
   field and a filled action, all on one 1.5px frame.
   ========================================================================== */
.screen{ background: var(--v5-paper); }
.screen .tex{
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(100% 70% at 50% 32%, #000 14%, transparent 76%);
          mask-image: radial-gradient(100% 70% at 50% 32%, #000 14%, transparent 76%);
}
.screen .hero .label{
  font-size: 11.5px; letter-spacing: .2em; font-weight: 600; color: var(--v5-ink-3);
}
.screen .hero h1{
  font-size: clamp(31px, min(4.75cqw, 7.6vh), 78px);
  line-height: 1.03;
  letter-spacing: -.04em;
  color: var(--v5-ink);
}
.screen .hero .microline{
  font-size: 14.5px; color: var(--v5-ink-2); letter-spacing: 0;
}
.screen .hero .microline b{ color: var(--g-green); font-weight: 750; }
.screen .hero .microline i{ color: var(--v5-edge); padding: 0 .55em; }

/* the capture, as one built object */
.screen .hero .capture{
  padding: 0;
  gap: 0;
  border: var(--v5-ew) solid var(--v5-edge);
  border-radius: var(--v5-r);
  background: var(--v5-paper);
  box-shadow: none;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.screen .hero .capture:hover{ border-color: var(--v5-edge-h); box-shadow: none; }
.screen .hero .capture:focus-within{
  border-color: var(--v5-sel);
  box-shadow: 0 0 0 3px var(--v5-ring);
}
.screen .hero .capture .capfix{
  background: var(--v5-row);
  border-right: 1px solid var(--v5-edge-2);
  color: var(--v5-ink-3);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -.01em;
  border-radius: 0;
}
.screen .hero .capture input{
  background: var(--v5-paper);
  font-size: 16px;
  border-radius: 0;
}
.screen .hero .capture button{
  border-radius: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.01em;
  box-shadow: inset var(--v5-ew) 0 0 var(--cta-edge-1);
  transition: background .15s ease;
}
.screen .hero .capture button:hover{ background: var(--cta-h); transform: none; }
.screen .hero .capture button:active{ background: var(--cta-a); }
.screen .hero .sent{ font-size: 15px; font-weight: 700; }

/* -- the work band -------------------------------------------------------- */
.tail.show{ --aw-strip: var(--v5-row); --aw-strip-line: var(--v5-edge); --aw-canvas: var(--v5-paper); }
.tail.show .stage{
  border-left: 0; border-right: 0; border-radius: 0;
  box-shadow: none;
  background: var(--v5-row);
}
.tail.show .tabs{
  padding-top: 12px;
  padding-bottom: 0;
  gap: 2px;
  background: var(--v5-row);
  box-shadow: inset 0 calc(-1 * var(--v5-ew)) 0 var(--v5-edge);
}
/* CHOOSE · a solid fill with reversed text, welded to the canvas it owns:
   the tab's own ground is painted UNDER the strip's seam, so the seam breaks
   for exactly the tab's width and the two surfaces become one object. */
.tail.show .tabs button{
  border-radius: var(--v5-r) var(--v5-r) 0 0;
  min-height: 44px;
  padding: 10px 16px 11px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--v5-ink-2);
  background: none;
  box-shadow: none;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.tail.show .tabs button svg{ opacity: .62; }
.tail.show .tabs button:hover:not([aria-selected="true"]){
  background: var(--v5-hov);
  color: var(--v5-ink);
  box-shadow: inset 0 0 0 1px var(--v5-edge-2);
}
.tail.show .tabs button:hover:not([aria-selected="true"]) svg{ opacity: .9; }
.tail.show .tabs button:active:not([aria-selected="true"]){ background: var(--v5-row-2); }
.tail.show #tabs button[aria-selected="true"],
.tail.show .tabs button[aria-selected="true"]{
  background: var(--v5-sel);
  color: var(--v5-sel-ink);
  font-weight: 750;
  border-radius: var(--v5-r) var(--v5-r) 0 0;
  box-shadow: none;
}
.tail.show #tabs button[aria-selected="true"] svg,
.tail.show .tabs button[aria-selected="true"] svg{ opacity: 1; stroke: var(--v5-sel-ink); }
/* an outward ring is clipped by the strip's own overflow-x, so the ring is
   drawn inward — and reversed on the chosen tab, which is already navy */
.tail.show .tabs button:focus-visible{
  outline: 3px solid var(--v5-sel);
  outline-offset: -3px;
  border-radius: var(--v5-r) var(--v5-r) 0 0;
}
.tail.show .tabs button[aria-selected="true"]:focus-visible{ outline-color: var(--v5-paper); }
.tail.show .drawer{ background: var(--v5-paper); border-radius: 0; box-shadow: none; }
.tail.show .head h2{ font-size: clamp(17px, 1.3vw, 20px); letter-spacing: -.028em; }
.tail.show .head p{ font-size: var(--v5-prose); color: var(--v5-ink-3); }

/* the cards, and the one hover the whole page shares */
.tail.show{ --wk-face: var(--v5-paper); --wk-edge: var(--v5-edge-2); --wk-edge-hi: var(--v5-edge-h);
            --wk-rest: var(--v5-noshadow); --wk-hover: var(--v5-noshadow); --wk-r: var(--v5-r); }
.tail.show .card{
  border: 1px solid var(--v5-edge-2);
  border-radius: var(--v5-r);
  background: var(--v5-paper);
  box-shadow: none;
  transition: border-color .14s ease, transform .1s ease;
}
.tail.show .card:hover{ border-color: var(--v5-edge-h); box-shadow: none; transform: translateY(-1px); }
.tail.show .card:active{ transform: none; }
.tail.show .door{ cursor: pointer; }
.tail.show .door .ic{ color: var(--v5-sel); }
.tail.show .door h3{ font-size: 15px; letter-spacing: -.024em; color: var(--v5-ink); }
.tail.show .door h3 span{ color: var(--v5-ink-3); font-weight: 500; }
.tail.show .door .say{ color: var(--v5-ink-3); }
.tail.show .door .pill{
  border-radius: var(--v5-r-2);
  background: var(--v5-row);
  color: var(--v5-sel);
  font-weight: 700;
  padding: 4px 9px;
  font-size: 12px;
}
.tail.show .door .go{ color: var(--v5-sel); font-weight: 700; }
.tail.show .door .peek{ border: 1px solid var(--v5-edge-2); border-radius: var(--v5-r-2); background: var(--v5-well); }
.tail.show .ba .box{ border: 1px solid var(--v5-edge-2); border-radius: var(--v5-r-2); background: var(--v5-paper); }
.tail.show .ba .box.after{ border-color: #A9C9B5; background: #F3F9F5; }
.tail.show .piece .win{ border-bottom: 1px solid var(--v5-edge-2); }
.tail.show .name .chip{ border: 1px solid var(--v5-edge-2); border-radius: var(--v5-r-2); background: var(--v5-row-2); }
.tail.show .arrows button{
  width: 40px; height: 40px;
  border: var(--v5-ew) solid var(--v5-edge);
  border-radius: var(--v5-r);
  background: var(--v5-paper);
  color: var(--v5-ink-2);
  transition: border-color .14s ease, color .14s ease, transform .1s ease;
}
.tail.show .arrows button:hover:not([disabled]){
  border-color: var(--v5-edge-h); color: var(--v5-ink); transform: translateY(-1px);
}
.tail.show .arrows button:active:not([disabled]){ transform: none; background: var(--v5-row-2); }

/* the Google Ads tab's client rail, inside the band */
.tail.show .gah #q7.cc .mp-i,
#q7.cc.rz6 .mp-i{
  background: var(--v5-row-2);
  border: 1px solid var(--v5-edge-2);
  border-radius: var(--v5-r);
  box-shadow: none;
}
.tail.show .gah #q7.cc .mp-i:hover,
#q7.cc.rz6 .mp-i:hover{ background: var(--v5-hov); border-color: var(--v5-edge-h); }
.tail.show .gah #q7.cc .mp-i.is-sel,
.tail.show .gah #q7.cc .mp-i.is-sel:hover,
#q7.cc.rz6 .mp-i.is-sel,
#q7.cc.rz6 .mp-i.is-sel:hover{
  background: var(--v5-paper);
  border-color: var(--v5-sel);
  box-shadow: inset 0 0 0 1px var(--v5-sel);
}
#q7 .mp-i.is-sel .cc-cue{ background: var(--v5-sel); color: var(--v5-sel-ink); border-radius: var(--v5-r-2); }


/* ==========================================================================
   THE BUTTON LADDER — v5 §13, the first screen's two ranks only
   Rank 1: the hero's submit, a Glacier fill with a 1.5px edge on 3px corners.
   Rank 3: the band's tail link, text on a rule. It sits here, before the
   responsive block, because v5's phone rule re-squares the submit after it.
   ========================================================================== */
.screen .hero .capture button{
  border-radius: var(--v5-r);
  background: var(--cta);
  color: var(--cta-fg);
  font-weight: 750;
  letter-spacing: -.008em;
  box-shadow: inset 0 0 0 var(--v5-ew) var(--cta-edge-1);
  transition: background .14s ease, transform .1s ease, box-shadow .14s ease;
}
.screen .hero .capture button:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 var(--v5-ew) var(--cta-edge-1),
              0 0 0 2px var(--v5-paper), 0 0 0 5px var(--v5-sel);
}
.screen .tailfoot a{
  color: var(--v5-ink);
  font-weight: 700;
  border-bottom: var(--v5-ew) solid var(--v5-edge);
  padding-bottom: 2px;
  border-radius: 0;
  background: none;
}
.screen .tailfoot a:hover{ color: var(--v5-sel); border-bottom-color: var(--v5-sel); text-decoration: none; }


/* ==========================================================================
   RESPONSIVE — v5 §14, the header, hero and band rules only
   ========================================================================== */

/* 1281 and up: the header, the hero and the band keep the section gutter */
@media (min-width: 1281px){
  :root{ --wpad: var(--grid-edge); }
  .screen .hero .capture{ width: min(660px, 100%); }
  .screen .hero .capture input{ height: clamp(52px, 6.2vh, 60px); font-size: 16px; }
  .screen .hero .capture button{ height: clamp(52px, 6.2vh, 60px); padding: 0 28px; font-size: 15px; }
  .screen .hero .capture .capfix{ height: clamp(52px, 6.2vh, 60px); }
  .tail.show .tabs button{ font-size: 15px; padding: 11px 18px 12px; }
  .tail.show .tabs button svg{ width: 19px; height: 19px; }
}

@media (max-width: 1280px){
  .screen .hero .capture{ width: min(620px, 100%); }
}

/* phones */
@media (max-width: 760px){
  .screen .hero h1{ font-size: clamp(29px, 8.4vw, 40px); letter-spacing: -.034em; line-height: 1.06; }
  .screen .hero .label{ font-size: 10.5px; }
  .screen .hero .microline{ font-size: var(--v5-prose); }
  .screen .hero .capture{ flex-wrap: wrap; }
  .screen .hero .capture .capfix{ height: 52px; }
  .screen .hero .capture input{ height: 52px; }
  .screen .hero .capture button{
    height: 52px; width: 100%; border-radius: 0;
    box-shadow: inset 0 var(--v5-ew) 0 var(--cta-edge-1);
  }

  .tail.show .stage{ background: var(--v5-row); border-top: var(--v5-ew) solid var(--v5-edge); }
  .tail.show .tabs{
    padding: 8px var(--gut, 18px) 0;
    gap: 2px;
    border-bottom: 0;
    box-shadow: inset 0 calc(-1 * var(--v5-ew)) 0 var(--v5-edge);
  }
  .tail.show .tabs button{
    padding: 10px 13px 11px; font-size: 13.5px; min-height: 44px;
    border-radius: var(--v5-r) var(--v5-r) 0 0; background: none;
  }
  .tail.show .tabs button[aria-selected="true"]{
    background: var(--v5-sel); color: var(--v5-sel-ink); border-radius: var(--v5-r) var(--v5-r) 0 0;
  }
  .tail.show .tabs button[aria-selected="true"] svg{ stroke: var(--v5-sel-ink); }
  .tail.show .drawer{ padding: 12px 0 14px; }
  .tail.show .lane2{ margin: 0 var(--gut, 18px); gap: 10px; }
}

@media (max-width: 374px){
  .tail.show .tabs button{ padding: 10px 10px 11px; font-size: 13px; }
}

/* a touch screen gets the edge, never the 1px lift */
@media (hover: none){
  .tail.show .card:hover,
  .tail.show .arrows button:hover:not([disabled]){ transform: none; }
  .tail.show .tabs button:hover:not([aria-selected="true"]){ background: none; box-shadow: none; }
}
@media (hover: hover) and (pointer: fine){
  header.bar .krow a.kid:hover{ color: var(--v5-ink); }
}

@media (prefers-reduced-motion: reduce){
  .screen *, .screen *::before, .screen *::after,
  header.bar *{
    transition: none !important;
    animation: none !important;
  }
  .tail.show .card:hover,
  .tail.show .arrows button:hover:not([disabled]){ transform: none; }
}

/* ===== base/m9r-align.css ===== */
/* ==========================================================================
   M9R · THE REST OF THE HOMEPAGE ON THE FIRST SCREEN'S TWO EDGES
   --------------------------------------------------------------------------
   m9r-first.css puts the lane at v5's setting — 82vw between 940 and 1480,
   so 130px in at 1440, 220 at 1920, 42 at 1024 — and the header, the hero
   and the All Work band stand on it. Services, Industries, About and the
   footer build their frames from --grid-edge and followed on their own.
   This file is for the frames that measured their edge from something else
   (found by _m9r_frames.py at ten widths, 360 to 1920).

   GEOMETRY ONLY. No colour, ground, border, shadow, radius or type is set
   here, and nothing is moved between rows or columns — every section keeps
   its live look and its live structure; only where its edges fall changes.
   ========================================================================== */

/* -- Success Stories --------------------------------------------------------
   The rail was inset by --pad (58px at 1440) while the lane edge is 130. The
   first card now starts on the lane edge, the rail still runs on past the
   right edge as a scroll rail should, and the two arrows hang just outside
   the lane exactly as they hung outside --pad before. */
#ss1 .ss-rail{
  padding-inline: var(--grid-edge);
  scroll-padding-left: var(--grid-edge);
}
#ss1 .ss-prev{ left: max(10px, calc(var(--grid-edge) - 56px)); }
#ss1 .ss-next{ right: max(10px, calc(var(--grid-edge) - 56px)); }

/* -- Client Proof -----------------------------------------------------------
   One token drives the head, the chooser, the screenshot rail, the notice and
   the closing card. It was --pad; above the phone it is the lane edge (the
   phone layer already sets it to the 18px gutter, which is the lane there). */
@media (min-width: 761px){
  #hp1{ --hp-edge: var(--grid-edge); }
}
/* the chooser is a centred scroller: when it is wider than the screen a
   centred row loses its first tab off the left edge, where no scroll reaches
   it. `safe` centres it only while it fits. */
#hp1 .hp-tabs{ justify-content: safe center; }

/* -- Why Choose Us ----------------------------------------------------------
   The register had its own 1180px lane: right at 1440 by coincidence only —
   150px inside the lane at 1920, 64px outside it at 1280. */
#wcu8{ --wcu-edge: var(--grid-edge); }

/* -- FAQ --------------------------------------------------------------------
   bridge.css gives the FAQ its own 1120px measure, so its frame stood 30px
   inside the lane at 1440 and 180px inside at 1920. It takes the page lane. */
#faq10 #gfaq .gfaq-wrap{ width: min(var(--maxw), 100% - 2 * var(--pad)); }

/* -- Footer -----------------------------------------------------------------
   The contact column is 1fr of four, and "support@digitalmarketingdoctor.com"
   is one unbreakable word wider than that: it ran 53px past the lane's right
   edge at 1440, and at 981-1100 it widened the page itself (a horizontal
   scroll at 1024-1180 that was already on the live page). The column may no
   longer be narrower than its longest word, and the brand column gives up a
   little of its 1.5fr so the two link columns keep their labels on one line:
   from 1366 up no label wraps that did not already wrap on live. Same four
   columns, same order. */
@media (min-width: 981px){
  #sfoot .f-cols{
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(min-content,1.15fr);
  }
}

/* -- The header under 901 ---------------------------------------------------
   nav.css sets both header rows to a fixed 14px side padding here, so the
   wordmark, the burger and the section rail stood 4px outside the content at
   390 and 22px outside it at 900. They take the lane edge like the content. */
@media (max-width: 900px){
  header.bar .brow,
  header.bar .krow{ padding-inline: var(--grid-edge); }
}

/* -- Phones and small tablets: one gutter -----------------------------------
   The phone layer sets every section on --gut (18px) but the lane token used
   --pad (4vw), so between 451 and 760 the sections that follow the lane stood
   6px inside the ones on the gutter. One value now. */
@media (max-width: 760px){
  :root{ --pad: var(--gut, 18px); }
  /* Why Choose Us paid the gutter twice — an 18px wrapper padding around a
     register that already stands on the edge — so it began at 36, not 18 */
  #wcu8 .wt-wrap{ padding-inline: 0; }
  /* About's phone wrap was 100% - 32px: a 16px gutter beside everyone's 18 */
  #about5 .ab-wrap{ width: calc(100% - 2 * var(--gut, 18px)); }
}

/* ===== themes/k3-map.css ===== */
/* ==========================================================================
   K3W COMPONENT MAP - one paint map, twenty colour systems.

   A frozen copy of /home-solid-theme-q5c/themes/q5-map.css (the paint map of
   /home-v5-align-m9r), re-cut for the 2026-09-14 brief: a CTA and a selected
   tab must NOT share a colour treatment. Four separate role families:

     --k3-accent   brand voice: the full stops, "customers.", icons
     --k3-act      ACTION: the only solid, high-authority fill on the page
     --k3-sel      SELECTION mark: the rule / frame / label of a chosen control
     --k3-tab-*    the chosen PIECE (paper, tint, chip...) on its track

   Paint only: colour, background, border colour, shadow, radius, outline.
   No box property, so no element can move (_k3w_lock.py proves it).
   ========================================================================== */

[hidden]{ display:none !important; }

/* ---------- 0 · base-token bridge: anything not mapped below still lands
   inside the version instead of the old navy / glacier grey ------------- */
html:root{
  --brand: var(--k3-accent);
  --accent: var(--k3-accent);
  --g-blue: var(--k3-accent);
  --navy: var(--k3-ink);
  --v5-paper: var(--k3-paper);
  --v5-tint: var(--k3-ground);
  --v5-row: var(--k3-ground-2);
  --v5-row-2: var(--k3-ground);
  --v5-hov: var(--k3-hover);
  --v5-well: var(--k3-ground);
  --v5-edge: var(--k3-edge);
  --v5-edge-2: var(--k3-line);
  --v5-edge-h: var(--k3-ink-4);
  --v5-sel: var(--k3-sel);
  --v5-sel-2: var(--k3-sel-h);
  --v5-sel-h: var(--k3-sel-h);
  --v5-sel-ink: var(--k3-on-sel);
  --v5-sel-dim: var(--k3-on-sel-dim);
  --v5-sel-dim2: var(--k3-on-sel-dim);
  --v5-ring: var(--k3-focus-ring);
  --v5-ink: var(--k3-ink);
  --v5-ink-2: var(--k3-ink-2);
  --v5-ink-3: var(--k3-ink-3);
  --v5-ink-4: var(--k3-ink-4);
  --v5-open: var(--k3-sel-soft);
  --ink: var(--k3-ink);
  --ink-2: var(--k3-ink-2);
  --ink-3: var(--k3-ink-3);
  --ink-4: var(--k3-ink-4);
  --line: var(--k3-line);
  --line-2: var(--k3-line);
  --paper: var(--k3-paper);
  --sh-close: var(--k3-ground-2);
  --cta: var(--k3-act);
  --cta-h: var(--k3-act-h);
  --cta-a: var(--k3-act-a);
  --cta-fg: var(--k3-on-act);
  --cta-edge-1: var(--k3-act);
  --hr-sel: var(--k3-sel);
  --hr-sel-2: var(--k3-sel-h);
  --pnl-sel: var(--k3-sel);
  --sb-thumb: var(--k3-ink-4);
  --sb-thumb-hover: var(--k3-ink-3);
  --gridline: var(--k3-grid);
}
/* m9r-first.css holds v5's shared tokens on the header and the first screen
   (nearest declaration wins over :root), so they are re-pointed there too */
html body header.bar,
html body .screen{
  --cta-edge-1: var(--k3-act); --cta-edge: var(--k3-edge); --cta-edge-h: var(--k3-ink-4); --cta-ring: var(--k3-focus-ring);
  --hr-sel: var(--k3-sel); --hr-sel-2: var(--k3-sel-h);
  --pl-row: var(--k3-ground-2); --pl-row-2: var(--k3-ground); --pl-row-3: var(--k3-ground);
  --pl-hov: var(--k3-hover); --pl-hov-s: var(--k3-hover); --pl-prs: var(--k3-ground);
  --pl-ring: var(--k3-line); --pl-ring-2: var(--k3-edge); --pl-ink: var(--k3-ink); --pl-off: var(--k3-ink-2);
  --sh-shelf: var(--k3-ground); --sh-floor: var(--k3-paper); --sh-edge: var(--k3-edge); --sh-edge-c: var(--k3-edge);
}

/* the DMD roundel draws its letters with fill="var(--navy)" / "var(--brand)":
   the logo is identity, never theme — pinned to its own two colours */
html body .mark{ --navy: #0F1B3D; --brand: #0B57F5; }

::selection{ background: var(--k3-sel-soft); color: var(--k3-ink); }
html body :focus-visible{ outline-color: var(--k3-focus) !important; }

/* ---------- 0b · corrections the audit found outside the x7 inventory ---- */
/* the header's current page + current section: one mark, the selection colour */
html body header.bar a.kid.on{ color: var(--k3-ink) !important; }
html body header.bar a.kid.on::after{ background: var(--k3-nav-on-mark) !important; border-radius: var(--k3-mark-r) !important; }
html body header.bar .nav a.ptab .ptip,
html body .s3-pop{ background: var(--k3-tip-bg) !important; color: var(--k3-tip-ink) !important; }
/* FAQ spoke in a second navy (#0F1B3D): its title and open question are ink */
html body #faq10 .gfaq-title{ color: var(--k3-ink) !important; }
html body #faq10 .gfaq-q[aria-expanded="true"] .gfaq-t{ color: var(--k3-faq-q-open-ink) !important; }
/* About's buttons were set in a grey-green (#535D5E) used nowhere else */
html body #about5 .ab-btn{ color: var(--k3-btn-ink) !important; }
/* About's Offices + Team tabs drew their pins and people in literal Google blue */
html body #about5 .ab-vz-city svg{ stroke: var(--k3-accent) !important; }
html body #about5 .ab-vz-av svg{ stroke: var(--k3-ink-3) !important; }
html body #about5 .ab-vz-av.ab-lead svg{ stroke: var(--k3-sel) !important; }
/* the chosen industry row: the button's own text, not only its name span */
html body #indwork .v03-row.is-on{ color: var(--k3-row-on-ink) !important; }
html body .screen .hero .microline{ color: var(--k3-ink-2) !important; }

/* ---------- 1 · page grounds -------------------------------------------- */
html body .screen,
html body .screen main.hero,
html body .screen .drawer{ background-color: var(--k3-paper) !important; }
html body .screen .tex,
html body #svc3 .s3-grid{ opacity: var(--k3-grid-op) !important; }

html body #svc3 section#services,
html body #wcu8,
html body #about5,
html body #faq10{
  background-color: var(--k3-paper) !important;
  border-top-color: var(--k3-ground) !important;
  border-bottom-color: var(--k3-edge) !important;
  box-shadow: var(--k3-band-sh) !important;
}
html body #ss1,
html body #hp1,
html body #indwork{
  background-color: var(--k3-ground) !important;
  border-top-color: var(--k3-edge) !important;
  border-bottom-color: var(--k3-edge) !important;
}
html body #sfoot{ background-color: var(--k3-ground) !important; border-top-color: var(--k3-edge) !important; }
html body #mact{ background-color: var(--k3-ground-2) !important; border-top-color: var(--k3-edge) !important; border-bottom-color: var(--k3-edge) !important; }

/* section heads: kicker, the coloured stop */
html body .hd-kicker,
html body :is(#svc3 .s3-eyebrow, #ss1 .ss-eyebrow, #hp1 .hp-eyebrow, #indwork .iw2-eyebrow, #wcu8 .wt-eyebrow, #about5 .ab-eyebrow, #faq10 .faq-eyebrow),
html body .screen .hero p.label{ color: var(--k3-kicker) !important; }
html body #about5 .ab-eyebrow > i{ color: var(--k3-edge) !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #faq10) :is(h1, h2) > i,
html body #about5 .ab-dot,
html body .screen .hero h1 em,
html body .screen .hero h1 em i,
html body #mact .line > i{ color: var(--k3-accent) !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) :is(h1, h2, h3){ color: var(--k3-ink); }

/* ---------- 2 · header ---------------------------------------------------- */
html body header.bar{ background-color: var(--k3-bar-bg) !important; border-bottom-color: var(--k3-edge) !important; box-shadow: var(--k3-bar-sh) !important; }
html body header.bar .krow{ background-color: var(--k3-krow-bg) !important; border-top-color: var(--k3-line) !important; }
html body header.bar .kid{ color: var(--k3-ink-3) !important; }
html body header.bar .kid:hover{ color: var(--k3-ink) !important; }
html body header.bar .kid[aria-current="true"]{ color: var(--k3-kid-on-ink) !important; background: var(--k3-kid-on-bg) !important; border-radius: var(--k3-kid-on-r) !important; }
html body header.bar .kid[aria-current="true"]::after{ background: var(--k3-kid-on-mark) !important; border-radius: var(--k3-mark-r) !important; }
html body header.bar a.ptab{ color: var(--k3-ink-2) !important; }
html body header.bar a.ptab.cur,
html body header.bar a.ptab.cur > span{ color: var(--k3-ink) !important; }
html body header.bar a.ptab.cur::before{ background: var(--k3-nav-on-mark) !important; border-radius: var(--k3-mark-r) !important; }
html body header.bar a.ptab[aria-expanded="true"]{ color: var(--k3-ink) !important; }
html body header.bar a.ptab[aria-expanded="true"]::before{ background-color: var(--k3-menu-bg) !important; border-color: var(--k3-line) !important; }
html body header.bar #navSvc{ background-color: var(--k3-menu-bg) !important; border-color: var(--k3-edge) !important; box-shadow: var(--k3-menu-sh) !important; border-radius: var(--k3-r-box) !important; }
html body header.bar .nd-soon,
html body #sfoot .f-soon{ background-color: var(--k3-chip-bg) !important; border-color: var(--k3-chip-bd) !important; color: var(--k3-ink-3) !important; border-radius: var(--k3-r-chip) !important; }
html body header.bar .nd-live,
html body #sfoot .f-live{ background-color: var(--k3-success) !important; }
html body header.bar #navBurger{ background: var(--k3-burger-bg) !important; border-color: var(--k3-burger-bd) !important; box-shadow: var(--k3-burger-sh) !important; color: var(--k3-burger-ink) !important; border-radius: var(--k3-r-ctl) !important; }
html body header.bar #navBurger svg{ stroke: var(--k3-burger-ink) !important; }
html body header.bar #navPrimary{ background-color: var(--k3-paper) !important; border-bottom-color: var(--k3-line) !important; }
html body header.bar .nd-h{ border-bottom-color: var(--k3-line) !important; }

/* ---------- 3 · hero form + the primary CTA family ------------------------ */
html body .screen .hero form.capture{
  border-color: var(--k3-form-bd) !important;
  border-radius: var(--k3-form-r) !important;
  box-shadow: var(--k3-form-sh) !important;
  background-color: var(--k3-paper) !important;
}
html body .screen .hero form.capture:focus-within{ border-color: var(--k3-form-focus-bd) !important; box-shadow: var(--k3-form-focus-sh) !important; }
html body .screen .hero .capture .capfix{ background: var(--k3-capfix-bg) !important; color: var(--k3-capfix-ink) !important; border-right-color: var(--k3-capfix-bd) !important; }
html body .screen .hero .capture input{ color: var(--k3-ink) !important; }
html body .screen .hero .microline > b,
html body #mact .fine > b{ color: var(--k3-success) !important; }
html body .screen .hero .microline > i{ color: var(--k3-edge) !important; }

html body .screen .hero .capture button,
html body #hp1 .hp-ctab,
html body #wcu8 .wc-btn,
html body #wcu8 .a-go,
html body #mact .go{
  background: var(--k3-cta-bg) !important;
  color: var(--k3-cta-ink) !important;
  box-shadow: var(--k3-cta-sh) !important;
  text-shadow: var(--k3-cta-ts) !important;
  border-radius: var(--k3-cta-r) !important;
}
html body .screen .hero .capture button{ border-radius: var(--k3-hcta-r) !important; box-shadow: var(--k3-hcta-sh) !important; }
html body :is(#hp1 .hp-ctab, #wcu8 .wc-btn, #wcu8 .a-go, #mact .go) svg{ stroke: var(--k3-cta-ink) !important; }
html body :is(.screen .hero .capture button, #hp1 .hp-ctab, #wcu8 .wc-btn, #wcu8 .a-go, #mact .go):hover{
  background: var(--k3-cta-bg-h) !important;
  color: var(--k3-cta-ink-h) !important;
  box-shadow: var(--k3-cta-sh-h) !important;
}
html body .screen .hero .capture button:hover{ box-shadow: var(--k3-hcta-sh-h) !important; }
html body :is(.screen .hero .capture button, #hp1 .hp-ctab, #wcu8 .wc-btn, #wcu8 .a-go, #mact .go):active{
  background: var(--k3-cta-bg-a) !important;
  box-shadow: var(--k3-cta-sh-a) !important;
}
html body :is(#hp1 .hp-ctab, #wcu8 .wc-btn, #wcu8 .a-go, #mact .go):hover svg{ stroke: var(--k3-cta-ink-h) !important; }
html body :is(.screen .hero .capture button, #hp1 .hp-ctab, #wcu8 .wc-btn, #wcu8 .a-go, #mact .go):focus-visible{
  outline: 2px solid var(--k3-focus) !important; outline-offset: 2px !important;
}
html body .screen .hero .capture button:focus-visible{ outline-offset: -5px !important; outline-color: var(--k3-focus-on-cta) !important; }

/* ---------- 4 · secondary buttons ---------------------------------------- */
html body :is(#about5 .ab-btn, #wcu8 .a-alt > a, #wcu8 .a-more){
  background: var(--k3-btn-bg) !important;
  border-color: var(--k3-btn-bd) !important;
  color: var(--k3-btn-ink) !important;
  box-shadow: var(--k3-btn-sh) !important;
  border-radius: var(--k3-r-ctl) !important;
}
html body :is(#about5 .ab-btn, #wcu8 .a-alt > a, #wcu8 .a-more) svg{ stroke: var(--k3-btn-icon) !important; }
html body #wcu8 .a-alt > a svg[fill="currentColor"]{ stroke: none !important; fill: var(--k3-btn-icon) !important; }
html body :is(#about5 .ab-btn, #wcu8 .a-alt > a, #wcu8 .a-more):hover{
  background: var(--k3-btn-bg-h) !important;
  border-color: var(--k3-btn-bd-h) !important;
  color: var(--k3-btn-ink-h) !important;
  box-shadow: var(--k3-btn-sh-h) !important;
}
html body #about5 .ab-lnk{ color: var(--k3-link) !important; border-bottom-color: var(--k3-link-line) !important; }
html body #about5 .ab-lnk svg{ stroke: var(--k3-link) !important; }
html body #svc3 .s3-explore{ color: var(--k3-link) !important; border-bottom-color: var(--k3-link-line) !important; border-top-color: var(--k3-line) !important; /* phones rule it off from the record above */ }
html body #svc3 .s3-explore svg{ stroke: var(--k3-link) !important; color: var(--k3-link) !important; }
html body :is(#svc3 .s3-explore, #about5 .ab-lnk):hover{ border-bottom-color: var(--k3-link) !important; }

/* ---------- 5 · tab rails: work band, client proof, about ---------------- */
html body .tail.show .stage{ background-color: var(--k3-strip-bg) !important; border-top-color: var(--k3-edge) !important; }
html body .tail.show #tabs{ background-color: var(--k3-strip-bg) !important; box-shadow: inset 0 -1.5px 0 var(--k3-strip-line) !important; }
html body #hp1 .hp-tabs{ box-shadow: inset 0 -1.5px 0 var(--k3-strip-line) !important; }
html body #about5 .ab-ftabs{ background-color: var(--k3-strip-bg) !important; border-color: var(--k3-edge) !important; border-radius: var(--k3-r-box) var(--k3-r-box) 0 0 !important; }

html body :is(.tail.show #tabs button, #hp1 .hp-tab, #about5 .ab-ftab){ color: var(--k3-tab-ink) !important; }
html body :is(.tail.show #tabs button, #hp1 .hp-tab, #about5 .ab-ftab) svg{ stroke: var(--k3-tab-ink) !important; }
html body :is(.tail.show #tabs button, #about5 .ab-ftab):hover:not([aria-selected="true"]){
  background: var(--k3-tab-hov-bg) !important; box-shadow: var(--k3-tab-hov-sh) !important; color: var(--k3-ink) !important;
  border-radius: var(--k3-tab-r) !important;
}
html body :is(.tail.show #tabs button, #about5 .ab-ftab)[aria-selected="true"]{
  background: var(--k3-tab-bg) !important;
  color: var(--k3-tab-sel-ink) !important;
  box-shadow: var(--k3-tab-sh) !important;
  border-radius: var(--k3-tab-r) !important;
  text-decoration: none !important;
}
/* Client Proof's chooser is an UNDERLINE strip with no side padding, so a
   plate or a frame hugs the word and reads as broken. It keeps its underline
   form, drawn in the selected colour: the word, the bar and the count chip. (.hp-tabs is in the selector because the
   shared tab rule's :is() counts its strongest argument, .tail.show #tabs button.) */
html body #hp1 .hp-tabs .hp-tab:hover:not([aria-selected="true"]){ color: var(--k3-ink) !important; background: transparent !important; box-shadow: none !important; }
html body #hp1 .hp-tabs .hp-tab[aria-selected="true"]{ background: transparent !important; box-shadow: none !important; color: var(--k3-hp-on-ink) !important; border-radius: 0 !important; }
html body #hp1 .hp-tab[aria-selected="true"]::after{ background: var(--k3-hp-on-bar) !important; }
html body :is(.tail.show #tabs button, #about5 .ab-ftab)[aria-selected="true"] svg{
  stroke: var(--k3-tab-icon) !important;
  background: var(--k3-tab-icon-bg) !important;
  box-shadow: var(--k3-tab-icon-sh) !important;
  border-radius: var(--k3-tab-icon-r) !important;
  opacity: 1 !important;
}
html body .tail.show #tabs button#tab-ads[aria-selected="true"] svg{ background: var(--k3-tab-logo-bg, var(--k3-tab-icon-bg)) !important; box-shadow: var(--k3-tab-logo-sh, var(--k3-tab-icon-sh)) !important; }
html body :is(.tail.show #tabs button, #hp1 .hp-tab, #about5 .ab-ftab)[aria-selected="true"] :is(.gah-tabw, .gah-tabname, .gah-tabsub){ color: var(--k3-tab-sel-ink) !important; }
html body #about5 .ab-split{ border-color: var(--k3-edge) !important; border-top-color: var(--k3-split-top) !important; border-radius: 0 0 var(--k3-r-box) var(--k3-r-box) !important; background-color: var(--k3-paper) !important; }
html body #about5 .ab-card.ab-outer{ border-color: var(--k3-edge) !important; border-radius: var(--k3-r-box) !important; box-shadow: var(--k3-box-sh) !important; }

/* counts on client-proof tabs */
html body #hp1 .hp-tab > em{ background: transparent !important; color: var(--k3-ink-4) !important; box-shadow: none !important; border-radius: var(--k3-r-badge) !important; }
html body #hp1 .hp-tab[aria-selected="true"] > em{ background: var(--k3-count-on-bg) !important; color: var(--k3-count-on-ink) !important; box-shadow: var(--k3-count-on-sh) !important; }

/* ---------- 6 · work band cards (all five tabs) --------------------------- */
html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card){
  background-color: var(--k3-card-bg) !important;
  border-color: var(--k3-card-bd) !important;
  box-shadow: var(--k3-card-sh) !important;
  border-radius: var(--k3-r-card) !important;
}
html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card):hover{
  border-color: var(--k3-card-bd-h) !important; box-shadow: var(--k3-card-sh-h) !important;
}
html body .tail.show .card.door .ic{ color: var(--k3-accent) !important; }
html body .tail.show .card.door .ic svg:not(:has([fill])){ stroke: var(--k3-accent) !important; }
html body .tail.show .card.door .go{ border-top-color: var(--k3-line) !important; color: var(--k3-go-ink) !important; }
html body .tail.show .card.door .say,
html body .tail.show .card.door h3 > span{ color: var(--k3-ink-3) !important; }
html body .tail.show .card .chip{ background-color: var(--k3-chip-bg) !important; border-color: var(--k3-chip-bd) !important; color: var(--k3-ink-2) !important; border-radius: var(--k3-r-chip) !important; }
html body .tail.show .card span.win{ border-bottom-color: var(--k3-line) !important; }
html body .tail.show .arrows button{ background-color: var(--k3-btn-bg) !important; border-color: var(--k3-btn-bd) !important; color: var(--k3-ink) !important; box-shadow: var(--k3-btn-sh) !important; border-radius: var(--k3-r-ctl) !important; }
html body .tail.show .arrows button:hover:not([disabled]){ border-color: var(--k3-btn-bd-h) !important; color: var(--k3-btn-ink-h) !important; }
/* Google Ads client rail */
html body .screen .mp-i{ background-color: var(--k3-ground) !important; border-color: var(--k3-line) !important; border-radius: var(--k3-r-card) !important; }
html body .screen .mp-i:hover,
html body .screen .mp-i[aria-expanded="true"]{ background-color: var(--k3-paper) !important; border-color: var(--k3-sel-line) !important; box-shadow: var(--k3-card-sh-h) !important; }
html body .screen :is(.cc-cue, .cc-cue .cc-tx, .mp-t > i){ color: var(--k3-link) !important; }
html body .screen .cc-cue svg{ stroke: var(--k3-link) !important; color: var(--k3-link) !important; }

/* ---------- 7 · services --------------------------------------------------- */
html body #svc3 .s3-catwrap{ background-color: var(--k3-catwrap-bg) !important; border-bottom-color: var(--k3-line) !important; }
html body #svc3 .s3-catrail{ background: var(--k3-cat-rail-bg) !important; border-color: var(--k3-cat-rail-bd) !important; box-shadow: var(--k3-cat-rail-sh) !important; border-radius: var(--k3-r-box) !important; }
html body #svc3 .s3-cat{ color: var(--k3-ink-2) !important; border-left-color: var(--k3-cat-div) !important; }
html body #svc3 .s3-cat svg{ stroke: var(--k3-ink-3) !important; }
html body #svc3 .s3-cat:hover:not([aria-current="true"]){ background-color: var(--k3-hover) !important; color: var(--k3-ink) !important; }
html body #svc3 .s3-cat[aria-current="true"]{
  background: var(--k3-cat-on-bg) !important;
  color: var(--k3-cat-on-ink) !important;
  box-shadow: var(--k3-cat-on-sh) !important;
  border-radius: var(--k3-cat-on-r) !important;
}
html body #svc3 .s3-cat[aria-current="true"] > span{ color: var(--k3-cat-on-ink) !important; }
html body #svc3 .s3-cat[aria-current="true"] svg{ stroke: var(--k3-cat-on-icon) !important; background: var(--k3-cat-on-icon-bg) !important; box-shadow: var(--k3-cat-on-icon-sh) !important; border-radius: var(--k3-tab-icon-r) !important;
  filter: none !important; /* v5 inverts this icon to white for its navy plate — invisible on a light one */ }

html body #svc3 .s3-row{ background-color: var(--k3-paper) !important; border-color: var(--k3-edge) !important; box-shadow: var(--k3-box-sh) !important; border-radius: var(--k3-r-box) !important; }
html body #svc3 .s3-row::before{ background: var(--k3-spine) !important; border-radius: var(--k3-r-box) 0 0 var(--k3-r-box) !important; }
html body #svc3 .s3-num{ background: var(--k3-svc-num-bg) !important; box-shadow: var(--k3-svc-num-sh) !important; border-radius: var(--k3-r-ctl) !important; }
html body #svc3 .s3-badge{ background: var(--k3-pill-bg) !important; color: var(--k3-pill-ink) !important; box-shadow: var(--k3-pill-sh) !important; border-radius: var(--k3-r-badge) !important; }
html body #svc3 .s3-card{ background-color: var(--k3-card-bg) !important; border-color: var(--k3-card-bd) !important; box-shadow: var(--k3-card-sh) !important; border-radius: var(--k3-r-card) !important; }
html body #svc3 .s3-card:hover{ border-color: var(--k3-card-bd-h) !important; box-shadow: var(--k3-card-sh-h) !important; }
html body #svc3 .s3-card::after{ background: var(--k3-spine) !important; }
html body #svc3 .s3-card > .s3-mock{ border-bottom-color: var(--k3-line) !important; border-radius: calc(var(--k3-r-card) - 1px) calc(var(--k3-r-card) - 1px) 0 0 !important; }
html body #svc3 .s3-cdesc{ color: var(--k3-ink-3) !important; }
html body #svc3 .s3-more{ border-top-color: var(--k3-line) !important; color: var(--k3-ink) !important; }
html body #svc3 .s3-more > i{ background: var(--k3-more-bg) !important; border-color: var(--k3-more-bd) !important; color: var(--k3-more-ink) !important; border-radius: var(--k3-more-r) !important; box-shadow: var(--k3-more-sh) !important; }
html body #svc3 .s3-more > i svg{ stroke: var(--k3-more-ink) !important; }
html body #svc3 .s3-more[aria-expanded="true"] > i{ background: var(--k3-more-on-bg) !important; color: var(--k3-more-on-ink) !important; border-color: var(--k3-more-on-bd) !important; }
html body #svc3 .s3-more[aria-expanded="true"] > i svg{ stroke: var(--k3-more-on-ink) !important; }
html body #svc3 .s3-spec{ border-top-color: var(--k3-line) !important; }
html body #svc3 .s3-dots > i{ background: var(--k3-dot) !important; border-radius: var(--k3-mark-r) !important; }
html body #svc3 .s3-dots > i.s3-on{ background: var(--k3-dot-on) !important; box-shadow: var(--k3-dot-on-sh) !important; }
/* the social sub-filter */
html body #svc3 .s3-tabs{ background: var(--k3-seg-bg) !important; border-color: var(--k3-seg-bd) !important; box-shadow: var(--k3-seg-sh) !important; border-radius: var(--k3-seg-r) !important; }
html body #svc3 .s3-tab{ color: var(--k3-ink-2) !important; }
html body #svc3 .s3-tab[aria-pressed="true"]{ background: var(--k3-segb-on-bg) !important; color: var(--k3-segb-on-ink) !important; box-shadow: var(--k3-segb-on-sh) !important; border-radius: var(--k3-segb-r) !important; }
/* the hover tooltip */
html body .s3-pop{ background: var(--k3-tip-bg) !important; color: var(--k3-tip-ink) !important; box-shadow: var(--k3-tip-sh) !important; border-radius: var(--k3-r-ctl) !important; }
html body .s3-pop > u{ background: var(--k3-tip-bg) !important; }

/* ---------- 8 · success stories ------------------------------------------ */
html body #ss1 .ss-card{ background-color: var(--k3-card-bg) !important; border-color: var(--k3-card-bd) !important; box-shadow: var(--k3-card-sh) !important; border-radius: var(--k3-r-card) !important; }
html body #ss1 .ss-card:hover{ border-color: var(--k3-card-bd-h) !important; box-shadow: var(--k3-card-sh-h) !important; }
html body #ss1 .ss-shot{ border-bottom-color: var(--k3-line) !important; border-radius: calc(var(--k3-r-card) - 1px) calc(var(--k3-r-card) - 1px) 0 0 !important; }
html body #ss1 .ss-shot > .chrome{ background-color: var(--k3-ground-2) !important; border-bottom-color: var(--k3-line) !important; border-radius: calc(var(--k3-r-card) - 1px) calc(var(--k3-r-card) - 1px) 0 0 !important; }
html body #ss1 .ss-shot > .chrome > i{ background-color: var(--k3-edge) !important; }
html body #ss1 .ss-ba{ border-color: var(--k3-line) !important; border-radius: var(--k3-r-ctl) !important; background: var(--k3-ba-bg) !important; }
html body #ss1 .ss-sep{ background-color: var(--k3-line) !important; }
html body #ss1 .ss-after .ss-v{ color: var(--k3-after-ink) !important; }
html body #ss1 .ss-say{ border-top-color: var(--k3-line) !important; }
html body #ss1 .ss-url,
html body #ss1 .ss-url svg{ color: var(--k3-ink-3) !important; }
html body #ss1 .ss-url svg{ stroke: var(--k3-url-icon) !important; }
html body :is(#ss1 .ss-dots, #hp1 .hp-dots) > button{ background: var(--k3-dot) !important; border-radius: var(--k3-mark-r) !important; }
html body :is(#ss1 .ss-dots, #hp1 .hp-dots) > button[aria-current="true"]{ background: var(--k3-dot-on) !important; box-shadow: var(--k3-dot-on-sh) !important; }

/* ---------- 9 · client proof --------------------------------------------- */
html body #hp1 .r4-cell{ background-color: var(--k3-card-bg) !important; border-color: var(--k3-card-bd) !important; box-shadow: var(--k3-card-sh) !important; border-radius: var(--k3-r-card) !important; }
html body #hp1 .r4-cell img{ border-radius: calc(var(--k3-r-card) - 1px) !important; }
html body #hp1 .r4-cell:hover{ border-color: var(--k3-card-bd-h) !important; box-shadow: var(--k3-card-sh-h) !important; }
html body #hp1 .hp-bleed::before{ background-image: linear-gradient(90deg, var(--k3-ground), transparent) !important; }
html body #hp1 .hp-bleed::after{ background-image: linear-gradient(270deg, var(--k3-ground), transparent) !important; }
html body #hp1 .hp-note{ border-top-color: var(--k3-line) !important; color: var(--k3-ink-3) !important; }
html body #hp1 .hp-cta,
html body #wcu8 .wc-close{ background: var(--k3-close-bg) !important; border-color: var(--k3-edge) !important; box-shadow: var(--k3-close-sh) !important; border-radius: var(--k3-r-box) !important; }
html body #hp1 .hp-ctap,
html body #wcu8 .wc-ck{ color: var(--k3-ink-3) !important; }
html body #hp1 .hp-lb{ background-color: var(--k3-scrim) !important; }
html body #hp1 .r4-x{ background-color: var(--k3-btn-bg) !important; box-shadow: var(--k3-btn-sh) !important; border-radius: var(--k3-r-ctl) !important; color: var(--k3-ink) !important; }

/* ---------- 10 · industries ---------------------------------------------- */
html body #indwork .v03-card{ background-color: var(--k3-paper) !important; border-color: var(--k3-edge) !important; box-shadow: var(--k3-box-sh) !important; border-radius: var(--k3-r-box) !important; }
html body #indwork .v03-top{ border-bottom-color: var(--k3-line) !important; }
html body #indwork .v03-seg{ background: var(--k3-seg-bg) !important; border-color: var(--k3-seg-bd) !important; box-shadow: var(--k3-seg-sh) !important; border-radius: var(--k3-seg-r) !important; }
html body #indwork .v03-segb{ color: var(--k3-ink-2) !important; }
html body #indwork .v03-segb.is-on{ background: var(--k3-segb-on-bg) !important; color: var(--k3-segb-on-ink) !important; box-shadow: var(--k3-segb-on-sh) !important; border-radius: var(--k3-segb-r) !important; }
html body #indwork .v03-rail{ background: var(--k3-rail-bg) !important; border-right-color: var(--k3-line) !important; border-radius: 0 0 0 var(--k3-r-box) !important; }
html body #indwork .v03-row{ color: var(--k3-ink-2) !important; }
html body #indwork .v03-row:hover:not(.is-on){ background-color: var(--k3-hover) !important; }
html body #indwork .v03-row.is-on{ background: var(--k3-row-on-bg) !important; box-shadow: var(--k3-row-on-sh) !important; border-radius: var(--k3-row-on-r) !important; }
html body #indwork .v03-row.is-on .v03-nm{ color: var(--k3-row-on-ink) !important; }
html body #indwork .iw2-icn{ background: var(--k3-icn-bg) !important; border-color: var(--k3-icn-bd) !important; color: var(--k3-icn-ink) !important; border-radius: var(--k3-icn-r) !important; box-shadow: var(--k3-icn-sh) !important; }
html body #indwork .iw2-icn svg{ stroke: var(--k3-icn-ink) !important; }
html body #indwork .v03-row.is-on .iw2-icn{ background: var(--k3-icn-on-bg) !important; border-color: var(--k3-icn-on-bd) !important; color: var(--k3-icn-on-ink) !important; box-shadow: var(--k3-icn-on-sh) !important; }
html body #indwork .v03-row.is-on .iw2-icn svg{ stroke: var(--k3-icn-on-ink) !important; }
html body #indwork .v03-head > .iw2-icn{ background: var(--k3-icn-head-bg) !important; border-color: var(--k3-icn-head-bd) !important; box-shadow: var(--k3-icn-head-sh) !important; }
html body #indwork .v03-head > .iw2-icn svg{ stroke: var(--k3-icn-head-ink) !important; }
html body #indwork .v03-label{ border-bottom-color: var(--k3-line) !important; color: var(--k3-ink-3) !important; }
html body #indwork .v03-panel,
html body #indwork .v03-body{ background-color: var(--k3-paper) !important; }
html body #indwork .v03-body{ border-radius: 0 0 var(--k3-r-box) var(--k3-r-box) !important; }
html body #indwork .v03-panel{ border-radius: 0 0 var(--k3-r-box) 0 !important; }
html body #indwork .iw2-chip{ background: var(--k3-chip-bg) !important; border-color: var(--k3-chip-bd) !important; color: var(--k3-ink-2) !important; border-radius: var(--k3-r-chip) !important; box-shadow: var(--k3-chip-sh) !important; }
html body #indwork :is(.v03-more, .v03-back){ color: var(--k3-link) !important; }

/* ---------- 11 · why choose us ------------------------------------------- */
html body #wcu8 .wc-reg{ background-color: var(--k3-paper) !important; border-color: var(--k3-edge) !important; box-shadow: var(--k3-box-sh) !important; border-radius: var(--k3-r-box) !important; }
html body #wcu8 .wc-sheet{ background-color: transparent !important; border-top-color: var(--k3-line) !important; }
html body #wcu8 .wc-head{ background: transparent !important; }
html body #wcu8 .wc-head:hover{ background: var(--k3-hover) !important; }
html body #wcu8 .wc-sheet:first-child .wc-head{ border-radius: calc(var(--k3-r-box) - 1px) calc(var(--k3-r-box) - 1px) 0 0 !important; }
html body #wcu8 .wc-sheet.is-open{ box-shadow: var(--k3-wcu-open-sh) !important; background-color: var(--k3-paper) !important; border-radius: var(--k3-wcu-open-r) !important; }
html body #wcu8 .wc-head[aria-expanded="true"]{ background: var(--k3-wcu-head-open-bg) !important; box-shadow: var(--k3-wcu-head-open-sh) !important; }
html body #wcu8 .wc-head[aria-expanded="true"] :is(.wc-t, .wc-mid){ color: var(--k3-wcu-on-ink) !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-cat{ color: var(--k3-wcu-cat-on) !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-ben{ color: var(--k3-wcu-on-ink-2) !important; }
html body #wcu8 .wc-head .wc-cat{ color: var(--k3-ink-3) !important; }
html body #wcu8 .wc-n{ background: var(--k3-num-bg) !important; color: var(--k3-num-ink) !important; box-shadow: var(--k3-num-sh) !important; border-radius: var(--k3-r-badge) !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-n{ background: var(--k3-num-on-bg) !important; color: var(--k3-num-on-ink) !important; box-shadow: var(--k3-num-on-sh) !important; }
html body #wcu8 .wc-cue{ color: var(--k3-ink-3) !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-cue{ color: var(--k3-wcu-on-ink) !important; }
html body #wcu8 .wc-cue > i{ background: var(--k3-cue-bg) !important; box-shadow: var(--k3-cue-sh) !important; border-radius: var(--k3-cue-r) !important; }
html body #wcu8 .wc-cue > i::before,
html body #wcu8 .wc-cue > i::after{ background: var(--k3-cue-bar) !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-cue > i{ background: var(--k3-cue-on-bg) !important; box-shadow: var(--k3-cue-on-sh) !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-cue > i::before,
html body #wcu8 .wc-head[aria-expanded="true"] .wc-cue > i::after{ background: var(--k3-cue-on-bar) !important; }
html body #wcu8 .wc-ops{ border-color: var(--k3-line) !important; border-radius: var(--k3-r-card) !important; }
html body #wcu8 .wc-op{ background-color: var(--k3-paper) !important; border-top-color: var(--k3-line) !important; }
html body #wcu8 .wc-op.is-open{ background-color: var(--k3-op-open-bg) !important; }
html body #wcu8 .wc-opic{ background: var(--k3-opic-bg) !important; box-shadow: var(--k3-opic-sh) !important; color: var(--k3-opic-ink) !important; border-radius: var(--k3-r-badge) !important; }
html body #wcu8 .wc-opic svg{ stroke: var(--k3-opic-ink) !important; }
html body #wcu8 .wc-opx::before,
html body #wcu8 .wc-opx::after{ background: var(--k3-opx-bar) !important; }
html body #wcu8 .wc-opt > i,
html body #wcu8 .aw-t > i,
html body #wcu8 .a-fine{ color: var(--k3-ink-3) !important; }
html body #wcu8 .wc-proofinlay{ background: var(--k3-ground) !important; box-shadow: inset 0 0 0 1px var(--k3-line) !important; border-radius: var(--k3-r-card) !important; }
html body #wcu8 .wc-scene{ box-shadow: inset 0 0 0 1px var(--k3-line) !important; border-radius: var(--k3-r-ctl) !important; }
html body #wcu8 .a-note{ background: var(--k3-note-bg) !important; box-shadow: var(--k3-note-sh) !important; border-radius: var(--k3-r-ctl) !important; }
html body #wcu8 :is(.a-list, .a-steps, .a-who) > li::before{ background: var(--k3-bullet) !important; border-radius: var(--k3-bullet-r) !important; }
html body #wcu8 .vs-a{ background: var(--k3-ground) !important; box-shadow: inset 0 0 0 1px var(--k3-line) !important; color: var(--k3-ink-3) !important; border-radius: var(--k3-r-ctl) !important; }
html body #wcu8 .vs-b{ background: var(--k3-vsb-bg) !important; box-shadow: var(--k3-vsb-sh) !important; border-radius: var(--k3-r-ctl) !important; }
html body #wcu8 .vs-b > b{ color: var(--k3-ink) !important; }
html body #wcu8 svg:not(.wc-btn svg):not(.a-go svg):not(.a-more svg):not(.a-alt svg){ color: var(--k3-ink-3); }

/* ---------- 12 · about us ------------------------------------------------- */
html body #about5 .ab-shot{ background-color: var(--k3-ground-2) !important; border-right-color: var(--k3-line) !important; border-bottom-color: var(--k3-line) !important; border-radius: 0 0 0 var(--k3-r-box) !important; }
html body #about5 .ab-viz{ background-color: var(--k3-ground) !important; border-right-color: var(--k3-line) !important; border-radius: 0 0 0 var(--k3-r-box) !important; }
html body #about5 .ab-vz-city{ background: var(--k3-chip-bg) !important; border-color: var(--k3-chip-bd) !important; border-radius: var(--k3-r-chip) !important; box-shadow: var(--k3-chip-sh) !important; }
html body #about5 .ab-vz-av{ background: var(--k3-ground-2) !important; border-radius: var(--k3-r-ctl) !important; }
html body #about5 .ab-vz-av.ab-lead{ background: var(--k3-sel-soft) !important; box-shadow: inset 0 0 0 1.5px var(--k3-sel) !important; }
html body #about5 .ab-vz-num > b{ color: var(--k3-accent) !important; }
html body #about5 .ab-pill{ background: var(--k3-pill-bg) !important; border-color: var(--k3-pill-bd) !important; color: var(--k3-pill-ink) !important; box-shadow: var(--k3-pill-sh) !important; border-radius: var(--k3-r-badge) !important; }
html body #about5 .ab-pill svg{ stroke: var(--k3-pill-ink) !important; }
html body #about5 .ab-legal{ color: var(--k3-ink-2) !important; }
html body #about5 .ab-pr{ border-bottom-color: var(--k3-line) !important; }
html body #about5 .ab-strip{ border-color: var(--k3-line) !important; border-radius: var(--k3-r-card) !important; background: var(--k3-strip-card-bg) !important; box-shadow: var(--k3-strip-card-sh) !important; }
html body #about5 .ab-sti{ border-left-color: var(--k3-line) !important; }
html body #about5 .ab-sic{ color: var(--k3-sic-ink) !important; background: var(--k3-sic-bg) !important; box-shadow: var(--k3-sic-sh) !important; border-radius: var(--k3-r-badge) !important; }
html body #about5 .ab-sic svg{ stroke: var(--k3-sic-ink) !important; }
html body #about5 .ab-acts{ background-color: var(--k3-ground) !important; border-top-color: var(--k3-line) !important; }
html body #about5 .ab-ftab[aria-selected="true"] svg{ opacity: 1 !important; }

/* ---------- 13 · faq -------------------------------------------------------- */
html body #faq10 .gfaq-title::after{ background: var(--k3-edge) !important; }
html body #faq10 .gfaq-box{ border-color: var(--k3-edge) !important; border-radius: 0 0 var(--k3-r-box) var(--k3-r-box) !important; }
html body #faq10 .gfaq-scroll{ background-color: transparent !important; }
html body #faq10 .gfaq-item{
  background-color: var(--k3-card-bg) !important; border-color: var(--k3-card-bd) !important;
  box-shadow: var(--k3-faq-sh) !important; border-radius: var(--k3-r-card) !important;
}
html body #faq10 .gfaq-item:hover:not(.is-open){ border-color: var(--k3-card-bd-h) !important; box-shadow: var(--k3-faq-sh-h) !important; }
html body #faq10 .gfaq-item.is-open{ border-color: var(--k3-faq-open-bd) !important; box-shadow: var(--k3-faq-open-sh) !important; }
html body #faq10 .gfaq-q{ background: transparent !important; color: var(--k3-ink) !important; border-radius: calc(var(--k3-r-card) - 1px) !important; }
html body #faq10 .gfaq-q[aria-expanded="true"]{ background: var(--k3-faq-q-open-bg) !important; color: var(--k3-faq-q-open-ink) !important; border-radius: calc(var(--k3-r-card) - 1px) calc(var(--k3-r-card) - 1px) 0 0 !important; }
html body #faq10 .gfaq-q :is(.gfaq-t){ color: var(--k3-ink) !important; }
html body #faq10 .gfaq-qb{ background: var(--k3-qb-bg) !important; color: var(--k3-qb-ink) !important; box-shadow: var(--k3-qb-sh) !important; border-radius: var(--k3-r-badge) !important; }
html body #faq10 .gfaq-q[aria-expanded="true"] .gfaq-qb{ background: var(--k3-qb-on-bg) !important; color: var(--k3-qb-on-ink) !important; box-shadow: var(--k3-qb-on-sh) !important; }
html body #faq10 .gfaq-m{ background: var(--k3-mk-bg) !important; box-shadow: var(--k3-mk-sh) !important; border-radius: var(--k3-mk-r) !important; }
html body #faq10 .gfaq-m::before,
html body #faq10 .gfaq-m::after{ background: var(--k3-mk) !important; }
html body #faq10 .gfaq-q[aria-expanded="true"] .gfaq-m{ background: var(--k3-mk-on-bg) !important; box-shadow: var(--k3-mk-on-sh) !important; }
html body #faq10 .gfaq-q[aria-expanded="true"] .gfaq-m::before,
html body #faq10 .gfaq-q[aria-expanded="true"] .gfaq-m::after{ background: var(--k3-mk-on) !important; }
html body #faq10 .gfaq-ai-in{ border-top-color: var(--k3-line) !important; }
html body #faq10 .gfaq-ab{ background: var(--k3-ab-bg) !important; color: var(--k3-ab-ink) !important; box-shadow: var(--k3-ab-sh) !important; border-radius: var(--k3-r-badge) !important; }
html body #faq10 .gfaq-body,
html body #faq10 .gfaq-body p{ color: var(--k3-ink-2) !important; }

/* ---------- 14 · footer ---------------------------------------------------- */
html body #sfoot h3{ border-bottom-color: var(--k3-line) !important; }
html body #sfoot .f-id > b{ color: var(--k3-ink) !important; }
html body #sfoot .f-base{ border-top-color: var(--k3-line) !important; }
html body #sfoot .f-badge{ background: var(--k3-chip-bg) !important; border-color: var(--k3-chip-bd) !important; border-radius: var(--k3-r-chip) !important; box-shadow: var(--k3-chip-sh) !important; color: var(--k3-ink-2) !important; }
html body #sfoot .f-badge svg{ stroke: var(--k3-accent) !important; }
html body #sfoot .f-ci svg{ stroke: var(--k3-accent) !important; color: var(--k3-accent) !important; }
html body #sfoot .f-soc > a{ background: var(--k3-btn-bg) !important; border-color: var(--k3-btn-bd) !important; color: var(--k3-ink-3) !important; border-radius: var(--k3-soc-r) !important; box-shadow: var(--k3-btn-sh) !important; }
html body #sfoot .f-soc > a svg{ fill: var(--k3-ink-3) !important; }
html body #sfoot .f-soc > a:hover{ background: var(--k3-soc-bg-h) !important; border-color: var(--k3-soc-bd-h) !important; }
html body #sfoot .f-soc > a:hover svg{ fill: var(--k3-soc-ink-h) !important; }
html body #sfoot a:not(.f-soc > a):hover{ color: var(--k3-accent) !important; }


/* ---------- 15 · k3w additions --------------------------------------------- */
/* FAQ list's scroll fade ended in the old shelf blue (#F4F7FC) on a white section */
html body #faq10 .gfaq-box::after{ background-image: linear-gradient(rgba(255,255,255,0), var(--k3-faq-fade)) !important; }
/* tabs: pressed + keyboard focus, so every state belongs to the system */
html body :is(.tail.show #tabs button, #about5 .ab-ftab):active:not([aria-selected="true"]){ background: var(--k3-tab-press-bg) !important; box-shadow: none !important; }
html body :is(.tail.show #tabs button, #about5 .ab-ftab, #hp1 .hp-tab, #svc3 .s3-cat, #indwork .v03-segb, #indwork .v03-row):focus-visible{
  outline: 2px solid var(--k3-focus) !important; outline-offset: -2px !important;
}
html body :is(#svc3 .s3-cat, #indwork .v03-segb, #indwork .v03-row):active:not([aria-current="true"]):not(.is-on){ background: var(--k3-tab-press-bg) !important; }
/* the unselected label on a track, and the hover label */
html body #svc3 .s3-cat:hover:not([aria-current="true"]),
html body #indwork .v03-segb:hover:not(.is-on){ color: var(--k3-ink) !important; }
/* disabled controls (rail arrows at either end) */
html body .tail.show .arrows button[disabled],
html body :is(#ss1, #hp1) button[disabled]{ background-color: var(--k3-dis-bg) !important; color: var(--k3-dis-ink) !important; border-color: var(--k3-line) !important; box-shadow: none !important; }
/* the secondary-button hover never borrows the action or selection colour */
html body :is(#about5 .ab-btn, #wcu8 .a-alt > a, #wcu8 .a-more):hover svg{ stroke: var(--k3-btn-ink-h) !important; }
/* no translucency / blur anywhere a colour system is judged */
html body header.bar, html body header.bar #navSvc{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* CTA pressed / hover on the hero keep the keel (a flat bottom edge, never a gloss) */
html body .screen .hero .capture button:active{ box-shadow: var(--k3-hcta-sh-a) !important; }
/* work-band card icon + arrow */
html body .tail.show .card.door .go svg{ stroke: var(--k3-go-ink) !important; }

/* ===== white-blue-duo-n4q/n4q-lightblue-tokens.css ===== */
/* V2 · WHITE · BLUE · LIGHT BLUE — token set for ../themes/k3-map.css + n4q-finish.css
   GENERATED by _n4q_tokens.py (edit that script). Royal acts · white page · selection is a white
   piece in a royal frame on a tinted track · navigation is an ink word on a royal underline. */
html:root{
  --k3-ink: #0D1526;
  --k3-ink-2: #34405A;
  --k3-ink-3: #526079;
  --k3-ink-4: #8795AE;
  --k3-paper: #FFFFFF;
  --k3-ground: #FFFFFF;
  --k3-ground-2: #E1EBFC;
  --k3-hover: #F5F8FF;
  --k3-line: #DAE5F8;
  --k3-edge: #B9CBEE;
  --k3-kicker: #34405A;
  --k3-grid: rgba(30,79,214,.035);
  --k3-grid-op: .75;
  --k3-accent: #1E4FD6;
  --k3-success: #127436;
  --k3-act: #1E4FD6;
  --k3-act-h: #1A45BA;
  --k3-act-a: #163A9E;
  --k3-on-act: #FFFFFF;
  --k3-sel: #0D1526;
  --k3-sel-h: #0D1526;
  --k3-on-sel: #FFFFFF;
  --k3-on-sel-dim: rgba(255,255,255,.72);
  --k3-sel-soft: #FFFFFF;
  --k3-sel-line: #1E4FD6;
  --k3-focus: #1E4FD6;
  --k3-focus-ring: rgba(30,79,214,.28);
  --k3-focus-on-cta: #FFFFFF;
  --k3-link: #1B47C0;
  --k3-link-line: #9DB5E3;
  --k3-r-card: 4px;
  --k3-r-box: 6px;
  --k3-r-ctl: 4px;
  --k3-r-chip: 4px;
  --k3-r-badge: 3px;
  --k3-mark-r: 0px;
  --k3-band-sh: none;
  --k3-box-sh: none;
  --k3-bar-bg: #FFFFFF;
  --k3-bar-sh: none;
  --k3-krow-bg: #FFFFFF;
  --k3-kid-on-ink: #0D1526;
  --k3-kid-on-bg: transparent;
  --k3-kid-on-r: 0;
  --k3-kid-on-mark: #1E4FD6;
  --k3-nav-on-mark: #1E4FD6;
  --k3-menu-bg: #FFFFFF;
  --k3-menu-sh: 0 18px 36px -24px rgba(13,21,38,.26);
  --k3-burger-bg: #FFFFFF;
  --k3-burger-bd: #DAE5F8;
  --k3-burger-sh: inset 0 0 0 1.5px #B9CBEE;
  --k3-burger-ink: #0D1526;
  --k3-chip-bg: #FFFFFF;
  --k3-chip-bd: #D3E0F6;
  --k3-chip-sh: none;
  --k3-tip-bg: #0D1526;
  --k3-tip-ink: #FFFFFF;
  --k3-tip-sh: none;
  --k3-form-bd: #6F89C0;
  --k3-form-r: 4px;
  --k3-form-sh: none;
  --k3-form-focus-bd: #1E4FD6;
  --k3-form-focus-sh: 0 0 0 3px rgba(30,79,214,.20);
  --k3-capfix-bg: #EEF4FE;
  --k3-capfix-ink: #526079;
  --k3-capfix-bd: #DAE5F8;
  --k3-cta-bg: #1E4FD6;
  --k3-cta-bg-h: #1A45BA;
  --k3-cta-bg-a: #163A9E;
  --k3-cta-ink: #FFFFFF;
  --k3-cta-ink-h: #FFFFFF;
  --k3-cta-sh: none;
  --k3-cta-sh-h: none;
  --k3-cta-sh-a: inset 0 2px 0 rgba(0,0,0,.22);
  --k3-cta-ts: none;
  --k3-cta-r: 4px;
  --k3-hcta-r: 0;
  --k3-hcta-sh: none;
  --k3-hcta-sh-h: none;
  --k3-hcta-sh-a: inset 0 2px 0 rgba(0,0,0,.22);
  --k3-btn-bg: #FFFFFF;
  --k3-btn-bg-h: #FFFFFF;
  --k3-btn-bd: #B9CBEE;
  --k3-btn-bd-h: #1E4FD6;
  --k3-btn-ink: #0D1526;
  --k3-btn-ink-h: #1B47C0;
  --k3-btn-sh: none;
  --k3-btn-sh-h: none;
  --k3-btn-icon: currentColor;
  --k3-go-ink: #1E4FD6;
  --k3-strip-bg: #E6EEFC;
  --k3-strip-line: #B9CBEE;
  --k3-split-top: #B9CBEE;
  --k3-tab-ink: #34405A;
  --k3-tab-hov-bg: #FFFFFF;
  --k3-tab-hov-sh: inset 0 0 0 1px #DAE5F8;
  --k3-tab-press-bg: #E1EBFC;
  --k3-card-bg: #FFFFFF;
  --k3-card-bd: #D3E0F6;
  --k3-card-bd-h: #8795AE;
  --k3-card-sh: none;
  --k3-card-sh-h: none;
  --k3-count-bg: #E6EEFC;
  --k3-count-ink: #526079;
  --k3-count-sh: none;
  --k3-catwrap-bg: #FFFFFF;
  --k3-cat-rail-bg: transparent;
  --k3-cat-rail-bd: transparent;
  --k3-cat-rail-sh: none;
  --k3-cat-div: transparent;
  --k3-spine: transparent;
  --k3-svc-num-bg: #FFFFFF;
  --k3-svc-num-sh: inset 0 0 0 1px #DAE5F8;
  --k3-pill-bg: #E6EEFC;
  --k3-pill-ink: #1C3F99;
  --k3-pill-bd: #D3E0F6;
  --k3-pill-sh: none;
  --k3-more-bg: #FFFFFF;
  --k3-more-bd: #B9CBEE;
  --k3-more-ink: #34405A;
  --k3-more-r: 3px;
  --k3-more-sh: none;
  --k3-more-on-bg: #FFFFFF;
  --k3-more-on-ink: #1E4FD6;
  --k3-more-on-bd: #1E4FD6;
  --k3-dot: #B9CBEE;
  --k3-dot-on: #0D1526;
  --k3-dot-on-sh: none;
  --k3-seg-bg: #E6EEFC;
  --k3-seg-bd: #DAE5F8;
  --k3-seg-sh: none;
  --k3-seg-r: 6px;
  --k3-ba-bg: transparent;
  --k3-after-ink: #0D1526;
  --k3-url-icon: #8795AE;
  --k3-close-bg: #FFFFFF;
  --k3-close-sh: none;
  --k3-scrim: rgba(255,255,255,.97);
  --k3-rail-bg: #E6EEFC;
  --k3-icn-bg: #FFFFFF;
  --k3-icn-bd: #DAE5F8;
  --k3-icn-ink: #526079;
  --k3-icn-r: 4px;
  --k3-icn-sh: none;
  --k3-icn-head-bg: #FFFFFF;
  --k3-icn-head-bd: #B9CBEE;
  --k3-icn-head-sh: none;
  --k3-icn-head-ink: #1E4FD6;
  --k3-wcu-open-r: 6px;
  --k3-num-bg: #E6EEFC;
  --k3-num-ink: #1C3F99;
  --k3-num-sh: none;
  --k3-cue-bg: #FFFFFF;
  --k3-cue-sh: inset 0 0 0 1px #B9CBEE;
  --k3-cue-r: 3px;
  --k3-cue-bar: #34405A;
  --k3-op-open-bg: #FFFFFF;
  --k3-opic-bg: #E6EEFC;
  --k3-opic-sh: none;
  --k3-opic-ink: #1E4FD6;
  --k3-opx-bar: #34405A;
  --k3-note-bg: #FFFFFF;
  --k3-note-sh: inset 0 0 0 1px #DAE5F8;
  --k3-bullet: #1E4FD6;
  --k3-bullet-r: 0px;
  --k3-vsb-bg: #FFFFFF;
  --k3-vsb-sh: inset 0 0 0 1.5px #1E4FD6;
  --k3-strip-card-bg: #FFFFFF;
  --k3-strip-card-sh: none;
  --k3-sic-ink: #1E4FD6;
  --k3-sic-bg: transparent;
  --k3-sic-sh: none;
  --k3-faq-sh: none;
  --k3-faq-sh-h: none;
  --k3-faq-fade: #FFFFFF;
  --k3-qb-bg: #E6EEFC;
  --k3-qb-ink: #1C3F99;
  --k3-qb-sh: none;
  --k3-mk: #526079;
  --k3-mk-bg: transparent;
  --k3-mk-sh: none;
  --k3-mk-on-bg: transparent;
  --k3-mk-on-sh: none;
  --k3-mk-r: 0;
  --k3-ab-bg: #E6EEFC;
  --k3-ab-ink: #1C3F99;
  --k3-ab-sh: none;
  --k3-soc-r: 4px;
  --k3-soc-bg-h: #FFFFFF;
  --k3-soc-bd-h: #1E4FD6;
  --k3-soc-ink-h: #1E4FD6;
  --k3-dis-bg: #E1EBFC;
  --k3-dis-ink: #8795AE;
  --k3-hp-on-ink: #0D1526;
  --k3-hp-on-bar: #1E4FD6;
  --k3-count-on-bg: #FFFFFF;
  --k3-count-on-ink: #0D1526;
  --k3-count-on-sh: inset 0 0 0 1px #1E4FD6;
  --k3-num-on-bg: #FFFFFF;
  --k3-num-on-ink: #1E4FD6;
  --k3-num-on-sh: inset 0 0 0 1.5px #1E4FD6;
  --k3-qb-on-bg: #FFFFFF;
  --k3-qb-on-ink: #1E4FD6;
  --k3-qb-on-sh: inset 0 0 0 1.5px #1E4FD6;
  --k3-mk-on: #1E4FD6;
  --k3-cue-on-bg: #FFFFFF;
  --k3-cue-on-sh: inset 0 0 0 1.5px #1E4FD6;
  --k3-cue-on-bar: #1E4FD6;
  --k3-tab-icon: #1E4FD6;
  --k3-tab-icon-bg: transparent;
  --k3-tab-icon-sh: none;
  --k3-tab-icon-r: 2px;
  --k3-tab-logo-bg: transparent;
  --k3-tab-logo-sh: none;
  --k3-cat-on-icon: #1E4FD6;
  --k3-cat-on-icon-bg: transparent;
  --k3-cat-on-icon-sh: none;
  --k3-icn-on-bg: #FFFFFF;
  --k3-icn-on-bd: #1E4FD6;
  --k3-icn-on-ink: #1E4FD6;
  --k3-icn-on-sh: none;
  --k3-wcu-on-ink: #0D1526;
  --k3-wcu-on-ink-2: #34405A;
  --k3-wcu-cat-on: #1E4FD6;
  --k3-faq-q-open-ink: #0D1526;
  --k3-tab-bg: #FFFFFF;
  --k3-tab-sel-ink: #0D1526;
  --k3-tab-r: 4px;
  --k3-tab-sh: inset 1.5px 0 0 #1E4FD6, inset -1.5px 0 0 #1E4FD6, inset 0 1.5px 0 #1E4FD6;
  --k3-tab-sh-framed: inset 0 0 0 1.5px #1E4FD6;
  --k3-cat-on-bg: transparent;
  --k3-cat-on-ink: #0D1526;
  --k3-cat-on-sh: inset 0 -2px 0 #1E4FD6;
  --k3-cat-on-r: 0;
  --k3-segb-on-bg: #FFFFFF;
  --k3-segb-on-ink: #0D1526;
  --k3-segb-on-sh: inset 0 0 0 1.5px #1E4FD6;
  --k3-segb-r: 4px;
  --k3-row-on-bg: #FFFFFF;
  --k3-row-on-ink: #0D1526;
  --k3-row-on-sh: inset 0 0 0 1.5px #1E4FD6;
  --k3-row-on-r: 4px;
  --k3-wcu-open-sh: inset 0 0 0 1.5px #1E4FD6;
  --k3-wcu-head-open-bg: #FFFFFF;
  --k3-wcu-head-open-sh: inset 0 -1px 0 #DAE5F8;
  --k3-faq-open-bd: #1E4FD6;
  --k3-faq-open-sh: none;
  --k3-faq-q-open-bg: #FFFFFF;
  --n4-ink: #0D1526;
  --n4-ink-2: #34405A;
  --n4-ink-3: #526079;
  --n4-ink-4: #8795AE;
  --n4-paper: #FFFFFF;
  --n4-ground: #FFFFFF;
  --n4-tint: #EEF4FE;
  --n4-stage: #FFFFFF;
  --n4-ground-2: #E1EBFC;
  --n4-track: #E6EEFC;
  --n4-line: #DAE5F8;
  --n4-edge: #B9CBEE;
  --n4-card: #D3E0F6;
  --n4-act: #1E4FD6;
  --n4-link: #1B47C0;
  --n4-badge: #E6EEFC;
  --n4-badge-ink: #1C3F99;
  --n4-frame: inset 0 0 0 1.5px #1E4FD6;
}

/* ===== white-blue-duo-n4q/n4q-finish.css ===== */
/* ==========================================================================
   n4q · WHITE + BLUE FINISH — shared by both versions
   --------------------------------------------------------------------------
   Loaded LAST, over m9r + ../themes/k3-map.css + n4q-<version>-tokens.css.
   Every colour here is a --n4-* variable, so V1 (light grey) and V2 (light
   blue) get the same corrections in their own palette.

   PAINT ONLY, with two named exceptions (section 6 and 8): no element is
   added, removed or re-ordered; type sizes, spacing and layout are page 11's.

   What the palette audit of page 11 found that the token map never reached:
     · 7 warm colours on 8,800 paints (sand tracks, beige lines, cream paper)
     · a brown icon colour #8A6A3B on services, All Work and About icons
     · hard-coded greys: Services scope labels #9AA0AB (2.6:1), company-fact
       keys #A7AEB9 (2.2:1), the heads' ink #0B0D12 / desc #414652
     · About's shot/illustration grounds in a fixed blue-grey gradient
     · the DMD roundel: header D's navy, footer D's in the theme's ink
     · the open Why-Us standard's frame hidden under its own head's ground
   --n4-ground is what a band or panel is painted (V1 grey, V2 white);
   --n4-tint is the palette's light colour for hovers and wells in both.
   Parts: 0 logo · 1 heads · 2 grounds · 3 header · 4 hero · 5 All Work ·
          6 services · 7 stories · 8 proof · 9 industries · 10 why us ·
          11 about · 12 faq · 13 footer · 14 phone
   ========================================================================== */

/* ---------- 0 · THE DMD ROUNDEL: identity, never theme --------------------
   Both D's black, the M and the ring in the logo's own blue, header AND footer.
   The word sat 0.9 units right / 0.85 up of the circle's centre. */
html body :is(header.bar .mark, #sfoot .f-mk){ --navy: #000000; --brand: #0B57F5; }
html body :is(header.bar .mark, #sfoot .f-mk) svg text > tspan:nth-child(odd){ fill: #000000 !important; }
html body :is(header.bar .mark, #sfoot .f-mk) svg text > tspan:nth-child(2){ fill: #0B57F5 !important; }
html body :is(header.bar .mark, #sfoot .f-mk) svg circle{ stroke: #0B57F5 !important; fill: #FFFFFF !important; }
html body :is(header.bar .mark, #sfoot .f-mk) svg text{ transform: translate(-0.9px, 0.85px); }

/* ---------- 1 · SECTION HEADS: the site's head tokens in this palette ----- */
html:root,
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10, #mact){
  --hd-ink: var(--n4-ink);
  --hd-kicker-ink: var(--n4-ink-2);
  --hd-desc-ink: var(--n4-ink-2);
  --r6-ink: var(--n4-ink); --r6-ink2: var(--n4-ink-2); --r6-ink3: var(--n4-ink-3); --r6-ink4: var(--n4-ink-3);
  --ink-4: var(--n4-ink-3);
}
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) :is(.hd-title, h1, h2, h3){ color: var(--n4-ink) !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-desc{ color: var(--n4-ink-2) !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) :is(h1, h2) > i{ color: var(--n4-act) !important; }
/* "this page is live" dots in the services menu and the footer: royal, not a status green */
html body :is(header.bar .nd-live, #sfoot .f-live){ background-color: var(--n4-act) !important; box-shadow: none !important; }
html body ::selection{ background: #D6E2FB; color: var(--n4-ink); }

/* ---------- 2 · GROUNDS: page 11's shelf map, in this palette --------------
   editorial (white): hero · services · why us · about · faq
   shelf (tint):      stories · proof · industries · footer · the phone close
   Each block keeps its 1px edge; the aisle between blocks stays white. */
html body #svc3 section#services,
html body :is(#wcu8, #about5, #faq10){
  background-color: var(--n4-paper) !important;
  border-top-color: var(--n4-paper) !important;
  border-bottom-color: var(--n4-paper) !important;
  box-shadow: inset 0 1px 0 var(--n4-line), inset 0 -1px 0 var(--n4-line) !important;
}
html body :is(#ss1, #hp1, #indwork){
  background-color: var(--n4-ground) !important;
  border-top-color: var(--n4-line) !important;
  border-bottom-color: var(--n4-line) !important;
}
html body #sfoot{ background-color: var(--n4-ground) !important; border-top-color: var(--n4-line) !important; }
/* grid textures: a pattern behind content, never a colour of its own */
html body :is(#svc3 .s3-grid, #ss1 .ss-grid, #hp1 .hp-grid, #indwork .iw2-grid, .screen .tex){ opacity: .6 !important; }

/* ---------- 3 · HEADER --------------------------------------------------------
   page row white; the section row carries the tint; both rows mark the current
   place the navigation way — ink word, royal underline */
html body header.bar{ background-color: var(--n4-paper) !important; border-bottom: 1px solid var(--n4-line) !important; }
html body header.bar .krow{ background-color: var(--n4-ground) !important; border-top: 1px solid var(--n4-line) !important; }
html body header.bar .krow a.kid{ color: var(--n4-ink-2) !important; }
html body header.bar .krow a.kid:hover{ color: var(--n4-ink) !important; }
html body header.bar .krow a.kid:is(.on, [aria-current="true"]){ color: var(--n4-ink) !important; }
html body header.bar .krow a.kid:is(.on, [aria-current="true"])::after{ background: var(--n4-act) !important; }
html body header.bar .nav a.ptab{ color: var(--n4-ink-2) !important; }
html body header.bar .nav a.ptab:hover{ color: var(--n4-ink) !important; }
html body header.bar .nav a.ptab.cur,
html body header.bar .nav a.ptab.cur > span{ color: var(--n4-ink) !important; }
html body header.bar .nav a.ptab.cur::before{ background: var(--n4-act) !important; }
html body header.bar .wm{ color: var(--n4-ink) !important; }
html body header.bar #navSvc :is(.nd-h, .nd-t, b){ color: var(--n4-ink); }
html body header.bar #navSvc a:hover{ background-color: var(--n4-tint) !important; }
html body header.bar #navSvc svg{ stroke: var(--n4-act); }

/* ---------- 4 · HERO ------------------------------------------------------------
   white; the field is framed, the royal button is the only mass on the screen */
html body .screen .hero p.label{ color: var(--n4-ink-2) !important; }
html body .screen .hero h1{ color: var(--n4-ink) !important; }
html body .screen .hero h1 em,
html body .screen .hero h1 em i{ color: var(--n4-act) !important; }
html body .screen .hero .capture input::placeholder{ color: var(--n4-ink-4) !important; }
html body .screen .hero .microline{ color: var(--n4-ink-2) !important; }
html body .screen .hero .microline > b,
html body #mact .fine > b{ color: var(--n4-act) !important; }
html body .screen .hero .microline > i{ color: var(--n4-edge) !important; }

/* ---------- 5 · ALL WORK: a tinted dock, the chosen tab is the white canvas -- */
html body .tail.show .stage{ border-top: 1px solid var(--n4-line) !important; background-color: var(--n4-stage) !important; }
html body .tail.show #tabs button svg:not([fill]){ stroke: var(--n4-ink-3) !important; }
html body .tail.show #tabs button[aria-selected="true"] svg:not(:has([fill])){ stroke: var(--n4-act) !important; }
html body .tail.show #tabs button[aria-selected="true"]{ font-weight: 700; }
html body .tail.show .card.door h3{ color: var(--n4-ink) !important; }
html body .tail.show .card.door h3 > span{ color: var(--n4-ink-3) !important; }
html body .tail.show .card.door .say{ color: var(--n4-ink-2) !important; }
html body .tail.show .card.door .go,
html body .tail.show .card.door .go svg{ color: var(--n4-act) !important; stroke: var(--n4-act) !important; }
html body .tail.show .card.door .ic svg:not(:has([fill])){ stroke: var(--n4-act) !important; }
html body .tail.show :is(.card.name, .card.piece, .card.wt-pv, article.card) :is(h3, b, strong){ color: var(--n4-ink); }
html body .screen .mp-i:hover{ border-color: var(--n4-ink-4) !important; }
html body .screen .mp-i[aria-expanded="true"]{ border-color: var(--n4-act) !important; }

/* ---------- 6 · SERVICES ----------------------------------------------------
   The index scroll-spies between five bands that all stay on the page — it is
   NAVIGATION, so no plate: an ink word on a royal underline (tokens), and the
   sticky wrap is white with one line under it.
   The social sub-filter and "View Campaign Scope" are SELECTION: white piece,
   royal frame. */
html body #svc3 .s3-catwrap{ background: var(--n4-paper) !important; border-bottom: 1px solid var(--n4-line) !important; box-shadow: none !important; }
html body #svc3 .s3-cat{ color: var(--n4-ink-2) !important; background: transparent !important; }
html body #svc3 .s3-cat svg{ stroke: var(--n4-ink-3) !important; }
html body #svc3 .s3-cat:hover:not([aria-current="true"]){ background: transparent !important; color: var(--n4-ink) !important; box-shadow: inset 0 -2px 0 var(--n4-edge) !important; }
html body #svc3 .s3-cat[aria-current="true"],
html body #svc3 .s3-cat[aria-current="true"] > span{ color: var(--n4-ink) !important; }
html body #svc3 .s3-cat[aria-current="true"] svg{ stroke: var(--n4-act) !important; }
html body #svc3 .s3-cat svg:has([fill]){ stroke: none !important; }
html body #svc3 .s3-row{ border: 1px solid var(--n4-edge) !important; }
html body #svc3 .s3-num{ box-shadow: inset 0 0 0 1px var(--n4-line) !important; background: var(--n4-paper) !important; }
html body #svc3 .s3-badge{ background: var(--n4-badge) !important; color: var(--n4-badge-ink) !important; }
html body #svc3 .s3-info svg.s3-lg:not(:has([fill])),
html body #svc3 .s3-num svg:not(:has([fill])){ stroke: var(--n4-act) !important; }
html body #svc3 .s3-card h3{ color: var(--n4-ink) !important; }
html body #svc3 .s3-bestfor{ color: var(--n4-ink-2) !important; }
html body #svc3 .s3-bestfor b{ color: var(--n4-ink) !important; }
html body #svc3 .s3-cdesc{ color: var(--n4-ink-2) !important; }
html body #svc3 .s3-more{ color: var(--n4-ink) !important; }
html body #svc3 .s3-more:hover > i{ border-color: var(--n4-act) !important; }
html body #svc3 .s3-more[aria-expanded="true"] > i{ box-shadow: inset 0 0 0 .5px var(--n4-act) !important; }
/* the scope keys were #9AA0AB at 10px (2.6:1) */
html body #svc3 .s3-specs .s3-sk,
html body #svc3 .s3-sk{ color: var(--n4-ink-3) !important; }
html body #svc3 .s3-specs :is(span, b, li){ color: var(--n4-ink-2); }
html body #svc3 .s3-tabnote{ color: var(--n4-ink-3) !important; }
html body #svc3 .s3-tabs{ background: var(--n4-track) !important; border-color: var(--n4-line) !important; }
html body #svc3 .s3-tab:hover:not([aria-pressed="true"]){ color: var(--n4-ink) !important; }
html body #svc3 .s3-tab[aria-pressed="true"]{ font-weight: 700; }
html body #svc3 .s3-dots > i.s3-on{ background: var(--n4-ink) !important; }

/* ---------- 7 · SUCCESS STORIES ---------------------------------------------- */
html body #ss1 .ss-card{ border-color: var(--n4-card) !important; }
html body #ss1 .ss-name{ color: var(--n4-ink) !important; }
html body #ss1 .ss-url{ color: var(--n4-ink-3) !important; }
html body #ss1 :is(.ss-k, .ss-u){ color: var(--n4-ink-3) !important; }
html body #ss1 .ss-before .ss-v{ color: var(--n4-ink-3) !important; }
html body #ss1 .ss-after .ss-v{ color: var(--n4-ink) !important; }
html body #ss1 .ss-say{ color: var(--n4-ink-2) !important; }
html body #ss1 svg:not(:has([fill])):not(.ss-shot svg){ stroke: var(--n4-ink-3); }
html body #ss1 .ss-arrow svg,
html body #ss1 .ss-ba svg{ stroke: var(--n4-act) !important; }
html body #ss1 :is(.ss-prev, .ss-next, .ss-arrows button){ background: var(--n4-paper) !important; border-color: var(--n4-edge) !important; color: var(--n4-ink) !important; }
html body #ss1 :is(.ss-prev, .ss-next, .ss-arrows button):hover:not([disabled]){ border-color: var(--n4-act) !important; color: var(--n4-act) !important; }

/* ---------- 8 · CLIENT PROOF --------------------------------------------------
   The chooser swaps what the rail shows, so it is SELECTION — page 11 drew it
   as a navigation underline. It becomes the page's one chooser shape: a white
   piece in a royal frame on a tinted track (padding added to the tabs so the
   frame never hugs the word; the strip stays centred). */
html body #hp1 .hp-tabs{
  width: fit-content !important; max-width: calc(100% - 2 * var(--hp-edge, 18px)) !important;
  margin-inline: auto !important;
  padding: 4px !important; gap: 2px !important;
  background: var(--n4-ground-2) !important; border: 1px solid var(--n4-line) !important; border-radius: 6px !important;
  box-shadow: none !important;
}
html body #hp1 .hp-tabs .hp-tab{
  align-items: center !important;
  padding: 8px 13px !important; min-height: 38px !important;
  border-radius: 4px !important;
  color: var(--n4-ink-2) !important;
}
html body #hp1 .hp-tab::after{ display: none !important; }
html body #hp1 .hp-tabs .hp-tab:hover:not([aria-selected="true"]){ background: var(--n4-paper) !important; box-shadow: none !important; color: var(--n4-ink) !important; }
html body #hp1 .hp-tabs .hp-tab[aria-selected="true"]{ background: var(--n4-paper) !important; box-shadow: var(--n4-frame) !important; color: var(--n4-ink) !important; font-weight: 700 !important; border-radius: 4px !important; }
html body #hp1 .hp-tab > em{ color: var(--n4-ink-3) !important; }
html body #hp1 .hp-tab[aria-selected="true"] > em{ color: var(--n4-act) !important; background: transparent !important; box-shadow: none !important; }
html body #hp1 .hp-bleed::before{ background-image: linear-gradient(90deg, var(--n4-ground), rgba(255,255,255,0)) !important; }
html body #hp1 .hp-bleed::after{ background-image: linear-gradient(270deg, var(--n4-ground), rgba(255,255,255,0)) !important; }
html body #hp1 .hp-note{ color: var(--n4-ink-3) !important; border-top-color: var(--n4-line) !important; }
html body #hp1 .hp-cta{ background: var(--n4-paper) !important; border: 1px solid var(--n4-line) !important; }
html body #hp1 .hp-ctah{ color: var(--n4-ink) !important; }
html body #hp1 .hp-ctap{ color: var(--n4-ink-2) !important; }
html body #hp1 :is(.hp-dots, .ss-dots) > button[aria-current="true"]{ background: var(--n4-ink) !important; }
html body #hp1 :is(.hp-prev, .hp-next, .hp-arrows button){ background: var(--n4-paper) !important; border-color: var(--n4-edge) !important; color: var(--n4-ink) !important; }

/* ---------- 9 · INDUSTRIES ------------------------------------------------------ */
html body #indwork .v03-card{ border: 1px solid var(--n4-edge) !important; }
html body #indwork .v03-segb.is-on{ font-weight: 700; }
html body #indwork .v03-row .v03-nm{ color: var(--n4-ink-2) !important; }
html body #indwork .v03-row.is-on .v03-nm{ color: var(--n4-ink) !important; font-weight: 700; }
html body #indwork .v03-name{ color: var(--n4-ink) !important; }
html body #indwork .v03-desc{ color: var(--n4-ink-2) !important; }
html body #indwork .v03-label{ color: var(--n4-ink-3) !important; }
html body #indwork .iw2-chip{ color: var(--n4-ink-2) !important; border-color: var(--n4-card) !important; background: var(--n4-paper) !important; }
html body #indwork .iw2-chip svg:not(:has([fill])){ stroke: var(--n4-act) !important; }
html body #indwork .iw2-icn svg:not(:has([fill])){ stroke: var(--n4-ink-3) !important; }
html body #indwork :is(.v03-row.is-on, .v03-head) .iw2-icn svg:not(:has([fill])){ stroke: var(--n4-act) !important; }
html body #indwork .iw2-icn{ border-color: var(--n4-line) !important; }
html body #indwork .v03-row.is-on .iw2-icn{ border-color: var(--n4-act) !important; }

/* ---------- 10 · WHY CHOOSE US ----------------------------------------------------
   the open standard is SELECTION: a white sheet in a royal frame. The frame was
   an inset shadow painted under the head's own white ground (it lost its top),
   so it is an outline, which draws over the children. */
html body #wcu8 .wc-reg{ border: 1px solid var(--n4-edge) !important; }
html body #wcu8 .wc-sheet{ box-shadow: none !important; border-top-color: var(--n4-line) !important; }
html body #wcu8 .wc-sheet.is-open{ box-shadow: none !important; outline: 1.5px solid var(--n4-act) !important; outline-offset: -1.5px !important; position: relative; z-index: 1; }
html body #wcu8 .wc-head:hover{ background: var(--n4-tint) !important; }
html body #wcu8 .wc-head[aria-expanded="true"]{ background: var(--n4-paper) !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-cat{ color: var(--n4-act) !important; }
html body #wcu8 .wc-head .wc-cat{ color: var(--n4-ink-3) !important; }
html body #wcu8 .wc-t{ color: var(--n4-ink) !important; }
html body #wcu8 .wc-ben{ color: var(--n4-ink-2) !important; }
html body #wcu8 .wc-cue{ color: var(--n4-ink-2) !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-cue{ color: var(--n4-ink) !important; }
html body #wcu8 .wc-op{ border-top-color: var(--n4-line) !important; }
html body #wcu8 .wc-opt{ color: var(--n4-ink) !important; }
html body #wcu8 .wc-opt > i{ color: var(--n4-ink-3) !important; }
html body #wcu8 .wc-proofinlay{ background: var(--n4-ground) !important; box-shadow: inset 0 0 0 1px var(--n4-line) !important; }
html body #wcu8 .wc-proofinlay > p{ color: var(--n4-ink-2) !important; }
html body #wcu8 :is(.a-note, .a-fine, .a-sub){ color: var(--n4-ink-3) !important; }
html body #wcu8 .a-note{ color: var(--n4-ink-2) !important; }
html body #wcu8 :is(.a-list, .a-steps, .a-who) li{ color: var(--n4-ink-2); }
html body #wcu8 .vs-a{ background: var(--n4-ground) !important; box-shadow: inset 0 0 0 1px var(--n4-line) !important; color: var(--n4-ink-3) !important; }
html body #wcu8 .wc-close{ background: var(--n4-paper) !important; border: 1px solid var(--n4-line) !important; }
html body #wcu8 .wc-close h3{ color: var(--n4-ink) !important; }
html body #wcu8 .wc-cp{ color: var(--n4-ink-2) !important; }
html body #wcu8 .wc-ck{ color: var(--n4-ink-3) !important; }
html body #wcu8 .wc-opic svg:not(:has([fill])){ stroke: var(--n4-act) !important; }

/* ---------- 11 · ABOUT US ----------------------------------------------------------- */
html body #about5 .ab-ftabs{ background-color: var(--n4-track) !important; border-color: var(--n4-edge) !important; }
html body #about5 .ab-ftab[aria-selected="true"]{ font-weight: 700; }
html body #about5 .ab-ftab svg:not(:has([fill])){ stroke: var(--n4-ink-3) !important; }
html body #about5 .ab-ftab[aria-selected="true"] svg:not(:has([fill])){ stroke: var(--n4-act) !important; }
html body #about5 .ab-split{ box-shadow: none !important; }
html body #about5 .ab-card.ab-outer{ border-color: var(--n4-edge) !important; box-shadow: none !important; }
html body #about5 .ab-shot{ background-color: var(--n4-ground) !important; }
html body #about5 .ab-viz{ background: var(--n4-ground) !important; background-image: none !important; }
html body #about5 .ab-vz-city{ color: var(--n4-ink) !important; }
html body #about5 .ab-vz-av{ background: var(--n4-paper) !important; box-shadow: inset 0 0 0 1px var(--n4-line) !important; }
html body #about5 .ab-vz-av.ab-lead{ background: var(--n4-paper) !important; box-shadow: var(--n4-frame) !important; }
html body #about5 .ab-vz-av.ab-lead svg{ stroke: var(--n4-act) !important; }
html body #about5 .ab-vz-cap{ color: var(--n4-ink-3) !important; }
html body #about5 .ab-vz-num > span{ color: var(--n4-ink-3) !important; }
html body #about5 .ab-pill{ background: var(--n4-badge) !important; color: var(--n4-badge-ink) !important; border-color: var(--n4-line) !important; }
html body #about5 .ab-pill svg{ stroke: var(--n4-badge-ink) !important; }
html body #about5 .ab-nm{ color: var(--n4-ink) !important; }
html body #about5 .ab-legal{ color: var(--n4-ink-2) !important; }
html body #about5 .ab-pnote{ color: var(--n4-ink-2) !important; }
/* the fact keys were #A7AEB9 (2.2:1) */
html body #about5 .ab-k{ color: var(--n4-ink-3) !important; }
html body #about5 .ab-v{ color: var(--n4-ink) !important; }
html body #about5 .ab-pr{ border-bottom-color: var(--n4-line) !important; }
html body #about5 .ab-sti b{ color: var(--n4-ink) !important; }
html body #about5 .ab-sti div > span{ color: var(--n4-ink-3) !important; }
html body #about5 .ab-sic svg:not(:has([fill])){ stroke: var(--n4-act) !important; }
html body #about5 .ab-acts{ background-color: var(--n4-ground) !important; border-top-color: var(--n4-line) !important; }
html body #about5 .ab-btn{ border: 1px solid var(--n4-edge) !important; color: var(--n4-ink) !important; background: var(--n4-paper) !important; }
html body #about5 .ab-btn:hover{ border-color: var(--n4-act) !important; color: var(--n4-link) !important; }
html body #about5 :is(.ab-panel, .ab-body) :is(p, li){ color: var(--n4-ink-2); }
html body #about5 :is(.ab-panel, .ab-body) :is(b, strong, h4){ color: var(--n4-ink); }

/* ---------- 12 · FAQ --------------------------------------------------------------------- */
html body #faq10 .gfaq-title{ color: var(--n4-ink) !important; background-color: var(--n4-paper) !important; }
html body #faq10 .gfaq-title::after{ background: var(--n4-edge) !important; }
html body #faq10 .gfaq-box{ border-color: var(--n4-edge) !important; }
html body #faq10 .gfaq-box::after{ background-image: linear-gradient(rgba(255,255,255,0), var(--n4-paper)) !important; }
html body #faq10 .gfaq-item{ border-color: var(--n4-card) !important; }
html body #faq10 .gfaq-t{ color: var(--n4-ink) !important; }
html body #faq10 .gfaq-body,
html body #faq10 .gfaq-body p{ color: var(--n4-ink-2) !important; }
html body #faq10 :is(.faq-aside, .gfaq-aside){ background: var(--n4-ground) !important; border-color: var(--n4-line) !important; }

/* ---------- 13 · FOOTER --------------------------------------------------------------------- */
html body #sfoot h3{ color: var(--n4-ink-2) !important; border-bottom-color: var(--n4-line) !important; }
html body #sfoot ul a{ color: var(--n4-ink) !important; }
html body #sfoot ul a:hover{ color: var(--n4-link) !important; }
html body #sfoot .f-na{ color: var(--n4-ink-3) !important; }
html body #sfoot .f-soon{ color: var(--n4-ink-3) !important; background: var(--n4-paper) !important; border-color: var(--n4-line) !important; }
html body #sfoot .f-lede{ color: var(--n4-ink-2) !important; }
html body #sfoot .f-base{ border-top-color: var(--n4-line) !important; }
html body #sfoot .f-base :is(p, .f-na){ color: var(--n4-ink-3) !important; }
html body #sfoot .f-base a{ color: var(--n4-ink-2) !important; }
html body #sfoot .f-badge{ background: var(--n4-paper) !important; border-color: var(--n4-line) !important; color: var(--n4-ink-2) !important; }
html body #sfoot .f-soc > a{ background: var(--n4-paper) !important; border-color: var(--n4-edge) !important; }
html body #sfoot .f-soc > a svg{ fill: var(--n4-ink-2) !important; }
html body #sfoot .f-soc > a:hover{ border-color: var(--n4-act) !important; }
html body #sfoot .f-soc > a:hover svg{ fill: var(--n4-act) !important; }
html body #sfoot :is(.f-ci, .f-contact) :is(span, p, a){ color: var(--n4-ink-2); }

/* ---------- 14 · PHONE --------------------------------------------------------------------------- */
@media (max-width: 760px){
  /* the closing band on phones: a tinted shelf, its royal action the only mass */
  html body #mact{ background-color: var(--n4-ground) !important; border-top-color: var(--n4-line) !important; border-bottom-color: var(--n4-line) !important; }
  html body #mact .line{ color: var(--n4-ink) !important; }
  html body #mact .fine{ color: var(--n4-ink-2) !important; }
  html body #mact .fine i{ color: var(--n4-ink-3) !important; }
  html body #hp1 .hp-tabs{ max-width: calc(100% - 36px) !important; }
  html body header.bar #navPrimary{ background-color: var(--n4-paper) !important; }
  html body header.bar #navPrimary a{ color: var(--n4-ink); }
}

/* ===== white-blue-duo-n4q/n4q-allwork-soft.css ===== */
/* ==========================================================================
   All Work band · SOFT BLUE-GREY + FILLED TAB — light blue page only
   Asked 2026-09-14: "make the entire All Work section use a soft light
   blue-grey background and give the active All Work tab a filled light-blue
   rounded selected state, matching the clean highlighted look, while keeping
   the rest of the section unchanged."

   · the band (tab row + cards) is ONE soft blue-grey surface, a hairline at
     its top and bottom; the tab row has no line or tint of its own
   · the chosen tab is a filled light blue rounded pill, blue word and icon —
     tint, not solid, so it never looks like the solid "Get free audit" button
   · paint only: every box keeps its size and position; the cards unchanged
   ========================================================================== */
html body .tail.show .stage{
  background-color: #F1F5FC !important;
  border-top-color: #E3EBF8 !important;
  box-shadow: inset 0 -1px 0 #E3EBF8 !important;   /* bottom hairline without adding a border (+1px) */
}
html body .tail.show #tabs{ background: transparent !important; box-shadow: none !important; }
/* the cards' drawer painted its own white (m9r: --v5-paper) over the lower 198px of the band */
html body .tail.show .drawer{ background: transparent !important; }
html body .tail.show #tabs button{ border-radius: 10px !important; }
html body .tail.show #tabs button:hover:not([aria-selected="true"]){
  background: rgba(255,255,255,.8) !important;
  box-shadow: none !important;
  color: var(--n4-ink) !important;
  border-radius: 10px !important;
}
html body .tail.show #tabs button:active:not([aria-selected="true"]){ background: #E9EFFB !important; }
html body .tail.show #tabs button[aria-selected="true"]{
  background: #DDE8FC !important;
  color: var(--n4-act) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}
html body .tail.show #tabs button[aria-selected="true"] svg:not(:has([fill])){ stroke: var(--n4-act) !important; }
/* the Google Ads tab carries its label in its own spans (k3-map paints them ink) */
html body .tail.show #tabs button[aria-selected="true"] :is(.gah-tabw, .gah-tabname, .gah-tabsub){ color: var(--n4-act) !important; }
html body .tail.show #tabs button:focus-visible{ outline: 2px solid var(--n4-act) !important; outline-offset: -2px !important; border-radius: 10px !important; }

/* ===== white-blue-duo-n4q/n4q-allwork-impact.css ===== */
/* ==========================================================================
   All Work band · IMPACT LAYER — light blue page, loaded after n4q-allwork-soft.css
   Asked 2026-09-14: "impact is too low … after this last change the impression
   level is down — increase it with any technique". The user's look stays: a soft
   blue-grey band and a filled light blue rounded chosen tab.

   Strength picked from a ladder (S / M / L) rendered at half scale side by side:
   only L was obviously stronger than the soft version, so L ships.
   Why it went flat (measured):
     band vs white hero 1.09:1 · chosen pill vs band 1.13:1 · card edge vs band
     1.22:1 · band hairline vs white 1.20:1 — four near-identical values, no
     edge anywhere, and the only crisp accent (the old royal frame) was gone.
   Light tints can't gain much luminance contrast, so the impact comes from
   three techniques instead:
     1 PLANES   white page → a notch deeper band with a real edge → white cards
                lifted off it with a crisp edge and a soft blue-tinted shadow
     2 EDGE     the chosen pill gets a deeper fill (#B9CFFA), a 1.5px mid-blue rim
                and a deep royal word (7:1) — one crisp, saturated object in the band
     3 LIFE     hover raises a card, tints its edge and nudges its arrow
   Paint only (colour, border colour, shadow, radius, transform on hover):
   no box moves, the first screen still ends where it did.
   ========================================================================== */

/* 1 · the band: still soft, now a clear plane with an edge */
html body .tail.show .stage{
  background-color: #E3ECFA !important;
  border-top-color: #C4D3EC !important;
  box-shadow: inset 0 -1px 0 #C4D3EC !important;
}

/* 2 · the tab row */
html body .tail.show #tabs button{ color: #26324A !important; }
html body .tail.show #tabs button svg{ opacity: 1 !important; }
html body .tail.show #tabs button svg:not(:has([fill])){ stroke: #52607A !important; }
html body .tail.show #tabs button:hover:not([aria-selected="true"]){
  background: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px #C4D3EC !important;
  color: #0D1526 !important;
}
html body .tail.show #tabs button[aria-selected="true"]{
  background: #B9CFFA !important;
  box-shadow: inset 0 0 0 1.5px #7C9FE6 !important;
  color: #12348F !important;
  font-weight: 700 !important;   /* not heavier: a wider word would nudge every tab after it */
}
html body .tail.show #tabs button[aria-selected="true"] svg:not(:has([fill])){ stroke: #12348F !important; }
html body .tail.show #tabs button[aria-selected="true"] :is(.gah-tabw, .gah-tabname, .gah-tabsub){ color: #12348F !important; }

/* 3 · every card in every tab: white, crisp edge, lifted */
html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card),
html body .screen .mp-i{
  background-color: #FFFFFF !important;
  border-color: #BCCBE6 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .07), 0 14px 26px -14px rgba(30, 60, 170, .42) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card):hover,
html body .screen .mp-i:hover{
  border-color: #8FAAE0 !important;
  box-shadow: 0 2px 4px rgba(16, 24, 40, .07), 0 18px 30px -14px rgba(30, 79, 214, .5) !important;
  transform: translateY(-2px);
}
html body .screen .mp-i[aria-expanded="true"]{ border-color: var(--n4-act) !important; }
html body .tail.show .card :is(.win, .ss-shot){ border-radius: 7px 7px 0 0; }

/* the door cards' inside: stronger words, a royal arrow that moves on hover */
html body .tail.show .card.door h3{ color: #0D1526 !important; }
html body .tail.show .card.door h3 > span{ color: #34405A !important; }
html body .tail.show .card.door .say{ color: #2E3A52 !important; }
html body .tail.show .card.door .ic svg:not(:has([fill])){ stroke: #1A45BA !important; }
html body .tail.show .card.door .go{
  color: #1A45BA !important;
  border-top-color: #E1E8F4 !important;
  transition: text-indent .16s ease;
}
html body .tail.show .card.door:hover .go{ text-indent: 5px; }

/* keyboard focus on a card: the royal ring, drawn outside the lifted edge */
html body .tail.show :is(.card.door, .mp-i):focus-visible{ outline: 2px solid var(--n4-act) !important; outline-offset: 2px !important; }

/* phones: the card rail is a scroll box that clips anything outside the cards,
   so the lift is carried by the edge alone */
@media (max-width: 760px){
  html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card),
  html body .screen .mp-i{ box-shadow: none !important; border-color: #B3C4E3 !important; }
  html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card):hover,
  html body .screen .mp-i:hover{ transform: none; box-shadow: none !important; }
  html body .tail.show :is(.card.door, .mp-i):focus-visible{ outline-offset: -2px !important; }
}
@media (prefers-reduced-motion: reduce){
  html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card):hover,
  html body .screen .mp-i:hover{ transform: none; }
  html body .tail.show .card.door:hover .go{ text-indent: 0; }
}

/* ===== white-blue-duo-n4q/n4q-fs-map.css ===== */
/* ==========================================================================
   FIRST SCREEN · STRUCTURE-LOCKED COMPONENT MAP  (versions 06–10)
   --------------------------------------------------------------------------
   Asked 2026-09-14: "make more 5 and find deeper best UI, and remember all 5
   versions keep my structure same, work in all rest UI".

   THE STRUCTURE THAT IS FROZEN (checked by _n4q_fsqa.py against the page)
     header   two rows · logo on the left edge · page menu ending on the right edge
     section  one row, starting on the left edge
     hero     label → one-line headline → field → microline, all centred, white ground
     band     full width · tabs in one row from the left edge · the cards in one row
   THE UI THAT VARIES (every value below is a --fs-* token a version sets)
     type, colour, spacing, row heights, the current-page and current-section
     marks, the Contact Us button, the label, the field and its button, the
     microline, the band's surface, tabs, cards, the services menu, the phone
     menu button — at rest, hover, pressed and keyboard focus.
   No `display`, `position` of a box in flow, `order`, `flex-direction` or
   alignment property is set here except inside a control's own box.
   ========================================================================== */

/* ---------------------------------------------------------------- header -- */
html body header.bar{ background: var(--fs-bar-bg) !important; border-bottom: var(--fs-bar-bd) !important; box-shadow: var(--fs-bar-sh) !important; }
@media (min-width: 901px){
  html body header.bar .brow{ min-height: var(--fs-row1-h); padding-top: 0 !important; padding-bottom: 0 !important; }
  html body header.bar .wm{ font-weight: var(--fs-wm-fw) !important; letter-spacing: var(--fs-wm-ls) !important; color: var(--fs-ink) !important; }
  html body header.bar .nav a.ptab{ font-weight: var(--fs-nav-fw) !important; color: var(--fs-nav-ink) !important; letter-spacing: var(--fs-nav-ls) !important; isolation: isolate; }
  html body header.bar .nav a.ptab > span{ color: inherit !important; }
  /* the invisible bold ghost that reserves each tab's width follows the current weight */
  html body header.bar .nav a.ptab::after{ font-weight: var(--fs-nav-cur-fw) !important; letter-spacing: var(--fs-nav-ls) !important; }
  html body header.bar .nav a.ptab:hover{ color: var(--fs-nav-ink-h) !important; }
  html body header.bar .nav a.ptab.cur{ color: var(--fs-nav-cur-ink) !important; font-weight: var(--fs-nav-cur-fw) !important; }
  html body header.bar .nav a.ptab.cur::before{
    left: var(--fs-cur-x) !important; right: var(--fs-cur-x) !important;
    top: var(--fs-cur-t) !important; bottom: var(--fs-cur-b) !important; height: var(--fs-cur-h) !important;
    background: var(--fs-cur-bg) !important; border-radius: var(--fs-cur-r) !important; box-shadow: var(--fs-cur-sh) !important;
    z-index: var(--fs-cur-z) !important;
  }
  /* Contact Us — the header's action, drawn inside its own box so the menu still ends on the right edge */
  html body header.bar .nav a.ptab[href="contact-us.html"]{
    padding: var(--fs-cb-pad) !important; border-radius: var(--fs-cb-r) !important;
    background: var(--fs-cb-bg) !important; box-shadow: var(--fs-cb-sh) !important; color: var(--fs-cb-ink) !important;
    font-weight: var(--fs-cb-fw) !important; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease !important;
  }
  html body header.bar .nav a.ptab[href="contact-us.html"]:hover{ background: var(--fs-cb-bg-h) !important; box-shadow: var(--fs-cb-sh-h) !important; color: var(--fs-cb-ink-h) !important; transform: var(--fs-cb-lift); }
  html body header.bar .nav a.ptab[href="contact-us.html"]:active{ transform: none; }
  html body header.bar .nav a.ptab:focus-visible{ outline: 2px solid var(--fs-act) !important; outline-offset: 4px !important; border-radius: 6px !important; }

  /* the section row */
  html body header.bar .krow{ background: var(--fs-row2-bg) !important; border-top: var(--fs-row2-bd) !important; padding: 0 var(--nav-gutter) !important; }
  html body header.bar .krow .kids{ justify-content: flex-start !important; align-items: stretch !important; }
  html body header.bar .krow a.kid{
    font-size: var(--fs-kid-fs) !important; font-weight: var(--fs-kid-fw) !important; letter-spacing: var(--fs-kid-ls) !important;
    text-transform: var(--fs-kid-tt) !important; color: var(--fs-kid-ink) !important;
    line-height: var(--fs-row2-h) !important; padding: 0 !important; isolation: isolate;
  }
  html body header.bar .krow a.kid:hover{ color: var(--fs-kid-ink-h) !important; }
  html body header.bar .krow a.kid.on{ color: var(--fs-kid-on-ink) !important; font-weight: var(--fs-kid-on-fw) !important; }
  html body header.bar .krow a.kid.on::after{
    left: var(--fs-kon-x) !important; right: var(--fs-kon-x) !important;
    top: var(--fs-kon-t) !important; bottom: var(--fs-kon-b) !important; height: var(--fs-kon-h) !important; width: var(--fs-kon-w) !important;
    margin-inline: var(--fs-kon-m) !important;
    background: var(--fs-kon-bg) !important; border-radius: var(--fs-kon-r) !important; box-shadow: var(--fs-kon-sh) !important; z-index: var(--fs-kon-z) !important;
  }
  html body header.bar .krow a.kid:focus-visible{ outline: 2px solid var(--fs-act) !important; outline-offset: -4px !important; border-radius: 4px !important; }

  /* the services menu that hangs from "Our Services" */
  html body header.bar .svcm{ background: #FFFFFF !important; border: var(--fs-menu-bd) !important; border-radius: var(--fs-menu-r) !important; box-shadow: var(--fs-menu-sh) !important; }
  html body header.bar .svcm a:hover{ background: var(--fs-menu-hov) !important; color: var(--fs-ink) !important; }
}
@media (min-width: 1181px){
  html body header.bar .krow .kids{ gap: var(--fs-kid-gap) !important; }
}
@media (min-width: 1281px){
  html body header.bar .wm{ font-size: var(--fs-wm-fs) !important; }
  html body header.bar .wm .mark{ width: var(--fs-mark) !important; height: var(--fs-mark) !important; }
  html body header.bar .nav{ gap: var(--fs-nav-gap) !important; }
  html body header.bar .nav a.ptab{ font-size: var(--fs-nav-fs) !important; }
}
@media (max-width: 900px){
  html body header.bar .barmenu{ border-radius: var(--fs-burger-r) !important; box-shadow: var(--fs-burger-sh) !important; background: #FFFFFF !important; color: var(--fs-ink) !important; border-color: transparent !important; }
  html body header.bar .krow{ background: var(--fs-row2-bg) !important; border-top: var(--fs-row2-bd) !important; }
  html body header.bar .krow a.kid{ color: var(--fs-kid-ink) !important; letter-spacing: var(--fs-kid-ls) !important; text-transform: var(--fs-kid-tt) !important; }
  html body header.bar .krow a.kid.on{ color: var(--fs-kid-on-ink) !important; }
  html body header.bar .krow a.kid.on::after{ background: var(--fs-kon-bg-phone) !important; }
}

/* ------------------------------------------------------------------ hero -- */
html body .screen{ background: #FFFFFF !important; }
html body .screen main.hero{ background: transparent !important; }
html body .screen .tex{
  opacity: 1 !important;
  background-image: var(--fs-tex) !important; background-size: var(--fs-tex-size) !important; background-position: center -1px !important;
  -webkit-mask-image: var(--fs-tex-mask) !important; mask-image: var(--fs-tex-mask) !important;
}
@media (min-width: 761px){
  html body .screen main.hero::before{ flex: var(--fs-air-a) 1 0% !important; }
  html body .screen main.hero::after{ flex: var(--fs-air-b) 1 0% !important; }
  html body .screen .hero p.label{
    display: inline-flex !important; align-items: center; gap: var(--fs-lb-gap);
    font-family: var(--fs-lb-ff) !important; font-size: var(--fs-lb-fs) !important; font-weight: var(--fs-lb-fw) !important;
    letter-spacing: var(--fs-lb-ls) !important; text-transform: var(--fs-lb-tt) !important; color: var(--fs-lb-ink) !important;
    padding: var(--fs-lb-pad) !important; border-radius: var(--fs-lb-r); background: var(--fs-lb-bg); box-shadow: var(--fs-lb-sh);
  }
  html body .screen .hero p.label::before{
    content: var(--fs-lb-dot); width: var(--fs-lb-dot-w); height: var(--fs-lb-dot-h); border-radius: var(--fs-lb-dot-r);
    background: var(--fs-lb-dot-bg); box-shadow: var(--fs-lb-dot-sh); flex: none;
  }
  html body .screen .hero h1{
    font-size: var(--fs-h1-fs) !important; font-weight: var(--fs-h1-fw) !important; letter-spacing: var(--fs-h1-ls) !important;
    line-height: 1.02 !important; margin-top: var(--fs-h1-mt) !important; white-space: nowrap; color: var(--fs-ink) !important;
  }
  html body .screen .hero h1 em,
  html body .screen .hero h1 em i{ color: var(--fs-h1-em) !important; }
  html body .screen .hero form.capture{
    width: var(--fs-cap-w) !important; margin-top: var(--fs-cap-mt) !important; padding: var(--fs-cap-pad) !important;
    border: var(--fs-cap-bd) !important; border-radius: var(--fs-cap-r) !important; background: var(--fs-cap-bg) !important; box-shadow: var(--fs-cap-sh) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  html body .screen .hero form.capture:hover{ border-color: var(--fs-cap-bd-h) !important; }
  html body .screen .hero form.capture:focus-within{ border-color: var(--fs-act) !important; box-shadow: var(--fs-cap-sh-f) !important; }
  html body .screen .hero .capture :is(.capfix, input, button){ height: var(--fs-ctl-h) !important; min-height: 0 !important; }
  html body .screen .hero .capture .capfix{
    background: var(--fs-fix-bg) !important; color: var(--fs-fix-ink) !important; border-right: var(--fs-fix-div) !important;
    border-radius: var(--fs-fix-r) !important; font-size: var(--fs-fix-fs) !important;
  }
  html body .screen .hero .capture input{ font-size: var(--fs-in-fs) !important; color: var(--fs-ink) !important; background: var(--fs-in-bg) !important; border-radius: 0 !important; }
  html body .screen .hero .capture input::placeholder{ color: var(--fs-in-ph) !important; }
  html body .screen .hero .capture button{
    background: var(--fs-act) !important; color: #FFFFFF !important; border-radius: var(--fs-btn-r) !important;
    padding: 0 var(--fs-btn-px) !important; font-size: var(--fs-btn-fs) !important; font-weight: var(--fs-btn-fw) !important;
    letter-spacing: var(--fs-btn-ls) !important; text-transform: var(--fs-btn-tt) !important; box-shadow: var(--fs-btn-sh) !important;
    transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease !important;
  }
  html body .screen .hero .capture button:hover{ background: var(--fs-act-h) !important; box-shadow: var(--fs-btn-sh-h) !important; }
  html body .screen .hero .capture button:active{ background: var(--fs-act-a) !important; box-shadow: var(--fs-btn-sh-a) !important; }
  html body .screen .hero .capture button:focus-visible{ outline: 2px solid #FFFFFF !important; outline-offset: -5px !important; }
  html body .screen .hero .microline{ font-size: var(--fs-mic-fs) !important; color: var(--fs-mic-ink) !important; margin-top: var(--fs-mic-mt) !important; letter-spacing: 0 !important; }
  html body .screen .hero .microline > b{ color: var(--fs-mic-b) !important; font-weight: 700 !important; }
  html body .screen .hero .microline > i{ color: var(--fs-mic-sep) !important; padding: 0 var(--fs-mic-sep-p) !important; }
}
@media (max-width: 760px){
  html body .screen .hero p.label{ color: var(--fs-lb-ink) !important; font-family: var(--fs-lb-ff) !important; font-size: var(--fs-lb-fs-phone) !important;
    font-weight: var(--fs-lb-fw) !important; letter-spacing: var(--fs-lb-ls-phone) !important; text-transform: var(--fs-lb-tt) !important; }
  html body .screen .hero form.capture{ padding: var(--fs-cap-pad) !important; border: var(--fs-cap-bd) !important; border-radius: var(--fs-cap-r-phone) !important; background: var(--fs-cap-bg) !important; box-shadow: var(--fs-cap-sh-phone) !important; }
  html body .screen .hero .capture .capfix{ background: var(--fs-fix-bg) !important; border-radius: var(--fs-fix-r) !important; }
  html body .screen .hero .capture button{ background: var(--fs-act) !important; border-radius: var(--fs-btn-r-phone) !important; box-shadow: var(--fs-btn-sh) !important;
    margin-top: var(--fs-cap-pad) !important; text-transform: var(--fs-btn-tt) !important; letter-spacing: var(--fs-btn-ls) !important; }
  html body .screen .hero .microline > b{ color: var(--fs-mic-b) !important; }
}

/* ------------------------------------------------------------------ band -- */
html body .tail.show .stage{ background-color: var(--fs-band-bg) !important; border-top-color: var(--fs-band-line) !important; box-shadow: var(--fs-band-sh) !important; }
html body .tail.show #tabs button{ color: var(--fs-tab-ink) !important; font-weight: var(--fs-tab-fw) !important; letter-spacing: var(--fs-tab-ls) !important; border-radius: var(--fs-tab-r) !important; }
html body .tail.show #tabs button svg{ opacity: 1 !important; }
html body .tail.show #tabs button svg:not(:has([fill])){ stroke: var(--fs-tab-icon) !important; }
html body .tail.show #tabs button:hover:not([aria-selected="true"]){ background: var(--fs-tab-hov-bg) !important; box-shadow: var(--fs-tab-hov-sh) !important; color: var(--fs-ink) !important; border-radius: var(--fs-tab-r) !important; }
html body .tail.show #tabs button:active:not([aria-selected="true"]){ background: var(--fs-tab-prs-bg) !important; }
html body .tail.show #tabs button[aria-selected="true"]{
  background: var(--fs-tab-on-bg) !important; box-shadow: var(--fs-tab-on-sh) !important; color: var(--fs-tab-on-ink) !important;
  font-weight: var(--fs-tab-fw) !important; border-radius: var(--fs-tab-r) !important;
}
html body .tail.show #tabs button[aria-selected="true"] svg:not(:has([fill])){ stroke: var(--fs-tab-on-ink) !important; }
html body .tail.show #tabs button[aria-selected="true"] :is(.gah-tabw, .gah-tabname, .gah-tabsub){ color: var(--fs-tab-on-ink) !important; }
html body .tail.show #tabs button:focus-visible{ outline: 2px solid var(--fs-act) !important; outline-offset: -2px !important; }
@media (min-width: 1181px){ html body .tail.show #tabs{ gap: var(--fs-tab-gap) !important; } }

html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card),
html body .screen .mp-i{
  background-color: #FFFFFF !important; border-color: var(--fs-card-bd) !important; border-radius: var(--fs-card-r) !important; box-shadow: var(--fs-card-sh) !important;
}
html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card):hover,
html body .screen .mp-i:hover{ border-color: var(--fs-card-bd-h) !important; box-shadow: var(--fs-card-sh-h) !important; transform: var(--fs-card-lift); }
html body .screen .mp-i[aria-expanded="true"]{ border-color: var(--fs-act) !important; }
html body .tail.show .card :is(.win, .ss-shot){ border-radius: calc(var(--fs-card-r) - 1px) calc(var(--fs-card-r) - 1px) 0 0; }
html body .tail.show .card.door h3{ font-size: var(--fs-ct-fs) !important; font-weight: var(--fs-ct-fw) !important; letter-spacing: var(--fs-ct-ls) !important; color: var(--fs-ink) !important; }
html body .tail.show .card.door h3 > span{ color: var(--fs-cs-ink) !important; font-weight: var(--fs-cs-fw) !important; }
html body .tail.show .card.door .say{ color: var(--fs-say-ink) !important; }
html body .tail.show .card.door .ic svg:not(:has([fill])){ stroke: var(--fs-card-icon) !important; }
html body .tail.show .card.door .go{ color: var(--fs-go-ink) !important; border-top-color: var(--fs-go-line) !important; }
html body .tail.show :is(.card.door, .mp-i):focus-visible{ outline: 2px solid var(--fs-act) !important; outline-offset: 2px !important; }
@media (max-width: 760px){
  html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card),
  html body .screen .mp-i{ box-shadow: none !important; border-color: var(--fs-card-bd-phone) !important; }
  html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card):hover{ transform: none; box-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce){
  html body .tail.show :is(.card.door, .card.name, .card.piece, .card.wt-pv, article.card):hover,
  html body header.bar .nav a.ptab[href="contact-us.html"]:hover{ transform: none; }
}

/* ===== white-blue-duo-n4q/n4q-fs2-map.css ===== */
/* ==========================================================================
   FIRST SCREEN · DETAIL MAP  (versions 11–15 only, loaded after n4q-fs-map.css)
   --------------------------------------------------------------------------
   Asked 2026-09-14 after 06–10: "08 is somewhere impressing me … but I do not
   like the black line, the hard shadow … do not make the title too big and
   bold … understand from the logo, the header strip backgrounds, the sub menu,
   the middle and the All Work section … each small space and element".

   The structure is still the page's own (same lock, _n4q_fsqa.py). This layer
   adds the finer controls the first map did not reach: a brand stripe on the
   header, the Contact button's lettering, room for a chip on the section row,
   the headline's own ink, flanking rules on the eyebrow, the microline's
   weight, the band's top rule weight, the tab lettering, and the card's inner
   craft (padding, icon plate, sub-line, text size, arrow weight).
   ========================================================================== */

html body header.bar{ border-top: var(--fs2-bar-top) !important; }
@media (min-width: 901px){
  html body header.bar .nav a.ptab[href="contact-us.html"]{
    font-size: var(--fs2-cb-fs) !important; letter-spacing: var(--fs2-cb-ls) !important; text-transform: var(--fs2-cb-tt) !important;
  }
  /* the section row clips its children: room for a chip, given back as a negative margin so no word moves */
  html body header.bar .krow .kids{ padding-inline: var(--fs2-kids-room) !important; margin-inline: calc(-1 * var(--fs2-kids-room)) !important; }
}

@media (min-width: 761px){
  html body .screen .hero h1{ color: var(--fs2-h1-ink) !important; }
  html body .screen .hero p.label::after{
    content: var(--fs2-lb-after); width: var(--fs-lb-dot-w); height: var(--fs-lb-dot-h);
    background: var(--fs-lb-dot-bg); border-radius: var(--fs-lb-dot-r); flex: none;
  }
  html body .screen .hero .microline > b{ font-weight: var(--fs2-mic-bfw) !important; }

  html body .tail.show .card.door{ padding: var(--fs2-card-pad) !important; }
  html body .tail.show .card.door .say{ font-size: var(--fs2-say-fs) !important; line-height: var(--fs2-say-lh) !important; }
}

html body .tail.show .stage{ border-top-width: var(--fs2-band-bw) !important; border-top-style: solid !important; }
html body .tail.show #tabs button{ text-transform: var(--fs2-tab-tt) !important; }
@media (min-width: 1281px){
  html body .tail.show #tabs button{ font-size: var(--fs2-tab-fs) !important; }
}

html body .tail.show .card.door .ic{
  width: var(--fs2-ic-box) !important; height: var(--fs2-ic-box) !important;
  background: var(--fs2-ic-bg) !important; border-radius: var(--fs2-ic-r) !important; box-shadow: var(--fs2-ic-sh) !important;
  justify-content: var(--fs2-ic-j) !important; align-items: center !important;
}
html body .tail.show .card.door .ic svg{ width: var(--fs2-ic-svg) !important; height: var(--fs2-ic-svg) !important; }
html body .tail.show .card.door h3 > span{
  font-size: var(--fs2-cs-fs) !important; letter-spacing: var(--fs2-cs-ls) !important; text-transform: var(--fs2-cs-tt) !important;
  margin-top: var(--fs2-cs-mt) !important;
}
html body .tail.show .card.door .go{ font-weight: var(--fs2-go-fw) !important; }

/* ===== white-blue-duo-n4q/n4q-fs3-map.css ===== */
/* ==========================================================================
   FIRST SCREEN · IMPACT MAP  (versions 16–20 only, loaded after n4q-fs2-map.css)
   --------------------------------------------------------------------------
   Asked 2026-09-14 after 11–15: "nothing clear, no impact, no aggression, no
   eye attraction, no good appearance — totally low impact".
   11–15 removed 08's black lines, hard shadow and heavy headline and put
   nothing equally strong in their place. This layer adds the strong devices,
   all in blue: colour bands under the header and the tabs, a coloured header,
   filled marks, a highlighted or gradient "customers.", an arrow on the
   audit button, a spotlight behind the headline, filled icon tiles.
   Structure is still locked by _n4q_fsqa.py.
   ========================================================================== */

html body header.bar .wm{ color: var(--fs3-wm-ink) !important; }
html body header.bar .barmenu{ background: var(--fs3-burger-bg) !important; }
/* the page menu paints its own ground (the phone drop-down needs it); on a coloured header it must not */
@media (min-width: 901px){ html body header.bar #navPrimary{ background-color: var(--fs3-nav-bg) !important; } }
/* n4q-finish colours the current tab's inner <span> directly (one class stronger than the map's inherit): take it back */
@media (min-width: 901px){ html body header.bar .nav a.ptab.cur > span{ color: inherit !important; } }

/* phones draw the current section as a bar, not a chip, so its word needs its own colour there */
@media (max-width: 900px){ html body header.bar .krow a.kid.on{ color: var(--fs3-kid-on-ink-phone) !important; } }

html body .tail.show #tabs{ background: var(--fs3-tabs-bg) !important; }
html body .tail.show .drawer{ background: var(--fs3-drawer-bg) !important; }
html body .tail.show .stage{ background-image: var(--fs3-band-img) !important; }
html body .tail.show #tabs button:hover:not([aria-selected="true"]){ color: var(--fs3-tab-ink-h) !important; }
html body .tail.show #tabs button:not([aria-selected="true"]) :is(.gah-tabw, .gah-tabname, .gah-tabsub){ color: var(--fs-tab-ink) !important; }

@media (min-width: 761px){
  html body .screen .hero h1 em{
    background: var(--fs3-em-bg) !important;
    -webkit-background-clip: var(--fs3-em-clip) !important; background-clip: var(--fs3-em-clip) !important;
    -webkit-text-fill-color: var(--fs3-em-fill) !important;
    padding-inline: var(--fs3-em-px) !important; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  html body .screen .hero h1 em i{ -webkit-text-fill-color: var(--fs3-em-fill) !important; }
  html body .screen .hero .capture button{ background: var(--fs3-btn-bg) !important; }
  html body .screen .hero .capture button:hover{ background: var(--fs3-btn-bg-h) !important; }
}
html body .screen .hero .capture button::after{ content: var(--fs3-btn-after); margin-left: .5em; font-weight: 800; }
@media (max-width: 760px){
  html body .screen .hero .capture button{ background: var(--fs3-btn-bg) !important; }
  html body .screen .hero p.label{ background: var(--fs-lb-bg) !important; padding: var(--fs3-lb-pad-phone) !important; border-radius: var(--fs-lb-r) !important; box-shadow: var(--fs-lb-sh) !important; }
}

html body .tail.show .card.door .ic:has(svg [fill]){ background: var(--fs3-ic-bg-fill) !important; box-shadow: var(--fs3-ic-sh-fill) !important; }

/* ===== white-blue-duo-n4q/n4q-fs4-map.css ===== */
/* ==========================================================================
   FIRST SCREEN · ATMOSPHERE MAP  (versions 21–25 only, loaded after n4q-fs3-map.css)
   --------------------------------------------------------------------------
   Asked 2026-09-14 after 16–20: "18 and 19 are something nearby satisfying me
   … I am telling you what kind of creativity is required, in the solid way …
   go beyond … give me the next five like the two I shortlisted".
   What 18 and 19 share: the hero is LIT (a light with a direction, not a flat
   tint) and the page has one premium contrast. This layer adds the two things
   the earlier maps could not draw:
     · a light on the hero box itself (above the page texture, below the words)
     · one ornament anchored to the headline and measured from the field's own
       tokens, so rings, a pool of light or a glow sit on the field at every size
   Nothing here moves a box: the ornament is absolute, and the hero clips it.
   Structure is still locked by _n4q_fsqa.py.
   ========================================================================== */

@media (min-width: 761px){
  html body .screen main.hero{ background-image: var(--fs4-hero-img) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; overflow: clip !important; }
  html body .screen .hero h1{ position: relative; }
  /* centred on the page, --fs4-orn-dy below the headline's bottom edge (1.02em = the headline's one line) */
  html body .screen .hero h1::before{
    content: var(--fs4-orn); position: absolute; z-index: -1; pointer-events: none;
    left: 50%; width: var(--fs4-orn-w); margin-left: calc(var(--fs4-orn-w) / -2);
    top: calc(1.02em + var(--fs4-orn-dy) - var(--fs4-orn-ry)); height: calc(2 * var(--fs4-orn-ry));
    background: var(--fs4-orn-bg);
    -webkit-mask-image: var(--fs4-orn-mask); mask-image: var(--fs4-orn-mask);
  }
  html body .screen .hero p.label{ -webkit-backdrop-filter: var(--fs4-lb-blur); backdrop-filter: var(--fs4-lb-blur); }
}

/* ===== white-blue-duo-n4q/n4q-fs5-map.css ===== */
/* ==========================================================================
   FIRST SCREEN · WHOLE-SCREEN CRAFT MAP  (versions 26–30 only, after n4q-fs4-map.css)
   --------------------------------------------------------------------------
   Asked 2026-09-15 (notes: first-screen-notes-26-30.md): no underline marks
   anywhere, menus designed as pieces, and the All Work band given as much
   design as the header and the hero.

   The one shared fix: the page pins the hero at load, and a shorter tab left
   the rest of .screen WHITE under the band (Google Ads, Client Wall…; even
   All Work left a 13px sliver). Once the hero is pinned, the band takes that
   space, so the first screen ends on the band on every tab. It grows only
   after the pin — while the page measures, the hero must stay the only
   flexible child or it would come out shorter.
   ========================================================================== */

html body .screen:has(> main.hero.wk-pin) > .tail.show{ flex-grow: 1 !important; }
html body .tail.show{ background-color: var(--fs-band-bg) !important; }
html body .tail.show > .stage{ flex-grow: 1; }

/* ===== white-blue-duo-n4q/n4q-home-full.css ===== */
/* FULL homepage in the approved system — GENERATED by _n4q_full.py */
/* B (no shadow + Corridor) with a wider first screen — GENERATED by _n4q_wide.py */
/* no-shadow page + Corridor middle — GENERATED by _n4q_corridor.py */
/* F01 Clean White with NO shadow anywhere — GENERATED by _n4q_noshadow.py */
/* FINAL first screen (Lit and Light) · middle f01 Clean White — GENERATED by _n4q_mid20.py */
/* A (Cobalt) · blue dot system 3 Lit and Light — GENERATED by _n4q_dot3.py */
/* 94 clar-1 Cobalt · option a Brand Blue — GENERATED by _n4q_logo5.py from n4q-hero-94-clar-1-cobalt.css */
/* 94 Touch Depth · main menu bar 1 Deep Cobalt — GENERATED by _n4q_clar5.py from n4q-hero-94-depth.css */
/* n4q-hero-94-depth.css — 74 Pure Type with one part changed (GENERATED by _n4q_parts.py) */
html body{
  --fs-act: #005BBF;
  --fs-act-a: #00428F;
  --fs-act-h: #004FA7;
  --fs-air-a: 46;
  --fs-air-b: 54;
  --fs-band-bg: #E9EFF9;
  --fs-band-line: transparent;
  --fs-band-sh: none;
  --fs-bar-bd: 0px solid transparent;
  --fs-bar-bg: #012350;
  --fs-bar-sh: 0 18px 34px -24px rgba(1,35,80,.5);
  --fs-btn-fs: 16px;
  --fs-btn-fw: 800;
  --fs-btn-ls: -.005em;
  --fs-btn-px: 30px;
  --fs-btn-r: 6px;
  --fs-btn-r-phone: 6px;
  --fs-btn-sh: 0 8px 18px -8px rgba(0,91,191,.7);
  --fs-btn-sh-a: inset 0 2px 0 rgba(0,0,0,.2);
  --fs-btn-sh-h: 0 12px 24px -10px rgba(0,91,191,.75);
  --fs-btn-tt: none;
  --fs-burger-r: 8px;
  --fs-burger-sh: none;
  --fs-cap-bd: 1.5px solid #012350;
  --fs-cap-bd-h: #003575;
  --fs-cap-bg: #FFFFFF;
  --fs-cap-mt: clamp(36px, 5.2vh, 50px);
  --fs-cap-pad: 6px;
  --fs-cap-r: 10px;
  --fs-cap-r-phone: 8px;
  --fs-cap-sh: 0 0 0 6px rgba(0,91,191,.07), 0 30px 60px -28px rgba(2,29,67,.5);
  --fs-cap-sh-f: 0 0 0 6px rgba(0,91,191,.18), 0 30px 60px -28px rgba(2,29,67,.5);
  --fs-cap-sh-phone: 0 16px 32px -20px rgba(1,35,80,.4);
  --fs-cap-w: min(780px, 100%);
  --fs-card-bd: #D6E0F0;
  --fs-card-bd-h: #7AA9ED;
  --fs-card-bd-phone: #B6CAE6;
  --fs-card-icon: #FFFFFF;
  --fs-card-lift: translateY(-3px);
  --fs-card-r: 10px;
  --fs-card-sh: 0 10px 22px -18px rgba(1,35,80,.35);
  --fs-card-sh-h: 0 18px 32px -20px rgba(1,35,80,.42);
  --fs-cb-bg: transparent;
  --fs-cb-bg-h: rgba(255,255,255,.06);
  --fs-cb-fw: 550;
  --fs-cb-ink: rgba(255,255,255,.62);
  --fs-cb-ink-h: #FFFFFF;
  --fs-cb-lift: none;
  --fs-cb-pad: 9px 4px;
  --fs-cb-r: 0px;
  --fs-cb-sh: none;
  --fs-cb-sh-h: none;
  --fs-cs-fw: 650;
  --fs-cs-ink: #375989;
  --fs-ct-fs: 16px;
  --fs-ct-fw: 800;
  --fs-ct-ls: -.02em;
  --fs-ctl-h: clamp(52px, 6.6vh, 58px);
  --fs-cur-b: -20px;
  --fs-cur-bg: transparent;
  --fs-cur-h: 0px;
  --fs-cur-r: 0px;
  --fs-cur-sh: none;
  --fs-cur-t: auto;
  --fs-cur-x: 0px;
  --fs-cur-z: auto;
  --fs-fix-bg: #EDF4FE;
  --fs-fix-div: 0px solid transparent;
  --fs-fix-fs: 13.5px;
  --fs-fix-ink: #21416D;
  --fs-fix-r: 6px 0 0 6px;
  --fs-go-ink: #FFFFFF;
  --fs-go-line: transparent;
  --fs-h1-em: #005BBF;
  --fs-h1-fs: clamp(34px, min(4.78cqw, 8.6vh), 87px);
  --fs-h1-fw: 800;
  --fs-h1-ls: -.04em;
  --fs-h1-mt: clamp(16px, 2.4vh, 22px);
  --fs-in-bg: #FFFFFF;
  --fs-in-fs: 16.5px;
  --fs-in-ph: #8696AB;
  --fs-ink: #031D40;
  --fs-kid-fs: 13px;
  --fs-kid-fw: 600;
  --fs-kid-gap: 0px;
  --fs-kid-ink: rgba(255,255,255,.7);
  --fs-kid-ink-h: #FFFFFF;
  --fs-kid-ls: 0;
  --fs-kid-on-fw: 750;
  --fs-kid-on-ink: #FFFFFF;
  --fs-kid-tt: none;
  --fs-kon-b: 0px;
  --fs-kon-bg: transparent;
  --fs-kon-bg-phone: #8AB8F7;
  --fs-kon-h: 0px;
  --fs-kon-m: 0px;
  --fs-kon-r: 0px;
  --fs-kon-sh: none;
  --fs-kon-t: auto;
  --fs-kon-w: auto;
  --fs-kon-x: 0px;
  --fs-kon-z: auto;
  --fs-lb-bg: #021C42;
  --fs-lb-dot: "";
  --fs-lb-dot-bg: #8AB8F7;
  --fs-lb-dot-h: 7px;
  --fs-lb-dot-r: 999px;
  --fs-lb-dot-sh: 0 0 0 3px rgba(138,184,247,.25), 0 0 10px rgba(138,184,247,.6);
  --fs-lb-dot-w: 7px;
  --fs-lb-ff: var(--sans);
  --fs-lb-fs: 12.5px;
  --fs-lb-fs-phone: 10.5px;
  --fs-lb-fw: 750;
  --fs-lb-gap: 9px;
  --fs-lb-ink: #FFFFFF;
  --fs-lb-ls: .15em;
  --fs-lb-ls-phone: .08em;
  --fs-lb-pad: 7px 14px 7px 11px;
  --fs-lb-r: 6px;
  --fs-lb-sh: none;
  --fs-lb-tt: uppercase;
  --fs-mark: 40px;
  --fs-menu-bd: 1px solid #C9D7EB;
  --fs-menu-hov: #EEF4FD;
  --fs-menu-r: 10px;
  --fs-menu-sh: 0 24px 48px -24px rgba(1,35,80,.5);
  --fs-mic-b: #005BBF;
  --fs-mic-fs: 15px;
  --fs-mic-ink: #21416D;
  --fs-mic-mt: clamp(14px, 2vh, 18px);
  --fs-mic-sep: #7BA5E0;
  --fs-mic-sep-p: .7em;
  --fs-nav-cur-fw: 750;
  --fs-nav-cur-ink: #FFFFFF;
  --fs-nav-fs: 15px;
  --fs-nav-fw: 650;
  --fs-nav-gap: 0px;
  --fs-nav-ink: rgba(255,255,255,.62);
  --fs-nav-ink-h: #FFFFFF;
  --fs-nav-ls: -.005em;
  --fs-row1-h: 66px;
  --fs-row2-bd: 0px solid transparent;
  --fs-row2-bg: rgba(255,255,255,.045);
  --fs-row2-h: 44px;
  --fs-say-ink: #21416D;
  --fs-tab-fw: 650;
  --fs-tab-gap: 0px;
  --fs-tab-hov-bg: rgba(255,255,255,.8);
  --fs-tab-hov-sh: none;
  --fs-tab-icon: #516B8F;
  --fs-tab-ink: #2F486B;
  --fs-tab-ls: 0;
  --fs-tab-on-bg: #C5D9F6;
  --fs-tab-on-ink: #003C81;
  --fs-tab-on-sh: none;
  --fs-tab-prs-bg: #E2EBF8;
  --fs-tab-r: 9px;
  --fs-tex: radial-gradient(circle, rgba(0,91,191,.28) 1.2px, transparent 1.7px);
  --fs-tex-mask: radial-gradient(46% 78% at 50% 0%, #000 30%, transparent 100%);
  --fs-tex-size: 24px 24px;
  --fs-wm-fs: 18.5px;
  --fs-wm-fw: 800;
  --fs-wm-ls: -.035em;
  --fs2-band-bw: 1px;
  --fs2-bar-top: 0px solid transparent;
  --fs2-card-pad: 12px 16px 14px;
  --fs2-cb-fs: 14.5px;
  --fs2-cb-ls: 0;
  --fs2-cb-tt: none;
  --fs2-cs-fs: 12.5px;
  --fs2-cs-ls: 0;
  --fs2-cs-mt: 2px;
  --fs2-cs-tt: none;
  --fs2-go-fw: 800;
  --fs2-h1-ink: #031D40;
  --fs2-ic-bg: linear-gradient(160deg, #024491 0%, #021C42 100%);
  --fs2-ic-box: 34px;
  --fs2-ic-j: center;
  --fs2-ic-r: 9px;
  --fs2-ic-sh: 0 6px 14px -6px rgba(2,29,67,.55);
  --fs2-ic-svg: 18px;
  --fs2-kids-room: 0px;
  --fs2-lb-after: none;
  --fs2-mic-bfw: 800;
  --fs2-say-fs: 13px;
  --fs2-say-lh: 1.5;
  --fs2-tab-fs: 14.5px;
  --fs2-tab-tt: none;
  --fs3-band-img: none;
  --fs3-btn-after: "→";
  --fs3-btn-bg: #005BBF;
  --fs3-btn-bg-h: #004FA7;
  --fs3-burger-bg: #FFFFFF;
  --fs3-drawer-bg: transparent;
  --fs3-em-bg: linear-gradient(90deg, #005BBF 0%, #2A7CE7 100%);
  --fs3-em-clip: text;
  --fs3-em-fill: transparent;
  --fs3-em-px: 0px;
  --fs3-ic-bg-fill: #FFFFFF;
  --fs3-ic-sh-fill: inset 0 0 0 1px #C9D9EF;
  --fs3-kid-on-ink-phone: #FFFFFF;
  --fs3-lb-pad-phone: 6px 12px;
  --fs3-nav-bg: transparent;
  --fs3-tab-ink-h: #031D40;
  --fs3-tabs-bg: transparent;
  --fs3-wm-ink: #FFFFFF;
  --fs4-hero-img: radial-gradient(30% 34% at 50% 0%, rgba(109,166,245,.40) 0%, rgba(109,166,245,.13) 55%, rgba(109,166,245,0) 100%), conic-gradient(from 146deg at 50% -18%, rgba(0,91,191,0) 0deg, rgba(0,91,191,.12) 13deg, rgba(0,91,191,.19) 34deg, rgba(0,91,191,.12) 55deg, rgba(0,91,191,0) 68deg, rgba(0,91,191,0) 360deg), radial-gradient(64% 100% at 50% 0%, rgba(0,91,191,.10) 0%, rgba(0,91,191,0) 100%);
  --fs4-lb-blur: none;
  --fs4-orn: none;
  --fs4-orn-bg: none;
  --fs4-orn-dy: 0px;
  --fs4-orn-mask: none;
  --fs4-orn-ry: 0px;
  --fs4-orn-w: 0px;
}

@media (min-width: 901px){
  html body .tail.show .drawer{ padding-top: clamp(12px, 1.7vh, 16px) !important; padding-bottom: clamp(12px, 1.7vh, 16px) !important; }
}

@media (max-width: 1023px){ html body header.bar .krow a.kid.on{ background: transparent !important; } }
@media (max-width: 900px){ html body header.bar .krow{ background: #012350 !important; } html body header.bar .krow a.kid{ color: rgba(255,255,255,.72) !important; }
  html body header.bar .wm{ color: #FFFFFF !important; } }

@media (min-width: 901px){
  /* the logo plate */
  html body header.bar .wm{ background: transparent; padding: 0; }
}
@media (min-width: 1024px){
  /* pages as full-height cells */
  html body header.bar #navPrimary{ align-self: stretch; gap: 0 !important; }
  html body header.bar .nav a.ptab:not([href="contact-us.html"]){ align-self: stretch; align-content: center; padding: 0 clamp(12px, 1.2vw, 22px) !important;
    box-shadow: inset 1px 0 0 rgba(255,255,255,.12); transition: background-color .15s ease, color .15s ease !important; }
  html body header.bar .nav a.ptab[href="legal-documents.html"]{ box-shadow: inset 1px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(255,255,255,.12); }
  html body header.bar .nav a.ptab:not(.cur):not([href="contact-us.html"]):hover,
  html body header.bar .nav a.ptab[data-svc][aria-expanded="true"]{ background: rgba(255,255,255,.07); }
  html body header.bar .nav a.ptab.cur{ background: linear-gradient(180deg, #0E56AE 0%, #044591 100%); box-shadow: inset 1px 0 0 rgba(255,255,255,.18), inset -1px 0 0 rgba(255,255,255,.18); }
  html body header.bar .nav a.ptab[data-svc][aria-expanded="true"]::before{ display: none !important; }
  html body header.bar .nav a.ptab[href="contact-us.html"]{ margin-left: clamp(14px, 1.3vw, 22px); }
  /* sections as eight cells across the full width */
  html body header.bar .krow .kids{ gap: 0 !important; width: 100%; padding-inline: 0 !important; margin-inline: 0 !important; }
  html body header.bar .krow a.kid{ flex: 1 1 auto; text-align: center; padding: 0 10px !important; box-shadow: inset 1px 0 0 #D3DFF2; }
  html body header.bar .krow a.kid:last-child{ box-shadow: inset 1px 0 0 #D3DFF2, inset -1px 0 0 #D3DFF2; }
  html body header.bar .krow a.kid:not(.on):hover{ background: #F6F9FF; }
  html body header.bar .krow a.kid.on{ background: #012350 !important; border-radius: 0 !important; box-shadow: inset 1px 0 0 #012350, inset -1px 0 0 #012350; }
}
/* the tabs: one joined bar of cells, as wide as the cards */
@media (min-width: 901px){
  html body .tail.show #tabs{ margin: clamp(14px, 2.2vh, 20px) var(--grid-edge) 0 !important; padding: 0 !important; height: auto !important; gap: 0 !important; background: #EEF3FB !important; border-radius: 12px !important; box-shadow: inset 0 0 0 1px #DCE4F0 !important; }
  html body .tail.show #tabs > button{ flex: 1 1 auto !important; justify-content: center !important; height: 42px !important; padding: 0 14px !important; box-shadow: inset 1px 0 0 transparent !important; }
  html body .tail.show #tabs > button:first-child{ box-shadow: none !important; }
  html body .tail.show #tabs > button[aria-selected="true"]{ box-shadow: none !important; }
}
/* cards with a cap: the icon tile sits in the head, the arrow is a key */
html body .tail.show .card.door{ background-image: linear-gradient(#EDF4FE, #EDF4FE) !important; background-size: 100% 58px !important; background-repeat: no-repeat !important; }
html body .tail.show .card.door .ic{ margin-bottom: 12px; }
html body .tail.show .card.door .go{ align-self: flex-end; margin-top: auto; width: 28px; height: 28px; padding: 0 !important; border-top: 0 !important; border-radius: 6px;
  background: #012350; display: grid !important; place-items: center; line-height: 1 !important; transition: background-color .15s ease, transform .15s ease; }
html body .tail.show .card.door:hover .go{ background: #005BBF; transform: translateX(2px); }
@media (max-width: 760px){ html body .tail.show .card.door{ background-size: 100% calc(58px - 4px) !important; } }



/* ============================ page rhythm: one ground per section, no double hairlines, one spacing ============ */
html body :is(#svc3 > section, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10){ border-width: 0 !important; box-shadow: none !important; margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: clamp(64px, 7vw, 100px) !important; padding-bottom: clamp(64px, 7vw, 100px) !important; }
html body #svc3 > section{ background: #FFFFFF !important; }
html body #ss1{ background: #FFFFFF !important; }
html body #hp1{ background: #FFFFFF !important; }
html body #indwork{ background: #FFFFFF !important; }
html body #wcu8{ background: #FFFFFF !important; }
html body #about5{ background: #FFFFFF !important; }
html body #faq10{ background: #FFFFFF !important; }
html body :is(#ss1, #hp1, #indwork, #wcu8, #about5, #faq10){ box-shadow: inset 0 1px 0 #E3EAF5 !important; }
html body :is(#svc3 .s3-grid, #ss1 .ss-grid){ opacity: 0 !important; }
html body #svc3 .s3-catwrap{ background: transparent !important; border-width: 0 !important; box-shadow: none !important; }

/* ============================ section heads: the hero's tag, the same title, one reading width ================= */
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-kicker{ width: fit-content !important; margin-inline: auto !important; font-family: var(--sans) !important; font-size: 11.5px !important;
  font-weight: 750 !important; letter-spacing: .15em !important; text-transform: uppercase !important; color: #FFFFFF !important;
  background: #021C42 !important; padding: 7px 14px 7px 12px !important; border-radius: 6px !important; box-shadow: none !important; line-height: 1.2 !important; }
html body #about5 .ab-eyebrow > i{ color: #FFFFFF !important; opacity: .6; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-title{ font-size: clamp(32px, 2.9vw, 44px) !important; font-weight: 800 !important; letter-spacing: -.035em !important; color: #031D40 !important;
  margin-top: 16px !important; line-height: 1.08 !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-title > :is(i, .ab-dot){ color: #005BBF !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-desc{ font-size: 16.5px !important; color: #21416D !important; line-height: 1.55 !important; max-width: 600px !important; margin-top: 12px !important; }

/* ============================ every chooser on the page is one joined bar of cells ============================ */
html body :is(#svc3 .s3-catrail, #hp1 .hp-tabs, #indwork .v03-seg, #svc3 .s3-tabs){
  background: #FFFFFF !important; border: 0 !important; border-radius: 12px !important; padding: 0px !important; gap: 0px !important;
  box-shadow: inset 0 0 0 1px #C9D9EF, 0 10px 24px -20px rgba(1,35,80,.35) !important; }
html body :is(#svc3#svc3 .s3-cat, #hp1#hp1 .hp-tab, #indwork#indwork .v03-segb, #svc3#svc3 .s3-tab){
  background: transparent !important; color: #21416D !important; border-radius: 0px !important; box-shadow: inset 1px 0 0 #DCE6F4 !important;
  font-weight: 700 !important; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease !important; }
html body :is(#svc3 .s3-cat, #hp1 .hp-tab, #indwork .v03-segb, #svc3 .s3-tab):first-child{ box-shadow: none !important; }
html body :is(#svc3 .s3-cat, #hp1 .hp-tab, #indwork .v03-segb, #svc3 .s3-tab):hover:not([aria-current="true"]):not([aria-selected="true"]):not(.is-on):not([aria-pressed="true"]){
  background: #F3F7FE !important; color: #031D40 !important; }
html body #svc3#svc3 .s3-cat[aria-current="true"], html body #hp1#hp1 .hp-tabs .hp-tab[aria-selected="true"], html body #indwork#indwork .v03-segb.is-on, html body #svc3#svc3 .s3-tab[aria-pressed="true"]{
  background: #D2E3FC !important; color: #012350 !important; box-shadow: inset 0 0 0 1.5px #7AA9ED, 0 8px 20px -10px rgba(0,91,191,.55) !important; }
html body #svc3 .s3-cat[aria-current="true"] > span{ color: #012350 !important; }
html body #svc3 .s3-cat svg{ stroke: #375989 !important; }
html body #svc3 .s3-cat[aria-current="true"] svg{ stroke: #012350 !important; background: transparent !important; box-shadow: none !important; }
html body #hp1 .hp-tab::after, html body #hp1 .hp-tab[aria-selected="true"]::after{ display: none !important; }
html body #hp1 .hp-tab > em{ background: #EDF4FE !important; color: #21416D !important; border-radius: 4px !important; padding: 2px 6px !important;
  box-shadow: none !important; font-style: normal !important; margin-left: 7px !important; font-size: 11px !important; line-height: 1.3 !important; }
html body #hp1 .hp-tab[aria-selected="true"] > em{ background: #012350 !important; color: #FFFFFF !important; box-shadow: none !important; }
@media (min-width: 761px){
  html body :is(#svc3 .s3-cat, #hp1 .hp-tab, #indwork .v03-segb){ min-height: 48px; }
  html body :is(#svc3 .s3-catrail, #hp1 .hp-tabs, #indwork .v03-seg, #svc3 .s3-tabs){ overflow: hidden !important; }
}

/* ============================ All Work · the other five tabs speak the All Work card language ================== */
/* the rail widths assume a 10px gap: a wider gap sliced the last card on every tab */
html body .tail.show .gah .cc .mp-row{ column-gap: 10px !important; row-gap: 12px !important; }
/* Google Ads Success Stories: the monogram tile spans two lines, the name gets the width, "See Results" sits under it */
@media (min-width: 761px){
  html body .tail.show #gadsPanel .mp-i{ grid-template-columns: 36px minmax(0, 1fr) !important; grid-template-rows: auto auto !important;
    column-gap: 12px !important; row-gap: 6px !important; align-items: center !important; padding: 13px 14px !important; min-height: 0 !important; }
  html body .tail.show #gadsPanel .mp-i .mp-m{ grid-row: 1 / span 2 !important; width: 36px !important; height: 36px !important; border-radius: 9px !important; font-size: 12.5px !important; }
  html body .tail.show #gadsPanel .mp-i .mp-w{ grid-column: 2 !important; min-width: 0 !important; }
  html body .tail.show #gadsPanel .mp-i .cc-cue{ grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; }
}
html body .tail.show #gadsPanel .mp-i .cc-nm{ font-size: 14px !important; font-weight: 750 !important; color: #031D40 !important; }
html body .tail.show #gadsPanel .mp-i .mp-s{ font-size: 12px !important; color: #4A6385 !important; }
html body .tail.show #gadsPanel .mp-i :is(.cc-cue, .cc-cue .cc-tx){ color: #005BBF !important; font-weight: 750 !important; }
html body .tail.show #gadsPanel .mp-i[aria-expanded="true"]{ border-color: #7AA9ED !important; box-shadow: inset 0 0 0 1.5px #7AA9ED, 0 8px 20px -10px rgba(0,91,191,.55), 0 18px 36px -24px rgba(2,29,67,.45) !important; }
/* Client Wall: the monogram is the same tile as the icon tiles above */
html body .tail.show .card.name .chip{ background: linear-gradient(160deg, #024491 0%, #021C42 100%) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 9px !important;
  width: 36px !important; height: 36px !important; font-weight: 800 !important; font-size: 12.5px !important; }
html body .tail.show .card.name .txt > b{ font-size: 14.5px !important; font-weight: 750 !important; color: #031D40 !important; }
html body .tail.show .card.name .txt > i{ font-size: 12.5px !important; color: #4A6385 !important; font-style: normal !important; }
/* Landing Pages, Websites, Meta Ads: the preview is the card's cap, the caption its body */
html body .tail.show .card.piece .win{ background: #EDF4FE !important; border-bottom: 1px solid #DCE6F4 !important; }
html body .tail.show .card.piece .cap{ padding: 11px 14px 13px !important; }
html body .tail.show .card.piece .cap > b{ font-size: 14.5px !important; font-weight: 750 !important; color: #031D40 !important; }
html body .tail.show .card.piece .cap > i{ font-size: 12.5px !important; color: #4A6385 !important; font-style: normal !important; }
html body .tail.show .card.piece .cap > i > b{ color: #005BBF !important; font-weight: 800 !important; }

/* ============================ one card family for the whole page ============================================= */
html body :is(#svc3 .s3-card, #ss1 .ss-card, #hp1 .r4-cell){ background: #FFFFFF !important; border: 1px solid #C9D9EF !important;
  border-radius: 12px !important; box-shadow: 0 18px 36px -24px rgba(2,29,67,.45) !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; }
html body :is(#svc3 .s3-card, #ss1 .ss-card, #hp1 .r4-cell):hover{ border-color: #7AA9ED !important; box-shadow: 0 26px 48px -26px rgba(2,29,67,.55) !important; transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce){ html body :is(#svc3 .s3-card, #ss1 .ss-card, #hp1 .r4-cell):hover{ transform: none; } }
html body #hp1 .r4-cell img{ border-radius: calc(12px - 1px) !important; }
html body :is(#ss1 .ss-dots, #hp1 .hp-dots) > button{ background: #C9D9EF !important; border-radius: 2px !important; height: 6px !important; }
html body :is(#ss1 .ss-dots, #hp1 .hp-dots) > button[aria-current="true"]{ background: #012350 !important; box-shadow: none !important; }

/* ============================ Our Services: a service is a panel; its campaigns are cap cards ================== */
html body #svc3 .s3-row{ background: #FFFFFF !important; border: 1px solid #C9D9EF !important; border-radius: 14px !important; box-shadow: 0 24px 50px -36px rgba(2,29,67,.45) !important; }
html body #svc3 .s3-row::before{ background: transparent !important; }
html body #svc3 .s3-rows{ gap: 20px !important; }
html body #svc3 .s3-num{ background: linear-gradient(160deg, #024491 0%, #021C42 100%) !important; box-shadow: none !important; border-radius: 9px !important; }
html body #svc3 .s3-num svg, html body #svc3 .s3-num svg :not([fill]:not([fill="none"])){ stroke: #FFFFFF !important; }
/* a brand logo drawn in its own colours sits on a white tile instead */
html body #svc3 .s3-num:has(svg [fill]:not([fill="none"]):not([fill="currentColor"])){ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #DCE6F4 !important; }
/* the campaign rail runs on past the panel's edge: it fades there instead of being sliced */
@media (min-width: 761px){ html body #svc3 .s3-trackwrap{ -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); } }
html body #svc3 .s3-badge{ background: #D2E3FC !important; color: #012350 !important; border-radius: 4px !important; box-shadow: none !important; }
html body #svc3 .s3-row h2{ color: #031D40 !important; }
html body #svc3 .s3-explore{ color: #005BBF !important; font-weight: 750 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; }
html body #svc3 .s3-explore svg{ width: 26px !important; height: 26px !important; padding: 6px !important; border-radius: 6px !important; background: #021C42 !important;
  stroke: #FFFFFF !important; box-sizing: border-box !important; transition: transform .15s ease, background-color .15s ease !important; }
html body #svc3 .s3-explore:hover svg{ background: #005BBF !important; stroke: #FFFFFF !important; transform: translateX(3px); }
html body #svc3 .s3-card > .s3-mock{ background: #EDF4FE !important; border-bottom: 1px solid #DCE6F4 !important; border-radius: calc(12px - 1px) calc(12px - 1px) 0 0 !important; }
html body #svc3 .s3-card h3{ color: #031D40 !important; }
html body #svc3 .s3-bestfor{ color: #4A6385 !important; }
html body #svc3 .s3-bestfor > b{ color: #031D40 !important; }
html body #svc3 .s3-cdesc{ color: #21416D !important; }
html body #svc3 .s3-more{ border-top: 1px solid #DCE6F4 !important; color: #031D40 !important; }
html body #svc3 .s3-more > i{ background: #021C42 !important; box-shadow: none !important; border-radius: 6px !important; border-color: transparent !important; }
html body #svc3 .s3-more > i svg{ stroke: #FFFFFF !important; }
html body #svc3 .s3-more[aria-expanded="true"] > i{ background: #005BBF !important; }
html body #svc3 .s3-more[aria-expanded="true"] > i svg{ stroke: #FFFFFF !important; }
html body #svc3 .s3-tabnote{ color: #4A6385 !important; }

/* ============================ Success Stories: the result is the anchor of the card ========================= */
html body #ss1 .ss-name{ color: #031D40 !important; }
html body #ss1 .ss-url{ color: #005BBF !important; }
html body #ss1 .ss-ba{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 0 !important; background: transparent !important; }
html body #ss1 .ss-sep{ display: none !important; }
html body #ss1 :is(.ss-before, .ss-after){ padding: 9px 10px 10px !important; border-radius: 6px !important; }
html body #ss1 .ss-before{ background: #F3F6FC !important; }
html body #ss1 .ss-after{ background: linear-gradient(160deg, #024491 0%, #021C42 100%) !important; box-shadow: 0 10px 22px -12px rgba(2,29,67,.6) !important; }
html body #ss1 .ss-before :is(.ss-k, .ss-u){ color: #4A6385 !important; }
html body #ss1 .ss-before .ss-v{ color: #677A95 !important; }
html body #ss1 .ss-after .ss-k{ color: #8AB8F7 !important; }
html body #ss1 .ss-after .ss-v{ color: #FFFFFF !important; }
html body #ss1 .ss-after .ss-u{ color: rgba(255,255,255,.72) !important; }
html body #ss1 .ss-say{ color: #21416D !important; }

/* ============================ Client Proof and the two closing panels ======================================= */
html body #hp1 .hp-note{ color: #4A6385 !important; }
html body :is(#hp1 .hp-cta, #wcu8 .wc-close){ background: radial-gradient(60% 120% at 50% 0%, rgba(109,166,245,.30) 0%, rgba(109,166,245,0) 70%), radial-gradient(circle, rgba(138,184,247,.16) 1px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(180deg, #002352, #021C42) !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 30px 60px -32px rgba(2,29,67,.7) !important; }
html body :is(#hp1 .hp-ctah, #wcu8 .wc-close h3){ color: #FFFFFF !important; }
html body :is(#hp1 .hp-ctap, #wcu8 .wc-cp){ color: rgba(255,255,255,.76) !important; }
html body #wcu8 .wc-ck{ color: #8AB8F7 !important; }
html body :is(#hp1 .hp-ctab, #wcu8 .wc-btn){ border-radius: 6px !important; box-shadow: 0 10px 22px -10px rgba(0,11,34,.55) !important; }

/* ============================ Industries: the rail is a column of cells; the chosen one is the lit cell ========= */
html body #indwork .v03-card{ border: 1px solid #C9D9EF !important; border-radius: 14px !important; box-shadow: 0 24px 50px -36px rgba(2,29,67,.45) !important; overflow: hidden !important; }
html body #indwork .v03-top{ background: #F7F9FE !important; border-bottom: 1px solid #DCE6F4 !important; }
html body #indwork .v03-rail{ background: #EDF4FE !important; }
html body #indwork .v03-row{ background: transparent !important; box-shadow: none !important; border-radius: 0px !important; }
html body #indwork .v03-row:hover:not(.is-on){ background: #F3F7FE !important; }
html body #indwork .v03-row.is-on{ background: #D2E3FC !important; box-shadow: inset 0 0 0 1.5px #7AA9ED, 0 8px 20px -10px rgba(0,91,191,.55) !important; }
html body #indwork .v03-row.is-on .v03-nm{ color: #012350 !important; font-weight: 750 !important; }
html body #indwork .v03-nm{ color: #21416D !important; }
html body #indwork .iw2-icn{ background: #FFFFFF !important; border: 1px solid #DCE6F4 !important; border-radius: 9px !important; box-shadow: none !important; }
html body #indwork .iw2-icn svg{ stroke: #4A6385 !important; }
html body #indwork .v03-row.is-on .iw2-icn, html body #indwork .v03-head > .iw2-icn{ background: linear-gradient(160deg, #024491 0%, #021C42 100%) !important; border-color: transparent !important; }
html body #indwork .v03-row.is-on .iw2-icn svg, html body #indwork .v03-head > .iw2-icn svg,
html body #indwork .v03-row.is-on .iw2-icn svg *, html body #indwork .v03-head > .iw2-icn svg *{ stroke: #FFFFFF !important; }
html body #indwork .v03-name{ color: #031D40 !important; }
html body #indwork .v03-desc{ color: #21416D !important; }
html body #indwork .v03-label{ color: #4A6385 !important; }
html body #indwork .iw2-chip{ background: #FFFFFF !important; border: 1px solid #D3DFF2 !important; border-radius: 6px !important; color: #21416D !important; }

/* ============================ Why Choose Us: a ledger of standards with index cells ========================== */
html body #wcu8 .wc-reg{ border: 1px solid #C9D9EF !important; border-radius: 14px !important; box-shadow: 0 24px 50px -36px rgba(2,29,67,.45) !important; overflow: hidden !important; }
html body #wcu8 .wc-sheet + .wc-sheet{ box-shadow: inset 0 1px 0 #DCE6F4 !important; }
html body #wcu8 .wc-head:hover{ background: #F3F7FE !important; }
html body #wcu8 .wc-n{ background: linear-gradient(160deg, #024491 0%, #021C42 100%) !important; color: #FFFFFF !important; border-radius: 9px !important; box-shadow: none !important; width: 34px !important; height: 34px !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-n{ background: #005BBF !important; color: #FFFFFF !important; box-shadow: none !important; }
html body #wcu8 .wc-head .wc-cat{ color: #005BBF !important; }
html body #wcu8 .wc-t{ color: #031D40 !important; }
html body #wcu8 .wc-ben{ color: #21416D !important; }
html body #wcu8 .wc-cue{ color: #21416D !important; }
html body #wcu8 .wc-cue > i{ background: #021C42 !important; box-shadow: none !important; border-radius: 6px !important; }
html body #wcu8 .wc-cue > i::before, html body #wcu8 .wc-cue > i::after{ background: #FFFFFF !important; }
html body #wcu8 .wc-head[aria-expanded="true"]{ background: #F3F7FE !important; box-shadow: none !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-cue > i{ background: #005BBF !important; box-shadow: none !important; }
html body #wcu8 .wc-head[aria-expanded="true"] .wc-cue > i::before, html body #wcu8 .wc-head[aria-expanded="true"] .wc-cue > i::after{ background: #FFFFFF !important; }
html body #wcu8 .wc-sheet.is-open{ box-shadow: inset 0 0 0 1.5px #7AA9ED !important; }

/* ============================ About Us: the record card ===================================================== */
html body #about5 .ab-card.ab-outer{ border: 1px solid #C9D9EF !important; border-radius: 14px !important; box-shadow: 0 24px 50px -36px rgba(2,29,67,.45) !important; overflow: hidden !important; }
html body #about5 .ab-ftabs{ background: #EDF4FE !important; border-radius: 0 !important; padding: 0 !important; box-shadow: inset 0 -1px 0 #DCE6F4 !important; }
html body #about5#about5 .ab-ftab{ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset -1px 0 0 #D3DFF2 !important; color: #21416D !important; margin: 0 !important; }
html body #about5 .ab-ftab svg{ stroke: #21416D !important; }
html body #about5 .ab-ftab:hover:not([aria-selected="true"]){ background: #F6F9FF !important; }
html body #about5#about5 .ab-ftab[aria-selected="true"]{ background: #D2E3FC !important; color: #012350 !important; box-shadow: inset -1px 0 0 #D3DFF2, inset 0 0 0 1.5px #7AA9ED, 0 8px 20px -10px rgba(0,91,191,.55) !important; }
html body #about5 .ab-ftab[aria-selected="true"] svg{ stroke: #012350 !important; }
html body #about5 .ab-pill{ background: #D2E3FC !important; color: #012350 !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; }
html body #about5 .ab-pill svg{ stroke: #012350 !important; }
html body #about5 .ab-nm{ color: #031D40 !important; }
html body #about5 .ab-legal{ color: #005BBF !important; }
html body #about5 .ab-pr{ border-color: #DCE6F4 !important; }
html body #about5 .ab-k{ color: #4A6385 !important; }
html body #about5 .ab-v{ color: #031D40 !important; }
html body #about5 .ab-strip{ border: 1px solid #DCE6F4 !important; border-radius: 0px !important; background: #FFFFFF !important; }
html body #about5 .ab-sti + .ab-sti{ box-shadow: inset 1px 0 0 #DCE6F4 !important; }
html body #about5 .ab-sic{ background: linear-gradient(160deg, #024491 0%, #021C42 100%) !important; border-radius: 9px !important; width: 30px !important; height: 30px !important; display: grid !important; place-items: center !important; }
html body #about5#about5 .ab-sic svg, html body #about5#about5 .ab-sic svg *{ stroke: #FFFFFF !important; } html body #about5 .ab-sic svg{ width: 16px !important; height: 16px !important; }
html body #about5 .ab-acts .ab-btn{ background: #021C42 !important; color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; }
html body #about5 .ab-acts .ab-btn svg{ stroke: #FFFFFF !important; }
html body #about5 .ab-acts .ab-btn:hover{ background: #005BBF !important; color: #FFFFFF !important; }
html body #about5 .ab-acts .ab-btn:hover svg{ stroke: #FFFFFF !important; }
html body #about5 .ab-lnk{ color: #005BBF !important; }

/* ============================ FAQ: no slab. The word FAQ becomes the label of its panel ======================= */
html body #faq10 .gfaq-title{ width: fit-content !important; padding: 9px 16px 8px !important; background: #021C42 !important; color: #FFFFFF !important;
  border-radius: 8px 8px 0 0 !important; font-size: 13px !important; letter-spacing: .14em !important; line-height: 1.2 !important; margin: 0 !important; }
html body #faq10 .gfaq-title::after{ display: none !important; }
html body #faq10 .gfaq-box{ border: 1px solid #C9D9EF !important; border-radius: 0 12px 12px 12px !important; box-shadow: 0 24px 50px -36px rgba(2,29,67,.45) !important; margin-top: 0 !important;
  padding: 18px !important; background: #F7F9FE !important; }
html body #faq10 .gfaq-box::after{ background-image: linear-gradient(rgba(255,255,255,0), #F7F9FE) !important; }
html body #faq10 .gfaq-item{ border: 1px solid #DCE6F4 !important; border-radius: 0px !important; background: #FFFFFF !important; margin-bottom: 10px !important; box-shadow: none !important; }
html body #faq10 .gfaq-item:hover:not(.is-open){ border-color: #7AA9ED !important; }
html body #faq10 .gfaq-item.is-open{ border-color: #7AA9ED !important; box-shadow: 0 14px 30px -18px rgba(0,91,191,.45) !important; }
html body #faq10 .gfaq-q{ background: transparent !important; }
html body #faq10 .gfaq-q[aria-expanded="true"]{ background: #F3F7FE !important; }
html body #faq10 .gfaq-qb{ background: linear-gradient(160deg, #024491 0%, #021C42 100%) !important; color: #FFFFFF !important; border-radius: 9px !important; box-shadow: none !important; }
html body #faq10 .gfaq-q[aria-expanded="true"] .gfaq-qb{ background: #005BBF !important; color: #FFFFFF !important; box-shadow: none !important; }
html body #faq10 .gfaq-t{ color: #031D40 !important; }
html body #faq10 .gfaq-m::before, html body #faq10 .gfaq-m::after{ background: #005BBF !important; }
html body #faq10 .gfaq-ab{ background: #F3F6FC !important; color: #005BBF !important; border-radius: 9px !important; box-shadow: none !important; }
html body #faq10 .gfaq-body p{ color: #21416D !important; }

/* ============================ footer: the header's navy closes the page ==================================== */
html body #sfoot{ background: radial-gradient(50% 80% at 50% 0%, rgba(109,166,245,.16), rgba(109,166,245,0) 70%), radial-gradient(circle, rgba(138,184,247,.12) 1px, transparent 1.5px) 0 0 / 24px 24px, #021C42 !important; border-top: 0 !important; color: rgba(255,255,255,.78) !important; }
html body #sfoot .f-id > b{ color: #FFFFFF !important; }
html body #sfoot .f-mk{ background: #FFFFFF; border-radius: 50%; box-shadow: 0 0 0 4px #FFFFFF; }
html body #sfoot .f-lede{ color: rgba(255,255,255,.74) !important; }
html body #sfoot h3{ color: #8AB8F7 !important; }
html body #sfoot .f-wrap a{ color: rgba(255,255,255,.88) !important; }
html body #sfoot .f-wrap a:not(.f-soc > a):hover{ color: #FFFFFF !important; }
html body #sfoot .f-na{ color: rgba(255,255,255,.55) !important; }
html body #sfoot .f-soon{ border-color: rgba(255,255,255,.22) !important; color: rgba(255,255,255,.6) !important; background: transparent !important; }
html body #sfoot .f-badge{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.16) !important; color: rgba(255,255,255,.8) !important; border-radius: 0px !important; }
html body #sfoot .f-badge svg, html body #sfoot .f-ci svg{ stroke: #8AB8F7 !important; }
html body #sfoot .f-ci span{ color: rgba(255,255,255,.74) !important; }
html body #sfoot .f-base{ border-top-color: rgba(255,255,255,.12) !important; }
html body #sfoot .f-base p, html body #sfoot .f-lg{ color: rgba(255,255,255,.6) !important; }
html body #sfoot .f-soc > a{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.18) !important; border-radius: 6px !important; }
html body #sfoot .f-soc > a svg{ fill: rgba(255,255,255,.85) !important; stroke: none; }
html body #sfoot .f-soc > a:hover{ background: #FFFFFF !important; border-color: #FFFFFF !important; }
html body #sfoot .f-soc > a:hover svg{ fill: #021C42 !important; }
@media (min-width: 761px){
  html body #sfoot .f-cols > div + div{ box-shadow: inset 1px 0 0 rgba(255,255,255,.10); padding-left: clamp(18px, 2vw, 32px); }
}

/* ============================ phones: the current section is a piece, never a bar ============================ */
@media (max-width: 900px){
  html body header.bar .krow a.kid.on{ background: rgba(255,255,255,.14) !important; border-radius: 6px !important; color: #FFFFFF !important; padding: 5px 10px !important; }
  html body header.bar .krow a.kid.on::after{ display: none !important; }
  html body header.bar .krow .kids{ align-items: center !important; }
}


/* 32 · each section is lit from above by a soft pool of light */
html body :is(#svc3 > section, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10){ background-image: radial-gradient(46% 260px at 50% 0%, rgba(0,91,191,.07), rgba(0,91,191,0)) !important; background-repeat: no-repeat !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-kicker::before{ content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 1px 0; border-radius: 50%;
  background: #8AB8F7; box-shadow: 0 0 0 3px rgba(138,184,247,.22), 0 0 8px rgba(138,184,247,.7); vertical-align: middle; }
html body #sfoot{ box-shadow: inset 0 1px 0 rgba(138,184,247,.28) !important; }

/* the logo stands on the brand ground — the roundel is already a badge, so no card around it */
@media (min-width: 901px){ html body header.bar .wm, html body header.bar .wm:hover{ background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; gap: 12px !important; } }

/* the page menu — every page is the same full-height item; only the current page is marked */
@media (min-width: 1024px){
  html body header.bar #navPrimary{ align-self: stretch !important; gap: 0 !important; }
  html body header.bar #navPrimary a.ptab{ position: relative; }
  html body header.bar #navPrimary#navPrimary a.ptab, html body header.bar #navPrimary#navPrimary a.ptab[href="contact-us.html"]{
    align-self: stretch !important; align-content: center !important; margin: 0 !important; padding: 0 clamp(12px, 1.25vw, 22px) !important; border-radius: 0 !important;
    background: transparent !important; color: rgba(255,255,255,.62) !important; box-shadow: inset 1px 0 0 transparent !important; transform: none !important; font-weight: 550 !important; }
  html body header.bar #navPrimary#navPrimary a.ptab[href="contact-us.html"]{ box-shadow: inset 1px 0 0 transparent, inset -1px 0 0 transparent !important; }
  html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover{ background: rgba(255,255,255,.06) !important; color: #FFFFFF !important; }
  html body header.bar #navPrimary#navPrimary a.ptab.cur{ background: transparent !important; color: #FFFFFF !important; font-weight: 750 !important; box-shadow: none !important; }
  html body header.bar #navPrimary a.ptab.cur::before{ display: none !important; }
}

/* the section menu — the child of the page menu */
html body header.bar{ --fs-row2-bg: #FFFFFF; --fs-row2-bd: 0px solid transparent; --fs-row2-h: 42px; --fs-kid-fs: 13px; --fs-kid-fw: 550; --fs-kid-ink: #5E7596; --fs-kid-ink-h: #012350;
  --fs-kid-on-ink: #012350; --fs-kid-on-fw: 700; --fs-kon-x: 0px; --fs-kon-t: 0px; --fs-kon-b: 0px; --fs-kon-h: auto; --fs-kon-bg: transparent; --fs-kon-r: 0px;
  --fs-kon-sh: none; --fs-kon-z: -1; }
@media (min-width: 1024px){
  html body header.bar .krow .kids{ gap: clamp(8px, 1.6vw, 26px) !important; width: auto !important; }
  html body header.bar #navKids#navKids a.kid, html body header.bar #navKids#navKids a.kid:last-child{ flex: 0 0 auto !important; padding: 0 12px !important; box-shadow: none !important; background: transparent !important; }
  html body header.bar #navKids#navKids a.kid.on{ background: transparent !important; color: #012350 !important; }
  html body header.bar #navKids#navKids a.kid:not(.on):hover{ color: #012350 !important; }
}
@media (min-width: 901px) and (max-width: 1023px){ html body header.bar #navKids#navKids a.kid.on{ background: transparent !important; } html body header.bar .krow a.kid.on::after{ left: -8px !important; right: -8px !important; } }

/* the All Work zone begins with a clear edge, and anything drawn inside it stops at the screen's bottom */
html body .tail.show{ overflow: clip !important; }
@media (min-width: 901px){ html body .tail.show{ box-shadow: inset 0 1px 0 #D6E0F0 !important; } }

/* the raised console holds a segmented track and the cards */
@media (min-width: 901px){
  html body header.bar #navPrimary a.ptab{ position: relative; }
  html body .tail.show #tabs#tabs{ margin-top: clamp(26px, 3.6vh, 34px) !important; padding: 4px !important; gap: 4px !important; }
  html body .tail.show #tabs#tabs > button, html body .tail.show #tabs#tabs > button:first-child{ border-radius: 9px !important; background: transparent !important; box-shadow: none !important; }
  html body .tail.show #tabs#tabs > button:not([aria-selected="true"]):hover{ background: rgba(255,255,255,.8) !important; }
  html body .tail.show .stage{ position: relative; isolation: isolate; }
  html body .tail.show .stage::before{ content: ""; position: absolute; z-index: -1; left: calc(var(--grid-edge) - 16px); right: calc(var(--grid-edge) - 16px); top: calc(clamp(26px, 3.6vh, 34px) - 16px); bottom: -60px;
    background: #FFFFFF; border-radius: 18px 18px 0 0; box-shadow: 0 0 0 1px #D6E0F0, 0 -18px 40px -28px rgba(1,35,80,.45); pointer-events: none; }
  html body .tail.show :is(.card.name, .card.piece, .card.wt-pv, article.card), html body .screen .mp-i{ box-shadow: 0 0 0 1px #D6E0EF !important; }
}
html body header.bar #navKids#navKids a.kid.on{ background: transparent !important; }

@media (max-width: 900px){
  html body header.bar{ background: #012350 !important; }
  html body header.bar .wm{ color: #FFFFFF !important; }
  html body header.bar .krow{ background: #FFFFFF !important; }
  html body header.bar #navKids#navKids a.kid{ color: #5E7596 !important; background: transparent !important; box-shadow: none !important; }
  html body header.bar #navKids#navKids a.kid.on{ color: #012350 !important; background: transparent !important; border-radius: 0px !important; }
}

/* 74 · type only */
@media (min-width: 901px){
  html body header.bar #navPrimary#navPrimary a.ptab.cur{ color: #FFFFFF !important; font-weight: 800 !important; }
  html body header.bar #navPrimary#navPrimary a.ptab.cur::before{ display: none !important; }
}
html body header.bar #navKids#navKids a.kid.on{ color: #012350 !important; font-weight: 780 !important; }
html body header.bar #navKids#navKids a.kid.on::after{ display: none !important; }
@media (min-width: 901px){
  html body .tail.show #tabs#tabs > button[aria-selected="true"]{ background: #C2D7F5 !important; box-shadow: inset 0 2px 5px rgba(1,35,80,.22), inset 0 0 0 1px rgba(1,35,80,.08) !important; }
}

/* ============================ a mature footer: one grid, one scale, calm lists, a clean base ================= */
html body #sfoot{ background: radial-gradient(60% 80% at 50% 0%, rgba(109,166,245,.14), rgba(109,166,245,0) 70%), #012350 !important; color: #21416D !important; padding: clamp(64px, 6.5vw, 96px) 0 30px !important; border: 0 !important; box-shadow: none !important; }
html body #sfoot .f-cols{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.3fr) !important; column-gap: 0 !important; row-gap: 34px !important; }
@media (min-width: 761px){
  html body #sfoot .f-cols > div{ padding: 4px clamp(18px, 1.8vw, 32px) !important; box-shadow: inset 1px 0 0 #E3EAF4 !important; }
  html body #sfoot .f-cols > div:first-child{ padding-left: 0 !important; box-shadow: none !important; }
  html body #sfoot .f-cols > div:last-child{ padding-right: 0 !important; }
}
html body #sfoot .f-id > b{ color: #012350 !important; font-size: 19px !important; letter-spacing: -.02em !important; }
html body #sfoot .f-mk{ width: 44px !important; height: 44px !important; background: #FFFFFF; border-radius: 50%; box-shadow: 0 0 0 3px #D6E0F0; }
html body #sfoot .f-lede{ color: #21416D !important; font-size: 15.5px !important; line-height: 1.7 !important; margin-top: 20px !important; max-width: 34ch; }
html body #sfoot .f-badge{ margin-top: 24px !important; padding: 9px 14px !important; background: #FFFFFF !important; border: 1px solid #D6E0F0 !important; color: #21416D !important;
  border-radius: 10px !important; letter-spacing: .1em !important; font-size: 10.5px !important; }
html body #sfoot .f-badge svg{ stroke: #005BBF !important; }
html body #sfoot h3{ color: #005BBF !important; font-family: var(--sans) !important; font-size: 11.5px !important; font-weight: 750 !important; letter-spacing: .15em !important; margin-bottom: 20px !important; }
html body #sfoot ul{ gap: 13px !important; margin-top: 0 !important; }
html body #sfoot .f-wrap :is(ul a, .f-na){ font-size: 15px !important; font-weight: 550 !important; line-height: 1.35 !important; justify-content: flex-start !important; gap: 9px !important; }
html body #sfoot .f-wrap ul a{ color: #031D40 !important; transition: color .15s ease !important; }
html body #sfoot .f-wrap ul a:hover{ color: #005BBF !important; }
html body #sfoot .f-na{ color: #4A6385 !important; }
html body #sfoot .f-soon{ background: #EEF3FB !important; border: 0 !important; color: #4A6385 !important; border-radius: 5px !important; padding: 3px 7px !important;
  font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; }
html body #sfoot .f-live{ width: 6px !important; height: 6px !important; background: #2FB67C !important; box-shadow: 0 0 0 3px rgba(127,224,181,.18) !important; margin-top: 6px !important; }
html body #sfoot .f-ct{ gap: 16px !important; margin-top: 0 !important; }
html body #sfoot .f-ci{ gap: 12px !important; align-items: flex-start !important; }
html body #sfoot .f-ci svg{ flex: none; width: 34px !important; height: 34px !important; padding: 9px !important; box-sizing: border-box; background: #EDF4FE; border-radius: 10px; stroke: #005BBF !important; margin-top: -4px !important; }
html body #sfoot .f-ci span{ color: #21416D !important; font-size: 14.5px !important; line-height: 1.6 !important; }
html body #sfoot .f-wrap .f-ci a{ color: #031D40 !important; font-weight: 600 !important; }
html body #sfoot .f-base{ margin-top: clamp(48px, 5vw, 72px) !important; padding-top: 24px !important; border-top: 1px solid #E3EAF4 !important; align-items: center !important; }
html body #sfoot .f-base p, html body #sfoot .f-lg{ color: #4A6385 !important; font-size: 13.5px !important; }
html body #sfoot#sfoot .f-base :is(p, .f-na){ color: #4A6385 !important; }
html body #sfoot .f-wrap .f-lg a{ color: #031D40 !important; font-size: 13.5px !important; }
html body #sfoot .f-soc{ gap: 8px !important; }
html body #sfoot .f-soc > a{ width: 40px !important; height: 40px !important; background: rgba(255,255,255,.10) !important; border: 0 !important; border-radius: 10px !important; transition: background-color .15s ease !important; }
html body #sfoot .f-soc > a svg{ fill: #FFFFFF !important; }
html body #sfoot .f-soc > a:hover{ background: #FFFFFF !important; }
html body #sfoot .f-soc > a:hover svg{ fill: #012350 !important; }
@media (max-width: 760px){ html body #sfoot .f-cols{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } html body #sfoot .f-cols > div:first-child, html body #sfoot .f-cols > div:last-child{ grid-column: 1 / -1; } }
@media (min-width: 761px) and (max-width: 1023px){
  html body #sfoot .f-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body #sfoot .f-cols > div:first-child, html body #sfoot .f-cols > div:last-child{ grid-column: 1 / -1; }
  html body #sfoot .f-cols > :is(div:nth-child(2), div:last-child){ padding-left: 0 !important; box-shadow: none !important; }
}
@media (min-width: 1024px) and (max-width: 1499px){
  html body #sfoot .f-cols{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body #sfoot .f-cols > div:first-child{ grid-column: 1 / -1; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 40px;
    padding: 0 0 34px !important; margin-bottom: 4px; box-shadow: inset 0 -1px 0 #E3EAF4 !important; }
  html body #sfoot .f-cols > div:first-child .f-lede{ margin: 0 !important; max-width: 60ch; }
  html body #sfoot .f-cols > div:first-child .f-badge{ margin: 0 !important; }
  html body #sfoot .f-cols > div:nth-child(2){ padding-left: 0 !important; box-shadow: none !important; }
}

/* the footer, in the same language as the header: a navy ground, and the company raised on a white panel above it */
html body #sfoot{ padding: clamp(56px, 6vw, 88px) 0 30px !important; }
html body #sfoot .f-cols{ background: #FFFFFF; border-radius: 20px; padding: 34px 40px 36px !important; box-shadow: 0 36px 70px -42px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) !important; }
@media (min-width: 1024px){
  html body #sfoot .f-cols{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 30px !important; }
  html body #sfoot .f-cols > div:first-child{ grid-column: 1 / -1; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 44px;
    padding: 0 0 30px !important; box-shadow: inset 0 -1px 0 #E3EAF4 !important; }
  html body #sfoot .f-cols > div:first-child .f-lede{ margin: 0 !important; max-width: 62ch; }
  html body #sfoot .f-cols > div:first-child .f-badge{ margin: 0 !important; }
  html body #sfoot .f-cols > div:nth-child(2){ padding-left: 0 !important; box-shadow: none !important; }
}
html body #sfoot .f-live{ box-shadow: 0 0 0 3px rgba(47,182,124,.16) !important; }
html body #sfoot .f-ci svg{ box-shadow: inset 0 0 0 1px #DCE6F6; }
/* the base bar sits on the navy, beneath the panel, in readable white */
html body #sfoot .f-base{ margin-top: 26px !important; padding: 0 6px !important; border-top: 0 !important; }
html body #sfoot#sfoot .f-base :is(p, .f-na){ color: rgba(255,255,255,.7) !important; }
html body #sfoot .f-base .f-lg, html body #sfoot .f-wrap .f-base .f-lg a{ color: #FFFFFF !important; }
html body #sfoot .f-base .f-soon{ background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.82) !important; }
@media (max-width: 760px){ html body #sfoot .f-cols{ border-radius: 16px; padding: 22px 18px 24px !important; } html body #sfoot .f-base{ margin-top: 20px !important; } }

/* ---- the part under study ---- */
html body header.bar{ background: #012350 !important; box-shadow: 0 18px 34px -24px rgba(1,35,80,.5) !important; --fs-row2-bg: #EEF3FB; --fs-row2-bd: 0px solid transparent; --fs-kid-ink: #455F83; --fs-kid-ink-h: #012350; --fs-kid-on-ink: #012350; }
html body header.bar .krow{ background: #EEF3FB !important; border-top: 0px solid transparent !important; }
html body header.bar #navKids#navKids a.kid{ color: #455F83 !important; }
html body header.bar #navKids#navKids a.kid:hover{ color: #012350 !important; }
html body header.bar #navKids#navKids a.kid.on{ color: #012350 !important; }@media (min-width: 901px){
  html body header.bar #navPrimary#navPrimary a.ptab, html body header.bar #navPrimary#navPrimary a.ptab[href="contact-us.html"]{ color: rgba(255,255,255,.78) !important; font-weight: 550 !important; }
  html body header.bar #navPrimary#navPrimary a.ptab.cur{ color: #FFFFFF !important; font-weight: 700 !important; }
  html body header.bar #navPrimary#navPrimary a.ptab.cur::before{ content: "" !important; display: block !important; position: absolute !important; margin: 0 !important; transform: none !important; opacity: 1 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important;  left: -12px !important; right: -12px !important; top: calc(50% - 17px) !important; bottom: auto !important; height: 34px !important; width: auto !important;
    background: rgba(138,184,247,.18) !important; border-radius: 7px !important; box-shadow: none !important; z-index: -1 !important; }
}
@media (min-width: 1024px){
  html body header.bar #navPrimary#navPrimary a.ptab.cur::before{ left: calc(clamp(12px, 1.25vw, 22px) - 12px) !important; right: calc(clamp(12px, 1.25vw, 22px) - 12px) !important; }
}
html body header.bar #navKids#navKids a.kid.on{ color: #012350 !important; font-weight: 700 !important; }
html body header.bar #navKids#navKids a.kid.on::after{ content: "" !important; display: block !important; position: absolute !important; margin: 0 !important; transform: none !important; opacity: 1 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important;  left: 0 !important; right: 0 !important; top: 8px !important; bottom: 8px !important; height: auto !important; width: auto !important;
  background: #E3ECF9 !important; border-radius: 6px !important; box-shadow: none !important; z-index: -1 !important; }@media (min-width: 901px){
  html body .tail.show #tabs#tabs{ background: #EEF3FB !important; box-shadow: inset 0 0 0 1px #DFE6F1 !important; }
  html body .tail.show #tabs#tabs > button[aria-selected="true"]{ background: #DBE8FA !important; box-shadow: none !important; font-weight: 700 !important; --fs-tab-ink: #003370; --fs-tab-on-ink: #003370; --fs-tab-icon: #003370; color: #003370 !important; }
  html body .tail.show #tabs#tabs > button[aria-selected="true"] svg:not(:has([fill])){ background: #012350 !important; border-radius: 5px !important; box-shadow: 0 0 0 4px #012350 !important; stroke: #FFFFFF !important; }
  html body .tail.show #tabs#tabs > button[aria-selected="true"] svg:has([fill]){ background: #FFFFFF !important; border-radius: 5px !important; box-shadow: 0 0 0 4px #FFFFFF !important; }
}
/* 81 · every All Work tab in its own container — colour by level, the same logic as the menus:
   tray = pale blue (this page's navigation, like the sub menu row) · each tab = a white container (content it opens) with a hairline
   in the tray's family · chosen = 81's light-blue selection fill with an edge one step deeper, and its icon as the navy tile its cards carry */
@media (min-width: 901px){
  html body .tail.show #tabs#tabs{ background: #EEF3FB !important; box-shadow: inset 0 0 0 1px #DFE7F3 !important; padding: 5px !important; gap: 6px !important; border-radius: 12px !important; }
  html body .tail.show #tabs#tabs > button, html body .tail.show #tabs#tabs > button:first-child{ background: #FFFFFF !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1px #D8E1EE !important; }
  html body .tail.show #tabs#tabs > button:not([aria-selected="true"]):hover{ background: #F8FAFE !important; box-shadow: inset 0 0 0 1px #BFD0E9 !important; }
  html body .tail.show #tabs#tabs > button[aria-selected="true"]{ background: #DBE8FA !important; box-shadow: inset 0 0 0 1px #B1C9EC !important; }
}
@media (max-width: 900px){
  html body .tail.show #tabs#tabs{ gap: 6px !important; }
  html body .tail.show #tabs#tabs > button, html body .tail.show #tabs#tabs > button:first-child{ background: #FFFFFF !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1px #D8E1EE !important; }
  html body .tail.show #tabs#tabs > button[aria-selected="true"]{ background: #DBE8FA !important; box-shadow: inset 0 0 0 1px #B1C9EC !important; color: #003370 !important; --fs-tab-ink: #003370; --fs-tab-on-ink: #003370; }
}

/* in the combination the sub menu row is pale blue, so the current section's plate steps one shade deeper to stay visible */
html body header.bar #navKids#navKids a.kid.on::after{ background: #D4E3F7 !important; }

/* ---- hover: a faint plate in the selection's own shape ---- */
@media (min-width: 901px){
  html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover, html body header.bar #navPrimary#navPrimary a.ptab[href="contact-us.html"]:hover{ background: transparent !important;  }
  html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover::before{ content: "" !important; display: block !important; position: absolute !important; margin: 0 !important; transform: none !important; opacity: 1 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important;  left: -12px !important; right: -12px !important; top: calc(50% - 17px) !important; bottom: auto !important;
    height: 34px !important; width: auto !important; background: rgba(138,184,247,.06) !important; border-radius: 7px !important; box-shadow: none !important; z-index: -1 !important; }
}
@media (min-width: 1024px){ html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover::before{ left: calc(clamp(12px, 1.25vw, 22px) - 12px) !important; right: calc(clamp(12px, 1.25vw, 22px) - 12px) !important; } }
html body header.bar #navKids#navKids a.kid:not(.on):hover::after{ content: "" !important; display: block !important; position: absolute !important; margin: 0 !important; transform: none !important; opacity: 1 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important;  left: 0px !important; right: 0px !important; top: 8px !important; bottom: 8px !important; height: auto !important; width: auto !important;
  background: #E7EEF9 !important; border-radius: 6px !important; z-index: -1 !important; }

html body .tail.show .stage::before{ box-shadow: 0 0 0 1px #D6E0F0, 0 -14px 34px -30px rgba(1,35,80,.35) !important; }

/* ---- the finish: keyboard focus that is visible, and calm state changes ---- */
html body header.bar :is(#navPrimary a.ptab, #navKids a.kid):focus-visible{ outline: 2px solid #8AB8F7 !important; outline-offset: 2px !important; border-radius: 6px !important; }
html body .tail.show #tabs > button:focus-visible{ outline: 2px solid #005BBF !important; outline-offset: 2px !important; }
html body header.bar :is(#navPrimary a.ptab, #navKids a.kid), html body .tail.show #tabs > button{ transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important; }

@media (max-width: 900px){
  html body header.bar{ background: #012350 !important; }
  html body header.bar .wm{ color: #FFFFFF !important; }
  html body header.bar .krow{ background: #EEF3FB !important; }
  html body header.bar #navKids#navKids a.kid{ color: #455F83 !important; background: transparent !important; box-shadow: none !important; }
  html body header.bar #navKids#navKids a.kid.on{ color: #012350 !important; background: #D4E3F7 !important; border-radius: 6px !important; }
}

/* ================= 81 colour logic: selection is one colour, content is another ================= */
html body{ --fs-band-bg: #E3EBF7; --fs-fix-bg: #EEF1F6; --fs-card-bd: #CDD5E1; --fs-row2-bg: #E8EFFA; }
html body header.bar{ --fs-row2-bg: #E8EFFA; }
html body header.bar .krow{ background: #E8EFFA !important; }
html body .tail.show, html body .tail.show .stage{ background-color: #E3EBF7 !important; }
/* SELECTION — the current page, the current section, the chosen tab */
@media (min-width: 901px){ html body header.bar #navPrimary#navPrimary a.ptab.cur{ color: #FFFFFF !important; } html body header.bar #navPrimary#navPrimary a.ptab.cur::before{ background: rgba(138,184,247,.30) !important; } }
html body header.bar #navKids#navKids a.kid.on{ color: #012350 !important; }
html body header.bar #navKids#navKids a.kid.on::after{ background: #BAD1F2 !important; }
html body header.bar #navKids#navKids a.kid:not(.on):hover::after{ background: #D4E2F5 !important; }
@media (max-width: 900px){ html body header.bar .krow{ background: #E8EFFA !important; } html body header.bar #navKids#navKids a.kid.on{ background: #BAD1F2 !important; color: #012350 !important; } }
@media (min-width: 901px){ html body .tail.show #tabs#tabs{ background: #E7EEF9 !important; box-shadow: inset 0 0 0 1px #D1DCED !important; } }
html body .tail.show #tabs#tabs > button[aria-selected="true"]{ background: #BED4F4 !important; box-shadow: inset 0 0 0 1px #8BAFE1 !important; color: #003370 !important; --fs-tab-ink: #003370; --fs-tab-on-ink: #003370; --fs-tab-icon: #003370; }
html body .tail.show #tabs#tabs > button[aria-selected="true"] :is(.gah-tabw, .gah-tabname, .gah-tabsub), html body .tail.show #tabs#tabs > button[aria-selected="true"] span{ color: #003370 !important; }
html body .tail.show #tabs#tabs > button[aria-selected="true"] svg:not(:has([fill])){ background: #012350 !important; box-shadow: 0 0 0 4px #012350 !important; stroke: #FFFFFF !important; }

/* CONTENT — the inside of the cards, and the matching cell in the audit field */
html body .tail.show .card.door{ background: linear-gradient(#ECEFF5, #ECEFF5) 0 0 / 100% 58px no-repeat, #FFFFFF !important; border-color: #CDD5E1 !important; }
html body .tail.show .card.piece .win, html body .tail.show .card.piece span.win{ background-color: #ECEFF5 !important; }
html body .screen .hero .capture .capfix{ background: #EEF1F6 !important; }
html body .tail.show :is(.card.name, .card.piece, .card.wt-pv, article.card), html body .screen .mp-i{ box-shadow: 0 0 0 1px #CDD5E1 !important; }

/* grounds — quiet, so only the selected pieces carry a saturated colour */
html body header.bar .krow{ background: #EDF1F8 !important; } html body header.bar{ --fs-row2-bg: #EDF1F8; }
@media (max-width: 900px){ html body header.bar .krow{ background: #EDF1F8 !important; } }
@media (min-width: 901px){ html body .tail.show #tabs#tabs{ background: #E5E9F0 !important; box-shadow: inset 0 0 0 1px transparent !important; } }
html body .tail.show, html body .tail.show .stage{ background-color: #E7ECF4 !important; } html body{ --fs-band-bg: #E7ECF4; }

/* hero decoration — nothing decorative may borrow the selection blue or the action royal */
html body{ --fs-lb-dot-bg: #FFFFFF; --fs-lb-dot-sh: 0 0 0 3px rgba(255,255,255,.16); --fs-cap-sh: 0 30px 60px -28px rgba(2,29,67,.45); --fs-mic-b: #012350; }
html body .screen .hero p.label::before{ background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(255,255,255,.16) !important; }
@media (min-width: 761px){ html body .screen .hero form.capture:not(:focus-within){ box-shadow: 0 30px 60px -28px rgba(2,29,67,.45) !important; } }
html body .screen .hero .microline > b{ color: #012350 !important; }
html body .screen .hero .capture .capfix{ background: #EEF0F4 !important; } html body{ --fs-fix-bg: #EEF0F4; }

/* CLICKABLE = raised · HOVER = lifts · SELECTED = pressed in (light blue) · content and decoration are flat */
@media (min-width: 901px){
  html body .tail.show #tabs#tabs{ box-shadow: inset 0 1px 3px rgba(1,35,80,.14) !important; }
  html body header.bar #navPrimary#navPrimary a.ptab.cur::before{ background: rgba(138,184,247,.26) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.35) !important; }
  html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover::before{ display: none !important; }
  html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover{ color: #FFFFFF !important; }
}
html body header.bar #navKids#navKids a.kid.on::after{ background: #C6D9F4 !important; box-shadow: inset 0 2px 4px rgba(1,35,80,.2) !important; }
html body header.bar #navKids#navKids a.kid:not(.on):hover::after{ background: #FFFFFF !important; box-shadow: 0 2px 6px -2px rgba(1,35,80,.25), inset 0 0 0 1px #DCE1E8 !important; }
html body .tail.show #tabs#tabs > button:not([aria-selected="true"]){ background: #FFFFFF !important; box-shadow: 0 1px 0 rgba(1,35,80,.05), 0 2px 6px -2px rgba(1,35,80,.22), inset 0 0 0 1px #D6DCE4 !important; transform: none !important; }
html body .tail.show #tabs#tabs > button:not([aria-selected="true"]):hover{ background: #FFFFFF !important; box-shadow: 0 2px 0 rgba(1,35,80,.04), 0 8px 16px -6px rgba(1,35,80,.26), inset 0 0 0 1px #C3CAD4 !important; transform: translateY(-1px) !important; }
html body .tail.show #tabs#tabs > button[aria-selected="true"]{ background: #C3D8F5 !important; box-shadow: inset 0 2px 5px rgba(1,35,80,.24), inset 0 0 0 1px rgba(1,35,80,.08) !important; transform: none !important; }

/* cards — content is neutral; the whole card is clickable; its arrow is the action */
html body .tail.show .lane2 .card.door{ background: linear-gradient(#ECEEF2, #ECEEF2) 0 0 / 100% 58px no-repeat, linear-gradient(transparent, transparent) 0 58px / 100% 1px no-repeat, #FFFFFF !important; border-color: #D3D9E1 !important; box-shadow: 0 2px 0 rgba(1,35,80,.04), 0 10px 20px -12px rgba(1,35,80,.3) !important; }
@media (max-width: 760px){ html body .tail.show .lane2 .card.door{ background: linear-gradient(#ECEEF2, #ECEEF2) 0 0 / 100% 62px no-repeat, linear-gradient(transparent, transparent) 0 62px / 100% 1px no-repeat, #FFFFFF !important; } }
html body .tail.show .lane2 .card.door:hover{ border-color: #C1C8D2 !important; box-shadow: 0 3px 0 rgba(1,35,80,.04), 0 20px 34px -16px rgba(1,35,80,.36) !important; transform: translateY(-3px) !important; }
html body .tail.show :is(.card.name, .card.piece, .card.wt-pv, article.card), html body .screen .mp-i{ box-shadow: 0 0 0 1px #D3D9E1 !important; }
html body{ --fs-card-bd: #D3D9E1; --fs-card-bd-h: #C1C8D2; --fs-card-sh-h: 0 3px 0 rgba(1,35,80,.04), 0 20px 34px -16px rgba(1,35,80,.36); --fs2-ic-sh: none; --fs3-ic-sh-fill: inset 0 0 0 1px #D5DAE1; }
html body .screen .mp-i:hover{ border-color: #C1C8D2 !important; }
html body .tail.show .lane2 .card.door .ic:not(:has(svg [fill]:not([fill="none"]))){ background: #012350 !important; box-shadow: none !important; color: #FFFFFF !important; }
html body .tail.show .lane2 .card.door .ic:not(:has(svg [fill]:not([fill="none"]))) svg{ stroke: #FFFFFF !important; }
html body .tail.show .lane2 .card.door .ic:has(svg [fill]:not([fill="none"])){ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #D5DAE1 !important; }
html body .tail.show .card.piece .win, html body .tail.show .card.piece span.win{ background-color: #EEF0F4 !important; }
/* the arrow */
html body .tail.show .lane2 .card.door .go{ background: #FFFFFF !important; color: #005BBF !important; box-shadow: 0 1px 0 rgba(1,35,80,.05), 0 2px 6px -2px rgba(1,35,80,.25), inset 0 0 0 1px #D6DCE4 !important; border-radius: 7px !important; font-weight: 800 !important; }
html body .tail.show .lane2 .card.door:hover .go{ background: #005BBF !important; color: #FFFFFF !important; box-shadow: 0 6px 14px -6px rgba(0,91,191,.6) !important; }
html body .tail.show .lane2 .card.door .go svg{ stroke: currentColor !important; }


/* ================= Deep Cobalt — every role on the first screen, set exactly ================= */
html body{ --fs-bar-bg: #004594; --fs2-h1-ink: #0E1E35; --fs-lb-bg: #02295B; --fs-lb-ink: #FFFFFF; --fs-row2-bg: #ECF3FD; --fs-band-bg: #E8EFF9; --fs-act: #0760C6; --fs-mic-b: #0E1E35; }
html body header.bar{ background: #004594 !important; }
html body header.bar .krow{ background: #ECF3FD !important; }
html body header.bar #navKids#navKids a.kid{ color: #324968 !important; }
html body header.bar #navKids#navKids a.kid.on{ color: #002E66 !important; }
html body header.bar #navKids#navKids a.kid.on::after{ background: #BFD8FB !important; box-shadow: inset 0 2px 4px rgba(10,30,60,.16) !important; }
@media (min-width: 901px){
  html body header.bar #navPrimary#navPrimary a.ptab, html body header.bar #navPrimary#navPrimary a.ptab[href="contact-us.html"]{ color: #FFFFFF !important; }
  html body header.bar #navPrimary#navPrimary a.ptab.cur{ color: #FFFFFF !important; }
  html body header.bar #navPrimary#navPrimary a.ptab.cur::before{ background: transparent !important; box-shadow: none !important; }
}
@media (max-width: 900px){ html body header.bar{ background: #004594 !important; } html body header.bar .krow{ background: #ECF3FD !important; } html body header.bar #navKids#navKids a.kid.on{ background: #BFD8FB !important; color: #002E66 !important; } }

@media (min-width: 901px){ html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover{ color: #FFFFFF !important; } }

/* hero */
html body .screen .hero h1{ color: #0E1E35 !important; }
html body .screen .hero h1 em{ background-image: linear-gradient(90deg, #0760C6 0%, #4989E2 100%) !important; }
html body .screen .hero p.label{ background: #02295B !important; color: #FFFFFF !important; }
@media (min-width: 761px){ html body .screen .hero form.capture:not(:focus-within){ border-color: #02295B !important; } }
html body .screen .hero form.capture:focus-within{ border-color: #0760C6 !important; box-shadow: 0 0 0 4px rgba(7,96,198,.18), 0 30px 60px -28px rgba(10,30,60,.4) !important; }
html body .screen .hero .capture button{ background: #0760C6 !important; box-shadow: 0 8px 18px -8px rgba(7,96,198,.55) !important; color: #FFFFFF !important; }
html body .screen .hero .capture button:hover{ background: #004EA6 !important; }
html body .screen .hero .microline{ color: #505C6C !important; } html body .screen .hero .microline > b{ color: #0E1E35 !important; }
/* All Work */
html body .tail.show, html body .tail.show .stage{ background-color: #E8EFF9 !important; }
@media (min-width: 901px){ html body .tail.show #tabs#tabs{ background: #DFE6F0 !important; } }
html body .tail.show #tabs#tabs > button{ --fs-tab-ink: #384352; --fs-tab-icon: #384352; }
html body .tail.show #tabs#tabs > button:not([aria-selected="true"]){ color: #384352 !important; }
html body .tail.show #tabs#tabs > button[aria-selected="true"]{ background: #BFD8FB !important; color: #003A7E !important; --fs-tab-ink: #003A7E; --fs-tab-on-ink: #003A7E; --fs-tab-icon: #003A7E; }
html body .tail.show #tabs#tabs > button[aria-selected="true"] :is(.gah-tabw, .gah-tabname, .gah-tabsub), html body .tail.show #tabs#tabs > button[aria-selected="true"] span{ color: #003A7E !important; }
html body .tail.show #tabs#tabs > button[aria-selected="true"] svg:not(:has([fill])){ background: #02295B !important; box-shadow: 0 0 0 4px #02295B !important; stroke: #FFFFFF !important; }
html body .tail.show .lane2 .card.door h3{ color: #0E1E35 !important; } html body .tail.show .lane2 .card.door h3 span{ color: #505C6C !important; } html body .tail.show .lane2 .card.door p.say{ color: #505C6C !important; }
html body .tail.show .lane2 .card.door .ic:not(:has(svg [fill]:not([fill="none"]))){ background: #02295B !important; }
html body .tail.show .lane2 .card.door .go{ color: #0760C6 !important; }
html body .tail.show .lane2 .card.door:hover .go{ background: #0760C6 !important; color: #FFFFFF !important; box-shadow: 0 6px 14px -6px rgba(7,96,198,.55) !important; }
html body .tail.show #tabs > button:focus-visible{ outline-color: #0760C6 !important; }
/* identity (service icon tiles, the chosen tab's icon, the field frame) is never the action blue */
html body header.bar :is(#navPrimary a.ptab, #navKids a.kid):focus-visible{ outline-color: #4989E2 !important; }

/* ================= the main menu bar · 1 Deep Cobalt ================= */
html body header.bar{ background: #004594 !important; box-shadow: 0 1px 0 rgba(0,69,148,.14), 0 10px 20px -16px rgba(0,69,148,.45) !important; --fs-bar-bg: #004594; --fs-bar-sh: 0 1px 0 rgba(0,69,148,.14), 0 10px 20px -16px rgba(0,69,148,.45); }
html body header.bar :is(.wm, #navPrimary a.ptab){ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html body header.bar .wm{ color: #FFFFFF !important; }
@media (min-width: 901px){
  /* solid word colour, never see-through white */
  html body header.bar #navPrimary#navPrimary a.ptab, html body header.bar #navPrimary#navPrimary a.ptab[href="contact-us.html"]{ color: #E1ECFC !important; font-weight: 650 !important; letter-spacing: .003em !important; }
  html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover, html body header.bar #navPrimary#navPrimary a.ptab[href="contact-us.html"]:hover{ color: #FFFFFF !important; }
  /* the current page: an opaque key pressed into the bar */
  html body header.bar #navPrimary#navPrimary a.ptab.cur{ color: #003270 !important; font-weight: 750 !important; }
  html body header.bar #navPrimary#navPrimary a.ptab.cur::before{ background: #C5DBFB !important; box-shadow: inset 0 2px 3px rgba(0,22,60,.30) !important; border-radius: 7px !important; }
}
/* the section row */
html body header.bar{ --fs-row2-bg: #ECF3FD; }
html body header.bar .krow{ background: #ECF3FD !important; box-shadow: none !important; }
html body header.bar #navKids#navKids a.kid{ color: #324968 !important; }
html body header.bar #navKids#navKids a.kid:not(.on):hover{ color: #00204B !important; }
html body header.bar #navKids#navKids a.kid.on{ color: #002E66 !important; font-weight: 700 !important; }
html body header.bar #navKids#navKids a.kid.on::after{ background: #BFD8FB !important; box-shadow: inset 0 2px 4px rgba(0,22,60,.18) !important; }
@media (max-width: 900px){
  html body header.bar{ background: #004594 !important; }
  html body header.bar .krow{ background: #ECF3FD !important; }
  html body header.bar #navKids#navKids a.kid.on{ background: #BFD8FB !important; color: #002E66 !important; }
}
@media (min-width: 901px){
  html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover::before, html body header.bar #navPrimary#navPrimary a.ptab[href="contact-us.html"]:not(.cur):hover::before{ content: "" !important; display: block !important; position: absolute !important;
    margin: 0 !important; transform: none !important; opacity: 1 !important; clip-path: none !important; left: -12px !important; right: -12px !important;
    top: calc(50% - 17px) !important; bottom: auto !important; height: 34px !important; width: auto !important; z-index: -1 !important;
    background: transparent !important; border-radius: 7px !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.42) !important; }
}
@media (min-width: 1024px){ html body header.bar #navPrimary#navPrimary a.ptab:not(.cur):hover::before{ left: calc(clamp(12px, 1.25vw, 22px) - 12px) !important; right: calc(clamp(12px, 1.25vw, 22px) - 12px) !important; } }
/* phones: the headline accent's gradient is only clipped to the letters from 761px, so below that it is a plain colour */
@media (max-width: 760px){ html body .screen .hero h1 em, html body .screen .hero h1 em i{ background: none !important; color: #0760C6 !important; -webkit-text-fill-color: #0760C6 !important; } }

/* ================= Brand Blue — selection light blue · tag · colourful logos · no dark or purple ================= */
/* SELECTION — light blue only for what is selected */
@media (min-width: 901px){ html body header.bar #navPrimary#navPrimary a.ptab.cur{ color: #003C85 !important; } html body header.bar #navPrimary#navPrimary a.ptab.cur::before{ background: #D5E7FF !important; box-shadow: inset 0 0 0 1px #8FB8F2, inset 0 2px 3px rgba(0,40,100,.12) !important; } }
html body header.bar #navKids#navKids a.kid.on{ color: #003C85 !important; }
html body header.bar #navKids#navKids a.kid.on::after{ background: #CFE3FF !important; box-shadow: inset 0 0 0 1px #8FB8F2, inset 0 2px 3px rgba(0,40,100,.10) !important; }
@media (max-width: 900px){ html body header.bar #navKids#navKids a.kid.on{ background: #CFE3FF !important; color: #003C85 !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important; } }
html body .tail.show #tabs#tabs > button[aria-selected="true"]{ background: #CFE3FF !important; color: #003C85 !important; box-shadow: inset 0 0 0 1px #8FB8F2, inset 0 2px 4px rgba(0,40,100,.14) !important;
  --fs-tab-ink: #003C85; --fs-tab-on-ink: #003C85; --fs-tab-icon: #003C85; }
html body .tail.show #tabs#tabs > button[aria-selected="true"] :is(.gah-tabw, .gah-tabname, .gah-tabsub), html body .tail.show #tabs#tabs > button[aria-selected="true"] span{ color: #003C85 !important; }
html body .tail.show #tabs#tabs > button[aria-selected="true"] svg:not(:has([fill])){ background-color: transparent !important; box-shadow: none !important; stroke: #003C85 !important; }
html body .tail.show #tabs#tabs > button#tab-all[aria-selected="true"] svg{ background: none !important; box-shadow: none !important; stroke: #003C85 !important; }
/* THE TAG — never dark navy or purple */
html body .screen .hero p.label{ background: #0A66C2 !important; color: #FFFFFF !important; box-shadow: 0 10px 22px -12px rgba(10,102,194,.55) !important; }
html body .screen .hero p.label::before{ background: #FFFFFF !important; box-shadow: none !important; }
html body{ --fs-lb-bg: #0A66C2; --fs-lb-ink: #FFFFFF; }
/* THE FIELD FRAME — a clear blue, not dark */
@media (min-width: 761px){ html body .screen .hero form.capture, html body .screen .hero form.capture:not(:focus-within){ border-color: #0A66C2 !important; } }
@media (max-width: 760px){ html body .screen .hero form.capture{ border-color: #0A66C2 !important; } }
/* CARDS — content neutral, every logo in colour */
html body .tail.show .lane2 .card.door{ background: linear-gradient(#ECEEF2, #ECEEF2) 0 0 / 100% 58px no-repeat, linear-gradient(transparent, transparent) 0 58px / 100% 1px no-repeat, #FFFFFF !important; }
@media (max-width: 760px){ html body .tail.show .lane2 .card.door{ background: linear-gradient(#ECEEF2, #ECEEF2) 0 0 / 100% 62px no-repeat, linear-gradient(transparent, transparent) 0 62px / 100% 1px no-repeat, #FFFFFF !important; } }
html body .tail.show #lane#lane .card.door .ic.ic{ background-color: #FFFFFF !important; box-shadow: inset 0 0 0 1px #DCE3EE !important; border-radius: 9px !important; background-image: none !important; }
html body .tail.show #lane#lane .card.door[data-go="portfolio"] .ic.ic{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%276.6%27%20cy%3D%278.2%27%20r%3D%272.7%27%20fill%3D%27%2314B8A6%27%2F%3E%3Ccircle%20cx%3D%2717.4%27%20cy%3D%278.2%27%20r%3D%272.7%27%20fill%3D%27%23F97316%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279.6%27%20r%3D%273.3%27%20fill%3D%27%231A73E8%27%2F%3E%3Cpath%20d%3D%27M1.6%2019.4c0-2.9%202.3-5%205-5%201.1%200%202.1.3%203%20.9-1%20.9-1.6%202.3-1.7%204.1z%27%20fill%3D%27%2314B8A6%27%2F%3E%3Cpath%20d%3D%27M22.4%2019.4c0-2.9-2.3-5-5-5-1.1%200-2.1.3-3%20.9%201%20.9%201.6%202.3%201.7%204.1z%27%20fill%3D%27%23F97316%27%2F%3E%3Cpath%20d%3D%27M6%2020.6c0-3.5%202.7-6%206-6s6%202.5%206%206z%27%20fill%3D%27%231A73E8%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat, #FFFFFF !important; }
html body .tail.show #lane#lane .card.door[data-go="portfolio"] .ic svg > *{ visibility: hidden !important; }
html body .tail.show #tabs#tabs > button#tab-portfolio svg{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%276.6%27%20cy%3D%278.2%27%20r%3D%272.7%27%20fill%3D%27%2314B8A6%27%2F%3E%3Ccircle%20cx%3D%2717.4%27%20cy%3D%278.2%27%20r%3D%272.7%27%20fill%3D%27%23F97316%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279.6%27%20r%3D%273.3%27%20fill%3D%27%231A73E8%27%2F%3E%3Cpath%20d%3D%27M1.6%2019.4c0-2.9%202.3-5%205-5%201.1%200%202.1.3%203%20.9-1%20.9-1.6%202.3-1.7%204.1z%27%20fill%3D%27%2314B8A6%27%2F%3E%3Cpath%20d%3D%27M22.4%2019.4c0-2.9-2.3-5-5-5-1.1%200-2.1.3-3%20.9%201%20.9%201.6%202.3%201.7%204.1z%27%20fill%3D%27%23F97316%27%2F%3E%3Cpath%20d%3D%27M6%2020.6c0-3.5%202.7-6%206-6s6%202.5%206%206z%27%20fill%3D%27%231A73E8%27%2F%3E%3C%2Fsvg%3E") center / 100% no-repeat !important; box-shadow: none !important; border-radius: 0 !important; }
html body .tail.show #tabs#tabs > button#tab-portfolio svg > *{ visibility: hidden !important; }
html body .tail.show #lane#lane .card.door[data-go="landing"] .ic.ic{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27%231A73E8%27%20stroke-width%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M6%203.8h12a2.2%202.2%200%20012.2%202.2v2.6H3.8V6A2.2%202.2%200%20016%203.8z%27%20fill%3D%27%231A73E8%27%2F%3E%3Crect%20x%3D%276.2%27%20y%3D%2711%27%20width%3D%278.5%27%20height%3D%271.9%27%20rx%3D%27.95%27%20fill%3D%27%2394A3B8%27%2F%3E%3Crect%20x%3D%276.2%27%20y%3D%2714.2%27%20width%3D%275.5%27%20height%3D%271.9%27%20rx%3D%27.95%27%20fill%3D%27%23CBD5E1%27%2F%3E%3Crect%20x%3D%2713.2%27%20y%3D%2715.6%27%20width%3D%275.2%27%20height%3D%273%27%20rx%3D%271.5%27%20fill%3D%27%2322C55E%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat, #FFFFFF !important; }
html body .tail.show #lane#lane .card.door[data-go="landing"] .ic svg > *{ visibility: hidden !important; }
html body .tail.show #tabs#tabs > button#tab-landing svg{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27%231A73E8%27%20stroke-width%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M6%203.8h12a2.2%202.2%200%20012.2%202.2v2.6H3.8V6A2.2%202.2%200%20016%203.8z%27%20fill%3D%27%231A73E8%27%2F%3E%3Crect%20x%3D%276.2%27%20y%3D%2711%27%20width%3D%278.5%27%20height%3D%271.9%27%20rx%3D%27.95%27%20fill%3D%27%2394A3B8%27%2F%3E%3Crect%20x%3D%276.2%27%20y%3D%2714.2%27%20width%3D%275.5%27%20height%3D%271.9%27%20rx%3D%27.95%27%20fill%3D%27%23CBD5E1%27%2F%3E%3Crect%20x%3D%2713.2%27%20y%3D%2715.6%27%20width%3D%275.2%27%20height%3D%273%27%20rx%3D%271.5%27%20fill%3D%27%2322C55E%27%2F%3E%3C%2Fsvg%3E") center / 100% no-repeat !important; box-shadow: none !important; border-radius: 0 !important; }
html body .tail.show #tabs#tabs > button#tab-landing svg > *{ visibility: hidden !important; }
html body .tail.show #lane#lane .card.door[data-go="websites"] .ic.ic{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%272.4%27%20y%3D%273.6%27%20width%3D%2719.2%27%20height%3D%2716.8%27%20rx%3D%273%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27%230EA5E9%27%20stroke-width%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M2.4%208.6h19.2%27%20stroke%3D%27%230EA5E9%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%276.1%27%20r%3D%271%27%20fill%3D%27%23EF4444%27%2F%3E%3Ccircle%20cx%3D%278.4%27%20cy%3D%276.1%27%20r%3D%271%27%20fill%3D%27%23F59E0B%27%2F%3E%3Ccircle%20cx%3D%2711.2%27%20cy%3D%276.1%27%20r%3D%271%27%20fill%3D%27%2322C55E%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2714.4%27%20r%3D%273.6%27%20fill%3D%27none%27%20stroke%3D%27%231A73E8%27%20stroke-width%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M8.4%2014.4h7.2M12%2010.8c1.2%201%201.2%206.2%200%207.2-1.2-1-1.2-6.2%200-7.2z%27%20fill%3D%27none%27%20stroke%3D%27%231A73E8%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat, #FFFFFF !important; }
html body .tail.show #lane#lane .card.door[data-go="websites"] .ic svg > *{ visibility: hidden !important; }
html body .tail.show #tabs#tabs > button#tab-websites svg{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%272.4%27%20y%3D%273.6%27%20width%3D%2719.2%27%20height%3D%2716.8%27%20rx%3D%273%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27%230EA5E9%27%20stroke-width%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M2.4%208.6h19.2%27%20stroke%3D%27%230EA5E9%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%276.1%27%20r%3D%271%27%20fill%3D%27%23EF4444%27%2F%3E%3Ccircle%20cx%3D%278.4%27%20cy%3D%276.1%27%20r%3D%271%27%20fill%3D%27%23F59E0B%27%2F%3E%3Ccircle%20cx%3D%2711.2%27%20cy%3D%276.1%27%20r%3D%271%27%20fill%3D%27%2322C55E%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2714.4%27%20r%3D%273.6%27%20fill%3D%27none%27%20stroke%3D%27%231A73E8%27%20stroke-width%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M8.4%2014.4h7.2M12%2010.8c1.2%201%201.2%206.2%200%207.2-1.2-1-1.2-6.2%200-7.2z%27%20fill%3D%27none%27%20stroke%3D%27%231A73E8%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E") center / 100% no-repeat !important; box-shadow: none !important; border-radius: 0 !important; }
html body .tail.show #tabs#tabs > button#tab-websites svg > *{ visibility: hidden !important; }
html body .tail.show #lane#lane .card.door[data-go="meta"] .ic.ic{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%230064E1%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%230A84FF%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%230064E1%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M3%2015c0-4%202-8%204.5-8S11%2012%2012%2012s2-5%204.5-5S21%2011%2021%2015a3%203%200%2001-5.4%201.8C14.3%2015%2013%2012%2012%2012s-2.3%203-3.6%204.8A3%203%200%20013%2015z%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%272.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat, #FFFFFF !important; }
html body .tail.show #lane#lane .card.door[data-go="meta"] .ic svg > *{ visibility: hidden !important; }
html body .tail.show #tabs#tabs > button#tab-meta svg{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%230064E1%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%230A84FF%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%230064E1%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M3%2015c0-4%202-8%204.5-8S11%2012%2012%2012s2-5%204.5-5S21%2011%2021%2015a3%203%200%2001-5.4%201.8C14.3%2015%2013%2012%2012%2012s-2.3%203-3.6%204.8A3%203%200%20013%2015z%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%272.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / 100% no-repeat !important; box-shadow: none !important; border-radius: 0 !important; }
html body .tail.show #tabs#tabs > button#tab-meta svg > *{ visibility: hidden !important; }
/* CLIENT MONOGRAMS — no black, no dark green, no purple */
html body .tail.show .gah .mp-i[style*="#12161F"]{ --k: #F29D38 !important; } html body .tail.show .gah .mp-i[style*="#12161F"] .mp-m{ background: #F29D38 !important; }
html body .tail.show .gah .mp-i[style*="#8E44AD"]{ --k: #E0567A !important; } html body .tail.show .gah .mp-i[style*="#8E44AD"] .mp-m{ background: #E0567A !important; }
html body .tail.show .gah .mp-i[style*="#0F5C4A"]{ --k: #16A34A !important; } html body .tail.show .gah .mp-i[style*="#0F5C4A"] .mp-m{ background: #16A34A !important; }
html body .tail.show .gah .mp-i[style*="#34495E"]{ --k: #0891B2 !important; } html body .tail.show .gah .mp-i[style*="#34495E"] .mp-m{ background: #0891B2 !important; }
html body .tail.show .gah .mp-i[style*="#3730A3"]{ --k: #2563EB !important; } html body .tail.show .gah .mp-i[style*="#3730A3"] .mp-m{ background: #2563EB !important; }
html body .tail.show .gah .mp-i[style*="#3B4A63"]{ --k: #0D9488 !important; } html body .tail.show .gah .mp-i[style*="#3B4A63"] .mp-m{ background: #0D9488 !important; }
html body .tail.show .gah .mp-i[style*="#5F3DC4"]{ --k: #F97316 !important; } html body .tail.show .gah .mp-i[style*="#5F3DC4"] .mp-m{ background: #F97316 !important; }
html body .tail.show .gah .mp-i[style*="#A61E4D"]{ --k: #DC2626 !important; } html body .tail.show .gah .mp-i[style*="#A61E4D"] .mp-m{ background: #DC2626 !important; }
html body .tail.show :is(#lane, #wtPanel-portfolio) .card.name.card.name:nth-child(8n+1) .chip.chip{ background: #1A73E8 !important; box-shadow: none !important; }
html body .tail.show :is(#lane, #wtPanel-portfolio) .card.name.card.name:nth-child(8n+2) .chip.chip{ background: #0F9D58 !important; box-shadow: none !important; }
html body .tail.show :is(#lane, #wtPanel-portfolio) .card.name.card.name:nth-child(8n+3) .chip.chip{ background: #F29D38 !important; box-shadow: none !important; }
html body .tail.show :is(#lane, #wtPanel-portfolio) .card.name.card.name:nth-child(8n+4) .chip.chip{ background: #E0567A !important; box-shadow: none !important; }
html body .tail.show :is(#lane, #wtPanel-portfolio) .card.name.card.name:nth-child(8n+5) .chip.chip{ background: #0891B2 !important; box-shadow: none !important; }
html body .tail.show :is(#lane, #wtPanel-portfolio) .card.name.card.name:nth-child(8n+6) .chip.chip{ background: #DC4B2F !important; box-shadow: none !important; }
html body .tail.show :is(#lane, #wtPanel-portfolio) .card.name.card.name:nth-child(8n+7) .chip.chip{ background: #16A34A !important; box-shadow: none !important; }
html body .tail.show :is(#lane, #wtPanel-portfolio) .card.name.card.name:nth-child(8n+8) .chip.chip{ background: #2563EB !important; box-shadow: none !important; }

/* ============ blue dot system 3 · Lit and Light ============
   The surroundings settle · the mark keeps the light — the light is sky blue #1F8FEA: lighter and cooler than the theme #004594 and than the action #0760C6.
   All three selected states wear the same mark: "Home", "Overview" and the chosen All Work tab. */
@media (min-width: 901px){
  html body header.bar #navPrimary#navPrimary a.ptab.cur::before{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important; right: calc(6px - 7px) !important; }
  html body header.bar #navPrimary#navPrimary a.ptab.cur{ color: #004594 !important; }
  html body header.bar #navKids#navKids a.kid.on::after{ right: -7px !important; }
}
html body header.bar #navKids#navKids a.kid.on::after{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important; }
html body header.bar #navKids#navKids a.kid.on{ color: #004594 !important; }
/* phone: the chip itself is the visible mark, so the mark moves onto its layer and gains the same slot on the right
   (the row scrolls and clips at the left, so the slot can only grow to the right). z-index 0 gives the chip its own layer —
   without it the mark paints behind the section row's background and vanishes. */
@media (max-width: 900px){
  html body header.bar #navKids#navKids a.kid.on{ background: transparent !important; color: #004594 !important; box-shadow: none !important; z-index: 0 !important; isolation: isolate; }
  html body header.bar #navKids#navKids a.kid.on::after{ top: 0 !important; bottom: 0 !important; left: 0 !important; right: -7px !important; border-radius: 6px !important; }
}
html body .tail.show #tabs#tabs > button[aria-selected="true"]{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; color: #004594 !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important;
  --fs-tab-ink: #004594; --fs-tab-on-ink: #004594; --fs-tab-icon: #004594; }
html body .tail.show #tabs#tabs > button[aria-selected="true"] :is(.gah-tabw, .gah-tabname, .gah-tabsub), html body .tail.show #tabs#tabs > button[aria-selected="true"] span{ color: #004594 !important; }
html body .tail.show #tabs#tabs > button[aria-selected="true"] svg:not(:has([fill])){ stroke: #004594 !important; background-color: transparent !important; box-shadow: none !important; }
html body .tail.show #tabs#tabs > button#tab-all[aria-selected="true"] svg{ stroke: #004594 !important; background: none !important; box-shadow: none !important; }
html body header.bar .krow{ background: #D3DDEC !important; }
html body .tail.show #tabs#tabs{ background: #CBD6E6 !important; }
html body .tail.show #tabs#tabs > button:not([aria-selected="true"]){ background: #E8ECF3 !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; }

/* ================= middle section f01 · Clean White (without shadow) ================= */

/* ================= final clean-up for the middle section =================
   1 · no dots: the dotted grid layer is switched off completely */
html body{ --fs-tex: none !important; }
html body .screen .tex{ background-image: none !important; opacity: 0 !important; }
/* the headline ornament stays off, so only the chosen ground paints the middle */
html body{ --fs4-orn: none; --fs4-orn-bg: none; --fs4-orn-w: 0px; --fs4-orn-ry: 0px; --fs4-orn-dy: 0px; --fs4-orn-mask: none; }
/* 2 · no extra shadows in the middle section:
      the header's soft shadow that fell onto the hero, the glow under the eyebrow pill,
      the large shadow under the audit field, and the glow under the button (at rest and on hover) */
html body{ --fs-bar-sh: none; --fs-btn-sh: none; --fs-btn-sh-h: none; }
html body header.bar{ box-shadow: none !important; }
html body .screen .hero p.label{ box-shadow: none !important; }
html body .screen .hero form.capture, html body .screen .hero form.capture:not(:focus-within){ box-shadow: none !important; }
@media (min-width: 761px){ html body .screen .hero form.capture, html body .screen .hero form.capture:not(:focus-within){ box-shadow: none !important; } }
html body .screen .hero .capture button, html body .screen .hero .capture button:hover{ box-shadow: none !important; }
/* keyboard focus still shows — a ring, not a shadow */
html body .screen .hero form.capture:focus-within{ box-shadow: 0 0 0 4px rgba(7,96,198,.18) !important; }
/*    …and the white All Work panel, whose old shadow pointed UP into the middle: only its 1px edge stays */
html body .tail.show .stage::before{ box-shadow: 0 0 0 1px #D6E0F0 !important; }
/* 3 · the DMD logo: both D black, M and ring logo blue, white disc */
html body header.bar .mark.mark svg text > tspan:nth-child(odd){ fill: #000000 !important; }
html body header.bar .mark.mark svg text > tspan:nth-child(2){ fill: #0B57F5 !important; }
html body header.bar .mark.mark svg circle{ fill: #FFFFFF !important; stroke: #0B57F5 !important; }
html body .tail.show .stage::before{ box-shadow: 0 0 0 1px #D6E0F0 !important; }
html body .screen main.hero{ background-color: #FFFFFF !important; background-image: none !important; background-size: 100% 100% !important; background-position: center !important; background-repeat: no-repeat !important; }

/* ================= NO SHADOW ANYWHERE — every shadow on the first screen removed, at rest and on hover ================= */
/* header · section menu: the hover plate lost its lift shadow; the chosen section keeps its own edge */
html body header.bar #navKids#navKids#navKids a.kid:not(.on):hover::after{ box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body header.bar #navKids#navKids#navKids a.kid.on::after, html body header.bar #navKids#navKids#navKids a.kid.on:hover::after{ box-shadow: inset 0 0 0 1px #8FB8F2 !important; }
/* middle · the field's focus ring becomes a real outline */
html body .screen .hero form.capture:focus-within{ box-shadow: none !important; outline: 3px solid rgba(7,96,198,.38) !important; outline-offset: 2px !important; }
/* All Work · the tab bar's inner shade becomes a thin edge */
html body .tail.show #tabs#tabs#tabs{ box-shadow: inset 0 0 0 1px #D3DAE6 !important; }
/* All Work · tabs: no lift, no shadow — hover darkens the edge */
html body .tail.show #tabs#tabs#tabs > button, html body .tail.show #tabs#tabs#tabs > button:hover{ transform: none !important; }
html body .tail.show #tabs#tabs#tabs > button:not([aria-selected="true"]){ box-shadow: inset 0 0 0 1px #D3DAE6 !important; }
html body .tail.show #tabs#tabs#tabs > button:not([aria-selected="true"]):hover{ box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body .tail.show #tabs#tabs#tabs > button[aria-selected="true"], html body .tail.show #tabs#tabs#tabs > button[aria-selected="true"]:hover{ box-shadow: inset 0 0 0 1px #8FB8F2 !important; }
/* All Work · cards: no shadow, no lift — hover darkens the edge */
html body .tail.show #lane#lane#lane .card.door, html body .tail.show #lane#lane#lane .card.door:hover, html body .tail.show #lane#lane#lane .card.door:focus-visible{ box-shadow: none !important; transform: none !important; }
html body .tail.show #lane#lane#lane .card.door:hover{ border-color: #8E9AAD !important; }
/* All Work · the arrow buttons: the thin edge only, and no glow when a card is hovered */
html body .tail.show #lane#lane#lane .card.door .go{ box-shadow: inset 0 0 0 1px #D6DCE4 !important; }
html body .tail.show #lane#lane#lane .card.door:hover .go{ box-shadow: none !important; }
/* menus that open over the page: the Our Services drop-down and the phone menu panel keep a thin edge instead of a shadow */
html body header.bar #navSvc#navSvc#navSvc{ box-shadow: 0 0 0 1px #D3DAE6 !important; }
@media (max-width: 900px){ html body header.bar #navPrimary#navPrimary#navPrimary{ box-shadow: inset 0 -1px 0 #D3DAE6 !important; } }

/* ================= middle background: Corridor (from dmd-hero-94-v6kz-19.html) — flat colour only ================= */
html body .screen .tex{ background-image: none !important; }
@media (min-width: 761px){ html body .screen main.hero{ background: linear-gradient(#FFFFFF,#FFFFFF) center / calc(100% - 2 * 8.2%) calc(100% - 2 * 10.5%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 8.2% + 2px) calc(100% - 2 * 10.5% + 2px) no-repeat, linear-gradient(#EEF4FC,#EEF4FC) center / calc(100% - 2 * 5.8%) calc(100% - 2 * 8.5%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 5.8% + 2px) calc(100% - 2 * 8.5% + 2px) no-repeat, linear-gradient(#DDE9F9,#DDE9F9) center / calc(100% - 2 * 3.6%) calc(100% - 2 * 6%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 3.6% + 2px) calc(100% - 2 * 6% + 2px) no-repeat, linear-gradient(#C6D9F4,#C6D9F4) center / calc(100% - 2 * 1.6%) calc(100% - 2 * 3%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 1.6% + 2px) calc(100% - 2 * 3% + 2px) no-repeat, #AEC9EF !important; }
}
@media (max-width: 760px){ html body .screen main.hero{ background: linear-gradient(#FFFFFF,#FFFFFF) center / calc(100% - 2 * 5%) calc(100% - 2 * 7.4%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 5% + 2px) calc(100% - 2 * 7.4% + 2px) no-repeat, linear-gradient(#EEF4FC,#EEF4FC) center / calc(100% - 2 * 4%) calc(100% - 2 * 6%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 4% + 2px) calc(100% - 2 * 6% + 2px) no-repeat, linear-gradient(#DDE9F9,#DDE9F9) center / calc(100% - 2 * 2.8%) calc(100% - 2 * 4.2%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 2.8% + 2px) calc(100% - 2 * 4.2% + 2px) no-repeat, linear-gradient(#C6D9F4,#C6D9F4) center / calc(100% - 2 * 1.4%) calc(100% - 2 * 2.2%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 1.4% + 2px) calc(100% - 2 * 2.2% + 2px) no-repeat, #AEC9EF !important; }
}
/* short screens: thinner frames at the top and bottom so no word sits on a frame edge */
@media (min-width: 761px) and (max-height: 780px){ html body .screen main.hero{ background: linear-gradient(#FFFFFF,#FFFFFF) center / calc(100% - 2 * 8.2%) calc(100% - 2 * 4.2%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 8.2% + 2px) calc(100% - 2 * 4.2% + 2px) no-repeat, linear-gradient(#EEF4FC,#EEF4FC) center / calc(100% - 2 * 5.8%) calc(100% - 2 * 3.2%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 5.8% + 2px) calc(100% - 2 * 3.2% + 2px) no-repeat, linear-gradient(#DDE9F9,#DDE9F9) center / calc(100% - 2 * 3.6%) calc(100% - 2 * 2.2%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 3.6% + 2px) calc(100% - 2 * 2.2% + 2px) no-repeat, linear-gradient(#C6D9F4,#C6D9F4) center / calc(100% - 2 * 1.6%) calc(100% - 2 * 1.1%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * 1.6% + 2px) calc(100% - 2 * 1.1% + 2px) no-repeat, #AEC9EF !important; }
}

/* ================= WIDER FIRST SCREEN — one column, comfortable margins, never full-bleed ================= */
@media (min-width: 761px){
  html body header.bar, html body .screen{
    --pad: clamp(24px, 4vw, 72px);
    --maxw: min(1440px, calc(100% - 2 * clamp(24px, 4vw, 72px)));
    --grid-edge: max(var(--pad), calc((100% - var(--maxw)) / 2));
    --wpad: var(--grid-edge);
    --nav-gutter: var(--grid-edge);
  }
  /* the headline keeps TODAY's size. The type map sizes it with --fs-h1-fs = clamp(34px, min(4.78cqw, 8.6vh), 87px), where cqw is the
     hero's content width — which this page widens. So the token is redefined on the headline to use the OLD content width:
     100cqw (new width) + 2 × (new margin − old margin). */
  html body .screen .hero h1{
    --new-edge: max(clamp(24px, 4vw, 72px), calc((100vw - min(1440px, calc(100vw - 2 * clamp(24px, 4vw, 72px)))) / 2));
    --old-edge: max(clamp(18px, 4vw, 84px), calc((100vw - clamp(940px, 82vw, 1480px)) / 2));
    --fs-h1-fs: clamp(34px, min(calc((100cqw + 2 * (var(--new-edge) - var(--old-edge))) * 0.0478), 8.6vh), 87px);
  }
  /* the Corridor's white centre starts on the column edge; its frames keep their proportions inside the margin */
  html body .screen main.hero{ background: linear-gradient(#FFFFFF,#FFFFFF) center / calc(100% - 2 * calc(var(--grid-edge) * 1.0000)) calc(100% - 2 * 10.5%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * calc(var(--grid-edge) * 1.0000) + 2px) calc(100% - 2 * 10.5% + 2px) no-repeat, linear-gradient(#EEF4FC,#EEF4FC) center / calc(100% - 2 * calc(var(--grid-edge) * 0.7073)) calc(100% - 2 * 8.5%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * calc(var(--grid-edge) * 0.7073) + 2px) calc(100% - 2 * 8.5% + 2px) no-repeat, linear-gradient(#DDE9F9,#DDE9F9) center / calc(100% - 2 * calc(var(--grid-edge) * 0.4390)) calc(100% - 2 * 6%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * calc(var(--grid-edge) * 0.4390) + 2px) calc(100% - 2 * 6% + 2px) no-repeat, linear-gradient(#C6D9F4,#C6D9F4) center / calc(100% - 2 * calc(var(--grid-edge) * 0.1951)) calc(100% - 2 * 3%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * calc(var(--grid-edge) * 0.1951) + 2px) calc(100% - 2 * 3% + 2px) no-repeat, #AEC9EF !important; }
}
@media (min-width: 761px) and (max-height: 780px){
  html body .screen main.hero{ background: linear-gradient(#FFFFFF,#FFFFFF) center / calc(100% - 2 * calc(var(--grid-edge) * 1.0000)) calc(100% - 2 * 4.2%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * calc(var(--grid-edge) * 1.0000) + 2px) calc(100% - 2 * 4.2% + 2px) no-repeat, linear-gradient(#EEF4FC,#EEF4FC) center / calc(100% - 2 * calc(var(--grid-edge) * 0.7073)) calc(100% - 2 * 3.2%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * calc(var(--grid-edge) * 0.7073) + 2px) calc(100% - 2 * 3.2% + 2px) no-repeat, linear-gradient(#DDE9F9,#DDE9F9) center / calc(100% - 2 * calc(var(--grid-edge) * 0.4390)) calc(100% - 2 * 2.2%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * calc(var(--grid-edge) * 0.4390) + 2px) calc(100% - 2 * 2.2% + 2px) no-repeat, linear-gradient(#C6D9F4,#C6D9F4) center / calc(100% - 2 * calc(var(--grid-edge) * 0.1951)) calc(100% - 2 * 1.1%) no-repeat, linear-gradient(#fff,#fff) center / calc(100% - 2 * calc(var(--grid-edge) * 0.1951) + 2px) calc(100% - 2 * 1.1% + 2px) no-repeat, #AEC9EF !important; }
}

/* =====================================================================================================================
   FULL HOMEPAGE — every section below the first screen in the approved system
   ===================================================================================================================== */

/* ---- width: the approved column on the WHOLE page (phones keep their own margin) ---- */
@media (min-width: 761px){
  html:root{
    --pad: clamp(24px, 4vw, 72px);
    --maxw: min(1440px, calc(100% - 2 * clamp(24px, 4vw, 72px)));
    --grid-edge: max(var(--pad), calc((100% - var(--maxw)) / 2));
    --wpad: var(--grid-edge);
  }
}

/* ---- first screen spacing ---- */
/* phones: the main row gets breathing space above the section row, and stays a little taller than it (58px over 46px) */
@media (max-width: 900px){ html body header.bar .brow{ padding-top: 11px !important; padding-bottom: 11px !important; } }
/* All Work: the space under the tabs matches the space above them */
@media (min-width: 901px){ html body .tail.show .drawer{ padding-top: 17px !important; } }
@media (max-width: 760px){ html body .tail.show #tabs#tabs{ padding-bottom: 8px !important; } }
@media (min-width: 761px) and (max-width: 900px){ html body .tail.show #tabs#tabs{ padding-bottom: 12px !important; } }

/* ---- grounds: flat, alternating, no glows, no dots ---- */
html body #svc3#svc3#svc3{ background: #FFFFFF !important; background-image: none !important; }
html body #ss1#ss1#ss1{ background: #F3F7FC !important; background-image: none !important; }
html body #hp1#hp1#hp1{ background: #FFFFFF !important; background-image: none !important; }
html body #indwork#indwork#indwork{ background: #F3F7FC !important; background-image: none !important; }
html body #wcu8#wcu8#wcu8{ background: #FFFFFF !important; background-image: none !important; }
html body #about5#about5#about5{ background: #F3F7FC !important; background-image: none !important; }
html body #faq10#faq10#faq10{ background: #FFFFFF !important; background-image: none !important; }

/* ---- section heads: the hero's pill, ink, accent and supporting text ---- */
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-kicker{ background: #0A66C2 !important; color: #FFFFFF !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-kicker::before{ background: #FFFFFF !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-title{ color: #0E1E35 !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-title i{ color: #0760C6 !important; -webkit-text-fill-color: #0760C6 !important; background: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-desc{ color: #505C6C !important; }
html body #about5#about5#about5 .hd-kicker{ gap: 0 !important; }

/* ---- clients wear the same colour here as on the first screen (no near-black, no purple) ---- */
html body #ss1#ss1#ss1 figure.ss-shot[style*="#12161F"]{ --k: #F29D38 !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#8E44AD"]{ --k: #E0567A !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#0F5C4A"]{ --k: #16A34A !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#34495E"]{ --k: #0891B2 !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#3730A3"]{ --k: #2563EB !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#3B4A63"]{ --k: #0D9488 !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#5F3DC4"]{ --k: #F97316 !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#A61E4D"]{ --k: #DC2626 !important; }

/* ---- identity: number and icon tiles are flat cobalt ---- */
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.v03-head .iw2-icn, .wc-n, .ab-sic, .gfaq-qb){ background: #004594 !important; box-shadow: none !important; color: #FFFFFF !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.v03-head .iw2-icn, .wc-n, .ab-sic, .gfaq-qb) :is(svg, svg *){ stroke: #FFFFFF !important; }
/* the five service tiles speak the All Work cards' language: colourful logos on white tiles */
html body #svc3#svc3#svc3 .s3-num{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #DCE3EE !important; }
html body #svc3#svc3#svc3 #meta-ads .s3-num{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%230064E1%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%230A84FF%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%230064E1%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M3%2015c0-4%202-8%204.5-8S11%2012%2012%2012s2-5%204.5-5S21%2011%2021%2015a3%203%200%2001-5.4%201.8C14.3%2015%2013%2012%2012%2012s-2.3%203-3.6%204.8A3%203%200%20013%2015z%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%272.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / 62% no-repeat, #FFFFFF !important; }
html body #svc3#svc3#svc3 #meta-ads .s3-num svg > *{ visibility: hidden !important; }
html body #svc3#svc3#svc3 #social-media .s3-num{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%204.5h10a2.5%202.5%200%20012.5%202.5v5A2.5%202.5%200%200114%2014.5H9l-3.5%203v-3H4A2.5%202.5%200%20011.5%2012V7A2.5%202.5%200%20014%204.5z%27%20fill%3D%27%231A73E8%27%2F%3E%3Cpath%20d%3D%27M10%209h9.5A2.5%202.5%200%200122%2011.5V16a2.5%202.5%200%2001-2.5%202.5H19v2.6L16%2018.5h-6A2.5%202.5%200%20017.5%2016v-4.5A2.5%202.5%200%200110%209z%27%20fill%3D%27%23E0567A%27%2F%3E%3Ccircle%20cx%3D%2712.4%27%20cy%3D%2713.8%27%20r%3D%271.05%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2714.8%27%20cy%3D%2713.8%27%20r%3D%271.05%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2717.2%27%20cy%3D%2713.8%27%20r%3D%271.05%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center / 62% no-repeat, #FFFFFF !important; }
html body #svc3#svc3#svc3 #social-media .s3-num svg > *{ visibility: hidden !important; }
html body #svc3#svc3#svc3 #landing-pages .s3-num{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27%231A73E8%27%20stroke-width%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M6%203.8h12a2.2%202.2%200%20012.2%202.2v2.6H3.8V6A2.2%202.2%200%20016%203.8z%27%20fill%3D%27%231A73E8%27%2F%3E%3Crect%20x%3D%276.2%27%20y%3D%2711%27%20width%3D%278.5%27%20height%3D%271.9%27%20rx%3D%27.95%27%20fill%3D%27%2394A3B8%27%2F%3E%3Crect%20x%3D%276.2%27%20y%3D%2714.2%27%20width%3D%275.5%27%20height%3D%271.9%27%20rx%3D%27.95%27%20fill%3D%27%23CBD5E1%27%2F%3E%3Crect%20x%3D%2713.2%27%20y%3D%2715.6%27%20width%3D%275.2%27%20height%3D%273%27%20rx%3D%271.5%27%20fill%3D%27%2322C55E%27%2F%3E%3C%2Fsvg%3E") center / 62% no-repeat, #FFFFFF !important; }
html body #svc3#svc3#svc3 #landing-pages .s3-num svg > *{ visibility: hidden !important; }
html body #svc3#svc3#svc3 #websites .s3-num{ background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%272.4%27%20y%3D%273.6%27%20width%3D%2719.2%27%20height%3D%2716.8%27%20rx%3D%273%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27%230EA5E9%27%20stroke-width%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M2.4%208.6h19.2%27%20stroke%3D%27%230EA5E9%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%276.1%27%20r%3D%271%27%20fill%3D%27%23EF4444%27%2F%3E%3Ccircle%20cx%3D%278.4%27%20cy%3D%276.1%27%20r%3D%271%27%20fill%3D%27%23F59E0B%27%2F%3E%3Ccircle%20cx%3D%2711.2%27%20cy%3D%276.1%27%20r%3D%271%27%20fill%3D%27%2322C55E%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2714.4%27%20r%3D%273.6%27%20fill%3D%27none%27%20stroke%3D%27%231A73E8%27%20stroke-width%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M8.4%2014.4h7.2M12%2010.8c1.2%201%201.2%206.2%200%207.2-1.2-1-1.2-6.2%200-7.2z%27%20fill%3D%27none%27%20stroke%3D%27%231A73E8%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E") center / 62% no-repeat, #FFFFFF !important; }
html body #svc3#svc3#svc3 #websites .s3-num svg > *{ visibility: hidden !important; }
html body #ss1#ss1#ss1 .ss-after{ background: #004594 !important; box-shadow: none !important; }
html body #faq10#faq10#faq10 .gfaq-title{ background: #0A66C2 !important; }
html body #wcu8#wcu8#wcu8 .a-list > li::before{ background: #004594 !important; }

/* ---- small arrow keys: the first screen's card arrow ---- */
html body #svc3#svc3#svc3 .s3-svc a i, html body #svc3#svc3#svc3 :is(.s3-go, .s3-more) i{ background: #FFFFFF !important; color: #0760C6 !important; box-shadow: inset 0 0 0 1px #D6DCE4 !important; }
html body #svc3#svc3#svc3 .s3-more i :is(svg, svg *){ stroke: #0760C6 !important; }
html body #svc3#svc3#svc3 .s3-more:hover i{ box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body #svc3#svc3#svc3 a.s3-explore{ color: #0760C6 !important; }
html body #svc3#svc3#svc3 a.s3-explore svg{ background: #0760C6 !important; box-shadow: none !important; }
html body #svc3#svc3#svc3 a.s3-explore svg, html body #svc3#svc3#svc3 a.s3-explore svg *{ stroke: #FFFFFF !important; }
html body #svc3#svc3#svc3 .s3-svc{ background-image: none !important; }
/* the service preview pictures: their little windows and chips keep a hairline instead of a soft shadow */
html body #svc3#svc3#svc3 .s3-mock .s3-win{ box-shadow: none !important; border-color: #D8DFE9 !important; }
html body #svc3#svc3#svc3 .s3-mock .s3-rw > span:not([class]){ box-shadow: none !important; }
/* the chat screenshot frames: no shadow, no lift — their own thin border stays */
html body #hp1#hp1#hp1 figure.r4-cell, html body #hp1#hp1#hp1 figure.r4-cell:hover{ box-shadow: none !important; transform: none !important; border-color: #D3DAE6 !important; }
html body #wcu8#wcu8#wcu8 .wc-head i{ background: #FFFFFF !important; color: #0760C6 !important; box-shadow: inset 0 0 0 1px #D6DCE4 !important; }
html body #wcu8#wcu8#wcu8 .wc-head:hover i{ box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body #wcu8#wcu8#wcu8 .wc-head i::before, html body #wcu8#wcu8#wcu8 .wc-head i::after{ background: #0760C6 !important; border-color: #0760C6 !important; }
html body #wcu8#wcu8#wcu8 .wc-head .wc-cue, html body #wcu8#wcu8#wcu8 .wc-mid .wc-ben{ color: #505C6C !important; }
html body #wcu8#wcu8#wcu8 .wc-head[aria-expanded="true"] .wc-cue{ color: #0E1E35 !important; }

/* ---- actions ---- */
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.a-go, a.ab-btn){ background: #0760C6 !important; color: #FFFFFF !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.a-go, a.ab-btn):hover{ background: #004FA7 !important; }
/* the phone-only audit block repeats the hero's action */
html body #mact#mact#mact a.go{ background: #0760C6 !important; color: #FFFFFF !important; box-shadow: none !important; }
html body #mact#mact#mact a.go:hover{ background: #004FA7 !important; }
/* the Services hover preview (a floating tooltip) was near-black: it takes the identity cobalt */
html body div.s3-pop.s3-pop{ background: #004594 !important; box-shadow: none !important; }
html body #faq10#faq10#faq10 .gfaq-m::before, html body #faq10#faq10#faq10 .gfaq-m::after{ background: #0760C6 !important; }

/* ---- the two CTA banners: flat cobalt, white words, white button ---- */
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.hp-cta, .wc-close){ background: #004594 !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.hp-cta, .wc-close) :is(a.hp-ctab, a.wc-btn){ background: #FFFFFF !important; color: #0760C6 !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.hp-cta, .wc-close) :is(a.hp-ctab, a.wc-btn):hover{ background: #EAF2FD !important; }
/* 2026-09-16 (user): Client Proof — the evidence leads, and its CTA is a smaller closing panel INSIDE the section, not a banner of its own.
   · the masking note: its side padding was the page margin (--hp-edge) inside an 80ch box, so wherever that margin is large (1920px, or
     90% zoom on a 1440–1920 screen: 240–350px) the text had almost no width and ran one word per line — 170–380px of empty height. The
     box now keeps clear of the margin instead, so the section is one height (≈1032px) at every desktop width.
   · the CTA: centred, 880px at most (narrower than the chooser above it, wider than the note), one compact row, a smaller heading than any
     section title, the 44px key height for its button. Its colours stay the banner system's. The arrow was drawn white on the white
     button (invisible); it takes the label's blue. */
html body #hp1#hp1#hp1 .hp-note{ width: min(80ch, calc(100% - 2 * var(--hp-edge))) !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important;
  margin: 18px auto 0 !important; }
html body #hp1#hp1#hp1 .hp-cta{ width: min(880px, calc(100% - 2 * var(--hp-edge))) !important; margin: 24px auto 0 !important; padding: 18px 18px 18px 26px !important;
  gap: 12px 28px !important; border-radius: 12px !important; }
html body #hp1#hp1#hp1 .hp-ctatx{ flex: 1 1 320px !important; }
html body #hp1#hp1#hp1 .hp-ctah{ font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.25 !important; }
html body #hp1#hp1#hp1 .hp-ctap{ margin-top: 4px !important; max-width: 60ch !important; font-size: 13px !important; line-height: 1.5 !important; }
html body #hp1#hp1#hp1 .hp-cta a.hp-ctab{ min-height: 44px !important; padding: 0 18px !important; }
html body #hp1#hp1#hp1 .hp-cta a.hp-ctab svg{ stroke: currentColor !important; }
@media (max-width: 760px){
  html body #hp1#hp1#hp1 .hp-cta{ margin-top: 20px !important; padding: 16px !important; }
  html body #hp1#hp1#hp1 .hp-ctah{ font-size: 16px !important; }
  html body #hp1#hp1#hp1 .hp-ctap{ max-width: none !important; font-size: 12.5px !important; }
  html body #hp1#hp1#hp1 .hp-cta a.hp-ctab{ text-align: center !important; }
}

/* ---- small dark marks: pager dots (the current one wears the light) and the tab counts ---- */
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.ss-dots, .hp-dots) button{ background: #C9D3E0 !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.ss-dots, .hp-dots) button[aria-current="true"]{ background: #1F8FEA !important; }
html body #hp1#hp1#hp1 .hp-tab em{ background: #D3DAE6 !important; color: #384352 !important; }
html body #hp1#hp1#hp1 .hp-tab[aria-selected="true"] em{ background: #004594 !important; color: #FFFFFF !important; }

/* ---- choosers: Lit and Light ---- */

/* svc3 · html body #svc3#svc3#svc3 .s3-cat — the All Work tab component, sized to its content (the right side keeps a 6px slot for the light) */
html body #svc3#svc3#svc3 .s3-catrail{ display: flex !important; flex-wrap: nowrap !important; width: fit-content !important; max-width: 100% !important; padding: 5px !important; gap: 6px !important;
  border: 0 !important; border-radius: 12px !important; background: #CBD6E6 !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; overflow-x: auto !important; scrollbar-width: none; }
html body #svc3#svc3#svc3 .s3-catrail::-webkit-scrollbar{ display: none; }
html body #svc3#svc3#svc3 .s3-cat{ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 44px !important; min-height: 44px !important;
  padding: 0 20px 0 14px !important; gap: 9px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: #E8ECF3 !important; color: #384352 !important;
  font-size: 14.5px !important; font-weight: 650 !important; line-height: 1.25 !important; white-space: nowrap !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; transform: none !important; }
html body #svc3#svc3#svc3 .s3-cat::after{ background: transparent !important; box-shadow: none !important; }
html body #svc3#svc3#svc3 .s3-cat:not([aria-current="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body #svc3#svc3#svc3 .s3-cat[aria-current="true"], html body #svc3#svc3#svc3 .s3-cat[aria-current="true"]:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; color: #004594 !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important; }
html body #svc3#svc3#svc3 .s3-cat :is(span, b, strong){ color: inherit !important; font-weight: inherit !important; }
html body #svc3#svc3#svc3 .s3-cat :is(svg, svg *){ stroke: currentColor !important; }
html body #svc3#svc3#svc3 .s3-cat:focus-visible{ outline: 2px solid #0760C6 !important; outline-offset: 2px !important; }
@media (max-width: 760px){ html body #svc3#svc3#svc3 .s3-cat{ font-size: 13.5px !important; padding: 0 19px 0 13px !important; } html body #svc3#svc3#svc3 .s3-cat[aria-current="true"]{ font-weight: 650 !important; } }
@media (max-width: 760px){ html body #svc3#svc3#svc3 .s3-catrail{ width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important;
  padding: 8px 18px !important; scroll-padding-inline: 18px; } html body #svc3#svc3#svc3 .s3-catrail::after{ content: "" !important; flex: 0 0 12px !important; } }

/* svc3 · html body #svc3#svc3#svc3 .s3-tab — the All Work tab component, sized to its content (the right side keeps a 6px slot for the light) */
html body #svc3#svc3#svc3 .s3-tabs{ display: flex !important; flex-wrap: nowrap !important; width: fit-content !important; max-width: 100% !important; padding: 4px !important; gap: 5px !important;
  border: 0 !important; border-radius: 12px !important; background: #CBD6E6 !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; overflow-x: auto !important; scrollbar-width: none; }
html body #svc3#svc3#svc3 .s3-tabs::-webkit-scrollbar{ display: none; }
html body #svc3#svc3#svc3 .s3-tab{ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 34px !important; min-height: 34px !important;
  padding: 0 17px 0 12px !important; gap: 7px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: #E8ECF3 !important; color: #384352 !important;
  font-size: 13px !important; font-weight: 650 !important; line-height: 1.25 !important; white-space: nowrap !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; transform: none !important; }
html body #svc3#svc3#svc3 .s3-tab::after{ background: transparent !important; box-shadow: none !important; }
html body #svc3#svc3#svc3 .s3-tab:not([aria-pressed="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body #svc3#svc3#svc3 .s3-tab[aria-pressed="true"], html body #svc3#svc3#svc3 .s3-tab[aria-pressed="true"]:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; color: #004594 !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important; }
html body #svc3#svc3#svc3 .s3-tab :is(span, b, strong){ color: inherit !important; font-weight: inherit !important; }
html body #svc3#svc3#svc3 .s3-tab :is(svg, svg *){ stroke: currentColor !important; }
html body #svc3#svc3#svc3 .s3-tab:focus-visible{ outline: 2px solid #0760C6 !important; outline-offset: 2px !important; }
@media (max-width: 760px){ html body #svc3#svc3#svc3 .s3-tab{ font-size: 12.5px !important; padding: 0 19px 0 13px !important; } html body #svc3#svc3#svc3 .s3-tab[aria-pressed="true"]{ font-weight: 650 !important; } }

/* hp1 · html body #hp1#hp1#hp1 .hp-tab — the All Work tab component, sized to its content (the right side keeps a 6px slot for the light) */
html body #hp1#hp1#hp1 .hp-tabs{ display: flex !important; flex-wrap: nowrap !important; width: fit-content !important; max-width: 100% !important; padding: 5px !important; gap: 6px !important;
  border: 0 !important; border-radius: 12px !important; background: #CBD6E6 !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; overflow-x: auto !important; scrollbar-width: none; }
html body #hp1#hp1#hp1 .hp-tabs::-webkit-scrollbar{ display: none; }
html body #hp1#hp1#hp1 .hp-tab{ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 44px !important; min-height: 44px !important;
  padding: 0 20px 0 14px !important; gap: 9px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: #E8ECF3 !important; color: #384352 !important;
  font-size: 14.5px !important; font-weight: 650 !important; line-height: 1.25 !important; white-space: nowrap !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; transform: none !important; }
html body #hp1#hp1#hp1 .hp-tab::after{ background: transparent !important; box-shadow: none !important; }
html body #hp1#hp1#hp1 .hp-tab:not([aria-selected="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body #hp1#hp1#hp1 .hp-tab[aria-selected="true"], html body #hp1#hp1#hp1 .hp-tab[aria-selected="true"]:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; color: #004594 !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important; }
html body #hp1#hp1#hp1 .hp-tab :is(span, b, strong){ color: inherit !important; font-weight: inherit !important; }
html body #hp1#hp1#hp1 .hp-tab :is(svg, svg *){ stroke: currentColor !important; }
html body #hp1#hp1#hp1 .hp-tab:focus-visible{ outline: 2px solid #0760C6 !important; outline-offset: 2px !important; }
@media (max-width: 760px){ html body #hp1#hp1#hp1 .hp-tab{ font-size: 13.5px !important; padding: 0 19px 0 13px !important; } html body #hp1#hp1#hp1 .hp-tab[aria-selected="true"]{ font-weight: 650 !important; } }
@media (max-width: 760px){ html body #hp1#hp1#hp1 .hp-tabs{ width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important;
  padding: 8px 18px !important; scroll-padding-inline: 18px; } html body #hp1#hp1#hp1 .hp-tabs::after{ content: "" !important; flex: 0 0 12px !important; } }

/* indwork · html body #indwork#indwork#indwork .v03-segb — the All Work tab component, sized to its content (the right side keeps a 6px slot for the light) */
html body #indwork#indwork#indwork .v03-seg{ display: flex !important; flex-wrap: nowrap !important; width: fit-content !important; max-width: 100% !important; padding: 5px !important; gap: 6px !important;
  border: 0 !important; border-radius: 12px !important; background: #CBD6E6 !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; overflow-x: auto !important; scrollbar-width: none; }
html body #indwork#indwork#indwork .v03-seg::-webkit-scrollbar{ display: none; }
html body #indwork#indwork#indwork .v03-segb{ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 44px !important; min-height: 44px !important;
  padding: 0 20px 0 14px !important; gap: 9px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: #E8ECF3 !important; color: #384352 !important;
  font-size: 14.5px !important; font-weight: 650 !important; line-height: 1.25 !important; white-space: nowrap !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; transform: none !important; }
html body #indwork#indwork#indwork .v03-segb::after{ background: transparent !important; box-shadow: none !important; }
html body #indwork#indwork#indwork .v03-segb:not(.is-on):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body #indwork#indwork#indwork .v03-segb.is-on, html body #indwork#indwork#indwork .v03-segb.is-on:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; color: #004594 !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important; }
html body #indwork#indwork#indwork .v03-segb :is(span, b, strong){ color: inherit !important; font-weight: inherit !important; }
html body #indwork#indwork#indwork .v03-segb :is(svg, svg *){ stroke: currentColor !important; }
html body #indwork#indwork#indwork .v03-segb:focus-visible{ outline: 2px solid #0760C6 !important; outline-offset: 2px !important; }
@media (max-width: 760px){ html body #indwork#indwork#indwork .v03-segb{ font-size: 13.5px !important; padding: 0 19px 0 13px !important; } html body #indwork#indwork#indwork .v03-segb.is-on{ font-weight: 650 !important; } }

/* about5 · html body #about5#about5#about5 .ab-ftab — the All Work tab component, sized to its content (the right side keeps a 6px slot for the light) */
html body #about5#about5#about5 .ab-ftabs{ display: flex !important; flex-wrap: nowrap !important; width: fit-content !important; max-width: 100% !important; padding: 5px !important; gap: 6px !important;
  border: 0 !important; border-radius: 12px !important; background: #CBD6E6 !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; overflow-x: auto !important; scrollbar-width: none; }
html body #about5#about5#about5 .ab-ftabs::-webkit-scrollbar{ display: none; }
html body #about5#about5#about5 .ab-ftab{ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 44px !important; min-height: 44px !important;
  padding: 0 20px 0 14px !important; gap: 9px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: #E8ECF3 !important; color: #384352 !important;
  font-size: 14.5px !important; font-weight: 650 !important; line-height: 1.25 !important; white-space: nowrap !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; transform: none !important; }
html body #about5#about5#about5 .ab-ftab::after{ background: transparent !important; box-shadow: none !important; }
html body #about5#about5#about5 .ab-ftab:not([aria-selected="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body #about5#about5#about5 .ab-ftab[aria-selected="true"], html body #about5#about5#about5 .ab-ftab[aria-selected="true"]:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; color: #004594 !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important; }
html body #about5#about5#about5 .ab-ftab :is(span, b, strong){ color: inherit !important; font-weight: inherit !important; }
html body #about5#about5#about5 .ab-ftab :is(svg, svg *){ stroke: currentColor !important; }
html body #about5#about5#about5 .ab-ftab:focus-visible{ outline: 2px solid #0760C6 !important; outline-offset: 2px !important; }
@media (max-width: 760px){ html body #about5#about5#about5 .ab-ftab{ font-size: 13.5px !important; padding: 0 19px 0 13px !important; } html body #about5#about5#about5 .ab-ftab[aria-selected="true"]{ font-weight: 650 !important; } }
@media (max-width: 760px){ html body #about5#about5#about5 .ab-ftabs{ max-width: calc(100% - 20px) !important; } }

/* the industries list: the sidebar is the tray, every industry a key (bare icons, like the All Work keys) */
html body #indwork#indwork#indwork .v03-rail{ display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 8px !important; background: #CBD6E6 !important; box-shadow: none !important; }
html body #indwork#indwork#indwork .v03-row{ display: flex !important; align-items: center !important; width: 100% !important; flex: 0 0 auto !important; min-height: 52px !important; padding: 6px 14px 6px 8px !important;
  margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: #E8ECF3 !important; color: #384352 !important; box-shadow: inset 0 0 0 1px #D3DAE6 !important; transform: none !important; }
html body #indwork#indwork#indwork .v03-row:not(.is-on):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body #indwork#indwork#indwork .v03-row.is-on, html body #indwork#indwork#indwork .v03-row.is-on:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; color: #004594 !important; box-shadow: inset 0 0 0 1px #8FB8F2 !important; }
html body #indwork#indwork#indwork .v03-row:focus-visible{ outline: 2px solid #0760C6 !important; outline-offset: 2px !important; }
html body #indwork#indwork#indwork .v03-row .v03-nm{ color: inherit !important; font-weight: 650 !important; }
html body #indwork#indwork#indwork .v03-row.is-on .v03-nm{ font-weight: 700 !important; }
html body #indwork#indwork#indwork .v03-row .iw2-icn{ background: transparent !important; border-color: transparent !important; color: inherit !important; box-shadow: none !important;
  width: 26px !important; height: 26px !important; flex: 0 0 26px !important; }
html body #indwork#indwork#indwork .v03-row .iw2-icn :is(svg, svg *){ stroke: currentColor !important; }
@media (max-width: 760px){
  html body #indwork#indwork#indwork .v03-rail{ flex-direction: row !important; padding: 6px !important; border-radius: 12px !important; }
  html body #indwork#indwork#indwork .v03-row{ width: auto !important; min-height: 44px !important; padding: 0 19px 0 8px !important; }
  html body #indwork#indwork#indwork .v03-row .v03-nm{ font-size: 13.5px !important; }
}
html body #about5#about5#about5 .ab-ftab :is(svg, svg *){ stroke: currentColor !important; }
/* About card: a pale header band holds the tabs (like the Industries card); the panel below has no second border */
html body #about5#about5#about5 .ab-card{ background: #F7F9FE !important; }
html body #about5#about5#about5 .ab-ftabs{ margin: 12px 16px !important; }
html body #about5#about5#about5 .ab-split{ border: 0 !important; border-top: 1px solid #DCE3EE !important; border-radius: 0 0 13px 13px !important; }
@media (max-width: 760px){ html body #about5#about5#about5 .ab-ftabs{ margin: 10px 10px !important; } }
/* a two-option switch never scrolls: on the smallest phones its keys share the width */
@media (max-width: 380px){
  html body #indwork#indwork#indwork .v03-top{ padding-left: 8px !important; padding-right: 8px !important; }
  html body #indwork#indwork#indwork .v03-seg{ width: 100% !important; padding: 4px !important; gap: 4px !important; overflow: visible !important; }
  html body #indwork#indwork#indwork .v03-segb{ flex: 1 1 0 !important; min-width: 0 !important; padding: 0 6px !important; font-size: 12.5px !important; }
}

/* ---- accordions: open is bright white with a cobalt edge (no light — open is not selected) ---- */
/* corner continuity: items are concentric with their 12px box (18px padding) — the blue edge of an open item flows round a 10px corner */
html body #faq10#faq10#faq10 .gfaq-item{ border-color: #E1E7F0 !important; box-shadow: none !important; transform: none !important; border-radius: 10px !important; }
html body #faq10#faq10#faq10 .gfaq-item .gfaq-q{ border-radius: 9px !important; }
html body #faq10#faq10#faq10 .gfaq-item .gfaq-q[aria-expanded="true"]{ border-radius: 9px 9px 0 0 !important; }
html body #faq10#faq10#faq10 .gfaq-item.is-open{ background: #FFFFFF !important; border-color: #8FB8F2 !important; box-shadow: none !important; }
html body #wcu8#wcu8#wcu8 .wc-sheet{ border-radius: 0 !important; box-shadow: inset 0 1px 0 #E1E7F0 !important; }
html body #wcu8#wcu8#wcu8 .wc-sheet:first-child{ box-shadow: none !important; }
html body #wcu8#wcu8#wcu8 .wc-sheet .wc-head{ border-radius: 0 !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.wc-btn, a.hp-ctab, a.a-go, a.ab-btn, a.go), html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.wc-btn, a.hp-ctab, a.a-go, a.ab-btn, a.go):hover{ transform: none !important; }
/* text links: a taller tap area on phones, with no visual change */
@media (max-width: 760px){ html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.ab-lnk, a.ss-url){ padding-block: 12px !important; margin-block: -12px !important; } }
/* the Services category bar: a white band behind it; a divider only while it is stuck under the header */
html body #svc3#svc3#svc3 .s3-catwrap{ background: #FFFFFF !important; }
html body #svc3#svc3#svc3 .s3-catwrap.is-stuck{ box-shadow: inset 0 -1px 0 #DCE3EE !important; }
/* 2026-09-16 (user): the category bar (Google Ads · Meta Ads · Social Media · Landing Pages · Websites) scrolls with the page — only
   the header's two rows stay fixed. Nothing else about the bar changes. The service summary that stays pinned while its cards scroll
   (desktop) now pins just under the header: it used to sit the stuck bar's height (64px) lower. */
html body #svc3#svc3#svc3 .s3-catwrap{ position: relative !important; top: auto !important; }
html body #svc3#svc3#svc3 .s3-info{ top: calc(var(--barh) + 14px) !important; }
/* the open standard: its blue edge is drawn on its own layer, inset from the card sides, so the corners can be round (10px) */
html body #wcu8#wcu8#wcu8 .wc-sheet.is-open, html body #wcu8#wcu8#wcu8 .wc-sheet.is-open:first-child{ box-shadow: none !important; outline: none !important; }
html body #wcu8#wcu8#wcu8 .wc-sheet.is-open::before{ content: "" !important; position: absolute !important; inset: 6px 8px !important; border-radius: 10px !important;
  box-shadow: inset 0 0 0 1.5px #8FB8F2 !important; pointer-events: none !important; z-index: 2 !important; background: none !important; }
html body #wcu8#wcu8#wcu8 :is(.vs-a, .vs-b){ border-radius: 8px !important; }
html body #faq10#faq10#faq10 .gfaq-q[aria-expanded="true"]{ background: #FFFFFF !important; }
html body #wcu8#wcu8#wcu8 .wc-head[aria-expanded="true"]{ background: #FFFFFF !important; }

/* ---- footer: the header's cobalt, flat; its white card keeps no shadow ---- */
html body #sfoot#sfoot#sfoot{ background: #004594 !important; background-image: none !important; }
html body #sfoot#sfoot#sfoot .f-cols{ box-shadow: none !important; }
html body #sfoot#sfoot#sfoot .f-cols h3{ color: #0A66C2 !important; }
html body #sfoot#sfoot#sfoot .f-base .f-soon{ background: rgba(255,255,255,.16) !important; color: rgba(255,255,255,.88) !important; }
html body #sfoot#sfoot#sfoot .f-soc a{ background: rgba(255,255,255,.14) !important; color: #FFFFFF !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) !important; }
html body #sfoot#sfoot#sfoot .f-soc a:hover{ background: rgba(255,255,255,.24) !important; }
/* phones: the two link columns get a real gutter, and each link keeps a little space before its status dot or Soon chip */
@media (max-width: 760px){ html body #sfoot#sfoot#sfoot .f-cols{ column-gap: 22px !important; } html body #sfoot#sfoot#sfoot .f-cols li{ column-gap: 8px !important; } }

/* ---- first-render stability (2026-09-16) ----
   · the section row is one height in every state: below 1024px the current link is a 5px-padded key, so a plain link gets the same block
     padding — otherwise the header measured 97px before a link was current and 104px after, and the first screen slid down 7px when a
     script corrected it
   · nothing in the footer may be wider than the phone: the contact text is a flex item whose minimum was its longest word, so the support
     e-mail made the page 343px wide on a 320px phone (Chrome then lays the page out wider than the screen and zooms it out on a device
     switch). It now wraps inside its column — at the @ first (<wbr> in the markup) — and the legal row wraps its last item. Both only act
     when a line does not fit, so every width where it already fitted is unchanged. */
@media (max-width: 1023px){ html body header.bar #navKids#navKids a.kid{ padding-top: 5px !important; padding-bottom: 5px !important; } }
/* · up to 900px the current link is a key with 10px sides and bold words, so moving the highlight (the page script claims Overview
     while the header is parsed, the scroll spy moves it on a refresh part-way down) widened one link by 21px and moved every link
     after it. Now every link has the key's sides and reserves the width of its bold form (a hidden bold copy of its label, data-t,
     under the visible one); the gap between links drops by the same 20px, so the words keep their spacing. The highlight only
     changes colour. (Above 900px the links already share their sides; bold still adds 1–4px there, while scrolling only.) */
@media (max-width: 900px){
  html body header.bar #navKids#navKids{ column-gap: 0px !important; }
  html body header.bar #navKids#navKids a.kid{ padding-left: 10px !important; padding-right: 10px !important; }
  html body header.bar #navKids#navKids a.kid[data-t]{ display: inline-flex !important; flex-direction: column !important; align-items: center !important; }
  html body header.bar #navKids#navKids a.kid[data-t]::before{ content: attr(data-t); order: 1; height: 0; overflow: hidden; visibility: hidden;
    font-weight: 700; pointer-events: none; }
}
@media (max-width: 760px){
  html body #sfoot#sfoot#sfoot .f-ci > span{ min-width: 0 !important; overflow-wrap: anywhere !important; }
  html body #sfoot#sfoot#sfoot .f-lg{ flex-wrap: wrap !important; row-gap: 8px !important; }
}
/* under 360px a footer link column is ~113px wide: a long service name and its Soon chip cannot sit side by side, and the chip ran
   20–30px into the next column (touching its links). The chip drops under the name there; from 360px nothing changes. */
@media (max-width: 359px){ html body #sfoot#sfoot#sfoot .f-cols .f-na{ flex-wrap: wrap !important; row-gap: 4px !important; } }

/* ---- shadows off, thin edges kept (generated by _n4q_full_edges.py) ---- */
/* GENERATED by _n4q_full_edges.py from 132852 element-states — old colours to approved roles, shadows to thin edges */
html body #about5#about5 a.ab-lnk path{ stroke: #0760C6 !important; }
html body #about5#about5 a.ab-lnk svg{ stroke: #0760C6 !important; }
html body #about5#about5 div.ab-acts a.ab-lnk{ color: #0760C6 !important; }
html body #about5#about5 div.ab-body div.ab-acts{ border-color: #E1E7F0 !important; }
html body #about5#about5 div.ab-body div.ab-strip{ border-color: #E1E7F0 !important; }
html body #about5#about5 div.ab-idt h3.ab-nm{ color: #0E1E35 !important; }
html body #about5#about5 div.ab-idt p.ab-legal{ color: #0760C6 !important; }
html body #about5#about5 div.ab-idt span.ab-pill{ background-color: #EAF1FB !important; color: #0E1E35 !important; }
html body #about5#about5 div.ab-panel p.ab-pnote{ color: #3F4A5A !important; }
html body #about5#about5 div.ab-pr span.ab-k{ color: #5B6778 !important; }
html body #about5#about5 div.ab-pr span.ab-v{ color: #0E1E35 !important; }
html body #about5#about5 div.ab-sti b{ color: #0E1E35 !important; }
html body #about5#about5 div.ab-sti span{ color: #566274 !important; }
html body #about5#about5 div.ab-strip div.ab-sti{ box-shadow: 1px 0px 0px 0px inset #E1E7F0 !important; }
html body #about5#about5 div.ab-viz p.ab-vz-cap{ color: #566274 !important; }
html body #about5#about5 div.ab-vz-cities span.ab-vz-city{ color: #0E1E35 !important; }
html body #about5#about5 div.ab-vz-num b{ color: #0760C6 !important; }
html body #about5#about5 div.ab-vz-num span{ color: #566274 !important; }
html body #about5#about5 div.ab-vz-team span.ab-vz-av{ box-shadow: 0px 0px 0px 1px inset #E1E7F0 !important; }
html body #about5#about5 div.ab-vz-team span.ab-vz-av.ab-lead{ box-shadow: 0px 0px 0px 1.5px inset #0760C6 !important; }
html body #about5#about5 div.ab-wrap div.ab-card.ab-outer{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #about5#about5 h2.hd-title span.ab-dot{ color: #0760C6 !important; }
html body #about5#about5 span.ab-pill path{ stroke: #0E1E35 !important; }
html body #about5#about5 span.ab-pill svg{ stroke: #0E1E35 !important; }
html body #about5#about5 span.ab-v span.ab-m{ color: #0E1E35 !important; }
html body #about5#about5 span.ab-vz-av circle{ stroke: #566274 !important; }
html body #about5#about5 span.ab-vz-av path{ stroke: #566274 !important; }
html body #about5#about5 span.ab-vz-av svg{ stroke: #566274 !important; }
html body #about5#about5 span.ab-vz-av.ab-lead circle{ stroke: #0760C6 !important; }
html body #about5#about5 span.ab-vz-av.ab-lead path{ stroke: #0760C6 !important; }
html body #about5#about5 span.ab-vz-av.ab-lead svg{ stroke: #0760C6 !important; }
html body #about5#about5 span.ab-vz-city circle{ stroke: #0760C6 !important; }
html body #about5#about5 span.ab-vz-city path{ stroke: #0760C6 !important; }
html body #about5#about5 span.ab-vz-city svg{ stroke: #0760C6 !important; }
html body #faq10#faq10 button.gfaq-q span.gfaq-t{ color: #0E1E35 !important; }
html body #faq10#faq10 div.gfaq-ai div.gfaq-ai-in{ border-color: #E1E7F0 !important; }
html body #faq10#faq10 div.gfaq-ai-in div.gfaq-ab{ color: #0760C6 !important; }
html body #faq10#faq10 div.gfaq-body p{ color: #505C6C !important; }
html body #faq10#faq10 div.gfaq-wrap div.gfaq-box{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #faq10#faq10 div.gfaq-wrap h2.gfaq-title::after{ background-color: #D3DAE6 !important; }
html body #hp1#hp1 p.hp-note{ color: #5B6778 !important; }
html body #indwork#indwork div.iw2-wrap div.v03-card{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #indwork#indwork div.v03-head h3.v03-name{ color: #0E1E35 !important; }
html body #indwork#indwork div.v03-head p.v03-desc{ color: #505C6C !important; }
html body #indwork#indwork div.v03-head p.v03-label{ color: #5B6778 !important; }
html body #indwork#indwork div.v03-line span.iw2-chip{ border-color: #DCE3EE !important; color: #505C6C !important; }
html body #indwork#indwork div.v03-line span.iw2-chip.v03-snap{ border-color: #DCE3EE !important; color: #505C6C !important; }
html body #mact#mact{ border-color: #E1E7F0 !important; }
html body #mact#mact p.fine{ color: #3F4A5A !important; }
html body #mact#mact p.fine b{ color: #0760C6 !important; }
html body #mact#mact p.fine i{ color: #566274 !important; }
html body #mact#mact p.line{ color: #0E1E35 !important; }
html body #mact#mact p.line i{ color: #0760C6 !important; }
html body #sfoot#sfoot a.f-id b{ color: #0E1E35 !important; }
html body #sfoot#sfoot a.f-id span.f-mk{ box-shadow: 0px 0px 0px 3px #D6E0F0 !important; }
html body #sfoot#sfoot div.f-cols a{ color: #0E1E35 !important; }
html body #sfoot#sfoot div.f-cols p.f-lede{ color: #505C6C !important; }
html body #sfoot#sfoot div.f-cols span.f-badge{ border-color: #D6E0F0 !important; color: #505C6C !important; }
html body #sfoot#sfoot div.f-cols span.f-na{ color: #5B6778 !important; }
html body #sfoot#sfoot p.f-ci a{ color: #0E1E35 !important; }
html body #sfoot#sfoot p.f-ci circle{ stroke: #0760C6 !important; }
html body #sfoot#sfoot p.f-ci path{ stroke: #0760C6 !important; }
html body #sfoot#sfoot p.f-ci rect{ stroke: #0760C6 !important; }
html body #sfoot#sfoot p.f-ci span{ color: #505C6C !important; }
html body #sfoot#sfoot p.f-ci svg{ background-color: #EEF2F8 !important; stroke: #0760C6 !important; }
html body #sfoot#sfoot span.f-badge path{ stroke: #0760C6 !important; }
html body #sfoot#sfoot span.f-badge svg{ stroke: #0760C6 !important; }
html body #sfoot#sfoot span.f-na span.f-soon{ color: #5B6778 !important; }
html body #ss1#ss1 div.ss-before p.ss-k{ color: #5B6778 !important; }
html body #ss1#ss1 div.ss-before span.ss-u{ color: #5B6778 !important; }
html body #ss1#ss1 div.ss-body a.ss-url{ color: #0760C6 !important; }
/* 2026-09-25: the client's website is plain text now (span.ss-url): the trade's grey, no link hover */
html body #ss1#ss1 div.ss-body span.ss-url{ color: #526079 !important; text-decoration: none !important; cursor: auto; }
html body #ss1#ss1 div.ss-body h3.ss-name{ color: #0E1E35 !important; }
html body #ss1#ss1 div.ss-body p.ss-say{ border-color: #E1E7F0 !important; color: #505C6C !important; }
html body #ss1#ss1 div.ss-rail article.ss-card{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #svc3#svc3 button.s3-more span{ color: #0E1E35 !important; }
html body #svc3#svc3 div.s3-cbody button.s3-more{ border-color: #E1E7F0 !important; }
html body #svc3#svc3 div.s3-ctop h3{ color: #0E1E35 !important; }
html body #svc3#svc3 div.s3-ctop p.s3-cdesc{ color: #505C6C !important; }
html body #svc3#svc3 div.s3-info a.s3-explore{ border-color: #E1E7F0 !important; }
html body #svc3#svc3 div.s3-info h2{ color: #0E1E35 !important; }
html body #svc3#svc3 div.s3-numrow span.s3-badge{ background-color: #EAF1FB !important; color: #0E1E35 !important; }
html body #svc3#svc3 div.s3-rows section.s3-row.s3-s1{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #svc3#svc3 div.s3-rows section.s3-row.s3-s2{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #svc3#svc3 div.s3-rows section.s3-row.s3-s3{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #svc3#svc3 div.s3-rows section.s3-row.s3-s4{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #svc3#svc3 div.s3-rows section.s3-row.s3-s5{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #svc3#svc3 div.s3-spec span.s3-sk{ color: #566274 !important; }
html body #svc3#svc3 div.s3-spec span.s3-sv{ color: #0E1E35 !important; }
html body #svc3#svc3 div.s3-specs.s3-scope div.s3-spec{ border-color: #E1E7F0 !important; }
html body #svc3#svc3 div.s3-tabwrap span.s3-tabnote{ color: #5B6778 !important; }
html body #svc3#svc3 div.s3-track article.s3-card{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #svc3#svc3 p.s3-bestfor b{ color: #0E1E35 !important; }
html body #svc3#svc3 p.s3-bestfor span{ color: #3F4A5A !important; }
html body #svc3#svc3 section.s3-svc{ box-shadow: 0px 1px 0px 0px inset #E1E7F0, 0px -1px 0px 0px inset #E1E7F0 !important; }
html body #svc3#svc3 span.s3-num svg{ stroke: #0760C6 !important; }
html body #wcu8#wcu8 a.a-more path{ stroke: #0E1E35 !important; }
html body #wcu8#wcu8 a.a-more svg{ stroke: #0E1E35 !important; }
html body #wcu8#wcu8 button.wc-opq span.wc-opic{ background-color: #EAF0F8 !important; }
html body #wcu8#wcu8 button.wc-opq span.wc-opt{ color: #0E1E35 !important; }
html body #wcu8#wcu8 div.a-alt a{ color: #0E1E35 !important; }
html body #wcu8#wcu8 div.a-alt path{ fill: #0E1E35 !important; stroke: #0E1E35 !important; }
html body #wcu8#wcu8 div.a-alt svg{ fill: #0E1E35 !important; stroke: #0E1E35 !important; }
html body #wcu8#wcu8 div.a-vs div.vs-a{ box-shadow: 0px 0px 0px 1px inset #E1E7F0 !important; color: #566274 !important; }
html body #wcu8#wcu8 div.a-vs div.vs-b{ box-shadow: 0px 0px 0px 1.5px inset #0760C6 !important; color: #0E1E35 !important; }
html body #wcu8#wcu8 div.vs-a p.a-sub{ color: #566274 !important; }
html body #wcu8#wcu8 div.vs-b b{ color: #0E1E35 !important; }
html body #wcu8#wcu8 div.vs-b p.a-sub{ color: #566274 !important; }
html body #wcu8#wcu8 div.wc-in div.wc-proofinlay{ box-shadow: 0px 0px 0px 1px inset #E1E7F0 !important; }
html body #wcu8#wcu8 div.wc-opin a.a-more{ color: #0E1E35 !important; }
html body #wcu8#wcu8 div.wc-opin p.a-fine{ color: #566274 !important; }
html body #wcu8#wcu8 div.wc-opin p.a-note{ box-shadow: 0px 0px 0px 1px inset #E1E7F0 !important; color: #3F4A5A !important; }
html body #wcu8#wcu8 div.wc-opin p.a-p{ color: #0E1E35 !important; }
html body #wcu8#wcu8 div.wc-proofinlay div.wc-scene{ box-shadow: 0px 0px 0px 1px inset #E1E7F0 !important; }
html body #wcu8#wcu8 div.wc-proofinlay p{ color: #3F4A5A !important; }
html body #wcu8#wcu8 div.wc-scene text{ color: #566274 !important; fill: #0E1E35 !important; }
html body #wcu8#wcu8 div.wt-panelbox p.a-note{ box-shadow: 0px 0px 0px 1px inset #E1E7F0 !important; color: #3F4A5A !important; }
html body #wcu8#wcu8 div.wt-panelbox p.a-p{ color: #0E1E35 !important; }
html body #wcu8#wcu8 div.wt-pathbox a.a-more{ color: #0E1E35 !important; }
html body #wcu8#wcu8 div.wt-pathbox p.a-p{ color: #0E1E35 !important; }
html body #wcu8#wcu8 div.wt-tipbox p.a-p{ color: #0E1E35 !important; }
html body #wcu8#wcu8 div.wt-wrap div.wc-reg{ border-color: #D3DAE6 !important; box-shadow: none !important; }
html body #wcu8#wcu8 p.a-note b{ color: #0E1E35 !important; }
html body #wcu8#wcu8 p.a-p b{ color: #0E1E35 !important; }
html body #wcu8#wcu8 span.aw-t i{ color: #566274 !important; }
html body #wcu8#wcu8 span.wc-mid h3.wc-t{ color: #0E1E35 !important; }
html body #wcu8#wcu8 span.wc-mid span.wc-cat{ color: #0760C6 !important; }
html body #wcu8#wcu8 span.wc-opic circle{ stroke: #0760C6 !important; }
html body #wcu8#wcu8 span.wc-opic path{ stroke: #0760C6 !important; }
html body #wcu8#wcu8 span.wc-opic rect{ stroke: #0760C6 !important; }
html body #wcu8#wcu8 span.wc-opic svg{ stroke: #0760C6 !important; }
html body #wcu8#wcu8 span.wc-opt i{ color: #566274 !important; }
html body #wcu8#wcu8 ul.a-list b{ color: #0E1E35 !important; }
html body #wcu8#wcu8 ul.a-list li{ color: #3F4A5A !important; }
html body #wcu8#wcu8 ul.a-steps b{ color: #0E1E35 !important; }
html body #wcu8#wcu8 ul.a-steps div{ color: #3F4A5A !important; }
html body #wcu8#wcu8 ul.a-steps li::before{ background-color: #0760C6 !important; }
html body #wcu8#wcu8 ul.a-who li::before{ background-color: #0760C6 !important; }
html body #wcu8#wcu8 ul.a-who span.aw-t{ color: #3F4A5A !important; }

/* ===== white-blue-duo-n4q/n4q-svc-accent.css ===== */
/* Our Services — service box accent: 24 Framed Tray (approved 2026-09-17).
   GENERATED by _n4q_svcmax_h2ze.py --live 24; joined into /doctor/home-system/home.css by home_apply.py. Do not edit. */

html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row::before, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row::after{ content: none !important; }

/* the service containers: straight and clean — square corners at every width */
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row{ border-radius: 0 !important; }
/* the service cards follow their container (user: "if need, remove the curve under the service cards — decide as a senior"): a square box
   holding round cards breaks the page's own corner rule (a nested corner is never rounder than its container), and the Signal Bureau look
   these colours come from was square throughout. So the cards and their picture area (cut to the card's round top) go square too, and so
   does the service's logo tile — an identity plate, not a control (the Bureau "squared it off like everything else").
   Controls keep the site-wide shapes: the scope chevron key, the filter tray and keys, the badge. Size and spacing unchanged. */
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card{ border-radius: 0 !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card .s3-mock{ border-radius: 0 !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-num{ border-radius: 0 !important; }

html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row{ --sx-tile: 44px; --sx-top: calc(var(--rp) + 8px); }
@media (max-width: 1180px){ html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row{ --sx-top: var(--rp); } }
@media (max-width: 760px){ html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row{ --sx-tile: 34px; --sx-top: 20px; } }

html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card:hover{ transform: none !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row::before, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row::after, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card .s3-mock{ transition-duration: .2s !important; }
@media (prefers-reduced-motion: reduce){ html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row *, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row::before, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row::after{ transition: none !important; } }

/* 24 · FRAMED TRAY — 21's frame and stepped side; the tray sits inside the 2px frame, opened by a 2px tone rule. Current: full-colour frame, deeper tray. */
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card{ border-color: color-mix(in oklab, var(--hue) 28%, #FFFFFF) !important; transition-property: border-color !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card:hover{ border-color: color-mix(in oklab, var(--hue) 62%, #FFFFFF) !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card:has(.s3-more[aria-expanded="true"]), html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card:has(:focus-visible){ border-color: var(--hue) !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card .s3-mock{ border-bottom-color: color-mix(in oklab, var(--hue) 18%, #FFFFFF) !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card .s3-more{ border-top-color: color-mix(in oklab, var(--hue) 18%, #FFFFFF) !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card .s3-more i{ border-color: color-mix(in oklab, var(--hue) 40%, #FFFFFF) !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card .s3-more:hover i, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card .s3-more[aria-expanded="true"] i{ border-color: var(--hue) !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card .s3-spec + .s3-spec{ border-top-color: color-mix(in oklab, var(--hue) 18%, #FFFFFF) !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-card .s3-plc{ border-bottom-color: color-mix(in oklab, var(--hue) 18%, #FFFFFF) !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-num{ box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hue) 40%, #FFFFFF) !important; }
@media (max-width: 760px){ html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-explore{ border-top-color: color-mix(in oklab, var(--hue) 18%, #FFFFFF) !important; } }

html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row{ border-color: color-mix(in oklab, var(--hue) 45%, #FFFFFF) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hue) 45%, #FFFFFF) !important;  transition-property: border-color, box-shadow, background-color !important; }
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="google-ads"][aria-current="true"]) #s3rows > #google-ads,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="meta-ads"][aria-current="true"]) #s3rows > #meta-ads,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="social-media"][aria-current="true"]) #s3rows > #social-media,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="landing-pages"][aria-current="true"]) #s3rows > #landing-pages,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="websites"][aria-current="true"]) #s3rows > #websites{ border-color: var(--hue) !important; box-shadow: inset 0 0 0 1px var(--hue) !important;  }

html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row::before{ content: "" !important; display: block !important; position: absolute !important; z-index: 1 !important; pointer-events: none !important;
  right: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; left: -1px !important; top: -1px !important; bottom: -1px !important; width: 8px !important;
  background: var(--hue) !important; box-shadow: 4px 0 0 0 color-mix(in oklab, var(--hue) 24%, #FFFFFF) !important; transition-property: width, box-shadow !important; }
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="google-ads"][aria-current="true"]) #s3rows > #google-ads::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="meta-ads"][aria-current="true"]) #s3rows > #meta-ads::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="social-media"][aria-current="true"]) #s3rows > #social-media::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="landing-pages"][aria-current="true"]) #s3rows > #landing-pages::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="websites"][aria-current="true"]) #s3rows > #websites::before{ width: 10px !important; box-shadow: 4px 0 0 0 color-mix(in oklab, var(--hue) 42%, #FFFFFF) !important; }
@media (max-width: 760px){
  html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row::before{ width: 5px !important; box-shadow: 3px 0 0 0 color-mix(in oklab, var(--hue) 24%, #FFFFFF) !important; }
  html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="google-ads"][aria-current="true"]) #s3rows > #google-ads::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="meta-ads"][aria-current="true"]) #s3rows > #meta-ads::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="social-media"][aria-current="true"]) #s3rows > #social-media::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="landing-pages"][aria-current="true"]) #s3rows > #landing-pages::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="websites"][aria-current="true"]) #s3rows > #websites::before{ width: 5px !important; box-shadow: 3px 0 0 0 color-mix(in oklab, var(--hue) 42%, #FFFFFF) !important; }
}

html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox{ position: relative !important; z-index: 0 !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox::before, html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox::after{ content: "" !important; display: block !important; position: absolute !important;
  pointer-events: none !important; border-radius: 0 !important; }
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox::before{ z-index: -1 !important; left: calc(clamp(22px, 2.4vw, 40px) / -2) !important;
  right: calc(2px - var(--rp)) !important; top: calc(2px - var(--rp)) !important; bottom: calc(2px - var(--rp)) !important;
  transition: background-color .2s ease, box-shadow .2s ease !important; }
@media (max-width: 1180px){ html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox::before{ left: calc(2px - var(--rp)) !important; top: -12px !important; } }
@media (max-width: 760px){ html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox::before{ left: calc(2px - 16px) !important; right: calc(2px - 16px) !important;
  top: -7px !important; bottom: -9px !important; } }

html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox::before{ background: var(--soft) !important; background: color-mix(in oklab, var(--hue) 10%, #FFFFFF) !important; }
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="google-ads"][aria-current="true"]) #s3rows > #google-ads .s3-sliderbox::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="meta-ads"][aria-current="true"]) #s3rows > #meta-ads .s3-sliderbox::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="social-media"][aria-current="true"]) #s3rows > #social-media .s3-sliderbox::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="landing-pages"][aria-current="true"]) #s3rows > #landing-pages .s3-sliderbox::before,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="websites"][aria-current="true"]) #s3rows > #websites .s3-sliderbox::before{ background: color-mix(in oklab, var(--hue) 15%, #FFFFFF) !important; }

html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox::after{ z-index: 1 !important; left: calc(clamp(22px, 2.4vw, 40px) / -2) !important; width: 2px !important;
  top: calc(2px - var(--rp)) !important; bottom: calc(2px - var(--rp)) !important; background: color-mix(in oklab, var(--hue) 48%, #FFFFFF) !important; }
@media (max-width: 1180px){ html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox::after{ left: calc(2px - var(--rp)) !important; right: calc(2px - var(--rp)) !important;
  width: auto !important; top: -12px !important; bottom: auto !important; height: 2px !important; } }
@media (max-width: 760px){ html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-sliderbox::after{ left: calc(2px - 16px) !important; right: calc(2px - 16px) !important; top: -7px !important; } }
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="google-ads"][aria-current="true"]) #s3rows > #google-ads .s3-sliderbox::after,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="meta-ads"][aria-current="true"]) #s3rows > #meta-ads .s3-sliderbox::after,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="social-media"][aria-current="true"]) #s3rows > #social-media .s3-sliderbox::after,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="landing-pages"][aria-current="true"]) #s3rows > #landing-pages .s3-sliderbox::after,
html body #svc3#svc3#svc3#svc3:has(#s3cats .s3-cat[data-target="websites"][aria-current="true"]) #s3rows > #websites .s3-sliderbox::after{ background: color-mix(in oklab, var(--hue) 70%, #FFFFFF) !important; }

/* 2026-09-17 user: "shadow also remove in horizontally showing services under cards". The cards have no shadow; what reads as one is the
   card strip's fading right edge (a mask, from 761px up). It is removed: the strip ends on a straight cut at the box's padding edge, at
   full strength, like every other edge in the box. Nothing moves — a mask never affects layout. */
html body #svc3#svc3#svc3#svc3 #s3rows > .s3-row .s3-trackwrap{ -webkit-mask-image: none !important; mask-image: none !important; }

/* ===== white-blue-duo-n4q/n4q-faq-band.css ===== */
/* Homepage FAQ — option 02 "FAQ Header Band" (approved 2026-09-17).
   GENERATED by faq-h5wb/_faq_h5wb_live.py; joined into /doctor/home-system/home.css by home_apply.py. Do not edit.
   Engine: /doctor/home-faq-band/faq-band.js. Preview: faq-h5wb/dmd-home-faq-h5wb.html #fqx-v02. */

html body #faq10#faq10#faq10#faq10{
  --fb-mark: 44px !important; --fb-mk: 28px !important; --fb-cg: 16px !important; --fb-px: 20px !important; --fb-py: 14px !important; --fb-q: 16.5px !important; --fb-a: 15.5px !important;
  --fb-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace !important; --fb-ease: cubic-bezier(.2, .7, .2, 1) !important;
}

/* the block keeps its place in the column (the Google Ads sheets used to centre it) and the preview's ink */
html body #faq10#faq10#faq10#faq10 .gfaq-wrap{ margin-left: auto !important; margin-right: auto !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-box{ color: #0E1E35 !important; }

/* the FAQ title is the box's header band, with the count */
html body #faq10#faq10#faq10#faq10 .gfaq-title{
  position: static !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;
  width: auto !important; max-width: none !important; min-height: 56px !important; height: auto !important; margin: 0 !important; padding: 0 var(--fb-px) 0 calc(var(--fb-px) + 2px) !important;
  border: 0 !important; border-radius: 0 !important; background: #004594 !important; box-shadow: none !important; transform: none !important;
  color: #FFFFFF !important; font-family: inherit !important; font-size: 14px !important; font-weight: 800 !important; line-height: normal !important; letter-spacing: .22em !important; text-transform: uppercase !important; text-align: left !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-title::before{ content: none !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-title::after{
  content: attr(data-count) !important; display: block !important; position: static !important; flex: none !important; width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; background: none !important;
  font-size: 13px !important; font-weight: 650 !important; letter-spacing: .02em !important; text-transform: none !important; color: #BFD4F2 !important;
}

/* one white sheet of ruled questions */
html body #faq10#faq10#faq10#faq10 .gfaq-box{
  position: relative !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important;
  background: #FFFFFF !important; border: 1px solid #D3DAE6 !important; border-top: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-box::before, html body #faq10#faq10#faq10#faq10 .gfaq-box::after{ content: none !important; display: none !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-scroll{ height: auto !important; max-height: none !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-item{
  position: relative !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important;
  transition: background-color .18s ease !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-item::before, html body #faq10#faq10#faq10#faq10 .gfaq-item::after{ content: none !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-item + .gfaq-item{ border-top: 1px solid #E1E7F0 !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-item.is-open{ background: #F3F7FC !important; }

/* header row: [Q.n] question [+/−] */
html body #faq10#faq10#faq10#faq10 .gfaq-q{
  position: relative !important; z-index: 1 !important; display: grid !important; grid-template-columns: var(--fb-mark) minmax(0, 1fr) var(--fb-mk) !important; column-gap: var(--fb-cg) !important;
  align-items: start !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: calc(var(--fb-py) + 4px) var(--fb-px) !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #0E1E35 !important; text-align: left !important;
  font: inherit !important; letter-spacing: inherit !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; -webkit-user-select: none !important; user-select: none !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-q:focus{ outline: none !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-q:focus-visible{ outline: 2px solid #0760C6 !important; outline-offset: -2px !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-qb, html body #faq10#faq10#faq10#faq10 .gfaq-ab{
  position: static !important; display: grid !important; place-items: center !important; flex: none !important; width: var(--fb-mark) !important; min-width: 0 !important; height: var(--fb-mk) !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  font-family: var(--fb-mono) !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .02em !important; text-transform: none !important;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-qb{ background: #FFFFFF !important; color: #384352 !important; box-shadow: inset 0 0 0 1px #C9D3E1 !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-qb{ background: #004594 !important; color: #FFFFFF !important; box-shadow: none !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-ab{ background: #0A66C2 !important; color: #FFFFFF !important; box-shadow: none !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-t{
  display: block !important; margin: 0 !important; padding: calc((var(--fb-mk) - var(--fb-q) * 1.45) / 2) 0 0 !important;
  font-size: var(--fb-q) !important; font-weight: 650 !important; line-height: 1.45 !important; letter-spacing: -.01em !important; color: #0E1E35 !important; text-wrap: pretty !important;
  transition: color .16s ease !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-t{ color: #004594 !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-m{
  position: relative !important; display: block !important; top: auto !important; right: auto !important; width: var(--fb-mk) !important; height: var(--fb-mk) !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #0760C6 !important; box-shadow: inset 0 0 0 1px #D6DCE4 !important; transform: none !important;
  transition: box-shadow .16s ease, background-color .16s ease !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-m::before, html body #faq10#faq10#faq10#faq10 .gfaq-m::after{
  content: "" !important; display: block !important; position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; width: 12px !important; height: 1.75px !important; margin: -.875px 0 0 -6px !important;
  border: 0 !important; border-radius: 0 !important; background: currentColor !important; opacity: 1 !important; transform: none !important; transition: transform .28s var(--fb-ease) !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-m::after{ transform: rotate(90deg) !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-m::after{ transform: rotate(0deg) !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-q:hover .gfaq-m{ box-shadow: inset 0 0 0 1px #8E9AAD !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-m{ background: #FFFFFF !important; color: #0760C6 !important; box-shadow: inset 0 0 0 1.5px #0760C6 !important; }

/* seam and body row: [A] answer — the same columns as the question, so both share their edges */
html body #faq10#faq10#faq10#faq10 .gfaq-a{
  display: grid !important; grid-template-rows: 0fr !important; height: auto !important; max-height: none !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; visibility: hidden !important;
  transition: grid-template-rows .32s var(--fb-ease), visibility 0s linear .32s !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-item.is-open > .gfaq-a{ grid-template-rows: 1fr !important; visibility: visible !important; transition: grid-template-rows .34s var(--fb-ease), visibility 0s !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-ai{ min-height: 0 !important; height: auto !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-ai-in{
  display: grid !important; grid-template-columns: var(--fb-mark) minmax(0, 1fr) var(--fb-mk) !important; column-gap: var(--fb-cg) !important; align-items: start !important;
  margin: 0 var(--fb-px) !important; padding: var(--fb-py) 0 calc(var(--fb-py) + 8px) !important;
  border: 0 !important; border-top: 1px solid #D3DAE6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  opacity: 0 !important; transition: opacity .18s ease !important;
}
html body #faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-ai-in{ opacity: 1 !important; transition: opacity .26s ease .08s !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-body{ grid-column: 2 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
html body #faq10#faq10#faq10#faq10 .gfaq-body p{
  max-width: 72ch !important; margin: 0 !important; padding: calc((var(--fb-mk) - var(--fb-a) * 1.7) / 2) 0 0 !important;
  font-size: var(--fb-a) !important; line-height: 1.7 !important; color: #384352 !important;
}

html body #faq10#faq10#faq10#faq10 .no-anim, html body #faq10#faq10#faq10#faq10 .no-anim *, html body #faq10#faq10#faq10#faq10 .no-anim *::before, html body #faq10#faq10#faq10#faq10 .no-anim *::after{ transition: none !important; }
@media (prefers-reduced-motion: reduce){ html body #faq10#faq10#faq10#faq10 .gfaq-wrap *, html body #faq10#faq10#faq10#faq10 .gfaq-wrap *::before, html body #faq10#faq10#faq10#faq10 .gfaq-wrap *::after{ transition: none !important; } }

@media (max-width: 760px){
  html body #faq10#faq10#faq10#faq10{ --fb-mark: 38px !important; --fb-mk: 26px !important; --fb-cg: 12px !important; --fb-px: 14px !important; --fb-py: 12px !important; --fb-q: 16px !important; --fb-a: 15px !important; }
  html body #faq10#faq10#faq10#faq10 .gfaq-qb, html body #faq10#faq10#faq10#faq10 .gfaq-ab{ font-size: 10.5px !important; }
  html body #faq10#faq10#faq10#faq10 .gfaq-title{ min-height: 48px !important; font-size: 12.5px !important; }
  html body #faq10#faq10#faq10#faq10 .gfaq-title::after{ font-size: 12px !important; }
}

/* ===== white-blue-duo-n4q/n4q-wcu-bands.css ===== */
/* Why Choose Us — version 9 "Standard Bands" (applied 2026-09-17).
   GENERATED by colour-system-20-k3w/white-blue-duo-n4q/wcu-k5wy/r2/_apply_v9.py from r2.css (pruned to what version 9 uses);
   joined into /doctor/home-system/home.css by home_apply.py. Do not edit — change r2.src.css and run the build + this script. */
html body #wcu8#wcu8#wcu8#wcu8.k5-sec{ padding: 0 !important; border-top: 0 !important; background: #FFFFFF !important; }
html body #wcu8#wcu8.k5-sec [hidden]{ display: none !important; }
html body #wcu8#wcu8.k5-sec .k5v{ padding-block: clamp(64px, 7vw, 100px); --k5-rp: clamp(20px, 2.3vw, 34px); --k5-gap: clamp(22px, 2.4vw, 40px);
  --k5-ink: #0E1E35; --k5-ink2: #505C6C; --k5-act: #0760C6; --k5-navy: #004594; }
@media (max-width: 760px){
  html body #wcu8#wcu8.k5-sec .k5v{ --k5-rp: 16px; }
}
html body #wcu8#wcu8.k5-sec .k5-box{ position: relative; z-index: 0; background: #FFFFFF; border: 1px solid color-mix(in oklab, var(--hue) 45%, #FFFFFF); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hue) 45%, #FFFFFF);
  border-radius: 0; margin: clamp(26px, 2.8vw, 40px) var(--wcu-edge) 0; padding: var(--k5-rp); }
html body #wcu8#wcu8.k5-sec .k5-box::before{ content: ""; position: absolute; z-index: 2; pointer-events: none; left: -1px; top: -1px; bottom: -1px; width: 8px;
  background: var(--hue); box-shadow: 4px 0 0 0 color-mix(in oklab, var(--hue) 24%, #FFFFFF); }
@media (max-width: 760px){
  html body #wcu8#wcu8.k5-sec .k5-box::before{ width: 5px; box-shadow: 3px 0 0 0 color-mix(in oklab, var(--hue) 24%, #FFFFFF); }
}
html body #wcu8#wcu8.k5-sec .k5-cat{ font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  color: color-mix(in oklab, var(--hue) 84%, #000000); }
html body #wcu8#wcu8.k5-sec .k5-t{ font-size: 17.5px; font-weight: 650; line-height: 1.28; letter-spacing: -.016em; color: var(--k5-ink); margin: 7px 0 0; text-wrap: pretty; }
html body #wcu8#wcu8.k5-sec .k5-ben{ font-size: 13.5px; line-height: 1.55; color: var(--k5-ink2); margin: 7px 0 0; }
html body #wcu8#wcu8.k5-sec .k5-tile svg{ display: block; width: 100%; height: 100%; }
html body #wcu8#wcu8.k5-sec [aria-expanded="true"] > i{ background: var(--hue); border-color: var(--hue); color: #FFFFFF; }
html body #wcu8#wcu8.k5-sec .k5-chev{ width: 13px; height: 13px; color: inherit; transition: transform .24s ease; }
html body #wcu8#wcu8.k5-sec [aria-expanded="true"] .k5-chev{ transform: rotate(180deg); }
html body #wcu8#wcu8.k5-sec .k5-stmt{ font-size: 14.5px; line-height: 1.6; color: var(--k5-ink); font-weight: 500; }
html body #wcu8#wcu8.k5-sec .k5-qs{ margin-top: 14px; border-top: 1px solid color-mix(in oklab, var(--hue) 18%, #FFFFFF); }
html body #wcu8#wcu8.k5-sec .k5-q{ border-bottom: 1px solid color-mix(in oklab, var(--hue) 18%, #FFFFFF); }
html body #wcu8#wcu8.k5-sec .k5-qb{ width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 0; text-align: left; }
html body #wcu8#wcu8.k5-sec .k5-qi{ flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--hue) 10%, #FFFFFF); color: var(--hue); }
html body #wcu8#wcu8.k5-sec .k5-qi svg{ width: 15px; height: 15px; color: inherit; }
html body #wcu8#wcu8.k5-sec .k5-ql{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body #wcu8#wcu8.k5-sec .k5-ql b{ font-size: 13.5px; font-weight: 650; color: var(--k5-ink); line-height: 1.3; }
html body #wcu8#wcu8.k5-sec .k5-ql i{ font-style: normal; font-size: 11.5px; color: var(--k5-ink2); line-height: 1.3; }
html body #wcu8#wcu8.k5-sec .k5-qx{ margin-left: auto; flex: none; position: relative; width: 12px; height: 12px; }
html body #wcu8#wcu8.k5-sec .k5-qx::before, html body #wcu8#wcu8.k5-sec .k5-qx::after{ content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--k5-ink); }
html body #wcu8#wcu8.k5-sec .k5-qx::after{ transform: rotate(90deg); transition: transform .2s ease; }
html body #wcu8#wcu8.k5-sec .k5-qb[aria-expanded="true"] .k5-qx::after{ transform: rotate(0deg); }
html body #wcu8#wcu8.k5-sec .k5-qb[aria-expanded="true"] .k5-ql b{ color: color-mix(in oklab, var(--hue) 84%, #000000); }
html body #wcu8#wcu8.k5-sec .k5-qa{ font-size: 12.5px; line-height: 20px; color: #34405A; }
html body #wcu8#wcu8.k5-sec .k5-qa .wc-opin{ padding: 0 0 14px 40px; }
html body #wcu8#wcu8.k5-sec .k5-qa .a-note{ background: color-mix(in oklab, var(--hue) 8%, #FFFFFF) !important; }
html body #wcu8#wcu8.k5-sec .k5-qa .wc-opin .a-go{ border-radius: 6px; }
html body #wcu8#wcu8.k5-sec .k5-cta{ background: var(--k5-navy); color: #FFFFFF; padding: 22px 24px; display: flex; align-items: center; gap: 24px; min-width: 0; }
html body #wcu8#wcu8.k5-sec .k5-cta .k5-cta-tx{ flex: 1; min-width: 0; }
html body #wcu8#wcu8.k5-sec .k5-cta h3{ margin: 9px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.034em; line-height: 1.15; color: #FFFFFF !important; }
html body #wcu8#wcu8.k5-sec .k5-cta .wc-cp{ margin: 7px 0 0; }
html body #wcu8#wcu8.k5-sec .k5-cta .wc-btn{ flex: none; margin: 0 !important; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 20px;
  background: #FFFFFF !important; color: var(--k5-act) !important; border-radius: 6px; font-size: 14px; font-weight: 700; box-shadow: none !important;
  transform: none !important; text-decoration: none; }
html body #wcu8#wcu8.k5-sec .k5-cta .wc-btn:hover{ background: #EAF1FB !important; }
html body #wcu8#wcu8.k5-sec .k5-cta .wc-btn svg{ width: 16px; height: 16px; color: inherit !important; }
html body #wcu8#wcu8.k5-sec .k5-rc i{ margin-left: 0; flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: #FFFFFF; border: 1px solid color-mix(in oklab, var(--hue) 40%, #FFFFFF); color: var(--k5-act); transition: background .2s ease, border-color .2s ease; }
html body #wcu8#wcu8.k5-sec .k5-rh:hover .k5-rc i{ border-color: var(--hue); }
html body #wcu8#wcu8.k5-sec [aria-expanded="true"] .k5-rc i{ background: var(--hue); border-color: var(--hue); color: #FFFFFF; }
html body #wcu8#wcu8.k5-sec .k5r9-box{ padding: 0; }
html body #wcu8#wcu8.k5-sec .k5-row{ background: #FFFFFF; border: 1px solid color-mix(in oklab, var(--hue) 28%, #FFFFFF); transition: border-color .2s ease; min-width: 0; }
html body #wcu8#wcu8.k5-sec .k5-row:hover{ border-color: color-mix(in oklab, var(--hue) 62%, #FFFFFF); }
html body #wcu8#wcu8.k5-sec .k5-row.k5-open{ border-color: var(--hue); }
html body #wcu8#wcu8.k5-sec .k5-rh{ width: 100%; display: grid; align-items: center; gap: 22px; padding: 10px 18px 10px 10px; text-align: left; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-tile{ display: block; background: color-mix(in oklab, var(--hue) 8%, #FFFFFF); border: 1px solid color-mix(in oklab, var(--hue) 18%, #FFFFFF); padding: 3px; }
html body #wcu8#wcu8.k5-sec .k5-rl{ display: flex; flex-direction: column; min-width: 0; }
html body #wcu8#wcu8.k5-sec .k5-rl .k5-t{ font-size: 16.5px; margin-top: 5px; }
html body #wcu8#wcu8.k5-sec .k5-rh .k5-ben{ margin: 0; }
html body #wcu8#wcu8.k5-sec .k5-rc{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 12.4px; font-weight: 700; color: #031D40; text-align: right; }
@media (max-width: 1180px){
  html body #wcu8#wcu8.k5-sec .k5-rh{ grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) 180px;
    gap: 16px; padding: 8px 14px 8px 8px; }
  html body #wcu8#wcu8.k5-sec .k5-rh .k5-tile{ height: 48px; padding: 2px; }
  html body #wcu8#wcu8.k5-sec .k5-rl .k5-t{ font-size: 15px; margin-top: 4px; }
  html body #wcu8#wcu8.k5-sec .k5-rh .k5-ben{ font-size: 13px; line-height: 1.45; }
}
@media (max-width: 900px){
  html body #wcu8#wcu8.k5-sec .k5-rh{ grid-template-columns: 80px minmax(0, 1fr) auto; gap: 4px 16px; }
  html body #wcu8#wcu8.k5-sec .k5-rh .k5-tile{ grid-row: span 2; align-self: start; height: 44px; }
  html body #wcu8#wcu8.k5-sec .k5-rh .k5-ben{ grid-column: 2; }
  html body #wcu8#wcu8.k5-sec .k5-rc{ grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 760px){
  html body #wcu8#wcu8.k5-sec .k5-rh{ grid-template-columns: 60px minmax(0, 1fr); gap: 5px 12px; padding: 9px 12px 8px 9px; }
  html body #wcu8#wcu8.k5-sec .k5-rh .k5-tile{ grid-row: 1; height: 34px; padding: 2px; }
  html body #wcu8#wcu8.k5-sec .k5-rl .k5-t{ font-size: 15px; margin-top: 3px; }
  html body #wcu8#wcu8.k5-sec .k5-rh .k5-ben{ grid-column: 1 / -1; font-size: 13px; line-height: 1.5; }
  html body #wcu8#wcu8.k5-sec .k5-rc{ grid-column: 1 / -1; grid-row: auto; justify-content: space-between; text-align: left; padding-top: 6px; border-top: 1px solid color-mix(in oklab, var(--hue) 18%, #FFFFFF); }
}
@media (max-width: 760px){
  html body #wcu8#wcu8.k5-sec .k5-cta{ flex-direction: column; align-items: stretch; padding: 20px !important; gap: 16px; }
  html body #wcu8#wcu8.k5-sec .k5-cta h3{ font-size: 19px; }
  html body #wcu8#wcu8.k5-sec .k5-cta .wc-btn{ justify-content: center; }
}
html body #wcu8#wcu8.k5-sec .k5r9-list{ display: flex; flex-direction: column; gap: 8px; }
html body #wcu8#wcu8.k5-sec .k5v, html body #wcu8#wcu8.k5-sec .k5v [data-grp]{ --hue: #0760C6; }
html body #wcu8#wcu8.k5-sec .k5-cat{ color: #0760C6; }
html body #wcu8#wcu8.k5-sec .k5-box{ border-color: #C9D9EF; box-shadow: none; }
html body #wcu8#wcu8.k5-sec .k5-box::before{ width: 6px; box-shadow: none; background: #0760C6; }
@media (max-width: 760px){
  html body #wcu8#wcu8.k5-sec .k5-box::before{ width: 4px; }
}
html body #wcu8#wcu8.k5-sec .k5-tile, html body #wcu8#wcu8.k5-sec .k5-row .k5-tile{ background: #F3F7FC; border-color: #E1E7F0; }
html body #wcu8#wcu8.k5-sec .k5-row{ border-color: #D3DAE6; }
html body #wcu8#wcu8.k5-sec .k5-row:hover{ border-color: #9FB6D6; }
html body #wcu8#wcu8.k5-sec .k5-row.k5-open{ border-color: #004594; }
html body #wcu8#wcu8.k5-sec .k5-rc{ border-color: #E1E7F0; }
html body #wcu8#wcu8.k5-sec .k5-rc i{ border-color: #C9D9EF; }
html body #wcu8#wcu8.k5-sec [aria-expanded="true"] > i, html body #wcu8#wcu8.k5-sec [aria-expanded="true"] .k5-rc i{ background: #004594; border-color: #004594; color: #FFFFFF; }
html body #wcu8#wcu8.k5-sec .k5-x{ border-top: 1px solid #E1E7F0; margin-top: 12px; padding-top: 12px; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-stmt{ font-size: 14px; line-height: 1.6; color: #0E1E35; font-weight: 400; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qs{ margin-top: 8px; border-top: 0; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-q{ border-bottom: 0; border-top: 1px solid #E8EDF4; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-q:first-child{ border-top: 0; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qb{ padding: 10px 0; gap: 10px; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qi{ width: 18px; height: 18px; background: none; color: #6B7A8F; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qi svg{ width: 16px; height: 16px; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-ql b{ font-size: 13.5px; font-weight: 650; color: #0E1E35; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-ql i{ font-size: 11.5px; color: #6B7A8F; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qb[aria-expanded="true"] .k5-ql b{ color: #004594; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qx::before, html body #wcu8#wcu8.k5-sec .k5-x .k5-qx::after{ background: #004594; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qa .wc-opin{ padding: 0 0 12px 28px; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qa .a-note{ background: #F3F7FC !important; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-x{ margin: 0 18px 0 168px; padding: 12px 0 16px; max-width: 860px; }
@media (max-width: 1180px){
  html body #wcu8#wcu8.k5-sec .k5-row .k5-x{ margin-left: 108px; margin-right: 14px; }
}
@media (max-width: 900px){
  html body #wcu8#wcu8.k5-sec .k5-row .k5-x{ margin-left: 104px; }
}
@media (max-width: 760px){
  html body #wcu8#wcu8.k5-sec .k5-row .k5-x{ margin: 0 12px 0 10px; padding: 10px 0 12px; }
  html body #wcu8#wcu8.k5-sec .k5-x .k5-qa .wc-opin{ padding-left: 0; }
}
html body #wcu8#wcu8.k5-sec .k5-box{ border: 0; box-shadow: none; background: transparent; }
html body #wcu8#wcu8.k5-sec .k5-box::before{ content: none; }
html body #wcu8#wcu8.k5-sec .k5-row{ border-color: #DDE5F0; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-q{ border-top: 0; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qb{ padding: 9px 10px; margin: 0 -10px; width: calc(100% + 20px); }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qb:hover{ background: #F3F7FC; }
html body #wcu8#wcu8.k5-sec .k5-x{ border-top-color: #E6ECF4; }
html body #wcu8#wcu8.k5-sec .k5-x{ padding-top: 14px; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-promise{ position: relative; margin: 0; padding: 12px 14px 12px 44px; background: #EEF3FA; font-size: 14px; line-height: 1.55;
  color: #0E1E35; font-weight: 500; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-promise::before{ content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.1 1.6 2.6-.2.9 2.5 2.2 1.4-.8 2.5.8 2.5-2.2 1.4-.9 2.5-2.6-.2L10 17.1l-2.1-1.6-2.6.2-.9-2.5-2.2-1.4.8-2.5-.8-2.5 2.2-1.4.9-2.5 2.6.2z' fill='%23004594'/%3E%3Cpath d='M6.6 9.6l2.3 2.3 4.6-4.8' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qs{ display: flex; flex-direction: column; gap: 6px; margin-top: 10px; border: 0; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-q{ background: #F5F8FC; border: 0; transition: background-color .2s ease; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-q:first-child{ border: 0; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-q:hover{ background: #EEF3FA; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-q:has(> [aria-expanded="true"]){ background: #EEF3FA; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qb{ margin: 0; width: 100%; padding: 11px 14px; gap: 12px; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qb:hover{ background: transparent; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qi{ width: 28px; height: 28px; background: #FFFFFF; color: #0760C6; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qi svg{ width: 15px; height: 15px; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-ql b{ font-size: 13.5px; font-weight: 700; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-ql i{ font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B7A8F; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qx{ width: 26px; height: 26px; background: #FFFFFF; }
html body #wcu8#wcu8.k5-sec .k5-x .k5-qx::before, html body #wcu8#wcu8.k5-sec .k5-x .k5-qx::after{ left: 8px; right: 8px; top: 12px; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x .k5-qa .wc-opin{ padding: 2px 14px 14px 54px !important; font-size: 13.5px; line-height: 1.6; color: #34405A; }
@media (max-width: 760px){
  html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x .k5-qa .wc-opin{ padding: 0 12px 12px !important; }
  html body #wcu8#wcu8.k5-sec .k5-x .k5-qb{ padding: 10px 12px; }
}
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x :is(.wt-panelbox, .wt-tipbox, .wt-pathbox){ background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x p.a-p{ margin: 0 0 8px !important; font-size: 13.5px !important; line-height: 1.6 !important; color: #34405A !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x p.a-p:last-child{ margin-bottom: 0 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x b{ color: #0E1E35 !important; font-weight: 700 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x :is(ul.a-list, ul.a-steps, ul.a-who){ display: grid !important; gap: 6px !important; margin: 8px 0 !important; padding: 0 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x :is(ul.a-list, ul.a-steps, ul.a-who) > li{ list-style: none !important; position: relative; margin: 0 !important;
  padding: 0 0 0 26px !important; border: 0 !important; background: none !important; font-size: 13px !important; line-height: 1.55 !important; color: #34405A !important; display: block !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x :is(ul.a-list, ul.a-steps, ul.a-who) > li::before{ content: "" !important; display: block !important; position: absolute !important;
  left: 0 !important; top: 2px !important; width: 16px !important; height: 16px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23DCE8F8'/%3E%3Cpath d='M4.3 8.2l2.4 2.4 5-5.2' fill='none' stroke='%230760C6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x ul.a-steps > li::before{ top: 5px !important; left: 3px !important; width: 10px !important; height: 10px !important; background: #0760C6 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x ul.a-steps > li > span{ display: none !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x ul.a-steps > li > div{ display: block !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x ul.a-who > li{ padding-left: 34px !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x ul.a-who > li::before{ width: 24px !important; height: 24px !important; top: 0 !important;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='7' r='3.4' fill='%230760C6'/%3E%3Cpath d='M3.5 17c.8-3.6 3.4-5.4 6.5-5.4s5.7 1.8 6.5 5.4z' fill='%230760C6'/%3E%3C/svg%3E") center / 16px no-repeat !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x ul.a-who span.aw-d{ display: none !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x ul.a-who span.aw-t{ display: block !important; font-weight: 700 !important; color: #0E1E35 !important; font-size: 13px !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x ul.a-who span.aw-t i{ display: block !important; font-style: normal !important; font-weight: 400 !important; color: #5B6B80 !important; font-size: 12.5px !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-vs{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 6px !important;
  margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-vs :is(div.vs-a, div.vs-b){ margin: 0 !important; padding: 10px 12px !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; font-size: 13px !important; line-height: 1.55 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-vs div.vs-a{ background: #FFFFFF !important; color: #5B6B80 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-vs div.vs-b{ background: #FFFFFF !important; color: #34405A !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-vs p.a-sub{ display: flex !important; align-items: center; gap: 7px; margin: 0 0 6px !important; font-size: 10.5px !important;
  font-weight: 750 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #6B7A8F !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-vs div.vs-b p.a-sub{ color: #004594 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-vs p.a-sub::before{ content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23E3E7EE'/%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%236B7A8F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-vs div.vs-b p.a-sub::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23004594'/%3E%3Cpath d='M4.3 8.2l2.4 2.4 5-5.2' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x p.a-note{ margin: 8px 0 0 !important; padding: 8px 10px 8px 32px !important; border: 0 !important; border-radius: 0 !important;
  font-size: 12.5px !important; line-height: 1.5 !important; color: #34405A !important;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23EAF1FB'/%3E%3Cpath d='M8 7v4.5M8 4.6v.1' stroke='%230760C6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 9px 9px / 15px no-repeat !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x p.a-fine{ margin: 8px 0 0 !important; font-size: 11.5px !important; line-height: 1.5 !important; color: #6B7A8F !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x a.a-more{ display: inline-flex !important; align-items: center; gap: 8px !important; height: 34px; margin-top: 6px !important; padding: 0 12px !important;
  background: #FFFFFF !important; border: 1px solid #C9D9EF !important; border-radius: 6px !important; color: #004594 !important; font-size: 13px !important; font-weight: 700 !important;
  text-decoration: none !important; box-shadow: none !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x a.a-more:hover{ border-color: #0760C6 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x :is(a.a-more, a.a-go, div.a-alt) svg{ width: 14px !important; height: 14px !important; color: inherit !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-act{ display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; margin: 8px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x a.a-go{ display: inline-flex !important; align-items: center; gap: 8px; height: 36px !important; padding: 0 14px !important; background: #0760C6 !important;
  color: #FFFFFF !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-alt{ display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 0 !important; }
html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-alt a{ display: inline-flex !important; align-items: center; gap: 6px !important; height: 36px !important; padding: 0 12px !important;
  background: #FFFFFF !important; border: 1px solid #C9D9EF !important; border-radius: 6px !important; color: #004594 !important; font-size: 12.5px !important; font-weight: 650 !important; text-decoration: none !important; }
html body #wcu8#wcu8.k5-sec .k5-x{ container-type: inline-size; }
@container (max-width: 360px){
  html body #wcu8#wcu8.k5-sec .k5-x .k5-qi{ display: none; }
  html body #wcu8#wcu8.k5-sec .k5-x .k5-qb{ padding: 10px 12px; }
  html body #wcu8#wcu8.k5-sec .k5-x .k5-ql i{ letter-spacing: .05em; }
  html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x .k5-qa .wc-opin{ padding: 0 12px 12px !important; }
  html body #wcu8#wcu8.k5-sec .k5-x .k5-promise{ padding: 10px 12px 10px 36px; font-size: 13.5px; }
  html body #wcu8#wcu8.k5-sec .k5-x .k5-promise::before{ left: 11px; top: 12px; width: 16px; height: 16px; }
  html body #wcu8#wcu8#wcu8#wcu8.k5-sec .k5-x div.a-vs{ grid-template-columns: minmax(0, 1fr) !important; }
}
html body #wcu8#wcu8.k5-sec .k5-x .k5-ql i{ font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6B7A8F; }
html body #wcu8#wcu8.k5-sec .k5-row > .k5-rh{ display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 14px 18px 14px 14px; }
html body #wcu8#wcu8.k5-sec .k5-row > .k5-rh > .k5-tile{ grid-row: auto; grid-column: auto; align-self: center; height: 74px; padding: 4px; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-rl{ display: flex; flex-direction: column; min-width: 0; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-rl .k5-cat{ font-size: 10px; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-rl .k5-t{ margin-top: 5px; font-size: 17px; font-weight: 700; line-height: 1.3; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-rl .k5-ben{ grid-column: auto; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #505C6C; max-width: 70ch; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-rc{ grid-column: auto; grid-row: auto; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 14px;
  border: 1px solid #C9D9EF; border-radius: 6px; background: #FFFFFF; color: #004594; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-rc i{ width: 20px; height: 20px; border: 0; background: #EAF1FB; color: #0760C6; border-radius: 4px; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-rh:hover .k5-rc{ border-color: #0760C6; }
html body #wcu8#wcu8.k5-sec .k5-row [aria-expanded="true"] .k5-rc{ background: #004594; border-color: #004594; color: #FFFFFF; }
html body #wcu8#wcu8.k5-sec .k5-row [aria-expanded="true"] .k5-rc i{ background: rgba(255,255,255,.16); color: #FFFFFF; }
html body #wcu8#wcu8.k5-sec .k5-x{ container-type: inline-size; border-top: 0; margin: 0; padding: 0; }
html body #wcu8#wcu8.k5-sec .k5-x:not([hidden]){ display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 24px; align-items: start; }
html body #wcu8#wcu8.k5-sec .k5-x:not(:has(.k5-xp)){ grid-template-columns: minmax(0, 1fr); }
html body #wcu8#wcu8.k5-sec .k5-xp{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html body #wcu8#wcu8.k5-sec .k5-xpic{ background: #F3F7FC; aspect-ratio: 320 / 172; padding: 10px; }
html body #wcu8#wcu8.k5-sec .k5-xpic svg{ display: block; width: 100%; height: 100%; }
html body #wcu8#wcu8.k5-sec .k5-xq{ min-width: 0; }
html body #wcu8#wcu8.k5-sec .k5-xq .k5-qs{ margin-top: 0; }
html body #wcu8#wcu8.k5-sec .k5-row .k5-x{ margin: 0 18px 0 14px; padding: 16px 0 18px; border-top: 1px solid #E6ECF4; max-width: none; }
@media (max-width: 900px){
  html body #wcu8#wcu8.k5-sec .k5-x:not([hidden]){ grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html body #wcu8#wcu8.k5-sec .k5-xpic{ max-width: 340px; }
}
html body #wcu8#wcu8.k5-sec .k5r9-list{ display: flex; flex-direction: column; gap: 8px; }
html body #wcu8#wcu8.k5-sec .k5r9-list .k5-row{ background: #EDF2FA; border: 0; }
html body #wcu8#wcu8.k5-sec .k5r9-list .k5-row:hover{ background: #E6EDF8; }
html body #wcu8#wcu8.k5-sec .k5r9-list .k5-row.k5-open{ background: #E0E9F6; }
html body #wcu8#wcu8.k5-sec .k5r9-list .k5-row > .k5-rh > .k5-tile{ background: #FFFFFF; border: 0; }
html body #wcu8#wcu8.k5-sec .k5r9-list .k5-row .k5-x{ margin: 0 12px 12px; padding: 20px; background: #FFFFFF; border-top: 0; }
html body #wcu8#wcu8.k5-sec .k5r9-box > .k5r9-cta{ margin-top: 12px; padding: 22px 26px; }
@media (max-width: 760px){
  html body #wcu8#wcu8.k5-sec .k5r9-list .k5-row .k5-x{ margin: 0 8px 8px; padding: 14px; }
}
@media (max-width: 1180px){
  html body #wcu8#wcu8.k5-sec .k5-row > .k5-rh{ grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; padding: 12px 14px 12px 12px; }
  html body #wcu8#wcu8.k5-sec .k5-row > .k5-rh > .k5-tile{ height: 50px; padding: 2px; }
  html body #wcu8#wcu8.k5-sec .k5-row .k5-rl .k5-t{ font-size: 16px; }
  html body #wcu8#wcu8.k5-sec .k5-row .k5-rl .k5-ben{ font-size: 13px; }
}
@media (max-width: 900px){
  html body #wcu8#wcu8.k5-sec .k5-row .k5-rc{ width: 36px; padding: 0; justify-content: center; align-self: start; }
  html body #wcu8#wcu8.k5-sec .k5-row .k5-rc > span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html body #wcu8#wcu8.k5-sec .k5-row .k5-rc i{ background: transparent; }
}
@media (max-width: 760px){
  html body #wcu8#wcu8.k5-sec .k5-row > .k5-rh{ grid-template-columns: 52px minmax(0, 1fr) 36px; gap: 10px; padding: 12px 10px; }
  html body #wcu8#wcu8.k5-sec .k5-row > .k5-rh > .k5-tile{ height: 32px; align-self: start; }
  html body #wcu8#wcu8.k5-sec .k5-row .k5-rl .k5-t{ font-size: 15px; margin-top: 3px; }
  html body #wcu8#wcu8.k5-sec .k5-row .k5-rl .k5-ben{ font-size: 13px; line-height: 1.45; }
  html body #wcu8#wcu8.k5-sec .k5-row .k5-x{ margin: 0 10px; padding: 12px 0 14px; }
}
html body #wcu8#wcu8.k5-sec .k5-x:not([hidden]){ align-items: stretch; }
html body #wcu8#wcu8.k5-sec .k5-xp .k5-promise{ flex: 1 1 auto; }
html body #wcu8#wcu8.k5-sec .k5-xq{ align-self: start; }

/* ===== white-blue-duo-n4q/n4q-proof-tray.css ===== */
/* Client Proof — option 2 "Grey Tray" in the homepage theme (applied 2026-09-17).
   GENERATED by colour-system-20-k3w/white-blue-duo-n4q/proof-c7ta/_apply_home.py from c7.css (shared parts + .c7home);
   joined into /doctor/home-system/home.css by home_apply.py. Do not edit — change c7.src.css, run _c7_build.py and this script. */
html body #hp1#hp1#hp1#hp1.c7-sec [hidden]{ display: none !important; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7v{ padding-block: clamp(64px, 7vw, 100px); --c7-edge: var(--hp-edge, 58px); --c7-h: clamp(220px, 21vw, 300px); }
@media (max-width: 760px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7v{ --c7-edge: 18px; --c7-h: clamp(210px, 58vw, 260px); }
}
html body #hp1#hp1#hp1#hp1.c7-sec .c7-proof{ margin-top: clamp(24px, 2.6vw, 34px); }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-tab, html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtab, html body #hp1#hp1#hp1#hp1.c7-sec .c7-card, html body #hp1#hp1#hp1#hp1.c7-sec .c7-th, html body #hp1#hp1#hp1#hp1.c7-sec .c7-close, html body #hp1#hp1#hp1#hp1.c7-sec .c7-step, html body #hp1#hp1#hp1#hp1.c7-sec .c7-prev, html body #hp1#hp1#hp1#hp1.c7-sec .c7-next{ font: inherit; margin: 0; border-radius: 0; -webkit-tap-highlight-color: transparent; cursor: pointer; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-tab em, html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtab em{ font-style: normal; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-tabs, html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtabs{ scrollbar-width: none; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-tabs::-webkit-scrollbar, html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtabs::-webkit-scrollbar{ display: none; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-panels{ margin-top: 22px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-rail{ display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding: 2px var(--c7-edge) 4px; scroll-padding-inline: var(--c7-edge); scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-rail::-webkit-scrollbar{ display: none; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-card{ position: relative; flex: none; width: calc(var(--c7-h) * var(--r)); display: flex; flex-direction: column; padding: 0; border: 0;
  background: none; text-align: left; color: inherit; scroll-snap-align: start; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-shot{ display: block; width: 100%; height: var(--c7-h); overflow: hidden; background: #FFFFFF; transition: border-color .18s ease; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-shot img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; -webkit-user-drag: none; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-client{ display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 34px; font-size: 13px; font-weight: 650; line-height: 1.25; color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-client > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-hint{ position: absolute; right: 8px; top: calc(var(--c7-h) - 42px); width: 34px; height: 34px; display: grid; place-items: center;
  background: #FFFFFF; border: 1px solid #D3D6DB; color: #1E2228; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-hint svg{ width: 15px; height: 15px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-card:hover .c7-hint, html body #hp1#hp1#hp1#hp1.c7-sec .c7-card:focus-visible .c7-hint{ opacity: 1; }
@media (hover: none){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-hint{ opacity: 1; }
}
html body #hp1#hp1#hp1#hp1.c7-sec .c7-card:focus-visible{ outline: 2px solid #1E2228; outline-offset: 3px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-pager{ display: flex; align-items: center; gap: 12px; margin: 14px var(--c7-edge) 0; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-pager.c7-still{ visibility: hidden; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-prev, html body #hp1#hp1#hp1#hp1.c7-sec .c7-next{ flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #D3D6DB;
  background: #FFFFFF; color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-prev:disabled, html body #hp1#hp1#hp1#hp1.c7-sec .c7-next:disabled{ opacity: .35; cursor: default; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-prev svg, html body #hp1#hp1#hp1#hp1.c7-sec .c7-next svg, html body #hp1#hp1#hp1#hp1.c7-sec .c7-step svg, html body #hp1#hp1#hp1#hp1.c7-sec .c7-close svg{ width: 16px; height: 16px; display: block; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-bar{ position: relative; flex: 1; height: 3px; background: #E2E4E8; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-bar i{ position: absolute; top: 0; bottom: 0; background: #1E2228; transition: left .12s linear; }
@media (max-width: 760px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-prev, html body #hp1#hp1#hp1#hp1.c7-sec .c7-next{ width: 44px; height: 44px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-rail{ gap: 12px; }
}
html body #hp1#hp1#hp1#hp1.c7-sec .c7-modal{ position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 56px); background: rgba(17, 19, 23, .62); }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-box{ width: min(1040px, 100%); height: min(780px, 100%); display: flex; flex-direction: column; background: #FFFFFF;
  border: 1px solid #D3D6DB; min-width: 0; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mhead{ flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; background: #F7F7F8; border-bottom: 1px solid #E2E4E8; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mt{ display: none; margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtabs{ flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtab{ flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid transparent; background: none;
  font-size: 13px; font-weight: 600; color: #6E737B; white-space: nowrap; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtab em{ font-size: 11px; font-weight: 700; color: #8A8F97; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtab:hover{ color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtab[aria-selected="true"]{ background: #FFFFFF; border-color: #8F939C; color: #1E2228; font-weight: 700; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtab[aria-selected="true"] em{ color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-close{ flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border: 1px solid #D3D6DB;
  background: #FFFFFF; color: #1E2228; font-size: 13px; font-weight: 700; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-close:hover{ border-color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mbody{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-stage{ flex: 1; min-height: 0; display: flex; overflow: auto; padding: 22px; background: #F4F5F6; overscroll-behavior: contain; outline: 0; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-stage img{ display: block; margin: auto; height: auto; max-width: none; background: #FFFFFF; border: 1px solid #E2E4E8; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-mfoot{ flex: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px 8px 16px; border-top: 1px solid #E2E4E8; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-cap{ flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-cname{ font-size: 15px; font-weight: 750; letter-spacing: -.01em; color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-ckind{ font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6E737B; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-steps{ flex: none; display: flex; gap: 6px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-step{ width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid #D3D6DB; background: #FFFFFF; color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-step:hover{ border-color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-th{ padding: 0; border: 0; background: none; color: inherit; text-align: left; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-thi{ display: block; overflow: hidden; background: #FFFFFF; border: 1px solid #E2E4E8; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-thi img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-thn{ display: block; font-size: 12.5px; font-weight: 650; color: #1E2228; line-height: 1.3; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-th:focus-visible, html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtab:focus-visible, html body #hp1#hp1#hp1#hp1.c7-sec .c7-close:focus-visible, html body #hp1#hp1#hp1#hp1.c7-sec .c7-step:focus-visible{ outline: 2px solid #1E2228; outline-offset: 2px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-split{ flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 272px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-list{ min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-left: 1px solid #E2E4E8; background: #FFFFFF; scrollbar-width: thin; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-list .c7-th{ display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px; border: 1px solid transparent; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-list .c7-thi{ height: 56px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-list .c7-th:hover{ background: #F4F5F6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-list .c7-th[aria-current="true"]{ background: #F1F2F4; border-color: #8F939C; }
@media (max-width: 760px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-modal{ padding: 10px; align-items: stretch; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-box{ width: 100%; height: 100%; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-mhead{ flex-wrap: wrap; gap: 8px; padding: 8px 8px 0 12px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-mt{ display: block; flex: 1; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-close{ height: 44px; padding: 0 12px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtabs{ order: 3; flex: 1 1 100%; margin: 0 -8px 0 -12px; padding: 0 8px 8px 12px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-mtab{ height: 40px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-stage{ padding: 12px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-mfoot{ padding: 8px 8px 8px 12px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-cname{ font-size: 14px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-step{ width: 44px; height: 44px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-split{ grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-list{ flex-direction: row; overflow-x: auto; overflow-y: hidden; border-left: 0; border-top: 1px solid #E2E4E8; padding: 8px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-list .c7-th{ flex: none; width: 150px; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-list .c7-thi{ height: 44px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-list .c7-thn{ font-size: 12px; }
}
html body #hp1#hp1#hp1#hp1.c7-sec .c7-sw{ position: relative; flex: 1; min-height: 0; min-width: 0; display: flex; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-sw > .c7-stage{ flex: 1; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-stage img{ cursor: zoom-in; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-stage.c7-zoomed img{ cursor: zoom-out; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-stage.c7-zoomed{ cursor: grab; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-ztap{ position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 1px solid #D3D6DB; background: #FFFFFF; color: #1E2228; font: inherit; border-radius: 0; cursor: pointer; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-ztap svg{ width: 16px; height: 16px; display: block; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-ztap:hover{ border-color: #1E2228; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7-ztap[aria-pressed="true"]{ background: #23272E; border-color: #23272E; color: #FFFFFF; }
@media (max-width: 760px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7-ztap{ width: 44px; height: 44px; right: 10px; bottom: 10px; }
}
@media (max-width: 1180px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7v{ --c7-h: clamp(190px, 21vw, 236px); }
}
@media (max-width: 760px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7v{ --c7-h: clamp(210px, 58vw, 250px); }
}
html body #hp1#hp1#hp1#hp1.c7-sec .c7home{ --c7-h: clamp(190px, 16.4vw, 236px); }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-proof{ margin-top: 0; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-panels{ margin-top: 0; padding: 18px 0 0; background: #F3F7FC; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-rail{ padding-bottom: 6px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-shot{ border: 1px solid #D3DAE6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-card:hover .c7-shot{ border-color: #8FB8F2; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-card:focus-visible{ outline-color: #0760C6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-client{ font-size: 13px; font-weight: 650; color: #0E1E35; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-hint{ border-color: #C9D9EF; color: #0760C6; border-radius: 6px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-pager{ margin: 0; padding: 10px var(--c7-edge) 16px; background: #F3F7FC; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-pager.c7-still{ visibility: visible; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-pager.c7-still > *{ visibility: hidden; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-prev, html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-next{ border-color: #C9D9EF; border-radius: 6px; color: #0760C6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-prev:hover:not(:disabled), html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-next:hover:not(:disabled){ border-color: #0760C6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-bar{ height: 4px; background: #C9D3E0; border-radius: 2px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-bar i{ background: #1F8FEA; border-radius: 2px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-modal{ background: rgba(13, 21, 38, .62); }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-box{ border-color: #C9D9EF; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mhead{ background: #F3F7FC; border-bottom-color: #DAE5F8; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mt{ color: #0E1E35; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtabs{ flex: 0 1 auto; margin-right: auto; padding: 4px; gap: 5px; background: #CBD6E6; border-radius: 12px; box-shadow: inset 0 0 0 1px #D3DAE6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab{ height: 34px; padding: 0 17px 0 12px; gap: 7px; border: 0; border-radius: 8px; background: #E8ECF3; color: #384352; font-weight: 650;
  box-shadow: inset 0 0 0 1px #D3DAE6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab:hover{ background: #FFFFFF; box-shadow: inset 0 0 0 1px #8E9AAD; color: #384352; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab em{ padding: 2px 6px; border-radius: 4px; background: #D3DAE6; color: #384352; font-weight: 650; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab[aria-selected="true"]{ background: #FFFFFF radial-gradient(3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, transparent 3.6px) no-repeat;
  color: #004594; font-weight: 700; box-shadow: inset 0 0 0 1px #8FB8F2; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab[aria-selected="true"] em{ background: #004594; color: #FFFFFF; font-weight: 700; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-close, html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-step, html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-ztap{ border-color: #C9D9EF; border-radius: 6px; color: #004594; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-close:hover, html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-step:hover, html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-ztap:hover{ border-color: #0760C6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-ztap[aria-pressed="true"]{ background: #004594; border-color: #004594; color: #FFFFFF; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-stage{ background: #F3F7FC; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-stage img{ border-color: #D3DAE6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mfoot{ border-top-color: #DAE5F8; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-cname{ color: #0E1E35; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-ckind{ color: #5B6778; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-list{ border-left-color: #DAE5F8; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-list .c7-thi{ border-color: #D3DAE6; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-list .c7-thn{ color: #0E1E35; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-list .c7-th:hover{ background: #F3F7FC; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-list .c7-th[aria-current="true"]{ background: #FFFFFF radial-gradient(3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, transparent 3.6px) no-repeat;
  border-color: #8FB8F2; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-th:focus-visible, html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab:focus-visible, html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-close:focus-visible, html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-step:focus-visible{ outline-color: #0760C6; }
@media (max-width: 1180px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7home{ --c7-h: clamp(176px, 18vw, 206px); }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-panels{ padding-top: 14px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-pager{ padding: 8px var(--c7-edge) 12px; }
}
@media (max-width: 760px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7home{ --c7-h: clamp(200px, 56vw, 230px); }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-panels{ padding-top: 14px; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtabs{ flex: 1 1 100%; margin: 0 -8px 8px -12px; padding: 4px 8px 4px 12px; border-radius: 0; }
  html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-list{ border-top-color: #DAE5F8; }
}
@media (max-width: 1180px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7home{ --c7-h: clamp(170px, 17.6vw, 206px); }
}
@media (max-width: 760px){
  html body #hp1#hp1#hp1#hp1.c7-sec .c7home{ --c7-h: clamp(200px, 56vw, 222px); }
}
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-box{ width: min(1080px, 100%); }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab{ padding: 0 13px 0 10px; gap: 6px; font-size: 12.8px; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab em{ padding: 1px 5px; }

/* live: the section keeps the homepage's own padding, edge and ground */
html body #hp1#hp1#hp1#hp1.c7-sec .c7v.c7home.c7home{ padding-block: 0; }

/* ===== white-blue-duo-n4q/n4q-badge-plain.css ===== */
/* Hero badge + section labels — option 20 "Title Case" from the plain badge round (dmd-home-badgemono-ztng.html), approved 2026-09-17.
   Plain: no background, no dot, no blue, no tint. The words in near-black #1F1F1F, title case, no letter-spacing.
   Every label keeps its box height (hero 34 / 28.8px, section labels 27.8px), so no headline or section moves.
   The hero button keeps its blue and gets the states it was meant to have (the older :is() layer painted a violet #1A45BA hover).
   Joined into /doctor/home-system/home.css by home_apply.py (18th sheet). Edit here, then run home_apply.py. */

/* ---- the hero badge ---- */
html body .screen main.hero p.label.label.label{
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important; text-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #1F1F1F !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 15px !important; font-weight: 600 !important; line-height: 20px !important;
  padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important;
}
html body .screen main.hero p.label.label.label::before,
html body .screen main.hero p.label.label.label::after{ content: none !important; }
@media (max-width: 760px){
  html body .screen main.hero p.label.label.label{ display: inline-flex !important; align-items: center !important; font-size: 13px !important; line-height: 16.8px !important; }
}

/* ---- the section labels (What We Do, Success Stories, Client Proof, Industries, Why Choose Us, About, FAQ) ----
   four ids: above the live three-id layer that paints them as blue pills */
html body :is(#svc3#svc3#svc3#svc3, #ss1#ss1#ss1#ss1, #hp1#hp1#hp1#hp1, #indwork#indwork#indwork#indwork, #wcu8#wcu8#wcu8#wcu8, #about5#about5#about5#about5, #faq10#faq10#faq10#faq10) .hd-kicker.hd-kicker{
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important; text-shadow: none !important;
  color: #1F1F1F !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 13.8px !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
html body :is(#svc3#svc3#svc3#svc3, #ss1#ss1#ss1#ss1, #hp1#hp1#hp1#hp1, #indwork#indwork#indwork#indwork, #wcu8#wcu8#wcu8#wcu8, #about5#about5#about5#about5, #faq10#faq10#faq10#faq10) .hd-kicker.hd-kicker::before,
html body :is(#svc3#svc3#svc3#svc3, #ss1#ss1#ss1#ss1, #hp1#hp1#hp1#hp1, #indwork#indwork#indwork#indwork, #wcu8#wcu8#wcu8#wcu8, #about5#about5#about5#about5, #faq10#faq10#faq10#faq10) .hd-kicker.hd-kicker::after{ content: none !important; display: none !important; }
/* the About label carries two "•" characters in its markup — no dots */
html body #about5#about5#about5#about5 .ab-eyebrow.hd-kicker > i{ display: none !important; }
@media (max-width: 760px){
  html body :is(#svc3#svc3#svc3#svc3, #ss1#ss1#ss1#ss1, #hp1#hp1#hp1#hp1, #indwork#indwork#indwork#indwork, #wcu8#wcu8#wcu8#wcu8, #about5#about5#about5#about5, #faq10#faq10#faq10#faq10) .hd-kicker.hd-kicker{ font-size: 13px !important; }
}

/* ---- the hero button: same blue at rest, its intended hover / pressed / focus ---- */
html body .screen main.hero form#auditForm button[type]:hover{ background: #004EA6 !important; color: #FFFFFF !important; box-shadow: none !important; }
html body .screen main.hero form#auditForm button[type]:active{ background: #003F8A !important; box-shadow: inset 0 2px 0 rgba(0,0,0,.22) !important; }
html body .screen main.hero form#auditForm button[type]:focus-visible{ outline: 2px solid #003F8A !important; outline-offset: 2px !important; }

/* ===== white-blue-duo-n4q/n4q-card-weight.css ===== */
/* Card Weight — the homepage on the hero's colour ladder (applied 2026-09-17).
   GENERATED by colour-system-20-k3w/white-blue-duo-n4q/_n4q_cardweight.py; joined into home-system/home.css by home_apply.py.
   Colour only. Do not edit — change the script and run it again. */

/* All Work */
html body .tail.show #tabs#tabs#tabs#tabs{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #C6D9F4 !important; }
html body .tail.show #tabs#tabs#tabs#tabs > button:not([aria-selected="true"]){ background: #EEF4FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; color: #24364F !important; --fs-tab-ink: #24364F; --fs-tab-icon: #24364F; }
html body .tail.show #tabs#tabs#tabs#tabs > button:not([aria-selected="true"]) :is(span, .gah-tabw, .gah-tabname, .gah-tabsub){ color: #24364F !important; }
html body .tail.show #tabs#tabs#tabs#tabs > button:not([aria-selected="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #7FA6DC !important; }
html body .tail.show #tabs#tabs#tabs#tabs > button[aria-selected="true"], html body .tail.show #tabs#tabs#tabs#tabs > button[aria-selected="true"]:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; box-shadow: inset 0 0 0 2px #5E8FD3 !important; color: #004594 !important; --fs-tab-ink: #004594; --fs-tab-on-ink: #004594; --fs-tab-icon: #004594; }
html body .tail.show #tabs#tabs#tabs#tabs > button[aria-selected="true"] :is(span, .gah-tabw, .gah-tabname, .gah-tabsub){ color: #004594 !important; }
html body .tail.show #tabs#tabs#tabs#tabs > button[aria-selected="true"] svg:not(:has([fill])), html body .tail.show #tabs#tabs#tabs#tabs > button#tab-all[aria-selected="true"] svg{ stroke: #004594 !important; }
html body .tail.show #lane#lane#lane#lane .card.door{ background: linear-gradient(#C6D9F4, #C6D9F4) 0 0 / 100% 58px no-repeat, linear-gradient(#AEC9EF, #AEC9EF) 0 58px / 100% 1px no-repeat, #FFFFFF !important; border-color: #C6D9F4 !important; }
@media (max-width: 760px){ html body .tail.show #lane#lane#lane#lane .card.door{ background: linear-gradient(#C6D9F4, #C6D9F4) 0 0 / 100% 62px no-repeat, linear-gradient(#AEC9EF, #AEC9EF) 0 62px / 100% 1px no-repeat, #FFFFFF !important; } }
html body .tail.show #lane#lane#lane#lane .card.door:hover{ border-color: #7FA6DC !important; }
html body .tail.show #lane#lane#lane#lane .card.door .ic.ic{ box-shadow: inset 0 0 0 1px #AEC9EF !important; }
html body .tail.show #lane#lane#lane#lane .card.door .go{ box-shadow: inset 0 0 0 1px #C6D9F4 !important; }

/* Our Services */
html body #svc3#svc3#svc3#svc3 .s3-catrail{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #C6D9F4 !important; }
html body #svc3#svc3#svc3#svc3 .s3-cat:not([aria-current="true"]){ background: #EEF4FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; color: #24364F !important; }
html body #svc3#svc3#svc3#svc3 .s3-cat:not([aria-current="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #7FA6DC !important; color: #0E1E35 !important; }
html body #svc3#svc3#svc3#svc3 .s3-cat[aria-current="true"], html body #svc3#svc3#svc3#svc3 .s3-cat[aria-current="true"]:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; box-shadow: inset 0 0 0 2px #5E8FD3 !important; color: #004594 !important; }
html body #svc3#svc3#svc3#svc3 .s3-tabs{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #C6D9F4 !important; }
html body #svc3#svc3#svc3#svc3 .s3-tab:not([aria-pressed="true"]){ background: #EEF4FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; color: #24364F !important; }
html body #svc3#svc3#svc3#svc3 .s3-tab:not([aria-pressed="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #7FA6DC !important; color: #0E1E35 !important; }
html body #svc3#svc3#svc3#svc3 .s3-tab[aria-pressed="true"], html body #svc3#svc3#svc3#svc3 .s3-tab[aria-pressed="true"]:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; box-shadow: inset 0 0 0 2px #5E8FD3 !important; color: #004594 !important; }

/* Client Proof */
html body #hp1#hp1#hp1#hp1 .hp-tabs{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #C6D9F4 !important; }
html body #hp1#hp1#hp1#hp1 .hp-tab:not([aria-selected="true"]){ background: #EEF4FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; color: #24364F !important; }
html body #hp1#hp1#hp1#hp1 .hp-tab:not([aria-selected="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #7FA6DC !important; color: #0E1E35 !important; }
html body #hp1#hp1#hp1#hp1 .hp-tab[aria-selected="true"], html body #hp1#hp1#hp1#hp1 .hp-tab[aria-selected="true"]:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; box-shadow: inset 0 0 0 2px #5E8FD3 !important; color: #004594 !important; }
html body #hp1#hp1#hp1#hp1 .hp-tab:not([aria-selected="true"]) em{ background: #DDE9F9 !important; color: #24364F !important; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtabs{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #C6D9F4 !important; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab:not([aria-selected="true"]){ background: #EEF4FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; color: #24364F !important; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab:not([aria-selected="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #7FA6DC !important; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab:not([aria-selected="true"]) em{ background: #DDE9F9 !important; color: #24364F !important; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-mtab[aria-selected="true"]{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; box-shadow: inset 0 0 0 2px #5E8FD3 !important; color: #004594 !important; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-shot{ border-color: #C6D9F4 !important; }
html body #hp1#hp1#hp1#hp1.c7-sec .c7home .c7-card:hover .c7-shot{ border-color: #7FA6DC !important; }

/* Industries */
html body #indwork#indwork#indwork#indwork#indwork .v03-card{ border-color: #C6D9F4 !important; }
@media (min-width: 960px){ html body #indwork#indwork#indwork#indwork#indwork .v03-card{ background: #FFFFFF !important; } }
html body #indwork#indwork#indwork#indwork#indwork .v03-panel{ box-shadow: inset 1px 0 0 #C6D9F4 !important; }
html body #indwork#indwork#indwork#indwork#indwork :is(.v03-top, .v03-rail){ background: #FFFFFF !important; }
@media (max-width: 959px){ html body #indwork#indwork#indwork#indwork#indwork .v03-rail{ box-shadow: inset 0 -1px 0 #C6D9F4 !important; } }
html body #indwork#indwork#indwork#indwork#indwork .v03-segb:not(.is-on){ background: #EEF4FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; color: #24364F !important; }
html body #indwork#indwork#indwork#indwork#indwork .v03-segb:not(.is-on):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #7FA6DC !important; color: #0E1E35 !important; }
html body #indwork#indwork#indwork#indwork#indwork .v03-segb:not(.is-on) .ix3-aicn{ background: #DDE9F9 !important; color: #24364F !important; }
html body #indwork#indwork#indwork#indwork#indwork .v03-segb.is-on, html body #indwork#indwork#indwork#indwork#indwork .v03-segb.is-on:hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 2px #5E8FD3 !important; color: #004594 !important; }
html body #indwork#indwork#indwork#indwork#indwork .v03-row:not(.is-on) .iw2-icn{ background: #EEF4FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; color: #24364F !important; }
html body #indwork#indwork#indwork#indwork#indwork .v03-row:not(.is-on):hover .iw2-icn{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #7FA6DC !important; color: #0E1E35 !important; }
html body #indwork#indwork#indwork#indwork#indwork .v03-row.is-on .iw2-icn{ box-shadow: inset 0 0 0 2px #5E8FD3 !important; }
html body #indwork#indwork#indwork#indwork#indwork .v03-head{ background: #DDE9F9 !important; }
html body #indwork#indwork#indwork#indwork#indwork .v03-label{ box-shadow: inset 0 1px 0 #C6D9F4 !important; }

/* About Us */
html body #about5#about5#about5#about5 .ab-ftabs{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #C6D9F4 !important; }
html body #about5#about5#about5#about5 .ab-ftab:not([aria-selected="true"]){ background: #EEF4FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; color: #24364F !important; }
html body #about5#about5#about5#about5 .ab-ftab:not([aria-selected="true"]):hover{ background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #7FA6DC !important; color: #0E1E35 !important; }
html body #about5#about5#about5#about5 .ab-ftab[aria-selected="true"], html body #about5#about5#about5#about5 .ab-ftab[aria-selected="true"]:hover{ background: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px), #FFFFFF !important; box-shadow: inset 0 0 0 2px #5E8FD3 !important; color: #004594 !important; }
html body #about5#about5#about5#about5 div.ab-wrap div.ab-card.ab-outer{ border-color: #C6D9F4 !important; }
html body #about5#about5#about5#about5 .ab-card{ background: #EEF4FC !important; }
@media (min-width: 761px){ html body #about5#about5#about5#about5 .ab-card{ background: #C6D9F4 !important; } html body #about5#about5#about5#about5 .ab-split{ border-top-color: #AEC9EF !important; } }
html body #about5#about5#about5#about5 div.ab-body div.ab-strip{ border-color: #DDE9F9 !important; }
html body #about5#about5#about5#about5 div.ab-strip div.ab-sti + div.ab-sti{ box-shadow: 1px 0 0 0 inset #DDE9F9 !important; }

/* Success Stories */
html body #ss1#ss1#ss1#ss1 div.ss-rail article.ss-card{ border-color: #C6D9F4 !important; }
html body #ss1#ss1#ss1#ss1 p.ss-say{ border-color: #DDE9F9 !important; }

/* FAQ */
html body #faq10#faq10#faq10#faq10#faq10 .gfaq-item:not(.is-open) .gfaq-qb{ box-shadow: inset 0 0 0 1px #C6D9F4 !important; }
html body #faq10#faq10#faq10#faq10#faq10 .gfaq-item:not(.is-open) .gfaq-m{ box-shadow: inset 0 0 0 1px #C6D9F4 !important; }
html body #faq10#faq10#faq10#faq10#faq10 .gfaq-item:not(.is-open) .gfaq-q:hover .gfaq-m{ box-shadow: inset 0 0 0 1px #7FA6DC !important; }
html body #faq10#faq10#faq10#faq10#faq10 .gfaq-item{ border-color: #DDE9F9 !important; }
html body #faq10#faq10#faq10#faq10#faq10 .gfaq-ai-in{ border-color: #C6D9F4 !important; }

/* hero field prefix · Why Choose Us bands */
html body{ --fs-fix-bg: #EEF4FC; }
html body .screen .hero .capture .capfix.capfix{ background: #EEF4FC !important; }
html body #wcu8#wcu8#wcu8#wcu8 article.k5-row--band{ background: #EEF4FC !important; }



/* ===== home-hero-space-q5w/v2.css ===== */
/* 2026-09-19 · FIRST SCREEN SPACING — "V2 · Even compact" (chosen from five previews).
   Spacing only. The hero's air and the gaps inside its block (label > heading > form > line) tighten ~12%;
   All Work is untouched and rises by the same amount, so its bottom edge and the top of the next section
   show above the fold (@1440x900: hero -37px, All Work up 37px, peek 37px; @390x844: -22px).
   Mechanism: the first screen stops --hws-p short of the fold; index.html's measure() pins the hero at what
   is left. Phones under 800px tall keep the hero as it was (it is already packed to its frames there).
   html:root = the same weight the preview layer had (html.hws2). */
html:root body .screen{ min-height: calc(100dvh - var(--barh) - var(--hws-p, 0px)) !important; }

@media (min-width: 761px){
  html:root{ --hws-p: clamp(0px, calc((100vh - 654px) * .15), 56px); }
  html:root body{
    --fs-h1-mt:  clamp(14px, 2.1vh, 19.5px);
    --fs-cap-mt: clamp(31.5px, 4.6vh, 44px);
    --fs-mic-mt: clamp(12.5px, 1.76vh, 16px);
  }
}
@media (max-width: 760px) and (min-height: 800px){
  html:root{ --hws-p: calc(12px + 3px + 2px + clamp(34px, 5.2vh, 48px) - clamp(30px, 4.6vh, 42px)); }
  html:root body .screen main.hero{ padding-bottom: 4px !important; }
  html:root body .screen .hero h1{ margin-top: 23px !important; }
  html:root body .screen .hero form.capture{ margin-top: clamp(30px, 4.6vh, 42px) !important; }
  html:root body .screen .hero .microline{ margin-top: 14px !important; }
}
@media (max-width: 760px) and (max-height: 799.98px){
  /* shorter phones: the hero is already packed to its frames, so nothing is taken from it */
  html:root{ --hws-p: 0px; }
}

/* ===== footer-canvas-m5x/settled.css ===== */
/* 2026-09-19 · SITE FOOTER = "Settled Canvas" (Upgrade 1, chosen from /doctor/footer-canvas-m5x/).
   Markup: the <footer id="site-foot" class="mx mx-settled"> block in index.html (it replaced <footer id="sfoot">).
   Every rule is .mx-* scoped; the older #sfoot rules above no longer match anything on this page. */
/* ==========================================================================
   Footer canvas · shared layer  (footer-canvas-m5x)
   The picked "Map Canvas", settled. Every version shares:
   · ONE 12-column grid (--cg gutters) inside the page lane, used by the map
     zone and the deck alike, so edges line up top to bottom: the reach card
     sits on columns 9–12 and its edge runs straight into the Company column.
   · a settled map — inside the lane, never full-bleed; on a white 8px mat;
     a fixed minimum height (--mh) that grows only if the card needs it.
   · the reach card — cobalt head with the real hours, the call as the
     heaviest row, WhatsApp + directions as two equal keys, e-mail, the
     address with its landmark.
   · the cobalt deck — company, what we do, company pages; base with the CIN.
   · one 8px spacing scale: 8 · 16 · 24 · 32 · 48 · 64.
   Square surfaces, flat edges, no shadows; keys 7px, chips 4px.
   ========================================================================== */
.mx{
  --ink:#0E1E35; --ink-2:#505C6C; --ink-3:#5B6778; --ink-4:#24364F;
  --act:#0760C6; --act-h:#004EA6; --cobalt:#004594;
  --edge:#DCE3EE; --edge-b:#C6D9F4; --edge-bb:#AEC9EF; --edge-h:#7FA6DC;
  --tint:#EEF4FC; --pale:#DDE9F9; --ground:#F3F7FC; --live:#2FB67C;
  --on-2:#DCE8FA; --on-3:#AEC9EF; --on-line:rgba(255,255,255,.16);
  --gut: clamp(24px, 4vw, 72px);
  --cg: clamp(16px, 1.7vw, 24px);
  --mh: clamp(408px, 31vw, 448px);
  --mat: 8px; --inset: 24px;
  --cpad: 20px;
  display: block; margin: 0; background: var(--cobalt); border-top: 1px solid var(--edge);
  font-family: var(--sans); color: var(--ink);
  scroll-margin-top: var(--barh);
}
.mx *{ box-sizing: border-box; }
.mx :where(a){ color: inherit; text-decoration: none; }
.mx :where(p, h3, ul, li){ margin: 0; padding: 0; }
.mx :where(ul){ list-style: none; }
.mx :where(button, input){ font: inherit; }
.mx [hidden]{ display: none !important; }
.mx :focus-visible{ outline: 2px solid var(--act); outline-offset: 2px; border-radius: 4px; }
.mx-in{ width: min(1440px, 100% - 2 * var(--gut)); margin-inline: auto; }
.mx-grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
.mx-label{
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-3); line-height: 1.4;
}
.mx-on{ color: #FFFFFF; }
.mx-sample{
  flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px;
  background: #FFE9A8; color: #5A4300; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---- the settled map zone ---- */
.mx-stage{ background: var(--ground); padding: 64px 0; }
.mx-stage .mx-grid{ align-items: center; }
.mx-frame{
  grid-column: 1 / -1; grid-row: 1; align-self: stretch; position: relative;
  min-height: var(--mh); background: #FFFFFF; border: 1px solid var(--edge-b);
}
.mx-map{ position: absolute; inset: var(--mat); background: var(--tint); }
.mx-map iframe{ display: block; width: 100%; height: 100%; border: 0; }
.mx-card{
  grid-column: 9 / 13; grid-row: 1; position: relative; z-index: 1;
  margin: calc(var(--mat) + var(--inset)) calc(var(--mat) + var(--inset)) calc(var(--mat) + var(--inset)) 0;
  background: #FFFFFF; border: 1px solid var(--edge-bb);
}
.mx-ch{ display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 12px 0 var(--cpad); background: var(--cobalt); }
.mx-hours{ display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 4px;
  background: rgba(255,255,255,.12); color: #FFFFFF; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.mx-hours svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-call{ display: flex; align-items: center; gap: 16px; padding: 16px var(--cpad); transition: background-color .15s ease; }
.mx-plate{ flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--cobalt); }
.mx-plate svg{ width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-plate-l{ width: 32px; height: 32px; background: var(--tint); }
.mx-plate-l svg{ width: 16px; height: 16px; stroke: var(--cobalt); }
.mx-num{ flex: 1; font-size: clamp(20px, 1.6vw, 23px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.mx-call:hover{ background: #F5F8FD; }
.mx-call:hover .mx-num{ color: var(--act); }
.mx-call:focus-visible{ outline-offset: -2px; border-radius: 0; }
.mx-key{ flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px;
  background: #FFFFFF; border: 1px solid var(--edge-bb); transition: background-color .15s ease, border-color .15s ease; }
.mx-key svg{ width: 15px; height: 15px; fill: none; stroke: var(--act); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-call:hover > .mx-key{ background: var(--act); border-color: var(--act); }
.mx-call:hover > .mx-key svg{ stroke: #FFFFFF; }
.mx-acts{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 var(--cpad) 16px; border-bottom: 1px solid var(--edge); }
.mx-act{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 7px;
  background: #FFFFFF; border: 1px solid var(--edge-b); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease; }
.mx-act svg{ width: 17px; height: 17px; flex: none; }
.mx-act-wa svg{ fill: #1FA855; }
.mx-act-dir svg{ fill: none; stroke: var(--cobalt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-act:hover{ border-color: var(--edge-h); background: var(--tint); }
.mx-ln{ display: flex; align-items: flex-start; gap: 16px; padding: 16px var(--cpad); }
.mx-ln + .mx-ln{ border-top: 1px solid var(--edge); }
.mx-ln > .mx-plate-l{ margin-left: 4px; }
.mx-tx{ min-width: 0; padding-top: 5px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.mx-tx a{ font-weight: 650; color: var(--ink); }
.mx-tx a:hover{ color: var(--act); text-decoration: underline; text-underline-offset: 3px; }
.mx-addr{ color: #21416D; }
.mx-near{ margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.mx-near svg{ width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the cobalt deck: same 12 columns ---- */
.mx-deck{ background: var(--cobalt); color: #FFFFFF; padding-top: 64px; }
.mx-cols > .mx-id{ grid-column: 1 / 5; }
.mx-cols > .mx-svc{ grid-column: 5 / 9; }
.mx-cols > .mx-co{ grid-column: 9 / 13; }
/* each column after the first: a 1px seam at its track start + the card's own 20px padding,
   so the Company words start exactly where the card's words start above */
.mx-cols > .mx-col{ border-left: 1px solid var(--on-line); padding-left: var(--cpad); }
.mx-brand{ display: inline-flex; align-items: center; gap: 16px; }
.mx-mk{ flex: none; display: block; width: 56px; height: 56px; padding: 3px; border-radius: 50%; background: #FFFFFF; }
.mx-mk svg{ display: block; width: 100%; height: 100%; }
.mx-mk svg text > tspan:nth-child(odd){ fill: #000000; }
.mx-mk svg text > tspan:nth-child(2){ fill: #0B57F5; }
.mx-mk svg circle{ stroke: #0B57F5; fill: #FFFFFF; }
.mx-mk svg text{ transform: translate(-0.9px, 0.85px); }
.mx-brand b{ font-size: clamp(22px, 1.9vw, 27px); font-weight: 800; letter-spacing: -.034em; line-height: 1.12; color: #FFFFFF; }
.mx-lede{ margin-top: 16px; max-width: 44ch; font-size: 15px; line-height: 1.6; color: var(--on-2); }
.mx-badge{ margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 7px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); font-size: 13px; font-weight: 650; color: #FFFFFF; }
.mx-badge svg{ width: 16px; height: 16px; flex: none; fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-soc{ margin-top: 16px; display: flex; gap: 8px; }
.mx-soc a{ width: 44px; height: 44px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #FFFFFF;
  transition: background-color .15s ease, color .15s ease; }
.mx-soc a svg{ width: 18px; height: 18px; fill: currentColor; }
.mx-soc a:hover{ background: #FFFFFF; color: var(--cobalt); }
.mx-deck :focus-visible{ outline-color: #FFFFFF; }

.mx-colh{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; margin-bottom: 16px; }
.mx-col ul{ border-top: 1px solid var(--on-line); }
.mx-col li + li{ border-top: 1px solid var(--on-line); }
.mx-row{ position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 0; }
.mx-row::before{ content: ""; position: absolute; z-index: -1; inset: 0 0 0 calc(-1 * var(--cpad)); background: rgba(255,255,255,.07); opacity: 0; transition: opacity .15s ease; }
.mx-tile{ flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: #FFFFFF; }
.mx-tile svg{ width: 20px; height: 20px; }
.mx-tile-c svg{ width: 18px; height: 18px; fill: none; stroke: var(--cobalt); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-na .mx-tile{ background: rgba(255,255,255,.12); }
.mx-na .mx-tile svg{ filter: brightness(0) invert(1); opacity: .55; }
.mx-nm{ flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
a.mx-row .mx-nm{ font-weight: 700; color: #FFFFFF; }
.mx-na .mx-nm{ font-weight: 550; color: var(--on-3); }
.mx-na{ cursor: default; }
.mx-live{ display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -2px 0 0 8px; border-radius: 50%; background: #4CD394; }
.mx-deck .mx-key{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.mx-deck .mx-key svg{ stroke: #FFFFFF; }
a.mx-row:hover::before{ opacity: 1; }
a.mx-row:hover > .mx-key{ background: #FFFFFF; border-color: #FFFFFF; }
a.mx-row:hover > .mx-key svg{ stroke: var(--cobalt); }
.mx-soon{
  flex: none; padding: 2px 6px 1px; border-radius: 4px; background: rgba(255,255,255,.14);
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: #FFFFFF; line-height: 1.5;
}

/* ---- base ---- */
.mx-base{ margin-top: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 32px; padding: 16px 0 24px; border-top: 1px solid var(--on-line); }
.mx-copy{ margin-right: auto; font-size: 13.5px; line-height: 1.4; color: var(--on-2); }
.mx-cin{ margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--on-line); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--on-3); }
.mx-legal{ display: flex; align-items: center; flex-wrap: wrap; gap: 0 24px; }
.mx-legal a, .mx-na2{ display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13.5px; line-height: 1.4; }
.mx-legal a{ font-weight: 650; color: #FFFFFF; }
.mx-legal a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.mx-na2{ color: var(--on-2); cursor: default; }

/* ---- tablet: card on columns 7–12; deck = company row, then two columns on the same seam ---- */
@media (max-width: 1180px){
  .mx-card{ grid-column: 7 / 13; }
  .mx-cols{ row-gap: 48px; }
  .mx-cols > .mx-id{ grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: start; }
  .mx-cols > .mx-id > .mx-brand, .mx-cols > .mx-id > .mx-lede, .mx-cols > .mx-id > .mx-badge{ grid-column: 1; }
  .mx-cols > .mx-id > .mx-badge{ justify-self: start; }
  .mx-cols > .mx-id > .mx-soc{ grid-column: 2; grid-row: 1; margin-top: 0; }
  .mx-cols > .mx-svc{ grid-column: 1 / 7; border-left: 0; padding-left: 0; }
  .mx-cols > .mx-co{ grid-column: 7 / 13; }
  .mx-row::before{ inset: 0; }
}
@media (max-width: 900px){
  .mx-stage{ padding: 48px 0; }
  .mx-frame{ min-height: 0; }
  .mx-map{ position: relative; inset: auto; margin: var(--mat); height: 320px; }
  .mx-card{ grid-column: 1 / -1; grid-row: 2; margin: 16px 0 0; }
}

/* ---- phones ---- */
@media (max-width: 760px){
  .mx{ --gut: 18px; --cpad: 16px; }
  .mx-stage{ padding: 24px 0 32px; }
  .mx-map{ height: 240px; margin: 6px; }
  .mx-card{ margin-top: 12px; }
  .mx-hours{ font-size: 12px; padding: 0 8px; }
  .mx-num{ font-size: clamp(18px, 5.6vw, 22px); }
  .mx-act{ font-size: 13.5px; padding: 0 8px; }
  .mx-deck{ padding-top: 40px; }
  .mx-grid{ column-gap: 0; }
  .mx-cols{ row-gap: 32px; }
  .mx-cols > *{ grid-column: 1 / -1 !important; border-left: 0 !important; padding-left: 0 !important; }
  .mx-cols > .mx-id{ display: block; }
  .mx-cols > .mx-id > .mx-soc{ margin-top: 16px; }
  .mx-mk{ width: 50px; height: 50px; }
  .mx-brand{ gap: 12px; }
  .mx-brand b{ font-size: 21px; }
  .mx-row::before{ inset: 0 -18px; }
  .mx-base{ margin-top: 32px; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 24px; }
  .mx-copy{ order: 2; padding-top: 8px; }
  .mx-cin{ display: block; margin: 4px 0 0; padding: 0; border: 0; }
  .mx-tx{ overflow-wrap: anywhere; }
  .mx-tx a{ position: relative; }
  .mx-tx a::after{ content: ""; position: absolute; inset: -13px -4px; }
}
@media (max-width: 380px){ .mx-acts{ grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce){ .mx *{ transition: none !important; } }


/* ==========================================================================
   1 · SETTLED CANVAS — the picked design, settled, plus the company's facts.
   The map frame straddles the seam where the page's pale ground turns into
   the cobalt deck, so map and deck read as one object. The deck opens on
   four real facts laid on the same columns as everything below them.
   ========================================================================== */
.mx-settled .mx-stage{ padding-bottom: 0;
  background: linear-gradient(to bottom, var(--ground) 0, var(--ground) calc(100% - 176px), var(--cobalt) calc(100% - 176px)); }
.mx-settled .mx-deck{ padding-top: 56px; }
.mx-facts{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg);
  padding-bottom: 40px; margin-bottom: 48px; border-bottom: 1px solid var(--on-line); }
.mx-fact{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.mx-fact:nth-child(1){ grid-column: 1 / 3; }
.mx-fact:nth-child(2){ grid-column: 3 / 5; }
.mx-fact:nth-child(3){ grid-column: 5 / 9; border-left: 1px solid var(--on-line); padding-left: var(--cpad); }
.mx-fact:nth-child(4){ grid-column: 9 / 13; border-left: 1px solid var(--on-line); padding-left: var(--cpad); }
.mx-fic{ grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.mx-fic svg{ width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-fk{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-3); }
.mx-fv{ font-size: 16px; font-weight: 750; letter-spacing: -.01em; color: #FFFFFF; line-height: 1.35; }
@media (max-width: 1180px){
  .mx-fact:nth-child(1){ grid-column: 1 / 4; } .mx-fact:nth-child(2){ grid-column: 4 / 7; }
  .mx-fact:nth-child(3){ grid-column: 7 / 13; }
  .mx-fact:nth-child(4){ grid-column: 1 / -1; border-left: 0; padding-left: 0; margin-top: 24px; }
}
@media (max-width: 900px){
  .mx-settled .mx-stage{ background: linear-gradient(to bottom, var(--ground) 0, var(--ground) calc(100% - 120px), var(--cobalt) calc(100% - 120px)); }
}
@media (max-width: 760px){
  .mx-facts{ row-gap: 20px; padding-bottom: 32px; margin-bottom: 32px; }
  .mx-fact:nth-child(n){ grid-column: 1 / -1; border-left: 0; padding-left: 0; margin-top: 0; }
  .mx-fact:nth-child(1){ grid-column: 1 / 7; } .mx-fact:nth-child(2){ grid-column: 7 / 13; }
}


/* ===== n4q-tabs-v1-fill.css ===== */
/* 2026-09-19 · TABS "V1 · BLUE FILL" on every tab set of the homepage (chosen from 15 options).
   One rule for all: the open tab is the only filled one — clear blue #C6D9F4 with cobalt words and the site's
   sky light; the other tabs are plain words; pointing at a tab only tints it (#F3F7FC + #DDE9F9 hairline), so it never
   looks open. Every state keeps one weight, so switching never resizes or moves a tab. Trays, icons, badges, order,
   words and behaviour are unchanged.
   Sets: All Work (#tabs) · Our Services categories (.s3-cat, aria-current) and social tabs (.s3-tab, aria-pressed) · Client Proof
   types (.hp-tab, phone .c7-mtab) · Industries switch (.v03-segb) and industry tiles (.v03-row .iw2-icn) · About (.ab-ftab).
   Not touched: the header menus (navigation, shared with the inner pages) and the Success Stories dots. */

/* ---- tab keys ---- */
html body .tail.show #tabs#tabs#tabs#tabs#tabs#tabs > button,
html body #svc3#svc3#svc3#svc3#svc3#svc3 :is(.s3-cat, .s3-tab),
html body #hp1#hp1#hp1#hp1#hp1#hp1 :is(.hp-tab, .c7-mtab),
html body #about5#about5#about5#about5#about5#about5 .ab-ftab{ font-weight: 650 !important; letter-spacing: 0 !important; }
html body .tail.show #tabs#tabs#tabs#tabs#tabs#tabs > button :is(.gah-tabw, .gah-tabname, .gah-tabsub){ font-weight: 650 !important; letter-spacing: 0 !important; color: inherit !important; }

html body .tail.show #tabs#tabs#tabs#tabs#tabs#tabs > button:not([aria-selected="true"]),
html body #svc3#svc3#svc3#svc3#svc3#svc3 .s3-cat:not([aria-current="true"]),
html body #svc3#svc3#svc3#svc3#svc3#svc3 .s3-tab:not([aria-pressed="true"]),
html body #hp1#hp1#hp1#hp1#hp1#hp1 :is(.hp-tab, .c7-mtab):not([aria-selected="true"]),
html body #indwork#indwork#indwork#indwork#indwork#indwork .v03-segb:not(.is-on),
html body #about5#about5#about5#about5#about5#about5 .ab-ftab:not([aria-selected="true"]){
  background: transparent !important; box-shadow: none !important; color: #24364F !important; }

html body .tail.show #tabs#tabs#tabs#tabs#tabs#tabs > button:not([aria-selected="true"]):hover,
html body #svc3#svc3#svc3#svc3#svc3#svc3 .s3-cat:not([aria-current="true"]):hover,
html body #svc3#svc3#svc3#svc3#svc3#svc3 .s3-tab:not([aria-pressed="true"]):hover,
html body #hp1#hp1#hp1#hp1#hp1#hp1 :is(.hp-tab, .c7-mtab):not([aria-selected="true"]):hover,
html body #indwork#indwork#indwork#indwork#indwork#indwork .v03-segb:not(.is-on):hover,
html body #about5#about5#about5#about5#about5#about5 .ab-ftab:not([aria-selected="true"]):hover{
  background: #F3F7FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; }

html body .tail.show #tabs#tabs#tabs#tabs#tabs#tabs > button[aria-selected="true"],
html body #svc3#svc3#svc3#svc3#svc3#svc3 .s3-cat[aria-current="true"],
html body #svc3#svc3#svc3#svc3#svc3#svc3 .s3-tab[aria-pressed="true"],
html body #hp1#hp1#hp1#hp1#hp1#hp1 :is(.hp-tab, .c7-mtab)[aria-selected="true"],
html body #indwork#indwork#indwork#indwork#indwork#indwork .v03-segb.is-on,
html body #about5#about5#about5#about5#about5#about5 .ab-ftab[aria-selected="true"]{
  background: radial-gradient(3.5px at calc(100% - 9px) 9px, #1F8FEA 0, #1F8FEA 3.5px, transparent 3.6px), #C6D9F4 !important;
  box-shadow: none !important; color: #004594 !important; }

/* ---- Industries: the chosen industry's tile is the only filled one; the others keep a hairline tile ---- */
html body #indwork#indwork#indwork#indwork#indwork#indwork .v03-row:not(.is-on) .iw2-icn{
  background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; }
html body #indwork#indwork#indwork#indwork#indwork#indwork .v03-row:not(.is-on):hover .iw2-icn{
  background: #F3F7FC !important; box-shadow: inset 0 0 0 1px #DDE9F9 !important; }
html body #indwork#indwork#indwork#indwork#indwork#indwork .v03-row.is-on .iw2-icn{
  background: radial-gradient(3.5px at calc(100% - 8px) 8px, #1F8FEA 0, #1F8FEA 3.5px, transparent 3.6px), #C6D9F4 !important;
  box-shadow: none !important; color: #004594 !important; }