/* ============================================================================
   contexits.com — built to plan/web/SITES-DESIGN-DIRECTION-2026-09-13.md §2
   and the signed-off artboards Main.dc.html (1440) / ContexitsPhone.dc.html (390).

   Every colour below is a named role from §1.3. The logo's orange and blue appear
   nowhere in this file: a logo is an artefact, not a palette (C-1b).
   Radius is 0 everywhere. Nothing is translucent except the hero legibility veil.
   ========================================================================== */

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

:root {
  /* Surfaces */
  --paper:      #F5EFE4;
  --band:       #ECE3D2;
  --dark:       #ECE3D2;   /* 10-17 pm: the former dark ground is now the warm band (founder: lighter, like the Letter preview) */
  --hero-ground:#0C0B0A;

  /* Ink on light */
  --ink:        #1B2130;
  --body:       #565C68;
  --brass:      #9C3F0C;
  --meta:       #6A6459;   /* 5.20 paper / 4.76 band */
  --addr:       #3C434A;
  --rule:       #D6C9B2;

  /* Ink on dark */
  --dark-body:  #565C68;   /* inks for the former dark ground, now resolved against the band */
  --dark-label: #9C3F0C;
  --dark-meta:  #6A6459;
  --rule-dark:  #D6C9B2;

  /* Ink over the photograph — judged from rendered pixels, not from CSS (C-9) */
  --hero-ink:   #FAF7F1;
  --hero-sub:   #DCD5C9;
  --hero-eye:   #E3C48E;
  --hero-nav:   #EFE7D8;
  --hero-quiet: #C6BCAC;

  /* Rhythm. Fluid between the 390 artboard and the 1440 artboard. */
  /* The page margin is the artboard's: 96 at 1440, 24 at 390. It was 160 at
     1440, which is a different page — every label, headline and paragraph sat
     64px further in than the drawing puts them, and the imaged sections lost
     that width twice. One ramp now serves the hero and the sections, because
     on the artboard they are the same margin. */
  --pad:        clamp(24px, -2.74px + 6.857vw, 96px);
  --pad-hero:   var(--pad);
  --sec-top:    clamp(46px, 21.49px + 6.286vw, 112px);
  /* The photograph column and the gutter beside it: 540 and 104 at 1440. */
  --col-photo:  37.5%;
  --gap-photo:  clamp(28px, 7.222vw, 104px);
  /* The word marker column in "What we bring": 420 and 64 at 1440. */
  --col-word:   clamp(150px, 29.167vw, 420px);
  --gap-word:   clamp(20px, 4.444vw, 64px);
  --wrap:       1440px;

  /* The desktop grid, in proportions rather than in pixels. The artboard's
     160 / 90 / 100 / 60 are what these resolve to at exactly 1440; below that
     they shrink with the page. Pinning them at 1440's pixel values clipped the
     contact headline into an 82 px column at 1024 — a fixed column inside a
     fluid page is the same defect as a min-content floor inside a flex row. */
  --col-label:  clamp(96px, 11.111vw, 160px);
  --gap-label:  clamp(32px, 6.250vw, 90px);
  --col-num:    clamp(56px, 6.944vw, 100px);
  --gap-row:    clamp(24px, 4.167vw, 60px);
  --gap-contact: clamp(48px, 6.944vw, 100px);

  --fam-serif:  Newsreader, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fam-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fam-serif);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

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

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--ink); }

/* A-7: a visible ring on everything focusable. outline:none with no replacement
   is a defect, not a style. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.site-header--over :focus-visible,
.hero :focus-visible {
  outline-color: var(--paper);
}
.on-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--brass);
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* The house device: a mono label, uppercase, letter-spaced, above the headline.
   10–11 px, never a sentence the reader has to read (A-16). */
.label {
  font-family: var(--fam-mono);
  font-size: clamp(10px, 9.63px + 0.095vw, 11px);
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}
.on-dark .label { color: var(--dark-label); }

h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: pretty; }
p { margin: 0; }

