/* SiteComms — system layer. Loaded last.
   One type scale, one spacing scale, one grid. Values match Site Programs V4 where the two
   differed without reason. Breakpoints: phone < 700, tablet 700–899, narrow desktop 900–1099
   (desktop structure, mobile type sizes flow in), desktop 1100+. Header and menu switch at 900.

   TYPE (Aspekta display, Inter UI)
     h1     96 → fluid → 36   lh .94 (phone .98)   ls -.04em (phone -.035em)
     h2     56 → fluid → 30   lh 1.04              ls -.03em
     h3     42                lh 1.00              ls -.035em   (sx-t, sv-t, nx-n)
     h4     32                lh 1.05–1.08         ls -.025/-.03em (rl-t, ct-h)
     h5     26                lh 1.10–1.16         ls -.025em   (qt-q, pp-name, pn, lead-n)
     lead   21 (phone 18)     lh 1.40
     body   17 / 16           lh 1.45
     ui     15 / 14 / 13      Inter, tracking neutral at 15 and below
   Display tracking tightens with size; Inter text is -.02em at 17+ and 0 at 15 and below.

   SPACE
     gutter (wrap)     60 / 32 / 16       (desktop / tablet / phone)
     grid              12 columns, 20px gap at 900+
     card gap          20 / 16 / 12
     section break     140 / 112 / 80     (polish.css)
     inner page top    72 / 56 / 44       (polish.css)                                   */

:root{
  --grey:#636363;              /* secondary text: 6.0:1 on white, 5.6:1 on #f7f7f7, 5.5:1 on #f4f4f4 */
  --gut:60px;--gap:20px;
  --sec:140px;--sec-top:72px;
  /* one fluid h1 per side of the 700 gutter change; continuous everywhere else, no jump at 1100 */
  --fs-h1:clamp(56px,calc(9.6vw - 8px),96px);
  --fs-h2:clamp(30px,calc(3vw + 22px),56px);
  --lh-h1:.94;--ls-h1:-.04em;
  --lh-h2:1.04;--ls-h2:-.03em;
  --fs-h3:42px;--fs-h5:26px;
}
@media (min-width:700px) and (max-width:1099px){:root{--gut:32px;--sec:112px;--sec-top:56px}}
@media (min-width:700px) and (max-width:899px){:root{--gap:16px}}
@media (max-width:699px){
  :root{--gut:16px;--gap:12px;--sec:80px;--sec-top:44px;
    --fs-h1:clamp(36px,calc(7.8vw + 10px),64px);--lh-h1:.98;--ls-h1:-.035em}
}

/* ============ type ============ */
.h1{text-wrap:balance;font-size:var(--fs-h1) !important;line-height:var(--lh-h1) !important;letter-spacing:var(--ls-h1) !important}
/* every section heading is one size, one leading, one tracking: the closing card's 64 and
   the dark card's 1.02 / -.035em were the odd ones out */
.h2,.cta-box .h2,.qw .h2{font-size:var(--fs-h2) !important;line-height:var(--lh-h2) !important;letter-spacing:var(--ls-h2) !important}
/* the dark proof card sets its heading in a half-width column; it keeps one step down */
@media (min-width:900px){.qw .h2{font-size:clamp(40px,4.4vw,56px) !important}}
@media (max-width:699px){.qw .h2{font-size:clamp(28px,8vw,32px) !important}}
/* h3 / h5 snaps: 44 → 42 and 27 → 26 so each role has exactly one size */
@media (min-width:1100px){.nx-n{font-size:var(--fs-h3) !important}}
@media (min-width:1300px){.qt-q{font-size:var(--fs-h5) !important}}

/* Inter: the page wrapper's -.02em is inherited as a fixed -0.32px, which over-tightens small
   text (-.025em at 13px). Inter now tracks by its own size: -.02em at 17px+, easing to 0 at 15px. */
