/* ==========================================================================
   BrandBoost Digital — homepage prototype
   Single typeface. Full-bleed photography. No radii, no shadows, no motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — sampled from the BrandBoost brand PDF. No other hues. */
  --red: #EC0829;
  --orange: #ED7720;
  --ink: #0A0A0A;
  --paper: #FAF9F7;
  --white: #FFFFFF;
  --text: #1A1A1A;
  --text-muted: #6B6B6B;

  /* Derived neutrals (same palette, alpha only — no new hue) */
  --rule-dark: rgba(255, 255, 255, 0.16);
  --rule-light: rgba(10, 10, 10, 0.14);
  --muted-on-dark: rgba(255, 255, 255, 0.64);
  --scrim: linear-gradient(to top, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.35) 38%, rgba(10, 10, 10, 0) 72%);

  /* ONE typeface for every element on the page */
  --font: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale */
  --fs-display: clamp(2.5rem, 6.2vw, 5.25rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-stat: clamp(4rem, 11vw, 9rem);
  --fs-lead: clamp(1rem, 1.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;
  --fs-nav: 0.75rem;

  /* Tracking */
  --ls-display: -0.03em;
  --ls-h2: -0.02em;
  --ls-label: 0.12em;
  --ls-nav: 0.05em;

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* Section rhythm */
  --band-y: clamp(3.5rem, 7vw, 6.5rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;
  --max: 1440px;
  --nav-h: 60px;

  /* The only motion on the page */
  --t: 170ms linear;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

html:focus-within { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img {
  display: block;
  max-width: 100%;
  border: 0;
  border-radius: 0;
}

a { color: inherit; text-decoration: none; }

button, input { font: inherit; color: inherit; border-radius: 0; }

/* Global bans: nothing on this page is rounded or shadowed. */
* { border-radius: 0 !important; box-shadow: none !important; }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s3) var(--s4);
  background: var(--orange);
  color: var(--ink);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.skip-link:focus { left: var(--s4); top: var(--s4); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.band { width: 100%; }
.band--ink { background: var(--ink); color: var(--white); }
.band--paper { background: var(--paper); color: var(--text); }
.band--white { background: var(--white); color: var(--text); }

.band__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--band-y) var(--gutter);
}

.band__inner--tight { padding-top: clamp(2.25rem, 4vw, 3.5rem); padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }

/* Full-bleed photo panel: image touches the viewport edge, one small label. */
.panel {
  position: relative;
  width: 100%;
  background: var(--ink);
  overflow: hidden;
}
.panel > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}
.panel__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  pointer-events: none;
}
.panel__label {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1rem, 2.4vw, 1.75rem);
  margin: 0;
  color: var(--white);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */
.display {
  font-size: var(--fs-display);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: var(--ls-display);
  max-width: 22ch;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: var(--ls-h2);
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: var(--measure);
  font-weight: 400;
}

.body { max-width: var(--measure); }

.muted { color: var(--text-muted); }
.band--ink .muted { color: var(--muted-on-dark); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--rule-light);
}
.band--ink .rule { background: var(--rule-dark); }

/* --------------------------------------------------------------------------
   5. Links & buttons (the only transition on the page)
   -------------------------------------------------------------------------- */
.link {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color var(--t), text-decoration-color var(--t);
}
.link:hover { color: var(--red); text-decoration-color: var(--red); }

.band--ink .link { color: var(--white); }
.band--ink .link:hover { color: var(--orange); text-decoration-color: var(--orange); }

.btn {
  display: inline-block;
  padding: 1rem 1.75rem;
  background: var(--orange);
  color: var(--ink);
  border: 0;
  font-size: var(--fs-nav);
  font-weight: 700;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t), color var(--t);
}
.btn:hover { background: var(--red); color: var(--white); }

