/* Encounter Solutions — page sections.
   Builds on styles.css. Bands: hero, ink, close, footer.
   Section marks use the logo's device — a tan hairline with tracked caps
   right-aligned beneath. No eyebrow labels, card grids or numbered indices. */

.shell {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--section-y); }

/* Full-bleed dark band. The shell inside keeps the type on the same measure as
   every other section, so only the ground changes — not the grid. */
.band-ink {
  background: var(--ink);
  color: var(--on-ink);
}

/* ---------- Masthead ----------
   In flow as the hero's first flex item, not absolute. Out of flow, .hero-content
   had to reserve space for it with a hand-tuned padding-top, and too small a value
   put the headline under the logo on short viewports. */
.masthead {
  position: relative;
  z-index: 2;
  /* Bone by default so the document pages (privacy, 404) get the right hairline;
     the homepage masthead sits inside .hero.on-ink and overrides it below. */
  border-bottom: 1px solid var(--rule);
}

.on-ink .masthead { border-bottom-color: var(--on-ink-rule); }

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

/* Supplied artwork, placed as-is. Cream only — the masthead sits on the photograph. */
.brand-mark { display: inline-flex; }

.brand-mark img {
  display: block;
  height: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  width: auto;
}

/* ---------- Hero ----------
   Full-bleed photograph. The scrim carries the type left and bottom; the
   credentials anchor the base. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 38%;
  /* blur(0px) is declared, not omitted: it gives animations.js's scrub a matching
     start value to interpolate from. */
  filter: blur(0px);
}

/* The bottom stop is a legibility requirement. The horizontal gradient has fallen
   to 0.1 by the right-hand column, so the rightmost credential lands on the
   brightest part of the image — measured 3.47:1 at 0.62. Re-measure if the
   photograph is replaced. */
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 16, 16, 0.82) 0%, rgba(16, 16, 16, 0.5) 44%, rgba(16, 16, 16, 0.1) 78%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.42) 0%, rgba(16, 16, 16, 0) 32%, rgba(16, 16, 16, 0.82) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  /* flex-start, not center: with center, padding-top only offsets the centring
     maths, so the visible gap drifts whenever the credentials row changes height. */
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 40px;
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

/* ---- The split sentence ----
   Two halves of a single sentence, divided at its em dash. The wording is the
   client's — do not rewrite it to fit the layout. */
.hero-display {
  font-family: var(--font-display);
  max-width: 24ch;
  font-size: var(--t-display);
  font-weight: var(--w-light);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--on-ink);
}

.hero-body {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--on-ink-body);
}

.hero-cta {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  /* Definite width, or the .btn inside it would resolve min(36rem, 100%) against a
     shrink-to-fit flex child and collapse to its own text width. */
  width: 100%;
}

/* ---- Credentials at the hero's base ---- */
.hero-base {
  position: relative;
  z-index: 1;
}

.credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(242, 237, 227, 0.22);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.credentials li {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: var(--w-regular);
  line-height: 1.3;
  color: var(--on-ink);
  /* The trailing clamp is the gap before the ink band. It lives in this padding
     rather than on .hero so the column dividers — border-left on this element —
     run to the hero's true bottom edge. */
  padding: clamp(1.4rem, 3vh, 2rem) 1.5rem calc(clamp(1.6rem, 4vh, 2.4rem) + clamp(1.5rem, 5vh, 3rem)) 0;
}

.credentials li + li {
  border-left: 1px solid rgba(242, 237, 227, 0.22);
  padding-left: 1.5rem;
}

/* ---------- Section mark ----------
   The logo's geometry as punctuation: tan hairline, tracked caps beneath. */
.section-mark .rule { width: 100%; }

.section-mark-title {
  font-family: var(--font-micro);
  margin-top: 0.85em;
  margin-right: -0.3em;     /* offsets the trailing letter-space */
  text-align: right;
  font-size: 0.8rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tan);
}

/* ---------- Background & Approach ---------- */
/* Her own emphasis, promoted to the section's display statement. In the mock-up
   this sentence is bold inline; here it carries the band. */
.approach-quote {
  font-family: var(--font-display);
  margin-top: clamp(3.5rem, 8vw, 6rem);
  max-width: 22ch;
  font-size: var(--t-statement);
  font-weight: var(--w-light);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}

/* Text left, list right. The auto column plus justify-self:end pins the list to
   the right edge; align-items:end drops it to the row bottom. */
