/* ===== 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.                               */
.is-bleed-left {
  margin-left: calc(50% - 50vw);
  margin-right: var(--bleed-stop, 0%);
}
.is-bleed-right {
  margin-right: calc(50% - 50vw);
  margin-left: var(--bleed-stop, 0%);
}

/* --- 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;
  inset: 0;
  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 ------------------------------------------------------------ */
.site-header__logo {
  position: absolute;
  z-index: 2;
  left: 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.  */
.site-header__nav {
  position: absolute;
  inset: 0;
  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.     */
.site-header__sub {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  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 seven lines continue down through the whole row, group or not. */
.site-header__sub-lines { z-index: 1; }

.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);
}

/* ===== main/s2.css ===== */
/* ==========================================================================
   Section 2+3 — hero and proof band
   Figma node 152:1613 · "Section 2+3 [bleed:both]" · 1440 x 1489
   Intent tag: bleed:both. The hairlines, the stepped lockup, the photograph
   and the TrustLine band all run to the window edge; the copy, the stat tiles
   and the press logos stay inside the working area.

   The macket composes the hero absolutely (nothing above y 690 is in flow),
   so the hero is a fixed 690px stage. Two lengths drive it:
     --work  the working area, exactly as .container computes it
     --edge  the distance from the window edge to the working area's left edge
   Anything that belongs to the working area is offset by --edge; anything
   drawn on the 180-step grid is written as a share of the window.
   ========================================================================== */

.s-s2 {
  position: relative;
}

/* --- Hero stage ---------------------------------------------------------- */
.s-s2__hero {
  --work: min(var(--layout-content), 100% - var(--layout-margin) * 2);
  --edge: calc((100% - var(--work)) / 2);
  position: relative;
  height: 690px;
}

/* --- Group 60 (152:1611) --------------------------------------------------
   Four horizontal hairlines at y 0 · 180 · 360 · 540, full window width. They
   are this block's own rules — the seven vertical lines are drawn once by the
   page layer and are never repeated in a section.                            */
.s-s2__rules {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s-s2__rules span {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--line-width);
  background: var(--border-hairline);
}

.s-s2__rules span:nth-child(1) { top: 0; }
.s-s2__rules span:nth-child(2) { top: 180px; }
.s-s2__rules span:nth-child(3) { top: 360px; }
.s-s2__rules span:nth-child(4) { top: 540px; }

/* --- Rectangle 17 / 18 / 19 -----------------------------------------------
   The stepped lockup. Macket: 180→361 at y 0, 360→541 at y 180, 0→361 at
   y 360, each 181 tall. 180 · 360 are the vertical grid positions, so the
   boxes are written as shares of the window (12.5 % is --line-step) and stay
   on the grid at every width. The extra 1px is the stroke, which sits inside
   the box and lands exactly on the line.                                     */
.s-s2__boxes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s-s2__box {
  position: absolute;
  height: 181px;
  border: var(--line-width) solid var(--amber-4);
}

.s-s2__box--1 {
  top: 0;
  left: var(--line-step);
  width: calc(var(--line-step) + var(--line-width));
}

.s-s2__box--2 {
  top: 180px;
  left: calc(var(--line-step) * 2);
  width: calc(var(--line-step) + var(--line-width));
}

.s-s2__box--3 {
  top: 360px;
  left: 0;
  width: calc(var(--line-step) * 2 + var(--line-width));
}

/* --- Lockup copy ----------------------------------------------------------
   The four words read as one line — "Done for you · book publishing for
   experts" — so they stay one paragraph and are placed word by word. The
   paragraph covers the stage, so it passes pointer events through and only
   the words themselves take them back.                                       */
.s-s2__lockup {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s-s2__lock {
  position: absolute;
  white-space: nowrap;
  pointer-events: auto;
}

/* Macket: right edge at 336, i.e. 25 inside the first box. */
.s-s2__lock--done {
  top: 138px;
  right: calc(100% - var(--line-step) * 2 - var(--line-width));
  margin-right: var(--layout-gutter);
}

/* Macket: right edge at 437, left edge at 385 — 25 inside the second box. */
.s-s2__lock--for {
  top: 205px;
  right: calc(100% - var(--line-step) * 2 - 77px);
}

.s-s2__lock--you {
  top: 248px;
  left: calc(var(--line-step) * 2);
  margin-left: var(--layout-gutter);
}

/* Macket x 386 — this one is working-area copy, flush with the headline. */
.s-s2__lock--tag {
  top: 386px;
  left: var(--edge);
}

/* --- Video poster ---------------------------------------------------------
   Macket: 821 x 594 at x 619, running off the right edge of the window. 619 is
   the working area's left edge plus 569, and 569 is where the copy column
   below starts, so the two share one left edge at every width. The height is
   held at 594 and the artwork covers from its top left corner, which keeps the
   poster, the frame and the video registered on one another as the box widens.
   ------------------------------------------------------------------------ */
.s-s2__video {
  position: absolute;
  top: 46px;
  right: 0;
  left: calc(var(--edge) + var(--work) * 0.4246269);   /* macket 569 of 1340 */
  height: 594px;
  overflow: hidden;
}

.s-s2__poster,
.s-s2__frame,
.s-s2__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* Rectangle 14 — the outline that traces the poster's shape. */
.s-s2__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- Play control ---------------------------------------------------------
   Ellipse 3 (100) with Polygon 1 (50) centred in it, centred on the poster.  */
.s-s2__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.s-s2__play-arrow {
  position: absolute;
  top: 25px;
  left: 25px;
}

/* --- Headline -------------------------------------------------------------
   Macket: "YOUR EXPERTISE / INTO A BOOK" cap top at y 640, 544 wide; the
   handwritten "TURN" is live text in Comforter, cap top at y 590, laid over
   the first line and drawn above it.                                         */
.s-s2__head {
  position: absolute;
  top: 640px;
  left: var(--edge);
}

.s-s2__title {
  display: block;
  max-width: 544px;
}

.s-s2__accent {
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 1;
  white-space: nowrap;
}

/* --- Body -----------------------------------------------------------------
   Frame 15: the copy column right aligned in the working area, 150 clear of
   the stat row, then 25 clear of the TrustLine band.                         */
.s-s2__body {
  padding-bottom: var(--layout-gutter);
}

.s-s2__copy {
  width: 57.5373%;         /* macket 771 of 1340 */
  margin-left: auto;
  margin-bottom: 150px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.s-s2__lead,
.s-s2__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-gutter);
}

.s-s2__lede {
  width: 98.9624%;         /* macket 763 of 771 — holds the three-line break */
}

.s-s2__note {
  max-width: 70.5577%;     /* macket 544 of 771 */
}

/* --- Button_form ----------------------------------------------------------
   Two variants of the same component. Filled: amber plate, hover drops the
   fill to nothing and leaves the 3px accent stroke. Outlined: no fill, 3px
   Rich Black 1 stroke, hover takes the stroke to the accent. Both strokes are
   drawn inset so the resting and hovered boxes are the same size, which is
   also why the macket's 61px height holds with a 3px stroke and 25 padding.  */
.s-s2__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--layout-gutter);
  color: var(--rich-black-1);
  transition: background-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}

