/* SiteComms — polish layer. Loaded last. Spacing, rhythm, type steps and states only:
   no layout or copy changes. Breakpoints: phone < 700, tablet 700–1099, desktop 1100+. */

/* ============ rhythm ============ */
/* section headings sit flush on the section's padding (the old 14px eyebrow gap is gone),
   so every section break reads the same: 140 desktop, 112 tablet, 80 phone */
main>section>.h2:first-child,
main>section>.stack:first-child>div:first-child>.h2:first-child{margin-top:0 !important}
@media (min-width:1100px){
  main>section[style*="padding-top: 130px"]{padding-top:140px !important}
  /* the logo strip carries its own 34px of air below the marks */
  main>section.mq-sec+section{padding-top:112px !important}
}
@media (min-width:700px) and (max-width:1099px){
  main>section.mq-sec+section{padding-top:88px !important}
  /* hero to first content stays tighter than a section break, as on desktop */
  main>section[style*="padding-top: 72px"]{padding-top:56px !important}
}
@media (max-width:699px){
  main>section.mq-sec+section{padding-top:64px !important}
  main>section[style*="padding-top: 72px"]:not(.mq-sec){padding-top:44px !important}
}
/* services page: the half-width cards continue the list, they are not a new section */
main>section[style*="padding-top: 20px"]{padding-top:20px !important}
main>section[style*="padding-top: 20px"] .g2{gap:20px !important}

/* ============ cards ============ */
/* role cards: one measure for all three descriptions */
@media (min-width:700px){.rl-c p{max-width:none !important}}
/* services: the half-width cards use the same 20px picture inset as the full-width rows;
   text keeps its 36px inset */
@media (min-width:900px){
  .sc{padding:20px}
  .sc .sv-b{padding:36px 16px 16px}
}

/* ============ desktop 1100–1299: the three-up cards are narrow, type steps down ============ */
@media (min-width:1100px) and (max-width:1299px){
  .qt-q{font-size:23px !important;line-height:1.18 !important}
  .qt-in{padding:26px !important}
  .qw .h2{font-size:48px !important}
  .rl-t{font-size:28px !important}
}

/* ============ tablet hero: keep the desktop proportion instead of a thin strip ============ */
@media (min-width:700px) and (max-width:1099px){
  .hero-media{min-height:0 !important;aspect-ratio:8 / 5}
}

/* ============ footer: the two columns share one line pitch so rows align ============ */
footer .ft-l a,
footer .stack>div>div:last-child>span{line-height:22px}

/* ============ states ============ */
/* press feedback on every pill button (V4: .sx-btn already does this) */
.btn,.ct-go,.ct-copy,.pl,.mn-call,.pm-all-m{transition:background var(--t-base) var(--e-out),color var(--t-base) var(--e-out),transform var(--t-fast) var(--e-out)}
.btn:active,.ct-go:active,.ct-copy:active,.pl:active,.mn-call:active,.menu-btn:active{transform:scale(.97)}
.menu-btn{transition:background var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out)}
/* focus rings that show on dark surfaces */
.qw :focus-visible,.ct-f :focus-visible,.sx:focus-visible,.pm-all:focus-visible{outline-color:#ffffff}
.sx:focus-visible{outline:2px solid #000000;outline-offset:3px}
.btn:focus-visible,.call:focus-visible,.menu-btn:focus-visible,.nv:focus-visible,.sx-btn:focus-visible{outline:2px solid #000000;outline-offset:3px}
.pm-all:focus-visible{outline:2px solid #000000;outline-offset:3px}
.ft-l a:focus-visible,.mn-tel:focus-visible,.ct-tel:focus-visible,.ct-em:focus-visible,.ct-mail:focus-visible,.lead-tel:focus-visible{outline-offset:2px;border-radius:2px}
/* project rows keep the black bar for keyboard focus, plus a ring so it never reads as hover */
.pr:focus-visible::before,.nx:focus-visible::before{box-shadow:0 0 0 2px #ffffff,0 0 0 4px #000000}
.pl,.ct-go,.ct-copy,.sx-btn,.menu-btn{cursor:pointer}

/* services slider: the black panel wipes up on its own layer so the edge stays crisp */
.sx-p{will-change:clip-path}

/* ============ type ============ */
/* large headings: optical kerning and no synthetic bold anywhere */
.h1,.h2,.sv-t,.rl-t,.qt-q,.nx-n,.pr-n,.sx-t,.sx-n{font-kerning:normal;font-synthesis:none}
/* figures line up in stats and phone numbers */
.qw-n,.pp-n,.ct-tel,.mp-tel,.lead-tel,.mn-tel{font-variant-numeric:tabular-nums}
/* the open panel overshoots its box by a pixel so no photo edge shows along the top */
.sx:hover .sx-p,.sx:focus-visible .sx-p{clip-path:inset(-1px -1px -1px -1px)}