/* ═══════════════════════════════════════════════════════════════════════════
   OPTION 2 — one LEFT axis
   ───────────────────────────────────────────────────────────────────────────
   Everything inline: every eyebrow, headline, paragraph, button row and figure
   begins on the same vertical line down the left of the content column. It is
   the same site as Option 1 — same palette, same photograph, same node mesh,
   same words — with alignment as the only variable, so the two can be judged
   against each other rather than as two different designs.

   Scoped entirely under .align-left, so including this file changes nothing
   until that class is on the document. Option 1's build never sees it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The gold rule, rehoused ────────────────────────────────────────────────
   The eyebrow's connector bar normally sits inline, ahead of the words. On a
   left axis that is a problem: the bar plus its gap start the TEXT 33px right
   of everything below it, so the one thing this layout promises — a single
   left line — is broken by the first element on the page. The bar moves onto
   its own line above the words. Both now start on the axis, and the brand's
   signature device is kept rather than deleted. */
.align-left .eyebrow{
  display:block; text-align:left; max-width:none;
  margin-left:0; margin-right:0; padding-left:0;
}
.align-left .eyebrow::before{
  content:""; display:block; width:28px; height:2px;
  background:var(--gold); margin:0 0 11px;
}
.align-left .eyebrow::after{content:none}

/* ── Hero ── */
.align-left .hero .wrap{text-align:left}
.align-left .hero h1,
.align-left .hero .lead{margin-left:0; margin-right:0}

/* The clear centre of the veil follows the type, so the photograph is at its
   most readable behind the words rather than beside them. */
.align-left .hero-veil{
  background:
    radial-gradient(ellipse at 34% 46%, rgba(245,245,239,0) 0%, rgba(245,245,239,.55) 62%, rgba(245,245,239,.92) 100%),
    linear-gradient(180deg, rgba(245,245,239,.85) 0%, transparent 26%, transparent 68%, rgba(245,245,239,.95) 100%);
}

/* Side by side and sized to their words — a button row reads as a row here,
   where there is a left edge for it to start from. */
.align-left .hero-cta{
  flex-direction:row; align-items:center; justify-content:flex-start;
  flex-wrap:wrap; gap:14px; margin:38px 0 0;
}
.align-left .hero-cta .btn{min-width:0}

/* The figures run left along the same line, under a rule that spans the full
   column rather than a centred 740px of it. */
.align-left .hero-meta{
  display:flex; justify-content:flex-start; flex-wrap:wrap;
  gap:46px; max-width:none; margin:56px 0 0;
}
.align-left .hero-meta div{align-items:flex-start; text-align:left; gap:3px}
.align-left .hero-meta span{padding-left:0}

/* ── Inner-page heads ── */
.align-left .page-head .wrap{text-align:left}
.align-left .page-head h1,
.align-left .page-head .lead{margin-left:0; margin-right:0}

/* ── Section heads ── */
.align-left .sec-head{margin:0 0 56px; text-align:left; max-width:64ch}
.align-left .sec-head .lead{margin-left:0; margin-right:0}

/* ── Intro ──
   .intro-grid sits ON the .wrap element itself, so its margin is the page
   gutter. Zeroing it to move the copy left threw the whole block out to the
   viewport edge on wide screens; it has to keep margin:0 auto and take back
   the full column width instead. */
.align-left .intro-grid{text-align:left; max-width:var(--wrap); margin:0 auto}
.align-left .intro-grid h2{max-width:26ch; margin:0}
.align-left .intro-grid .pins{justify-content:flex-start; margin:26px 0 40px}
.align-left .intro-grid .prose{max-width:70ch; margin:0; text-align:left}

/* ── Closing band and testimonials ── */
.align-left .cta-band .wrap{text-align:left}
.align-left .cta-band .cta-copy{margin:0 0 26px; max-width:52ch}
.align-left .q-rotator{margin-left:0; margin-right:0}

/* ── Phones ──
   Option 1 stacks and narrows these to hold the centre line. Left-aligned they
   want neither: the figures stay in a wrapping row and the buttons size to
   their own words. */
@media (max-width:820px){
  .align-left .hero-meta{max-width:none; gap:26px 38px}
  .align-left .hero-cta .btn{width:auto; max-width:none}
}