/* PAAK v3 — type system.
   One ladder for size → weight → tracking → leading, applied over the Webflow
   template and the pk-* section styles. Loaded LAST so it wins on equal specificity.
   Owner of every typographic decision on the homepage. Delete this file to revert.

   TIERS
     display  >= 40px   weight 500
     sub      20-44px   weight 600
     read     17.6px    weight 400/500  (reading copy)
     meta     15px      weight 400/500  (nav, footer, tags)
     label    12px      weight 600, uppercase, +0.08em
     wordmark            weight 500 — logotype, deliberately off the heading tier

   TRACKING LADDER (em, so it follows every clamp)
     >=90px -0.03 | 60-89 -0.028 | 40-59 -0.025 | 28-39 -0.02
     20-27  -0.015 | 16-19 -0.01 | label +0.08
*/

:root {
  --pk-tr-xxl: -0.03em;
  --pk-tr-xl: -0.028em;
  --pk-tr-l: -0.025em;
  --pk-tr-m: -0.02em;
  --pk-tr-s: -0.015em;
  --pk-tr-xs: -0.01em;
  --pk-tr-label: 0.08em;

  --pk-lh-xxl: 1;
  --pk-lh-xl: 1.05;
  --pk-lh-l: 1.08;
  --pk-lh-m: 1.1;
  --pk-lh-s: 1.2;
  --pk-lh-read: 1.5;
  --pk-lh-meta: 1.3;

  /* Matched to the Omnera reference 2026-08-14: its .logo-big / display tier runs
     Switzer 500 and its sub/meta tier 600 — measured off the live template, not
     eyeballed. We were one notch light on both, which is why our masthead read
     thinner than the reference at the same size. Body reading copy is unaffected
     (it inherits the template's 500 and takes no weight rule here). */
  --pk-w-display: 500;
  --pk-w-sub: 600;

  --pk-text-read: 1.1rem; /* 17.6px */
  --pk-text-meta: 15px;
  --pk-text-label: 12px;
}

/* ---------- display headings: the template .h2 tier ---------- */

/* base = the 46.4px tier (.h2.fade, .h2._02.big, .h2._04, .h2.text-weight) */
.h2.h2 {
  font-weight: var(--pk-w-display);
  letter-spacing: var(--pk-tr-l);
  line-height: var(--pk-lh-l);
}
.h2.text-weight.text-weight { font-weight: var(--pk-w-display); }

/* 64px */
.h2.fade.big.big { letter-spacing: var(--pk-tr-xl); line-height: var(--pk-lh-xl); }
/* 112px "Our Work" */
.h2.fade.cnt.cnt { letter-spacing: var(--pk-tr-xxl); line-height: var(--pk-lh-xxl); }

/* ---------- sub / card titles (the small .h2 variants) ---------- */
.h2._01.h2._01,
.h2._03.h2._03,
.h2._05.h2._05,
.h2._06.h2._06 {
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-s);
  line-height: var(--pk-lh-s);
}
.services-card .h2._03.no-bottom { letter-spacing: var(--pk-tr-s); }

/* hero eyebrow list — the one uppercase label in the hero, onto the label spec */
.main-hero-wrapper .h2._01.h2._01 {
  font-size: var(--pk-text-label);
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-label);
  line-height: var(--pk-lh-meta);
}

/* ---------- wordmarks: logotype, not headings ---------- */
.logo-big.logo-big { letter-spacing: var(--pk-tr-xxl); }
.footer-wordmark.footer-wordmark { letter-spacing: var(--pk-tr-xxl); }

/* ---------- What we do ---------- */
.pk-wwd__lede,
.pk-wwd__desc {
  letter-spacing: var(--pk-tr-l);
  line-height: var(--pk-lh-l);
}
.pk-wwd__cta {
  font-size: 16px;
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-xs);
  line-height: var(--pk-lh-meta);
}

/* ---------- Process ---------- */
.pk-ps__sub { letter-spacing: var(--pk-tr-l); line-height: var(--pk-lh-l); }
.pk-ps__title {
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-l);
  line-height: var(--pk-lh-l);
}
.pk-ps__desc {
  font-size: var(--pk-text-read);
  letter-spacing: var(--pk-tr-xs);
  line-height: var(--pk-lh-read);
}
.pk-ps__step {
  font-size: var(--pk-text-label);
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-label);
}
.pk-ps__price { font-size: var(--pk-text-meta); letter-spacing: var(--pk-tr-xs); }

/* ---------- Work grid ---------- */
.pk-work__title {
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-m);
  line-height: var(--pk-lh-m);
}
.pk-work__tags {
  font-size: var(--pk-text-meta);
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-xs);
  line-height: var(--pk-lh-meta);
}

