/* ==========================================================================
   Red Arrow Leadership Group. Built by KickLick.
   Static site for Cloudflare Pages.

   The world: the plant floor, seen at eye level. Leadership here happens
   standing next to people, not in a boardroom, so the site is quiet paper
   and real photographs of the floor. The photos carry most of the color;
   the logo supplies the rest: one red and one charcoal, nothing else. One
   bold moment: the home hero, where the logo's charcoal and red slash run
   straight into a photo of Jacob with a crew on the floor.

   The logo splits its name in two colors, RED in red and ARROW in charcoal.
   The site does the same with its headlines: the claim in charcoal, the
   answer in red.

   To brand this site, change ONLY the values in :root.
   ========================================================================== */

:root {
  /* ---- Brand palette: sampled from the Red Arrow logo ---------------- */
  --paper: #F5F5F2;        /* the page: a clean off-white, a touch warm, never pure white */
  --mist: #EAEAE6;         /* quiet panel on the page (the method, the calculator) */
  --white: #FFFFFF;        /* only for form cards */
  --ink: #202229;          /* the logo's charcoal: text, 14.5:1 on paper */
  --ink-2: #4B4F58;        /* body and leads, 7.5:1 on paper */
  --ghost: #5F636C;        /* small labels, 5.5:1 on paper, 5:1 on mist */
  --dim: #80848D;          /* waiting states (unpicked services), LARGE TEXT ONLY (3.4:1) */
  --graphite: #3E424A;     /* the lighter charcoal of the logo's chevron */
  --red: #B3121A;          /* the logo's red: buttons, the answer half of a headline (6.4:1) */
  --red-deep: #8E0D13;     /* button hover and press, small red text (8.7:1) */
  --red-on-dark: #EE5A5F;  /* the logo red lifted for the charcoal footer and photo bands (5:1 on coal) */
  --coal: #1C1E24;         /* the one dark ground: the footer */
  --on-coal: #F5F5F2;
  --on-coal-2: #A8ACB5;    /* 7.3:1 on coal */
  --on-coal-soft: #D3D5DB; /* body copy on the home hero's charcoal, 12:1 */
  --line: rgba(32, 34, 41, 0.12);
  --line-strong: rgba(32, 34, 41, 0.28);
  --line-coal: rgba(245, 245, 242, 0.16);
  --shade: 28, 30, 36;     /* coal as an rgb triple, for the scrims below */
  /* Washes and scrims: every translucent color in the build lives here. */
  --glass: rgba(245, 245, 242, 0.88);                 /* the settled header */
  --scrim: rgba(var(--shade), 0.4);                    /* behind the menu drawer */
  --ink-wash: rgba(32, 34, 41, 0.06);                  /* quiet button hover */
  --red-wash: rgba(179, 18, 26, 0.06);                 /* focused calculator input, placeholder note */
  --red-wash-2: rgba(179, 18, 26, 0.08);               /* the calculator chip on the contact card */
  --card-shadow: 0 1px 0 var(--line), 0 30px 60px -40px rgba(var(--shade), 0.35);
  /* the sparks sit right of center; the words sit on the darker left */
  --scrim-fire: linear-gradient(90deg, rgba(var(--shade), 0.72) 0%, rgba(var(--shade), 0.3) 55%, rgba(var(--shade), 0) 80%), linear-gradient(180deg, rgba(var(--shade), 0) 35%, rgba(var(--shade), 0.78) 100%);

  /* ---- Type --------------------------------------------------------------
     Archivo: the closest open face to the logo's heavy grotesk wordmark, and
     a variable font, so one family covers headlines (600, tight), the big
     figures (200, airy) and body copy (400) without a second family. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.35rem + 1.9vw, 2.9rem);
  --step-4: clamp(2.2rem, 1.5rem + 3vw, 4.2rem);
  --step-5: clamp(2.7rem, 1.6rem + 4.8vw, 6rem);

  /* ---- Space, shape, layers ------------------------------------------ */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(5rem, 11vw, 10rem);          /* more air than feels necessary */
  --container: 1280px;
  --radius: 6px;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-raised: 1;
  --z-header: 10;
  --z-menu: 100;
}

/* ---- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: 0.75rem 1rem;
  background: var(--ink); color: var(--paper); border-radius: var(--radius); text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Type ------------------------------------------------------------------ */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.1; }
/* The one headline device on this site, taken from the logo: the name is
   split RED | ARROW in two colors, so headlines are split too. The claim in
   charcoal, the answer in the logo's red. Used where the sentence has two
   halves (the client's own "Some skills can be trained. Others can only be
   coached."), never on a single word for decoration. */
.hl { color: var(--red); }
.dim { color: var(--dim); }
.head--wide { max-width: none; }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 38rem; }
.small { font-size: var(--step--1); color: var(--ghost); }
.num { font-variant-numeric: tabular-nums; }

/* ---- Layout ----------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.band--mist { background: var(--mist); }
.head { max-width: 52rem; }
.head .lead { margin-top: 1.4rem; }
/* The statement layout: a small label in the left rail, the statement in the
   wide right column. A print pairing, not a centered stack. */