/* ============================== HERO =====================================
   The kept photograph: full-bleed, cover, 100vh, in its position (C-1).
   The copy sits in the TOP band on desktop because that is where this
   photograph is already dark — mean relative luminance 0.0325 up there against
   0.1887 over the table (C-1a). The veil is vertical and top-weighted and
   clears completely by 76 % of the height, so the six faces and the marina
   behind them are not covered (C-6).
   ========================================================================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--hero-ground);
}
@supports (height: 100svh) { .hero { height: 100svh; } }

.hero picture { position: absolute; inset: 0; }

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.hero__veil {
  position: absolute;
  inset: 0;
  /* Phone: the copy sits at the bottom, so the veil is weighted at both ends
     with one clear window at 48 % — the artboard's own gradient, restored.
     A taller copy block forced that window up to 34 %, which read well and
     measured better than the artboard on both axes, but it put the further of
     the two figures into shadow. The founder keeps this photograph for the
     people in it, so the faces win and the fifth copy element goes instead
     (team-lead ruling, 2026-09-13, overriding the parity ruling where they
     conflict). Tap-to-call now lives in the contact block, where it is still a
     44 px tel: target. */
  /* Top-weighted and clear by 76 %, on the phone as well as the desktop.
     It used to be weighted at both ends because the phone copy sat at the
     bottom. The copy is at the top now (see .hero__copy), and leaving the old
     gradient darkened the lower two thirds — the faces and the marina, which are
     the founder's reason for keeping this photograph. The veil follows the copy;
     it has no other job.

     It clears by 64 % here rather than the desktop's 76 %: the phone crop is a
     tall slice of a landscape photograph, so the people sit lower in frame than
     they do at 1440, and 76 % kept them under cover. The copy ends at about
     54 % of the height, so 64 % is the earliest the veil can clear without
     taking cover away from the last line of type. */
  /* 10-17 pm, founder: lighten the hero like the after-hours preview. Half the former veil. */
  background: linear-gradient(180deg,
    rgba(12,11,10,0.46) 0%,
    rgba(12,11,10,0.40) 42%,
    rgba(12,11,10,0.24) 50%,
    rgba(12,11,10,0.06) 58%,
    rgba(12,11,10,0) 64%);

}

