/* ==========================================================================
   Simply HR — /industries/pest-control/
   --------------------------------------------------------------------------
   This page's own sections, inside the site's header and footer. Loaded
   after styles.css, on this page only (body.pest). Every section class here
   is prefixed pc- so nothing can collide with, or leak into, site/styles.css;
   the shared primitives (.btn, .u, .rise-bullet, .wrap, .ic) come from
   styles.css unchanged.
   ========================================================================== */

/* the rise underline and focus ring on this page's dark grounds */
.pest .pc-hero .u,.pest .pc-talk .u{color:#fff}
.pest .pc-hero .u::after,.pest .pc-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");
}
.pest .pc-hero :focus-visible,.pest .pc-nums :focus-visible,.pest .pc-cred :focus-visible,
.pest .pc-roles :focus-visible,.pest .pc-proc :focus-visible,.pest .pc-talk :focus-visible,
.pest .pc-tier--mid :focus-visible{outline-color:var(--blue)}

/* ==========================================================================
   HERO — owns the fold; the photo is feathered into the navy it sits on
   ========================================================================== */
.pc-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;
}
.pc-hero__photo{
  position:absolute;inset:-8% 0 0;z-index:0;
  background:url(assets/pest-field.webp) center 34%/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 */
.pc-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%);
}
.pc-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;
}
.pc-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;
}
.pc-hero__h{
  font-size:clamp(2.9rem,7.9vw,6.5rem);color:#fff;max-width:15ch;
  letter-spacing:-.031em;text-wrap:balance;
}
.pc-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 */
.pc-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);
}
.pc-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 */
.pc-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 */
.pc-hero__box-col+.pc-hero__box-col{
  padding-left:clamp(18px,1.8vw,24px);
  border-left:1px solid var(--line-dk);
}
.pc-hero__box-col{display:flex;flex-direction:column}
.pc-hero__box-h{font-size:1.1rem;color:#fff;letter-spacing:-.022em;line-height:1.2}
.pc-hero__box-p{margin:8px 0 16px;font-size:.85rem;color:rgba(190,220,255,.74);flex:1}
.pc-hero__box-p b{color:var(--blue);font-weight:600}
/* the two actions sit side by side: same height, labels centred, so a label
   that wraps in the narrower column cannot knock the pair out of line */
.pc-hero__box .btn{min-height:66px;padding-inline:18px;text-align:center}

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

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

/* ---------- what we do ---------- */
.pc-what{background:var(--paper-3)}
.pc-what__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.pc-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;
}
.pc-do__n{font-family:var(--disp);font-weight:800;font-size:.9rem;letter-spacing:.10em;
       color:var(--act);margin-bottom:18px}
.pc-do h3{font-size:1.28rem;letter-spacing:-.02em;margin-bottom:12px}
.pc-do p{color:var(--ink-2);font-size:.98rem}

/* ---------- why us ---------- */
.pc-why{background:var(--paper)}
.pc-why__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
         gap:clamp(34px,5vw,72px);align-items:stretch}
.pc-why__list{margin-top:clamp(32px,4vw,44px);display:grid;gap:26px}
.pc-why__list li{display:flex;gap:17px;align-items:flex-start}
.pc-why__list h3{font-size:1.06rem;letter-spacing:-.012em;margin-bottom:5px}
.pc-why__list p{font-size:.94rem;color:var(--ink-2);line-height:1.55}
.pc-why__pic{margin:0;display:flex;flex-direction:column;height:100%}
.pc-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%);
}
.pc-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 ---------- */
.pc-cred{padding-block:clamp(10px,2vw,26px);background:var(--paper)}
.pc-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%);
}
.pc-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}
.pc-cred__in > *{position:relative;z-index:1}
.pc-cred__lab{font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
           color:rgba(168,211,255,.66)}
.pc-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);
}
.pc-cred__story b{color:var(--blue);font-weight:800}
.pc-cred__note{margin-top:20px;max-width:62ch;color:rgba(214,232,255,.82);font-size:1rem}

/* ---------- team ---------- */
.pc-team{background:var(--paper-3)}
/* four people: two rows of two, photo beside the bio, so no row is left
   half empty or off centre */
.pc-team__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px);align-items:stretch}
.pc-who{
  background:var(--paper-2);display:flex;flex-direction:row;align-items:stretch;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}
