/* ===== tokens.css ===== */
/* ==========================================================================
   AVELaunch Books — design tokens
   Source of truth: WEBSITE_DESIGN (Figma), page "Dekstop"
   Handoff document v1.0, 7 September 2026, sections 6 and 7
   No colour value may be written anywhere outside this file.
   ========================================================================== */

:root {
  /* --- 6.2 Primitive palette ------------------------------------------- */
  --rich-black-1:      #0B1424;  /* body text, inverse surfaces, 3px strokes */
  --rich-black-2:      #E8EDF5;
  --rich-black-3:      #C7D2E3;  /* 1px hairline, vertical grid lines       */
  --rich-black-4:      #93A3BD;
  --rich-black-5:      #5D6C86;  /* secondary text                          */
  --rich-black-6:      #08101D;
  --rich-black-7:      #050A14;

  --space-cadet-1:     #1B2A57;
  --space-cadet-2:     #EEF2FA;
  --space-cadet-3:     #CBD6EC;
  --space-cadet-4:     #9BAED3;
  --space-cadet-5:     #657BA8;
  --space-cadet-6:     #142042;
  --space-cadet-7:     #0D162D;

  --vista-blue-1:      #7C9EC7;  /* brand surface                           */
  --vista-blue-2:      #F3F7FC;  /* spelled "Vista Vlue 2" in the file      */
  --vista-blue-3:      #DCE8F5;
  --vista-blue-4:      #B7CBE3;
  --vista-blue-5:      #93B1D3;

  --columbia-blue-1:   #C2E6F9;
  --columbia-blue-2:   #FCFEFF;
  --columbia-blue-3:   #EEF8FD;
  --columbia-blue-4:   #D9EEF9;
  --columbia-blue-5:   #CBE8FA;

  --amber-1:           #F2BB16;
  --amber-2:           #F9E08A;
  --amber-3:           #F7CD52;
  --amber-4:           #E0A800;  /* accent: buttons, underlines, active     */

  --editorial-white-1: #F8F7F4;
  --editorial-white-2: #FFFFFF;
  --editorial-white-3: #FDFBF8;
  --editorial-white-4: #EEEAE3;  /* page background                         */

  /* --- 6.3 Semantic layer ----------------------------------------------
     Reference map from the file. The layout binds to primitives, exactly
     as the Figma layers do, so this layer stays a dictionary of roles.     */
  --surface-page:       var(--editorial-white-4);
  --surface-brand:      var(--vista-blue-1);
  --surface-accent:     var(--amber-4);
  --surface-inverse:    var(--rich-black-1);
  --content-primary:    var(--rich-black-1);
  --content-secondary:  var(--rich-black-5);
  --content-on-inverse: var(--editorial-white-4);
  --content-accent:     var(--amber-4);
  --content-on-accent:  var(--rich-black-1);
  --content-on-brand:   var(--rich-black-1);
  --border-strong:      var(--rich-black-1);   /* 3px */
  --border-hairline:    var(--rich-black-3);   /* 1px */
  --border-accent:      var(--amber-4);        /* 3px */
  --action-fill:        var(--amber-4);
  --action-fill-hover:  rgba(255, 255, 255, 0); /* no fill on hover        */
  --action-border-hover: var(--amber-4);

  /* --- 4.1 Grid ---------------------------------------------------------
     1440 reference · 12 columns · Stretch · margin 50 · gutter 25
     Working area 1340. Column width is derived, never written down.       */
  --layout-reference: 1440px;
  --layout-margin:    50px;
  --layout-gutter:    25px;
  --layout-content:   1340px;
  --layout-floor:     1200px;   /* lower bound of the desktop layout       */

  /* --- 4.1 Vertical lines ----------------------------------------------
     Seven lines, step 180 of 1440 = 12.5 % of the window.
     THIS IS THE ONLY PLACE THE POSITIONS EXIST. Both layers — the page
     layer under the content and the header layer over its blurred
     background — read them from here. Writing them twice is what makes
     the two layers drift apart at the header edge.                        */
  --line-step:  12.5%;
  --line-width: 1px;
  --line-color: var(--rich-black-3);

  /* --- 8 Effects --------------------------------------------------------
     One effect on the whole site: BACKGROUND_BLUR 50 on the header plate. */
  --header-blur: 25px;
  --header-plate: rgb(238 234 227 / 0.75);
  --header-height: 61px;

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 150ms;
  --t-base: 300ms;
}

/* ===== base.css ===== */
/* ==========================================================================
   AVELaunch Books — fonts, typography scale, grid, vertical lines, layout
   intent tags. Handoff sections 4, 5, 7, 15.
   ========================================================================== */

/* --- 15.1 Fonts. Served from our own domain, never a third party. -------- */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Comforter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/comforter-latin-400-normal.woff2") format("woff2");
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: var(--layout-floor);
  background: var(--surface-page);
  color: var(--content-primary);
  font-family: "Mulish", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* 9. Keyboard focus is visible on every interactive element: white plate,
   3px accent stroke — the decision taken for the form fields, applied site
   wide because the component sets carry no separate focus variant.        */
:focus-visible {
  outline: 3px solid var(--border-accent);
  outline-offset: 2px;
  background-color: var(--editorial-white-2);
}

/* --- 7.3 Heading trim ---------------------------------------------------
   Headings in the file sit on the cap height, not on the line box. Without
   the trim every heading drops a few pixels and the spacing above it reads
   larger than the macket.                                                  */
.u-trim {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* --- 7.2 Type styles ----------------------------------------------------
   Letter spacing comes from Figma as a percentage of the type size, so it
   is written in em and never converted to pixels. Line height is Auto in
   every style, which is line-height: normal, not 100 %.                    */
.t-heading-accent       { font-family: "Comforter", cursive; font-weight: 400; font-size: 100px; letter-spacing: 0; text-transform: uppercase; }
.t-heading-accent-small { font-family: "Comforter", cursive; font-weight: 400; font-size: 100px; letter-spacing: 0; }
.t-heading              { font-weight: 1000; font-size: 50px; letter-spacing: 0.1em;  text-transform: uppercase; }
.t-heading-wide         { font-weight: 1000; font-size: 50px; letter-spacing: 0.06em; text-transform: uppercase; }
.t-heading-wide-light   { font-weight: 200;  font-size: 50px; letter-spacing: 0.06em; text-transform: uppercase; }
.t-subheading           { font-weight: 400;  font-size: 25px; letter-spacing: 0;      text-transform: uppercase; }
.t-intro                { font-weight: 400;  font-size: 25px; letter-spacing: 0; }
.t-intro-black          { font-weight: 1000; font-size: 25px; letter-spacing: 0;      text-transform: uppercase; }
.t-intro-black-wide     { font-weight: 1000; font-size: 25px; letter-spacing: 0.1em;  text-transform: uppercase; }
.t-base                 { font-weight: 400;  font-size: 15px; letter-spacing: 0; }
.t-base-black           { font-weight: 1000; font-size: 15px; letter-spacing: 0; }
.t-base-italic          { font-weight: 400;  font-size: 15px; font-style: italic; }
.t-base-down-black      { font-weight: 1000; font-size: 15px; text-transform: lowercase; }
.t-base-up              { font-weight: 400;  font-size: 15px; text-transform: uppercase; }
.t-base-up-black        { font-weight: 1000; font-size: 15px; text-transform: uppercase; }
.t-base-up-black-wide   { font-weight: 1000; font-size: 15px; letter-spacing: 0.1em;  text-transform: uppercase; }
.t-label                { font-weight: 400;  font-size: 25px; letter-spacing: 0.1em;  text-transform: uppercase; }
.t-label-wide           { font-weight: 400;  font-size: 25px; letter-spacing: 0.6em;  text-transform: uppercase; }
.t-label-big            { font-weight: 200;  font-size: 100px; text-transform: uppercase; }
.t-label-big-black      { font-weight: 1000; font-size: 100px; text-transform: uppercase; }

.u-secondary { color: var(--content-secondary); }
.u-accent    { color: var(--content-accent); }

/* --- 4.1 / 4.2 Working area ---------------------------------------------
   Above 1440 the working area holds at 1340 and centres; the margins grow.
   Between 1200 and 1440 the margin stays 50, the gutter stays 25, the
   columns narrow. Type sizes do not change.                               */
.container {
  width: min(var(--layout-content), 100% - var(--layout-margin) * 2);
  margin-inline: auto;
}

/* 12-column helper. The column width is derived from the grid, never set. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--layout-gutter);
}

/* --- 5.1 Intent tags ----------------------------------------------------
   Five values cover all thirty-nine hand-composed blocks. Where Auto Layout
   in the file disagrees with the tag, the tag wins.                        */

/* fluid — lives inside the working area and narrows with it. Default. */
.is-fluid { width: 100%; }

/* flow — a row of equal elements that wraps when it stops fitting.
   The gap equals the gutter. The count per row is not fixed.              */
.is-flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gutter);
}
.is-flow > * { flex: 1 1 var(--flow-basis, 430px); min-width: 0; }

/* bleed:both — runs the full window width both sides. Text and cards
   inside stay in the working area.                                        */
.is-bleed-both {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* bleed:left / bleed:right — out past one margin only, never both.
   --bleed-stop is the macket coordinate of the edge that stays put,
   expressed as a share of the working area.

   The box stops growing at the reference frame. It used to run to the window
   edge (`margin-left: calc(50% - 50vw)`), which at 1440 made it exactly the
   macket's 1340 — every share inside is a share of 1340, so the composition
   was right there and only there. At 1920 the same box became 1580 and the
   photograph, the cards and the text stretched with it: the "block drifts
   left" the comments report, eighteen times over. Pinned to the frame, the
   proportions inside are the macket's at any width.

   What is supposed to keep running off the edge is the fill, not the
   composition — an amber slab, a coloured band. That is `.u-bleed-fill-left`
   below, on the fill itself. */
.is-bleed-left {
  width: calc(100% - var(--bleed-stop, 0%)
              + (var(--layout-reference) - var(--layout-content)) / 2);
  margin-left: calc((var(--layout-content) - var(--layout-reference)) / 2);
  margin-right: 0;
}
/* Mirror image: for bleed:right the stop is the LEFT inset, so it stays a
   margin and the width comes off the same side. */
.is-bleed-right {
  width: calc(100% - var(--bleed-stop, 0%)
              + (var(--layout-reference) - var(--layout-content)) / 2);
  margin-right: calc((var(--layout-content) - var(--layout-reference)) / 2);
  margin-left: var(--bleed-stop, 0%);
}

/* The fill carries on to the window edge from wherever it stops. It paints a
   viewport's worth sideways and the page clips it, so no width has to be
   worked out. `background: inherit` so the fill's own colour is the only
   place a colour is written. */
.u-bleed-fill-left::before,
.u-bleed-fill-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  background: inherit;
}
.u-bleed-fill-left::before  { right: 100%; }
.u-bleed-fill-right::after  { left: 100%; }

