/* ==========================================================================
   Simply HR — simplyhrconsulting.com
   --------------------------------------------------------------------------
   Sibling of the PestWorld landing page: same brand language, own composition.

   Signature carried over: "the rise" — the stroke from the Simply HR mark
   where the checkmark kicks up into an arrow. It is the headline underline,
   the list bullet, and the chamfered top-right corner shared by every card,
   island and button.

   Signature owned by THIS site: the SIMPLE letterforms. Six single-stroke,
   round-capped glyphs (the client's own brand SVGs) drawn in exactly the
   stroke language of the icon set, set large as the framework section.

   One disciplined blue family from the logo. Every photograph is graded into
   that family so images and surfaces never fight.

   Note on the chamfer: clip-path also clips borders and outer shadows, so
   nothing chamfered carries either. Separation comes from tone instead,
   which is the better move anyway.
   ========================================================================== */

/* ---------- fonts (self-hosted, no external requests) ---------- */
@font-face{font-family:Cabinet;src:url(assets/fonts/cabinet-700.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Cabinet;src:url(assets/fonts/cabinet-800.woff2)format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(assets/fonts/switzer-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(assets/fonts/switzer-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(assets/fonts/switzer-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(assets/fonts/switzer-700.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --navy-9:#06172c;
  --navy-8:#0a2340;
  --navy-7:#0e2c4f;
  --blue:#68b1ff;          /* the logo blue */
  --blue-2:#3d95f5;
  --act:#1668d6;           /* the single action colour */
  --act-hi:#1f79ee;
  --paper:#f5f9fe;         /* base light ground */
  --paper-2:#ffffff;       /* card surface */
  --paper-3:#e9f0fa;       /* ground under white cards, so they read by tone */
  --ink:#0b1f33;
  --ink-2:#4f6377;
  --ink-3:#57697d;
  --line:rgba(11,31,51,.13);
  --line-dk:rgba(168,211,255,.20);
  --flag:#b8791a;

  --disp:Cabinet,"Trebuchet MS",system-ui,sans-serif;
  --body:Switzer,system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:800;line-height:1.04;letter-spacing:-.021em}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}
table{border-collapse:collapse}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* bespoke icon set — one stroke rule for every mark on the site */
.ic{width:30px;height:30px;flex:none;fill:none;stroke:var(--act);stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round}
.ic--lg{width:38px;height:38px}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--act);color:#fff;
      padding:12px 20px;font-weight:600;transition:top .18s}
.skip:focus{top:12px}

:focus-visible{outline:3px solid var(--act);outline-offset:3px}
.hero :focus-visible,.ledger :focus-visible,.talk :focus-visible,.foot :focus-visible{
  outline-color:var(--blue)
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* Anything still waiting on the team is flagged, so nothing placeholder can
   reach the live site unnoticed. Remove the attribute once it is filled in. */
[data-edit]{
  text-decoration:underline dotted rgba(212,150,52,.9);
  text-underline-offset:.28em;
  text-decoration-thickness:1.5px;
}

/* ==========================================================================
   BUTTONS — one action colour, a chamfered corner, no lift, no glow
   ========================================================================== */
.btn{
  --cut:11px;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--body);font-size:.97rem;font-weight:600;line-height:1;
  --padY:16px;
  padding:calc(var(--padY) - .1em) 26px calc(var(--padY) + .1em);
  border:0;cursor:pointer;text-decoration:none;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  transition:background-color .18s ease,color .18s ease;
}
.btn--go{background:var(--act);color:#fff}
.btn--go:hover,.btn--go:focus-visible{background:var(--act-hi)}
/* the quiet action is a soft fill, not an outline — an outline cannot survive
   the chamfer, and a fill/outline pair is a tired default anyway */
.btn--quiet{background:rgba(22,104,214,.10);color:var(--act)}
.btn--quiet:hover,.btn--quiet:focus-visible{background:rgba(22,104,214,.18)}
/* secondary action on a dark ground */
.btn--soft{background:rgba(104,177,255,.17);color:#fff}
.btn--soft:hover,.btn--soft:focus-visible{background:rgba(104,177,255,.27)}
.btn--wide{width:100%;--padY:18px}
.btn--big{--padY:19px;padding-inline:34px;font-size:1.02rem}

/* the arrow travels along its own diagonal */
.ar{position:relative;top:.1em;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;
    transition:transform .22s cubic-bezier(.3,.8,.4,1)}
.btn:hover .ar,.btn:focus-visible .ar{transform:translate(2.5px,-2.5px)}

/* ==========================================================================
   THE RISE — the headline underline, drawn once and reused
   ========================================================================== */
.u{position:relative;display:inline-block;color:var(--act);padding-bottom:.16em}
.u::after{
  content:"";position:absolute;left:-.02em;right:-.06em;bottom:0;height:.20em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 20' preserveAspectRatio='none'%3E%3Cpath d='M5 15.5C48 8.8 108 4.6 168 4.2c30-.2 60 .9 87 3.1' fill='none' stroke='%233d95f5' stroke-width='5.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
/* on the dark grounds the stroke stays the logo blue and the words stay white */
.hero .u,.talk .u,.ledger .u{color:#fff}
.hero .u::after,.talk .u::after,.ledger .u::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 20' preserveAspectRatio='none'%3E%3Cpath d='M5 15.5C48 8.8 108 4.6 168 4.2c30-.2 60 .9 87 3.1' fill='none' stroke='%2368b1ff' stroke-width='5.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* the same stroke, shrunk to a list bullet */
.rise-bullet li{position:relative;padding-left:22px}
.rise-bullet li::before{
  content:"";position:absolute;left:0;top:.52em;width:12px;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 6.6 4.4 3.2 7 5 10.6 1.4' fill='none' stroke='%233d95f5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background-color .25s ease,box-shadow .25s ease}
.nav.is-stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.4);
              box-shadow:0 1px 0 var(--line)}
.nav__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand__mark{width:46px;height:auto}
/* the mark has to swap: its figures are white on the hero, ink on the white bar */
.brand__mark--dark{display:none}
.nav.is-stuck .brand__mark--light{display:none}
.nav.is-stuck .brand__mark--dark{display:block}
.brand__txt{display:flex;flex-direction:column;line-height:1.12}
.brand__txt b{font-family:var(--disp);font-weight:800;font-size:1.19rem;letter-spacing:-.02em;color:#fff}
.brand__txt i{font-style:normal;font-size:.665rem;font-weight:600;letter-spacing:.11em;
              text-transform:uppercase;color:rgba(255,255,255,.72)}
.nav.is-stuck .brand__txt b{color:var(--ink)}
.nav.is-stuck .brand__txt i{color:var(--ink-2)}

.nav__links{display:flex;gap:clamp(14px,2.2vw,30px)}
.nav__links a{
  text-decoration:none;font-size:.93rem;font-weight:500;color:rgba(255,255,255,.86);
  padding-block:6px;transition:color .18s ease;
}
.nav__links a:hover{color:#fff}
.nav__links a.is-here{color:#fff;font-weight:600}
.nav.is-stuck .nav__links a{color:var(--ink-2)}
.nav.is-stuck .nav__links a:hover,.nav.is-stuck .nav__links a.is-here{color:var(--act)}
.nav__cta{--padY:13px;padding-inline:22px;font-size:.92rem}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.burger__box{display:block;width:24px}
.burger__box i{display:block;height:2.2px;border-radius:2px;background:#fff;
               transition:transform .22s ease,background-color .25s ease}
.burger__box i+i{margin-top:6px}
.nav.is-stuck .burger__box i{background:var(--ink)}
.burger[aria-expanded="true"] .burger__box i:first-child{transform:translateY(4.1px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:last-child{transform:translateY(-4.1px) rotate(-45deg)}

.menu{display:none;flex-direction:column;background:var(--navy-8);padding:8px var(--pad) 22px}
.menu a{text-decoration:none;color:#fff;font-weight:500;padding:13px 0;border-bottom:1px solid var(--line-dk)}
.menu a:last-child{border-bottom:0;color:var(--blue);font-weight:600}

@media (max-width:960px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block}
  .menu:not([hidden]){display:flex}
  .nav:has(.menu:not([hidden])){background:var(--navy-8)}
  .nav:has(.menu:not([hidden])) .brand__txt b{color:#fff}
  .nav:has(.menu:not([hidden])) .brand__txt i{color:rgba(255,255,255,.72)}
  .nav:has(.menu:not([hidden])) .brand__mark--light{display:block}
  .nav:has(.menu:not([hidden])) .brand__mark--dark{display:none}
  .nav:has(.menu:not([hidden])) .burger__box i{background:#fff}
}

/* ==========================================================================
   HERO — owns the fold; the photograph is the artifact, feathered into the
   navy it sits on so there is no seam anywhere
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--navy-9);
  padding-top:120px;
  overflow:hidden;
}
.hero__photo{
  position:absolute;inset:-8% 0 0;z-index:0;
  background:url(assets/hr-table.webp) 62% 30%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,
     #000 0%,#000 30%,rgba(0,0,0,.96) 39%,rgba(0,0,0,.88) 47%,rgba(0,0,0,.76) 55%,
     rgba(0,0,0,.60) 62%,rgba(0,0,0,.44) 69%,rgba(0,0,0,.29) 75%,
     rgba(0,0,0,.17) 81%,rgba(0,0,0,.08) 88%,rgba(0,0,0,.03) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,
     #000 0%,#000 30%,rgba(0,0,0,.96) 39%,rgba(0,0,0,.88) 47%,rgba(0,0,0,.76) 55%,
     rgba(0,0,0,.60) 62%,rgba(0,0,0,.44) 69%,rgba(0,0,0,.29) 75%,
     rgba(0,0,0,.17) 81%,rgba(0,0,0,.08) 88%,rgba(0,0,0,.03) 94%,transparent 100%);
  will-change:transform;
}
/* directional legibility wash — starts and ends transparent so it can never
   band against a section edge */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(6,23,44,.88) 0%,rgba(6,23,44,.71) 38%,rgba(6,23,44,.30) 68%,rgba(6,23,44,.08) 100%),
    linear-gradient(180deg,rgba(6,23,44,.70) 0%,rgba(6,23,44,.14) 25%,rgba(6,23,44,0) 45%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url(assets/grain.png);background-size:128px 128px;
  opacity:.055;mix-blend-mode:overlay;
}
.hero__in{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--pad) clamp(30px,4.5vh,48px);
}
/* The headline breaks exactly twice, where the <br> says, and never
   staircases: the width is set from the longer of the two lines. */
.hero__copy{max-width:min(100%,940px)}
.hero__h{
  font-size:clamp(2.15rem,4.7vw,4.05rem);color:#fff;
  letter-spacing:-.032em;text-wrap:nowrap;
}
@media (max-width:640px){
  .hero__h{font-size:clamp(1.8rem,7.7vw,2.5rem);text-wrap:balance}
}
.hero__h .u{margin-top:.06em}
.hero__lede{
  margin-top:clamp(18px,2.6vh,26px);max-width:46ch;
  font-size:clamp(1.02rem,.5vw + .92rem,1.2rem);
  color:rgba(220,235,255,.9);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.4vh,34px)}

/* the base of the fold: four plain credentials, no chips, no tiles */
.hero__rail{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(20px,2.6vh,26px) var(--pad) clamp(24px,3.4vh,34px);
  margin-top:clamp(28px,4.6vh,52px);
  border-top:1px solid var(--line-dk);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.6vw,40px);
}
.hero__rail div{min-width:0}
.hero__rail dt{
  font-family:var(--disp);font-weight:800;font-size:clamp(1.02rem,1.5vw,1.32rem);
  color:#fff;letter-spacing:-.02em;line-height:1.15;
}
.hero__rail dd{margin:6px 0 0;font-size:.845rem;color:rgba(190,220,255,.72);line-height:1.45}

@media (max-width:820px){
  .hero__rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
  .hero__copy{max-width:none}
}

/* ==========================================================================
   THE LEDGER — continuous with the hero's navy: one dark opening block, no
   seam between them. The cost of doing nothing, in the client's own figures.
   ========================================================================== */
.ledger{background:var(--navy-9);color:#fff;position:relative;isolation:isolate}
.ledger::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(assets/grain.png);background-size:128px 128px;
  opacity:.05;mix-blend-mode:overlay;
}
.ledger .wrap{position:relative;z-index:1;padding-block:clamp(58px,8vw,96px)}
.ledger__h{font-size:clamp(1.7rem,3.4vw,2.6rem);color:#fff;max-width:20ch}
.ledger__lede{margin-top:14px;max-width:56ch;color:rgba(214,232,255,.82);font-size:1.01rem}
.ledger__grid{
  margin-top:clamp(36px,4.6vw,56px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line-dk);
}
.ledger__grid>div{background:var(--navy-9);padding:clamp(22px,2.4vw,30px) clamp(18px,2vw,26px)}
.ledger dt{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2rem,3.9vw,2.9rem);letter-spacing:-.035em;color:var(--blue);
  line-height:1;
}
.ledger .lg-name{
  margin-top:12px;font-family:var(--disp);font-weight:700;font-size:1.02rem;
  color:#fff;letter-spacing:-.018em;line-height:1.2;
}
.ledger dd{margin:8px 0 0;font-size:.88rem;color:rgba(190,220,255,.72);line-height:1.5}
@media (max-width:900px){.ledger__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ledger__grid{grid-template-columns:1fr}}

/* ==========================================================================
   SECTION FURNITURE
   ========================================================================== */
.sec{padding-block:clamp(64px,9vw,120px)}
.sec--tint{background:var(--paper-3)}
.sec__head{margin-bottom:clamp(38px,5vw,60px);max-width:62ch}
.sec__h{font-size:clamp(1.75rem,3.6vw,2.75rem);letter-spacing:-.028em;text-wrap:balance}
.lede{margin-top:16px;font-size:clamp(1rem,.4vw + .93rem,1.12rem);color:var(--ink-2);max-width:60ch}

.cut-s{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.cut-m{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}

/* ==========================================================================
   FAMILIAR — the five questions, set as questions and nothing else
   ========================================================================== */
.fam{background:var(--paper)}
/* centred, not top-aligned: a short left column against a tall list would
   otherwise strand a large void under the heading */
.fam__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(34px,5vw,72px);align-items:center}
.fam__h{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em;max-width:14ch}
.fam__close{
  margin-top:clamp(26px,3vw,36px);font-size:clamp(1.02rem,.5vw + .92rem,1.16rem);
  color:var(--ink-2);max-width:40ch;
}
.fam__close b{color:var(--ink);font-weight:600}
.fam__list{display:flex;flex-direction:column}
.fam__list li{
  padding:clamp(18px,2.1vw,24px) 0;
  border-bottom:1px solid var(--line);
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.05rem,1.55vw,1.34rem);
  letter-spacing:-.019em;line-height:1.33;color:var(--ink);
  display:flex;gap:clamp(14px,1.6vw,20px);align-items:flex-start;
}
.fam__list li:first-child{padding-top:0}
.fam__list li:last-child{border-bottom:0;padding-bottom:0}
.fam__n{
  flex:none;font-family:var(--body);font-weight:600;font-size:.78rem;
  color:var(--act);line-height:1.9;letter-spacing:.02em;
}
@media (max-width:860px){.fam__grid{grid-template-columns:1fr;gap:34px}.fam__h{max-width:20ch}}

/* ==========================================================================
   LENSES — every decision filtered through four of them
   ========================================================================== */
/* two across, not four: at four the measure collapses to ~28 characters and
   the longest lens runs nine cramped lines against the shortest one's six */
.lens__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.lens{
  background:var(--paper-2);padding:clamp(24px,2.4vw,32px);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  display:flex;flex-direction:column;
}
.lens__k{
  margin-top:20px;font-family:var(--body);font-weight:700;font-size:.735rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--act);
}
.lens__h{margin-top:9px;font-size:1.16rem;letter-spacing:-.022em;line-height:1.22}
.lens__p{margin-top:12px;font-size:.925rem;color:var(--ink-2);line-height:1.58}
@media (max-width:640px){.lens__grid{grid-template-columns:1fr}}



/* ==========================================================================
   INDUSTRIES — real photographs, no overlay-caption card preset
   ========================================================================== */
.inds__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.ind{
  display:flex;flex-direction:column;text-decoration:none;background:var(--paper-2);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  transition:background-color .2s ease;
}
.ind:hover,.ind:focus-visible{background:#fff}
.ind__pic{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.ind__pic,.ind__pic picture{display:block;width:100%;height:100%;max-width:100%}
.ind__pic img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.3,.8,.4,1)}
.ind:hover .ind__pic img,.ind:focus-visible .ind__pic img{transform:scale(1.035)}
.ind__body{padding:clamp(18px,1.9vw,24px);display:flex;flex-direction:column;flex:1}
.ind__h{font-size:1.08rem;letter-spacing:-.022em;line-height:1.22}
.ind__p{margin-top:10px;font-size:.9rem;color:var(--ink-2);line-height:1.55;flex:1}
.ind__go{
  margin-top:16px;display:inline-flex;align-items:center;gap:.5em;
  font-size:.87rem;font-weight:600;color:var(--act);
}
.ind__go .ar{width:13px;height:13px}
.ind:hover .ind__go .ar,.ind:focus-visible .ind__go .ar{transform:translate(2.5px,-2.5px)}
.inds__all{margin-top:clamp(28px,3.4vw,40px)}
@media (max-width:1000px){.inds__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.inds__grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   COMPARISON — a real table, because this is real tabular data
   ========================================================================== */
.cmp__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* fixed layout, or the one long cell ("compliance, recruiting, employee
   relations, safety") drags its whole column wide and squeezes the rest */
.cmp{width:100%;min-width:760px;font-size:.925rem;background:var(--paper-2);table-layout:fixed}
.cmp col.c-lbl{width:19%}
.cmp col.c-us{width:25%}
.cmp col.c-alt{width:18.66%}
.cmp caption{text-align:left;padding:0 0 18px;color:var(--ink-2);font-size:.92rem}
.cmp th,.cmp td{padding:16px clamp(14px,1.5vw,20px);text-align:left;vertical-align:top;
                border-bottom:1px solid var(--line)}
.cmp thead th{
  font-family:var(--disp);font-weight:800;font-size:.98rem;letter-spacing:-.018em;
  color:var(--ink);border-bottom:2px solid var(--line);
}
/* plain, not a third helping of tracked caps */
.cmp thead th:first-child{color:var(--ink-3);font-family:var(--body);font-weight:500;font-size:.87rem;
  letter-spacing:0}
.cmp tbody th{font-weight:600;color:var(--ink);width:20%}
.cmp td{color:var(--ink-2)}
.cmp .is-us{background:rgba(22,104,214,.055);color:var(--ink);font-weight:600}
.cmp thead .is-us{background:rgba(22,104,214,.09);color:var(--act)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp__note{margin-top:14px;font-size:.85rem;color:var(--ink-3)}

/* ==========================================================================
   PRICING BLURB — the short version. The real cards live on How it works.
   ========================================================================== */
.price__island{
  background:var(--paper-2);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);
  padding:clamp(28px,3.2vw,44px);
}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.tier{background:var(--paper-2);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
/* deliberately NOT the tracked-caps costume the lens keys wear: if every
   small label on the page looks identical the page reads as a template */
.tier__k{font-family:var(--body);font-weight:500;font-size:.855rem;color:var(--ink-3)}
.tier__h{margin-top:10px;font-size:1.32rem;letter-spacing:-.024em}
.tier__p{margin-top:10px;font-size:.925rem;color:var(--ink-2);line-height:1.55;flex:1}
.tier__cost{margin-top:18px;font-family:var(--disp);font-weight:800;font-size:1.06rem;
            letter-spacing:-.02em;color:var(--ink)}
.price__foot{
  margin-top:clamp(26px,3vw,36px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
}
.price__foot p{font-size:.95rem;color:var(--ink-2);max-width:52ch}
@media (max-width:820px){.tiers{grid-template-columns:1fr}}

/* ==========================================================================
   SAID — two real clients. No quote glyph, no avatar-on-a-gradient.
   ========================================================================== */
.said__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.said__q{
  margin:0;background:var(--paper-2);padding:clamp(26px,3vw,40px);
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
  display:flex;flex-direction:column;height:100%;
}
/* blockquote carries a 40px UA margin — clear it, or the quote sits inset
   from the card padding on both sides */
.said__t{
  margin:0;
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.06rem,1.5vw,1.28rem);letter-spacing:-.019em;line-height:1.42;
  color:var(--ink);flex:1;
}
/* top-aligned so both cards' names sit on one line, whatever the length of
   the role underneath */
.said__by{margin-top:clamp(22px,2.4vw,30px);display:flex;align-items:flex-start;gap:14px}
.said__by img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.said__who{min-width:0;padding-top:2px}
.said__n{display:block;font-family:var(--disp);font-weight:800;font-size:1rem;
         letter-spacing:-.018em;color:var(--ink);line-height:1.25}
.said__r{display:block;margin-top:4px;font-size:.83rem;color:var(--ink-2);line-height:1.42}
@media (max-width:820px){.said__grid{grid-template-columns:1fr}}

/* ==========================================================================
   TEAM TEASER
   ========================================================================== */
.about__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
             gap:clamp(34px,5vw,72px);align-items:center}
/* a real grid, so both rows sit on shared lines: a longer role in one card
   can never shove its neighbours out of step */
.faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.face{min-width:0;display:grid;grid-template-rows:auto auto 1fr;align-content:start}
.face img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 22%;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.face b{margin-top:10px;font-family:var(--disp);font-weight:700;
        font-size:.845rem;letter-spacing:-.014em;color:var(--ink);line-height:1.2}
.face span{margin-top:3px;font-size:.735rem;color:var(--ink-2);line-height:1.32}
@media (max-width:520px){.faces{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.about__grid{grid-template-columns:1fr;gap:32px}}

/* ==========================================================================
   FAQ — native disclosure, so every control genuinely works
   ========================================================================== */
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;
  padding:clamp(18px,2vw,24px) 44px clamp(18px,2vw,24px) 0;position:relative;
  font-family:var(--disp);font-weight:700;font-size:clamp(1rem,1.3vw,1.16rem);
  letter-spacing:-.019em;line-height:1.34;color:var(--ink);
  transition:color .18s ease;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--act)}
/* The marker is the rise mark itself — the same stroke as the list bullet,
   flipped when the answer is open. Not a chevron from an icon pack. */
.faq__item summary::after{
  content:"";position:absolute;right:2px;top:50%;width:23px;height:15px;
  transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 6.6 4.4 3.2 7 5 10.6 1.4' fill='none' stroke='%231668d6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .24s cubic-bezier(.3,.8,.4,1);
}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.faq__a{padding:0 clamp(30px,6vw,80px) clamp(22px,2.4vw,28px) 0;
        color:var(--ink-2);font-size:.975rem;line-height:1.65;max-width:74ch}

/* ==========================================================================
   TALK — the closing call, on its own dark floor
   ========================================================================== */
/* one tone lighter than the footer beneath it, so the closing call reads as
   its own block and the footer becomes the darker floor it steps onto */
.talk{background:var(--navy-8);color:#fff;position:relative;isolation:isolate;overflow:hidden}
/* No watermark here on purpose. The SIMPLE letterforms carry the signature
   once, at full scale, in the framework section; repeating them faintly
   behind this band only read as a clipped accident. */
.talk::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url(assets/grain.png);background-size:128px 128px;
  opacity:.05;mix-blend-mode:overlay;
}
.talk .wrap{position:relative;z-index:2;padding-block:clamp(64px,9vw,116px)}
.talk__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,420px);
            gap:clamp(32px,5vw,64px);align-items:center}
.talk__h{font-size:clamp(1.9rem,4vw,3rem);color:#fff;letter-spacing:-.03em;max-width:16ch}
.talk__p{margin-top:16px;font-size:1.03rem;color:rgba(214,232,255,.84);max-width:48ch}
/* No backdrop blur here: there is no photograph behind this band, so a frost
   would blur a flat fill and read as fake glass. Honest tonal panel instead. */
.talk__box{
  background:var(--navy-9);
  border:1px solid var(--line-dk);
  padding:clamp(24px,2.4vw,32px);
}
.talk__box h3{font-size:1.14rem;color:#fff;letter-spacing:-.022em}
.talk__box p{margin:10px 0 20px;font-size:.9rem;color:rgba(190,220,255,.76)}
.talk__or{margin-top:16px;font-size:.85rem;color:rgba(190,220,255,.66);text-align:center}
.talk__or a{color:var(--blue);font-weight:600}
@media (max-width:860px){.talk__grid{grid-template-columns:1fr}.talk__h{max-width:none}}

/* ==========================================================================
   FOOTER — the wordmark is anchored flush to the bottom edge, above the
   texture, bleeding off the bottom while staying whole and centred.
   ========================================================================== */
.foot{background:var(--navy-9);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.foot::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(assets/grain.png);background-size:128px 128px;
  opacity:.05;mix-blend-mode:overlay;
}
.foot__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;
          padding:clamp(52px,7vw,84px) var(--pad) 0}
.foot__top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));
           gap:clamp(28px,4vw,56px)}
.foot__brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.foot__brand img{width:46px;height:auto}
.foot__brand b{font-family:var(--disp);font-weight:800;font-size:1.19rem;letter-spacing:-.02em;color:#fff}
.foot__blurb{margin-top:18px;font-size:.92rem;color:rgba(190,220,255,.74);max-width:38ch;line-height:1.6}
/* a third treatment again: the display face, sentence case, no tracking */
.foot__col h4{font-family:var(--disp);font-weight:800;font-size:1.02rem;letter-spacing:-.018em;
              color:var(--blue);margin-bottom:14px}
.foot__col a,.foot__col p{display:block;font-size:.92rem;color:rgba(214,232,255,.8);
                          text-decoration:none;padding-block:6px;transition:color .18s ease}
.foot__col a:hover{color:#fff}
.foot__social{display:flex;gap:14px;margin-top:6px}
/* bare mark, no tile behind it */
.foot__social a{padding:6px 0}
.foot__social svg{width:21px;height:21px;fill:rgba(214,232,255,.8);transition:fill .18s ease}
.foot__social a:hover svg{fill:#fff}
.foot__legal{
  margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--line-dk);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;
  font-size:.83rem;color:rgba(190,220,255,.62);
}
.foot__legal a{color:rgba(190,220,255,.62);text-decoration:none}
.foot__legal a:hover{color:#fff}
/* the signature: whole, centred, flush to the bottom, on top of the texture */
.foot__mark{
  position:relative;z-index:1;margin-top:clamp(26px,3.4vw,40px);
  display:block;width:100%;height:auto;
  padding-inline:var(--pad);
}
.foot__mark svg{width:100%;height:auto;display:block}
.foot__mark text{
  font-family:var(--disp);font-weight:800;letter-spacing:.02em;
  fill:rgba(104,177,255,.13);
}
@media (max-width:860px){
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .foot__top{grid-template-columns:1fr}
}

/* ==========================================================================
   MOTION — authored, and never gating content. Everything below is a
   transform on something already painted and readable.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .hero__photo{transform:translate3d(0,var(--par,0),0)}
}

/* ==========================================================================
   PAGE HERO — interior pages. Not a second full-bleed hero: one dark band,
   the page's name at real scale, sitting on the same navy the footer uses.
   ========================================================================== */
.phero{
  background:var(--navy-9);color:#fff;position:relative;isolation:isolate;
  padding-top:clamp(118px,13vh,162px);
  padding-bottom:clamp(52px,7.5vw,88px);
}
.phero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(assets/grain.png);background-size:128px 128px;
  opacity:.055;mix-blend-mode:overlay;
}
.phero .wrap{position:relative;z-index:1}
.phero__h{
  font-size:clamp(2.9rem,9.4vw,6.6rem);color:#fff;
  letter-spacing:-.036em;line-height:1;
}
.phero .u{color:#fff}
.phero .u::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 20' preserveAspectRatio='none'%3E%3Cpath d='M5 15.5C48 8.8 108 4.6 168 4.2c30-.2 60 .9 87 3.1' fill='none' stroke='%2368b1ff' stroke-width='5.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.phero__sub{
  margin-top:clamp(20px,2.6vw,30px);
  font-size:clamp(1.04rem,1.5vw,1.32rem);font-weight:500;
  color:rgba(214,232,255,.84);
}

/* ==========================================================================
   TEAM — one row per person, direction alternating. Long bios need a real
   measure, so the text column is wide and the photograph is fixed.
   ========================================================================== */
.tm{
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(26px,4.4vw,60px);align-items:start;
}
.tm+.tm{margin-top:clamp(54px,7.6vw,100px)}
.tm:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,360px)}
.tm:nth-child(even) .tm__pic{order:2}
.tm:nth-child(even) .tm__body{order:1}

.tm__pic img{
  width:100%;aspect-ratio:1;object-fit:cover;object-position:center 20%;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
  background:var(--paper-3);
}
.tm__name{font-size:clamp(1.55rem,2.9vw,2.25rem);letter-spacing:-.028em;line-height:1.06}
.tm__role{
  margin-top:9px;font-family:var(--body);font-weight:600;
  font-size:.95rem;color:var(--act);
}
.tm__bio{
  margin-top:clamp(18px,2vw,24px);
  display:flex;flex-direction:column;gap:14px;
  color:var(--ink-2);font-size:1rem;line-height:1.68;max-width:64ch;
}
/* bare LinkedIn mark, the real one, with no tile or chip behind it */
.tm__li{
  margin-top:clamp(20px,2.4vw,28px);
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:.93rem;color:var(--act);text-decoration:none;
  transition:color .18s ease;
}
.tm__li svg{width:21px;height:21px;fill:currentColor;stroke:none;flex:none}
.tm__li:hover,.tm__li:focus-visible{color:var(--act-hi)}

@media (max-width:820px){
  .tm,.tm:nth-child(even){grid-template-columns:1fr;gap:24px}
  .tm:nth-child(even) .tm__pic,.tm:nth-child(even) .tm__body{order:0}
  .tm__pic{max-width:300px}
}

/* ==========================================================================
   STEP LABEL — its own treatment again, not the lens keys' tracked caps
   ========================================================================== */
.step__k{
  font-family:var(--disp);font-weight:800;font-size:1.02rem;
  letter-spacing:-.014em;color:var(--act);margin-bottom:10px;
}

/* ==========================================================================
   PRICING TIERS — the real cards. Deliberately NOT the stock three-tier
   block: no floating "most popular" pill, no glowing border, no gradient.
   The chosen tier is marked by tone and by its solid action button alone.
   Every row lines up across all three columns and the buttons share a
   baseline, whatever the length of the copy above them.
   ========================================================================== */
.ptiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.ptier{
  background:var(--paper-2);padding:clamp(24px,2.5vw,34px);
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
  display:flex;flex-direction:column;
}
/* the recommended tier reads by tone, one step deeper than its siblings */
.ptier--mid{background:var(--paper-3)}
.ptier__k{font-family:var(--body);font-weight:500;font-size:.855rem;color:var(--ink-3)}
.ptier__h{margin-top:10px;font-size:1.55rem;letter-spacing:-.026em}
/* two lines reserved, so a longer tagline in one column cannot shove its
   neighbours' prices and lists out of step */
.ptier__tag{margin-top:8px;font-size:.98rem;color:var(--ink-2);min-height:2.9em}
.ptier__cost{
  font-family:var(--disp);font-weight:800;font-size:1.42rem;
  letter-spacing:-.024em;color:var(--ink);line-height:1.1;
}
.ptier__cost span{font-size:.62em;letter-spacing:0;color:var(--ink-2)}
.ptier__inc{
  margin-top:clamp(20px,2.2vw,26px);padding-top:clamp(18px,2vw,22px);
  border-top:1px solid var(--line);
  font-size:.88rem;font-weight:600;color:var(--ink);
}
.ptier__list{margin-top:14px;display:flex;flex-direction:column;gap:11px;
             font-size:.93rem;color:var(--ink-2);line-height:1.5;flex:1}
/* the list is the flexible row, so every button lands on the same line */
.ptier__cta{margin-top:clamp(24px,2.6vw,32px)}
.ptiers__note{margin-top:clamp(24px,3vw,34px);font-size:.95rem;color:var(--ink-2);max-width:64ch}
@media (max-width:900px){.ptiers{grid-template-columns:1fr}.ptier__tag{min-height:0}}

/* ==========================================================================
   PRICING SLIDER — employees -> estimated price, all three tiers.
   Sits between the package lede and the tier cards. Numbers only; the exact
   quote still comes from the audit. Matches the tier-card visual language.
   ========================================================================== */
.slider-slot{margin-bottom:clamp(24px,2.6vw,34px)}
.slider__panel{
  background:var(--paper-2);padding:clamp(22px,2.4vw,32px);
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
}
.slider__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.slider__label{font-family:var(--disp);font-weight:800;font-size:1.02rem;letter-spacing:-.014em}
.slider__count{font-family:var(--disp);font-weight:800;font-size:1.6rem;letter-spacing:-.03em;color:var(--act)}
.slider__range{
  margin-top:14px;width:100%;appearance:none;-webkit-appearance:none;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--act) 0%,var(--act) var(--fill,10%),var(--paper-3) var(--fill,10%));
  outline-offset:4px;cursor:pointer;
}
.slider__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--act);border:3px solid #fff;box-shadow:0 1px 4px rgba(11,31,51,.35);
}
.slider__range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--act);
  border:3px solid #fff;box-shadow:0 1px 4px rgba(11,31,51,.35);
}
.slider__scale{position:relative;height:14px;margin-top:8px;font-size:.72rem;color:var(--ink-3)}
.slider__scale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.slider__scale span:first-child{transform:none}
.slider__scale span:last-child{transform:translateX(-100%)}
.slider__out{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.slider__tier{padding:14px 16px;background:var(--paper-3);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.slider__tname{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.slider__price{margin-top:4px}
.slider__price b{font-family:var(--disp);font-weight:800;font-size:1.35rem;letter-spacing:-.024em;color:var(--ink)}
.slider__price span{font-size:.72em;color:var(--ink-2)}
.slider__note{margin-top:16px;font-size:.88rem;color:var(--ink-2)}
.slider__cta{margin-top:16px}
@media (max-width:560px){.slider__out{grid-template-columns:1fr}}

/* ==========================================================================
   THE FOUR STEPS — no numbered rail. The figure is set in the display face
   as part of the card, not hung off a line down the side.
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.step{
  background:var(--paper-2);padding:clamp(22px,2.3vw,30px);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  display:flex;flex-direction:column;
}
.step__n{
  font-family:var(--disp);font-weight:800;font-size:2.6rem;
  letter-spacing:-.03em;line-height:1;color:var(--act);
}
.step .ic{margin-top:clamp(14px,1.6vw,20px);stroke:var(--navy-8)}
.step__h{margin-top:14px;font-size:1.14rem;letter-spacing:-.022em;line-height:1.24}
.step__p{margin-top:11px;font-size:.95rem;color:var(--ink-2);line-height:1.6}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ==========================================================================
   ADD-ON ISLAND
   ========================================================================== */
.addon{
  background:var(--paper-2);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);
  padding:clamp(28px,3.2vw,44px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,3.4vw,48px);align-items:center;
}
.addon__h{margin-top:2px;font-size:clamp(1.5rem,2.7vw,2.05rem);letter-spacing:-.026em}
.addon__p{margin-top:14px;font-size:1rem;color:var(--ink-2);line-height:1.66;max-width:62ch}
@media (max-width:820px){
  .addon{grid-template-columns:1fr;align-items:start}
}

/* Two lines reserved for a step title, so a title that wraps cannot push its
   own body copy out of step with the three cards beside it. */
.step__h{min-height:2.48em}
@media (max-width:560px){.step__h{min-height:0}}

/* A whole paragraph wearing a dotted underline reads as a rendering fault.
   Prose awaiting review gets a quiet amber wash and an edge marker instead;
   short inline flags keep the underline. */
p[data-edit]{
  text-decoration:none;
  background:rgba(184,121,26,.07);
  box-shadow:-3px 0 0 rgba(184,121,26,.5);
  padding:3px 8px 3px 9px;
}

/* ==========================================================================
   HR DIAGNOSTIC — a form, not a funnel. Square fields, no pills, no chips.
   Inputs deliberately carry no chamfer: clip-path would eat the focus ring,
   and a form has to show focus more than it needs a corner detail.
   ========================================================================== */
.dg__wrap{max-width:820px}
.dgs{border:0;padding:0;margin:0 0 clamp(40px,5.5vw,64px)}
.dgs__lg{
  display:block;padding:0;margin-bottom:clamp(20px,2.4vw,28px);
  font-family:var(--disp);font-weight:800;
  font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.024em;color:var(--ink);
}

.dgf{margin-bottom:20px;display:flex;flex-direction:column}
.dgf__l{font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.dgf__h{display:block;font-weight:400;font-size:.85rem;color:var(--ink-2);margin-top:2px}
.dgf__i{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);
  padding:13px 15px;width:100%;
  transition:border-color .15s ease,background-color .15s ease;
}
.dgf__i:hover{border-color:rgba(11,31,51,.25)}
.dgf__i:focus{outline:3px solid var(--act);outline-offset:1px;border-color:var(--act)}
.dgf__t{resize:vertical;min-height:88px;line-height:1.6}

.dgq{margin-bottom:clamp(26px,3vw,36px)}
.dgq__q{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.02rem,1.4vw,1.16rem);letter-spacing:-.019em;line-height:1.34;
  color:var(--ink);margin-bottom:14px;display:flex;gap:12px;align-items:baseline;
}
.dgq__n{flex:none;font-family:var(--body);font-weight:600;font-size:.78rem;color:var(--act)}
.dgq__o{display:flex;flex-direction:column;gap:8px}
.dgq__o label{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 16px;background:var(--paper-2);
  font-size:.955rem;color:var(--ink);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color .15s ease,box-shadow .15s ease;
}
.dgq__o label:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(11,31,51,.22)}
/* the chosen answer reads by tone and one edge marker, never a pill */
.dgq__o label:has(input:checked){
  background:rgba(22,104,214,.085);
  box-shadow:inset 3px 0 0 var(--act),inset 0 0 0 1px rgba(22,104,214,.28);
}
.dgq__o input{accent-color:var(--act);width:18px;height:18px;margin:2px 0 0;flex:none}
.dgq__o label:focus-within{outline:3px solid var(--act);outline-offset:2px}
.dgq.is-missing .dgq__q{color:var(--flag)}
.dgq.is-missing .dgq__o label{box-shadow:inset 0 0 0 1px rgba(184,121,26,.55)}