/* Photographs. People photos keep their crop on purpose: every
   object-position below is chosen per image and says why. */
.photo { position: relative; overflow: hidden; border-radius: 4px; background: var(--mist); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.caption { margin-top: 0.9rem; font-size: var(--step--1); color: var(--ghost); }
.caption b { color: var(--ink); font-weight: 600; }

/* ---- Buttons -----------------------------------------------------------------
   The logo is a red arrow pointing up and to the right, so the button carries
   that arrow: a short shaft with a solid triangular head, drawn from the
   logo. On hover the arrow moves the way it points and the red deepens. Solid
   logo red, 6px corners (Tony: round slightly, never sharp), no disc, no
   glow, no gradient (the logo's gradient stays in the logo). */
.btn {
  --btn-bg: var(--red); --btn-fg: var(--white); --btn-bg-hover: var(--red-deep);
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 52px; padding: 0 1.3rem 0 1.4rem;
  border: 0; border-radius: var(--radius); background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-sans); font-weight: 600; font-size: 0.975rem; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 220ms var(--ease), transform 160ms var(--ease);
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.arw { width: 15px; height: 15px; flex: none; transition: transform 320ms var(--ease); }
.btn:hover .arw, .btn:focus-visible .arw { transform: translate(3px, -3px); }
/* The 3:1 mark: three filled squares and one open, the method in four
   squares. It lives in the menu trigger, the method section, the contact
   card and the footer; the open square is always the red one. */
.marks { display: inline-grid; grid-template-columns: repeat(4, 7px); gap: 3px; }
.marks i { width: 7px; height: 7px; border-radius: 1px; background: currentColor; }
.marks i:last-child { background: transparent; box-shadow: inset 0 0 0 1.5px var(--red-on-dark); }
/* On the page, a quiet partner: charcoal text in a hairline ring. */
.btn--line { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bg-hover: var(--ink-wash); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }

/* A text link whose rule draws itself left to right. */
.link {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding-block: 0.35rem;
  color: var(--ink); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1.5px no-repeat;
  transition: background-size 380ms var(--ease), color 200ms;
}
.link:hover { background-size: 0% 1.5px; background-position: 100% calc(100% - 8px); color: var(--red); }
.link--paper { color: var(--paper); }
.link--paper:hover { color: var(--white); }

/* ---- Header ------------------------------------------------------------------
   Wordmark left, the trigger right, nothing else. Transparent on the page;
   after 40px of scroll it settles into paper glass with a hairline. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: calc(var(--z-menu) + 1); height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter);
  pointer-events: none; transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.site-header > * { pointer-events: auto; }
.site-header.is-settled { background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
body.menu-open .site-header { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
/* The logo is a horizontal lockup about 5.2:1. 46px tall keeps LEADERSHIP
   GROUP readable; it settles to 40px with the bar. */
.brand img { height: 46px; width: auto; transition: height 300ms var(--ease); }
.site-header.is-settled .brand img { height: 40px; }
/* Over the home hero's dark photo the header reads white: the reversed logo,
   paper links, the open square in the lifted red. It turns back as soon as
   the bar settles to paper or the menu drawer opens. */
.brand__rev { display: none; }
body:not(.menu-open) .site-header--dark:not(.is-settled) .brand__std { display: none; }
body:not(.menu-open) .site-header--dark:not(.is-settled) .brand__rev { display: block; }
body:not(.menu-open) .site-header--dark:not(.is-settled) .trigger,
body:not(.menu-open) .site-header--dark:not(.is-settled) .nav a { color: var(--paper); }
body:not(.menu-open) .site-header--dark:not(.is-settled) .nav a:hover { color: var(--white); }
body:not(.menu-open) .site-header--dark:not(.is-settled) .nav a[aria-current="page"]::after { background: var(--red-on-dark); }
body:not(.menu-open) .site-header--dark:not(.is-settled) .trigger__mark i:nth-child(4) { box-shadow: inset 0 0 0 1.75px var(--red-on-dark); }
body:not(.menu-open) .site-header--dark:not(.is-settled) .nav__cta { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bg-hover: var(--white); }
@media (max-width: 520px) { .brand img, .site-header.is-settled .brand img { height: 36px; } }

/* The trigger: the firm's own mark, four squares in a 2x2. Three filled, one
   open. Hover fills the fourth; open turns it into a close, the squares
   drawing together into an x. The label says Menu or Close. */
.trigger {
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0 0.25rem 0 0.75rem;
  border: 0; background: transparent; color: var(--ink); cursor: pointer; font-weight: 600; font-size: 0.95rem;
}
.trigger__mark { position: relative; width: 22px; height: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.trigger__mark i { border-radius: 2px; background: currentColor; transition: transform 380ms var(--ease), background-color 240ms var(--ease), opacity 240ms; }
.trigger__mark i:nth-child(4) { background: transparent; box-shadow: inset 0 0 0 1.75px var(--red); }
.trigger:hover .trigger__mark i:nth-child(4) { background: var(--red); }
.trigger[aria-expanded="true"] .trigger__mark i:nth-child(1) { transform: translate(4.5px, 4.5px) rotate(45deg) scale(1.1, 0.34); }
.trigger[aria-expanded="true"] .trigger__mark i:nth-child(4) { transform: translate(-4.5px, -4.5px) rotate(45deg) scale(1.1, 0.34); background: var(--red); box-shadow: none; }
.trigger[aria-expanded="true"] .trigger__mark i:nth-child(2) { transform: translate(-4.5px, 4.5px) rotate(-45deg) scale(1.1, 0.34); }
.trigger[aria-expanded="true"] .trigger__mark i:nth-child(3) { transform: translate(4.5px, -4.5px) rotate(-45deg) scale(1.1, 0.34); }

/* ---- Menu: a paper drawer from the right, about 40% of the screen ------------
   Big sentence-case links; the photo at the top changes with the link you
   point at, so the menu previews each page. Scrim behind, Escape closes. */
.menu { position: fixed; inset: 0; z-index: var(--z-menu); }
.menu__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 360ms var(--ease); }
.menu__panel {
  position: absolute; inset: 0 0 0 auto; width: min(34rem, 100vw); background: var(--paper);
  display: flex; flex-direction: column; padding: calc(var(--header-h) + 0.5rem) clamp(1.5rem, 3vw, 2.5rem) 1.75rem;
  overflow-y: auto; transform: translateX(100%); transition: transform 520ms var(--ease);
}
.menu.is-open .menu__scrim { opacity: 1; }
.menu.is-open .menu__panel { transform: none; }
.menu__photo { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--mist); flex: none; }
.menu__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 420ms var(--ease); }
.menu__photo img.is-on { opacity: 1; }
.menu__links { margin-top: 1.25rem; }
.menu__links a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.menu__links a span { font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; transition: transform 300ms var(--ease), color 200ms; }
.menu__links a:hover span, .menu__links a:focus-visible span { transform: translateX(6px); color: var(--red); }
.menu__links a[aria-current="page"] span { color: var(--ink); }
.menu__links a[aria-current="page"] span::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 0.6rem; vertical-align: middle; border-radius: 1px; background: var(--red); }
.menu__foot { margin-top: auto; padding-top: 1.75rem; display: grid; gap: 1rem; }
.menu__foot p { color: var(--ghost); font-size: var(--step--1); }
.menu__foot a.tel { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; text-decoration: none; }
body.menu-open { overflow: hidden; }

