/* ============ SHARED RESPONSIVE SCALE TIER (scale.css) ============
   The one site-wide system for tablet scaling. Two bands:

   - 768-799: the MOBILE SLIVER. <800 renders the mobile layout and is frozen:
     the rules in the first block are the values this sliver has always had, kept
     verbatim so nothing below 800 ever moves when the tablet band is retuned.

   - 800-1279: the TABLET BAND (desktop layout, scaled). RETUNED RULE: every
     size sits BETWEEN its mobile value and its desktop value, stepping down
     proportionally from desktop, and lands EXACTLY on the desktop computed
     value at 1280 (no snap at the hand-over). Where mobile and desktop share
     one value (body 18, ui 16, caption 14, button labels 14, text CTAs 16,
     heading-m 36, heading-s 30, lead 24, meta labels 14 ...) the band holds
     that same value, so the tier simply does not override it: the page's own
     base rule IS the tablet value. Only genuinely fluid sizes keep ramps here,
     each spanning exactly 800->1280 (b=(v1280-v800)/4.8, a=v800-8b).

   Selectors are doubled (.cta.cta) so the tier outranks page and Nav base
   rules regardless of stylesheet load order. Mobile (<=799) and desktop
   (>=1280) computed sizes are NEVER changed here. No page defines its own
   tablet scaling; it lives here only. Linked from every page's helmet after
   its own <style>. Pinned exceptions stay pinned and are never ramped:
   testimony lead 24/32, ct-lbl/ct-k/ct-v retype, nav rail chips 14/20,
   JuniperBay hand sizes, filled-button font sizes, the 24px contact email. */