.s-s2__cta--fill {
  background: var(--amber-4);
  box-shadow: inset 0 0 0 3px var(--action-fill-hover);   /* fully transparent */
}

.s-s2__cta--fill:hover {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

.s-s2__cta--outline {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--border-strong);
}

.s-s2__cta--outline:hover {
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* --- Main_S3_Card ---------------------------------------------------------
   Five tiles across the working area: 248 wide with the gutter between them
   adds up to 1340 exactly, so equal columns reproduce the macket and narrow
   with the working area rather than wrapping.                                */
.s-s2__stats {
  display: flex;
  gap: var(--layout-gutter);
}

.s-s2__stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 46px var(--layout-gutter) 47px;
  background: var(--vista-blue-1);
  color: var(--content-on-brand);
  text-align: center;
}

.s-s2__stat-num {
  margin-bottom: var(--layout-gutter);
}

/* --- TrustLine (287:758) --------------------------------------------------
   Amber band, 104 tall, full window width: 25 of padding, a 54 tall row, 25.
   The five logos keep their macket sizes and sit on their own baselines
   inside that row, exactly as the component places them.                     */
.s-s2__trust {
  height: 104px;
  display: flex;
  align-items: center;
  background: var(--amber-4);
  overflow: hidden;
}

.s-s2__trust-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 54px;
}

.s-s2__logo {
  flex: 0 0 auto;
}

/* Macket: each logo's top offset inside the 54 tall row. */
.s-s2__logo--forbes      { margin-top: 3px; }
.s-s2__logo--ingramspark { margin-top: 14px; }
.s-s2__logo--nyt         { margin-top: 16px; }
.s-s2__logo--barnes      { margin-top: 11px; }
.s-s2__logo--bbc         { margin-top: 2px; }

/* ===== main/s4.css ===== */
/* ==========================================================================
   Section 4 — "Who do we write for"
   Figma node 152:1615 · "Section 4 [bleed:both]" · 1440 x 1458
   Intent tag: bleed:both. The brand surface runs the full window width; the
   two expert blocks stay inside the working area.
   ========================================================================== */

.s-s4 {
  position: relative;
  background: var(--vista-blue-1);
  /* macket: the left amber block and the centre rule both run to y 1458,
     150px below the bottom of the taller expert block. */
  padding-bottom: 150px;
}

/* --- Headline -------------------------------------------------------------
   Macket: "DO WE WRITE FOR" cap top at y 100, 544 wide, centred on the page
   axis. The handwritten "WHO" is live text in Comforter laid over it, its cap
   top at y 50 and its left edge at x 596 — 124 left of the 720 axis.
   min-height holds the block row at y 331 exactly as in the macket.          */
.s-s4__head {
  position: relative;
  min-height: 331px;
  padding-top: 100px;
}

.s-s4__title {
  display: block;
  width: 544px;
  margin-inline: auto;
  text-align: center;
}

.s-s4__accent {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-124px);
  color: var(--editorial-white-4);
  white-space: nowrap;
}

/* --- The two expert blocks ------------------------------------------------
   Macket: row at y 331, x 164 to 1276, two 506 columns with 100 between them,
   so each column sits 50 clear of the centre axis. The columns shrink with
   the working area and stay symmetrical about the rule.                      */
.s-s4__cols {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 100px;
}

.s-s4__col {
  flex: 0 1 506px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

/* --- Centre rule ----------------------------------------------------------
   Macket: an open amber ring at y 232 (50 x 50, drawn rotated 180), a 25 long
   segment at y 281, then the long rule from y 331 to the foot of the section.
   All three are 3px amber strokes — this is the accent rule, not one of the
   seven 1px page grid lines, which this section's surface covers anyway.
   Anchoring the rule to the block row keeps its head level with the top of
   the wellness photograph at every width.                                    */
.s-s4__rule {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: -150px;
  width: 3px;
  margin-left: -1.5px;
  background: var(--amber-4);
}

.s-s4__rule::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: -50px;
  height: 25px;
  background: var(--amber-4);
}

.s-s4__rule-mark {
  position: absolute;
  left: 50%;
  top: -99px;
  /* No rotation. The exported ring already carries the orientation it has on
     the canvas — its gap faces left, which is what turns the ring plus the
     rule below it into a question mark. Turning it 180 here mirrored the gap
     to the right and the mark read upside down. */
  transform: translateX(-50%);
}

/* --- Block copy -----------------------------------------------------------
   Macket: the two words of the kicker step 43 apart on the cap height, which
   is the gutter once the cap trim is applied; "EXPERTS" is indented 114 of the
   506 column in the business block and flush left in the wellness block.      */
.s-s4__kicker {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

.s-s4__kicker-in {
  margin-left: 22.529%;   /* macket 114 of 506 */
}

.s-s4__lede--right {
  padding-left: 22.529%;  /* macket 114 of 506, ragged left, flush right */
  text-align: right;
}

.s-s4__lede--left {
  padding-left: 15.020%;  /* macket 76 of 506 */
}

/* --- Button_form ----------------------------------------------------------
   Right aligned in the business block, left aligned in the wellness block.
   Hover drops the fill and leaves the 3px accent stroke; the inset stroke
   keeps the resting and hovered boxes the same size.                         */
.s-s4__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  background: var(--amber-4);
  color: var(--rich-black-1);
  box-shadow: inset 0 0 0 3px var(--action-fill-hover);   /* the token is fully transparent */
  transition: background-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}

.s-s4__col--business .s-s4__cta {
  align-self: flex-end;
}