/* --------------------------------------------------------------------------
   6. Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--white);
  border-bottom: 1px solid var(--rule-dark);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  min-height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s6);
}
.nav__logo {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__logo em {
  font-style: normal;
  font-weight: 400;
  color: var(--orange);
}
.nav__spacer { flex: 1 1 auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.nav__link {
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--muted-on-dark);
  transition: color var(--t);
}
.nav__link:hover { color: var(--orange); }
.nav__cta {
  font-size: var(--fs-nav);
  font-weight: 700;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--orange);
  padding: 0.75rem 1.125rem;
  transition: background-color var(--t), color var(--t);
}
.nav__cta:hover { background: var(--white); color: var(--ink); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-dark);
  padding: 0.5rem 0.625rem;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--white);
}
.nav__toggle span + span { margin-top: 5px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero__panel { height: clamp(320px, 56vh, 620px); }

.hero__copy {
  display: grid;
  gap: var(--s6);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
}
.hero__actions { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   8. Split band (photo beside copy)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.split__media { height: clamp(280px, 42vw, 560px); }
.split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s5);
  padding: var(--band-y) var(--gutter);
}
.split--flip .split__media { order: 2; }

/* --------------------------------------------------------------------------
   9. Services grid
   -------------------------------------------------------------------------- */
.grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

.services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
  margin-top: var(--s7);
}
.service { display: flex; flex-direction: column; }
.service__media { height: clamp(180px, 15vw, 230px); }
/* Small tiles: stronger scrim so the number stays legible on light photography */
.service__media .panel__scrim {
  background: linear-gradient(to top, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0.86) 14%, rgba(10, 10, 10, 0.4) 30%, rgba(10, 10, 10, 0) 58%);
}
.service__media .panel__label { bottom: 0.625rem; }
.service__num {
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.service__title { margin: var(--s4) 0 var(--s2); }
.service__desc {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--s4);
  flex: 1 1 auto;
}
.service--wide { grid-column: span 2; }
.service--wide .service__media { height: clamp(180px, 15vw, 230px); }

/* --------------------------------------------------------------------------
   10. Proof band (one stat only)
   -------------------------------------------------------------------------- */
.proof { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.proof__media { height: clamp(260px, 34vw, 460px); }
.proof__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  padding: var(--band-y) var(--gutter);
}
.proof__stat {
  font-size: var(--fs-stat);
  line-height: 0.86;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--red);
}
.proof__label { max-width: 34ch; font-size: var(--fs-lead); line-height: 1.45; }

/* --------------------------------------------------------------------------
   11. Editorial list (case studies)
   -------------------------------------------------------------------------- */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-top: var(--s6);
}
.entry__media { height: clamp(220px, 26vw, 380px); }
.entry__body { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }

/* --------------------------------------------------------------------------
   12. Two-tile band
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.tile { background: var(--white); }
.tile__media { height: clamp(240px, 28vw, 420px); }
.tile__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s6) var(--gutter);
}

/* --------------------------------------------------------------------------
   13. Founder
   -------------------------------------------------------------------------- */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: center;
}
.founder__media { height: clamp(360px, 40vw, 600px); }
.founder__media > img { object-position: 50% 12%; }
.founder__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.founder__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   14. Reviews
   -------------------------------------------------------------------------- */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--s6);
}
.review { display: flex; flex-direction: column; gap: var(--s4); }
.review__quote {
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.review__mark {
  display: block;
  color: var(--red);
  font-size: 2.5rem;
  line-height: 0.8;
  font-style: normal;
  font-weight: 700;
  margin-bottom: var(--s3);
}
.review__cite {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.audit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.contact__links { display: grid; gap: var(--s3); justify-items: start; }
.contact__links .link { font-size: var(--fs-h3); color: var(--white); }
.contact__links .link:hover, .contact__links .link:focus-visible { color: var(--orange); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--s3); }
.footer__logo {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer__logo em { font-style: normal; font-weight: 400; color: var(--orange); }
.footer__tagline { font-size: var(--fs-small); color: var(--muted-on-dark); max-width: 30ch; }
.footer__colhead {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: var(--s4);
  font-weight: 500;
}
.footer__list { display: grid; gap: var(--s3); }
.footer__list a {
  font-size: var(--fs-small);
  color: var(--white);
  transition: color var(--t);
}
.footer__list a:hover { color: var(--orange); }
.footer__list li.is-static { font-size: var(--fs-small); color: var(--muted-on-dark); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-top: var(--s5);
  margin-top: var(--s7);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--fs-small);
  color: var(--muted-on-dark);
}
.footer__bottom a { transition: color var(--t); }
.footer__bottom a:hover { color: var(--orange); }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --nav-h: 56px; }

  /* Nav collapses to a toggle */
  .nav__inner { flex-wrap: wrap; gap: var(--s4); }
  .nav__spacer { display: none; }
  .nav__toggle { display: block; margin-left: auto; }
  .nav__menu {
    order: 3;
    flex: 0 0 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 180ms linear, opacity 180ms linear;
  }
  .nav__menu[data-open="true"] {
    max-height: 420px;
    opacity: 1;
    padding-bottom: var(--s4);
  }
  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule-dark);
  }
  .nav__link { font-size: 0.8125rem; }
  .nav__cta { align-self: flex-start; }

  .hero__copy { grid-template-columns: 1fr; gap: var(--s5); }
  .split, .proof, .tiles, .entry, .founder, .audit { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__copy, .proof__copy { padding-left: var(--gutter); padding-right: var(--gutter); }
  .reviews { grid-template-columns: 1fr; }
  .review { border-top: 1px solid var(--rule-light); padding-top: var(--s5); }
  .review:first-child { border-top: 0; padding-top: 0; }
  .tile + .tile { border-top: 1px solid var(--rule-light); }
  .entry__media { height: clamp(220px, 46vw, 340px); }
  .founder__media { height: clamp(320px, 78vw, 520px); }
}

