/* ============================================================
   Rare&Chosen — Layout (full-bleed flow, ALL widths)
   ------------------------------------------------------------
   The page is true full-bleed: no max-width container, only 20px
   left/right gutters. Every section is a single flow column where
   the heading leads its content; rule-list dividers span edge to
   edge. Hero + Contacts stay centred. ≤600px adds stacking tweaks.
   ============================================================ */

:root {
  --pad-x:  20px;                       /* full-bleed gutters */
  --sec-py: clamp(78px, 9vw, 128px);    /* section vertical rhythm */
  --colw:   100%;                       /* headline spans the width */
  --content-w: 55%;                     /* non-headline content column */
  --measure: 62ch;                      /* readable body line length */
}

/* release the fixed Figma frame heights */
.sec--hero .sec__frame, .sec--whynow .sec__frame, .sec--whatwedo .sec__frame,
.sec--whychooseus .sec__frame, .sec--forwhom .sec__frame,
.sec--services .sec__frame, .sec--contacts .sec__frame {
  height: auto;
  min-height: 0;
}

/* every section: full-bleed, padded, vertical flow.
   align-items: center → the 55% content column is horizontally centred;
   full-width headlines are a no-op (their text stays left at the gutter). */
.sec__frame {
  max-width: none;
  margin: 0;
  padding: var(--sec-py) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(34px, 5vw, 60px);
}

/* drop the old absolute / centring positioning → natural flow */
.sec__head, .whynow__finale, .wwd, .wwd__tabs, .col, .whyus__col,
.forwhom__list, .contacts__inner, .hero__inner, .btn-anchor {
  position: static;
  inset: auto;
  left: auto; right: auto; top: auto; bottom: auto;
  transform: none;
  translate: none;
}

/* Section headlines — and the why-now finale — stay full-bleed:
   they span the frame's 20px-gutter box with left-aligned text, the
   same treatment as "Why is it relevant now more than ever." */
.sec__head, .whynow__finale { width: 100%; max-width: var(--colw); text-align: left; }

/* All other content lives in a centred 55% column:
   point lists, the tab switcher, body copy. */
.col, .whyus__col, .forwhom__list, .wwd {
  width: var(--content-w);
  max-width: var(--content-w);
}

/* CTAs: auto-width, centred under the content column */
.btn-anchor { width: auto; max-width: 100%; }

/* body copy fills its (already-narrow) content column */
.row__body, .whyus__body, .forwhom__text { max-width: 100%; }

/* HERO — locked to exactly one viewport, centred opening */
.sec--hero .sec__frame {
  height: 100vh;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  padding-block: clamp(96px, 16vh, 170px);
}
.hero__inner {
  position: relative;
  z-index: 1;
  align-items: center;
  text-align: center;
  margin-inline: auto;
  width: 100%;
  max-width: 760px;
  gap: clamp(16px, 2vw, 22px);
}

/* CONTACTS — centred closing, full screen so no prior section bleeds in */
.sec--contacts .sec__frame {
  min-height: 100svh;
  justify-content: center;
  align-items: center;
}
.contacts__inner {
  position: relative;   /* anchor the legibility halo in flow layout */
  align-items: center;
  text-align: center;
  margin-inline: auto;
  width: 100%;
  max-width: 900px;
}

/* rule-list rows: label + body side by side, trimmed gutters */
.row { gap: clamp(20px, 3vw, 50px); }
.whynow__rows .row { gap: clamp(20px, 3vw, 57px); }
.row__label { white-space: nowrap; }
.subrow { gap: clamp(16px, 3vw, 50px); }

/* ================================================================
   RESPONSIVE  —  widen the content column as the viewport narrows
   ================================================================ */
/* Tablet: 55% gets too tight — let content breathe. */
@media (max-width: 1024px) { :root { --content-w: 78%; } }

/* ================================================================
   MOBILE  —  stacking + tap targets
   ================================================================ */
@media (max-width: 600px) {
  :root { --sec-py: clamp(64px, 14vw, 100px); --content-w: 100%; }

  /* rule-list rows stack: eyebrow label above its body */
  .row { flex-direction: column; gap: 8px; }
  .whynow__rows .row, .wwd__rows .row, .services__rows .row { gap: 10px; }
  .row__label { white-space: normal; }

  /* tab strips stack into a left-aligned menu with comfortable separation */
  .wwd__tabs { flex-direction: column; gap: clamp(20px, 6vw, 30px); }
  .wwd__tab { width: 100%; text-align: left; }

  /* services nested sub-list: number above body */
  .subrow { flex-direction: column; gap: 4px; }
  .subrow__num { width: auto; }

  /* full-width tap targets for the in-flow CTAs */
  .btn-anchor.btn { width: 100%; }
  .btn--ghost { white-space: normal; text-align: center; }

  .whyus__item { gap: 4px; }
}