/* --- 4.0 The frame ------------------------------------------------------
   Everything positioned from --line-step is positioned inside this box, and
   nothing else is: the macket's 1440 frame, centred, shrinking with the
   window below 1440 and holding still above it. Before this existed, the
   line layer was `inset: 0` on the page, so --line-step read as 12.5 % of
   the WINDOW: at 1440 the lines landed on 180 · 360 · … · 1260 exactly, and
   at 1920 they spread to a 240 step and left the working area behind. Same
   for the header's menu, which took its cells from the same percentage.
   One box, one source, so the page layer and the header layer cannot drift
   apart at any width.                                                      */
.u-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--layout-reference));
  transform: translateX(-50%);
}

/* --- 4.1 Vertical lines -------------------------------------------------
   One component, two placements. Positions are read from --line-step in
   tokens.css and exist nowhere else, so the page layer and the header layer
   cannot drift apart.                                                      */
.gridlines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--layout-reference));
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.gridlines i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--line-width);
  background: var(--line-color);
  left: calc(var(--n) * var(--line-step));
}

/* The page layer sits under every section, the full height of the document.
   The header is the one exception: it keeps its own sticky positioning and
   rides above, because it draws its own copy of the lines over its plate. */
/* Bleeding blocks are drawn past the window edge on purpose — an amber band
   that runs off the left, a roller whose next card is cut by the right. The
   page clips them at the window. `clip` and not `hidden`: hidden would make
   this a scroll container and the pinned header would stop pinning. */
.page {
  position: relative;
  overflow-x: clip;
}
.page > .gridlines { z-index: 0; }
.page > *:not(.gridlines):not(.site-header):not(.site-up) { position: relative; z-index: 1; }
.page > .site-header { z-index: 2; }

/* Skip link — visible only once it takes focus. */
.skip-link {
  position: absolute;
  left: var(--layout-margin);
  top: 0;
  z-index: 10;
  transform: translateY(-200%);
  padding: 12px 25px;
  background: var(--editorial-white-2);
  color: var(--content-primary);
  font-weight: 1000;
  font-size: 15px;
  text-transform: uppercase;
  transition: transform var(--t-fast);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Vertical rhythm between the blocks ---------------------------------
   The file stacks the screen's blocks on a fixed rhythm, and it is defined
   here once rather than inside each section: a section owns its own height,
   never the air around it.

   Read off the Main screen (1:3): the header's box ends at 111 and the first
   block starts at 180; every neighbouring pair of blocks sits 150 apart; the
   footer sits 100 below the last one.

   150 is only the Main screen's number. Services runs 150 · 100 · 0, How It
   Works runs 100 below its halfway point, and the gap under the header is a
   different number on every screen. So the default lives here and a block
   that departs from it writes its own value once, in the markup, as
   `style="--gap: 100px"` on the <section> — the measured Figma number, next
   to the block it belongs to, still not a margin the section sets on itself.

   The FAQ on Main carries `--gap: 0`: its full-width blue fill is meant to
   start exactly where the founder block above it ends.                      */
:root {
  --block-gap: 150px;
  --block-gap-first: 69px;   /* header box 111 → first block 180 */
  --block-gap-footer: 100px;
}

main > section + section  { margin-top: var(--gap, var(--block-gap)); }
main > section:first-child { margin-top: var(--gap, var(--block-gap-first)); }
.page > .site-footer { margin-top: var(--gap-footer, var(--block-gap-footer)); }

/* --- 13.3 Anchors -------------------------------------------------------
   Smooth scroll that accounts for the pinned header, so the target block
   does not hide underneath it.                                            */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-height) + 50px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Below the 1200 floor ------------------------------------------------
   The design stops at 1200: below that there is no narrower composition to
   fall back to, and `min-width` on its own gave a horizontal scrollbar — the
   headline cut off the left edge, half the hero off the right. A window at
   900 is not a phone; it is a laptop or a half-screen window, and a page you
   have to scroll sideways to read is broken in the only sense that matters.

   So the page keeps its 1200 layout and is scaled down to fit the window.
   Everything stays in proportion and simply reads smaller. This is not a
   narrow layout and it is no substitute for one — it is what the site does
   until a narrow composition is drawn.

   The scale itself cannot be written here: `zoom` needs a plain ratio, and
   no CSS expression turns a viewport width into one — dividing 100vw by 1200
   yields a length, which `zoom` rejects. So it is set by the small inline
   script the build puts at the top of every <body>, and `zoom` rather than
   `transform: scale()` because a transform would make the pinned header and
   the scroll-to-top control position against the transformed box instead of
   the window, and both would come unstuck.                                 */

/* An inline link inside body copy. The site has no underlines anywhere, so
   a link in the middle of a sentence has to be told apart some other way:
   it carries the accent colour and a 1px rule that thickens on hover. */
.u-link-inline {
  color: var(--content-accent);
  border-bottom: 1px solid currentColor;
  transition: border-bottom-width var(--t-fast), color var(--t-fast);
}
.u-link-inline:hover,
.u-link-inline:focus-visible {
  border-bottom-width: 3px;
}

/* ===== header.css ===== */
/* ==========================================================================
   Site header — Figma component set 504:2789, instance 20:1973 on Main.
   Load AFTER css/base.css.

   Full window width, 61px tall, pinned to the top of the window. Three
   layers, bottom to top:

     1. the plate  — Editorial White 4 at 75 % over a background blur
                     (Figma "Rectangle 13", 1440 x 61)
     2. the lines  — the page's own .gridlines component, drawn a second
                     time so the seven lines sit OVER the plate
     3. the logo and the menu

   Geometry: the seven lines and the seven menu cells are the same seven
   positions. They are read from --line-step in tokens.css and appear
   nowhere else, so the page's line layer and the header's cannot drift.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-height);
  /* Starts one page margin down; the page's own lines show in that strip. */
  margin-top: var(--layout-margin);
}

/* base.css pins every child of .page with `position: relative` at a higher
   weight than a single class, so the sticky behaviour is restated here at
   matching specificity. Width stays `auto` — the header must measure the
   same box as .page, not 100vw, or the scrollbar would offset its lines by
   a few pixels against the page's. */
.page > .site-header {
  position: sticky;
  z-index: 10;
}

/* --- 1. The plate ------------------------------------------------------- */
.site-header__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--header-plate);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
}

/* --- 2. The lines -------------------------------------------------------
   The only modifier the shared component needs: it is lifted above the
   plate. The page layer keeps z-index 0 and stays under the content, so
   what shows inside the header is this crisp set at full strength, never
   the page's set dimmed and blurred through the translucent plate.       */
.site-header__lines {
  z-index: 1;
}

/* --- 3. Logo ------------------------------------------------------------ */
/* The macket's margin measured from the frame, not from the window: above
   1440 the frame centres, and a logo pinned to the window edge would sit
   240 away from the menu that starts at the frame's first line. */
.site-header__logo {
  position: absolute;
  z-index: 2;
  left: calc(max(0px, (100% - var(--layout-reference)) / 2) + var(--layout-margin));
  top: 50%;
  transform: translateY(-50%);
}

/* 15px tall, the wordmark's own ratio gives the width (107.45 in the
   macket). Fixed to the window margin, not to a share of the width. */
.site-header__logo img {
  width: auto;
  height: 15px;
}

/* --- 3. Menu ------------------------------------------------------------
   Each cell's line is at --n * --line-step; the label sits one gutter to
   the right of it. The cell width (150 in the macket) is never needed —
   the next cell is placed from the next line, not from this one's edge.  */
/* The frame box, not the window: the cells are placed from --line-step and
   the lines they belong to are now anchored to the macket's 1440 frame
   (base.css §4.0). Window-wide, the menu spread with the window and left
   its own lines behind above 1440. */
.site-header__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--layout-reference));
  transform: translateX(-50%);
  z-index: 2;
  /* The nav box covers the whole header, including the logo. It is
     transparent but would still take the clicks, so it is made inert and
     only the menu items themselves are given back to the pointer. */
  pointer-events: none;
}

.site-header__item {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: auto;
  left: calc(var(--n) * var(--line-step) + var(--layout-gutter));
}

.site-header__link {
  white-space: nowrap;
  transition: color var(--t-fast);
}

/* Active page. The five variants in the set carry no other difference at
   this height, so one rule covers Main, Services, Process, Results and
   About. Styled off the attribute so the markup cannot drift from it. */
.site-header__link[aria-current="page"],
.site-header__link:hover,
.site-header__link:focus-visible {
  color: var(--content-accent);
}

/* --- 4. The sub-navigation ----------------------------------------------
   Three of the five header variants in the set are 113 tall instead of 61:
   Services (966:7456), Results (521:2698) and About (521:3038). The extra
   52 is a second row of links that hangs under the item that owns it —
   All services / Discovery Sprint under Services, Author Stories / Free
   Resources under Results, Our Team & Story / FAQ / Contact under About.

   Each sub-item sits on the SAME seven positions as the bar above it, one
   gutter right of its line, and the group's plate covers only its own
   columns. The rest of the row is bare: the page shows through it, with
   the seven lines carried down across the full width (Figma "Group 75").

   The block is a child of the <li> that opens it, so :hover and
   :focus-within on that item are the entire interaction — no script, and
   the pointer can travel down into the row without losing the hover
   because it never leaves the <li>'s subtree.

   It is an OVERLAY, not flow: on Services the hero deliberately starts at
   110 and runs up behind the whole header. A page whose first block is
   meant to start below the open row writes that into its own --gap.     */
/* The row is a frame box, not a window-wide one: every piece inside it —
   plate, rule, line copy, labels — is placed from --line-step, and the line
   copy is now anchored to the macket's 1440 frame (base.css §4.0). If this
   row stayed window-wide the plate would sit at 12.5 % of the window while
   the lines sat on the frame, and above 1440 they would come apart. */