.s-s4__cta:hover {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* --- Photographs and their amber blocks -----------------------------------
   Macket: the business block's amber rectangle runs off the left edge of the
   window and stops 114 into the photograph; the wellness block's amber band
   starts 190 into the photograph and runs off the right edge. Where the amber
   crosses a photograph the file drops it to 50 %, so each is drawn twice: the
   solid part outside the frame and the tinted part over it. The offsets into
   the frame are written as shares of the frame so the band keeps its place on
   the picture as the working area narrows.                                   */
.s-s4__photo {
  position: relative;
}

.s-s4__band,
.s-s4__tint {
  position: absolute;
  background: var(--amber-4);
  pointer-events: none;
}

.s-s4__tint {
  opacity: 0.5;
}

.s-s4__band--business {
  top: -25px;
  bottom: -150px;   /* meets the foot of the section */
  right: 100%;
  left: -100vw;
}

.s-s4__tint--business {
  top: 0;
  bottom: 0;
  left: 0;
  width: 22.529%;   /* macket 114 of 506 */
}

.s-s4__band--wellness {
  top: 6.667%;      /* macket 50 of 750 */
  height: 13.333%;  /* macket 100 of 750 */
  left: 100%;
  right: -100vw;
}

.s-s4__tint--wellness {
  top: 6.667%;
  height: 13.333%;
  left: 37.549%;    /* macket 190 of 506 */
  right: 0;
}

/* ===== main/s5.css ===== */
/* ==========================================================================
   Section 5 — "When your expertise is bigger than your visibility…"
   Figma node 152:1616 · "Section 5 [flow]" · 1340 x 613
   Card component: Main_S5_Card, node 55:142 (variants S5_Card/Pas, /Hov)
   Intent tag: flow. The three cards are one row that wraps when it stops
   fitting; nothing bleeds, so the whole section lives in the working area.
   ========================================================================== */

.s-s5 {
  position: relative;
  /* The section box starts at the cap top of the handwritten "WHEN"; the
     Mulish headline begins 50 lower. */
  padding-top: 50px;
}

.s-s5__inner {
  display: flex;
  flex-direction: column;
}

/* --- Headline -------------------------------------------------------------
   Macket: headline cap top at y 50, flush left, full 1340 wide, broken after
   "YOUR EXPERTISE". The handwritten "WHEN" is live text in Comforter, amber,
   laid over it with its cap top at y 0 and its left edge on the working area. */
.s-s5__head {
  position: relative;
}

.s-s5__title {
  display: block;
}

.s-s5__accent {
  position: absolute;
  top: -50px;
  left: 0;
  white-space: nowrap;
}

/* --- Subheading -----------------------------------------------------------
   Macket: 430 wide at x 910 — the last four columns of the grid, so it stays
   pinned to the right edge of the working area as the columns narrow.        */
.s-s5__subrow {
  margin-top: var(--layout-gutter);
}

.s-s5__sub {
  grid-column: 9 / span 4;
}

/* --- Cards ----------------------------------------------------------------
   Macket: three 430 cards at y 322 with the 25 gutter between them, which is
   the full 1340 across. Main_S5_Card carries a hover variant that swaps the
   brand surface for the accent.                                              */
.s-s5__cards {
  --flow-basis: 430px;
  margin-top: 100px;
}

.s-s5__card {
  padding: 25px;
  background: var(--vista-blue-1);
  transition: background-color var(--t-base) linear;
}

.s-s5__card:hover {
  background: var(--amber-4);
}

/* Macket: the body sits 43 below the title on the cap height, which is the
   gutter once the cap trim is applied, and is indented 50 inside the card. */
.s-s5__card-body {
  margin-top: var(--layout-gutter);
  padding-left: 50px;
}

/* --- Closing line ---------------------------------------------------------
   Macket: 884 wide, flush left — eight columns of the grid.                  */
.s-s5__closerow {
  margin-top: 100px;
}

.s-s5__close {
  grid-column: 1 / span 8;
}

/* ===== main/s6.css ===== */
/* ==========================================================================
   Section 6 — How it works
   Figma: Main / node 1344:8263, instance of How_it_works_main (66:554).
   The component carries seven stacked variants (00–06); here it is one arc
   with the steps as data. The arc never moves: the stops ride it, the open
   step always sits at the arc's rightmost point.

   Macket coordinates are 1440-wide frame coordinates. The stage below is the
   1340 working area, so every macket x is written here as x − 50.
   Arc: Figma "Ellipse 7", 1150 box at (−442, −25) with a 1px stroke, i.e.
   centre (83, 550) and radius 574.5 in stage coordinates.
   ========================================================================== */

.s-s6 {
  position: relative;
  height: 1100px;
  overflow: hidden;
  background: var(--surface-brand);
}

.s-s6__stage {
  position: relative;
  height: 100%;
}

/* --- Heading ------------------------------------------------------------
   "HOW" (Comforter) is laid over "IT WORKS" and paints above it, so it comes
   first in the DOM and is lifted with z-index rather than reordered.       */
.s-s6__accent {
  position: absolute;
  z-index: 1;
  top: 50px;
  left: 0;
  white-space: nowrap;
  color: var(--editorial-white-4);
}

.s-s6__title {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  color: var(--content-on-brand);
}

/* --- The arc ------------------------------------------------------------
   Static. Clipped by the section on the left, top and bottom.             */
.s-s6__arc {
  position: absolute;
  top: -25px;
  left: -492px;
  pointer-events: none;
}

/* Stroke colours live here, not on the SVG: var() is a CSS value and does
   not resolve inside an XML presentation attribute.                        */
.s-s6__arc circle {
  stroke: var(--editorial-white-4);
}

/* --- The dial -----------------------------------------------------------
   Each stop is a zero-size origin at the circle centre, rotated by its
   offset from the open step. Its children then sit on the local x axis,
   which is the radius, so a child at x = 574.5 lands on the arc and one at
   x = 631.5 lands the 57px further out that the macket puts the numerals.
   The open step is offset 0, so it is not rotated at all.                 */
.s-s6__dial {
  position: absolute;
  inset: 0;
}

.s-s6__stop {
  position: absolute;
  top: 550px;
  left: 83px;
  width: 0;
  height: 0;
  display: none;
  transform: rotate(var(--s6-angle, 0deg));
}

.s-s6__stop[data-offset="-2"] { display: block; --s6-angle: -60deg; }
.s-s6__stop[data-offset="-1"] { display: block; --s6-angle: -30deg; }
.s-s6__stop[data-offset="0"]  { display: block; --s6-angle:   0deg; }
.s-s6__stop[data-offset="1"]  { display: block; --s6-angle:  30deg; }
.s-s6__stop[data-offset="2"]  { display: block; --s6-angle:  60deg; }

.s-s6__bullet {
  position: absolute;
  top: 0;
  left: 574.5px;
  margin: -7.5px 0 0 -7.5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--editorial-white-4);
}

