/* Mobile (body.m, below 1024 px wide). First draft from the user's mobile frames (Figma "LATEST MOBILE", 402 wide),
   normalized: design units of the 402-wide frame, scaled by --u (= width / 402, clamped).
   Frame: an 18 gutter on each side of a 366 column. The pillars stay anchored to the column edge and the screen edge
   crops them, so only their inner strip shows in the gutters. The color layers work as on desktop. */
/* Desktop-only parts */
body.m #rails, body.m #frameBottom, body.m .lbl, body.m #pillarDark, body.m .tag-side, body.m .tsoft, body.m #tagline,
body.m #nav .navcol, body.m #nav .cw, body.m #nav .cn, body.m #nav .ln, body.m #nav .divline, body.m #nav .np,
body.m #nav .logo, body.m #nav .bar .nav-desk, body.m .navspace { display: none; }
/* Mobile-only parts */
.m-only { display: none; }
body.m .m-only { display: block; }

/* Fixed color layers span the large viewport, so they don't jump when the browser toolbars show or hide */
body.m .fixed { bottom: auto; height: 100lvh; }
/* The cover (beige outside the frame window) is always on: there's no brown/wide → beige switch on mobile */
/* Full-screen fixed layers reach past the bottom of the screen: on iPhones the page continues under the floating toolbar,
   while "inset: 0" ends at its top edge, so below a line that moved with the toolbar only the page's beige showed
   (user, 2026-10-09). 100lvh is the screen with the toolbars retracted; 120 more covers any rounding. */
body.m .fixed { bottom: auto; height: calc(100lvh + 120px); }
body.m .pgap { bottom: auto; height: calc(100lvh + 120px - var(--pt) * 1px); }
body.m #cover { display: none; }
/* The column paint is part of the page on phones (scrolls natively, never drifts with the toolbars); the screen-anchored
   light layers and the screen-pinned footer photo aren't used there */
body.m #colpaint { position: absolute; inset: auto; top: 0; left: 0; width: 100%; overflow: hidden; }   /* height: the page's length (layoutMobile) */
body.m #colpaint .paint { will-change: auto; }
body.m #cpLight, body.m #cpSheen, body.m #bdPhoto { display: none; }   /* phones use #coverSvg instead (buildCoverSvg) */
body.m #coverSvg { display: block; z-index: 2; }

/* Nav (user's mobile nav frames, 2026-10-06): the dark pill at rest (56 row: 8 / 40 pill / 8) is pressed into a flat
   beige bar as the wordmark row slides under it, finishing as the line under the wordmark reaches the nav, which then
   stays as the bar's bottom line (.mline); scroll-linked, see setupScrollAnimsMobile. Links LETTER / COMPANIES / TEAM
   with slashes; light on the pill, ink on the bar (a crisp flip, --flat). The current section's link takes the accent
   (a band pulled from link to link as sections change; see the links rule below). */
/* --flat is animated on each link and slash itself: an inherited animated value didn't reliably update the links'
   color (QA, 2026-10-07: links stayed light on the flat beige bar) */
@property --flat { syntax: '<number>'; inherits: false; initial-value: 0; }
body.m .d-only { display: none; }
body.m #nav { height: var(--navh, calc(48px * var(--u))); }   /* a whole pixel (layoutMobile), so the nav line, column and pillars meet cleanly */
body.m #nav .bar { left: calc(6px * var(--u)); top: calc(6px * var(--u)); width: calc(100% - 12px * var(--u)); height: calc(36px * var(--u));
  border-radius: calc(18px * var(--u)); font-size: 12px; letter-spacing: .12em; }   /* 12px; .12em for the Medium weight (user, 2026-10-08) */
body.m .mlinks { display: flex; align-items: center; gap: calc(10px * var(--u)); }
/* Link colors come from one painted strip behind the links, seen through their letters (background-clip: text): the
   base color (light on the pill, earth-600 on the flat bar: a step back from oak, so the active link stands out) with a
   near-black band behind the active link. When the section changes, the band is pulled over to the next link, leading
   edge first, the trailing edge letting go late (navBand in main.js; user, 2026-10-08). --bl / --br: the band's edges,
   --bs: its soft edge, in px from the strip's left. */