.site-header__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(100%, var(--layout-reference));
  transform: translateX(-50%);
  height: 52px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) ease, visibility var(--t-fast);
  /* The nav box above is inert so it cannot swallow clicks meant for the
     page; this row is its own box and takes its own. */
  pointer-events: auto;
}

/* The block is a sibling of the menu, not a child of the item that opens it:
   the item is itself absolutely positioned, so a descendant would be laid
   out against that one narrow cell instead of across the header. :has()
   carries the relationship instead.

   Three states, in this order, and the order is the whole logic:

     1. a page that belongs to a group holds that group's row open;
     2. the moment the pointer or the caret lands on ANY opening item, every
        row closes — otherwise the page's own row and the hovered one draw
        on top of each other in the same 52px strip, which is what the
        header did on all seven section pages;
     3. the row belonging to what is actually being pointed at opens.

   Step 3 also keeps the row open while the pointer is inside it, so
   travelling down from the label into the links does not close it. */

/* 1 — held open by the page */
.site-header[data-subnav="services"] .site-header__sub[data-group="services"],
.site-header[data-subnav="results"]  .site-header__sub[data-group="results"],
.site-header[data-subnav="about"]    .site-header__sub[data-group="about"] {
  opacity: 1;
  visibility: visible;
}

/* 2 — anything being pointed at or tabbed to closes all of them first */
.site-header:has(.site-header__link[data-opens]:hover) .site-header__sub,
.site-header:has(.site-header__link[data-opens]:focus-visible) .site-header__sub,
.site-header:has(.site-header__sub:hover) .site-header__sub,
.site-header:has(.site-header__sub:focus-within) .site-header__sub {
  opacity: 0;
  visibility: hidden;
}

/* 3 — and only the one being pointed at opens */
.site-header:has(.site-header__link[data-opens="services"]:hover) .site-header__sub[data-group="services"],
.site-header:has(.site-header__link[data-opens="services"]:focus-visible) .site-header__sub[data-group="services"],
.site-header:has(.site-header__sub[data-group="services"]:hover) .site-header__sub[data-group="services"],
.site-header:has(.site-header__sub[data-group="services"]:focus-within) .site-header__sub[data-group="services"],
.site-header:has(.site-header__link[data-opens="results"]:hover) .site-header__sub[data-group="results"],
.site-header:has(.site-header__link[data-opens="results"]:focus-visible) .site-header__sub[data-group="results"],
.site-header:has(.site-header__sub[data-group="results"]:hover) .site-header__sub[data-group="results"],
.site-header:has(.site-header__sub[data-group="results"]:focus-within) .site-header__sub[data-group="results"],
.site-header:has(.site-header__link[data-opens="about"]:hover) .site-header__sub[data-group="about"],
.site-header:has(.site-header__link[data-opens="about"]:focus-visible) .site-header__sub[data-group="about"],
.site-header:has(.site-header__sub[data-group="about"]:hover) .site-header__sub[data-group="about"],
.site-header:has(.site-header__sub[data-group="about"]:focus-within) .site-header__sub[data-group="about"] {
  opacity: 1;
  visibility: visible;
}

/* The group's own piece of the plate: from its first line to one past its
   last, so the blur ends on a line and not in the middle of a cell. */
.site-header__sub-plate {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) * var(--line-step));
  width: calc(var(--span) * var(--line-step) + var(--line-width));
  background: var(--header-plate);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
}

/* Figma "Line 39": 1px at y 62, i.e. the first pixel of this row, spanning
   exactly the group's columns. */
.site-header__sub-rule {
  position: absolute;
  top: 1px;
  height: var(--line-width);
  left: calc(var(--from) * var(--line-step));
  width: calc(var(--span) * var(--line-step) + var(--line-width));
  background: var(--line-color);
  z-index: 2;
}

/* The lines carry on down through the row — but only inside the group's own
   columns.

   They used to be drawn across all seven. On the page the line layer lies
   UNDER the sections, so a section's own fill hides it; this copy sits above
   the page instead, so every line outside the open panel was painted onto
   whatever content happened to be under the header — four loose verticals
   hanging off the bar to the left of the About panel, with no plate and no
   rule to belong to. Services never showed it because its panel starts at
   the first line and there is nothing to its left.

   The layer stays full width so the `--n` percentages still resolve against
   the same box as everywhere else; the clip is what limits what is painted,
   from the group's first line to the far edge of its last column. */
.site-header__sub-lines {
  z-index: 1;
  clip-path: inset(
    0
    max(0px, calc(100% - (var(--from) + var(--span)) * var(--line-step) - var(--line-width)))
    0
    calc(var(--from) * var(--line-step)));
}

.site-header__submenu {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Macket: label baseline at y 76 within the 113 header, i.e. 15 into this
   row; same one-gutter offset from the line as the bar above. */
.site-header__subitem {
  position: absolute;
  top: 15px;
  left: calc(var(--n) * var(--line-step) + var(--layout-gutter));
  pointer-events: auto;
}

/* Sentence case, Base Regular — the one place on the site where a menu
   label is not set in capitals. */
.site-header__sublink {
  white-space: nowrap;
  transition: color var(--t-fast);
}

.site-header__sublink[aria-current="page"],
.site-header__sublink:hover,
.site-header__sublink:focus-visible {
  color: var(--content-accent);
}

/* ===== footer.css ===== */
/* ==========================================================================
   Site footer — Figma symbol 152:1464, instance 966:8527.
   Load AFTER css/base.css.

   Full window width, 415 tall in the macket, Vista Blue 1. The fill is
   opaque, so it covers the page's vertical line layer — the macket shows
   no lines inside the footer.

   Vertical rhythm, read off the macket (footer top = 0):

        50  logo, 15 tall
        83  hairline, full working area
        98  tagline          |  50   Company / Services / Contact headings
       134  social icons     |  98   first link of each column
       184  Barcelona office | 289   last link of the Services column
       339  hairline
       354  legal links and copyright
       415  foot

   The right-hand link block starts level with the logo, so the first
   hairline crosses it. That is why the two halves are one grid with fixed
   rows rather than two stacked blocks: the rules span both columns while
   the link block spans the rows above and below the first of them.
   ========================================================================== */

.site-footer {
  background: var(--vista-blue-1);
  padding-block: var(--layout-margin);
  min-height: 415px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* logo band · hairline · body · hairline · bottom bar */
  grid-template-rows: 33px var(--line-width) 255px var(--line-width) auto;
}

/* --- Logo --------------------------------------------------------------- */
.site-footer__logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.site-footer__logo img {
  width: auto;
  height: 15px;
}

/* --- Hairlines ---------------------------------------------------------- */
.site-footer__rule {
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  height: var(--line-width);
  background: var(--rich-black-1);
}
.site-footer__rule--top    { grid-row: 2; }
.site-footer__rule--bottom { grid-row: 4; }

/* --- Left half: tagline, socials, office -------------------------------- */
.site-footer__brand {
  grid-column: 1;
  grid-row: 3;
}

.site-footer__tagline { margin-top: 14px; }

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
  margin-top: var(--layout-gutter);
}

.site-footer__office {
  display: block;
  font-style: normal;
  margin-top: var(--layout-gutter);
}
.site-footer__office span { display: block; }

/* --- Right half: three link columns -------------------------------------
   Spans from the logo band down past the first hairline, exactly as in the
   macket. 169 wide each, 50 apart — two gutters.                          */
.site-footer__nav {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: start;
  display: flex;
  gap: calc(var(--layout-gutter) * 2);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 169px;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  align-items: start;
}

/* --- Bottom bar --------------------------------------------------------- */
.site-footer__bottom {
  grid-column: 1 / -1;
  grid-row: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gutter);
  margin-top: 14px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gutter);
}

.site-footer__copy {
  text-align: right;
  white-space: nowrap;
}

/* --- Links -------------------------------------------------------------- */
.site-footer a {
  transition: color var(--t-fast);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--content-accent);
}

/* --- The reduced footer — Figma `Footer_min` 917:7587, 1440 x 319 --------
   Used by the two paid-traffic landing pages. Same brand block, same legal
   row, same hairline; the three site-map columns are replaced by "Contact"
   and two ways to reach us, and the second hairline is gone.

   Measured from the symbol: logo 50,50 · rule y 83 · tagline y 98 · social
   y 134 · office y 184 · legal row and copyright y 258. With the 50 page
   padding those become a 33 logo band, the rule, a 160 body and the bottom
   bar — 319 in total.                                                     */
.site-footer--min {
  min-height: 319px;
}

.site-footer--min .site-footer__grid {
  /* logo band · hairline · body · bottom bar */
  grid-template-rows: 33px var(--line-width) 160px auto;
}

/* "Contact" sits on the logo's line, hard right. */
.site-footer--min .site-footer__contact {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

/* WhatsApp and the address share the tagline's line, right aligned. */
.site-footer--min .site-footer__reach {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: start;
  display: flex;
  gap: 50px;
  margin-top: 14px;
}

.site-footer--min .site-footer__reach a {
  transition: color var(--t-fast);
}
.site-footer--min .site-footer__reach a:hover,
.site-footer--min .site-footer__reach a:focus-visible {
  color: var(--content-accent);
}

/* The bottom bar moves up one row, since there is no second hairline. */
.site-footer--min .site-footer__bottom {
  grid-row: 4;
}

/* ===== up.css ===== */
/* ==========================================================================
   Scroll-to-top control — `Button_form` 657:4075, macket 50,235 · 61 × 72.
   Load AFTER css/base.css.

   Fixed to the window at the page margin, at the same y the file draws it,
   so it sits in the empty strip left of the first vertical line and clear of
   the header. The label is set on its side reading bottom to top, which is
   what makes the box taller than it is wide.
   ========================================================================== */

.site-up {
  position: fixed;
  left: var(--layout-margin);
  /* The file draws this at y 235 — a static position on a page that does not
     scroll. As a floating control at the same coordinate it sits on top of
     whatever band happens to be passing: the Services list on the homepage
     runs its blue fill from the page margin, and the button covered the first
     row's line. So it keeps the file's x and moves to the foot of the window,
     out of the reading column and where a back-to-top control is looked for. */
  bottom: var(--layout-margin);
  z-index: 11;                      /* over the header's 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border: 0;
  background: var(--action-fill);
  color: var(--content-on-accent);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-base) ease,
              background-color var(--t-fast) ease,
              box-shadow var(--t-fast) ease;
}

/* `hidden` is removed by the script; `data-shown` is what fades it in, so
   the control is never a dead button and never a flash on load. */
.site-up[data-shown] { opacity: 1; }

.site-up__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);        /* reads bottom to top, as in the file */
  white-space: nowrap;
}