/* ---- Home hero: charcoal, a red slash, the photo ---------------------------------
   Three solid shapes side by side, nothing laid over the photo: the words on
   the logo's charcoal, a red stripe at the arrow's angle, and the photo of
   Jacob with a crew at the press, cut along the stripe. The header sits on
   the charcoal above it. One still screen. On a phone the photo comes first
   with the stripe along its bottom edge, the words follow on charcoal. */
.hero { position: relative; overflow: hidden; background: var(--coal); color: var(--paper); padding-top: var(--header-h); }
.hero__art { position: relative; height: 46svh; min-height: 300px; }
.hero__slash, .hero__photo { position: absolute; inset: 0; }
.hero__slash { background: var(--red); clip-path: polygon(0 91%, 100% 79%, 100% 87%, 0 99%); }
.hero__photo { clip-path: polygon(0 0, 100% 0, 100% 79%, 0 91%); }
/* Jacob's face sits about 46% across the photo, the crew to the right. */
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 30%; }
.hero__copy { position: relative; z-index: 1; padding-top: 0.5rem; padding-bottom: clamp(2.5rem, 6vh, 3.5rem); }
.hero__copy h1 { font-size: clamp(2.3rem, 1.2rem + 4.6vw, 5.1rem); max-width: 12ch; }
.hero__copy .hl { color: var(--red-on-dark); }
.hero__plain { margin-top: 1.25rem; color: var(--on-coal-soft); font-size: var(--step-1); line-height: 1.5; max-width: 27rem; }
.hero__copy .btn-row { margin-top: 1.75rem; }
.hero__cred { margin-top: 1.4rem; color: var(--on-coal-2); font-size: var(--step--1); max-width: 27rem; }
@media (min-width: 900px) {
  .hero { height: 94svh; min-height: 620px; max-height: 1080px; }
  /* The photo takes the right 62% below the header. The stripe and the
     photo's left edge run parallel, rising to the right like the arrow. */
  .hero__art { position: absolute; top: var(--header-h); right: 0; bottom: 0; width: 62%; height: auto; min-height: 0; }
  .hero__slash { clip-path: polygon(28% 0, 36% 0, 8% 100%, 0% 100%); }
  .hero__photo { clip-path: polygon(36% 0, 100% 0, 100% 100%, 8% 100%); }
  .hero__photo img { object-position: 42% 32%; }
  /* The words hold to the left edge, not the centered container, so on wide
     screens they never run into the stripe. */
  .hero__copy { height: 100%; max-width: none; margin: 0; padding-left: clamp(var(--gutter), 7vw, 9rem); display: flex; flex-direction: column; justify-content: center; padding-top: 0; padding-bottom: 0; }
  .hero__copy > * { max-width: min(30rem, 31vw); }
  .hero__copy h1 { font-size: clamp(2.6rem, 0.4rem + 3.3vw, 4.6rem); max-width: min(12.5ch, 32vw); }
}