body.m .mlinks { --bl: 0px; --br: 0px; --bs: 0px; --mbase: color-mix(in oklab, var(--earth-600) calc(var(--flat) * 100%), var(--argent-100)); }
/* Each link paints its own slice of the strip (--ox: its offset in the strip, --stripw: the strip's width; measureNavLinks):
   Safari doesn't show a parent's background through the text of positioned children (the links were invisible on
   iPhones; user, 2026-10-08) */
body.m #nav .mlinks a { text-decoration: none; color: transparent; outline-color: var(--nav-active);
  background: linear-gradient(90deg, var(--mbase) 0, var(--mbase) calc(var(--bl) - var(--bs)), var(--nav-active) var(--bl),
    var(--nav-active) var(--br), var(--mbase) calc(var(--br) + var(--bs)), var(--mbase) 100%)
    calc(-1 * var(--ox, 0px)) 0 / var(--stripw, 100%) 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; }
body.m #nav .mlinks a { position: relative; }
body.m #nav .mlinks a::after { content: ""; position: absolute; inset: -12px -5px; }
body.m .mlinks i { font-style: normal; color: color-mix(in oklab, var(--earth-400) calc(var(--flat) * 100%), var(--argent-500)); }
.mline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--taupe); opacity: 0; }
body.m .foot { height: 100lvh; }   /* one screen with the toolbars collapsed (layoutMobile sets it in whole pixels) */
body.m main section { scroll-margin-top: calc(49px * var(--u)); }
/* Pins: 0.75 of the desktop pin, outer end 14 from the bar's ends in both states, so they ride out with the ends as
   the bar widens (rotated box: 27.75 long, 12 wide). The shorter pin (Figma 936:14274, .mpin) was tried and switched
   off again (user, 2026-10-08: back to the original) */
body.m #nav .pin { width: calc(12px * var(--u)); height: calc(27.75px * var(--u)); }
body.m #nav .pin.l { left: calc((14px + 7.875px) * var(--u)); right: auto; }
body.m #nav .pin.r { right: calc((14px + 7.875px) * var(--u)); left: auto; }
@media (max-width: 374px) {
  body.m #nav .pin { width: calc(10.2px * var(--u)); height: calc(23.59px * var(--u)); }
  body.m #nav .pin.l { left: calc((14px + 6.694px) * var(--u)); } body.m #nav .pin.r { right: calc((14px + 6.694px) * var(--u)); }
}
body.m #nav .mpin { display: none; position: absolute; top: 50%; width: calc(18.589px * var(--u)); height: calc(11.996px * var(--u)); overflow: visible; }
body.m #nav .mpin.l { left: calc(14px * var(--u)); transform: translateY(-50%); }
body.m #nav .mpin.r { right: calc(14px * var(--u)); transform: translateY(-50%) scaleX(-1); }

/* Rows of the first screen (Figma mobile frame 1): plain beige side pillars in the gutters, edged only by the column's
   1px line (Figma's gutter frames are stroked on the column side only), with a taupe line under the nav across the
   full width. The detailed pillar strips are fixed behind the page, so as these rows scroll up their bottom edge
   uncovers the strips from below, locked to the scroll, in step with the brown appearing in the column. */
body.m .wm-row, body.m .hero-row, body.m .tag-row { background: var(--beige); }
body.m .wm-row, body.m .wm-row .stage { box-shadow: inset 0 1px var(--taupe); }   /* (the column's beige covers the row's line) */
body.m .stage { width: auto; margin: 0 calc(var(--xnl) - 1px); border: 1px solid var(--taupe); border-top: 0; border-bottom: 0; background: var(--beige); }
body.m .hline { left: 0; width: 100%; }
body.m main { padding-top: calc(48px * var(--u)); }
/* Wordmark: column width minus 14 each side, 16 above and below */
body.m .wm-row { height: calc((var(--col) - 28px * var(--u)) * 79 / 1256 + 32px * var(--u)); }
body.m .wm-row svg { left: calc(14px * var(--u)); top: calc(16px * var(--u)); width: calc(100% - 28px * var(--u)); }
/* Hero: portrait frame inset 8 in the column, radius 64; the photo covers it, centered on the horse */
body.m .hero-row { height: calc(var(--heroH) * 1px * var(--u)); }
body.m .hero-box { left: calc(8px * var(--u)); right: calc(8px * var(--u)); width: auto; top: calc(8px * var(--u)); bottom: calc(8px * var(--u));
  border-radius: calc(64px * var(--u)); }