/* pas → hov on Button_form: the fill empties, the amber stroke stays, and
   the box does not change size because the stroke is drawn inside. */
.site-up:hover,
.site-up:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== about/s1.css ===== */
/* ==========================================================================
   About / Section 1 — "THE STORY behind the books"
   Figma node 687:4368, 1440 x 739, screen "Our team & story" (521:3102).

   Two pieces: a 1440 x 450 photograph that runs the full window width, and a
   1112-wide text block (ten columns) centred in the working area, 50 below it.
   739 = 450 + 50 + 239.
   ========================================================================== */

/* The photograph keeps its macket height at every width and takes the extra
   width by cropping, so the block's height — and therefore the rhythm of the
   whole page — does not move between 1200 and 1920.                         */
.s-s1 .s-s1__hero {
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: bottom;
}

/* --- Text block, ten columns centred in the working area ----------------- */
.s-s1 .s-s1__body {
  width: 82.9851%;             /* 1112 / 1340 */
  margin-inline: auto;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 50px;
}

.s-s1 .s-s1__intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--layout-gutter);
}

/* --- "THE STORY" written over "BEHIND THE BOOKS" ------------------------
   Group 76 (687:3982), 85 tall: the Comforter line sits at 0 and the Mulish
   heading 50 below it, both on the block's left edge.                      */
.s-s1 .s-s1__lockup {
  width: 100%;
  display: grid;
  font: inherit;
}

.s-s1 .s-s1__lockup > * {
  grid-area: 1 / 1;
  width: 100%;
}

.s-s1 .s-s1__word {
  margin-top: 50px;
  color: var(--content-primary);
}

.s-s1 .s-s1__script {
  color: var(--content-accent);
  z-index: 1;                  /* the handwriting paints over the Mulish line */
}

/* --- Six columns against the block's right edge -------------------------- */
.s-s1 .s-s1__sub,
.s-s1 .s-s1__lede {
  width: 59.0827%;             /* 657 / 1112 */
  color: var(--content-primary);
}

/* ===== about/s2.css ===== */
/* ==========================================================================
   About / Section 2 — "COMPANY history"
   Figma node 687:4367 "Section 2 [bleed:both]", 1440 x 935.

   A Vista Blue 1 plate the full width of the window, two Amber 4 blocks that
   run off the left and right window edges, and a 1112-wide (ten column) text
   block centred in the working area.
   935 = 50 (top) + 735 (content) + 150 (bottom).
   ========================================================================== */

.s-s2 {
  position: relative;
  padding-top: 50px;
  padding-bottom: 150px;
  background: var(--vista-blue-1);

  /* The macket's grid measured against the section's own box rather than the
     viewport, so the scrollbar cannot shift the bleeding blocks by its width. */
  --s2-work: min(var(--layout-content), 100% - var(--layout-margin) * 2);
  --s2-side: calc((100% - var(--s2-work)) / 2);
}

.s-s2 > .container {
  position: relative;
  z-index: 1;
}

/* --- Amber blocks off the window edges ----------------------------------
   The slab's right edge lands at macket x = 278, i.e. 228 into the working
   area (228 / 1340). It starts 185 down and runs to the bottom of the block.
   The square's left edge sits two columns and a gutter (202.5 / 1340) in from
   the working area's right edge.                                            */
.s-s2 .s-s2__slab,
.s-s2 .s-s2__tint {
  position: absolute;
  left: 0;
  top: 185px;
  bottom: 0;
  width: calc(var(--s2-side) + var(--s2-work) * 0.170149);
  background: var(--amber-4);
}

.s-s2 .s-s2__tint {
  z-index: 2;
  opacity: 0.5;
}

.s-s2 .s-s2__corner {
  position: absolute;
  right: 0;
  top: 683px;
  height: 252px;
  width: calc(var(--s2-side) + var(--s2-work) * 0.151119);
  background: var(--amber-4);
}

/* --- Ten columns centred in the working area ----------------------------- */
.s-s2 .s-s2__body {
  width: 82.9851%;             /* 1112 / 1340 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* --- "COMPANY" written over "HISTORY" ------------------------------------ */
.s-s2 .s-s2__lockup {
  width: 100%;
  display: grid;
  font: inherit;
}

.s-s2 .s-s2__lockup > * {
  grid-area: 1 / 1;
  width: 100%;
}

.s-s2 .s-s2__word {
  margin-top: 50px;
  color: var(--content-primary);
}

/* Editorial White 4 here, not Amber — the handwriting reads out of the blue. */
.s-s2 .s-s2__script {
  color: var(--editorial-white-4);
  z-index: 1;
}

/* --- Portrait beside six columns of copy --------------------------------- */
.s-s2 .s-s2__row {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gutter);
}

.s-s2 .s-s2__media {
  flex: 0 0 38.6691%;          /* 430 / 1112 */
  margin: 0;
}

.s-s2 .s-s2__media img {
  width: 100%;
  aspect-ratio: 430 / 600;
  object-fit: cover;
}

.s-s2 .s-s2__col {
  flex: 0 0 59.0827%;          /* 657 / 1112 */
  display: flex;
  flex-direction: column;
  gap: 50px;
  color: var(--content-primary);
}

.s-s2 .s-s2__text {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

/* ===== about/s3.css ===== */
/* ==========================================================================
   About / Section 3 — "OUR team"
   Figma node 697:4623, 1440 x 1703.

   The roller at the top is the same component the homepage uses
   (Main_S11_Roller 115:941, cards Team_cards 1070:8668), so the card, its
   amber plate and the Hov state are the homepage's implementation carried
   across; only the copy under it is new to this screen.

   1703 = 806 (heading + roller + notes) + 150 + 747 ("How we work").
   ========================================================================== */

.s-s3 {
  /* The macket's grid expressed against the live window, so the roller —
     which is outside the working area — can still line its first card up with
     the left margin and land the fourth card's edge on the right one. It has
     to be the window and not a percentage: the card's basis is resolved
     inside the track, whose own box is already offset by --s3-side.        */
  --s3-work: min(var(--layout-content), 100vw - var(--layout-margin) * 2);
  --s3-side: calc((100vw - var(--s3-work)) / 2);
  --s3-col:  calc((var(--s3-work) - var(--layout-gutter) * 11) / 12);
  --s3-card: calc(var(--s3-col) * 3 + var(--layout-gutter) * 2);  /* 316 */
}

/* --- "OUR" written over "TEAM", centred on the working area -------------- */
.s-s3 .s-s3__head {
  width: 52.2388%;             /* 700 / 1340 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  text-align: center;
}

.s-s3 .s-s3__lockup {
  display: grid;
  justify-items: center;
  font: inherit;
}

.s-s3 .s-s3__lockup > * {
  grid-area: 1 / 1;
}

.s-s3 .s-s3__word {
  margin-top: 50px;
  width: 100%;
  color: var(--content-primary);
}

.s-s3 .s-s3__script {
  white-space: nowrap;
  color: var(--content-accent);
  z-index: 1;
}

.s-s3 .s-s3__sub {
  color: var(--content-primary);
}

/* --- Roller -------------------------------------------------------------- */
.s-s3 .s-s3__roller {
  margin-top: var(--layout-gutter);
  padding-block: var(--layout-gutter);
}

.s-s3 .s-s3__viewport {
  overflow: hidden;
}

.s-s3 .s-s3__track {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
  padding-left: var(--s3-side);
  transform: translate3d(var(--s3-shift, 0px), 0, 0);
  transition: transform var(--t-base) ease;
  will-change: transform;
}

.s-s3 .s-s3__card {
  position: relative;
  flex: 0 0 var(--s3-card);
  aspect-ratio: 316 / 450;
  --s3-plate-w: 47.4684%;      /* 150 / 316 */
  --s3-plate-h: 33.3333%;      /* 150 / 450 */
}

.s-s3 .s-s3__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Team_cards, Pas → Hov ---------------------------------------------
   Pas is a 150 x 150 amber block in the corner. Hov fills the whole card
   with Amber 4 and shows the person's line and their Instagram link; both
   live in the markup from the start, hidden by opacity, so the card never
   reflows and the link stays reachable by tab.                             */
.s-s3 .s-s3__plate {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s3-plate-w);
  height: var(--s3-plate-h);
  background: var(--amber-4);
  transition: width var(--t-base) ease, height var(--t-base) ease;
}

.s-s3 .s-s3__card:hover,
.s-s3 .s-s3__card:focus-within {
  --s3-plate-w: 100%;
  --s3-plate-h: 100%;
}

/* The text column is 266 wide (1070:8589) but the name and the role inside it
   stay in a 166 column (1070:8491) in BOTH variants — which is what makes
   "Project / Manager" and "Lead / Generation / Specialist" break onto their
   own lines and stay inside the 150 amber plate instead of running out over
   the photograph. Only the quote uses the full 266.                        */
.s-s3 .s-s3__meta {
  position: absolute;
  left: 7.9114%;               /* 25  / 316 */
  top: 5.5556%;                /* 25  / 450 */
  width: 84.1772%;             /* 266 / 316 — the widest thing it holds, the quote */
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--rich-black-1);
}

/* The name and the role sit in a 166 column in BOTH states — only the quote
   uses the full 266. Letting them have the quote's width ran "project
   manager" and "lead generation specialist" out past the 150 amber plate in
   the passive state, over the photograph. */
