/* ==========================================================================
   Simply HR — PestWorld landing page
   --------------------------------------------------------------------------
   Signature: "the rise" — the stroke from the Simply HR mark, where the
   checkmark kicks up into an arrow. It reappears as the headline underline,
   the spine the people system climbs, the list bullets, and the chamfered
   top-right corner that every card, island and button shares.

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

   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;
  --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;
  --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{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}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* bespoke icon set — one stroke rule for every mark */
.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(--blue);outline-offset:3px;border-radius:2px}

.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;
}
/* the ones that are visibly placeholder copy get the stronger marker */
[data-edit="booth"],[data-edit="chad-name"],[data-edit="chad-line"],[data-edit="phone"]{
  background:rgba(184,121,26,.16);padding:0 .2em;text-decoration:none;
  box-shadow:0 1px 0 rgba(184,121,26,.6);
}

/* ==========================================================================
   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}

/* 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{color:#fff}
.hero .u::after,.talk .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;white-space:nowrap;
}
.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;white-space:nowrap}

.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}

/* six section links need ~1000px beside the brand and the CTA */
@media (max-width:1000px){
  .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__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 photo is feathered into the navy it sits on
   ========================================================================== */
.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/hero-team.jpg) center 30%/cover no-repeat;
  /* feather the image's own pixels, many stops, over a long distance, onto the
     same navy the section already is — so there is no seam anywhere */
  -webkit-mask-image:linear-gradient(180deg,
     #000 0%,#000 34%,rgba(0,0,0,.96) 42%,rgba(0,0,0,.88) 50%,rgba(0,0,0,.76) 57%,
     rgba(0,0,0,.60) 64%,rgba(0,0,0,.44) 70%,rgba(0,0,0,.29) 76%,
     rgba(0,0,0,.17) 82%,rgba(0,0,0,.08) 88%,rgba(0,0,0,.03) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,
     #000 0%,#000 34%,rgba(0,0,0,.96) 42%,rgba(0,0,0,.88) 50%,rgba(0,0,0,.76) 57%,
     rgba(0,0,0,.60) 64%,rgba(0,0,0,.44) 70%,rgba(0,0,0,.29) 76%,
     rgba(0,0,0,.17) 82%,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,.90) 0%,rgba(6,23,44,.74) 40%,rgba(6,23,44,.34) 70%,rgba(6,23,44,.14) 100%),
    linear-gradient(180deg,rgba(6,23,44,.70) 0%,rgba(6,23,44,.14) 26%,rgba(6,23,44,0) 46%);
}
.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(38px,6vh,64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,520px);
  gap:clamp(30px,4vw,60px);align-items:end;
}
/* the show and the booth are the two things a visitor at PestWorld needs to
   see first, so they get real type scale and the page's own chamfer, rather
   than sitting in a faint eyebrow */
.hero__where{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(20px,3.2vh,30px);
}
.hero__show{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:.005em;color:#fff;
}
.hero__booth{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:.005em;
  color:#fff;background:var(--act);
  padding:8px 16px 9px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.hero__h{
  font-size:clamp(2.9rem,7.9vw,6.5rem);color:#fff;max-width:15ch;
  letter-spacing:-.031em;text-wrap:balance;
}
.hero__h .u{margin-top:.06em}
/* the line under the headline: display face to tie it to the h1, but a clear
   step down in scale and a hair off pure white, so the hierarchy reads
   headline -> claim -> credential without a third type voice */
.hero__sub{
  margin-top:clamp(16px,2.2vh,24px);max-width:23ch;
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.38rem,1.5vw + 1.02rem,2.05rem);
  line-height:1.25;letter-spacing:-.021em;text-wrap:balance;
  color:rgba(236,245,255,.94);
}
.hero__years{
  margin-top:clamp(20px,2.8vh,28px);
  font-size:clamp(1.02rem,.5vw + .92rem,1.19rem);
  color:rgba(220,235,255,.9);
}
/* booking box — sits to the right of the headline, same chamfer as every
   other surface on the page */