/* honeypot: off-screen, never announced, never tabbable */
.dg__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dg__captcha:empty{display:none}

.dg__err{
  margin-bottom:18px;padding:13px 16px;
  background:rgba(184,121,26,.1);box-shadow:inset 3px 0 0 var(--flag);
  color:var(--ink);font-size:.95rem;font-weight:500;
}
.dg__go{margin-top:6px}
.dg__fine{margin-top:18px;font-size:.85rem;color:var(--ink-3);max-width:58ch}
.dg__noscript{margin-top:22px;padding:16px;background:var(--paper-3);font-size:.95rem}
.dg__noscript a{color:var(--act);font-weight:600}

/* ---------- the read-out ---------- */
.dgr{
  margin-top:clamp(44px,6vw,72px);
  background:var(--navy-9);color:#fff;
  padding:clamp(28px,3.4vw,48px);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);
  scroll-margin-top:100px;
}
.dgr:focus{outline:none}
.dgr__k{font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--blue);margin-bottom:10px}
.dgr__h{font-size:clamp(1.8rem,3.6vw,2.8rem);color:#fff;letter-spacing:-.03em}
/* the one place a warm tone is allowed, and only at the top band */
.dgr[data-band="3"] .dgr__h{color:#f0b558}
.dgr__score{margin-top:12px;font-size:.98rem;color:rgba(196,222,255,.8)}
.dgr__score b{color:#fff;font-weight:600}
.dgr__meter{
  margin-top:18px;height:10px;background:rgba(168,211,255,.16);overflow:hidden;
}
.dgr__fill{
  height:100%;width:0;background:var(--blue);
  transition:width .7s cubic-bezier(.3,.8,.4,1);
}
.dgr[data-band="3"] .dgr__fill{background:#f0b558}
.dgr__lede{margin-top:22px;font-size:1.04rem;color:rgba(214,232,255,.88);max-width:62ch;line-height:1.62}
.dgr__cols{
  margin-top:clamp(30px,3.6vw,44px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px);
}
.dgr__sub{font-size:1.06rem;color:#fff;letter-spacing:-.02em;margin-bottom:14px}
.dgr__list{display:flex;flex-direction:column;gap:11px;
           font-size:.95rem;color:rgba(206,228,255,.86);line-height:1.55}
.dgr__list li::before{filter:brightness(1.5)}
.dgr__act{
  margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(24px,2.8vw,32px);
  border-top:1px solid var(--line-dk);
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
}
.dgr__sent{font-size:.9rem;color:rgba(190,220,255,.76)}
@media (max-width:700px){.dgr__cols{grid-template-columns:1fr}}

/* the CAPTCHA gate sits between the answers and the button */
.dg__gate{margin:clamp(22px,2.6vw,30px) 0 20px}
.dg__captcha:empty{display:none}
.dg__gatenote{margin-top:10px;font-size:.9rem;color:var(--ink-2)}
.dg__go[disabled]{background:rgba(22,104,214,.32);cursor:not-allowed}
.dg__go[disabled] .ar{opacity:.6}

/* ==========================================================================
   THE PICKER — the industries selector.

   Deliberately not a wheel: a wheel spins, and a spin reads as chance being
   dealt to you. These are six plain links. Clicking one goes to that
   industry, with no selection step in between and nothing to confirm — the
   click is the whole interaction.

   The only motion is the house micro-interaction: the surface lifts in tone
   and the arrow travels along its own diagonal. The card itself does not
   move, because a control that jumps under the cursor is a tic, not a design.
   ========================================================================== */
.pick__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px);
}
.pick__card{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(14px,1.7vw,20px);
  padding:clamp(18px,2vw,24px) clamp(18px,2vw,26px);
  background:var(--paper-2);text-decoration:none;color:inherit;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
  /* the chamfer clips borders, so the edge is an inset shadow */
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color .2s ease,box-shadow .2s ease;
}
.pick__card:hover,.pick__card:focus-visible{
  background:rgba(22,104,214,.07);
  box-shadow:inset 0 0 0 1px rgba(22,104,214,.42);
}

.pick__mark{width:32px;height:32px;flex:none;fill:none;stroke:var(--act);stroke-width:2.1;
            stroke-linecap:round;stroke-linejoin:round}
.pick__body{min-width:0;display:block}
.pick__name{display:block;font-family:var(--disp);font-weight:800;font-size:1.06rem;
            letter-spacing:-.022em;line-height:1.2;color:var(--ink)}
.pick__sub{display:block;margin-top:5px;font-size:.86rem;color:var(--ink-2);line-height:1.4}
.pick__ar{width:16px;height:16px;stroke:var(--act);opacity:.38;transition:opacity .2s ease,transform .22s cubic-bezier(.3,.8,.4,1)}
.pick__card:hover .pick__ar,.pick__card:focus-visible .pick__ar{opacity:1;transform:translate(2.5px,-2.5px)}

@media (max-width:820px){
  .pick__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pick__ar{transition-duration:.01ms}
}

/* ==========================================================================
   NOT ON THE DIAL — the honest footnote to a five-sector wheel
   ========================================================================== */
/* Two columns that both start at the top and carry real weight, so nothing
   is stranded at an edge with a gulf in the middle. The actions sit under
   the copy they belong to, not marooned in white space. */
.else__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,64px);align-items:start;
}
.else__h{font-size:clamp(1.55rem,3vw,2.3rem);letter-spacing:-.028em;max-width:22ch}
.else__p{margin-top:16px;color:var(--ink-2);font-size:1.02rem;line-height:1.66;max-width:52ch}
.else__p:first-child{margin-top:0}
.else__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,32px)}
@media (max-width:820px){.else__grid{grid-template-columns:1fr;gap:26px}}