.s-s3 .s-s3__who {
  width: 62.406%;              /* 166 / 266 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Team_4 and Team_8 carry an explicit line break in their role override. */
.s-s3 .s-s3__role {
  white-space: pre-line;
}

.s-s3 .s-s3__quote {
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}

.s-s3 .s-s3__social {
  position: absolute;
  left: 7.9114%;               /* 25  / 316 */
  top: 88.8889%;               /* 400 / 450 */
  display: block;
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}

.s-s3 .s-s3__card:hover .s-s3__quote,
.s-s3 .s-s3__card:focus-within .s-s3__quote,
.s-s3 .s-s3__card:hover .s-s3__social,
.s-s3 .s-s3__card:focus-within .s-s3__social {
  opacity: 1;
  transition-delay: 120ms;     /* let the plate arrive first */
}

/* --- Counter and next arrow --------------------------------------------- */
.s-s3 .s-s3__pager {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 21.213px;
  margin-top: var(--layout-gutter);
}

.s-s3 .s-s3__counter {
  color: var(--content-accent);
}

.s-s3 .s-s3__next {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(115px, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity var(--t-fast) ease;
}

.s-s3 .s-s3__next:hover {
  opacity: 0.6;
}

.s-s3 .s-s3__next[disabled] {
  opacity: 0.3;
  cursor: default;
}

/* --- Six columns of notes against the right margin ---------------------- */
.s-s3 .s-s3__notes {
  width: 49.0299%;             /* 657 / 1340 */
  margin-left: auto;
  margin-top: var(--layout-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  color: var(--content-primary);
}

/* --- "How we work with authors" ----------------------------------------- */
.s-s3 .s-s3__label {
  margin-top: 150px;
  color: var(--content-primary);
}

/* Eight columns against the right margin. */
.s-s3 .s-s3__panel {
  width: 66.0448%;             /* 885 / 1340 */
  margin-left: auto;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

/* The four rules are 3px strokes on zero-height lines in the file, so they
   are painted outside the row box and take no room in the flow — which is
   what keeps the block at its measured 521.                                */
.s-s3 .s-s3__rows {
  display: flex;
  flex-direction: column;
}

.s-s3 .s-s3__row {
  position: relative;
  padding-block: var(--layout-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  color: var(--content-primary);
}

.s-s3 .s-s3__row::before,
.s-s3 .s-s3__row:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-strong);
}

.s-s3 .s-s3__row::before { top: -3px; }
.s-s3 .s-s3__row:last-child::after { bottom: 0; }

/* --- Button_form, prop=pas → prop=hov ----------------------------------- */
.s-s3 .s-s3__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 3px solid var(--action-fill);
  background: var(--action-fill);
  color: var(--content-on-accent);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.s-s3 .s-s3__cta:hover,
.s-s3 .s-s3__cta:focus-visible {
  background: var(--action-fill-hover);
  border-color: var(--action-border-hover);
}

/* ===== about/s4.css ===== */
/* ==========================================================================
   About / Section 4 — the founder block
   Figma node 998:11884, tagged frame 998:11885 ("Section 12 [bleed:left]",
   1390 x 923). The same tag and the same construction as the homepage's
   section 12, but taller, with six paragraphs of story instead of one.

   Intent tag: bleed:left. The amber slab runs off the LEFT window edge; the
   right edge is pinned to macket x = 1390, which is the working area's own
   right edge, so --bleed-stop is 0.
   Horizontal measures are shares of the macket frame width (1390).
   ========================================================================== */

.s-s4 .s-s4__bleed {
  --bleed-stop: 0%;
  display: flex;
  align-items: flex-start;
}

/* --- Portrait: amber slab, cut-out photograph, amber tint over the slab ---
   The photograph is a real RGBA cut-out, so the slab and the tint show
   through around the figure instead of being baked into the file.          */
.s-s4 .s-s4__media {
  position: relative;
  flex: 0 0 51.0908%;          /* 710.16 / 1390 */
}

.s-s4 .s-s4__media img {
  position: relative;
  z-index: 1;
  width: 97.6583%;             /* 693.53 / 710.16 */
  margin-left: 2.3417%;        /* 16.63  / 710.16 */
  margin-top: 67px;
  aspect-ratio: 693.53 / 856;
  object-fit: cover;
}

.s-s4 .s-s4__slab,
.s-s4 .s-s4__tint {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38.3011%;             /* 272 / 710.16 */
  background: var(--amber-4);
}

/* The second slab lies over the photograph and tints its left edge. */
.s-s4 .s-s4__tint {
  z-index: 2;
  opacity: 0.5;
}

/* --- Text column, macket 711.14 wide at x 678.86 -------------------------
   It overlaps the photo column by 31.3, which is how the heading reaches
   back past the photograph's right edge.                                   */
.s-s4 .s-s4__body {
  position: relative;
  z-index: 3;
  flex: 0 0 51.1612%;          /* 711.14 / 1390 */
  margin-left: -2.2518%;       /* -31.3  / 1390 */
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--layout-gutter);
}

.s-s4 .s-s4__intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 50px;
}

/* --- "FOUNDER" written over "ALEX TKACHENKO" ---------------------------- */
.s-s4 .s-s4__lockup {
  width: 100%;
  display: grid;
  font: inherit;
}

.s-s4 .s-s4__lockup > * {
  grid-area: 1 / 1;
}

.s-s4 .s-s4__name {
  margin-top: 50px;
  width: 100%;
  color: var(--content-primary);
}

.s-s4 .s-s4__script {
  width: 83.28%;               /* 592.27 / 711.14 */
  color: var(--content-accent);
  z-index: 1;
}

/* --- Six-column text blocks, right aligned in the column ---------------- */
.s-s4 .s-s4__sub,
.s-s4 .s-s4__p,
.s-s4 .s-s4__quote {
  width: 92.3868%;             /* 657 / 711.14 */
  color: var(--content-primary);
}

/* --- Social links ------------------------------------------------------- */
.s-s4 .s-s4__social {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
}

.s-s4 .s-s4__social a {
  display: block;
  transition: opacity var(--t-fast) ease;
}

.s-s4 .s-s4__social a:hover {
  opacity: 0.6;
}

/* ===== about/s5.css ===== */
/* ==========================================================================
   About / Section 5 — "OUR values"
   Figma node 700:4698 "Section 5 [bleed:both]", 1440 x 1849.

   A Rich Black 3 plate the full width of the window, an Amber 4 block with a
   photograph of the same size offset 50 up and 50 right over it, and two
   columns of twelve values in a six-column well.
   1849 = 100 (top) + 128 (heading) + 50 + 1471 (body) + 100 (bottom).

   --gap: 0 — this block's fill is meant to start exactly where the founder
   block above it ends.
   ========================================================================== */

.s-s5 {
  position: relative;
  padding-block: 100px;
  background: var(--rich-black-3);

  --s5-work: min(var(--layout-content), 100% - var(--layout-margin) * 2);
  --s5-side: calc((100% - var(--s5-work)) / 2);
}

.s-s5 > .container {
  position: relative;
  z-index: 1;
}

/* The amber block stops on the working area's right edge; the photograph is
   the same block moved 50 right, so it runs off the window.                */
.s-s5 .s-s5__slab {
  position: absolute;
  top: 50px;
  right: var(--s5-side);
  width: calc(var(--s5-work) * 0.273134);   /* 366 / 1340 */
  height: 707px;
  background: var(--amber-4);
}

.s-s5 .s-s5__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--s5-side) + var(--s5-work) * 0.235821);  /* out to 1440 */
  height: 707px;
  object-fit: cover;
  object-position: bottom;
}

/* --- Heading, four columns starting 114 into the working area ------------ */
.s-s5 .s-s5__head {
  width: 40.597%;              /* 544 / 1340 */
  margin-left: 8.5075%;        /* 114 / 1340 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--layout-gutter);
}

.s-s5 .s-s5__lockup {
  width: 100%;
  display: grid;
  font: inherit;
}

.s-s5 .s-s5__lockup > * {
  grid-area: 1 / 1;
  width: 100%;
}

.s-s5 .s-s5__word {
  margin-top: 50px;
  color: var(--content-primary);
}

.s-s5 .s-s5__script {
  color: var(--content-accent);
  z-index: 1;
}

.s-s5 .s-s5__sub {
  width: 79.0441%;             /* 430 / 544 */
  color: var(--content-primary);
}

/* --- Six columns of values, 228 into the working area ------------------- */
.s-s5 .s-s5__body {
  width: 49.1045%;             /* 658 / 1340 */
  margin-left: 17.0149%;       /* 228 / 1340 */
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  color: var(--content-primary);
}

/* Two columns on the gutter; the rows are 50 apart, not 25. */
.s-s5 .s-s5__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--layout-gutter);
  row-gap: 50px;
}

.s-s5 .s-s5__item {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

/* ===== about/s6.css ===== */
/* ==========================================================================
   About / Section 6 — "IT'S TIME to turn your expertise into a book!"
   Figma node 703:4713, 885 x 333, centred in the working area.
   333 = 222 (heading block) + 50 + 61 (buttons).
   ========================================================================== */

.s-s6 .s-s6__body {
  width: 66.0448%;             /* 885 / 1340 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  text-align: center;
}

.s-s6 .s-s6__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
}

/* --- "IT'S TIME" written over the two-line Mulish heading ---------------- */
.s-s6 .s-s6__lockup {
  width: 100%;
  display: grid;
  justify-items: center;
  font: inherit;
}

.s-s6 .s-s6__lockup > * {
  grid-area: 1 / 1;
}

.s-s6 .s-s6__word {
  margin-top: 50px;
  width: 100%;
  color: var(--content-primary);
}

.s-s6 .s-s6__script {
  white-space: nowrap;
  color: var(--content-accent);
  z-index: 1;
}

/* The heading group and the line under it are 25 apart, the buttons 50. */
.s-s6 .s-s6__sub {
  width: 74.3503%;             /* 658 / 885 */
  color: var(--content-primary);
}

.s-s6 .s-s6__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--layout-gutter);
}

/* --- Button_form, prop=pas → prop=hov -----------------------------------
   The filled button drops its fill and keeps the amber stroke on hover, as
   the component set's hov variant does. The second instance overrides the
   stroke to Rich Black 1 and carries no fill, so there is no hov variant to
   copy: it moves its stroke to the accent instead, which is the same change
   read the other way round.                                                */
.s-s6 .s-s6__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 3px solid var(--action-fill);
  background: var(--action-fill);
  color: var(--content-on-accent);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.s-s6 .s-s6__cta:hover,
.s-s6 .s-s6__cta:focus-visible {
  background: var(--action-fill-hover);
  border-color: var(--action-border-hover);
}

.s-s6 .s-s6__cta--ghost {
  border-color: var(--border-strong);
  background: var(--action-fill-hover);
  color: var(--content-primary);
}