/* ============ MOBILE SLIVER (768-799) — frozen, pre-existing values ============ */
@media (min-width:768px) and (max-width:799px){
.stage.stage{
--type-heading-m:700 clamp(38px,calc(17px + 2.734vw),52px)/1.16 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif;
--type-heading-s:500 clamp(32px,calc(17px + 1.953vw),42px)/1.22 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif;
--type-lead:500 clamp(25.5px,calc(18.75px + 0.879vw),30px)/1.3 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif;
--para-measure:min(440px,66vw);
}
.page.page,.stage.stage,.navroot.navroot{
--type-body:400 clamp(19px,calc(16px + 0.391vw),21px)/1.55 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif;
--type-ui:600 clamp(17px,calc(15.5px + 0.195vw),18px)/1.4 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif;
--type-caption:700 clamp(14.5px,calc(12.25px + 0.293vw),16px)/1.4 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif;
}
.cta.cta,.btn-sec.btn-sec,.corner-cta.corner-cta{font-size:clamp(16.5px,calc(14.25px + 0.293vw),18px);line-height:20px;padding:calc(11.5px + 0.586vw) calc(17px + 1.172vw)}
.top.top,.details-toggle.details-toggle,.big.big,.bcta.bcta,.skipcta.skipcta{font-size:clamp(17px,calc(15.5px + 0.195vw),18px);line-height:1.5}
/* the mobile top bar's badge row (the badge sits inside the bar, centered on the taller icon box, lifted 7px) */
.page.page{--bar-row:calc((clamp(44px,calc(29px + 1.953vw),54px) + clamp(48px,calc(33px + 1.953vw),58px))/2 - 7px)}
.navroot .iconbtn.iconbtn{width:clamp(48px,calc(33px + 1.953vw),58px);height:clamp(48px,calc(33px + 1.953vw),58px);border-radius:clamp(8px,1vw,10px)}
.navroot .iconbtn svg{width:clamp(28px,calc(16px + 1.563vw),36px);height:clamp(28px,calc(16px + 1.563vw),36px)}
.navroot .brandbadge img{height:clamp(44px,calc(29px + 1.953vw),54px)}
.vbtn.vbtn{width:clamp(48px,calc(33px + 1.953vw),58px);height:clamp(48px,calc(33px + 1.953vw),58px)}
.mn-link.mn-link{font-size:clamp(46px,calc(37px + 1.172vw),52px)}
.mlabel.mlabel,.flab.flab,.trole.trole,.count.count,.nudge.nudge,.eslot.eslot{font-size:clamp(14.5px,calc(12.25px + 0.293vw),16px);line-height:1.4}
.eslot.eslot{min-height:1.45em}
.kt-num.kt-num{font-size:clamp(14.5px,calc(12.25px + 0.293vw),16px)}
.vnote.vnote{font-size:clamp(14.5px,calc(12.25px + 0.293vw),16px);line-height:1.4}
.hero.hero{font-size:clamp(44px,calc(14px + 3.906vw),64px)}
.kt-title.kt-title{font-size:clamp(21px,calc(16.5px + 0.586vw),24px);line-height:1.4}
.problem .dpara.dpara{font-size:clamp(19px,calc(16px + 0.391vw),21px);line-height:1.55}
.solution .dpara.dpara{font-size:clamp(25px,calc(20.5px + 0.586vw),28px);line-height:1.35}
.problem .dhead.dhead{font-size:clamp(14.5px,calc(12.25px + 0.293vw),16px);line-height:1.4}
.solution .dhead.dhead{font-size:clamp(19px,calc(14.5px + 0.586vw),22px);line-height:1.35}
.headline.headline{font-size:clamp(52px,calc(22px + 3.906vw),72px)}
.speriod.speriod{font-size:clamp(17px,calc(15.5px + 0.195vw),18px);line-height:1.5}
.cblk.cblk{max-width:var(--para-measure)}
.tz:not(.anns) .cnote.cnote{font-size:clamp(19px,calc(17.5px + 0.195vw),20px);line-height:1.5}
.tz:not(.anns) .annot.annot{font-size:clamp(16px,calc(14.5px + 0.195vw),17px);line-height:1.4}
.hl.hl{font-size:clamp(26px,calc(17px + 1.172vw),32px)}
.page .annot.annot{font-size:clamp(17px,calc(14px + 0.391vw),19px);line-height:1.3}
.hrole.hrole{font-size:clamp(19px,calc(16px + 0.391vw),21px);line-height:1.5}
.fhead.fhead{font-size:clamp(31px,calc(26.5px + 0.586vw),34px);line-height:1.27}
.uin.uin,.ta.ta{font-size:clamp(19px,calc(16px + 0.391vw),21px);line-height:1.55}
.failp.failp{font-size:clamp(17px,calc(15.5px + 0.195vw),18px);line-height:1.5}
.tcard.tcard,.tin.tin{width:min(clamp(300px,calc(-30px + 42.969vw),520px),84vw)}
.tnote.tnote{padding:clamp(22px,calc(-5px + 3.516vw),40px)}
.npan.npan{padding-left:clamp(22px,calc(-5px + 3.516vw),40px);padding-right:clamp(22px,calc(-5px + 3.516vw),40px)}
.np1.np1{padding-top:clamp(22px,calc(-5px + 3.516vw),40px);padding-bottom:clamp(18px,calc(9px + 1.172vw),24px)}
.np3.np3{padding-top:clamp(22px,calc(7px + 1.953vw),32px);padding-bottom:clamp(22px,calc(-5px + 3.516vw),40px)}
.tphoto.tphoto{width:clamp(52px,calc(22px + 3.906vw),72px);height:clamp(52px,calc(22px + 3.906vw),72px);font-size:clamp(18px,calc(9px + 1.172vw),24px)}
.chips:has(.cbtn){gap:clamp(12px,1.563vw,20px)}
}