.pc-who__pic{width:38%;flex:none;height:auto;object-fit:cover;object-position:50% 30%}
.pc-who__body{padding:clamp(22px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.pc-who__name{font-size:1.3rem;letter-spacing:-.02em}
.pc-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 */
.pc-who__role{margin-top:9px;font-size:.85rem;font-weight:500;color:var(--ink-2);min-height:3.4em}
.pc-who__pts{margin-top:8px;display:grid;gap:11px}
.pc-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 */
.pc-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;
}
.pc-who__li svg{width:17px;height:17px;fill:currentColor}
.pc-who__li:hover{color:var(--act-hi)}
.pc-who__li:hover span{text-decoration:underline;text-underline-offset:3px}

/* ---------- roles: typographic, no icon row ---------- */
.pc-roles{background:var(--navy-9);color:#fff;padding-block:clamp(58px,8vw,96px);position:relative;isolation:isolate}
.pc-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}
.pc-roles .wrap{position:relative;z-index:1}
.pc-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 */
.pc-roles__list{margin-top:clamp(30px,4vw,44px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:0 clamp(18px,2.4vw,34px)}
.pc-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);
}
.pc-roles__end{margin-top:clamp(28px,3.6vw,40px);font-size:1.06rem;color:rgba(190,220,255,.75);max-width:72ch}
.pc-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. */
.pc-sys{background:var(--paper)}
.pc-sys__wrap{position:relative;margin-top:clamp(34px,4vw,52px);padding-top:152px}
.pc-sys__line{position:absolute;left:0;top:0;width:100%;height:152px;overflow:visible;
           pointer-events:none;z-index:0}
.pc-sys__line path{fill:none;stroke:url(#riseFade);stroke-width:2.8;stroke-linecap:round}
.pc-sys__track{position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,26px);align-items:start}
.pc-sys__stage{position:relative;display:flex;flex-direction:column}
.pc-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);
}
.pc-sys__stage h3{margin-top:16px;font-size:1.22rem;letter-spacing:-.018em;color:var(--ink)}
.pc-sys__stage > ul{margin-top:14px;display:grid;gap:7px}
.pc-sys__stage > ul li{font-size:.9rem;line-height:1.42;color:var(--ink-2)}

/* ---------- testimonials ---------- */
.pc-said{background:var(--paper-3)}
.pc-said__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.pc-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;
}
.pc-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){
  .pc-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 */
.pc-said__by{font-style:normal;display:flex;align-items:center;gap:18px;
          padding-bottom:22px;border-bottom:1px solid var(--paper-3)}
.pc-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%);
}
.pc-said__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-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)}
.pc-said__co{font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--act)}
.pc-said__role{margin-top:3px;font-size:.84rem;line-height:1.42;color:var(--ink-2)}

/* ---------- pricing: one grid, every role on a shared baseline ---------- */
.pc-price{background:var(--paper-3)}
.pc-price__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);align-items:stretch}
.pc-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 */
.pc-tier--mid{background:var(--navy-8);color:#fff;position:relative;isolation:isolate}
.pc-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}
.pc-tier--mid > *{position:relative;z-index:1}
.pc-tier__n{font-size:1.3rem;letter-spacing:-.02em}
.pc-tier__for{margin-top:11px;font-size:.92rem;color:var(--ink-2);min-height:4.1em}
.pc-tier--mid .pc-tier__for{color:rgba(190,220,255,.8)}
.pc-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}
.pc-tier--mid .pc-tier__fig{border-bottom-color:var(--line-dk)}
.pc-tier__from{font-size:.86rem;font-weight:500;color:var(--ink-2)}
.pc-tier--mid .pc-tier__from{color:rgba(168,211,255,.75)}
.pc-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)}
.pc-tier--mid .pc-tier__fig b{color:var(--blue)}
.pc-tier__fig i{font-style:normal;font-size:.86rem;color:var(--ink-2)}
.pc-tier--mid .pc-tier__fig i{color:rgba(190,220,255,.72)}
.pc-tier__has{margin-top:22px;display:grid;gap:11px}
.pc-tier__has li{font-size:.94rem;line-height:1.5;color:var(--ink-2)}
.pc-tier--mid .pc-tier__has li{color:rgba(214,232,255,.86)}
.pc-tier--mid .rise-bullet li::before,.pc-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. */
.pc-tier__go{margin-top:auto;align-self:stretch}
.pc-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. */
.pc-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 */
.pc-price{padding-bottom:clamp(40px,5vw,64px)}
.pc-proj__h{font-size:clamp(1.34rem,2.2vw,1.85rem);letter-spacing:-.022em;text-wrap:balance}
.pc-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 */
.pc-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){
  .pc-proj__track{overflow-x:auto}
  .pc-proj__belt{padding-inline:var(--pad)}
}
.pc-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 */
.pc-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 */
.pc-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 */
  .pc-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%);
  }
  .pc-proj__belt{animation:proj-run 48s linear infinite}
  .pc-proj__track:hover .pc-proj__belt{animation-play-state:paused}
}

