:root{
  /* Her brand, 2026-09-18: name in deep navy, "Screening and Compliance Services" in
     medical teal, symbols and dividing lines in metallic gold, white/blue grounds. */
  --black:#0f2344; --ink:#14233a; --slate:#4f5f75; --mute:#7f8ea3;
  --navy-dk:#0b1a33;
  --teal:#0e8a8c; --teal-dk:#0a7173; --teal-lt:#6cc9c7; --teal-wash:#e6f4f4;
  --gold:#c9a24b; --gold-lt:#e3c377;
  --gold-metal:linear-gradient(90deg,#9f7a2c 0%,#e9d18d 48%,#b08a36 100%);
  --wash:#eaf2fa;
  --paper:#ffffff; --bone:#f1f6fb; --rule:#dbe5ef;
  --ok:#1c6b52; --ok-wash:#e8f4ef;
  --display:"Manrope","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
     font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.12}
h1{font-size:clamp(32px,5.2vw,58px)}
h2{font-size:clamp(25px,3.4vw,38px)}
h3{font-size:20px;letter-spacing:-.015em}
p{margin:0 0 16px}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}

.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:#fff;
      padding:12px 18px;border-radius:0 0 9px 0;font-weight:700;z-index:90}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:2px}

/* header ------------------------------------------------------- */
.util{background:var(--navy-dk);color:#cfd6df;font-size:13px;padding:8px 0}
.util .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.util a{text-decoration:none;color:#cfd6df}
.util a:hover{color:#fff}
.util .sp{flex:1}
/* On a phone the strip is for one thing: the number. The email and the county list
   both repeat in the footer, and keeping them here cost a second line at the very top
   of every page. */
@media(max-width:620px){
  .util .wrap{justify-content:center;gap:0}
  .util>.wrap>a[href^="mailto"],.util>.wrap>span:not(.sp){display:none}
}
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
       backdrop-filter:saturate(1.6) blur(9px);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;gap:22px;min-height:74px;flex-wrap:wrap}
/* The lockup is drawn, not an image: the mark is inline SVG and the name is live type,
   so it stays sharp on any display and the tagline is real text for a screen reader. */
.logo{font-family:var(--display);text-decoration:none;color:var(--black);
      white-space:nowrap;display:flex;align-items:center;gap:12px}
.logo .mark{height:50px;width:auto;display:block;flex:none}
.logo .wm{display:flex;flex-direction:column;line-height:1}
.logo .wm b{font-weight:800;font-size:21px;letter-spacing:.005em;color:var(--black)}
.logo .wm i{display:block;height:2px;margin:7px 0 6px;background:var(--gold-metal)}
.logo .wm em{font-style:normal;font-size:9.1px;font-weight:700;letter-spacing:.175em;
             text-transform:uppercase;color:var(--teal)}
/* Below 900 the tagline is the first thing to go: it is the least load-bearing half of
   the lockup and dropping it keeps the bar on one line instead of wrapping to two. */
@media(max-width:900px){
  .logo .mark{height:40px}
  .logo .wm b{font-size:17.5px}
  .logo .wm i,.logo .wm em{display:none}
}
nav{display:flex;gap:5px;flex-wrap:wrap;flex:1}
/* Below 900 the bar becomes two rows: the lockup and the booking button on the first,
   the links on their own scrolling strip below. Left to wrap, seven links turn into a
   seven-line column beside the button - 348px of chrome before the visitor sees a word
   of the page, on the device most of them arrive on. */
/* ⚠️ This was 900px, and the descriptive labels broke the band above it. Measured: the
   row needs 616px and only has that at a viewport of 1141px or more, so 901-1150 wrapped
   to two and three rows. The arithmetic if the labels change again —
   available = wrap - 525 (24px padding a side, 273 lockup, 160 button, two 22px gaps),
   and wrap itself caps at 1160, so a wider screen buys nothing. */
@media(max-width:1150px){
  header .wrap{min-height:0;padding-top:11px;padding-bottom:11px;gap:12px;
               flex-wrap:wrap;align-items:center}
  .logo{order:1;margin-right:auto}
  header>.wrap>.btn{order:2}
  nav{order:3;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:2px;
      scrollbar-width:none;margin:0 -24px;padding:2px 24px}
  nav::-webkit-scrollbar{display:none}
  nav a{flex:none}
  /* No dropdowns on the strip. `overflow-x:auto` would clip the panel anyway, and a
     hover menu on a touch screen either never opens or opens and will not close. The
     parent link still goes to the page, so nothing here is unreachable. */
  .navitem{flex:none}
  .navitem>.menu{display:none}
  .crt{display:none}
}
nav a{text-decoration:none;color:var(--slate);font-size:14.5px;font-weight:600;
      padding:8px 10px;border-radius:8px;white-space:nowrap}
nav a:hover{background:var(--bone);color:var(--ink)}
nav a.on{color:var(--black);background:var(--wash);box-shadow:inset 0 -2px 0 var(--gold)}

/* Dropdowns. Pauline's note was that a visitor cannot tell what a tab holds, so each
   menu row carries a one-line description rather than just another link.
   The parent is still a real link to a real page — the menu explains it, it does not
   replace it, so nothing becomes unreachable if the menu never opens. */
.navitem{position:relative;display:flex}
nav .navitem>a{display:inline-flex;align-items:center;gap:6px}
.crt{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
     transform:rotate(45deg) translate(-1px,-1px);opacity:.55;flex:none}
.menu{position:absolute;top:100%;left:0;min-width:322px;max-width:360px;
      background:var(--paper);border:1px solid var(--rule);border-radius:13px;
      box-shadow:0 20px 44px rgba(12,28,52,.17);padding:8px;z-index:60;
      opacity:0;visibility:hidden;transform:translateY(-5px);
      transition:opacity .14s ease,transform .14s ease,visibility .14s}
/* The bar has no padding under the links, so without this bridge the pointer crosses a
   dead gap on its way down and the menu closes under it. */
.menu:before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
/* ⚠️ The last menu is right-aligned, and that is a correctness fix rather than taste: a
   `visibility:hidden` absolutely-positioned box STILL counts towards the document's
   scroll width, so a left-aligned panel on the rightmost tab put a horizontal scrollbar
   on every page at 1160px without ever being opened. */
.navitem:last-child .menu{left:auto;right:0}
.navitem:hover>.menu,.navitem:focus-within>.menu{opacity:1;visibility:visible;transform:translateY(0)}
nav .menu a{display:block;white-space:normal;padding:9px 11px;border-radius:9px}
.menu a b{display:block;font-size:14.4px;font-weight:700;color:var(--ink);line-height:1.3}
.menu a span{display:block;font-size:12.9px;font-weight:500;color:var(--slate);
             margin-top:3px;line-height:1.46}
nav .menu a:hover,nav .menu a:focus-visible{background:var(--wash)}
nav .menu a:hover b{color:var(--teal-dk)}
@media(prefers-reduced-motion:reduce){.menu{transition:none}}
.btn{display:inline-block;text-decoration:none;font-family:var(--display);font-weight:700;
     font-size:15px;padding:13px 22px;border-radius:10px;border:1.5px solid transparent;
     cursor:pointer;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn.teal{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(14,138,140,.28)}
.btn.teal:hover{background:var(--teal-dk)}
.btn.dark{background:var(--black);color:#fff}
.btn.ghost{border-color:var(--rule);color:var(--ink);background:#fff}
.btn.sm{font-size:14px;padding:10px 16px}
/* Booking is the one action worth the gold. Used for that and nothing else, so the
   colour keeps meaning "this is the thing to press" rather than turning into decoration. */
.btn.gold{background:var(--gold);color:#17202e;border-color:#b0862f;
          box-shadow:0 6px 18px rgba(201,162,75,.34)}
.btn.gold:hover{background:var(--gold-lt)}

/* hero --------------------------------------------------------- */
.hero{background:linear-gradient(155deg,#0b1a33 0%,#12294b 60%,#18375f 100%);color:#fff;
      padding:76px 0 84px;position:relative;overflow:hidden;
      border-bottom:3px solid;border-image:var(--gold-metal) 1}
.hero:after{content:"";position:absolute;right:-160px;top:-120px;width:520px;height:520px;
            border-radius:50%;background:radial-gradient(circle,rgba(14,138,140,.30),transparent 68%)}
/* A faint diagonal weave, so the hero reads as a surface rather than a flat fill. */
.hero:before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 9px)}
.hero .wrap{position:relative;z-index:1}
.eyebrow{font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:.19em;
         text-transform:uppercase;color:var(--teal-lt);margin-bottom:16px}
.eyebrow:before{content:"";display:inline-block;width:26px;height:2px;margin-right:10px;
                vertical-align:middle;background:var(--gold-metal)}
.hero h1{max-width:17ch}
.hero .lede{font-size:19px;color:#cfdbe8;max-width:62ch;margin:20px 0 30px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.ticks{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:26px;
       border-top:1px solid rgba(255,255,255,.14)}
.ticks div{font-size:14.5px;color:#b9c3cf;font-weight:600}
.ticks b{color:var(--gold);margin-right:7px}

/* services ----------------------------------------------------- */
.hero.short{padding:56px 0 58px}
.hero.short h1{max-width:20ch}
/* ⚠️ These two were INLINE styles on seven heroes, which no media query can override -
   the same trap that left the booking page 56px wide on a phone. As classes, the mobile
   block at the end of this stylesheet can actually shrink them. */
.hero.pad-a{padding:62px 0 68px}
.hero.pad-b{padding:56px 0 62px}
/* Photo heroes. The navy gradient stays ON TOP of the photograph so every page still
   reads as the same hero and the text keeps its contrast. It runs LEFT-TO-RIGHT rather
   than evenly: near-opaque behind the copy, thinning towards the right so the picture
   is actually visible. An even overlay dark enough for text turns every photograph into
   a grey smudge - that was the first attempt and it was not worth shipping.
   url() is relative to style.css, which sits beside the images at the site root. */
.hero.photo{background-image:linear-gradient(100deg,rgba(11,26,51,.96) 0%,rgba(13,30,58,.90) 46%,rgba(18,41,75,.58) 100%),var(--shot);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hero.photo:before{opacity:.18}
.hero.photo h1,.hero.photo .lede{text-shadow:0 1px 18px rgba(8,18,36,.45)}
/* The picture is named once, as a custom property, so the media query below can restate
   the overlay without having to repeat every url(). */
.hero.ph-areas{--shot:url(atlanta-metro.jpg)}
.hero.ph-emp{--shot:url(hero-employers.jpg)}
.hero.ph-att{--shot:url(hero-attorneys.jpg)}
.hero.ph-home{--shot:url(hero-home.jpg)}
.hero.ph-dna{--shot:url(hero-dna.jpg)}
/* ⚠️ NOT on the About page. A prominent stock face beside "About us" reads as
   Pauline, and assets/CREDITS.md forbids presenting a stock person as her or as
   any named team member. On Services it is generic context and implies nobody. */
.hero.ph-services{--shot:url(hero-services.jpg)}
/* Below 760 the copy fills the full width, so a directional overlay would put the
   headline straight on somebody's face. Flat wash instead. */
@media(max-width:760px){
  .hero.photo{background-image:linear-gradient(160deg,rgba(11,26,51,.955) 0%,rgba(18,41,75,.93) 100%),var(--shot)}
}
/* The category jump bar sticks under the header, so on a page this long you always
   have the whole range one click away instead of scrolling back up for it. */
.jump{position:sticky;top:73px;z-index:30;background:var(--navy-dk);
      border-bottom:1px solid rgba(255,255,255,.1)}
.jump .wrap{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px;
            scrollbar-width:none}
.jump .wrap::-webkit-scrollbar{display:none}
.jump a{flex:none;text-decoration:none;color:#c2cddb;font-family:var(--display);
        font-weight:700;font-size:13.5px;letter-spacing:.01em;padding:7px 13px;
        border-radius:8px;white-space:nowrap}
.jump a:hover{background:rgba(255,255,255,.09);color:#fff}
.svcat{padding:58px 0;border-bottom:1px solid var(--rule);scroll-margin-top:124px}
.svcat:nth-of-type(even){background:var(--bone)}
.svchd{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px;max-width:760px}
.svchd .ico{width:52px;height:52px;border-radius:14px;background:var(--navy-dk);
            color:var(--gold-lt);display:flex;align-items:center;justify-content:center;
            border:1px solid var(--gold);flex:none}
.svchd .ico svg{width:26px;height:26px}
.svchd p{color:var(--slate);font-size:17px;margin:10px 0 0}
.svclist{display:grid;gap:0;border-top:1px solid var(--rule)}
.svc{display:grid;grid-template-columns:minmax(210px,.85fr) 2fr;gap:22px;
     padding:17px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.svc-t{font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--black);
       letter-spacing:-.012em}
.svc-d{color:var(--slate);font-size:15.4px}
@media(max-width:700px){
  .svc{grid-template-columns:1fr;gap:5px;padding:15px 0}
  .svchd{gap:14px}
  .jump{top:65px}
}

/* sections ----------------------------------------------------- */
section{padding:70px 0}
section.bone{background:var(--bone)}
section.dark{background:var(--navy-dk);color:#fff}
section.dark p{color:#bcc5d1}
.sechd{max-width:680px;margin-bottom:38px}
.sechd .eyebrow{color:var(--teal)}
section.dark .sechd .eyebrow{color:var(--teal-lt)}
.sechd p{color:var(--slate);font-size:17.5px;margin:14px 0 0}
section.dark .sechd p{color:#b4bdc9}

.grid{display:grid;gap:20px}
/* 400px, not 300: at 300 a four-card set laid out 3 + 1 and left an orphan.
   min() so the 400 floor collapses on a phone instead of forcing a sideways scroll. */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
/* The booking page is the one fixed two-column layout — form left, contact panel right —
   and every other grid here collapses on its own through auto-fit. This one was written
   as an INLINE style, which no media query can override, so it never collapsed: at 390px
   the 260px floor on the right column left about 56px for the form, and the confirmation
   box rendered one word per line underneath the contact cards. A class, so it can. */
.gbook{grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);gap:26px}
@media(max-width:860px){.gbook{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:26px}
section.bone .card{background:#fff}
.card h3{margin-bottom:9px}
.card p{color:var(--slate);font-size:15.2px;margin:0}
.card .tag{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.13em;
           text-transform:uppercase;color:var(--teal);margin-bottom:11px}
.card .ico{width:42px;height:42px;border-radius:12px;background:var(--navy-dk);
           color:var(--gold-lt);display:flex;align-items:center;justify-content:center;
           margin-bottom:16px;border:1px solid var(--gold)}
.card .ico svg{width:22px;height:22px}
.card .ico + .tag{margin-bottom:9px}
.card.link{text-decoration:none;display:block;transition:border-color .15s,transform .15s}
.card.link:hover{border-color:var(--teal);transform:translateY(-2px)}
.card .more{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--teal);
            margin-top:14px;display:block}
.allsvc{margin:24px 0 0;font-family:var(--display);font-weight:700;font-size:16px}
.allsvc a{color:var(--teal);text-decoration:none;border-bottom:2px solid var(--gold);
          padding-bottom:2px}
.allsvc a:hover{color:var(--teal-dk)}

/* the two-audience split -------------------------------------- */
/* min() so the 320 floor collapses on a phone instead of forcing a sideways scroll -
   the same guard .g2 already had. Without it this was 16px of horizontal page scroll
   on a 320px screen, and it was the only real overflow on the site. */
.split{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.lane{border-radius:16px;padding:34px;border:1px solid var(--rule);background:#fff;
      display:flex;flex-direction:column}
.lane.g{background:linear-gradient(170deg,#e9f5f5,#fff);border-color:#b9dede}
.lane h3{font-size:24px;margin-bottom:12px}
.lane ul{margin:0 0 22px;padding-left:19px;color:var(--slate);font-size:15.4px}
.lane li{margin-bottom:7px}
.lane .btn{align-self:flex-start;margin-top:auto}

/* steps -------------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{position:relative;padding:28px 24px 24px;background:#fff;border:1px solid var(--rule);border-radius:14px}
.step:before{counter-increment:s;content:counter(s);position:absolute;top:-15px;left:24px;
   width:34px;height:34px;border-radius:50%;background:var(--black);color:var(--gold-lt);
   border:2px solid var(--gold);
   font-family:var(--display);font-weight:800;font-size:16px;display:flex;
   align-items:center;justify-content:center}
.step h3{font-size:17px;margin:6px 0 8px}
.step p{color:var(--slate);font-size:14.8px;margin:0}

/* pricing ------------------------------------------------------ */
.price{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.tier{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:30px;
      display:flex;flex-direction:column}
.tier.feat{border:2px solid var(--teal);box-shadow:0 14px 40px rgba(14,138,140,.16)}
.tier .kind{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.16em;
            text-transform:uppercase;color:var(--teal)}
.tier .amt{font-family:var(--display);font-size:42px;font-weight:800;letter-spacing:-.03em;margin:12px 0 2px}
.tier .amt small{font-size:15px;font-weight:700;color:var(--mute);letter-spacing:0}
.tier .from{font-size:13.5px;color:var(--mute);margin-bottom:18px}
.tier ul{list-style:none;margin:0 0 24px;padding:0;font-size:15px;color:var(--slate)}
.tier li{padding:8px 0 8px 26px;position:relative;border-top:1px solid var(--rule)}
.tier li:before{content:"";position:absolute;left:2px;top:15px;width:11px;height:6px;
   border-left:2.4px solid var(--gold);border-bottom:2.4px solid var(--gold);transform:rotate(-45deg)}
.tier li.no{color:var(--mute)}
.tier li.no:before{border:0;content:"\2014";left:3px;top:8px;transform:none;color:var(--mute);
   font-weight:700;width:auto;height:auto}
.tier .btn{margin-top:auto}
.pricenote{margin-top:24px;font-size:14.6px;color:var(--slate);background:var(--wash);
   border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:15px 18px}

/* misc --------------------------------------------------------- */
.stats{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
       background:var(--rule);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.stats.two{grid-template-columns:repeat(2,1fr)}   /* 4 stats beside a quote, not 3 + a gap */
.stat{background:#fff;padding:26px 22px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:32px;font-weight:800;
        letter-spacing:-.03em;color:var(--black)}
.stat span{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.quote{background:#fff;border:1px solid var(--rule);border-left:4px solid var(--gold);
       border-radius:0 14px 14px 0;padding:28px 30px}
.quote p{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.015em;
         color:var(--ink);margin:0 0 12px;line-height:1.4}
.quote cite{font-style:normal;font-size:14.5px;color:var(--mute);font-weight:600}
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-family:var(--display);
             font-weight:700;font-size:17.5px;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:8px;top:17px;font-size:24px;
                   color:var(--teal);font-weight:700}
.faq details[open] summary:after{content:"\2013"}
.faq .a{padding:0 40px 22px 0;color:var(--slate);font-size:15.6px}
.faq .a p:last-child{margin-bottom:0}
.cty{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:26px}
.cty h3{color:var(--black);margin-bottom:6px}
.cty .n{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
        color:var(--teal);margin-bottom:12px}
.cty p{font-size:15px;color:var(--slate);margin:0}
.maprow{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
        align-items:start}
.mapbox{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:16px}
.mapbox svg{width:100%;height:auto}
.mapbox .cn{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.11em;
            fill:#0f2344;text-anchor:middle}
.mapbox .hq{font-family:var(--body);font-size:11.5px;font-weight:700;fill:var(--slate);
            text-anchor:middle}
.band{background:linear-gradient(120deg,#18375f,#0b1a33);border-top:3px solid;border-image:var(--gold-metal) 1;color:#fff;border-radius:18px;
      padding:46px 40px;text-align:center}
.band h2{margin-bottom:12px}
.band p{color:#c6d3e2;max-width:58ch;margin:0 auto 26px}
.band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* legal pages --------------------------------------------------- */
/* Long-form prose rather than cards. These run to a few thousand words and a card grid
   would make them unreadable; the constraint here is line length and vertical rhythm. */
.legal{font-size:16.4px;color:var(--ink)}
.legal h2{font-size:23px;margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--rule)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:26px}
.legal h3{font-size:17.5px;margin:24px 0 8px;color:var(--ink)}
.legal p{color:var(--slate);line-height:1.68;max-width:70ch}
.legal ul{margin:0 0 16px;padding-left:22px;color:var(--slate);max-width:70ch}
.legal li{margin-bottom:9px;line-height:1.62}
.legal strong,.legal b{color:var(--ink)}
.legal .updated{font-size:14px;color:var(--mute);margin-bottom:0}
/* Generic: used by the legal pages and by the booking form's "not switched on yet"
   notice. Scoping it to .legal once meant the booking notice rendered unstyled. */
.callout{background:var(--teal-wash);border:1px solid #bfe0df;border-radius:12px;
   padding:16px 18px;margin:22px 0;max-width:70ch}
.callout p{color:var(--ink);margin:0;font-size:15px;line-height:1.55}
.callout a{color:var(--teal-dk);font-weight:700}

/* form --------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:32px}
.fgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fld{display:flex;flex-direction:column;gap:6px}
.fld.full{grid-column:1/-1}
.fld label{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.fld input,.fld select,.fld textarea{font-family:inherit;font-size:15.5px;padding:12px 13px;
  border:1px solid var(--rule);border-radius:9px;background:#fff;color:var(--ink);width:100%}
.fld textarea{min-height:112px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--teal-lt);border-color:var(--teal)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14.4px;color:var(--slate);margin-top:4px}
.consent input{margin-top:4px;width:17px;height:17px;flex:none}
.privacy{margin-top:18px;font-size:13.6px;color:var(--slate);background:var(--bone);
         border-radius:10px;padding:14px 16px}
.sent{display:none;background:var(--ok-wash);border:1px solid #bfe0d3;color:var(--ok);
      border-radius:11px;padding:16px 18px;font-weight:600;margin-bottom:20px}

/* footer ------------------------------------------------------- */
footer{background:var(--navy-dk);color:#9fb0c6;border-top:3px solid;border-image:var(--gold-metal) 1;padding:58px 0 26px;font-size:14.6px;margin-top:0}
footer h4{font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:.15em;
          text-transform:uppercase;color:var(--gold-lt);margin-bottom:15px}
footer .tagline{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
                color:var(--teal-lt);margin:-8px 0 14px}
footer a{color:#c3cbd5;text-decoration:none}
footer a:hover{color:#fff}
footer .cols{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer .fine{margin-top:42px;padding-top:22px;border-top:1px solid #1d3152;
             display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#6f7b8a}
footer .fine .sp{flex:1}
.disclaim{background:#10223f;border:1px solid #1d3152;border-radius:12px;padding:18px 20px;
          margin-bottom:34px;font-size:14px;color:#9aa5b3}
.disclaim b{color:#cfd7e1}
@media(max-width:760px){
  nav{order:3;width:100%;justify-content:flex-start}
  header .wrap{min-height:auto;padding-top:12px;padding-bottom:12px}
  section{padding:52px 0}
  .hero{padding:56px 0 62px}
  .band{padding:34px 24px}
}

/* ===================================================================== mobile
   Added 2026-09-25 after measuring the live build on a phone. The page was not
   broken in the sense of overflowing - it was broken in the sense of being unusable:
   214px of the 844px screen (a QUARTER of it) was chrome before a word of content,
   because the booking button wrapped onto a row of its own; 246-316px of the nav sat
   off-screen with nothing to suggest it scrolled, cutting "Workplace Compliance" to
   "Workplace Cor"; and the opening paragraph ran 412 characters at 19px.
   Numbers here are measured, not guessed. */
@media(max-width:760px){
  /* One row: lockup left, booking button right. The lockup must be allowed to SHRINK -
     without min-width:0 a flex item refuses to go below its content width and pushes
     the button onto its own line, which is exactly what it was doing. */
  .logo{min-width:0;flex:0 1 auto;overflow:hidden}
  .logo .wm b{font-size:16px;white-space:nowrap}
  .logo .mark{height:34px}
  header>.wrap>.btn{flex:none;font-size:13px;padding:9px 13px;white-space:nowrap}
  header .wrap{gap:10px;padding-top:9px;padding-bottom:9px}

  /* The strip scrolls, so say so. Without the fade the last tab looks truncated rather
     than scrollable, and nobody swipes a thing they think is broken. */
  nav{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent 100%);
      mask-image:linear-gradient(90deg,#000 84%,transparent 100%)}

  .hero.pad-a{padding:40px 0 44px}
  .hero.pad-b{padding:38px 0 42px}
  .hero.short{padding:36px 0 38px}
  .hero .lede{font-size:16.5px;margin:14px 0 22px}
  .hero .cta{gap:9px}
  .hero .cta .btn{flex:1 1 auto;text-align:center}
  section{padding:46px 0}
}
/* ⚠️ THE HEADER IS A THREE-ROW STACK UNTIL THE LOCKUP AND THE BUTTON SHARE A ROW, and
   the margin is tiny: at 390px the content box is 342px while lockup + gap + button
   wanted 345px. Three pixels bought a whole extra row, 44px of it. These tiers are
   measured against 414 / 390 / 360 / 320; re-measure if the wordmark or button copy
   changes, because both are load-bearing here. */
@media(max-width:420px){
  header .wrap{padding-left:16px;padding-right:16px;gap:8px}
  header>.wrap>.btn{font-size:12.5px;padding:8px 11px}
  /* At 390 and below the second hero button was wrapping to a line of its own. */
  .hero .cta .btn{flex:1 1 100%}
  .ticks{gap:8px}
}
@media(max-width:375px){
  .logo .wm b{font-size:14.5px}
  .logo .mark{height:29px}
  header>.wrap>.btn{font-size:12px;padding:8px 10px}
}
/* 320px - the narrowest phone still in real use. Four more pixels were the difference
   between a two-row header and a three-row one, again. */
@media(max-width:340px){
  .logo .wm b{font-size:13.5px}
  .logo .mark{height:26px}
  header>.wrap>.btn{font-size:11.5px;padding:7px 7px}
  header .wrap{gap:6px}
  .lane{padding:22px}
  .formcard{padding:20px}
}
/* 320px is the narrowest phone still in use. The nav strip's negative margins were
   pushing the DOCUMENT 24px wide there - the strip is meant to scroll inside itself,
   not to scroll the page. */
@media(max-width:340px){
  nav{margin:0 -16px;padding:2px 16px}
  .wrap{padding:0 16px}
}