.s-s6__stop[data-offset="0"] .s-s6__bullet {
  background: var(--rich-black-1);
}

.s-s6__num {
  position: absolute;
  top: 0;
  left: 631.5px;
  margin: -17.5px 0 0 -31.5px;
  width: 63px;
  height: 35px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--editorial-white-4);
  cursor: pointer;
}

.s-s6__stop[data-offset="0"] .s-s6__num {
  color: var(--content-on-brand);
  cursor: default;
}

/* --- The open step ------------------------------------------------------
   In the macket the title's cap box is centred on the arc point and the body
   sits 25 below it, whether the title runs to one line or two. Centring the
   title alone and taking the body out of flow reproduces that without
   measuring either of them.                                                */
.s-s6__steps {
  position: absolute;
  top: 550px;
  right: 0;
  left: 771px;
}

.s-s6__step {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY(-50%);
}

.s-s6__step[hidden] { display: none; }

.s-s6__steptitle {
  color: var(--content-on-brand);
}

.s-s6__stepbody {
  position: absolute;
  top: calc(100% + 25px);
  left: 0;
  width: 100%;
  max-width: 366px;
  color: var(--content-on-brand);
}

/* --- Chevrons -----------------------------------------------------------
   The pair occupies 500–625; with only one button left it right-aligns to
   625, which is where the macket puts the lone chevron on steps 00 and 06. */
.s-s6__nav {
  position: absolute;
  top: 525px;
  left: 500px;
  display: flex;
  justify-content: flex-end;
  gap: var(--layout-gutter);
  width: 125px;
}

.s-s6__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--action-fill);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  cursor: pointer;
  transition: background-color var(--t-base), box-shadow var(--t-base);
}

.s-s6__chev[hidden] { display: none; }

.s-s6__chev:hover {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

.s-s6__chev path {
  stroke: var(--content-on-accent);
}

.s-s6__chev--prev svg { transform: rotate(180deg); }

/* --- Call to action ------------------------------------------------------ */
.s-s6__cta {
  position: absolute;
  top: 989px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  white-space: nowrap;
  color: var(--content-on-accent);
  background: var(--action-fill);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  transition: background-color var(--t-base), box-shadow var(--t-base);
}

.s-s6__cta:hover {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== main/s7.css ===== */
/* ==========================================================================
   Section 7 — Client voices
   Figma: Main / node 152:1617 "Section 7 [flow]", 1340 × 572.
   Card component Main_S7_Card (76:696), variants Pas (76:695) and Hov
   (76:694). Three cards of 430 on the flow gutter of 25 — the full working
   area — so the row is .is-flow with the card width as its basis.
   ========================================================================== */

.s-s7 {
  position: relative;
}

/* --- Heading block ------------------------------------------------------
   572 = 178 (this block) + 394 (the cards). The three lines are centred on
   the working area; "CLIENT" is laid over "VOICES" and paints above it, so
   it comes first in the DOM and is lifted with z-index.                    */
.s-s7__head {
  position: relative;
  height: 178px;
}

.s-s7__accent {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--content-accent);
}

.s-s7__title {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 544px;
  text-align: center;
  color: var(--content-primary);
}

.s-s7__sub {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--content-primary);
}

/* The clip path lives in a zero-size <svg> and must not take up any room. */
.s-s7__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Cards --------------------------------------------------------------- */
.s-s7__cards {
  --flow-basis: 430px;
}

.s-s7__card {
  position: relative;
  height: 394px;
  background: var(--surface-brand);
  transition: background-color var(--t-base);
}

/* Main_S7_Card / Hov — the plate turns amber, nothing else moves. */
.s-s7__card:hover {
  background: var(--surface-accent);
}

/* --- Portrait -----------------------------------------------------------
   A 125 × 226 window at (25, 25) cut to the irregular outline of the file's
   vector mask (76:680), with the 235 × 242 photograph sitting behind it at
   (−57, −13) so the crop lands where the macket puts it.                   */
.s-s7__portrait {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 125px;
  height: 226px;
  overflow: hidden;
}

.s-s7__portrait img {
  /* The export from Figma already carries the mask: the cut is baked into the
     file and the area outside it is the card's own Vista Blue, so the shape
     needs no clip-path here and cannot drift from the design. */
  display: block;
  width: 125px;
  height: 226px;
}

/* --- Card text ----------------------------------------------------------
   Content box 380 wide from the top edge at 126. The name and role sit in a
   230 column pushed to the right edge of that box; the quote runs its full
   width, 84 below.                                                          */
.s-s7__body {
  position: absolute;
  top: 126px;
  right: 25px;
  left: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 84px;
  color: var(--content-on-brand);
}

.s-s7__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-gutter);
  width: 230px;
  max-width: 100%;
}

.s-s7__name,
.s-s7__role {
  width: 100%;
}

.s-s7__quote {
  width: 100%;
}

/* ===== main/s8.css ===== */
/* ==========================================================================
   Section 8 — Case Studies carousel
   Figma: Main / Section 8, node 86:356 (instance of Main_S8_Frame, 86:325)
   Inner card: Main_S8_inside_card, node 86:188
   Macket 1440 x 546. Content band 50 -> 496, working area 50 -> 1390.
   ========================================================================== */

.s-s8 {
  padding-block: 50px;
}

/* The row is nine columns of picker + cover + text, three columns of aside.
   Macket: aside 50..366, stage 391..1390.                                   */
.s-s8__inner {
  align-items: stretch;
}

/* --- Aside: headline, rotated line, arrows ------------------------------- */
.s-s8__aside {
  grid-column: 1 / span 3;
  position: relative;
}

/* Accent cap top at macket y 50, Mulish heading cap top at y 100.
   Both are trimmed, so the 50px padding is the exact macket offset.         */
.s-s8__head {
  position: relative;
  padding-top: 50px;
}
.s-s8__head-accent {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}
.s-s8__head-main {
  display: block;
  white-space: nowrap;
}

/* Macket x 278 = 228 of the working area = 72.09 % of the three-column
   aside; y 189, i.e. 139 below the content band top. Rotated 90 degrees,
   reading downwards — writing-mode does that without a transform.           */