/* ============ TABLET BAND (800-1279) — retuned: between mobile and desktop ============
   Everything NOT listed here intentionally renders at its base (= desktop) size:
   body 18/28, ui 16/24, caption 14/20, heading-m 36/44, heading-s 30/38, lead 24/32,
   filled-button labels 14/20 with their component padding, text CTAs 16/24, meta
   labels 14/20, kt numbers/titles 14 & 20/28, problem/solution copy 18/28 & 24/32,
   JuniperBay hand headings (clamp(25px,2.7vw,29px)), work-scene annot 14/18,
   Expertise hover roles 16/24, contact inputs and fail copy, video note/controls.
   Mobile and desktop values are equal for all of those, so "between" = the same. */
@media (min-width:800px) and (max-width:1279px){
/* Intro headline: mobile hands over at 56 (clamp cap at 799), desktop is 72.
   60 at 800 -> 72 at 1280. */
.headline.headline{font-size:clamp(60px,calc(40px + 2.5vw),72px)}
/* Intro "Building interpretations..." note: mobile 16/24, desktop 18/26. */
.tz:not(.anns) .cnote.cnote{font-size:clamp(16.5px,calc(14px + 0.3125vw),18px);line-height:1.45}
/* Snippet paragraphs hold the desktop measure (base --para-measure 400px) at every
   band width; the base 42vw cap would pinch them below ~950. */
.cblk.cblk{max-width:var(--para-measure)}
/* Case-study hero: mobile 40 (clamp floor), desktop 5vw (64 at the 1280 hand-over). */
.hero.hero{font-size:clamp(44px,calc(14px + 3.906vw),64px)}
/* Expertise heading: mobile 20 (clamp floor), desktop 2.5vw (32 at the hand-over). */
.hl.hl{font-size:clamp(26px,calc(17px + 1.172vw),32px)}
/* Name badge: mobile-bar 30px, desktop 54px; CLAUDE.md pins the band at 38px flat
   (the Get in Touch CTA, 46px, stays the band's taller header-band member). */
.navroot .brandbadge img{height:38px}
/* Expertise top spacing: badge row height + surface padding for the sticky filter row. */
.page.page{--bar-row:38px;--chips-pad:8px}
.chips:has(.fchip){margin-top:0}
.chips:has(.cbtn){gap:clamp(12px,1.563vw,20px)}
/* Get in touch: the full-width band conversation column wraps no validation line —
   one reserved line is enough (mobile and the narrow desktop column reserve two). */
.eslot.eslot{min-height:1.45em}
/* Zoey's lines, one token: 24px@800 -> 26px@1280, meeting the mobile clamp (20->22/28)
   at 800 and handing over to the 30/38 desktop token at 1280. */
.page.page{--type-heading-s:500 clamp(24px,calc(20.667px + 0.417vw),26px)/32px 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif}
/* Menu panel items: the panel's own scoped step-up of the nav text button (bigger + Bold),
   ramped with the band exactly like Zoey's lines above (24 at 800 -> 26 at 1280) so the list
   keeps filling the panel without crowding the close icon or the metadata block. Sub-items
   take the same size and stay secondary by indentation + Medium weight. Scoped to .mppanel,
   so the nav rail's pinned 14/20 items are untouched. */
.mppanel.mppanel{--type-menu:700 clamp(24px,calc(20.667px + 0.417vw),26px)/32px 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif;--type-menu-sub:500 clamp(24px,calc(20.667px + 0.417vw),26px)/32px 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif;--menu-indent:var(--space-6)}
/* Kind words: card and note-face geometry, mobile 300/22 -> desktop 520/40. */
.tcard.tcard,.tin.tin{width:min(clamp(300px,calc(-30px + 42.969vw),520px),84vw)}
.tnote.tnote{padding:clamp(22px,calc(-5px + 3.516vw),40px)}
.npan.npan{padding-left:clamp(22px,calc(-5px + 3.516vw),40px);padding-right:clamp(22px,calc(-5px + 3.516vw),40px)}
.np1.np1{padding-top:clamp(22px,calc(-5px + 3.516vw),40px);padding-bottom:clamp(18px,calc(9px + 1.172vw),24px)}
.np3.np3{padding-top:clamp(22px,calc(7px + 1.953vw),32px);padding-bottom:clamp(22px,calc(-5px + 3.516vw),40px)}
.tphoto.tphoto{width:clamp(52px,calc(22px + 3.906vw),72px);height:clamp(52px,calc(22px + 3.906vw),72px);font-size:clamp(18px,calc(9px + 1.172vw),24px)}
}