.hero__box{
  background:rgba(7,26,49,.78);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-dk);
  padding:clamp(20px,1.9vw,26px);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,1.8vw,24px);
}
/* hairline between the two actions, drawn on the second column only */
.hero__box-col+.hero__box-col{
  padding-left:clamp(18px,1.8vw,24px);
  border-left:1px solid var(--line-dk);
}
.hero__box-col{display:flex;flex-direction:column}
.hero__box-h{font-size:1.1rem;color:#fff;letter-spacing:-.022em;line-height:1.2}
.hero__box-p{margin:8px 0 16px;font-size:.85rem;color:rgba(190,220,255,.74);flex:1}
.hero__box-p b{color:var(--blue);font-weight:600}

.raffle{
  position:relative;z-index:1;
  margin-top:clamp(34px,4.5vw,56px);padding-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--line-dk);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(36px,5vw,76px);align-items:center;
}
.raffle__lead h3{font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.022em;color:#fff}
.raffle__lead p{margin-top:10px;font-size:.97rem;color:rgba(214,232,255,.82);max-width:48ch}
.raffle__lead b{color:var(--blue);font-weight:600}
.raffle__act{display:flex;flex-direction:column}
.raffle__note{margin-top:13px;font-size:.83rem;color:rgba(190,220,255,.66);text-align:center}

/* the booking call to action that replaced the old inline form */
.btn--big{--padY:19px;padding-inline:34px;font-size:1.02rem}

/* ==========================================================================
   NUMBERS — continuous with the hero's navy: one dark opening block
   ========================================================================== */
.nums{background:var(--navy-9);color:#fff;position:relative;isolation:isolate}
.nums::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}
.nums__in{position:relative;z-index:1;
  padding-block:clamp(54px,8vw,92px);
  display:grid;grid-template-columns:1fr;
  gap:clamp(32px,4.2vw,50px);align-items:start}
.nums__h{font-size:clamp(1.72rem,3.2vw,2.75rem);letter-spacing:-.026em}
.nums__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,32px)}
.num{display:flex;flex-direction:column;gap:11px}
.num dt{
  font-family:var(--disp);font-weight:800;font-size:clamp(2.7rem,5.6vw,4.6rem);
  line-height:1;color:var(--blue);letter-spacing:.004em;display:flex;align-items:baseline;
}
.num dt i{font-style:normal;font-size:.6em;margin-left:.12em;color:rgba(104,177,255,.6)}
.num dd{margin:0;font-size:.94rem;line-height:1.42;color:rgba(214,232,255,.8);max-width:21ch}

/* ==========================================================================
   SHARED SECTION RHYTHM
   ========================================================================== */
.sec{padding-block:clamp(52px,7.2vw,94px)}
.sec__head{margin-bottom:clamp(28px,3.6vw,44px)}
.h2{font-size:clamp(1.95rem,4.1vw,3.05rem);letter-spacing:-.028em;text-wrap:balance}
.lede{margin-top:14px;max-width:56ch;font-size:clamp(1rem,.4vw + .93rem,1.12rem);color:var(--ink-2)}
.sec__head--wide .lede{max-width:70ch}

/* one chamfer proportion, shared by every card, island and image */
.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%)}

/* ---------- what we do ---------- */
.what{background:var(--paper-3)}
.what__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.do{
  background:var(--paper-2);padding:clamp(26px,2.6vw,36px);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
  display:flex;flex-direction:column;
}
.do__n{font-family:var(--disp);font-weight:800;font-size:.9rem;letter-spacing:.10em;
       color:var(--act);margin-bottom:18px}
.do h3{font-size:1.28rem;letter-spacing:-.02em;margin-bottom:12px}
.do p{color:var(--ink-2);font-size:.98rem}

/* ---------- why us ---------- */
.why{background:var(--paper)}
.why__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
         gap:clamp(34px,5vw,72px);align-items:stretch}