/* ==========================================================================
   PAGE HERO, WITH A PHOTOGRAPH — the industry pages. The home page's hero
   language brought to an interior page: the photograph is feathered into the
   same navy it sits on, with a long, finely-eased mask, so it has no edge
   anywhere. The heading sits BELOW the fade on solid navy, so nothing is set
   over a photograph and no darkening scrim is needed to read it.
   ========================================================================== */
.phero--pic{padding-top:clamp(296px,46vh,452px);overflow:hidden}
.phero__photo{
  position:absolute;inset:-6% 0 auto;height:80%;z-index:0;
  background-size:cover;background-repeat:no-repeat;background-position:center 34%;
  -webkit-mask-image:linear-gradient(180deg,
     #000 0%,#000 34%,rgba(0,0,0,.96) 43%,rgba(0,0,0,.88) 51%,rgba(0,0,0,.76) 58%,
     rgba(0,0,0,.60) 65%,rgba(0,0,0,.44) 72%,rgba(0,0,0,.29) 78%,
     rgba(0,0,0,.17) 84%,rgba(0,0,0,.08) 90%,rgba(0,0,0,.03) 95%,transparent 100%);
  mask-image:linear-gradient(180deg,
     #000 0%,#000 34%,rgba(0,0,0,.96) 43%,rgba(0,0,0,.88) 51%,rgba(0,0,0,.76) 58%,
     rgba(0,0,0,.60) 65%,rgba(0,0,0,.44) 72%,rgba(0,0,0,.29) 78%,
     rgba(0,0,0,.17) 84%,rgba(0,0,0,.08) 90%,rgba(0,0,0,.03) 95%,transparent 100%);
}
/* The fixed nav sits over the top of this photograph, and a bright frame
   swallows white links. Measured in pixels, not percentages, because what has
   to be covered is the nav strip itself (about 70px) whatever height the band
   happens to be. Twelve stops over 480px, ending where the photograph is
   already half faded into the navy, so it resolves into the surface instead of
   becoming a bar of its own. */