.s-s8__rotated {
  position: absolute;
  top: 139px;
  left: 72.09%;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

/* Macket x 50 and 125, y 446..496 — flush with the bottom of the band.      */
.s-s8__nav {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: var(--layout-gutter);
}
.s-s8__arrow {
  flex: none;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--amber-4);
  cursor: pointer;
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.s-s8__arrow:hover {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* --- Stage: picker, large cover, text ----------------------------------- */
.s-s8__stage {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--layout-gutter);
  align-items: end;
  min-height: 446px;
}

/* Three covers per row, one column each. A fourth and any further entry
   wraps onto a row above — the list is managed and is not capped at four.   */
.s-s8__thumbs {
  grid-column: span 3;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--layout-gutter);
}
.s-s8__thumbs > li {
  flex: 0 0 calc((100% - var(--layout-gutter) * 2) / 3);
}

.s-s8__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 89 / 126;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform var(--t-base);
}
.s-s8__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Passive state is the desaturated cover, hover swaps in the colour one. */
.s-s8__thumb-color {
  opacity: 0;
  transition: opacity var(--t-base);
}
/* Hover raises the cover 10px and leaves a 3px accent rule on the baseline
   it came from — component variant Hov, 136px tall against 126px passive.   */
.s-s8__thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  height: 3px;
  background: var(--amber-4);
  opacity: 0;
  transition: opacity var(--t-base);
}
.s-s8__thumb:hover,
.s-s8__thumb:focus-visible {
  transform: translateY(-10px);
}
.s-s8__thumb:hover .s-s8__thumb-color,
.s-s8__thumb:focus-visible .s-s8__thumb-color,
.s-s8__thumb:hover::after,
.s-s8__thumb:focus-visible::after {
  opacity: 1;
}

.s-s8__cover {
  grid-column: span 3;
}
.s-s8__cover img {
  width: 100%;
  aspect-ratio: 316 / 446;
  object-fit: cover;
}

/* The text block is centred against the full height of the cover; the
   button is pinned to the bottom of the band, macket y 435..496.            */