/* ============ DESKTOP-LAYOUT BAND (800-1279) ============
   From 800 up every page renders the DESKTOP composition (rail visible, artwork behind
   text, edge-anchored blocks on the frame lines); only SIZES flow. These ramps give that
   geometry room at tablet widths: each spans 800->1280 and lands exactly on the desktop
   value, so 1280 is a seamless hand-over. Selectors doubled to outrank page rules.
   Below 800 nothing here applies: the mobile stack is untouched. */
@media (min-width:800px) and (max-width:1279px){
/* Rail gutter: the rail's real content is ~153px wide (longest [ CORE ] line), so the
   reserved gutter ramps 150 -> 210 and hands over to the desktop 210. */
.stage.stage,.page.page{--nav-w:clamp(150px,calc(50px + 12.5vw),210px)}
/* Landing intro: the hero group never grows past the corridor right of the rail, and keeps
   a 48px gutter off it so the [ CORE ] block never touches the headline at 800. */
.stage.stage{--hblk:min(clamp(600px,42vw,640px),calc(100vw - var(--content-left) - var(--frame-x) - 48px))}
/* Case study: the meta column and its gutters ramp together; --hero-axis stays
   column + gutter, exactly as the desktop 210 + 48 = 258. */
.page.page{--metacol:clamp(150px,calc(50px + 12.5vw),210px);--colgap:clamp(28px,calc(-5.3px + 4.17vw),48px);--hero-axis:calc(var(--metacol) + var(--colgap))}
.top-area.top-area{grid-template-columns:var(--metacol) minmax(0,1fr);gap:clamp(28px,calc(14.7px + 1.67vw),36px) var(--colgap)}
.kt.kt{grid-template-columns:var(--metacol) minmax(0,1fr);gap:clamp(28px,calc(9.3px + 2.6vw),32px) var(--colgap)}
.kt-body.kt-body{gap:28px var(--colgap)}
/* Expertise: the hero group's top (the annotation's overhang included, --annot-lift)
   lands on --header-clearance, the site-wide header band, so it clears the badge/CTA
   bar by the same rule as every other page. */
.hero:has(.hwrap).hero.hero{padding-top:calc(var(--header-clearance) - var(--frame-top) + var(--annot-lift,0px))}
/* Get in touch: the conversation column holds its desktop measure (347 at 1280) down to
   320 at 800, and Zoey scales with it (24vw -> 32vw) so the corridor stays legible.
   Her horizontal anchor is clamped in the page's zoeyRight() to match. */
/* Get in touch: through the band Zoey is held with her visible left edge at 60vw (the
   corridor clamp in the page's zoeyRight), so the conversation column takes the whole
   corridor she leaves, 40px off her edge, instead of running as a fixed narrow track: the
   recap card fills the column, so this IS the note's reading measure. The cap is exactly
   the width the desktop rule hands over at 1280 (44vw - 32 - the left gutter = 480 there),
   so the column reads the same on both sides of the boundary and the CPL stays even across
   the band instead of spiking where Zoey's clamp releases. */
.convo.convo{width:auto;right:calc(40vw + var(--space-10));max-width:480px}
.zwrap.zwrap{width:min(calc(-171px + 45.4vw),57svh)}
}
/* The 768-799 sliver of the old Expertise hero-drop clamp, kept for the mobile sliver
   only (the >=800 header-band rule above supersedes it in the band). */
@media (min-width:768px) and (max-width:799px){
.hero:has(.hwrap).hero{padding-top:clamp(26px,calc(1134.8px - 112vw),82px)}
}