.phero__scrim{
  position:absolute;inset:0 0 auto;height:480px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,23,44,.84) 0px,rgba(6,23,44,.80) 60px,rgba(6,23,44,.72) 90px,
    rgba(6,23,44,.60) 130px,rgba(6,23,44,.47) 175px,rgba(6,23,44,.35) 225px,
    rgba(6,23,44,.25) 280px,rgba(6,23,44,.16) 335px,rgba(6,23,44,.09) 390px,
    rgba(6,23,44,.04) 435px,transparent 480px);
}
.ph-small{background-image:url(assets/hr-table.webp);background-position:62% 30%}
.ph-start{background-image:url(assets/hr-review.webp)}
.ph-field{background-image:url(assets/trades-van.webp)}
.ph-pest{background-image:url(assets/pest-field.webp)}
.ph-home{background-image:url(assets/field-tech.webp)}

/* the one line that carries the industry, set under the name */
.phero__lede{
  margin-top:clamp(18px,2.4vw,26px);max-width:56ch;
  font-size:clamp(1.02rem,.6vw + .92rem,1.2rem);line-height:1.6;
  color:rgba(214,232,255,.84);
}

/* ==========================================================================
   WHAT BREAKS HERE — a ledger of failure points, not a grid of boxes. The
   statement on the left, what it actually costs on the right, one rule
   between rows and nothing else.
   ========================================================================== */