/* ---- Home: trained vs coached -------------------------------------------------- */
.statement { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance; }
.pair { margin-top: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: end; }
.pair .photo--a { aspect-ratio: 4 / 5; }
.pair .photo--a img { object-position: 62% 40%; } /* the operator and her hands on the line, not the empty machinery left */
.pair .photo--b { aspect-ratio: 3 / 2; }
.pair .photo--b img { object-position: 30% 50%; } /* the two in conversation sit left of center */
.pair__label { font-family: var(--font-display); font-size: var(--step-2); letter-spacing: -0.02em; margin-top: 1.1rem; }
.pair__label span { color: var(--ghost); }
.pair p.small { margin-top: 0.4rem; max-width: 34rem; }
@media (max-width: 720px) { .pair { grid-template-columns: 1fr; } .pair .photo--a { aspect-ratio: 4 / 3; } }

/* ---- Home: the 3:1 method -----------------------------------------------------
   The ratio set enormous in the thinnest cut, and four squares that fill one
   at a time as the four lines arrive. A small working instrument: the fourth
   square only fills after the first three. */
.method { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.ratio { font-family: var(--font-display); font-weight: 200; font-size: clamp(7rem, 3rem + 17vw, 19rem); line-height: 0.8; letter-spacing: -0.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ratio i { font-style: normal; color: var(--red); margin: 0 0.02em; }
.squares { display: flex; gap: clamp(10px, 1.4vw, 16px); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.squares i { width: clamp(22px, 3vw, 36px); aspect-ratio: 1; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--ink); transition: background-color 420ms var(--ease); }
.squares i.is-on { background: var(--ink); }
.squares i.w { box-shadow: inset 0 0 0 2px var(--red); }
.squares i.w.is-on { background: var(--red); }
.ledger { margin-top: 2rem; border-top: 1px solid var(--line-strong); }
.ledger li { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); transition: color 400ms var(--ease); }
.ledger li::before { content: ""; width: 12px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--line-strong); transform: translateY(1px); transition: background-color 400ms var(--ease), box-shadow 400ms; }
.ledger li small { font-size: var(--step--1); color: var(--ghost); }
.ledger li.is-on { color: var(--ink); }
.ledger li.is-on::before { background: var(--ink); box-shadow: none; }
.ledger li.w.is-on::before { background: var(--red); }
@media (max-width: 860px) { .method { grid-template-columns: 1fr; } }

/* ---- Home: services, a big type list with the photo beside --------------------
   The names are set large; the one you point at goes to ink and the photo
   beside it changes; the rest wait in --dim. On a phone each name carries its
   own photo. */