.why__list{margin-top:clamp(32px,4vw,44px);display:grid;gap:26px}
.why__list li{display:flex;gap:17px;align-items:flex-start}
.why__list h3{font-size:1.06rem;letter-spacing:-.012em;margin-bottom:5px}
.why__list p{font-size:.94rem;color:var(--ink-2);line-height:1.55}
.why__pic{margin:0;display:flex;flex-direction:column;height:100%}
.why__pic img{
  width:100%;flex:1;min-height:0;object-fit:cover;object-position:58% 50%;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
}
.why__pic figcaption{
  margin-top:16px;font-family:var(--disp);font-weight:700;font-size:1.02rem;
  color:var(--act);letter-spacing:-.012em;flex:none;
}

/* ---------- credentials: an inset island, floated clear on all sides ---------- */
.cred{padding-block:clamp(10px,2vw,26px);background:var(--paper)}
.cred__in{
  background:var(--navy-8);color:#fff;position:relative;isolation:isolate;
  padding:clamp(34px,4.4vw,54px) clamp(26px,4vw,58px);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);
}
.cred__in::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}
.cred__in > *{position:relative;z-index:1}
.cred__lab{font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
           color:rgba(168,211,255,.66)}
.cred__story{
  margin-top:18px;max-width:34ch;
  font-family:var(--disp);font-weight:800;letter-spacing:-.022em;line-height:1.14;
  font-size:clamp(1.35rem,2.6vw,2.05rem);
}
.cred__story b{color:var(--blue);font-weight:800}
.cred__note{margin-top:20px;max-width:62ch;color:rgba(214,232,255,.82);font-size:1rem}

/* ---------- team ---------- */
.team{background:var(--paper-3)}
.team__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(20px,2.6vw,32px);align-items:stretch}
.who{grid-column:span 2}
/* with five cards the second row holds two — centre them under the three above.
   Drop these two rules if the card count ever changes. */
.who:nth-child(4){grid-column:2/span 2}
.who:nth-child(5){grid-column:4/span 2}
.who{
  background:var(--paper-2);display:flex;flex-direction:column;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}