.s-s6 .s-s6__cta--ghost:hover,
.s-s6 .s-s6__cta--ghost:focus-visible {
  border-color: var(--action-border-hover);
}

/* ===== m-base.css ===== */
/* ==========================================================================
   Mobile foundation — Figma page "Mobile", hand-off document v1.0.
   Load AFTER every desktop stylesheet. See CONTRACT_MOBILE.md.

   The whole file is one media query. Below 1024 this layer overrides the
   desktop layer; at 1024 and up not a single rule here applies, so the
   desktop layout is untouched byte for byte.

   Why an overlay rather than two wrapped halves: the desktop CSS is live and
   already verified. Wrapping it would rewrite every one of its rules to prove
   a layout that is not changing. This way the desktop bytes stay as they are
   and the mobile layer states only its differences.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* --- 3.1 Grid ---------------------------------------------------------
     402 reference · 6 columns · Stretch · margin 25 · gutter 25
     Working area 352. Column 37.83 is derived and written nowhere.        */
  :root {
    --m-reference: 402px;
    --m-margin:    25px;
    --m-gutter:    25px;
    --m-content:   352px;   /* at the reference width                      */
    --m-max:       430px;   /* the column stops growing here (3.2)         */

    /* 4. Three gaps carry 94 % of 3 010 Auto Layout nodes. */
    --m-gap-tight: 10px;
    --m-gap-mid:   15px;
    --m-gap:       25px;
    --m-gap-block: 50px;
    --m-gap-big:   75px;

    /* 9.1 Header: logo at y 59, rule at y 89. */
    --m-header-h:  89px;

    /* 5.2 Touch targets grow from the centre toward this. */
    --m-tap:       44px;
  }

  /* --- 3.2 Reflow -------------------------------------------------------
     The desktop floor is 1200 and it is what puts a horizontal scrollbar on
     a phone. Below the breakpoint there is no floor: the page is as wide as
     the window and never wider.                                           */
  body {
    min-width: 0;
    overflow-x: clip;
  }

  /* Working area. Below 430 it stretches with the window and the 25 margins
     hold; above 430 it stops at 380 and centres, and the window fills with
     the page ground. Nothing scales — sizes and spacing are the macket's.  */
  .container {
    width: min(100% - var(--m-margin) * 2, calc(var(--m-max) - var(--m-margin) * 2));
    margin-inline: auto;
  }

  /* 6 columns, not 12. A block that asked for the desktop grid gets the
     mobile one without having to know which layer it is in.               */
  .grid12 {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--m-gutter);
  }

  /* --- Intent tags ------------------------------------------------------
     `flow` on mobile is a single column: two 430-basis children side by side
     cannot fit 352. Bleed keeps its meaning — the full window, which above
     430 is wider than the column.                                          */
  .is-flow { display: block; }
  .is-flow > * + * { margin-top: var(--m-gap); }

  .is-bleed-left,
  .is-bleed-right,
  .is-bleed-both,
  .m-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
  }

  /* --- 3.1 Background lines ---------------------------------------------
     Unlike desktop, where the line layer spans the page, `BackgroundLines`
     on mobile is 352 wide and starts below the header — it lives inside the
     working area. The desktop layer's seven lines at 12.5 % of the window
     are wrong here and are switched off; each screen draws its own set
     inside its own container.                                              */
  .page > .gridlines { display: none; }

  /* --- 5.6 Touch targets ------------------------------------------------
     The area grows from the centre of the element toward 44 on each axis,
     independently, and never moves or resizes what is drawn. Where a
     neighbour is closer than 44, the block sets --tap-h (or --tap-w) to
     twice the half-gap for EVERY item in that row, so the row is even under
     the thumb (5.3).

     ::after and not padding: padding would move the element.               */
  .m-tap { position: relative; }
  .m-tap::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width:  max(100%, var(--tap-w, var(--m-tap)));
    height: max(100%, var(--tap-h, var(--m-tap)));
  }

  /* An indicator is not a target: carousel dots and arrows show that more
     exists, they do not move anything (5.7).                               */
  .m-indicator { pointer-events: none; }

  /* --- 7 Type -----------------------------------------------------------
     Eleven of the twelve mobile styles are the desktop values unchanged —
     the 15 and 25 sizes are the same file-wide. Only the Comforter accent
     differs, and it differs by half: 50 on mobile against 100 on desktop.
     The styles are named "… Mobile" in Figma for exactly this reason.      */
  .t-heading-accent,
  .t-heading-accent-small { font-size: 50px; }

  /* 7.2 The one style with no desktop counterpart: the numeral on the error
     page. 500 is the size, not a typo.                                     */
  .t-404 {
    font-family: "Comforter", cursive;
    font-weight: 400;
    font-size: 500px;
    letter-spacing: 0.05em;
  }

  /* --- 3.2 Long pages ---------------------------------------------------
     Screens run to 14 382. Smooth anchor scrolling has to clear the pinned
     header or the target lands underneath it.                              */
  :target { scroll-margin-top: calc(var(--m-header-h) + var(--m-gap)); }

}

/* ==========================================================================
   Layer switch. A page carries both sets of blocks; each layer hides the
   other's. The mobile blocks are marked `is-m` by the screen that writes
   them; everything else in <main> is the desktop layer.

   The second query is the only rule in this file that applies at 1024 and up,
   and it can only hide blocks that a desktop-only build never emits — so the
   desktop layer is still untouched.
   ========================================================================== */
@media (max-width: 1023.98px) {
  .page > main > section:not(.is-m) { display: none; }
  .page > main > .is-m + .is-m { margin-top: var(--gap-m, var(--m-gap-big)); }
  .page > main > .is-m:first-child { margin-top: 0; }
}
@media (min-width: 1024px) {
  .page > main > .is-m { display: none; }
}

/* ===== m-header.css ===== */
/* ==========================================================================
   Mobile header and menu — Figma `Menu_mob` 1244:11197.
   Inside the mobile media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* The desktop header and its three sub-rows do not appear on a phone: the
     mobile menu is an overlay with its own, flatter list. */
  .page > .site-header { display: none; }

  .m-header[hidden] { display: block; }   /* `hidden` is for the no-CSS case */

  .m-header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--m-header-h);            /* 89 — the rule sits on the edge   */
  }
  .page > .m-header { position: sticky; z-index: 10; }

  /* 8. The one effect in the whole mobile version. */
  .m-header__plate {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--header-plate);
    -webkit-backdrop-filter: blur(var(--header-blur));
    backdrop-filter: blur(var(--header-blur));
  }

  /* Logo at 25,59. Its touch area reaches 44 on the vertical — the room is
     there, and nothing else is near it. */
  .m-header__logo {
    position: absolute;
    z-index: 2;
    left: var(--m-margin);
    top: 59px;
    --tap-w: 107px;
  }
  .m-header__logo img { width: auto; height: 15px; }

  /* The button at 332,49 is 70 × 40 in the file: wide enough across, four
     pixels short down. The area takes the full 44 on both axes; the nearest
     other target is the logo, 200 away. */
  .m-header__toggle {
    position: absolute;
    z-index: 2;
    right: var(--m-margin);
    top: 49px;
    width: 45px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* Three bars drawn in CSS, as the file draws them — not an exported icon. */
  .m-header__bars,
  .m-header__bars::before,
  .m-header__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--content-primary);
  }
  .m-header__bars { position: relative; }
  .m-header__bars::before,
  .m-header__bars::after { content: ""; position: absolute; left: 0; }
  .m-header__bars::before { top: -6px; }
  .m-header__bars::after  { top:  6px; }

  /* Line 54 at y 89, 352 wide — inside the working area, not edge to edge. */
  .m-header__rule {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: min(100% - var(--m-margin) * 2, calc(var(--m-max) - var(--m-margin) * 2));
    margin: 0;
    border: 0;
    border-top: var(--line-width) solid var(--line-color);
  }

  /* --- The overlay ------------------------------------------------------
     402 × 830 in the file, anchored under the header. On a real phone it
     takes the window, because a fixed height would leave the page showing
     under it on a tall screen and cut the buttons off on a short one.     */
  .page > .m-header { position: sticky; z-index: 10; }
  .page > .m-menu   { position: fixed;  z-index: 20; }

  .m-menu {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--surface-page);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .m-menu[hidden] { display: none; }

  .m-menu__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-block: 49px var(--m-gap-block);
  }

  /* Close at 332,0 · 45 × 40 with a 20 × 20 glyph, then the rule at y 40. */
  .m-menu__head { position: relative; height: 40px; }

  .m-menu__close {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .m-menu__close span,
  .m-menu__close span::before,
  .m-menu__close span::after { display: block; }
  .m-menu__close span {
    position: relative;
    width: 20px;
    height: 20px;
  }
  .m-menu__close span::before,
  .m-menu__close span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 20px;
    height: 2px;
    background: var(--content-primary);
  }
  .m-menu__close span::before { transform: rotate(45deg); }
  .m-menu__close span::after  { transform: rotate(-45deg); }

  .m-menu__rule,
  .m-menu__list li + li {
    border: 0;
    border-top: var(--line-width) solid var(--line-color);
  }
  .m-menu__rule { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; }

  /* Nine items on a 41 step: the label sits 15 below its own rule, the row is
     26 tall. 41 between centres is under 44, so by 5.2 every area takes half
     the gap on each side — 41 — and by 5.3 every item in the list takes the
     same one, so the first and last are not larger than the rest. */
  .m-menu__list { margin-top: var(--m-gap); }
  .m-menu__list li { padding-bottom: 15px; }
  /* 15 above the label and 15 below gives a 42 step, not the file's 41: in
     Figma the rule is a zero-height line, in CSS it is a real pixel. The
     padding above absorbs it so the step lands on 41 exactly. */
  .m-menu__list li + li { padding-top: 14px; }
  .m-menu__list a { display: block; --tap-h: 41px; }

  /* The two calls to action and the address, at the foot of the overlay.
     `margin-top: auto` pins them down however tall the window is, which is
     what the file's fixed 646 does on a 830 frame. */
  .m-menu__foot {
    margin-top: auto;
    padding-top: var(--m-gap-big);
    display: grid;
    justify-items: center;
    gap: var(--m-gap-mid);
  }

  .m-menu__foot .m-btn {
    display: grid;
    place-items: center;
    width: 253px;
    max-width: 100%;
    height: 41px;
    text-align: center;
  }
  .m-menu__foot .m-btn--fill {
    background: var(--action-fill);
    color: var(--content-on-accent);
  }
  .m-menu__foot .m-btn--line {
    box-shadow: inset 0 0 0 3px var(--border-strong);
    color: var(--content-primary);
  }

  .m-menu__mail { margin-top: calc(var(--m-gap-block) + 6px); }
  .m-menu__mail a { --tap-h: 44px; }

  /* While the overlay is open the page underneath does not scroll. */
  body.is-m-menu-open { overflow: hidden; }

}