.svc { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.svc__list { border-top: 1px solid var(--line-strong); }
.svc__row { display: block; padding: clamp(1.25rem, 2.5vw, 2rem) 0; border-bottom: 1px solid var(--line-strong); text-decoration: none; color: var(--dim); transition: color 300ms var(--ease); }
.svc__row h3 { font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1; transition: transform 400ms var(--ease); }
.svc__row p { margin-top: 0.8rem; font-size: var(--step-0); color: var(--ghost); max-width: 34rem; opacity: 0.85; }
.svc__row .link { margin-top: 0.9rem; color: var(--ink); opacity: 0; transition: opacity 300ms; }
.svc__row.is-on, .svc__row:hover, .svc__row:focus-visible { color: var(--ink); }
.svc__row.is-on h3 { transform: translateX(0.4rem); }
.svc__row.is-on p { color: var(--ink-2); opacity: 1; }
.svc__row.is-on .link { opacity: 1; }
.svc__photo { position: sticky; top: calc(var(--header-h) + 2rem); aspect-ratio: 4 / 5; }
.svc__photo img { position: absolute; inset: 0; opacity: 0; transition: opacity 520ms var(--ease), transform 900ms var(--ease); transform: scale(1.04); }
.svc__photo img.is-on { opacity: 1; transform: none; }
.svc__row .photo { display: none; }
@media (max-width: 860px) {
  .svc { grid-template-columns: 1fr; }
  .svc__photo { display: none; }
  .svc__row { color: var(--ink); }
  .svc__row .photo { display: block; aspect-ratio: 3 / 2; margin-bottom: 1.1rem; }
  .svc__row p, .svc__row .link { opacity: 1; color: var(--ink-2); }
  .svc__row .link { color: var(--ink); }
  .svc__row.is-on h3 { transform: none; }
}

/* ---- Home: fire band -------------------------------------------------------------
   The one full-bleed photo band after the hero. Sparks off a grinder: the
   fire in "putting out fires." Minimal words, low on the frame. */
.fire { position: relative; min-height: min(92svh, 58rem); display: grid; align-items: end; color: var(--paper); overflow: hidden; background: var(--coal); }
.fire > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.fire::after { content: ""; position: absolute; inset: 0; background: var(--scrim-fire); }
.fire .wrap { position: relative; z-index: 1; padding-block: clamp(3rem, 8vw, 6rem); }
.fire h2 { max-width: 17ch; }
.fire h2 span { color: var(--red-on-dark); } /* the red half, lifted for the dark photo */
.fire .link { margin-top: 1.6rem; }

/* ---- Home: who we help, four frames from the floor ------------------------------- */
.frames { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.frame { text-decoration: none; color: var(--ink); display: block; }
.frame .photo { aspect-ratio: 3 / 4; }
.frame .photo img { transition: transform 900ms var(--ease); }
.frame:hover .photo img { transform: scale(1.035); }
.frame small { display: block; margin-top: 0.5rem; font-size: var(--step--1); color: var(--ghost); }
.frame p { margin-top: 1rem; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.01em; }
@media (max-width: 900px) { .frames { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .frames { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 0.75rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .frames::-webkit-scrollbar { display: none; }
  .frame { scroll-snap-align: start; }
}

/* ---- Home: cost of turnover, a sentence you fill in ----------------------------- */
.cost { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.sentence { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.45; letter-spacing: -0.015em; color: var(--ink-2); max-width: 24ch; }
.sentence input {
  width: calc(var(--w, 3) * 1ch + 0.3em); padding: 0 0.1em; border: 0; border-bottom: 2px solid var(--red); border-radius: 0;
  background: transparent; color: var(--red); font-family: var(--font-display); font-weight: 600; font-size: 1em; text-align: center;
  -moz-appearance: textfield; font-variant-numeric: tabular-nums;
}
.sentence input::-webkit-outer-spin-button, .sentence input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sentence input:focus { outline: none; border-bottom-color: var(--ink); background: var(--red-wash); }
.result small { display: block; margin-top: 0.8rem; font-size: var(--step--1); color: var(--ghost); }
.result .big { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(3.2rem, 2rem + 5vw, 6.4rem); line-height: 0.9; letter-spacing: -0.045em; color: var(--red); font-variant-numeric: tabular-nums; }
.result p { margin-top: 1rem; color: var(--ink-2); max-width: 26rem; }
.result .btn { margin-top: 1.6rem; }
.head + .cost { margin-top: clamp(2rem, 4vw, 3rem); }
.sources { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1rem; border-top: 1px solid var(--line-strong); font-size: 0.8rem; color: var(--ghost); max-width: 60rem; }
@media (max-width: 860px) { .cost { grid-template-columns: 1fr; } }

/* ---- Close: start with a conversation ------------------------------------------- */
.close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.close h2 { font-size: var(--step-5); max-width: 11ch; }
.close .lead { margin-top: 1.4rem; }
.close .btn-row { margin-top: 2rem; }
.close__tel { margin-top: 1.6rem; color: var(--ghost); font-size: var(--step--1); }
.close__tel a { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--ink); text-decoration: none; margin-left: 0.3rem; }
.close__tel a:hover { color: var(--red); }
.close .photo { aspect-ratio: 3 / 4; }
.close .photo img { object-position: 50% 30%; } /* her face and the hard hat under her arm both stay in frame */
@media (max-width: 860px) { .close { grid-template-columns: 1fr; } .close .photo { aspect-ratio: 4 / 5; max-width: 26rem; } }

/* ---- Interior page intro ------------------------------------------------------------
   Every inner page opens the same way: the ghost label, a two-part headline,
   a lead, then one wide photograph. Quiet, so each page's own section
   language can do the work below it. */
.intro { padding-top: calc(var(--header-h) + clamp(3rem, 9vh, 6rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.intro h1 { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 6rem); max-width: 17ch; }
.intro .lead { margin-top: 1.5rem; }
.intro__photo { aspect-ratio: 21 / 9; }
@media (max-width: 720px) { .intro__photo { aspect-ratio: 4 / 3; } }

/* ---- Quote band: one sentence, full width, and the person who said it ----------- */
.quote { text-align: left; }
.quote blockquote { font-family: var(--font-display); font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.05; max-width: 22ch; text-wrap: balance; }
.quote blockquote span { color: var(--red); }
.quote cite { display: block; margin-top: 1.5rem; font-style: normal; color: var(--ghost); font-size: var(--step--1); }

/* A real sequence, so it is numbered: how an engagement starts. */
.steps { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); counter-reset: step; }
.steps li { counter-increment: step; padding-top: 1.2rem; border-top: 2px solid var(--ink); }
.steps li::before { content: counter(step); display: block; font-family: var(--font-display); font-size: var(--step-4); font-weight: 200; line-height: 1; color: var(--red); letter-spacing: -0.04em; }
.steps h3 { margin-top: 1rem; font-size: var(--step-2); }
.steps p { margin-top: 0.7rem; color: var(--ink-2); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 2rem; } }

.where { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.where .photo { aspect-ratio: 3 / 2; }
.where h3 { margin-top: 1rem; font-size: var(--step-1); letter-spacing: -0.01em; }
.where p { margin-top: 0.35rem; font-size: var(--step--1); color: var(--ghost); }
@media (max-width: 900px) { .where { grid-template-columns: 1fr 1fr; } }

/* ---- About page ----------------------------------------------------------------------- */
.letter { max-width: 44rem; }
.letter p { font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); }
.letter p + p { margin-top: 1.2em; }
.letter p.first { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.placeholder { margin-top: 2rem; padding: 1rem 1.2rem; border-left: 2px solid var(--red); background: var(--red-wash); font-size: var(--step--1); color: var(--ink-2); }
.ruled { border-top: 1px solid var(--line-strong); }
.ruled li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 4vw, 4rem); padding: clamp(1.25rem, 2.5vw, 1.8rem) 0; border-bottom: 1px solid var(--line-strong); }
.ruled h3 { font-size: var(--step-2); }
.ruled p { color: var(--ink-2); max-width: 36rem; }
@media (max-width: 820px) { .ruled li { grid-template-columns: 1fr; } }

/* ---- Contact: three questions, one at a time ------------------------------------------ */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact__side h1 { font-size: clamp(2.5rem, 1.3rem + 4vw, 5.2rem); max-width: 11ch; }
.contact__side .lead { margin-top: 1.4rem; }
.contact__tel { margin-top: 2rem; }
.contact__tel { color: var(--ghost); }
.contact__tel a { display: block; margin-top: 0.3rem; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); text-decoration: none; letter-spacing: -0.03em; }
.contact__tel a:hover { color: var(--red); }
.next { margin-top: 2.5rem; border-top: 1px solid var(--line-strong); counter-reset: nx; }
.next li { counter-increment: nx; display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.next li::before { content: counter(nx); font-family: var(--font-display); font-weight: 600; color: var(--red); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.ask { background: var(--white); border-radius: 8px; padding: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--card-shadow); min-height: 30rem; display: grid; grid-template-rows: auto 1fr auto; gap: 1.8rem; }
.ask__prog { display: flex; align-items: center; gap: 0.9rem; font-size: var(--step--1); color: var(--ghost); }
.ask__prog .marks { grid-template-columns: repeat(4, 12px); gap: 5px; color: var(--ink); }
.ask__prog .marks i { width: 12px; height: 12px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color 320ms var(--ease); }
.ask__prog .marks i.is-on { background: var(--ink); }
.ask__prog .marks i:last-child { box-shadow: inset 0 0 0 1.5px var(--red); }
.ask__prog .marks i:last-child.is-on { background: var(--red); }
.ask__step { display: none; align-content: start; gap: 1.4rem; }
.ask__step.is-on { display: grid; animation: stepIn 420ms var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } }
.ask__q { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.02em; }
.opts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.opts button {
  min-height: 48px; padding: 0 1.1rem; border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 500;
  transition: background-color 200ms, color 200ms, box-shadow 200ms;
}
.opts button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.opts button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.field { display: grid; gap: 0.4rem; }
.field span { font-size: var(--step--1); color: var(--ghost); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.7rem 0; border: 0; border-bottom: 1.5px solid var(--line-strong); border-radius: 0; background: transparent; font-size: 1.05rem;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--red); }
.field--two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 560px) { .field--two { grid-template-columns: 1fr; } }
.ask__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.ask__back { border: 0; background: none; cursor: pointer; color: var(--ghost); font-weight: 600; min-height: 44px; padding: 0; }
.ask__note { font-size: 0.8rem; color: var(--ghost); }
.chip { display: inline-flex; gap: 0.5rem; align-items: baseline; padding: 0.5rem 0.8rem; border-radius: var(--radius); background: var(--red-wash-2); color: var(--red-deep); font-size: var(--step--1); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Legal pages ------------------------------------------------------------------------- */
.prose { max-width: 44rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.6rem; }
.prose p { margin-top: 0.9rem; color: var(--ink-2); }

/* ---- Footer: the designed close ---------------------------------------------------------
   The one dark ground on the site: the logo's charcoal. The reversed logo
   and three short columns, then the name set as wide as the page in the
   logo's own two colors, the way it would be painted on a plant wall. */
.site-footer { background: var(--coal); color: var(--on-coal); padding-top: clamp(4rem, 8vw, 6.5rem); overflow: hidden; }
.site-footer a { color: var(--on-coal); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.foot__top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 2rem; }
.foot__brand img { width: min(19rem, 100%); height: auto; }
.foot__top .say { margin-top: 1.6rem; font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.015em; max-width: 24ch; }
.foot__top .say span { color: var(--red-on-dark); }
.foot__top h2 { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; letter-spacing: 0; color: var(--on-coal-2); margin-bottom: 0.9rem; }
.foot__top a { display: inline-block; padding-block: 0.6rem; }
.foot__top li + li { margin-top: 0; }
.foot__top li:not(:has(a)) { padding-block: 0.6rem; }
.foot__bottom a { display: inline-block; padding-block: 0.8rem; }
/* RED ARROW across the page: the logo's heavy grotesk, uppercase like the
   lockup. 12.4vw is the size at which the nine letters and the space fill
   the width without touching the edges. */
.foot__word { margin-top: clamp(3rem, 7vw, 5rem); font-family: var(--font-display); font-weight: 800; font-size: 12.4vw; line-height: 0.8; letter-spacing: -0.035em; text-transform: uppercase; white-space: nowrap; color: var(--on-coal); text-align: center; }
.foot__word .r { color: var(--red-on-dark); }
.foot__bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; padding-block: 1.5rem 1.75rem; margin-top: clamp(1.25rem, 3vw, 2.25rem); border-top: 1px solid var(--line-coal); font-size: var(--step--1); color: var(--on-coal-2); }
.foot__bottom .marks { color: var(--on-coal-2); margin-right: 0.6rem; vertical-align: middle; }
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr 1fr; } .foot__top > :first-child { grid-column: 1 / -1; } }