/* ---------- About desk ---------- */
.pk-ad__hint {
  font-family: var(--font--third-font);
  font-size: var(--pk-text-label);
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-label);
  line-height: var(--pk-lh-meta);
}

/* ---------- nav + footer meta ---------- */
.navigation-text-main.navigation-text-main,
.text-footer.text-footer,
.footer-cta.footer-cta {
  font-size: var(--pk-text-meta);
  letter-spacing: var(--pk-tr-xs);
  line-height: var(--pk-lh-meta);
}

/* ---------- Insights (index + article interiors) ----------
   The section used to run its own parallel ladder, because this file was not
   loaded there at all. Measured at 1512 before the change, /insights disagreed
   with the homepage on: label typeface (IBM Plex Mono — a face that renders on
   ZERO elements anywhere else on the site), display weight (500 vs 400), and
   tracking on every heading (-0.032 / -0.035 / -0.038em against a ladder that
   tops out at -0.03em). The shared nav and footer — literally the same markup,
   lifted out of index.html by build-insights.py — even rendered at different
   sizes: footer links 14.4px/lh1.15 there against 15px/lh1.30 here.

   Loading this file on those pages fixes the shared chrome by itself. The rules
   below put the section's own components onto the same size → weight → tracking
   → leading ladder documented at the top. */

/* labels, numbers and meta — the 12px label tier, in Switzer like every other
   label on the site (.pk-ps__step, .pk-ad__hint) */
.pk-ins .pk-ins__label,
.pk-ins .pk-ins__num,
.pk-ins .pk-ins__prose th {
  font-family: var(--font-display);
  font-size: var(--pk-text-label);
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-label);
  line-height: var(--pk-lh-meta);
  text-transform: uppercase;
}

/* display tier: the hero title and the closing headline are the same rank, so
   they take the same size as well as the same spec — they were 56.8 and 54.4,
   close enough to read as a mistake rather than a hierarchy */
.pk-ins .pk-ins__title,
.pk-ins .pk-ins__close h2 {
  font-size: clamp(2.05rem, 4.4vw, 3.55rem);
  font-weight: var(--pk-w-display);
  letter-spacing: var(--pk-tr-l);
  line-height: var(--pk-lh-l);
}

/* sub tier: section heads */
.pk-ins .pk-ins__sechead h2 {
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-m);
  line-height: var(--pk-lh-m);
}

/* card / row titles — same spec as .pk-work__title on the homepage */
.pk-ins .pk-ins__rowtitle,
.pk-ins .pk-ins__svc h3,
.pk-ins .pk-ins__prose h2 {
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-s);
  line-height: var(--pk-lh-m);
}
.pk-ins .pk-ins__pn b,
.pk-ins .pk-ins__prose h3 {
  font-weight: var(--pk-w-sub);
  letter-spacing: var(--pk-tr-xs);
  line-height: var(--pk-lh-s);
}

/* deck / lede */
.pk-ins .pk-ins__lede {
  font-weight: var(--pk-w-display);
  letter-spacing: var(--pk-tr-s);
  line-height: 1.4;
}

/* reading copy — the 17.6px read tier.
   ONE deliberate deviation from the homepage: leading stays at 1.6 rather than
   the homepage's 1.5. Every read-tier block on the homepage is a three-or-four
   line card blurb; these are 6–9 minute articles in a 620px column, where 1.5 is
   too tight to track across. Size, weight and tracking are on the ladder.

   The size, leading and tracking have to be restated on `p` and `li` themselves,
   not just on the column. styles.css sets `p { font-size: var(--font--h6);
   line-height: 1.3; letter-spacing: -0.4px }` and `li` likewise — a direct rule on
   the element, and a direct rule always beats an inherited value however specific
   the ancestor's selector is. So every article paragraph has been rendering at
   16px / lh1.30 / -0.025em since the section was built, while insights.css sat
   there declaring 1.0625rem / 1.62 on the container and quietly losing. Measured,
   not assumed: computed style on a mid-article <p> read 16px lh20.8px ls-0.4px. */
.pk-ins .pk-ins__prose,
.pk-ins .pk-ins__prose p,
.pk-ins .pk-ins__prose li {
  font-size: var(--pk-text-read);
  letter-spacing: var(--pk-tr-xs);
  line-height: 1.6;
}
/* The opening paragraph and pull quotes step up out of the read tier. Their sizes
   are restated here rather than left in insights.css: the `p`/`li` rule above ties
   with `.pk-ins__prose > p:first-of-type` on specificity, and this file loads last,
   so without these the lede paragraph would flatten into the body. */