.s-s8__meta {
  grid-column: span 3;
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.s-s8__meta-text {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.s-s8__meta-head {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

.s-s8__cta {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  background: var(--amber-4);
  color: var(--rich-black-1);
  white-space: nowrap;
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.s-s8__cta:hover {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* --- Labels for the icon-only arrows ------------------------------------ */
.s-s8__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== main/s9.css ===== */
/* ==========================================================================
   Section 9 — Services. Intent tag: fluid.
   Figma: Main / "Section 9 [fluid]", node 152:1618, 1340 x 1239.
   Row component: Main_S9_Card, node 86:448.
   The block runs margin to margin, macket x 50 -> 1390, and narrows with
   the working area. Every offset below is a macket y, measured from the
   cap top of the handwritten word, which is the section's own top edge.
   ========================================================================== */

.s-s9 {
  /* One derived column of the twelve, used for the intro's six-column
     measure. The column width is never written down, only derived.        */
  --s9-column: calc((100% - var(--layout-gutter) * 11) / 12);
}

/* --- Heading ------------------------------------------------------------ */
.s-s9__head {
  text-align: center;
}

/* "SERVICES" sits at y 0, "FOR YOU" at y 50. Both are trimmed to the cap
   height, so the padding is the macket offset exactly.                      */
.s-s9__title {
  position: relative;
  padding-top: 50px;
}
.s-s9__title-accent {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.s-s9__title-main {
  display: block;
}

/* y 110 — 25 below the cap bottom of the heading. */
.s-s9__sub {
  margin-top: 25px;
}

/* y 178 — 50 below the subheading. Six columns wide, centred. */
.s-s9__intro {
  width: calc(var(--s9-column) * 6 + var(--layout-gutter) * 5);
  margin-top: 50px;
  margin-inline: auto;
}

/* --- Rows --------------------------------------------------------------- */
/* y 258 — 50 below the intro. Five rows, 25 apart, each the full width of
   the working area.                                                         */
.s-s9__list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  margin-top: 50px;
}

.s-s9__row {
  display: block;
  padding: 50px;
  background: var(--vista-blue-1);
  color: var(--rich-black-1);
  transition: background-color var(--t-base), color var(--t-base);
}
/* Variant S9_Card/Hov: the surface turns accent and every line, the price
   included, drops to the primary text colour.                               */
.s-s9__row:hover {
  background: var(--amber-4);
  color: var(--rich-black-1);
}

.s-s9__row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gutter);
}
.s-s9__name,
.s-s9__price {
  white-space: nowrap;
}
.s-s9__price {
  color: var(--editorial-white-4);
  text-align: right;
}
.s-s9__row:hover .s-s9__price {
  color: inherit;
}

.s-s9__desc {
  display: block;
  margin-top: 25px;
}

/* --- Button ------------------------------------------------------------- */
/* y 1178 — 50 below the last row, centred on the working area. */
.s-s9__actions {
  margin-top: 50px;
  text-align: center;
}
.s-s9__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  background: var(--amber-4);
  color: var(--rich-black-1);
  white-space: nowrap;
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.s-s9__cta:hover {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* "from" and "/month" step down to Base so the figure carries the line. The
   size comes from the scale, not from a new value: 25 → 15, the two steps
   the type system already has. */
.s-s9__affix {
  font-size: 15px;
}

/* ===== main/s10.css ===== */
/* ==========================================================================
   Section 10 — Discovery Sprint.  Figma node 152:1619, 1188 x 900.
   Intent tag: bleed:left. The block runs off the LEFT window edge; its right
   edge is pinned to macket x = 1188, i.e. 1138 from the working area's left
   edge, so --bleed-stop is 1 - 1138 / 1340 = 15.075 %.
   Every horizontal measure inside the block is written as a share of the
   macket frame width (1188), so the composition holds while the frame
   narrows between 1200 and 1440. Vertical offsets that are tied to type
   stay in pixels, exactly as they are in the file.
   ========================================================================== */

.s-s10 .s-s10__bleed {
  --bleed-stop: 15.075%;
  position: relative;
  padding-top: 485px;          /* macket y of the panel column */
}

/* --- Amber band, macket 0 - 935 x 0 - 225 -------------------------------- */
.s-s10 .s-s10__band {
  position: absolute;
  left: 0;
  top: 0;
  width: 78.7037%;             /* 935 / 1188 */
  height: 225px;
  background: var(--amber-4);
  z-index: 0;
}

/* --- Photo, macket 253,50 · 935 x 526 ------------------------------------ */
.s-s10 .s-s10__media {
  position: absolute;
  left: 21.2963%;              /* 253 / 1188 */
  top: 50px;
  width: 78.7037%;             /* 935 / 1188 */
  margin: 0;
  z-index: 1;
}

.s-s10 .s-s10__media img {
  width: 100%;
  aspect-ratio: 935 / 526;
  object-fit: cover;
}

/* The band, at half opacity, carried across the top of the photo. In the
   file this is the same rectangle masked by the photo; the intersection is
   935 - 253 wide and 225 - 50 tall, measured from the photo's own corner.  */
.s-s10 .s-s10__tint {
  position: absolute;
  left: 0;
  top: 0;
  width: 72.9412%;             /* 682 / 935 */
  height: 175px;
  background: var(--amber-4);
  opacity: 0.5;
}

/* --- "DISCOVERY" over "SPRINT", centred on the photo --------------------- */
.s-s10 .s-s10__lockup {
  position: absolute;
  left: 60.6061%;              /* 720 / 1188 — the photo's centre line */
  top: 300px;
  width: 55.3872%;             /* 658 / 1188 */
  transform: translateX(-50%);
  display: grid;
  text-align: center;
  z-index: 2;
}

.s-s10 .s-s10__lockup > * {
  grid-area: 1 / 1;
}

.s-s10 .s-s10__script {
  color: var(--editorial-white-4);
  z-index: 1;                  /* the handwriting sits over the Mulish word */
}

.s-s10 .s-s10__word {
  margin-top: 50px;
  color: var(--amber-4);
}

/* --- Panel + button column, macket 505,485 · 430 wide -------------------- */
.s-s10 .s-s10__col {
  position: relative;
  z-index: 3;
  margin-left: 42.5084%;       /* 505 / 1188 */
  width: 36.1953%;             /* 430 / 1188 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
}

.s-s10 .s-s10__panel {
  width: 100%;
  background: var(--vista-blue-1);
  padding: var(--layout-gutter) var(--layout-gutter) 50px;
}

.s-s10 .s-s10__panel-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
  text-align: center;
  color: var(--rich-black-1);
}

.s-s10 .s-s10__lead,
.s-s10 .s-s10__copy,
.s-s10 .s-s10__price {
  width: 100%;
}

.s-s10 .s-s10__price {
  color: var(--editorial-white-4);
}

/* --- Button_form --------------------------------------------------------
   The border is the same colour as the fill at rest, so the box does not
   change size when the hover state empties the fill.                       */
.s-s10 .s-s10__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 3px solid var(--action-fill);
  background: var(--action-fill);
  color: var(--rich-black-1);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}

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

/* ===== main/s11.css ===== */
/* ==========================================================================
   Section 11 — "OUR TEAM".  Figma node 152:1620, 1440 x 1099.
   Two behaviours in one block, exactly as the handoff tags it:
     · the block itself is bleed:both — the roller runs the full window width
       and clips, so the card after the last visible one is cut by the edge;
     · the row of four cards under "HOW WE WORK WITH AUTHORS" is flow — it
       wraps as soon as four no longer fit.
   The roller is a managed list. The cards are built in sections/s11.js from
   a data array, so the list takes more than the eight people in the macket.
   ========================================================================== */

.s-s11 {
  /* 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. */
  --s11-work: min(var(--layout-content), 100vw - var(--layout-margin) * 2);
  --s11-side: calc((100vw - var(--s11-work)) / 2);
  --s11-col:  calc((var(--s11-work) - var(--layout-gutter) * 11) / 12);
  --s11-card: calc(var(--s11-col) * 3 + var(--layout-gutter) * 2);  /* 316 */
}

/* --- "OUR" written over "TEAM", centred on the window ------------------- */
.s-s11 .s-s11__lockup {
  display: grid;
  justify-items: center;
  text-align: center;
}

.s-s11 .s-s11__lockup > * {
  grid-area: 1 / 1;
}

.s-s11 .s-s11__script {
  color: var(--amber-4);
  white-space: nowrap;
  z-index: 1;                  /* the handwriting sits over the Mulish word */
}

.s-s11 .s-s11__word {
  margin-top: 50px;
  color: var(--rich-black-1);
}

.s-s11 .s-s11__sub {
  margin: var(--layout-gutter) auto 0;
  max-width: 700px;
  text-align: center;
  color: var(--rich-black-1);
}

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

.s-s11 .s-s11__viewport {
  overflow: hidden;
}

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

.s-s11 .s-s11__card {
  position: relative;
  flex: 0 0 var(--s11-card);
  aspect-ratio: 316 / 450;
}

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

/* The amber block is a 150 x 150 square on a 316 x 450 card. */
.s-s11 .s-s11__plate {
  position: absolute;
  left: 0;
  top: 0;
  width: 47.4684%;
  height: 33.3333%;
  background: var(--amber-4);
}

.s-s11 .s-s11__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-s11 .s-s11__name {
  width: 62.4060%;             /* 166 / 266 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Hover: the Team_cards Hov variant ----------------------------------
   The amber block grows from its 150 x 150 corner to the whole 316 x 450
   card, the photograph goes behind it, and the person's line and their
   social link appear. The quote and the link are always in the markup —
   hidden by opacity, not by display — so the card does not reflow and the
   link stays reachable from the keyboard.                                  */
.s-s11 .s-s11__card {
  --s11-plate-w: 47.4684%;     /* 150 / 316 */
  --s11-plate-h: 33.3333%;     /* 150 / 450 */
}

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

.s-s11 .s-s11__plate {
  width: var(--s11-plate-w);
  height: var(--s11-plate-h);
  transition: width var(--t-base) ease, height var(--t-base) ease;
}

.s-s11 .s-s11__quote {
  margin-top: 65px;            /* macket: role at 67, quote at 153 */
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}

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

.s-s11 .s-s11__card:hover .s-s11__quote,
.s-s11 .s-s11__card:focus-within .s-s11__quote,
.s-s11 .s-s11__card:hover .s-s11__social,
.s-s11 .s-s11__card:focus-within .s-s11__social {
  opacity: 1;
  transition-delay: 120ms;     /* let the plate arrive first */
}

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

.s-s11 .s-s11__counter {
  color: var(--amber-4);
}

/* In the macket the arrow sits 115 px to the right of the counter's centre
   line, not on a grid line, so the offset is kept as a distance.          */
.s-s11 .s-s11__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-s11 .s-s11__next:hover {
  opacity: 0.6;
}

.s-s11 .s-s11__next[disabled] {
  opacity: 0.3;
  cursor: default;
}

/* --- Lede, six columns against the right margin ------------------------ */
.s-s11 .s-s11__lede {
  width: 49.0299%;             /* 657 / 1340 */
  margin-left: auto;
  margin-top: var(--layout-gutter);
  color: var(--rich-black-1);
}

.s-s11 .s-s11__label {
  margin-top: 50px;
  color: var(--rich-black-1);
}

/* --- "How we work with authors" — flow, wraps when four stop fitting ---- */
.s-s11 .s-s11__how {
  --flow-basis: 316px;
  margin-top: var(--layout-gutter);
}

.s-s11 .s-s11__how-card {
  display: flex;
  border: 3px solid var(--rich-black-1);
  padding: var(--layout-gutter) var(--layout-gutter) 50px;
}

.s-s11 .s-s11__how-in {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  width: 100%;
  color: var(--rich-black-1);
}

/* ===== main/s12.css ===== */
/* ==========================================================================
   Section 12 — the founder block.  Figma node 998:11852, tagged frame
   998:11853 ("Section 12 [bleed:left]", 1340 x 682).
   Intent tag: bleed:left. The amber slab runs off the LEFT window edge; the
   right edge is pinned to macket x = 1340, i.e. 1290 from the working area's
   left edge, so --bleed-stop is 1 - 1290 / 1340 = 3.7313 %.
   Horizontal measures are shares of the macket frame width (1340).
   ========================================================================== */

.s-s12 .s-s12__bleed {
  --bleed-stop: 3.7313%;
  display: flex;
  align-items: flex-start;
}

/* --- Portrait: amber slab, photo, amber tint over the slab's half -------- */
.s-s12 .s-s12__media {
  position: relative;
  flex: 0 0 44.3284%;          /* 594 / 1340 — slab 278 + photo out to 594 */
}

.s-s12 .s-s12__media img {
  position: relative;
  z-index: 1;
  width: 91.5825%;             /* 544 / 594 */
  margin-left: 8.4175%;        /* 50  / 594 */
  margin-top: var(--layout-gutter);
  aspect-ratio: 544 / 657;
  object-fit: cover;
}

.s-s12 .s-s12__slab,
.s-s12 .s-s12__tint {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 46.8013%;             /* 278 / 594 */
  background: var(--amber-4);
}

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

/* --- Text column, macket 568.97 wide 771 --------------------------------
   It overlaps the photo column by one gutter, which is how the heading in
   the file reaches back past the photo's right edge.                       */
.s-s12 .s-s12__body {
  position: relative;
  z-index: 3;
  flex: 0 0 57.5373%;          /* 771 / 1340 */
  margin-left: -1.8657%;       /* -25 / 1340 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--layout-gutter);
}

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

/* --- "FOUNDER" written over "ALEX TKACHENKO" ---------------------------- */
.s-s12 .s-s12__lockup {
  width: 100%;
  display: grid;
}

.s-s12 .s-s12__lockup > * {
  grid-area: 1 / 1;
}

.s-s12 .s-s12__script {
  width: 83.28%;
  color: var(--amber-4);
  z-index: 1;                  /* the handwriting sits over the Mulish name */
}

.s-s12 .s-s12__name {
  margin-top: 50px;
  color: var(--rich-black-1);
}

/* --- Six-column text blocks, right aligned in the column ---------------- */
.s-s12 .s-s12__sub,
.s-s12 .s-s12__bio,
.s-s12 .s-s12__quote {
  width: 85.214%;              /* 657 / 771 */
  color: var(--rich-black-1);
}

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

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

.s-s12 .s-s12__social a:hover {
  opacity: 0.6;
}

/* ===== main/s13.css ===== */
/* ==========================================================================
   Section 13 — FAQ accordion
   Figma: node 966:9237 "Section 13", 1440 x 758, Dekstop / Main
   Card component: Main_S13_Card, component set node 125:1398
   (NOT FAQ_S2_Card 657:3677 and NOT FAQ_S4_Card 657:4100 — see s13.assets.md)
   ========================================================================== */

/* Full-window Vista Blue 1 fill. 100 top and bottom: 100 + 558 + 100 = 758. */
.s-s13 {
  background: var(--vista-blue-1);
  padding-block: 100px;
}

/* The block is 885 = eight columns with their gutters, centred in the working
   area: two columns and a gutter on each side (2 + 8 + 2 = 12).              */
.s-s13__grid {
  row-gap: var(--layout-gutter);
}
.s-s13__intro,
.s-s13__list {
  grid-column: 3 / span 8;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 85-tall group; the accent starts at 0.  */
.s-s13__intro {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  text-align: center;
}
.s-s13__title {
  display: grid;
  font: inherit;
}
.s-s13__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-s13__title-main {
  margin-top: 50px;
}
.s-s13__title-accent {
  color: var(--editorial-white-4);
}

/* --- Rows ---------------------------------------------------------------
   Collapsed row is 61: 25 + cap height 11 + 25. Gap between rows 25.      */
.s-s13__list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-s13__item {
  background: var(--editorial-white-4);
}
.s-s13__question {
  font: inherit;
}
.s-s13__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-gutter);
  width: 100%;
  padding: 25px 25px 25px 50px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.s-s13__label {
  color: var(--content-primary);
}

/* The chevron is Main_S11_Arrows: a 45-degree rule, 21.213 x 10.607.      */
.s-s13__chevron {
  flex: 0 0 auto;
  width: 21.213px;
  height: 10.607px;
  transition: transform var(--t-base) ease;
}
.s-s13__item.is-open .s-s13__chevron {
  transform: rotate(180deg);
}

/* --- Panel --------------------------------------------------------------
   Animated on grid-template-rows so the real content height is measured
   instead of guessed with a max-height. visibility keeps the collapsed
   answer out of the accessibility tree once the transition has finished. */
.s-s13__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) ease;
}
.s-s13__panel-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--t-base);
}
.s-s13__item.is-open .s-s13__panel {
  grid-template-rows: 1fr;
}
.s-s13__item.is-open .s-s13__panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

/* Open row: 25 + question + 50 + answer + 50 = 166 for a two-line answer.
   25 of the 50 between question and answer is the trigger's own bottom
   padding, which is what keeps the collapsed row at 61; the other 25 is
   here. The answer column is 607 wide — 228 stays empty on the right.    */
.s-s13__answer {
  padding: 25px 228px 50px 50px;
  color: var(--content-primary);
}

/* ===== main/s14.css ===== */
/* ==========================================================================
   Section 14 — three ways to start
   Figma: node 966:9200 "Section 14", 1340 x 759 — the whole working area.
   Card component: Service_S6_Card, instances 966:9207 / 966:9208 / 966:9209.
   ========================================================================== */

/* 159 heading + 50 + 550 cards = 759. No fill: the page background shows. */
.s-s14__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 85-tall group; the accent starts at 0.  */
.s-s14__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
  text-align: center;
}
.s-s14__title {
  display: grid;
  width: 100%;
  max-width: 753px;
  font: inherit;
}
.s-s14__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-s14__title-main {
  margin-top: 50px;
}
.s-s14__title-accent {
  color: var(--amber-4);
}
.s-s14__subheading {
  width: 100%;
  max-width: 480px;
}

/* --- Cards --------------------------------------------------------------
   Three 430 blocks with the 25 gutter: 430 * 3 + 25 * 2 = 1340 exactly, so
   the row is the whole working area.

   The basis is written as that share of the row rather than as the literal
   430, and it resolves to exactly 430 at the 1440 reference. Written as
   430px the row wraps the moment the working area drops below 1340 — the
   flow helper wraps on the base size before it shrinks — and the three
   cards would break to 2 + 1 anywhere under 1440, which is the band the
   layout is required to hold. The 0.02 is there so sub-pixel rounding
   cannot tip the line into a wrap.                                        */
.s-s14__cards {
  /* 430 is three columns with their gutters. Kept as the literal card width,
     not a calc that forces three across: the flow tag says the row wraps when
     the cards stop fitting, and the acceptance list is explicit that flow rows
     wrap rather than shrink. Same basis as s5 and s7. */
  --flow-basis: 430px;
}
/* --- Hover: the Service_S6_Card Hov variant -----------------------------
   The text panel swaps Rich Black 3 for Amber 4. Nothing else moves: the
   type stays Rich Black 1, the photograph and the button keep their place.
   :focus-within carries it to the keyboard, since the whole card is a
   target for the link inside it.                                           */
.s-s14__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 550px;
  background: var(--rich-black-3);
  transition: background-color var(--t-base) ease;
}