/* ---- Motion: arrive once, settle fast ------------------------------------------------------
   Hidden states only exist when JS is on and motion is welcome. */
.js.motion-ok .reveal { opacity: 0; transform: translateY(24px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); transition-delay: var(--d, 0ms); }
.js.motion-ok .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- Weights for Archivo ------------------------------------------------------------------
   Funnel Display carried its voice at 400; Archivo needs a step more to sit
   beside the logo's heavy wordmark. Big figures go the other way, to 200. */
.statement, .menu__links a span, .frame p, .letter p.first, .foot__top .say { font-weight: 500; }
.pair__label, .quote blockquote, .ask__q, .ruled h3 { font-weight: 600; }
.sentence { font-weight: 400; }

/* ==========================================================================
   Round 7 (Mobbin audit, November 2026): the header bar, the principles
   list, the role picker, the founder note and the service rows. Picked by
   Tony section by section over the earlier layouts.
   ========================================================================== */

/* ---- Header: the pages and the ask in the bar ---------------------------
   From 1180px up Home and the four pages sit in the bar with the red ask at the end;
   the current page carries the red square. Below 1180px the bar is the logo
   and the 3:1 trigger, as before. */
.nav, .nav__cta { display: none; }
.btn--sm { min-height: 44px; padding: 0 1rem 0 1.15rem; gap: 0.6rem; font-size: 0.92rem; }
.btn--sm .arw { width: 13px; height: 13px; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; font-size: 0.98rem; text-decoration: none; transition: color 200ms; }
.nav a:hover { color: var(--red); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 1px; background: var(--red); }
@media (min-width: 1180px) {
  .site-header--bar .nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.2vw, 2.4rem); margin-left: auto; margin-right: clamp(1.75rem, 2.6vw, 2.75rem); }
  .site-header--bar .nav__cta { display: inline-flex; }
  .site-header--bar .trigger { display: none; }
}
/* The drawer now only opens below 1180px; on short screens it drops the
   photo so the ask at the bottom stays in view. */