.hero__copy {
  position: absolute;
  left: var(--pad-hero);
  right: var(--pad-hero);
  /* TOP-anchored on the phone, not bottom-anchored, and this is measured rather
     than preferred.

     The eyebrow failed four times in one day, at 2.05, 4.50, 3.99 and 4.068,
     each time because a copy edit changed the block's height and moved its first
     line to a new part of a lamp reflection. Nudging the offset fixed the
     instance and never the class.

     So the photograph was swept: for every y, does this string clear 4.5 across
     the whole plus-or-minus-28px window that an ordinary copy edit can displace
     it by? Two bands qualify — y 0..221 (worst case 5.186) and y 540..830 (worst
     case 4.767) — and everything between them is the reflection. A
     bottom-anchored block puts the eyebrow at 506, which is in the gap, and it
     cannot be pushed into the lower band because the block is already as low as
     the viewport allows. The upper band is the only reachable one, so the copy
     goes to the top.

     It also agrees with the desktop treatment and with §2.4's reason for it: the
     top of this photograph is where it is already dark. And it uncovers the lower
     two thirds, where the faces are, which is why the founder keeps the image. */
  top: 110px;
  bottom: auto;
  z-index: 2;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero__headline {
  font-size: clamp(46px, 34.86px + 2.857vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: var(--hero-ink);
}

.hero__sub {
  font-size: clamp(18px, 16.88px + 0.287vw, 21px);   /* overshoots both ends so 390 lands on 18 and 1440 on 21 */
  line-height: 1.55;
  color: var(--hero-sub);
  max-width: 580px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}

/* The page's one primary action (§5.4). Cream on the photograph: it paints its
   own opaque fill, so the CSS sweep judges it, not the photo sampler. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 30px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fam-mono);
  font-size: clamp(12px, 11.63px + 0.095vw, 13px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn:hover { background: #FFFDF8; color: var(--ink); }
.btn svg { flex: none; }

/* ============================== HEADER =================================== */

.site-header {
  z-index: 3;
  width: 100%;
}
.site-header--over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.site-header--solid {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-hero);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; color: inherit; flex: none; }
.brand:hover { color: inherit; }
.brand__mark { width: 30px; height: 30px; }
.brand__word {
  font-family: var(--fam-mono);
  font-size: clamp(13px, 12.26px + 0.190vw, 15px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper);
}
.site-header--solid .brand__word { color: var(--ink); }

.site-header__cta {
  display: none;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--fam-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-nav);
}
.site-header__cta:hover { color: #FFFFFF; }
.site-header--solid .site-header__cta { color: var(--ink); display: inline-flex; }


/* ============================== THE LEDGER ==============================
   Not three identical cards: a ledger. Full-bleed rows on hairlines, and row 01
   is deliberately set larger than 02 and 03 (§1.6, §2.2 §3).
   ======================================================================== */

/* padding-block, never the `padding` shorthand: .ledger also carries .wrap, and
   the shorthand zeroed the page margin the wrap had just set. The rows went
   edge to edge and the body text ran off the right of the frame. */
.ledger { list-style: none; margin: 6px 0 0; padding-block: 0; }

.ledger__row {
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: clamp(24px, 16.57px + 1.905vw, 44px);
}
.ledger__row:last-child { border-bottom: 1px solid var(--rule); }

.ledger__num {
  font-family: var(--fam-mono);
  font-size: clamp(12px, 11.63px + 0.095vw, 13px);
  letter-spacing: 0.08em;
  color: var(--brass);
}
.ledger__body {
  font-size: clamp(17px, 15.88px + 0.287vw, 20px);   /* same: 17 at 390, 20 at 1440, both by the clamp */
  line-height: 1.62;
  color: var(--body);
}
.ledger__row--lead .ledger__body { font-size: clamp(16px, 14.89px + 0.286vw, 19px); }
.sig {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 8px;
  font-family: var(--fam-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.sig__rule { width: 34px; height: 1px; background: var(--brass); flex: none; }
.sig__name { color: var(--ink); }
.sig__role { color: var(--meta); }

/* ============================== CONTACT ================================
   A block, not a form. Nothing is collected, so there is nothing to consent
   to (C-5).
   ======================================================================= */

.contact {
  background: var(--paper);
  padding-block: var(--sec-top);
}
.contact__inner { display: flex; flex-direction: column; gap: 26px; }
.contact__stack { display: flex; flex-direction: column; gap: 26px; }
.contact__headline {
  font-size: clamp(36px, 28.57px + 1.905vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.contact__details { margin: 0; padding-top: 4px; display: flex; flex-direction: column; gap: 20px; }
.contact__details dt {
  font-family: var(--fam-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 6px;
}
.contact__details dd { margin: 0; }

.contact__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  /* 0.572, not 0.571: at 1440 the linear term must OVERSHOOT the ceiling so the
     clamp's max takes over and the size lands on the artboard's 28 exactly.
     19.77 + 0.571vw resolves to 27.99 there, which is a hundredth of a pixel
     and also a drift the artboard check reports every run. */
  font-size: clamp(22px, 19.77px + 0.572vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  border-bottom: 1px solid var(--brass);
}
.contact__link:hover { color: var(--brass); }
.contact__post {
  font-size: clamp(19px, 17.89px + 0.286vw, 22px);
  line-height: 1.5;
  color: var(--addr);
}

/* ============================== FOOTER ================================= */

.site-footer {
  background: var(--dark);
  color: var(--dark-meta);
  padding-block: clamp(40px, 34.06px + 1.524vw, 56px) clamp(44px, 38.06px + 1.524vw, 60px);
}
.site-footer__inner { display: flex; flex-direction: column; gap: 20px; }
.site-footer .brand__mark { width: 28px; height: 28px; }
.site-footer .brand__word {
  color: var(--ink);
  font-size: clamp(13px, 12.63px + 0.095vw, 14px);
}
.site-footer__place {
  font-family: var(--fam-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.site-footer__legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--fam-mono);
  font-size: clamp(11px, 10.63px + 0.095vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-meta);
}
.site-footer__legal a:hover { color: var(--ink); }
.site-footer__copy {
  font-family: var(--fam-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ============================== LEGAL PAGES ============================
   /terms and /privacy are kept (§2.1). They render in the site's own paper
   and type instead of the page builder's.
   ======================================================================= */

.page-head { padding-block: clamp(48px, 26.4px + 5.54vw, 106px) 0; }
.page-head h1 {
  font-size: clamp(34px, 27.31px + 1.714vw, 52px);
  line-height: 1.13;
  letter-spacing: -0.02em;
  max-width: 900px;
}
.page-body {
  padding-block: 28px clamp(56px, 28.49px + 7.048vw, 122px);
  max-width: 760px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--body);
}
.page-body h2 { font-size: 30px; line-height: 1.2; color: var(--ink); margin: 40px 0 12px; }
.page-body h3 { font-size: 23px; line-height: 1.25; color: var(--ink); margin: 32px 0 10px; }
.page-body p { margin: 0 0 18px; }
.page-body ul, .page-body ol { margin: 0 0 18px; padding-left: 22px; }
.page-body li { margin-bottom: 8px; }
.page-body a { border-bottom: 1px solid var(--brass); }

/* ============================== DESKTOP ================================
   The 1440 artboard. Grid, never a row of flex-grow: 1 — an equal-width column
   row floors each column at its min-content width and overflows the frame (A-5).
   ======================================================================= */

@media (min-width: 900px) {

  .site-header__inner { min-height: 104px; }
  .brand { gap: 14px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__word { letter-spacing: 0.30em; }
  .site-header__cta { display: inline-flex; }

  /* Copy moves to the top band and the veil follows it there. */
  .hero__img { object-position: center; }
  .hero__veil {
    background: linear-gradient(180deg,
      rgba(12,11,10,0.42) 0%,
      rgba(12,11,10,0.36) 46%,
      rgba(12,11,10,0.22) 58%,
      rgba(12,11,10,0.06) 68%,
      rgba(12,11,10,0) 76%);
  }
  .hero__copy {
    /* 210 is the artboard's, not a preference. The hero block was at 150,
       which put every line 60px above where the drawing puts it. */
    top: 210px;
    bottom: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, var(--wrap));
    padding-inline: var(--pad-hero);
  }
  .hero__inner { width: 700px; max-width: 100%; gap: 26px; }   /* the artboard's 700 and 26 */
  .hero__actions { flex-direction: row; align-items: center; gap: 26px; margin-top: 8px; }
  .btn { display: inline-flex; min-height: 56px; align-self: flex-start; }
  .thesis .label { grid-column: 1; grid-row: 1; padding-top: 20px; }

  .ledger__row {
    display: grid;
    grid-template-columns: var(--col-num) minmax(0, 400fr) minmax(0, 500fr);
    gap: var(--gap-row);
    align-items: start;
  }
  .ledger__num { padding-top: 10px; }
  .ledger__row--lead .ledger__num { padding-top: 14px; }
  .context__inner .label { padding-top: 18px; }
  .who .label { grid-column: 1; grid-row: 1; padding-top: 18px; }
  .sig { gap: 18px; padding-top: 14px; font-size: 13px; letter-spacing: 0.10em; }
  .sig__rule { width: 46px; }

  /* Contact puts its label ABOVE, full width, the way the artboard does — not
     in a 160px side column, which left a third of the section empty and pushed
     the heading into the right half of the page. */
  .contact__inner { display: flex; flex-direction: column; gap: clamp(24px, 3.056vw, 44px); }
  .contact__details { gap: 26px; padding-top: 0; }
}

/* THE THREE DETAILS GO INTO A ROW AS SOON AS THEY FIT, which is well before the
   headline can sit beside them. Stacking them until 1200 left the section 76.5%
   empty at 1024 and 74% at 900 — measured, by measure-empty-width.mjs, and that
   is the dead-lane shape the founder rejected, reached by a different route:
   not a narrow paragraph in a wide box, but three short values in a column with
   two thirds of the section beside them. An email address, a phone number and a
   city are short by nature; the layout has to put them side by side rather than
   wait for a breakpoint chosen for the headline. */
@media (min-width: 768px) {
  .contact__details { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: clamp(28px, 4vw, 72px); }
}

/* The headline joins that row only once both halves can hold their own type. */
@media (min-width: 1024px) {
  /* Headline left, the three details right, baselines aligned — the artboard's
     row. It waits for 1200 because below that the three details cannot hold
     their own type side by side and the phone's stack is the better layout.

     flex-direction: row is not optional here. Without it the base rule's
     column direction survived, align-items: flex-end right-aligned both
     children, and the section rendered as a heading pinned to the right margin
     with the details stacked beneath it — a layout nobody drew, produced by an
     override that changed everything about the row except that it was a row. */
  .contact__stack { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: clamp(40px, 5.556vw, 80px); }
  .contact__details dt { margin-bottom: 7px; }

  .site-footer__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .site-footer__brandcol { display: flex; flex-direction: column; gap: 12px; }
  .site-footer__legal { padding-top: 0; gap: 14px; }
}

/* The marker column takes a word instead of a numeral in "What we bring". Same
   column, same grid: a word where a numeral goes is the row pattern's own
   variation, which is what keeps the two row sections one family. */
/* "Capital", "Expertise", "Experience" are display type on the artboard, not
   mono markers: 46px serif at 1440, 30px at 390, in the section's own ink. The
   first build set them as 11px brass mono labels, which is the LABEL role
   wearing the headline's job — the row read as a caption with a paragraph
   beside it rather than as a heading and its prose. */
.ledger--word .ledger__num {
  font-family: var(--fam-serif);
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 24.06px + 1.524vw, 46px);
  line-height: 1.08;
  color: var(--ink);
}
.on-dark .ledger--word .ledger__num { color: var(--ink); }
.ledger__prose { display: flex; flex-direction: column; gap: 18px; }

/* Header navigation: two anchors and the action. */
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.2vw, 22px); min-width: 0; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--fam-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-nav);
}
.site-nav a:hover { color: #FFFFFF; }
.site-header--solid .site-nav a { color: var(--ink); }
/* Specificity: `.site-nav a` is class+type and out-ranks a bare class, so the
   plain `.site-nav__link { display: none }` never applied and all three items
   showed at 390, where they wrap onto a second line and collide with the copy.
   Matching the selector's own shape is the fix, not !important. */
/* The phone artboard's header is the brand and nothing else, so the whole nav
   goes — not two of its three items. Nothing is lost: the hero's "Get in touch"
   button is in the first screen at every width, and the contact block carries a
   44px tel: target. */
.site-nav { display: none; }
@media (min-width: 700px) { .site-nav { display: flex; } }

@media (min-width: 900px) {
  .section-head .label { padding-bottom: 12px; }
  /* Bounded measure. Without this the prose column takes the whole remaining
     width and runs to about a hundred characters a line, against the 740 px the
     rest of the page's body copy is held to. */
  .ledger--word .ledger__row { grid-template-columns: var(--col-word) minmax(0, 1fr); gap: var(--gap-word); align-items: baseline; }
  .ledger--word .ledger__prose { max-width: none; }
  .ledger--word .ledger__num { padding-top: 0; }
  .ledger__prose { gap: 20px; }
}

/* ============================== MOTION ================================
   One 120 ms opacity settle on above-the-fold content, once. Nothing loops
   (A-9). The settle only runs when the script has confirmed the fonts are
   ready, so it is never spent on unstyled text; without the script the copy
   is simply there.
   ====================================================================== */

.js .hero__copy,
.js .site-header--over .site-header__inner { opacity: 0; }

.fonts-ready .hero__copy,
.fonts-ready .site-header--over .site-header__inner {
  animation: settle 180ms ease-out both;
}

@keyframes settle { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {          /* A-8 */
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* Print: the letter, on paper. */
@media print {
  .hero { height: auto; min-height: 0; }
  .hero__veil, .site-header__cta, .btn { display: none; }
  body { background: #FFFFFF; }
}

/* ============================== SECTION, v21 ============================
   A ground, a label, a headline, and an OPTIONAL photograph column.

   The column is conditional in the template, not hidden here: with no
   photograph there is no figure element at all, so the grid is one column and
   the type runs full measure. Nothing is reserved and nothing is drawn — a
   reserved empty box is placeholder art with the art taken out.

   Both states ship and both are measured. The collapsed page is not a degraded
   page, it is the page until the founder's photographs exist.
   ======================================================================= */

.sec { padding-block: var(--sec-top); }
.sec--dark { background: var(--dark); color: var(--ink); }
.sec--dark.sec--panel { background: var(--paper); }
.sec--light { background: var(--paper); }
/* The artboard sets Exits on the warmer paper so two light sections in a row
   are two grounds rather than one long one. It is the same token the old
   full-bleed band used; no new colour enters the palette. */
.sec--warm  { background: var(--band); }

.sec__inner { display: flex; flex-direction: column; gap: 22px; }
.sec__copy { display: flex; flex-direction: column; gap: 22px; }
.sec__headline {
  font-size: clamp(36px, 28.57px + 1.905vw, 56px);
  line-height: 1.13;
  letter-spacing: -0.02em;
  max-width: 800px;
}
.sec__body {
  font-size: clamp(17px, 15.51px + 0.381vw, 21px);
  line-height: 1.64;
  color: var(--body);
  max-width: 740px;
}
.sec--dark .sec__body { color: var(--dark-body); }

/* Three phrases carry emphasis by WEIGHT and by ink, which is the artboard's
   device and the only one on the page: no colour accent, no underline, no
   pull-quote. The ink is the section's own full-strength ink, so the emphasis
   is the body text at its brightest rather than a fourth colour. */
.em { font-weight: 600; color: var(--ink); }
.on-dark .em { color: var(--ink); }

.sec__figure { margin: 0; }
.sec__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 900px) {
  /* AN IMAGED SECTION IS A FULL-BLEED ROW, which is what the artboard draws:
     the photograph runs edge to edge on its side and stretches the section's
     whole height, and the copy takes the rest with the page margin outside it
     and a gutter between.

     The first build made it a grid inside the page margins and gave the IMAGE
     the larger column — 580 against the copy's 420. That is the artboard
     inverted: there the copy is 900 and the photograph 540. The headline broke
     over two lines in a lane narrower than the picture beside it, which reads
     as a caption next to an illustration rather than a section with a
     photograph. Proportions here are the artboard's, as percentages, so they
     resolve to 540 and 900 at exactly 1440 and shrink with the page. */
  .sec--imaged { padding-block: 0; }
  .sec--imaged .sec__inner {
    max-width: none;
    padding-inline: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
  .sec--imaged .sec__figure { flex: 0 0 var(--col-photo); min-width: 0; }
  .sec--imaged .sec__figure img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .sec--imaged .sec__copy {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding-block: var(--sec-top);
  }
  .sec--imaged .sec__headline,
  .sec--imaged .sec__body { max-width: 700px; }
  .sec--img-left  .sec__copy { padding-left: var(--gap-photo); padding-right: var(--pad); }
  .sec--img-right .sec__figure { order: 2; }
  .sec--img-right .sec__copy { padding-right: var(--gap-photo); padding-left: var(--pad); }
  /* COLLAPSE-AND-WIDE, and this is the condition that makes the collapse
     survivable rather than a second-best.

     A section that loses its photograph must RECOVER the width, not return to
     the old document measure. Collapsed-and-narrow puts a 740 px paragraph in a
     1120 px content box and leaves a dead right third — which is the 4.2.0 page
     the founder rejected, rebuilt by accident. Showing him that again would be
     worse than showing him holes.

     So the statement type carries the section: the headline runs the full
     content width instead of its 800 px cap, and the body takes a wider measure
     than the two-column version needs. The page is full and honest even though
     it is not yet the intended one. (design-director ruling, 2026-09-13;
     empty-width is measured and reported for both states.) */
  .sec:not(.sec--imaged) .sec__headline { max-width: none; }
  .sec:not(.sec--imaged) .sec__body { max-width: 980px; }
}

/* ============================== INK ON A DARK GROUND ====================
   The row pattern was written for paper and v24 puts it on the dark band and
   the dark panel for the first time. Its inks came with it: the brass marker,
   the body grey, the signature's ink-black name. On #14171A they measure 3.05,
   2.31 and 1.00 — eighteen failures in one section pair, and the signature was
   black on black.

   This is the defect §6.4 of the direction names by name: an ink specified for
   one surface and reused on another without re-measuring the surface that
   decides it. The palette already has the dark-ground inks; nothing here is a
   new colour, it is the same roles resolved against the ground they sit on.
   ======================================================================= */

.on-dark .ledger__row { border-color: var(--rule-dark); }
.on-dark .ledger__num { color: var(--dark-label); }   /* 7.71 on #14171A */
.on-dark .ledger__body { color: var(--dark-body); }   /* 7.18 */
.on-dark .sig__rule { background: var(--dark-label); }
.on-dark .sig__name { color: var(--ink); }
.on-dark .sig__role { color: var(--dark-meta); }      /* 4.92 */

/* ============================== LOWER PAGE, 2026-10-18 ===================
   Eight sections on one grid language: label + headline, columns, hairlines.
   Paper / band / one navy band with cream type. Mobile first, grids from 900. */
.lp { padding-block: clamp(56px, 40px + 2.4vw, 96px); }
.lp--paper { background: var(--paper); }
.lp--band { background: var(--band); }
.lp--navy { background: #141B2B; color: #F5EFE4; }
.lp--navy .label { color: #E3C48E; }
.lp--navy .lp__body, .lp--navy .lp__lede { color: #CBC3B5; }
.lp--navy .lp__h2, .lp--navy .lp__h3, .lp--navy .lp__quote, .lp--navy .sig__name { color: #F5EFE4; }
.lp--navy .sig__role { color: #CBC3B5; }
.lp--navy .sig__rule { background: #E3C48E; }
.lp--flush { padding-bottom: 0; }
.lp__h2 { font-size: clamp(32px, 26px + 1.6vw, 50px); line-height: 1.1; letter-spacing: -0.02em; margin: 10px 0 0; max-width: 14em; }
.lp__h3 { font-size: clamp(20px, 18px + 0.5vw, 24px); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); }
.lp__lede { font-size: clamp(18px, 16.5px + 0.45vw, 22px); line-height: 1.55; color: var(--addr); max-width: 34em; margin: 0 0 22px; }
.lp__body { font-size: 17px; line-height: 1.62; color: var(--body); max-width: 36em; margin: 0; }
.lp__quote { font-size: clamp(22px, 19px + 0.9vw, 30px); line-height: 1.4; color: var(--ink); max-width: 26em; margin: 0 0 22px; }
.lp__num { font-family: var(--fam-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--brass); margin: 0 0 14px; }
.lp__head { margin-bottom: 36px; }
.lp__grid { display: grid; gap: 28px; }
.lp__grid.lp__cols { list-style: none; margin: 0; padding: 0; }
.lp__cols > li { border-top: 1px solid var(--rule); padding-top: 18px; }
.lp__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); padding-top: 28px; }
.lp__tight { gap: 22px; margin-top: 8px; }
.lp__split { display: flex; flex-direction: column; }
.lp__split-copy { padding: clamp(40px, 5vw, 80px) var(--pad); }
.lp__fig, .lp__band-fig { margin: 0; }
.lp-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp__fig .lp-pic img { aspect-ratio: 3 / 2; }
.lp__band-fig { margin-top: clamp(40px, 5vw, 72px); }
.lp__band-fig .lp-pic img { aspect-ratio: 16 / 9; object-position: 50% 52%; }
/* 10-19, founder: the long-view band was too tall; 3:1 on desktop, cropped so the marina, boat and drone stay in frame */
@media (min-width: 900px) { .lp__band-fig .lp-pic img { aspect-ratio: 3 / 1; } }
.lp__contact dt { font-family: var(--fam-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta); margin-bottom: 6px; }
.lp__contact { display: grid; gap: 22px; margin: 0; }
.lp__head--row { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .lp__grid--2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .lp__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3.5vw, 56px); }
  .lp__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
  .lp__criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 48px); row-gap: 28px; }
  .lp__split { flex-direction: row; align-items: stretch; }
  .lp__fig { flex: 0 0 42%; min-width: 0; }
  .lp__fig .lp-pic, .lp__fig .lp-pic img { height: 100%; aspect-ratio: auto; }
  .lp__split-copy { flex: 1 1 auto; padding: clamp(56px, 6vw, 104px) var(--pad) clamp(56px, 6vw, 104px) clamp(40px, 5vw, 88px); }
  .lp__head--row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); align-items: end; }
  .lp__head--row .lp__lede { margin-bottom: 0; }
  .lp__contact { grid-template-columns: 1fr 1fr; align-self: center; }
}

/* 2026-10-18, founder: hero "a bit of a darker overlay, like 15%". A flat 15% ink over the whole photograph, under the
   existing top-weighted veil. */
.hero__media::before, .hero picture::after { content: ""; position: absolute; inset: 0; background: rgba(12, 11, 10, 0.15); pointer-events: none; z-index: 1; }
.hero__veil { z-index: 2; }
.hero__copy { z-index: 3; }


/* 10-18 pm, founder: no people on the site; hero in the register of greatersumventures.com: a dark cinematic
   photograph with the copy centred, an eyebrow, and an outlined button. */
.hero__img { object-position: center; }
.hero__veil { background: rgba(8, 10, 16, 0.34); }
.hero__copy { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; }
.hero__inner { align-items: center; }
.hero__eyebrow { color: #E3C48E; letter-spacing: 0.22em; text-transform: uppercase; font-size: 12px; }
.hero__headline { max-width: 14ch; }
.hero__sub { max-width: 640px; }
.hero .btn { background: transparent; color: var(--paper); border: 1px solid rgba(245, 239, 228, 0.7); }
.hero .btn:hover { background: var(--paper); color: var(--ink); }
.hero__actions { align-items: center; }
@media (min-width: 900px) {
  .hero__copy { top: 50%; transform: translate(-50%, -50%); }
  .hero__inner { width: 820px; margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero .btn { align-self: center; }
}