/* The mobile chrome exists in the markup at every width; only the media query
   keeps it off the desktop layer. `hidden` is removed by the script as soon
   as it runs, so without this the header renders twice above 1024. */
@media (min-width: 1024px) {
  .m-header, .m-menu, .m-footer { display: none !important; }
}

/* ===== m-footer.css ===== */
/* ==========================================================================
   Mobile footer — Figma `Footer_m` 1774:15900, 402 × 449.
   Inside the mobile media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  .page > .site-footer { display: none; }
  .m-footer[hidden] { display: block; }

  /* The file leaves 75 between the last block and the footer. The desktop
     layer sets its own gap on .site-footer, which is hidden down here, so
     this one has to be stated. */
  .page > .m-footer { margin-top: var(--m-gap-big); }

  .m-footer {
    background: var(--surface-brand);
    color: var(--content-on-brand);
    text-align: center;
  }

  /* The block runs edge to edge; the content keeps the 25 margins. */
  .m-footer__inner { padding-block: var(--m-gap) var(--m-gap-block); }

  .m-footer__logo {
    display: inline-block;
    --tap-h: 44px;
    --tap-w: 107px;
  }
  .m-footer__logo img { width: auto; height: 15px; }

  /* Three groups. The file sets them 10 apart, not 25: `Frame 481` runs
     logo 15 · 10 · group 169 · 10 · group 62 · 10 · group 98 = 374, which
     with the 25 above and 50 below is the footer's 449. The 25 that stood
     here was what made the block 46 too tall on all 37 screens. */
  .m-footer__group { margin-top: var(--m-gap-tight); }
  .m-footer__rule {
    margin: 0 0 var(--m-gap-mid);
    border: 0;
    border-top: var(--line-width) solid var(--content-on-brand);
  }

  /* Two lines, 30 tall in the file: 11 a line on a 19 step. */
  .m-footer__tagline { margin-inline: auto; max-width: 30ch; line-height: 19px; }

  /* Three marks on a 50 step: 50 between centres clears 44, so each area is
     the full 44 × 44 and they still do not touch. */
  .m-footer__social {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: var(--m-gap);
  }
  .m-footer__social a { display: block; }

  /* `text-box-trim` only takes effect on a block box: a bare <span> inside a
     grid is still inline, the trim is ignored, and the line keeps its full
     leading. Every trimmed label here is blockified for that reason — the
     same trap that put 202px of drift into the FAQ.
     Figma writes the three address lines on an 18 step from a 49-tall box. */
  .m-footer__office span { display: block; }
  .m-footer__office {
    display: grid;
    gap: 7px;
    margin-top: var(--m-gap);
    font-style: normal;
  }

  /* 5.3 — one row, one size. The step is 36 in the file, so every link in
     both lists takes a 36 band: the rows stay even under the thumb and no
     two areas meet. This is the floor the contract records at §5.4.        */
  .m-footer__reach,
  .m-footer__legal {
    display: grid;
    gap: 25px;
  }
  /* `block`, not `inline-block`: an inline-block still sits in a line box, so
     the <li> keeps the full leading even after the label itself is trimmed and
     the row measures 19 where the file measures 11. */
  .m-footer__reach a,
  .m-footer__legal a {
    display: block;
    --tap-h: 36px;
  }

  .m-footer__legal a { color: var(--content-on-inverse); }

}

/* ===== m-up.css ===== */
/* ==========================================================================
   Mobile "up" control — Figma `Button_form` 41 × 52, drawn at 25,143 on all
   37 screens. Contract §9.2.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* The desktop control is 61 × 72 and sits at the desktop margin; the mobile
     one is its own size at its own place, so the shared element is restyled
     rather than duplicated. */
  .site-up { position: relative; }
  .site-up::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width:  max(100%, var(--tap-w, var(--m-tap)));
    height: max(100%, var(--tap-h, var(--m-tap)));
  }

  .site-up {
    position: fixed;
    left: var(--m-margin);
    bottom: var(--m-margin);
    padding: 0;
    width: 41px;
    height: 52px;

    /* 5.5 — three pixels short across. The room is there: the nearest other
       target is the footer, and on a scrolled page nothing sits beside it. */
    --tap-w: 44px;
    --tap-h: 52px;
  }

  /* The file draws it at y 143, under the header. As a floating control it
     keeps the file's x and moves to the foot of the window, out of the
     reading column — the same decision as on desktop, and for the same
     reason: at 143 it would sit on whatever band is passing under it. */

  .site-up__label { font-size: 15px; }

}

/* ===== about/m1.css ===== */
/* ==========================================================================
   About mobile — block 1, the hero.
   Figma: `Our team & story_m` 1593:14236 / "Section 1" 1606:11930, 402 x 447.

     photo        402 x 275, full window, at the top of the block
     copy         352 working area, 25 under the photo
     lockup       "BEHIND THE BOOKS" with the script "the story" drawn over it,
                  both centred; the Mulish word hangs 15 below the top of the
                  group, which is as tall as the Comforter cap, 38
     sub          15 under the lockup, centred
     lede         15 under the sub, centred

   This file also carries the vocabulary the screen's six blocks share — the
   heading lockup (`Group 89` / `Group 90`) and the button (`Button_form`).
   They are one component each in the file, so they are written once here
   rather than copied into six stylesheets.

   The whole file is one media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* ======================================================================
     Shared (am- : about mobile; m- is taken by the shared mobile layer)

     The heading lockup — Figma `Group 89` / `Group 90`.
     Comforter 50 and Mulish 25 share one cell and the script is drawn over
     the word. The group is as tall as the script's cap height, 38, or as the
     15 offset plus the word where the word runs to more than one line —
     Section 6's three-line word makes the group 95. That is the file's own
     rule and it needs no measured height here.

     Every lockup on this screen is centred, so unlike the Services screen
     there is no 6px inset to take the trailing tracking back.
     ====================================================================== */
  .am-lockup {
    display: grid;
    font: inherit;
    text-align: center;
  }
  .am-lockup > * { grid-area: 1 / 1; }
  .am-lockup__word { margin-top: var(--m-gap-mid); }
  .am-lockup__script {
    color: var(--content-accent);
    pointer-events: none;
  }

  /* ======================================================================
     Shared: `Button_form`, 352 x 61 — stretched across the working area on
     both blocks that carry it, 3 and 6.
     25 of padding + the label's 11 cap height + 25 = 61, so the height comes
     from the label rather than being set here.

     A block-level flex box rather than an inline one: inline-level children
     sit on a text baseline, which would leave the strut's descender under
     the button.
     ====================================================================== */
  .am-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--m-gap);
    border: 0;
    background: var(--action-fill);
    color: var(--content-on-accent);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  /* Section 6's second button: no fill, a 3px Rich Black 1 stroke drawn
     inside so the button keeps its 61 and nothing moves. */
  .am-btn--ghost {
    background: none;
    color: var(--content-primary);
    box-shadow: inset 0 0 0 3px var(--border-strong);
  }

  /* ======================================================================
     Block 1
     ====================================================================== */

  .s-am1 { display: flow-root; }

  /* --- 3.1 Background lines --------------------------------------------
     `BackgroundLines` 1593:14237: four lines at 0, 33.33, 66.67 and 100 per
     cent of the working area — Figma x 25 · 142.33 · 259.67 · 377 on the 402
     macket — starting under the header and running the length of the screen.
     The file draws one continuous set, so one layer is drawn here and
     positioned against <main>, which base.css has already made the nearest
     positioned ancestor. z-index -1 keeps it under every plate and word.

     The file's 14 273 runs past the screen's own 7 962; it is the designer's
     single long guide, not a height to transfer.                          */
  .s-am1__lines {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    pointer-events: none;
  }
  .s-am1__lines > .container { position: relative; height: 100%; }
  .s-am1__lines i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--line-width);
    background: var(--line-color);
  }
  .s-am1__lines i:nth-child(1) { left: 0; }
  .s-am1__lines i:nth-child(2) { left: 33.333%; }
  .s-am1__lines i:nth-child(3) { left: 66.667%; }
  .s-am1__lines i:nth-child(4) { right: 0; }

  /* --- The photograph ---------------------------------------------------
     Full window below 430. Above it the window is wider than the design ever
     gets, so the picture stops at the 430 column and centres with the rest
     of the page instead of stretching to a size the macket does not have. */
  .s-am1__photo {
    display: block;
    width: 100%;
    max-width: var(--m-max);
    margin-inline: auto;
    height: auto;
  }

  .s-am1__copy { margin-top: var(--m-gap); }
  .s-am1__sub  { margin-top: var(--m-gap-mid); text-align: center; }
  .s-am1__lede { margin-top: var(--m-gap-mid); text-align: center; }

}