body.m .hero-vis { top: calc((48px + 8px) * var(--u)); }
body.m .hero-clip { border-radius: calc(64px * var(--u)); }
body.m .hero-clip img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 51% 55%; }
/* Tagline row (112): two balanced lines, then the elongated star; the row ends 8 below the star's horizontal line, so
   its lower point and vertical line reach into the letter (user). The first screen ends at the row's bottom.
   Soft rise, as on desktop: the column's beige is a sheet with a soft bottom edge that moves up through the row over the
   first 182 px of scroll, so the brown comes up from below; the side pillars stay beige. Above the band's midpoint the
   text is an oak copy, below it the silver base text, so it never fades through the band's mid-tone. */
body.m { --tagH: 112; }
body.m .tag-row { height: calc(var(--tagH) * 1px * var(--u)); }
/* The row's beige covers only the side pillars; the column's beige is the moving sheet */
body.m .tag-row .stage { background: transparent; }
/* The first screen's beige bottom edge uncovers the pillar strips: instead of a hard cut across them, a soft band rides
   along under the edge in the gutters, beige at the edge easing to clear over 180, so the strips come up from beige into
   their full brown (user, 2026-10-08) */
body.m .pfade { position: absolute; top: 100%; height: calc(180px * var(--u)); pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, var(--beige), color-mix(in srgb, var(--beige) 86%, transparent) 14%,
    color-mix(in srgb, var(--beige) 64%, transparent) 30%, color-mix(in srgb, var(--beige) 40%, transparent) 47%,
    color-mix(in srgb, var(--beige) 20%, transparent) 64%, color-mix(in srgb, var(--beige) 7%, transparent) 81%, transparent); }
body.m .pfade.l { left: 0; width: calc(var(--xnl) - 1px); }
body.m .pfade.r { left: calc(var(--xnr) + 1px); right: 0; }
body.m .tag-row { background: linear-gradient(90deg, var(--beige) calc(var(--xnl) - 1px), transparent calc(var(--xnl) - 1px) calc(var(--xnr) + 1px), var(--beige) calc(var(--xnr) + 1px)); }
.m-tag { position: absolute; inset: 0; }
.m-tag p { margin: 0; padding: calc(16px * var(--u)) calc(14px * var(--u)) 0; text-align: center; text-wrap: balance;
  font: 500 calc(20px * var(--u))/1 var(--f-display); letter-spacing: .05em; color: var(--argent-300); text-transform: uppercase; }