[style*="'Inter'"],.btn,.skip,.menu-btn,.mn-call,.mn-h,.mp-em,.pm-lbl,.pm-all-m,.fl-err,.ct-st,
.cf-k,.ct-copy,.ct-em,.ct-go,.ct-s,.ct-t,.fl>span:first-child,.imp span,.lead-t,.nx-k,.pl,
.pm-card i,.pm-card span,.pm-list i,.pm-list span,.pm-town,.pr-c,.pr-r,.pt,.sv-l li,legend{
  letter-spacing:clamp(-.02em,calc((15px - 1em) * .17),0px)
}

/* one secondary grey (V4's #636363) for every small or body-grey line */
[style*="color: #5f5855"],[style*="color:#5f5855"],
.ct-em,.pb,.sv-d,.pr-c,.lead-p,.mp-em,.mn-em{color:var(--grey) !important}
/* mobile menu labels were #8a8f8f, 3.3:1 */
.mn-h{color:var(--grey) !important}

/* ============ grid ============ */
/* one gutter token drives the wrap, the menu, and every edge-to-edge element on phone */
@media (max-width:699px){
  .wrap{padding-left:var(--gut) !important;padding-right:var(--gut) !important}
  .qt{margin:0 calc(-1 * var(--gut)) !important;padding:0 var(--gut) !important;scroll-padding:0 var(--gut) !important;gap:var(--gap) !important}
}
@media (max-width:899px){
  .mn-m{padding-left:var(--gut) !important;padding-right:var(--gut) !important}
  .pr::before,.nx::before{inset:0 calc(-1 * var(--gut)) !important}
}
@media (min-width:700px) and (max-width:899px){
  .qt{gap:var(--gap) !important}
}
/* card grids share one gap per size */
.rl,.pm-list,.pp,#people .g3,.g4:not(.cfs),.ct,.ct-pp{column-gap:var(--gap) !important}
@media (max-width:899px){.rl,.pm-list,.ct{row-gap:var(--gap) !important}}

/* desktop: page-level splits land on the 12-column grid instead of fr ratios */
@media (min-width:900px){
  /* projects table: name 4 / place 2 / client 3 / role 3 */
  .pr{grid-template-columns:repeat(12,minmax(0,1fr)) !important;column-gap:var(--gap) !important}
  .pr>.pr-n{grid-column:span 4}
  .pr>.pr-n+.pr-c{grid-column:span 2}
  .pr>.pr-c+.pr-c{grid-column:span 3}
  .pr>.pr-r{grid-column:span 3}
  /* contact: form 7 / details 5 */
  .ct{grid-template-columns:repeat(12,minmax(0,1fr)) !important}
  .ct>:first-child{grid-column:span 7}
  .ct>:last-child{grid-column:span 5}
  /* case facts and the "what we do" split use the grid gap, so their edges line up with the
     cards directly below them */
  .cfs{column-gap:var(--gap) !important}
  .g2[style*="gap: 56px"]{column-gap:var(--gap) !important}
}
@media (min-width:700px) and (max-width:899px){
  .cfs,.g2[style*="gap: 56px"]{column-gap:var(--gap) !important}
}

/* ============ measure ============ */
/* a fixed-width intro paragraph no longer runs past the 360 gutter */
[style*="width: 339px"]{width:auto !important;max-width:min(380px,100%) !important}

/* ============ touch targets (44px, visual size unchanged) ============ */
@media (max-width:899px){
  .mark,.ct-mail,.lead-tel{position:relative}
  .mark::after,.ct-mail::after,.lead-tel::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  /* stacked phone + email pairs: the phone target grows up, the email target grows down,
     so the two never overlap */
  .ct-tel,.ct-em,.mp-tel,.mp-em{position:relative}
  .ct-tel::after,.mp-tel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px}
  .ct-em::after,.mp-em::after{content:"";position:absolute;left:0;right:0;top:0;height:44px}
  .call::after,.menu-btn::after{content:"";position:absolute;inset:-2px}
}