.s-s14__card:hover,
.s-s14__card:focus-within {
  background: var(--amber-4);
}

/* The text panel ends at 229 in the macket (41.64 % of 550). It is a floor,
   not a fixed height: below 1440 the card narrows, the title wraps onto
   more lines and the panel grows into the photo rather than over it.      */
.s-s14__panel {
  flex: 0 0 auto;
  min-height: 229px;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  padding: 50px 25px 25px;
}
/* No font reset on the title: it carries .t-intro-black, and resetting the
   h3 here would win on the cascade and undo the type class.              */
.s-s14__card-title,
.s-s14__card-line {
  color: var(--content-primary);
}

.s-s14__photo-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.s-s14__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The button sits over the photo, 25 from the bottom and 25 from the right;
   its width is the label plus 25 of padding on each side, which is what
   makes the three buttons three different widths in the macket.           */
.s-s14__button {
  position: absolute;
  right: 25px;
  bottom: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  background: var(--action-fill);
  color: var(--content-on-accent);
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
/* The label is trimmed to its cap height, so 25 + 11 + 25 gives the 61 of
   the macket. It carries the trim rather than the anchor because only a
   flex item is a block container of its own text.                        */
.s-s14__button-label {
  white-space: nowrap;
}
.s-s14__button:hover {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== main/s15.css ===== */
/* ==========================================================================
   Section 15 — "Your book starts here" contact form
   Figma: node 966:9240 "Section 15", 885 x 796, centred in the working area.
   Form component: Main_S14_Form, instance 966:8472, component set 1356:8297
   with the four states Default 152:994, Loading 1356:8298, Error 1356:8324,
   Send 1356:8351. Field plate: Main_S14_Form_text_card, set 144:914.
   ========================================================================== */

/* The heading block is 885 = eight columns with their gutters, centred:
   two columns and a gutter each side. The form is 657 = six columns, also
   centred, so it starts one column plus a gutter inside the heading.      */
.s-s15__grid {
  row-gap: 50px;
}
.s-s15__title {
  grid-column: 3 / span 8;
}
.s-s15__form {
  grid-column: 4 / span 6;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 85-tall group; the accent starts at 0.  */
.s-s15__title {
  display: grid;
  justify-items: center;
  text-align: center;
  font: inherit;
}
.s-s15__title > * {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 617px;
}
.s-s15__title-main {
  margin-top: 50px;
}
.s-s15__title-accent {
  color: var(--amber-4);
}

/* --- Form ---------------------------------------------------------------
   50 + 420 fields + 25 + 61 button + 44 + 11 status + 50 = 661.           */
.s-s15__form {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  padding: 50px 25px;
  background: var(--vista-blue-1);
}
.s-s15__fields {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-s15__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-s15__label {
  color: var(--content-on-brand);
}

/* --- Plates -------------------------------------------------------------
   Editorial White 4 plate, no border in the resting state. 15 of padding
   all round: 15 + cap height 11 + 15 = 41 for the two single-line fields. */
.s-s15__plate {
  width: 100%;
  border: 0;
  background: var(--editorial-white-4);
  color: var(--content-primary);
}
.s-s15__input {
  height: 41px;
  padding: 0 15px;
}
.s-s15__textarea {
  height: 225px;
  padding: 15px;
  resize: vertical;
}
.s-s15__plate::placeholder {
  color: var(--vista-blue-1);
  opacity: 1;
}

/* Focus is a white plate with a 3px Amber 4 stroke — the decision base.css
   already applies site wide. Here the stroke sits on the plate edge rather
   than 2 outside it, which is how Main_S14_Form_text_card draws its Act
   variants (144:911 small, 144:910 big).                                  */
.s-s15__plate:focus-visible {
  outline-offset: 0;
  background-color: var(--editorial-white-2);
}

/* --- Actions ------------------------------------------------------------ */
.s-s15__actions {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
}
.s-s15__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border: 0;
  background: var(--action-fill);
  color: var(--content-on-accent);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
/* The label is trimmed to its cap height, so 25 + 11 + 25 gives the 61 of
   the macket. It carries the trim rather than the button because only a
   flex item is a block container of its own text.                        */
.s-s15__submit-label {
  white-space: nowrap;
}
.s-s15__submit:hover:not([disabled]) {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* The Loading variant leaves the button looking exactly as it does at rest,
   so nothing is restyled here — it is only made unusable.                 */
.s-s15__submit[disabled] {
  cursor: progress;
}

/* --- Status line --------------------------------------------------------
   At rest the reassurance line stands alone on the left. In the three other
   states the state word takes the left and the message takes the right.   */
/* 25 of the 44 between the button row and the status line comes from the
   form's own gap, the remaining 19 from here.                            */
.s-s15__status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gutter);
  margin-top: 19px;
  color: var(--content-on-brand);
}
.s-s15__message {
  text-align: right;
}
.s-s15__hint[hidden],
.s-s15__state[hidden],
.s-s15__message[hidden] {
  display: none;
}