/* =============================================================================
   Aidgency website, Broadsheet: TABLET AND DESKTOP.

   Loaded only from 600px wide (media attribute on the <link>), after site.css.
   It lays the same single column out with more room: every text section is
   one left-aligned column at every width (Brian and Jennifer's final notes,
   2026-10-20), so this file mostly sets the four type sizes, the margins and
   the spacing for wider screens.

     600-1099px  TABLET   header with the menu button
     1100px +    DESKTOP  fixed header with the navigation bar

   Content is capped at 1200px and starts on the left content edge; past that
   only the margins grow. Text keeps a readable line length inside it.

   UNITS: here 1rem = 10px (62.5% of the browser default), so 1.7rem = 17px.
   The argument cards and the Engine wheel keep their exact phone geometry and
   are enlarged as a whole by setting --u (see site.css, COMPOSITIONS).
   ========================================================================== */

:root {
  --maxw: 120rem;                                    /* widest content line */
  --margin: clamp(4rem, 6.25vw, 9.6rem);             /* side margin before the cap */
  --gutter: max(var(--margin), calc((100vw - var(--maxw)) / 2));   /* content edge */
  --content: calc(100vw - 2 * var(--gutter));        /* content width */
  --col-gap: clamp(1.6rem, 2.2vw, 3.2rem);           /* gap in the wheel and report rows */
  --sec: clamp(6.4rem, 8vw, 11.2rem);                /* section padding, top and bottom */
  --head: 8rem;                                      /* header height */

  /* The type scale. The page title is sized so the longest title, "Pressure
     Test 01: The Intake", still fits on one line; the heading never passes it. */
  --fs-title: clamp(3.2rem, calc(var(--content) / 15.8), 7.2rem);  --lh-title: 1.05;
  --fs-head: clamp(2.6rem, 2.9vw, 4.4rem);                         --lh-head: 1.15;
  --fs-lead: clamp(1.9rem, 1.65vw, 2.4rem);                        --lh-lead: 1.45;
  --fs-body: 1.6rem;                                               --lh-body: 1.75;
}

html { font-size: 62.5%; }
body { max-width: none; font-size: 1.7rem; }

/* Phone line breaks in running text are dropped; the wider measure wraps on its own. */
.body-copy br, .lead br, .home-quote br, .who-quote br, .engine-col p br { display: none; }
.body-copy br.keep { display: inline; }   /* the line breaks in names and contacts stay */
.body-copy, .lead, .stage-body { text-wrap: pretty; }
.home-quote, .who-quote { text-wrap: balance; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  height: 5.2rem; padding: 0 2.8rem; align-items: center;
  font-size: 1.5rem; line-height: 1.5rem; letter-spacing: 0.01em;
}

/* ---- Header --------------------------------------------------------------- */
.site-header { height: var(--head); }
.brand { top: 50%; transform: translateY(-39.4%); }   /* the logo's capitals on the bar's centre line */
.brand img { height: 2.1rem; }
.menu-toggle { top: calc((var(--head) - 4.4rem) / 2); }

/* ---- Menu overlay (tablet) ------------------------------------------------ */
.menu { left: 0; transform: none; max-width: none; padding: 0 var(--gutter) 6.4rem; --bar-h: var(--head); }
.menu-bar { height: var(--head); margin: 0 calc(-1 * var(--gutter)) 2.4rem; }
.menu-list a { padding: 2.2rem 0 2rem; }

/* ---- Footer --------------------------------------------------------------- */
.site-footer {
  height: auto; padding: clamp(5.6rem, 7vw, 9.6rem) var(--gutter) clamp(4rem, 5vw, 6.4rem);
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: var(--col-gap);
}
.footer-link { margin-top: 0; }
.footer-copy {
  grid-column: 1 / -1; margin-top: clamp(4rem, 5vw, 6.4rem); padding-top: 2.4rem;
  border-top: 0.1rem solid rgba(255, 255, 255, 0.14); font-size: 1.3rem; line-height: 1.8rem;
}

/* =============================================================================
   PAGE LAYOUT: one column
   ========================================================================== */