/* ===== about/m2.css ===== */
/* ==========================================================================
   About mobile — block 2, company history.
   Figma: "Section 2" 1606:11967, 402 x 797.

     art          `Group 126` 1606:11965, 402 x 402
                    Rectangle 167   Amber 4, x 0 … 88, the group's full height
                    IMG_5208 1      377 x 377 at x 25, off the right edge
                    Rectangle 168   the same 88 again, half opacity, on top
                  the amber runs 25 lower than the photograph, which is what
                  makes the group 402 against the picture's 377
     panel        Vista Blue 1, full window, from the group's bottom edge
     lockup       flush with the plate's top edge, centred
     kicker       15 under the lockup
     three paras  15 apart, all centred, the last 25 above the plate's end
                  — the file's y values are 98 · 219 · 321 against block ends
                  of 83 · 204 · 306, so this block runs on 15, not the 25 the
                  founder's six paragraphs on Section 4 use

   The whole file is one media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* --- The art group ----------------------------------------------------
     It starts on the working area's left edge and runs to the window's right
     edge: -25 is exactly the margin below 430, and above 430 it keeps the
     macket's 377 and centres with the column rather than growing to a size
     the file does not have.

     The bottom padding is the 25 of amber the file leaves under the picture.
     Everything is measured from the picture, so the group reflows with it. */
  .s-am2__art {
    position: relative;
    margin-right: calc(var(--m-margin) * -1);
    padding-bottom: var(--m-gap);
  }

  .s-am2__photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
  }

  /* Rectangle 167 and Rectangle 168: the same 88-wide band, one behind the
     picture and one over it. Where they meet outside the picture the half
     amber sits on the full amber and the result is still Amber 4, which is
     why the file can draw one band twice instead of three shapes.          */
  .s-am2__slab,
  .s-am2__tint {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--m-margin) * -1);
    width: 88px;
    background: var(--surface-accent);
  }
  .s-am2__slab { z-index: 0; }
  .s-am2__tint { z-index: 2; opacity: 0.5; }

  /* --- The blue plate ---------------------------------------------------
     `Frame 615` 1606:11966 is 402 wide: full window below 430 and full window
     above it too, since the file's blue is a surface and §3.2 sends surfaces
     the whole width while the copy stays in the 352 column.

     No top padding — the file puts the lockup's cap line on the plate's top
     edge — and 25 at the bottom, which is the 797 the block measures against
     the 772 its content comes to.                                          */
  .s-am2__panel {
    background: var(--surface-brand);
    color: var(--content-on-brand);
    padding-bottom: var(--m-gap);
    text-align: center;
  }

  .s-am2__kicker { margin-top: var(--m-gap-mid); }
  .s-am2__p      { margin-top: var(--m-gap-mid); }

}

/* ===== about/m3.css ===== */
/* ==========================================================================
   About mobile — block 3, the team and how we work.
   Figma: "Section 3" 1606:12698, 352 x 1696.

     head         lockup + one-line caption 15 under it, both centred
     carousel     25 under the head. `Team_mobile_full` 1606:12554, 352 x 482:
                  a page is a 2 x 2 grid of 163.5 x 216 cards on a 25 gutter
                  and a 25 row gap; the dots sit 15 under the page
     lede         50 under the carousel
     label        50 under the lede, centred
     cards        25 under the label, four Space Cadet 3 plates 15 apart,
                  25 of padding, title and copy 15 apart
     tail         25 under the cards, two italic lines 15 apart
     button       25 under the tail, the full 352

   Card geometry: `Component 8` 1606:12456 — the picture is 163.5 x 164, the
   name sits 15 under it and the role 15 under the name.

   The whole file is one media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-am3__sub { margin-top: var(--m-gap-mid); text-align: center; }

  /* --- 11 The carousel --------------------------------------------------
     Swipe, with scroll-snap doing the landing. No autoplay and no wrap: the
     track simply ends, as the file's pages do.

     Before m3.js runs — and if it never does — the people are one grid of
     two columns and everybody is on the page. The script wraps them into
     pages and turns the same element into the track; `is-paged` is what
     switches the geometry, so nothing here has to know how many there are. */
  .s-am3__roller { margin-top: var(--m-gap); }

  .s-am3__people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m-gutter);
  }

  .s-am3__people.is-paged {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .s-am3__people.is-paged::-webkit-scrollbar { display: none; }

  /* The pages stretch to the tallest of them — the file pins 482 on pages 1
     and 3 and 501 on page 2, where two roles run to a second line, and a
     track whose height changed mid-swipe would move the dots under the
     thumb. One track, one height, taken from the content. */
  .s-am3__page {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .s-am3__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m-gutter);
  }

  /* The portraits are the desktop layer's 316 x 450 files; the macket crops
     them square and frames the head, so the crop is biased to the top rather
     than centred. */
  .s-am3__person img {
    display: block;
    width: 100%;
    aspect-ratio: 163.5 / 164;
    object-fit: cover;
    object-position: 50% 22%;
  }
  .s-am3__name { margin-top: var(--m-gap-mid); }
  .s-am3__role { margin-top: var(--m-gap-mid); }

  /* 5.7 Indicators, not buttons: `m-indicator` takes them out of the
     pointer's way and they get no touch area. */
  .s-am3__dots {
    display: flex;
    justify-content: center;
    gap: var(--m-gap-mid);
    margin: var(--m-gap-mid) 0 0;
  }
  .s-am3__dots span {
    width: var(--m-gap-tight);
    height: var(--m-gap-tight);
    border-radius: 50%;
    background: var(--rich-black-3);
  }
  .s-am3__dots span.is-on { background: var(--content-primary); }

  .s-am3__lede  { margin-top: var(--m-gap-block); }

  /* The label is Base Up Black, not the Wide the four card titles' sibling
     style on Section 5 uses: measured against the file it is 255 wide, and
     the tracked cut of the same string comes to 292. */
  .s-am3__label { margin-top: var(--m-gap-block); text-align: center; }

  /* --- "How we work with authors" ---------------------------------------
     `Frame 363` / `377` / `378` / `379`: the file equalises the four plates
     on the tallest, 163. `1fr` rows do the same from the content, so a
     longer line still grows the row instead of being cut (7. no truncation).

     The ground is Space Cadet 3 — one of the six nodes §6 calls isolated
     cases, and measured off the file rather than assumed to be the Rich
     Black 3 that carries the hairlines.                                    */
  .s-am3__how {
    display: grid;
    gap: var(--m-gap-mid);
    grid-auto-rows: 1fr;
    margin-top: var(--m-gap);
  }
  .s-am3__how-card {
    display: grid;
    align-content: start;
    gap: var(--m-gap-mid);
    padding: var(--m-gap);
    background: var(--space-cadet-3);
    color: var(--content-primary);
  }

  .s-am3__tail { margin-top: var(--m-gap); text-align: center; }
  .s-am3__tail-line { margin-top: var(--m-gap-mid); }

  .s-am3__cta { margin-top: var(--m-gap); }

}

/* ===== about/m4.css ===== */
/* ==========================================================================
   About mobile — block 4, the founder.
   Figma: "Section 4" 1606:12867, 402 x 1558.

     art          `Group 109` 1606:12868, 402 x 350
                    Rectangle 147   Amber 4, x 0 … 151
                    image 10        314 x 350 at x 88, off the right edge
                    Rectangle 146   x 88 … 151, half opacity, on top
     copy         352 working area, 25 under the art, everything centred
     lockup       "ALEX TKACHENKO" with the script "Founder" over it
     sub          25 under the lockup
     six paras    25 apart
     social       25 under the last paragraph, three icons on a 50 step
     quote        25 under the icons

   The whole file is one media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* --- The art group ----------------------------------------------------
     It runs from the window's left edge to the window's right edge below
     430 — -25 each side is exactly the margin — and above 430 it stops at
     the 430 column and centres, so nothing grows past a size the macket has.

     The three offsets are the file's own numbers and stay in pixels; only
     the picture reflows, and the slab and the tint are as tall as it makes
     the group.                                                             */
  .s-am4__art {
    position: relative;
    margin-inline: calc(var(--m-margin) * -1);
  }

  .s-am4__photo {
    position: relative;
    z-index: 1;
    display: block;
    margin-left: 88px;
    width: calc(100% - 88px);
    height: auto;
  }

  .s-am4__slab,
  .s-am4__tint {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--surface-accent);
  }
  .s-am4__slab { z-index: 0; left: 0; width: 151px; }
  .s-am4__tint { z-index: 2; left: 88px; width: 63px; opacity: 0.5; }

  /* --- The copy --------------------------------------------------------- */
  .s-am4__copy { margin-top: var(--m-gap); text-align: center; }
  .s-am4__sub  { margin-top: var(--m-gap); }
  .s-am4__p    { margin-top: var(--m-gap); }

  /* `Frame 458`: the icons sit on a 50 step — 25 of glyph and 25 between —
     with the row centred on the 352. 5.2: the nearest centre is 50 away, so
     every one takes the full 44 x 44 and none of them overlaps. 5.3 wants
     the row even under the thumb, and three equal areas are what that is. */
  .s-am4__social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--m-gutter);
    margin: var(--m-gap) 0 0;
    padding: 0;
    list-style: none;
  }
  .s-am4__social li { display: flex; }
  .s-am4__social a { display: block; }
  .s-am4__social img { display: block; }

  .s-am4__quote { margin: var(--m-gap) 0 0; }

}

/* ===== about/m5.css ===== */
/* ==========================================================================
   About mobile — block 5, the values.
   Figma: "Section 5" 1609:13017, 402 x 2159; `Frame 619` 1609:13016 inset 25
   top and bottom; `Frame 219` 1606:12962, 352 x 1937.

     head         lockup, caption 15 under it, intro 15 under that — centred
     list         25 under the head, twelve `Title + text` items 15 apart,
                  each a title with its copy 15 under it, left-aligned
     close        25 under the last item's copy — the file draws it inside
                  that item's Text frame; the same 25, one paragraph later

   The whole file is one media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-am5 { padding-block: var(--m-gap); }

  .s-am5__head  { text-align: center; }
  .s-am5__sub   { margin-top: var(--m-gap-mid); }
  .s-am5__intro { margin-top: var(--m-gap-mid); }

  .s-am5__list {
    display: grid;
    gap: var(--m-gap-mid);
    margin: var(--m-gap) 0 0;
    padding: 0;
    list-style: none;
  }
  .s-am5__text { margin-top: var(--m-gap-mid); }

  .s-am5__close { margin-top: var(--m-gap); }

}

/* ===== about/m6.css ===== */
/* ==========================================================================
   About mobile — block 6, the closing call.
   Figma: "Section 6" 1609:13025, 402 x 292.

     lockup       centred; the word runs to three lines, so `Group 89` is 95
     sub          15 under the lockup, centred
     button 1     15 under the sub, the full 352, Amber 4
     button 2     15 under button 1, the same size, outlined

   5.2: the two buttons are 61 tall and 15 apart, so their centres are 76
   apart and each one's area is the full 44 x 44 the rule asks for — the
   button is already larger than that on both axes, so `m-tap` adds nothing
   visible and nothing overlaps.

   The whole file is one media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-am6__sub { margin-top: var(--m-gap-mid); text-align: center; }
  .s-am6__cta { margin-top: var(--m-gap-mid); }

}