.brk{display:flex;flex-direction:column}
.brk__row{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);
  gap:clamp(14px,3vw,54px);
  padding-block:clamp(20px,2.5vw,29px);
  border-bottom:1px solid var(--line);
}
.brk__row:first-child{padding-top:0}
.brk__row:last-child{border-bottom:0;padding-bottom:0}
.brk__h{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.08rem,1.7vw,1.36rem);letter-spacing:-.022em;
  line-height:1.26;color:var(--ink);
}
.brk__p{font-size:.97rem;color:var(--ink-2);line-height:1.62}
@media (max-width:760px){.brk__row{grid-template-columns:1fr;gap:9px}}

/* ==========================================================================
   WHAT WE PUT IN PLACE — the rise bullet doing the work, two columns of it
   ========================================================================== */
.fix__list{
  margin-top:clamp(28px,3.8vw,44px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(13px,1.7vw,19px) clamp(28px,4.4vw,60px);
}
.fix__list li{font-size:1rem;color:var(--ink-2);line-height:1.6}
.fix__list li b{color:var(--ink);font-weight:600}
@media (max-width:680px){.fix__list{grid-template-columns:1fr}}

/* ==========================================================================
   BLOG INDEX — articles set as type. No cards, no thumbnails, no tag pills,
   no dates in little grey capsules. One rule between pieces, and the newest
   one takes the lead position at a size that says so.
   ========================================================================== */
.posts{display:flex;flex-direction:column}
.post{
  display:block;text-decoration:none;
  padding-block:clamp(22px,2.8vw,32px);
  border-bottom:1px solid var(--line);
}
.post:first-child{padding-top:0}
.post:last-child{border-bottom:0;padding-bottom:0}

/* topic and date share one quiet line, told apart by colour, not by a chip */
.post__meta{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.post__meta b{color:var(--act);font-weight:600}
.post__h{
  margin-top:10px;font-size:clamp(1.3rem,2.1vw,1.72rem);
  letter-spacing:-.026em;line-height:1.2;color:var(--ink);
  max-width:36ch;transition:color .2s ease;
}
.post:hover .post__h,.post:focus-visible .post__h{color:var(--act)}
.post__p{margin-top:11px;font-size:.99rem;color:var(--ink-2);line-height:1.62;max-width:64ch}
.post__go{
  margin-top:15px;display:inline-flex;align-items:center;gap:.5em;
  font-size:.88rem;font-weight:600;color:var(--act);
}
.post__go .ar{width:13px;height:13px}
.post:hover .post__go .ar,.post:focus-visible .post__go .ar{transform:translate(2.5px,-2.5px)}

.post--lead{padding-bottom:clamp(30px,3.6vw,42px)}
.post--lead .post__h{
  font-size:clamp(1.85rem,4vw,3rem);max-width:28ch;
  letter-spacing:-.032em;line-height:1.08;
}
.post--lead .post__p{margin-top:15px;font-size:clamp(1.02rem,.5vw + .92rem,1.14rem)}

/* Nothing published yet. Said plainly, and flagged so it cannot ship unseen. */
.posts__none{
  max-width:62ch;padding:clamp(26px,3.4vw,40px);background:var(--paper-2);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}
.posts__none h2{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.024em}
.posts__none p{margin-top:12px;color:var(--ink-2);font-size:1rem;line-height:1.64}

/* ==========================================================================
   ARTICLE — one column, one real measure, nothing in the margins. The title
   drops to a readable scale: this is a page to read, not a page to announce.
   ========================================================================== */
.phero--art{padding-bottom:clamp(44px,6vw,72px)}
.phero--art .phero__h{
  font-size:clamp(1.95rem,4.4vw,3.3rem);letter-spacing:-.03em;
  line-height:1.07;max-width:32ch;
}
.art__meta{
  font-size:.88rem;font-weight:600;color:rgba(214,232,255,.68);
  margin-bottom:clamp(14px,1.8vw,20px);
}
.art__meta b{color:var(--blue);font-weight:600}
.art__stand{
  margin-top:clamp(18px,2.4vw,26px);max-width:58ch;
  font-size:clamp(1.03rem,.6vw + .93rem,1.2rem);line-height:1.62;
  color:rgba(214,232,255,.86);
}

.art__back{margin-bottom:clamp(24px,3.2vw,36px)}
.art__back a{
  display:inline-flex;align-items:center;gap:.55em;text-decoration:none;
  font-size:.9rem;font-weight:600;color:var(--act);transition:color .18s ease;
}
.art__back a:hover,.art__back a:focus-visible{color:var(--act-hi)}
/* the house arrow, turned to point back the way you came */
.art__back .ar{width:13px;height:13px;transform:rotate(-135deg)}
.art__back a:hover .ar,.art__back a:focus-visible .ar{transform:rotate(-135deg) translate(2.5px,-2.5px)}

.art__body{max-width:68ch}
.art__body p,.art__body li{
  font-size:clamp(1.02rem,.35vw + .96rem,1.1rem);line-height:1.75;color:var(--ink-2);
}
/* One flow rule for every combination, so a paragraph after a list or a
   pulled-out line is never jammed against it. Headings override below. */
.art__body>*+*{margin-top:1.15em}
.art__body strong{color:var(--ink);font-weight:600}
.art__body a{
  color:var(--act);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:1.5px;
}
.art__body h2{
  margin-top:2em;font-size:clamp(1.34rem,2.2vw,1.76rem);
  letter-spacing:-.024em;line-height:1.24;color:var(--ink);
}
.art__body h3{
  margin-top:1.7em;font-size:clamp(1.1rem,1.6vw,1.26rem);
  letter-spacing:-.02em;line-height:1.3;color:var(--ink);
}
.art__body h2+p,.art__body h3+p{margin-top:.75em}
.art__body ul,.art__body ol{margin-top:1.15em;display:flex;flex-direction:column;gap:11px}
.art__body ol{counter-reset:artn}
.art__body ol li{position:relative;padding-left:32px;counter-increment:artn}
.art__body ol li::before{
  content:counter(artn);position:absolute;left:0;top:.02em;
  font-family:var(--disp);font-weight:800;font-size:1em;color:var(--act);
}
/* a line worth pulling out, given type and space instead of quote marks */
.art__body blockquote{
  margin-top:1.7em;padding:clamp(20px,2.4vw,30px);background:var(--paper-3);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
}
.art__body blockquote p{
  font-family:var(--disp);font-weight:700;color:var(--ink);
  font-size:clamp(1.1rem,1.7vw,1.32rem);letter-spacing:-.02em;line-height:1.42;
}
.art__body blockquote p+p{margin-top:.6em}
.art__end{
  margin-top:clamp(34px,4.4vw,56px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line);max-width:68ch;
  font-size:.95rem;color:var(--ink-3);line-height:1.62;
}