.flow { padding: var(--sec) var(--gutter); }
.flow > * + * { margin-top: 2rem; }
.flow > h1 + *, .flow > .h2 + * { margin-top: 2.8rem; }
.flow > * + .btn { margin-top: 4rem; }
.flow > .btn + * { margin-top: 3.2rem; }
/* Line lengths: headings and leads a little wider than the body. */
.flow > .h2 { max-width: 22em; }
.flow > .lead { max-width: 30em; }
.flow > .body-copy { max-width: 36em; }
/* The sections that open a page sit closer to the header. */
.hero, .hiw-head, .val-hero, .who-hero { padding-top: clamp(4.8rem, 6vw, 8rem); }
.val-hero { padding-bottom: clamp(4.8rem, 6vw, 8rem); }

/* =============================================================================
   HOME
   ========================================================================== */
.hero { min-height: calc(var(--screen) - var(--head)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }   /* the first screen, content centred */
.flow > .hero-lede { margin-top: 4rem; }
.flow > .hero-title { max-width: 16em; }
.flow > .ninety + * { margin-top: 4rem; }

/* Argument cards: same swipe rail, cards enlarged a little on bigger tablets. */
.argument { padding: var(--sec) 0; --u: clamp(1rem, 1.25vw, 1.28rem); }
.cards { gap: 2rem; }

/* Engine: the three black columns across the content width. */
.engine {
  --eg: clamp(0.7rem, 0.9vw, 1.2rem);                /* white gap */
  --cp: clamp(2rem, 2.6vw, 3.6rem);                  /* column padding */
  margin-inline: 0;
  grid-template-columns: 12.3fr 13.2fr 12.1fr; column-gap: var(--eg);
}
.flow > .h2 + .engine, .flow > .engine + * { margin-top: 4rem; }
.engine-col { padding: var(--cp) var(--cp) clamp(2.8rem, 3vw, 4.4rem); }
.engine-col h3 { margin-top: clamp(8rem, 11vw, 14rem); white-space: normal; }
.engine-col p { margin-top: 1.6rem; max-width: 20em; white-space: normal; font-size: var(--fs-body); line-height: 1.65; }
/* Chrome on Windows smooths type with coloured sub-pixels, which shows as red
   and blue fringes on white numerals over black. Giving each numeral its own
   layer makes it draw with plain grey smoothing: clean edges. No effect on
   Macs or phones, which never use the coloured kind. */
.engine-num { will-change: transform; }

/* Validation (home) */
.flow > .hv-quote { margin-top: 5.6rem; max-width: 72rem; }
.quote-by { margin-top: 2.4rem; gap: 1.6rem; }
.abf-badge { width: 5.2rem; height: 5.2rem; }

/* =============================================================================
   HOW IT WORKS
   ========================================================================== */
/* The pinned frame sits under the header; the wheel block is enlarged as one
   piece to fit the room left under the title, and centred. */
.engine-scroll { --pin-top: var(--head); }
.engine-pin > .hiw-head { padding-bottom: clamp(2.4rem, 3vw, 4rem); }
.engine-frame { --u: min(calc((100cqw - 2 * var(--gutter)) / 32.76), calc(100cqh / 49.762), 1.8rem); }
.wheel { left: calc(50% - 16.38 * var(--u)); }

/* =============================================================================
   VALIDATION: the report, bigger pages, the next one showing at the edge
   ========================================================================== */
.flow > .doc { margin-top: 4rem; }
.doc-rail { gap: 2rem; }
.doc-page { flex-basis: min(76vw, 84rem); border-width: 0.2rem; border-radius: 0.5rem; }
.js .doc-bar { margin: 1.2rem calc(var(--gutter) - 1.3rem) 0 var(--gutter); }
.doc-count { font-size: 1.2rem; line-height: 1.6rem; letter-spacing: 0.19em; }

/* =============================================================================
   WHO WE ARE
   ========================================================================== */
/* The opening section runs wider than the other text: bigger portraits, and
   the introduction as wide as the two of them (about two thirds of the page). */
.founders { --ph: clamp(16rem, 21vw, 29rem); gap: clamp(2.4rem, 4vw, 6rem); }
.who-hero > .body-copy { max-width: 64rem; }
.flow > .founders, .flow > .founders + * { margin-top: 4rem; }
.flow > .partner { margin-top: 4rem; }
.partner-mark { width: clamp(16rem, 18vw, 22rem); height: clamp(16rem, 18vw, 22rem); }
.flow > .who-quote { max-width: 18em; }

/* =============================================================================
   THANK YOU
   ========================================================================== */
.ty-top { padding-top: calc(var(--head) + clamp(4.8rem, 6vw, 8rem)); padding-bottom: clamp(4.8rem, 6vw, 8rem); }
.flow > .logo-wall {
  position: static; height: auto; margin: 5.6rem 0 0;
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: center;
  column-gap: clamp(4rem, 7vw, 9.6rem); row-gap: 4rem;
}
.logo-wall img, .logo-wall .l-abf, .logo-wall .l-badd, .logo-wall .l-pwnc,
.logo-wall .l-wheel, .logo-wall .l-teal, .logo-wall .l-post { position: static; width: auto; height: 7.4rem; }
.logo-wall .l-wheel, .logo-wall .l-teal, .logo-wall .l-post { height: 6.9rem; }


/* =============================================================================
   DESKTOP, 1100px and up
   The header is fixed, shows the navigation bar and takes the colour of the
   section beneath it (site.js).
   ========================================================================== */
@media (min-width: 1100px) {
  :root {
    --head: clamp(7.2rem, 9.8vh, 8.8rem);    /* fixed header */
    --page-pad: clamp(2.4rem, 6vh, 8rem);    /* room around the pinned wheel */
    --avail: calc(var(--screen) - var(--head) - 2 * var(--page-pad));
    --fs-body: 1.7rem;
    --foot: clamp(9.6rem, 13.3vh, 12rem);    /* slim footer */
  }
  body { padding-top: var(--head); }   /* the fixed header sits over this */

  /* ---- Sections: each one a full screen under the header -------------------- */
  /* As in Marli's desktop build, every section fills the screen below the
     header, its content centred. The final notes only take this away from the
     sections that open a page (the titles), so those stay as tall as their
     content, and the section after a title starts at the top, so its first
     paragraph is on the first screen. "Who and How" on Validation is too short
     to fill a screen, so it is as tall as its content and the report's first
     line shows on the first screen too. The last section shares the screen
     with the footer. */
  main > .flow:where(:not(.hiw-head, .val-hero, .who-hero, .ty-top, .who-how, .hiw-foot)), .argument {
    min-height: calc(var(--screen) - var(--head));
    display: flex; flex-direction: column; justify-content: center;
  }
  main > .flow:last-child:where(:not(.hiw-head, .val-hero, .who-hero, .ty-top, .hiw-foot)) { min-height: calc(var(--screen) - var(--head) - var(--foot)); }
  .val-hero + .flow, .ty-top + .flow { justify-content: flex-start; }
  /* Validation: less room around "Who and How", so the report's first line is on the first screen. */
  .who-how { padding-block: clamp(4.8rem, 7vh, 8rem); }
  .who-how + .val-doc { padding-top: clamp(4.8rem, 7vh, 8rem); }
  /* Who We Are opens on exactly one screen: the title, the portraits and the
     introduction, with room left under the text. The portraits are sized to
     the screen height so it all fits. */
  .who-hero { min-height: calc(var(--screen) - var(--head)); padding-top: clamp(3.2rem, 6vh, 8rem); padding-bottom: clamp(2.4rem, 4vh, 4.8rem); }
  .who-hero .founders { --ph: clamp(15rem, calc(var(--screen) - var(--head) - 57rem), min(21vw, 26rem)); }   /* what the screen leaves after the text, about 57rem */
  .who-hero > .founders, .who-hero > .founders + * { margin-top: clamp(2rem, 3.4vh, 4rem); }
  /* Who We Are: the technology partner and the closing quote are short, so
     together (with the footer) they fill the last screen; the quote takes up
     whatever room is left, centred in it. */
  .who-end { display: flex; flex-direction: column; min-height: calc(var(--screen) - var(--head) - var(--foot)); }
  .who-end > .flow { min-height: 0; padding-block: clamp(3.2rem, 5.5vh, 8rem); }
  .who-end > .who-close { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .who-partner .partner-mark { width: clamp(12rem, 18vh, 22rem); height: clamp(12rem, 18vh, 22rem); }
  /* How It Works ends on one line, so its section is only as tall as the line needs. */
  .hiw-foot { padding-block: clamp(4.8rem, 6vw, 8rem); }

  /* ---- Header: fixed, with the navigation bar ------------------------------ */
  .site-header, .site-header--dark {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--head-bg, var(--paper)); color: var(--black);
    border-bottom: 0.1rem solid var(--rule);
    --nav-dim: var(--text-grey);
  }
  .site-header.is-dark, html:not(.js) .site-header--dark {
    color: var(--paper); border-bottom-color: rgba(255, 255, 255, 0.14);
    --nav-dim: rgba(255, 255, 255, 0.7);
  }
  html:not(.js) .site-header--dark { background: var(--black); }
  .brand img { height: 2.3rem; }
  .site-header.is-dark .brand img, html:not(.js) .site-header--dark .brand img { filter: invert(1); }
  .site-header:not(.is-dark) .brand img { filter: none; }
  .site-header .menu-toggle { display: none; }
  .site-nav {
    position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: clamp(2.8rem, 3vw, 4.4rem);
  }
  .site-nav a { position: relative; font-weight: 600; font-size: 1.5rem; line-height: 2rem; color: var(--nav-dim); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: inherit; }
  /* The current page is underlined; the others are underlined on hover. */
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.7rem; height: 0.2rem; background: currentColor; visibility: hidden; }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { visibility: visible; }

  /* ---- Thank You: the header is over the black opening ---------------------- */
  .ty-top { padding-top: clamp(4.8rem, 6vw, 8rem); }

  /* ---- Footer: one slim row ------------------------------------------------- */
  .site-footer {
    height: var(--foot); padding: 0 var(--gutter);
    grid-template-columns: 1fr auto auto; align-items: center; column-gap: clamp(3.2rem, 4vw, 6.4rem);
  }
  .footer-copy { grid-column: auto; margin: 0; padding: 0; border-top: 0; }

  /* ---- Argument cards: never taller than the screen -------------------------- */
  .argument { --u: min(clamp(1rem, 1.25vw, 1.28rem), calc(var(--avail) / 35.25)); }

  /* ---- How It Works: the wheel, as built ------------------------------------ */
  /* The stage copy beside the wheel, under the title, the wheel as tall as the
     room left on the screen allows. */
  .engine-frame {
    --u: min(calc(100cqh / 32.76), 1.7rem);
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center;
    padding: 0 var(--gutter) clamp(2.4rem, 4vh, 4.8rem);
  }
  .stages { grid-column: 1 / span 5; grid-row: 1; height: min(30rem, 100cqh); }
  .stage { top: 50%; transform: translateY(-50%); }
  .stage-title { margin: 0; font-size: clamp(4.8rem, 4.6vw, 6.4rem); line-height: 1.05; letter-spacing: -0.012em; }
  .stage-sub { margin: 2rem 0 0; font-size: clamp(2rem, 1.8vw, 2.4rem); line-height: 1.4; }
  .stage-body { margin: 1.6rem 0 0; max-width: 24em; font-size: 1.7rem; line-height: 3rem; }
  .wheel { position: relative; left: auto; top: auto; grid-column: 7 / -1; grid-row: 1; justify-self: end; }

  /* ---- Validation: one page of the report at a time, sized to the screen ------ */
  .flow > .doc { margin-inline: 0; width: min(100%, calc((var(--screen) - var(--head) - 16rem) * 4 / 3)); }
  .doc-rail { padding: 0; gap: var(--col-gap); scroll-padding-inline: 0; }
  .doc-page { flex: 0 0 100%; }
  .js .doc-bar { margin: 0.8rem -1.3rem 0 0; }
}

/* Four argument cards fit side by side from here: no swiping needed. */
@media (min-width: 1200px) {
  .argument {   /* as wide as the content allows, and never taller than the screen */
    --card-gap: clamp(2rem, 2vw, 3.2rem);
    --u: min(calc((100vw - 2 * var(--gutter) - 3 * var(--card-gap)) / 112.8), calc(var(--avail) / 35.25));
  }
  .cards {
    display: grid; grid-template-columns: repeat(4, calc(28.2 * var(--u))); justify-content: space-between;
    gap: var(--card-gap); overflow: visible; cursor: auto;
  }
}