.pk-ins .pk-ins__prose > p:first-of-type {
  font-size: 1.22rem;
  letter-spacing: var(--pk-tr-xs);
  line-height: 1.4;
}
.pk-ins .pk-ins__prose blockquote {
  font-size: 1.15rem;
  letter-spacing: var(--pk-tr-xs);
  line-height: 1.4;
}
.pk-ins .pk-ins__rowdek {
  font-size: var(--pk-text-meta);
  letter-spacing: var(--pk-tr-xs);
  line-height: var(--pk-lh-read);
}
.pk-ins .pk-ins__close p {
  font-size: var(--pk-text-read);
  font-weight: var(--pk-w-display);
  letter-spacing: var(--pk-tr-xs);
  line-height: var(--pk-lh-read);
}

/* No button type here on purpose. buttons.css is the site's one button — shape,
   height, size and hover for every CTA on every page — and it loads after this
   file. A rule here would only apply to whichever buttons its selectors happen to
   miss, which is exactly the kind of split ownership this pass exists to remove. */

/* ================= mobile ================= */
@media screen and (max-width: 767px) {
  /* keep the display tiers separated instead of converging */
  .h2.fade.cnt.cnt { font-size: 44px; }
  .h2.h2 { font-size: 28px; }
  .h2.fade.fade,
  .h2._02.h2._02,
  .h2._04.h2._04,
  .h2.text-weight.text-weight { font-size: 28px; }
  .h2._02.big.big { font-size: 28px; }

  /* the small .h2 variants must not inherit the 28px display size */
  .h2._01.h2._01, .h2._03.h2._03, .h2._05.h2._05, .h2._06.h2._06 { font-size: 1.1rem; }
  .h2._03.bg.bg { font-size: 1.25rem; }
  .main-hero-wrapper .h2._01.h2._01 { font-size: var(--pk-text-label); }

  /* lede must stay above its own supporting copy */
  .pk-wwd__lede { font-size: clamp(22px, 5.4vw, 30px); }
  .pk-wwd__desc { font-size: 17px; line-height: var(--pk-lh-read); }
  .pk-ps__sub { font-size: clamp(22px, 5.4vw, 30px); }

  /* section titles stay in the top display band on phones instead of
     collapsing onto the .h2 tier (was 30px vs 28px — indistinguishable) */
  .pk-wwd__eyebrow { font-size: clamp(38px, 9.5vw, 56px); }
  .pk-ps__heading { font-size: clamp(38px, 9.5vw, 56px); }

  /* footer keeps two levels instead of flattening to one */
  .navigation-text-main.navigation-text-main { font-size: 16px; }
  .text-footer.text-footer { font-size: 14px; }

  /* Insights: mirror the two step-downs insights.css makes at this breakpoint.
     They have to be repeated here, not left there — this file loads LAST, so its
     unmedia'd `.pk-ins .pk-ins__prose` rule out-cascades a media-query rule of
     equal specificity in insights.css and the column would stay at 17.6px. */
  .pk-ins .pk-ins__prose,
  .pk-ins .pk-ins__prose p,
  .pk-ins .pk-ins__prose li { font-size: 1.02rem; }
  .pk-ins .pk-ins__prose > p:first-of-type { font-size: 1.12rem; }
}

/* ================= descender room =================
   The display tiers run tight leading (1.0–1.09), so a line box is SHORTER
   than the font's ascent+descent. Anything that clips to that box therefore
   cuts the tails off g/y/p/j/q/, — measured at 46px/lh1.089 the cut was
   5.75px on "g", which is what showed on "The tools got cheap. Taste didn't."

   Fix without moving a single glyph: grow the clip box downward with
   padding-bottom and take the same amount back with a negative margin-bottom.
   For an inline-block with overflow != visible the baseline IS the bottom
   margin edge, so the pair is a layout no-op — only the clip rectangle grows.
   (Same trick as .logo-big's padding-right/margin-right, on the other axis.)

   0.2em covers the worst case: 0.125em of tail below the line box at lh 1.09,
   plus the extra 0.045em the lh-1.0 tier ("Our Work") loses on top of that.
   The one animation that rides these masks (works-v3.js's Our Work roll)
   starts its letters below the enlarged box — see the yPercent there. */
.gsap_split_letter-mask {
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

/* Nav + footer links: .text-overflow is a fixed 19px window built for a
   Webflow hover-roll (a second identical ._02 copy parked underneath, slid up
   on hover). That interaction never shipped here — webflow.js is not on the
   page and no CSS or JS drives it — so the window only ever clipped the "g"
   in "Insights". Unclip it and drop the dead duplicate, which would otherwise
   be the thing peeking out below. Height stays 19px: the bar does not move. */
.button-flex .text-overflow { overflow: visible; }
.button-flex .text-overflow .navigation-text-main._02 { display: none; }