@media (max-height: 880px) and (min-width: 600px) { .site-header--bar ~ .menu .menu__photo { display: none; } }

/* ---- Approach: six principles, one open at a time ----------------------
   The names in one column with the 3:1 square beside each, open until you
   open it; the photo on the right follows the open principle. */
.prin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.prin__list { border-top: 1.5px solid var(--ink); }
.prin__item { border-bottom: 1px solid var(--line-strong); }
.prin__h { font-size: var(--step-3); letter-spacing: -0.03em; line-height: 1.08; }
.prin__btn { width: 100%; display: flex; align-items: center; gap: 1.1rem; padding: clamp(1.1rem, 2vw, 1.5rem) 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.prin__btn > span:last-child { transition: transform 300ms var(--ease); }
.prin__btn:hover > span:last-child { transform: translateX(4px); }
.prin__mark { flex: none; width: 14px; height: 14px; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--ink); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.prin__btn:hover .prin__mark { box-shadow: inset 0 0 0 2px var(--red); }
.prin__item.is-open .prin__mark { background: var(--red); box-shadow: none; }
.prin__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 480ms var(--ease), visibility 480ms; }
.prin__body > div { min-height: 0; overflow: hidden; }
.js .prin__item:not(.is-open) .prin__body { grid-template-rows: 0fr; visibility: hidden; }
.prin__inner { padding: 0 0 clamp(1.6rem, 3vw, 2.4rem) calc(14px + 1.1rem); }
.prin__inner p { color: var(--ink-2); max-width: 36rem; }
.prin__inner blockquote { margin-top: 1.3rem; font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em; max-width: 26ch; color: var(--ink); }
.prin__inner .photo { display: none; }
.prin__photo { position: sticky; top: calc(var(--header-h) + 2rem); aspect-ratio: 4 / 5; }
.prin__photo img { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease); }
.prin__photo img.is-on { opacity: 1; }
@media (max-width: 860px) {
  .prin { grid-template-columns: 1fr; }
  .prin__photo { display: none; }
  .prin__inner { padding-left: 0; }
  .prin__inner .photo { display: block; aspect-ratio: 3 / 2; margin-bottom: 1.2rem; }
}

/* ---- Who we help: pick your role ------------------------------------------
   Four roles on the left; the one you pick fills the right with a floor
   photo, the line, what is going on and where to start. No faces beside the
   lines, so nothing reads as a client testimonial. */