@media (max-width: 620px) {
  .services { grid-template-columns: 1fr; }
  .service--wide { grid-column: span 1; }
  .service__media, .service--wide .service__media { height: clamp(200px, 52vw, 260px); }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .display { max-width: none; }
  .btn { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   18. Reduced motion — kill even the hover transitions
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .nav__menu { transition: none !important; }
}

/* ==========================================================================
   19. Services page (services.html) — additive only
   Everything else on that page reuses the primitives above:
   .band / .split / .split--flip / .panel / .panel__label / .service__num.
   ========================================================================== */

/* Current-page marker in the shared nav (homepage sets no aria-current, so
   this rule is inert there). */
.nav__link[aria-current="page"] { color: var(--white); font-weight: 600; }

/* Intro band: heading stacked over the lead paragraph. */
.page-intro { display: grid; gap: var(--s5); }

/* Full-bleed split panels carrying a service numeral. The default .panel
   scrim is tuned for longer labels on darker photography; on the lighter
   shots here the numeral loses contrast, so darken the foot of the panel.
   Stops are in px, not %, because these panels range from 280px (stacked,
   mobile) to 560px tall — percentage stops let the dark zone shrink out from
   under the numeral on the short ones. 72px covers the label box at any
   height. */
.split__media--num .panel__scrim {
  background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0, rgba(10, 10, 10, 0.9) 72px, rgba(10, 10, 10, 0.35) 150px, rgba(10, 10, 10, 0) 60%);
}
/* The Unsplash URLs return each photo at its own native aspect ratio, so an
   in-flow image would set the grid row height (portrait shots pushed rows past
   1000px and stranded the copy in whitespace). Taking the image out of flow
   lets .split__media's min-height govern the row and object-fit do the
   cropping — same panel rhythm as the homepage split. */
.split__media--num > img { position: absolute; inset: 0; }

/* Numerals read larger than a word-label at this panel scale. */
.split__media--num .service__num { font-size: 1.125rem; letter-spacing: 0.06em; }

/* "What's included" lists — plain, no markers, just rhythm between rows. */
.svc__list { display: grid; gap: var(--s3); }

/* ==========================================================================
   20. Case studies page (case-studies.html) — additive only
   The page is the services-page layout with words where the numerals were:
   .band / .split / .split--flip / .split__media--num (reused purely for its
   strong foot-of-panel scrim and out-of-flow image — see note above; the six
   case-study photos include very light shots where the default .panel scrim
   leaves the label unreadable) / .page-intro / .svc__list.
   ========================================================================== */

/* Category tag in the panel label. Same colour and weight the services page
   gives its numerals, but NOT the 1.125rem size bump — that exists because two
   digits read small, and a multi-word tag at that size overruns the panel on a
   375px viewport. Inherits uppercase, tracking and 11px from .panel__label. */
.cs__tag { color: var(--orange); font-weight: 700; }

/* ==========================================================================
   21. About page (about.html) — additive only
   The page is the same kit as the two pages above: .band / .split /
   .split__media--num / .page-intro / .grid-head / .rule / .svc__list /
   .founder__name / .audit. Two things it needs that nothing above covers.
   ========================================================================== */

/* Sub-group inside .split__copy. That column is a 1.5rem (--s5) flex stack,
   which is the right gap BETWEEN blocks but too loose inside one: the name and
   its title line, or a sub-heading and the list it introduces, have to read as
   a single unit rather than two stacked items. --s3 matches the gap .svc__list
   already puts between its own rows. */