.approach-cols {
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

/* Grid child: min-width:0 so the text column can shrink below its content's
   min-content width instead of forcing the row wider. */
.approach-text { min-width: 0; }

.approach-body {
  max-width: 54ch;
  color: var(--on-ink-body);
}

/* The one claim about who actually does the work. Full-strength ink-ground text at
   lede size is the emphasis — no border, no box. Stacked under the body paragraph. */
.approach-note {
  margin-top: 1.5rem;
  font-size: var(--t-lede);
  line-height: 1.55;
  max-width: 40ch;
  color: var(--on-ink);
}

/* ---- Supporting with ----
   Plain list: no arrows, rules or button. The heading is body-size sentence case,
   not an eyebrow. */
.offer {
  justify-self: end;
  min-width: 0;
}

.offer-title {
  margin: 0 0 1rem;
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: 1.4;
  color: var(--on-ink-muted);
}

.offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.offer-list li {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  font-weight: var(--w-regular);
  line-height: 1.3;
  color: var(--on-ink);
}

/* ---------- Close ----------
   Same construction as .approach-cols. The heading is the taller item, so
   align-items:end puts its top at the row top and the button at the row bottom. */
.close-inner {
  display: grid;
  /* 300px, not auto: an auto track sizes to the button's max-content (~262px), and
     its own min(300px, 100%) then resolves against that narrower column. */
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.close-inner .btn {
  justify-self: end;
  /* Optical, not box, alignment: box-aligned leaves the button ~24px above the
     capitals. The offset is half-leading plus the font's ascent-to-ink gap = 0.457
     of the heading's size — a constant ratio, so it tracks --t-statement. */
  margin-top: calc(var(--t-statement) * 0.457);
}

.close-title {
  font-family: var(--font-display);
  max-width: 18ch;
  font-size: var(--t-statement);
  font-weight: var(--w-light);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  /* No margin-bottom: the grid gap owns spacing in both layouts, and a bottom margin
     on an end-aligned grid item would lift the heading out of alignment. */
}

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(2.5rem, 5vh, 3.5rem); }
.site-footer > .shell { border-top: 1px solid var(--rule); padding-top: clamp(2.5rem, 5vh, 3.5rem); }

.footer-mail {
  font-family: var(--font-display);
  display: inline-block;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  font-weight: var(--w-light);
  letter-spacing: -0.015em;
  color: var(--text-strong);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 160ms ease;
}

.footer-mail:hover { color: var(--tan-deep); }

.footer-row {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 3rem;
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.footer-person { color: var(--muted); }

.footer-links { display: flex; gap: 1.75rem; }

.footer-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.footer-link:hover { color: var(--tan-deep); border-bottom-color: var(--tan); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--faint);
}

.footer-reg { max-width: 52ch; text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .approach-cols { grid-template-columns: 1fr; align-items: start; }

  /* Single column: the list follows the text, left-aligned. */
  .offer { justify-self: start; margin-top: 0.5rem; }

  /* Same treatment for the closing band: action follows the heading, left-aligned. */
  .close-inner { grid-template-columns: 1fr; }
  /* Stacked: the button follows the heading, so the grid gap owns the spacing and the
     optical nudge would just add to it. */
  .close-inner .btn { justify-self: start; margin-top: 0; }

  .credentials { grid-template-columns: 1fr; }

  .credentials li {
    padding: 1.1rem 0;
  }

  .credentials li + li {
    border-left: 0;
    border-top: 1px solid rgba(242, 237, 227, 0.22);
    padding-left: 0;
  }
}

@media (max-width: 620px) {
  .hero-display { max-width: none; }
  .footer-reg { text-align: left; }
  .footer-legal { flex-direction: column; }
}

/* ---------- Overlapping scroll ----------
   The hero pins and the page rises over it. One overlap only: ink over bone is the
   only edge with enough contrast to read.

   Every band after the hero needs an opaque full-width ground and a higher
   z-index, or the pinned hero shows through at the edges — hence .close and
   .site-footer wrapping their content in .shell rather than carrying it.

   Off below 901px and for prefers-reduced-motion. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero {
    position: sticky;
    top: 0;
    z-index: 0;
  }

  /* Promoted only here, where the scroll-scrubbed blur in animations.js runs. */
  .hero-img { will-change: filter, transform; }

  .close,
  .site-footer {
    position: relative;
    z-index: 1;
    background: var(--bone);
  }

  .band-ink {
    position: relative;
    z-index: 1;
    /* The radius is what announces the overlap: one surface passing over another. */
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -18px 50px rgba(16, 16, 16, 0.16);
  }
}