.roles { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.roles__tabs { display: grid; border-top: 1.5px solid var(--ink); position: sticky; top: calc(var(--header-h) + 2rem); }
.roles__tab {
  display: flex; align-items: center; gap: 1rem; width: 100%; padding: clamp(1rem, 2vw, 1.35rem) 0; border: 0; border-bottom: 1px solid var(--line-strong);
  background: none; color: var(--ink-2); text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; transition: color 200ms;
}
.roles__tab::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--ink-2); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.roles__tab:hover { color: var(--ink); }
.roles__tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.roles__tab[aria-selected="true"]::before { background: var(--red); box-shadow: none; }
.roles__panel .photo { aspect-ratio: 16 / 9; }
.roles__line { margin-top: clamp(1.5rem, 3vw, 2rem); font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; }
.roles__panel .body { margin-top: 1.2rem; color: var(--ink-2); max-width: 36rem; }
.roles__panel .start { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: baseline; }
.roles__panel .start small { color: var(--ghost); font-size: var(--step--1); }
.roles__panel + .roles__panel { margin-top: 3.5rem; }               /* without JS: all four, stacked */
.js .roles__panel + .roles__panel { margin-top: 0; }
.js .roles__panel:not(.is-on) { display: none; }
.js .roles__panel.is-on { animation: stepIn 420ms var(--ease); }
@media (max-width: 860px) { .roles { grid-template-columns: 1fr; } .roles__tabs { position: static; } }

/* ---- About: one note from the founder ------------------------------------ */
.note { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.note__letter h2 { font-size: var(--step-2); letter-spacing: -0.02em; }
.note__letter h2 + p.first { margin-top: 1.4rem; }
.letter .placeholder { font-size: var(--step--1); color: var(--ink-2); }
.note__sign { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1.5px solid var(--ink); max-width: 22rem; }
.note__letter .note__sign p { margin: 0; }
.note__letter .note__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.note__letter .note__title { margin-top: 0.25rem; font-size: var(--step--1); color: var(--ghost); }
.note__photo { position: sticky; top: calc(var(--header-h) + 2rem); }
.note__photo .photo { aspect-ratio: 4 / 5; }
.note__photo figcaption { margin-top: 0.8rem; font-size: var(--step--1); color: var(--ghost); }
@media (max-width: 860px) { .note { grid-template-columns: 1fr; } .note__photo { position: static; order: -1; max-width: 26rem; } }

/* ---- Services: one ruled row per service ---------------------------------- */
.offer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(2.5rem, 5vw, 4.25rem); border-top: 1.5px solid var(--ink); }
.offer h2 { font-size: var(--step-4); letter-spacing: -0.035em; line-height: 1; max-width: 11ch; }
.offer__photo { margin-top: clamp(1.5rem, 3vw, 2.25rem); aspect-ratio: 4 / 3; max-width: 22rem; }
.offer .for { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em; color: var(--red); max-width: 26ch; }
.offer .body { margin-top: 1.2rem; color: var(--ink-2); max-width: 36rem; }
.offer__facts { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.offer__facts dt { font-size: var(--step--1); color: var(--ghost); }
.offer__facts dd { margin-top: 0.25rem; color: var(--ink); line-height: 1.4; }
.offer .btn-row { margin-top: 2rem; }
@media (max-width: 860px) {
  .offer { grid-template-columns: 1fr; gap: 1.4rem; }
  .offer__photo { max-width: none; aspect-ratio: 3 / 2; }
  .offer__facts { grid-template-columns: 1fr; gap: 0.8rem; }
}

/* ---- About: where the name comes from (and Services: how the program runs) ----------------------------------------
   The statement and the firm's own arrow mark hold still on the left; the
   32nd's history runs down the right as a real sequence of years. */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.story__side { position: sticky; top: calc(var(--header-h) + 2rem); }
.story__side .lead { margin-top: 1.4rem; }
.name__mark { width: clamp(84px, 9vw, 128px); height: auto; margin-top: clamp(2rem, 4vw, 3rem); }
.name__why { margin-top: 1.2rem; font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em; max-width: 24ch; }
.name__note { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1rem; border-top: 1px solid var(--line-strong); font-size: var(--step--1); color: var(--ghost); max-width: 60rem; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story__side { position: static; } }

/* A dated or numbered sequence: the label in thin red figures, the step
   beside it. Used for the 32nd's years and the program's weeks. */
.timeline { border-top: 1.5px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding-block: clamp(1.2rem, 2.4vw, 1.8rem); border-bottom: 1px solid var(--line-strong); }
.timeline__when { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1; letter-spacing: -0.035em; color: var(--red); font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.timeline p { margin-top: 0.45rem; color: var(--ink-2); max-width: 36rem; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---- Services: the Expectations Exchange and its numbers -------------------------- */
.exchange { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.exchange .lead { margin-top: 1.4rem; }
.exchange__more { margin-top: 1.2rem; color: var(--ink-2); max-width: 38rem; }
.figures { border-top: 1.5px solid var(--ink); }
.figures div { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: 1.25rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--line-strong); }
.figures dt { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -0.04em; color: var(--red); font-variant-numeric: tabular-nums; }
.figures dd { color: var(--ink-2); }
@media (max-width: 860px) { .exchange { grid-template-columns: 1fr; } }