.about__group { display: grid; gap: var(--s3); }

/* The founder portrait is the only portrait-orientation source in the kit
   (800x1200 native) and the only one dropped into a landscape split panel.
   Cover-cropping from the centre puts the crop line around y200 of the source
   and slices the top of the head — verified at both 1440 and 375. 10% puts it
   near y58 at both widths, which clears the hairline (y95) with headroom and
   still fills the foot of the panel with the dark suit the label sits on. */
.split__media--portrait > img { object-position: 50% 10%; }

/* Core team: plain name/role text grid — no photography, no cards, no rules.
   Two columns on desktop, one below 620px (same breakpoint .services uses to
   go single-column). --s1 pairs the role to the name above it; the row gap
   keeps daylight between members without needing a border. */
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.8vw, 2.25rem) clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--s7);
}
.team__member { display: grid; gap: var(--s1); }

@media (max-width: 620px) {
  .team { grid-template-columns: 1fr; }
}

/* ==========================================================================
   22. Insights page (insights.html) — additive only
   Text-only page: .band / .band__inner / .page-intro / .rule / .h2 / .body /
   .link / .audit, plus the editorial list below. No photography, so nothing
   here touches .panel.
   ========================================================================== */

/* Editorial index. Title left, excerpt and link right — the same two-column
   read as .entry on the homepage, with the title column doing the job the
   photo does there. Hairlines between rows carry the separation, so there are
   no cards and no second rule element. */
.insights { display: grid; }

.insight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--rule-light);
}
/* No closing hairline: the ink contact band already ends the list. */
.insight:last-child { border-bottom: 0; }

/* .h2 is a 22ch-free display size tuned for one-line section headings; these
   are sentence-length titles set two-up, so cap the measure and pull the
   tracking back to what reads right at list scale. */
.insight__title { max-width: 26ch; }

.insight__body { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }

@media (max-width: 900px) {
  .insight { grid-template-columns: 1fr; }
  .insight__title { max-width: none; }
}

/* ==========================================================================
   23. Contact page (contact.html) — additive only
   Form left, plain contact details right. Reuses .field/.field input from
   the original audit form pattern (same visual language, re-added here
   since that form was removed from the homepage entirely).
   ========================================================================== */
.contact-page {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.contact-form { display: grid; gap: var(--s4); }

.field { display: grid; gap: var(--s2); }
.field label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field textarea {
  width: 100%;
  padding: 0.9375rem 1rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rule-light);
  font-family: var(--font);
  font-size: var(--fs-body);
  resize: vertical;
  transition: border-color var(--t);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }
.field input:hover, .field input:focus,
.field textarea:hover, .field textarea:focus { border-color: var(--orange); }

.contact-form .btn { justify-self: start; margin-top: var(--s2); }
.contact-form__status {
  font-size: var(--fs-small);
  color: var(--orange);
  min-height: 1.5rem;
}
.contact-form__status:empty { min-height: 0; }

.contact-details { display: grid; gap: var(--s7); }
.contact-details .h3 { margin-bottom: var(--s2); }
.contact-details .link { font-size: var(--fs-h3); }

@media (max-width: 900px) {
  .contact-page { grid-template-columns: 1fr; }
}

/* ==========================================================================
   24. Legal pages (privacy.html, terms.html) — additive only
   Plain single-column document. No photography, no split panels — these
   pages exist to be read, not sold, matching the "internal pages stay lean"
   rule the rest of the site follows.
   ========================================================================== */
.legal {
  max-width: var(--measure);
  display: grid;
  gap: var(--s5);
}
.legal h2 { margin-top: var(--s3); }

/* ==========================================================================
   25. Floating WhatsApp button — every page
   Deliberate, scoped exception to two site rules: it's circular (radius 0
   everywhere else) and it's WhatsApp's own brand green (no other hue on the
   site besides the BrandBoost palette). Both are necessary here — a square,
   on-brand-colored chat button reads as broken, not restrained, since users
   recognize this control by its shape and color, not by matching the site.
   No box-shadow though: that rule holds everywhere, including here.
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: 60;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  background: #25D366;
  border-radius: 50% !important;
  transition: background-color var(--t);
}
.whatsapp-float svg { width: 1.6rem; height: 1.6rem; fill: #fff; }
.whatsapp-float:hover { background: #1DA851; }
.whatsapp-float:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
}