.who__pic{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 30%}
.who__body{padding:clamp(22px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.who__name{font-size:1.3rem;letter-spacing:-.02em}
.who__cred{
  display:inline-block;font-family:var(--body);font-size:.72rem;font-weight:600;
  letter-spacing:.055em;text-transform:uppercase;color:var(--act);
  vertical-align:middle;margin-left:.3em;
}
/* every card's bullet list starts on the same line, whatever the role line does */
.who__role{margin-top:9px;font-size:.85rem;font-weight:500;color:var(--ink-2);min-height:3.4em}
.who__pts{margin-top:8px;display:grid;gap:11px}
.who__pts li{font-size:.94rem;line-height:1.5;color:var(--ink-2)}
/* the profile link anchors to the bottom so it lands on one line across cards */
.who__li{
  margin-top:auto;padding-top:20px;
  display:inline-flex;align-items:center;gap:8px;align-self:start;
  text-decoration:none;font-size:.88rem;font-weight:600;color:var(--act);
  transition:color .16s ease;
}
.who__li svg{width:17px;height:17px;fill:currentColor}
.who__li:hover{color:var(--act-hi)}
.who__li:hover span{text-decoration:underline;text-underline-offset:3px}

/* ---------- roles: typographic, no icon row ---------- */
.roles{background:var(--navy-9);color:#fff;padding-block:clamp(58px,8vw,96px);position:relative;isolation:isolate}
.roles::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}
.roles .wrap{position:relative;z-index:1}
.roles__h{font-size:clamp(1.6rem,3.2vw,2.5rem);letter-spacing:-.026em;max-width:22ch}
/* five columns, ten roles, two clean rows — no half-empty trailing row */
.roles__list{margin-top:clamp(30px,4vw,44px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:0 clamp(18px,2.4vw,34px)}
.roles__list li{
  font-family:var(--disp);font-weight:700;font-size:clamp(.95rem,1.25vw,1.1rem);
  letter-spacing:-.013em;padding:15px 0;border-bottom:1px solid var(--line-dk);
  color:rgba(226,240,255,.94);
}
.roles__end{margin-top:clamp(28px,3.6vw,40px);font-size:1.06rem;color:rgba(190,220,255,.75);max-width:72ch}
.roles__end b{color:var(--blue);font-weight:600}

/* ---------- the people system: five stages climbing the rise ----------
   The dots ride a rising line; the stage content below sits on one shared
   baseline, so the columns compare cleanly while the line still rises. */
.sys{background:var(--paper)}
.sys__wrap{position:relative;margin-top:clamp(34px,4vw,52px);padding-top:152px}
.sys__line{position:absolute;left:0;top:0;width:100%;height:152px;overflow:visible;
           pointer-events:none;z-index:0}
.sys__line path{fill:none;stroke:url(#riseFade);stroke-width:2.8;stroke-linecap:round}
.sys__track{position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,26px);align-items:start}
.sys__stage{position:relative;display:flex;flex-direction:column}
.sys__dot{
  position:absolute;left:0;bottom:calc(100% + 22px + var(--rise,0px));
  width:11px;height:11px;border-radius:50%;background:var(--act);
  box-shadow:0 0 0 5px var(--paper);
}
.sys__stage h3{margin-top:16px;font-size:1.22rem;letter-spacing:-.018em;color:var(--ink)}
.sys__stage > ul{margin-top:14px;display:grid;gap:7px}
.sys__stage > ul li{font-size:.9rem;line-height:1.42;color:var(--ink-2)}

/* ---------- testimonials ---------- */
.said{background:var(--paper-3)}
.said__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.said__q{
  margin:0;background:var(--paper-2);padding:clamp(26px,2.8vw,36px);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
  display:flex;flex-direction:column;gap:20px;
}
.said__q p{font-family:var(--disp);font-weight:700;font-size:clamp(1.06rem,1.5vw,1.24rem);
           line-height:1.42;letter-spacing:-.016em}
/* header and quote share row tracks across cards, so side-by-side quotes
   start on one line however long a role runs */
@supports (grid-template-rows:subgrid){
  .said__q:not(.is-draft){display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:20px;align-content:start}
}
/* who said it leads the card: photo, name, company, then the quote */
.said__by{font-style:normal;display:flex;align-items:center;gap:18px;
          padding-bottom:22px;border-bottom:1px solid var(--paper-3)}
.said__pic{
  width:84px;height:84px;flex:none;object-fit:cover;object-position:50% 30%;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
.said__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.said__name{font-family:var(--disp);font-weight:800;font-size:clamp(1.22rem,1.6vw,1.4rem);
            letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.said__co{font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--act)}
.said__role{margin-top:3px;font-size:.84rem;line-height:1.42;color:var(--ink-2)}
/* draft flag — delete class "is-draft" in the HTML once the real content lands */
.said__q.is-draft{background:#fdf7ec}
.said__q.is-draft p,.said__q.is-draft .said__co{color:#6b4a14}
.said__q.is-draft .said__by{border-color:#f1e4cc}
.said__q.is-draft::before,.who.is-draft .who__body::before{
  content:"Placeholder — replace before launch";
  font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--flag);
}
.who.is-draft{background:#fdf7ec}
.who.is-draft .who__body::before{display:block;margin-bottom:10px}
.who.is-draft .who__role,.who.is-draft .who__pts li{color:#6b4a14}

/* ---------- pricing: one grid, every role on a shared baseline ---------- */
.price{background:var(--paper-3)}
.price__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);align-items:stretch}
.tier{
  background:var(--paper-2);padding:clamp(28px,2.8vw,38px);
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
  display:flex;flex-direction:column;
}
/* the recommended tier is marked by tone, not a pill, a glow or a border */
.tier--mid{background:var(--navy-8);color:#fff;position:relative;isolation:isolate}
.tier--mid::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}
.tier--mid > *{position:relative;z-index:1}
.tier__n{font-size:1.3rem;letter-spacing:-.02em}
.tier__for{margin-top:11px;font-size:.92rem;color:var(--ink-2);min-height:4.1em}
.tier--mid .tier__for{color:rgba(190,220,255,.8)}
.tier__fig{margin-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;min-height:7.2em;justify-content:flex-end}
.tier--mid .tier__fig{border-bottom-color:var(--line-dk)}
.tier__from{font-size:.86rem;font-weight:500;color:var(--ink-2)}
.tier--mid .tier__from{color:rgba(168,211,255,.75)}
.tier__fig b{font-family:var(--disp);font-weight:800;font-size:clamp(2.1rem,3.2vw,2.7rem);
             line-height:1.06;letter-spacing:-.014em;color:var(--act)}
.tier--mid .tier__fig b{color:var(--blue)}
.tier__fig i{font-style:normal;font-size:.86rem;color:var(--ink-2)}
.tier--mid .tier__fig i{color:rgba(190,220,255,.72)}
.tier__has{margin-top:22px;display:grid;gap:11px}
.tier__has li{font-size:.94rem;line-height:1.5;color:var(--ink-2)}
.tier--mid .tier__has li{color:rgba(214,232,255,.86)}
.tier--mid .rise-bullet li::before,.tier--mid.rise-bullet li::before{
  background-image: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='%2368b1ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* whatever the copy above does, every button lands on the same line */
/* margin-top:auto drops every button onto one baseline whatever the feature
   list above does. It must NOT touch padding: .btn's own 16px top padding
   is what keeps the label vertically centred. */
.tier__go{margin-top:auto;align-self:stretch}
.tier__has{margin-bottom:28px}

/* ---------- process ---------- */
/* ---------- standalone projects belt ----------
   Inside the pricing section, on the same ground, so the band reads as the
   other half of the pricing answer rather than a new pitch. */
.proj{--proj-air:clamp(40px,5vw,64px);margin-top:clamp(46px,5.4vw,72px)}
/* the matching half of the gap: .sec's bottom padding would otherwise be
   twice the space above the belt and push it high in the band */
.price{padding-bottom:clamp(40px,5vw,64px)}
.proj__h{font-size:clamp(1.34rem,2.2vw,1.85rem);letter-spacing:-.022em;text-wrap:balance}
.proj__p{margin-top:10px;max-width:54ch;font-size:.97rem;color:var(--ink-2)}

/* full-bleed: the track is a sibling of .wrap, not inside it */
.proj__track{margin-top:var(--proj-air);overflow:hidden}
/* motion off: the belt never moves, so it must not sit under a fade it can
   never travel out of. Plain scrollable row, starting at the page gutter, with
   every item reachable. */
@media (prefers-reduced-motion:reduce){
  .proj__track{overflow-x:auto}
  .proj__belt{padding-inline:var(--pad)}
}
.proj__belt{display:flex;width:max-content}
/* each row carries its own trailing gap, so the two rows are exactly equal in
   width and -50% lands on the first item of the copy: that is the seamless loop */
.proj__row{
  --g:clamp(10px,1.1vw,14px);
  display:flex;gap:var(--g);margin:0;padding:0 var(--g) 0 0;
  list-style:none;width:max-content;
}
/* white on the tinted ground, separated by tone: chamfered surfaces here carry
   no border and no shadow, same rule as every other card on the page */
.proj__row li{
  background:var(--paper-2);color:var(--ink);
  font-family:var(--disp);font-weight:700;
  font-size:clamp(.95rem,.85vw + .72rem,1.06rem);
  letter-spacing:-.012em;line-height:1;white-space:nowrap;
  padding:clamp(21px,2.1vw,29px) clamp(20px,1.9vw,26px);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
@keyframes proj-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* opt in, never out: with motion unwelcome the first row just sits there */
@media (prefers-reduced-motion:no-preference){
  /* the fade belongs to the moving belt only: both ends dissolve so an item is
     never guillotined mid-word at the edge */
  .proj__track{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  }
  .proj__belt{animation:proj-run 48s linear infinite}
  .proj__track:hover .proj__belt{animation-play-state:paused}
}

.proc{background:var(--navy-9);color:#fff;padding-block:clamp(52px,7vw,84px);position:relative;isolation:isolate}
.proc::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}
.proc .wrap{position:relative;z-index:1}
.proc__h{font-size:clamp(1.4rem,2.5vw,1.95rem);letter-spacing:-.024em}
.proc__steps{margin-top:clamp(28px,3.6vw,40px);counter-reset:s;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px)}
.proc__steps li{counter-increment:s;padding-top:20px;border-top:1px solid var(--line-dk);position:relative}
.proc__steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;top:-.95em;left:0;background:var(--navy-9);padding-right:10px;
  font-family:var(--disp);font-weight:800;font-size:.82rem;letter-spacing:.09em;color:var(--blue-2);
}
.proc__steps b{display:block;font-family:var(--disp);font-weight:800;font-size:1.22rem;
               letter-spacing:-.02em;color:#fff;margin-bottom:7px}
.proc__steps span{font-size:.92rem;color:rgba(190,220,255,.76);line-height:1.5}

/* ---------- contact ---------- */
.talk{background:var(--navy-8);color:#fff;position:relative;isolation:isolate}
.talk::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}
.talk__in{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(36px,5vw,76px);align-items:start}
.talk .lede{color:rgba(214,232,255,.84)}
.talk__meta{margin-top:clamp(34px,4.6vw,50px);display:grid;gap:24px}
.talk__meta dt{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
               color:rgba(168,211,255,.62);margin-bottom:5px}
.talk__meta dd{margin:0;font-size:1.06rem;font-weight:500}
.talk__meta dd b{color:var(--blue)}
.talk__meta a{color:#fff;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(168,211,255,.4);
              transition:box-shadow .16s ease,color .16s ease}
.talk__meta a:hover{color:var(--blue);box-shadow:inset 0 -1px 0 var(--blue)}
.talk__raffle{
  margin-top:clamp(32px,4vw,46px);padding:20px 22px;background:rgba(104,177,255,.10);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  font-size:.97rem;color:rgba(220,235,255,.9);
}
.talk__raffle b{color:var(--blue);font-weight:600}

.talk__book{
  position:relative;z-index:1;background:var(--paper-2);color:var(--ink);
  padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
}
.talk__book-kind{font-size:.95rem;font-weight:600;color:var(--ink-2)}
.talk__book-fig{
  margin-top:5px;font-family:var(--disp);font-weight:800;
  font-size:clamp(2.4rem,4vw,3.15rem);line-height:1.04;letter-spacing:-.022em;color:var(--act);
}
.talk__book-sub{margin-top:8px;font-size:.98rem;color:var(--ink-2)}
.talk__book-list{
  margin-top:24px;padding-bottom:28px;border-bottom:1px solid var(--line);
  display:grid;gap:12px;
}
.talk__book-list li{font-size:.96rem;line-height:1.5;color:var(--ink-2)}
.talk__book .btn{margin-top:28px}
.talk__book-note{margin-top:14px;font-size:.83rem;color:var(--ink-2);text-align:center}

/* ==========================================================================
   FOOTER — the wordmark sits on top of the surface and bleeds off the bottom
   ========================================================================== */
.foot{background:var(--navy-9);color:#fff;padding-top:clamp(46px,6vw,68px);
      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;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:26px clamp(24px,4vw,48px);padding-bottom:30px;border-bottom:1px solid var(--line-dk)}
.foot__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.foot__brand img{width:52px;height:auto}
.foot__brand span{display:flex;flex-direction:column;line-height:1.12}
.foot__brand b{font-family:var(--disp);font-weight:800;font-size:1.24rem;letter-spacing:-.02em}
.foot__brand i{font-style:normal;font-size:.665rem;font-weight:600;letter-spacing:.11em;
               text-transform:uppercase;color:rgba(190,220,255,.66)}
.foot__nav{display:flex;flex-wrap:wrap;gap:10px clamp(16px,2.2vw,28px)}
.foot__nav a{text-decoration:none;font-size:.92rem;color:rgba(214,232,255,.78);transition:color .16s ease}
.foot__nav a:hover{color:#fff}
.foot__li{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
          font-size:.92rem;font-weight:500;color:rgba(214,232,255,.78);transition:color .16s ease}
.foot__li svg{width:19px;height:19px;fill:currentColor}
.foot__li:hover{color:var(--blue)}
.foot__law{position:relative;z-index:2;padding:22px var(--pad) 0;
  max-width:var(--wrap);margin-inline:auto;width:100%;
  font-size:.82rem;color:rgba(168,211,255,.5)}
/* the signature: full caps, real tracking, cleared above, bleeding a little
   off the bottom edge with no gap under it */
.foot__sign{
  position:relative;z-index:2;margin:.16em 0 0;padding:.16em var(--pad) 0;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(3.1rem,14.4vw,11.6rem);line-height:.86;
  letter-spacing:.014em;white-space:nowrap;text-align:center;
  color:transparent;-webkit-text-stroke:1.4px rgba(104,177,255,.30);
  margin-bottom:-.17em;   /* bleeds off the bottom; caps stay whole */
}

/* ==========================================================================
   MOTION — everything animated is already on screen. Nothing is revealed by
   script, so the page is complete and readable with JavaScript off.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .sys__line path{
    stroke-dasharray:var(--len,none);
    stroke-dashoffset:var(--off,0);
    transition:stroke-dashoffset 1.15s cubic-bezier(.22,.7,.3,1);
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nums__in{gap:clamp(26px,3.6vw,38px)}
  .why__in{grid-template-columns:1fr;gap:40px}
  .why__pic{order:-1;max-width:620px}
  .why__pic img{aspect-ratio:16/10;flex:none}
  .roles__list{grid-template-columns:repeat(3,1fr)}
  .sys__wrap{padding-top:0}
  .sys__track{grid-template-columns:repeat(3,1fr);row-gap:44px}
  .sys__line,.sys__dot{display:none}
}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;align-items:start;gap:clamp(24px,4vh,34px)}
  .hero__box{max-width:430px}
  .what__grid{grid-template-columns:1fr}
  .team__grid{grid-template-columns:1fr}
  .who,.who:nth-child(4),.who:nth-child(5){grid-column:auto}
  .who{flex-direction:row;align-items:stretch}
  .who__pic{width:34%;max-width:230px;height:auto;aspect-ratio:auto;flex:none}
  .who__role{min-height:0}
  .price__grid{grid-template-columns:1fr}
  .tier__for,.tier__fig{min-height:0}
  .tier__fig{justify-content:flex-start}
  .proc__steps{grid-template-columns:1fr 1fr}
  .talk__in{grid-template-columns:1fr;gap:36px}
  .raffle{grid-template-columns:1fr;gap:26px}
}

@media (max-width:680px){
  .hero__sub{max-width:none}
  .proj{--proj-air:clamp(30px,5.6vw,40px);margin-top:clamp(34px,6vw,46px)}
  .price{padding-bottom:clamp(30px,5.6vw,40px)}
  .proj__p{margin-top:8px}
  .proj__row li{padding:17px 18px}
  .hero__box{grid-template-columns:1fr;gap:20px}
  .hero__box-col+.hero__box-col{padding-left:0;border-left:0;border-top:1px solid var(--line-dk);padding-top:20px}
  html{scroll-padding-top:76px}
  .hero{padding-top:96px;min-height:auto}
  .hero__in{padding-bottom:34px;padding-top:14vh}
  .hero__h{font-size:clamp(2.6rem,11vw,3.9rem);max-width:none}
  .nums__grid{grid-template-columns:1fr 1fr;gap:24px}
  .said__grid{grid-template-columns:1fr}
  .sys__track{grid-template-columns:1fr 1fr}
  .roles__list{grid-template-columns:1fr 1fr}
  .who{flex-direction:column}
  .who__pic{width:100%;max-width:none;aspect-ratio:1}
  .foot__in{flex-direction:column;align-items:flex-start;gap:22px}
  .proc__steps{grid-template-columns:1fr}
}

/* keep the people system two-up as far down as it reads: one column makes
   the page needlessly long on a phone, which is the QR-code audience */
@media (max-width:380px){
  .sys__track{grid-template-columns:1fr}
  .roles__list{grid-template-columns:1fr}
}

@media print{
  .nav,.burger,.menu{display:none}
  body{background:#fff;color:#000}
}