.pc-proc{background:var(--navy-9);color:#fff;padding-block:clamp(52px,7vw,84px);position:relative;isolation:isolate}
.pc-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}
.pc-proc .wrap{position:relative;z-index:1}
.pc-proc__h{font-size:clamp(1.4rem,2.5vw,1.95rem);letter-spacing:-.024em}
.pc-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)}
.pc-proc__steps li{counter-increment:s;padding-top:20px;border-top:1px solid var(--line-dk);position:relative}
.pc-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);
}
.pc-proc__steps b{display:block;font-family:var(--disp);font-weight:800;font-size:1.22rem;
               letter-spacing:-.02em;color:#fff;margin-bottom:7px}
.pc-proc__steps span{font-size:.92rem;color:rgba(190,220,255,.76);line-height:1.5}

/* ---------- contact ---------- */
.pc-talk{background:var(--navy-8);color:#fff;position:relative;isolation:isolate}
.pc-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}
.pc-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}
.pc-talk .pc-lede{color:rgba(214,232,255,.84)}
.pc-talk__meta{margin-top:clamp(34px,4.6vw,50px);display:grid;gap:24px}
.pc-talk__meta dt{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
               color:rgba(168,211,255,.62);margin-bottom:5px}
.pc-talk__meta dd{margin:0;font-size:1.06rem;font-weight:500}
.pc-talk__meta dd b{color:var(--blue)}
.pc-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}
.pc-talk__meta a:hover{color:var(--blue);box-shadow:inset 0 -1px 0 var(--blue)}

.pc-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%);
}
.pc-talk__book-kind{font-size:.95rem;font-weight:600;color:var(--ink-2)}
.pc-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);
}
.pc-talk__book-sub{margin-top:8px;font-size:.98rem;color:var(--ink-2)}
.pc-talk__book-list{
  margin-top:24px;padding-bottom:28px;border-bottom:1px solid var(--line);
  display:grid;gap:12px;
}
.pc-talk__book-list li{font-size:.96rem;line-height:1.5;color:var(--ink-2)}
.pc-talk__book .btn{margin-top:28px}
.pc-talk__book-note{margin-top:14px;font-size:.83rem;color:var(--ink-2);text-align:center}
/* ==========================================================================
   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){
  /* parallax on a photograph already on screen; pest.js sets --par */
  .pc-hero__photo{transform:translate3d(0,var(--par,0),0)}
  .pc-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){
  .pc-nums__in{gap:clamp(26px,3.6vw,38px)}
  .pc-why__in{grid-template-columns:1fr;gap:40px}
  .pc-why__pic{order:-1;max-width:620px}
  .pc-why__pic img{aspect-ratio:16/10;flex:none}
  .pc-roles__list{grid-template-columns:repeat(3,1fr)}
  .pc-sys__wrap{padding-top:0}
  .pc-sys__track{grid-template-columns:repeat(3,1fr);row-gap:44px}
  .pc-sys__line,.pc-sys__dot{display:none}
  .pc-said__grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  .pc-hero__in{grid-template-columns:1fr;align-items:start;gap:clamp(24px,4vh,34px)}
  .pc-hero__box{max-width:430px}
  .pc-what__grid{grid-template-columns:1fr}
  .pc-team__grid{grid-template-columns:1fr}
  .pc-who__pic{width:34%;max-width:230px}
  .pc-who__role{min-height:0}
  .pc-price__grid{grid-template-columns:1fr}
  .pc-tier__for,.pc-tier__fig{min-height:0}
  .pc-tier__fig{justify-content:flex-start}
  .pc-proc__steps{grid-template-columns:1fr 1fr}
  .pc-talk__in{grid-template-columns:1fr;gap:36px}
}

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