.msoft { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.msoft .tcounter { height: calc(var(--tagH) * 1px * var(--u)); }
#mSheet { height: calc((var(--tagH) + 70) * 1px * var(--u)); background: var(--beige);
  mask-image: linear-gradient(180deg, #000 calc(100% - 70px * var(--u)), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px * var(--u)), transparent 100%); }
#mDark { height: calc((var(--tagH) + 35) * 1px * var(--u)); overflow: clip; }
#mDark p { color: var(--oak); }   /* at rest the tagline is oak, as in the mobile frame (desktop rests in grey-blue) */
.m-tag .divstar { left: 50%; top: calc(103.6px * var(--u)); --d: 36; z-index: 1; }

/* Elongated star with fading lines (Figma 876:15557): the star's arm axis is the anchor. Lines: --l/--r horizontal
   reach, --d/--up vertical reach (design units; 0 = none). */
.divstar { position: absolute; width: 0; height: 0; --l: 120; --r: 120; --up: 0; --d: 60; --lc: var(--shade); }
.divstar::before { content: ""; position: absolute; left: calc(-22px * var(--u)); top: calc(-33.6px * var(--u));
  width: calc(44px * var(--u)); height: calc(45.22px * var(--u)); background: radial-gradient(ellipse calc(41.45px * var(--u)) calc(28.58px * var(--u)) at 75% 37%, var(--lit), var(--shade));
  mask: url(../assets/star-tall.svg) center / 100% 100% no-repeat; -webkit-mask: url(../assets/star-tall.svg) center / 100% 100% no-repeat; }
.divstar b { position: absolute; display: block; }
.divstar .h { top: -0.5px; height: 1px; }
.divstar .h.l { right: calc(22px * var(--u)); width: calc(var(--l) * 1px * var(--u)); background: linear-gradient(270deg, var(--lc), transparent); }
.divstar .h.r { left: calc(22px * var(--u)); width: calc(var(--r) * 1px * var(--u)); background: linear-gradient(90deg, var(--lc), transparent); }
.divstar .v { left: -0.5px; width: 1px; }
.divstar .v.d { top: calc(11.6px * var(--u)); height: calc(var(--d) * 1px * var(--u)); background: linear-gradient(180deg, var(--lc), transparent); }
.divstar .v.u { bottom: calc(33.6px * var(--u)); height: calc(var(--up) * 1px * var(--u)); background: linear-gradient(0deg, var(--lc), transparent); }

/* Letter: 20 side padding, a 326 measure (~45 characters per line at 16px) */
body.m .col { width: auto; margin: 0 var(--xnl); }
body.m .letter { padding: calc(56px * var(--u)) calc(20px * var(--u)) 0; }
body.m .letter h3 { font-size: calc(20px * var(--u)); margin-bottom: calc(24px * var(--u)); }
body.m .letter p { font-size: max(15px, calc(16px * var(--u))); margin-bottom: calc(18px * var(--u)); }
body.m .letter p:last-child { margin-bottom: 0; }

/* Companies: full-width cards inset 8, same card system at phone size */
body.m .companies { padding: 0 calc(8px * var(--u)) 0; }
body.m { --keyH: calc(16px * var(--u)); }   /* the Greek key on phones: 16 tall, ends scaled up, middle shortened (keyDividerSVG) */
body.m .team-head.key-head { height: calc((28px + 32px) * var(--u) + var(--keyH)); }
body.m .team-head.key-head .key { top: calc(28px * var(--u)); }
body.m .card { height: calc(200px * var(--u)); border-radius: calc(40px * var(--u)); margin-bottom: calc(8px * var(--u)); }   /* 200: room for a revealed 3-line description */
/* Revealed on mobile: the card at the middle of the screen (setupCompanyReveal). Smaller card: the logo rises less, the
   description is narrower */
body.m .card.on .clogo, body.m .card.on .clogo-text { --lift: calc(200px * var(--u) * .29); }
body.m .cinfo { top: 41%; width: 84%; gap: calc(20px * var(--u)); }
body.m .cdesc { font-size: max(12px, calc(12.5px * var(--u))); line-height: 1.5; }
body.m .clink { font-size: max(11px, calc(11.5px * var(--u))); }

/* Team (Figma mobile frame 2): two columns, the name and role under each card on the column paint, an elongated star
   with lines at each inner row boundary. Cell 183 × 284: card inset 6 (220 tall, radius 30), then the name block
   (12 gap, name, 6, role), leaving ~16 above the star's horizontal line at the row boundary. Block containers reset
   the desktop grid alignment (Chrome applies justify-items / align-content to plain blocks too). */
/* The head reserves exactly the key's height */
body.m .team-head { height: calc((32px + 32px - 6px) * var(--u) + var(--keyH)); }
body.m .team-head .key { top: calc(32px * var(--u)); height: var(--keyH); }
/* Team → footer: 32 from the last names (their cell's 24 below + 8) and 32 down to the footer's window (its top band is
   the nav row + 8, so the divider overlaps into it) */
body.m .foot-key.team-head { height: calc(8px * var(--u) + var(--keyH)); margin-bottom: calc(32px * var(--u) - var(--navh) - 8px * var(--u)); }   /* (the footer's top band is the nav row + 8; follows the nav height) */
body.m .foot-key.team-head .key { top: calc(8px * var(--u)); }
/* Rows 324: room for a two-line name and a two-line role below the card, clear of the star at the row boundary */
body.m .team {   /* rows size to their content: the card, name and role, then 24 (fixed-height rows left two-line names crowding the row below; user, 2026-10-08) */
   padding-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.m .person { height: auto; margin: 0; padding: calc(6px * var(--u)) calc(6px * var(--u)) calc(24px * var(--u)); display: block; justify-items: normal; align-content: normal; color: var(--argent-100);
  font-size: calc(12px * var(--u)); letter-spacing: .08em; border-radius: 0; }
/* One grid with the company cards: cards 8 in from the column edges, 8 between the two (as between stacked company
   cards), frame lines 12 inside every card (user, 2026-10-08) */
body.m .team .person:nth-child(odd) { padding-left: calc(8px * var(--u)); padding-right: calc(4px * var(--u)); }
body.m .team .person:nth-child(even) { padding-left: calc(4px * var(--u)); padding-right: calc(8px * var(--u)); }
body.m .pcard { position: relative; inset: auto; height: calc(220px * var(--u)); border-radius: calc(30px * var(--u)); }
/* Portrait framing for the taller phone card: the square photo covers the card, sized to its height with the same
   vertical framing as desktop (113.5% of the card height, top at −12.2%: same head room), centered horizontally. No dark
   fade: the name sits under the card here. */
body.m .person .ph { width: auto; min-width: 100%; height: 113.5%; left: 50%; top: -12.2%; transform: translateX(-50%); }   /* min-width: covers wider (tablet) cards too */
body.m .pcard::after { content: none; }
/* Long names and roles wrap (balanced) instead of shrinking, within a width that keeps them clear of the center star
   and its lines (QA, 2026-10-07: shrunken one-line names ran into the star) */
body.m .person .nm, body.m .person small { max-width: calc(100% - 28px * var(--u)); margin-left: auto; margin-right: auto; text-wrap: balance; white-space: normal; }
body.m .person .nm { margin-top: calc(12px * var(--u)); }
body.m .person small { max-width: calc(100% - 40px * var(--u)); font-size: 10px; line-height: 1.4; letter-spacing: .08em; color: var(--argent-200);   /* names argent-100, roles argent-200: readable on the team's brown (roles were argent-400, 2.6–3.6:1) */
  margin-top: calc(5px * var(--u)); }   /* quieter than the names; most roles fit one line (2026-10-08) */
body.m .team .star { display: none; }
body.m .team .divstar { --l: 60; --r: 60; --up: 60; --d: 60; z-index: 3; }   /* lines continue the arm tips' shade (a lit start jumped in color at the tips; user, 2026-10-08) */
/* The team star at 80% on phones, so the tighter rows keep it clear of the names and roles; its lines reattach at the
   smaller arm tips (22 → 17.6 out, 11.6 → 9.28 down, 33.6 → 26.88 up) */
body.m .team .divstar::before { transform: scale(.8); transform-origin: calc(22px * var(--u)) calc(33.6px * var(--u)); }
body.m .team .divstar .h.l { right: calc(17.6px * var(--u)); } body.m .team .divstar .h.r { left: calc(17.6px * var(--u)); }
body.m .team .divstar .v.d { top: calc(9.28px * var(--u)); } body.m .team .divstar .v.u { bottom: calc(26.88px * var(--u)); }

/* End */


/* Phase 1 on phones: a shorter brown stretch after the tagline; the nav pill holds only the logo badge, centered, sized
   for the 36 pill and the 48 flat bar */
body.m .p1gap { height: calc(120px * var(--u)); }
body.m.navlogo #nav .logo { display: block; width: calc(30px * var(--u)); height: calc(30px * var(--u)); }