/* ============================================================================
   MingleMinds — Homepage
   Colour and type tokens from the supplied MingleMinds design system.
   The display tier is the approved additive web extension: it adds sizes
   ABOVE the product scale and changes nothing that already exists.

   Composition principles holding the page together as one site rather than
   a stack of slides:
     · one 12-column grid and one gutter shared by every section
     · alternating edge bleeds  — Life left, Recognition left then right,
       Friends right, Lounge full-bleed
     · deliberate overlaps at section seams (Friends inset, Lounge phone)
     · scale contrast between neighbouring sections rather than repetition
   ========================================================================== */

:root{
  --bg:            #151515;   /* Background       */
  --secondary:     #272727;   /* Secondary        */
  --stroke:        #525252;   /* Container Stroke */
  --gray-text:     #A7A7A7;   /* Gray Text        */
  --black-text:    #2F2F2F;   /* Black Text       */
  --white:         #FFFFFF;   /* White            */

  --brand-a:       #F25FA3;
  --brand-b:       #E3242F;
  --brand:         linear-gradient(90deg, var(--brand-a) 0%, var(--brand-b) 100%);

  /* PROPOSED TOKEN — the product system has no light surface. Pure #FFFFFF
     read cold beside this warm photography once Life dropped to a single
     image. Set to #FFFFFF to revert. */
  --light-ground:  #F3F1EE;
  --light-ink:     #232323;
  --light-ink-2:   #5E5A56;

  /* Recognition ground: cooler and deeper than --bg, so the sequence reads as
     the page's low point without a heavy grade on the photograph. */
  --rec-ground:    #0E0F10;

  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 88px);
  --page:   1560px;
}

/* ============================================================ base ======= */

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--gray-text);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ display: block; max-width: 100%; }
figure{ margin: 0; }
h1, h2, h3{ margin: 0; color: var(--white); font-weight: 600; text-wrap: balance; }
p{ margin: 0; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--brand-a); outline-offset: 4px; }

.skip{
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--white); color: var(--bg);
  padding: 10px 16px; font-size: 14px; font-weight: 600;
  transition: top .18s ease;
}
.skip:focus{ top: 8px; }

/* ============================================ display type (additive) ==== */

.d-xl{
  display: block;
  font-size: clamp(34px, min(6.2vw, 8.4vh), 104px);
  line-height: 1.05; letter-spacing: -0.02em; font-weight: 600;
}
.d-l{
  font-size: clamp(32px, 4.4vw, 72px);
  line-height: 1.08; letter-spacing: -0.02em; font-weight: 600;
}
.d-m{
  font-size: clamp(26px, 3vw, 48px);
  line-height: 1.1; letter-spacing: -0.015em; font-weight: 600;
}
/* Weight drop: the reason, and the name, are spoken rather than declared. */
.d-xl--light, .d-l--light{ font-weight: 400; }

/* Feature name in the brand pink already defined above (--brand-a). Colour
   only — size, weight, line-height and spacing are inherited unchanged. */
.brand-pink{ color: var(--brand-a); }

/* ================================================================ CTA ==== */

.btn{
  display: inline-block;
  font-family: inherit; font-size: 16px; font-weight: 500;
  line-height: 1; letter-spacing: .01em;
  padding: 15px 26px; border: 0; text-decoration: none;
  border-radius: 10px;
  color: var(--white); background: var(--secondary);
  transition: transform .18s ease, filter .18s ease;
}
/* White on the gradient's pink end is 3.0:1 — below AA. A uniform darkening
   layer over the same gradient takes it to ~4.9:1. The logo and the payoff
   line keep the exact brand values. */
.btn--brand{
  background-image: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.24)), var(--brand);
  background-color: transparent;
  color: var(--white);
}
.btn--lg{ font-size: 17px; padding: 19px 34px; }
.btn:hover{ filter: brightness(1.08); }
.btn:active{ transform: translateY(1px); }

/* ================================================================ nav ==== */

.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: linear-gradient(to bottom, rgba(21,21,21,.78) 0%, rgba(21,21,21,0) 100%);
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck{
  background: rgba(21,21,21,.94);
  border-bottom-color: #232323;
  backdrop-filter: blur(10px);
}
.nav__inner{
  max-width: var(--page); margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__logo{ display: block; line-height: 0; }
/* The lockup stacks mark over wordmark, so the wordmark is only ~30% of the
   asset's height — it needs more room in the bar than a flat logo would. */
.nav__logo img{ width: auto; height: 46px; }

@media (max-width: 560px){
  .nav__logo img{ height: 34px; }
  .btn{ font-size: 15px; padding: 13px 20px; }
}

/* =============================================================== hero ==== */
/* Deck-cover composition: logo top-left, copy bottom-left, CTA far right.
   Class names are unchanged from the previous hero so the entrance cascade
   in site.js keeps working without modification. */

.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--bg);
}
.hero__media{ position: absolute; inset: 0; }
.hero__img{
  width: 100%; height: 100%;
  object-fit: cover;
  /* Holds the television, her landscape phone and the whole social scene. */
  object-position: 0% 50%;
  will-change: transform;
}
/* Restrained: a soft lift under the copy and a gentle left weight. The room's
   own warmth carries the frame — the scrim only buys legibility. */
.hero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(21,21,21,.52) 0%, rgba(21,21,21,0) 24%),
    linear-gradient(to top,    rgba(21,21,21,.86) 0%, rgba(21,21,21,.44) 22%,
                               rgba(21,21,21,0) 48%),
    linear-gradient(to right,  rgba(21,21,21,.58) 0%, rgba(21,21,21,.16) 34%,
                               rgba(21,21,21,0) 58%);
}
.hero__body{
  position: relative;
  width: 100%; max-width: var(--page); margin: 0 auto;
  padding: 84px var(--gutter) clamp(38px, 5.5vh, 74px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero__logo{
  width: clamp(190px, 21vw, 330px); height: auto;
}

/* Copy left, CTA pushed to the far right, both sitting on the same baseline. */
.hero__bottom{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(28px, 4vw, 76px);
}
.hero__copy{ max-width: min(100%, 52em); }

.hero__statement{ max-width: none; }
.hero__statement .d-xl{
  font-size: clamp(27px, min(3.4vw, 5vh), 52px);
  line-height: 1.1; letter-spacing: -0.02em; font-weight: 600;
}
/* Two body lines, read as one block. */
.hero__identity{
  margin-top: clamp(14px, 2vh, 24px);
  font-size: clamp(15px, 1.35vw, 21px); font-weight: 400;
  line-height: 1.45; letter-spacing: 0;
  color: var(--white); max-width: none;
}
.hero__support{
  margin: 2px 0 0;
  font-size: clamp(15px, 1.35vw, 21px); font-weight: 400;
  line-height: 1.45;
  color: var(--white); max-width: none;
}
.hero__avail{
  margin-top: clamp(14px, 2vh, 24px);
  font-size: clamp(13px, 1.05vw, 16px); line-height: 1.4;
  color: var(--gray-text);
}

@media (max-width: 900px){
  /* A narrow viewport sees only ~26% of this 16:9 room. Centring the crop put
     the television alone in frame, which read as a product screenshot rather
     than a social scene. This keeps two women, her landscape phone and the
     television together in the slice. */
  .hero__img{ object-position: 26% 50%; }
  /* CTA drops below the copy so neither is squeezed. */
  .hero__bottom{ flex-direction: column; align-items: flex-start; gap: clamp(22px, 3.4vh, 34px); }
  .hero__copy{ max-width: none; }
}

/* =============================================================== life ==== */
/* One photograph, deliberately. The frame bleeds off the left edge and the
   words sit low against it, so the light ground reads as air rather than as
   space where images used to be. */

.life{
  background: var(--light-ground);
  color: var(--light-ink);
  padding: clamp(76px, 11vw, 168px) var(--gutter);
  overflow: hidden;
}
.life__grid{
  max-width: var(--page); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 3vw, 56px);
  row-gap: clamp(28px, 4vw, 52px);
  align-items: end;
}
/* Ratio lives on the figure, not the img: the img carries HTML width/height
   attributes, so with width:100% both dimensions are definite and an
   aspect-ratio on the image itself is ignored. */
.life__figure{
  grid-column: 1 / 9;
  margin-left: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter));
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.life__figure img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
.life__words{ grid-column: 9 / 13; padding-bottom: clamp(6px, 3vw, 54px); }
.life__words h2{ color: var(--light-ink); }
.life__sub{
  margin-top: clamp(16px, 2vw, 28px);
  font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5;
  color: var(--light-ink-2);
}

@media (max-width: 900px){
  .life__grid{ grid-template-columns: 1fr; align-items: start; }
  /* Native 4:3 on mobile — no crop, so all three men stay in the frame.
     Friendship is the point of this photograph. */
  .life__figure{ grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .life__words{ grid-column: 1 / -1; padding-bottom: 0; }
}

/* ======================================================== recognition ==== */
/* Both beats show the same photograph. Each figure is portrait, so the cover
   crop reveals only ~45% of a 16:9 frame — Beat A pans to the street outside,
   Beat B to the room inside. Never presented whole, never side by side. */

.rec{ background: var(--rec-ground); overflow: hidden; }

.rec__beat{
  max-width: var(--page); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 3vw, 56px);
  min-height: 88svh;
  align-items: center;
}
.rec__fig{ overflow: hidden; }
.rec__fig img{ width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Beat A — outside. Bleeds off the left edge, sits high. */
.rec__fig--a{
  grid-column: 1 / 6; grid-row: 1;
  margin-left: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter));
  aspect-ratio: 0.86;
  align-self: start; margin-top: clamp(24px, 5vh, 56px);
}
.rec__fig--a img{ object-position: 0% 50%; }

/* Beat B — inside. Narrower and taller, bleeds right, hangs low. Equal
   dignity, unequal composition: same type scale, a different frame. */
.rec__fig--b{
  grid-column: 8 / 13; grid-row: 1;
  margin-right: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter));
  aspect-ratio: 0.78;
  align-self: end; margin-bottom: clamp(20px, 4vh, 44px);
}
.rec__fig--b img{ object-position: 100% 50%; }

.rec__beat--a .rec__copy{ grid-column: 7 / 13; grid-row: 1; }
.rec__beat--b .rec__copy{ grid-column: 1 / 7;  grid-row: 1; }
/* Held down from the page's largest display size so these lines land in three
   lines rather than five — the locked copy has to read as a sentence. */
.rec__copy h2{
  font-size: clamp(28px, min(4.6vw, 6.2vh), 76px);
  max-width: min(100%, 14em);
}

/* Beat C — punctuation, not a section. A short pause that closes Recognition
   rather than another full screen. The page's only gradient on type. */
.rec__beat--c{
  min-height: 0;
  padding-block: clamp(52px, 8vh, 104px);
  grid-template-columns: 1fr; justify-items: center;
}
.rec__ten{
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  background: var(--brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

@media (max-width: 900px){
  .rec__beat{ grid-template-columns: 1fr; min-height: 0; padding-block: clamp(56px, 10vw, 90px); row-gap: clamp(26px, 5vw, 40px); }
  .rec__fig--a, .rec__fig--b{
    grid-column: 1 / -1; grid-row: auto;
    align-self: auto; margin-top: 0; margin-bottom: 0;
    aspect-ratio: 0.92;
  }
  .rec__fig--a{ margin-left: calc(var(--gutter) * -1); width: calc(100% + var(--gutter)); }
  .rec__fig--b{ margin-right: calc(var(--gutter) * -1); margin-left: 0; width: calc(100% + var(--gutter)); }
  .rec__beat--a .rec__copy,
  .rec__beat--b .rec__copy{ grid-column: 1 / -1; grid-row: auto; }
  .rec__beat--c{ padding-block: clamp(52px, 12vw, 80px); }
}

/* =============================================================== solo ==== */
/* Rhythm change: the one section that is not a big lifestyle photograph.
   Tighter measure, inset from the page edges, the phone given enough scale
   that the three actions and the whole bottom navigation stay readable. */

.solo{
  background: var(--secondary);
  padding: clamp(64px, 8vw, 116px) var(--gutter);
}
.solo__inner{
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 54fr 46fr;
  column-gap: clamp(32px, 5vw, 92px);
  align-items: center;
}
/* Portrait window over a 16:9 source: the cover crop keeps the hands and the
   phone and drops the empty table either side, so the screen renders large. */
.solo__figure{
  aspect-ratio: 0.74; overflow: hidden;
  background: #191919;
}
.solo__figure img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 49% 50%;
}
.solo__words h2{ color: var(--white); }
.solo__rule{
  display: block; width: 56px; height: 1px;
  background: var(--stroke);
  margin: clamp(22px, 3vw, 34px) 0;
}
.solo__then{
  font-size: clamp(17px, 1.55vw, 25px); line-height: 1.4;
  color: var(--gray-text); max-width: min(100%, 20em);
}

@media (max-width: 900px){
  .solo__inner{ grid-template-columns: 1fr; row-gap: clamp(28px, 5vw, 44px); }
  .solo__figure{ aspect-ratio: 0.86; }
}

/* ============================================================ friends ==== */
/* One photograph now — the one that proves the copy. It carries the section. */

.friends{
  background: var(--bg);
  padding: clamp(72px, 9.5vw, 142px) 0;
  overflow: hidden;
}
.friends__grid{
  max-width: var(--page); margin: 0 auto;
  padding-left: var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 3vw, 56px);
  align-items: center;
}
.friends__words{ grid-column: 1 / 5; grid-row: 1; z-index: 2; }
.friends__sub{
  margin-top: 18px; font-size: clamp(16px, 1.2vw, 18px);
  color: var(--gray-text);
}
.friends__photo{
  grid-column: 5 / 13; grid-row: 1;
  margin-right: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter));
}
.friends__photo img{
  width: 100%; height: clamp(420px, 76vh, 860px);
  object-fit: cover; object-position: 50% 46%;
}

@media (max-width: 900px){
  .friends__grid{ grid-template-columns: 1fr; row-gap: clamp(26px, 5vw, 44px); }
  .friends__words, .friends__photo{ grid-column: 1 / -1; grid-row: auto; }
  .friends__photo img{ height: clamp(300px, 48vh, 440px); }
}

/* ============================================================= lounge ==== */
/* One visual moment. The headline pays off Friends; the second line keeps her
   as the decision-maker while her friends react around her. */

.lounge{
  position: relative; overflow: hidden;
  min-height: 94svh;
  display: flex; align-items: flex-end;
  background: var(--bg);
}
.lounge__media{ position: absolute; inset: 0; }
.lounge__media img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.lounge__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,21,21,.94) 0%, rgba(21,21,21,.60) 24%, rgba(21,21,21,0) 56%);
}
.lounge__copy{
  position: relative;
  width: 100%; max-width: var(--page); margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 9vh, 116px);
}
.lounge__copy h2{ max-width: min(100%, 12em); }
.lounge__line{
  margin-top: clamp(16px, 2.2vh, 26px);
  font-size: clamp(17px, 1.5vw, 24px); line-height: 1.4;
  color: var(--gray-text);
}

@media (max-width: 900px){
  .lounge{ min-height: 78svh; }
  .lounge__media img{ object-position: 56% 42%; }
}

/* ============================================================ connect ==== */
/* A compact explanatory beat, not another emotional full-screen section.
   Contained rather than full-bleed — the change of register is what marks it
   as an explanation after the Lounge Mode payoff. The photograph runs at its
   native 16:9 so nothing that carries the meaning is cropped away: the
   television, the QR code, the raised iPhone and the Apple TV box. */

.connect{
  background: var(--bg);
  /* Top padding eased so the connection reads as continuous with the Lounge
     Mode frame above it rather than as a separate destination. */
  padding: clamp(48px, 5vw, 72px) clamp(20px, 2.5vw, 36px) clamp(76px, 9vw, 140px);
}
/* A two-column row rather than the 12-column grid: the image and the headline
   compete for the same width here, and the ratio needs finer control than
   twelfths allow. Slightly narrower side padding buys the width back. */
.connect__inner{
  max-width: var(--page); margin: 0 auto;
  display: grid;
  grid-template-columns: 68fr 32fr;
  column-gap: clamp(18px, 1.8vw, 26px);
  align-items: center;
}
.connect__figure img{ width: 100%; height: auto; }   /* native ratio, uncropped */

/* Held below the shared display scale so "Connect to MingleMinds" fits on one
   line and the headline reads in three lines, not four. */
.connect__words h2{
  color: var(--white);
  font-size: clamp(24px, 2.35vw, 37px);
  line-height: 1.14; letter-spacing: -0.015em;
}
.connect__line{
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: clamp(17px, 1.45vw, 23px); line-height: 1.4;
  color: var(--gray-text);
}

@media (max-width: 900px){
  .connect__inner{ grid-template-columns: 1fr; row-gap: clamp(24px, 4vw, 38px); }
}

/* ============================================================== close ==== */
/* The brand conclusion. The connection line is the dominant thought; the
   locked positioning line follows as the reason, in the same weight-drop
   the hero uses. Tightened so it reads as a considered ending, not a small
   cluster adrift in black. */

.close{
  background: #0B0B0B;
  padding: clamp(92px, 12vw, 176px) var(--gutter) clamp(84px, 11vw, 156px);
}
.close__inner{
  max-width: 1000px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.close__logo{ width: clamp(232px, 25vw, 400px); height: auto; }
.close__statement{
  margin: clamp(34px, 4.6vw, 60px) 0 0;
  font-size: clamp(30px, 4.3vw, 70px); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.025em; color: var(--white);
  max-width: min(100%, 15em);
}
.close__second{
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: clamp(16px, 1.35vw, 21px); font-weight: 400;
  line-height: 1.45; color: var(--gray-text);
}
.close__cta{ margin-top: clamp(30px, 3.6vw, 46px); }
.close__avail{
  margin-top: clamp(14px, 1.8vw, 20px);
  font-size: clamp(13px, 1vw, 15px); line-height: 1.45;
  color: #8C8C8C;
}

/* ============================================================= footer ==== */
/* Functional and deliberately secondary to the close above it. */

.foot{
  background: #0B0B0B;
  border-top: 1px solid #1E1E1E;
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(44px, 5vw, 60px);
}
.foot__inner{
  max-width: 900px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 2.6vw, 30px);
}
.foot__privacy{
  font-size: 13.5px; line-height: 1.6;
  color: #8C8C8C; max-width: 62ch;
}
.foot__links{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 2.4vw, 34px);
}
.foot__links a{
  font-size: 14px; font-weight: 500; color: #BDBDBD;
  text-decoration: none; transition: color .18s ease;
  /* Comfortable tap target without changing the visual weight. */
  padding: 10px 2px; line-height: 1.2;
}
.foot__links a:hover{ color: var(--white); }
.foot__legal{ font-size: 13px; color: #8C8C8C; }

/* ======================================================= document pages == */
/* Temporary placeholder routes behind the footer links. */

.doc{
  min-height: 78svh;
  padding: clamp(128px, 16vw, 210px) var(--gutter) clamp(80px, 10vw, 130px);
  background: var(--bg);
}
.doc__inner{ max-width: 720px; margin: 0 auto; }
.doc__eyebrow{
  font-size: 13px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #9A9A9A; margin-bottom: clamp(18px, 2vw, 26px);
}
.doc__title{
  font-size: clamp(30px, 4vw, 56px); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--white);
}
.doc__body{
  margin-top: clamp(22px, 2.6vw, 32px);
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6;
  color: var(--gray-text); max-width: 56ch;
}
.doc__back{
  display: inline-block; margin-top: clamp(32px, 4vw, 48px);
  font-size: 14px; font-weight: 500; color: #BDBDBD;
  text-decoration: none; border-bottom: 1px solid #3A3A3A;
  padding-bottom: 3px; transition: color .18s ease, border-color .18s ease;
}
.doc__back:hover{ color: var(--white); border-bottom-color: #6E6E6E; }


/* ------------------------------------------- long-form policy documents -- */
/* An extension of the .doc page above, not a second system. The placeholder
   pages use .doc__title + .doc__body; a full policy needs headings, lists,
   a disclosure block and inline links as well. Everything below inherits the
   same ground, measure, type scale and responsive tiers. */

.doc__inner{ overflow-wrap: break-word; }

.doc__meta{
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: 14px; line-height: 1.5; color: #8C8C8C;
}

.doc__h2{
  margin: clamp(46px, 5.4vw, 74px) 0 0;
  font-size: clamp(22px, 2.1vw, 28px); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--white);
  max-width: 22em;
}
.doc__h3{
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 600;
  line-height: 1.3; color: var(--white);
}

/* The background-check disclosure. Legally significant, so it is set apart
   and never collapsed, hidden or reduced below the required size. */
.doc__notice{
  margin-top: clamp(22px, 2.6vw, 32px);
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 32px);
  border-left: 3px solid var(--brand-a);
  background: var(--secondary);
  font-size: clamp(18px, 1.5vw, 22px);   /* floor is 18px = 13.5pt */
  font-weight: 700; line-height: 1.35; letter-spacing: .01em;
  color: var(--white); max-width: none;
}
/* <strong> defaults to `bolder`, which resolves to 900 here — a weight the
   Montserrat subset does not load, so the browser would synthesise it. */
.doc__notice strong{ font-weight: inherit; }

.doc__list{
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  padding-left: 1.25em;
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6;
  color: var(--gray-text); max-width: 56ch;
}
.doc__list li{ margin-top: 10px; padding-left: .25em; }
.doc__list li::marker{ color: #6E6E6E; }

/* Inline links read as links against the body grey without shouting. */
.doc__inner :is(p, li) a{
  color: var(--white); text-decoration: underline;
  text-decoration-color: #5A5A5A; text-underline-offset: 3px;
  transition: text-decoration-color .18s ease;
}
.doc__inner :is(p, li) a:hover{ text-decoration-color: var(--brand-a); }

.doc__strong{ color: var(--white); font-weight: 600; }

@media (max-width: 560px){
  .doc__h2{ font-size: clamp(21px, 5.6vw, 25px); }
  .doc__h3{ font-size: clamp(17px, 4.6vw, 19px); }
  .doc__list{ font-size: clamp(16px, 4.3vw, 18px); }
  .doc__notice{ font-size: clamp(18px, 4.8vw, 21px); }
}

/* ========================================================== responsive === */
/* Desktop above is untouched. Everything below adapts progressively.
   Tiers:  <=1024 intermediate   ·   <=900 stack   ·   <=560 phone
   The <=900 stacking rules live with their own sections above; this block
   handles the phone tier as one system so the same decisions aren't
   re-litigated section by section. */

/* Images that sit inside a gutter-padded section run edge to edge on a phone.
   Bleeding off one side only reads as a mistake at this width; bleeding both
   sides reads as a decision. */
@media (max-width: 560px){
  .life__figure,
  .rec__fig--a,
  .rec__fig--b,
  .solo__figure,
  .friends__photo,
  .connect__figure{
    margin-inline: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
  }
}

/* ---------------------------------------------------------------- hero -- */
@media (max-width: 560px){
  /* Recomposed rather than shrunk: the photograph keeps the top of the screen
     clean so the women, her phone and the television read, and every word
     moves into a solid scrim at the bottom. */
  .hero__body{
    justify-content: flex-end;
    gap: clamp(20px, 3.4vh, 34px);
    padding-top: 84px;
  }
  .hero__img{ object-position: 21% 50%; }
  .hero__scrim{
    background:
      linear-gradient(to bottom, rgba(21,21,21,.55) 0%, rgba(21,21,21,0) 15%),
      linear-gradient(to top,    rgba(21,21,21,.94) 0%, rgba(21,21,21,.74) 26%,
                                 rgba(21,21,21,.28) 44%, rgba(21,21,21,0) 64%);
  }
  .hero__logo{ width: clamp(168px, 46vw, 220px); }
  .hero__statement .d-xl{ font-size: clamp(26px, 7vw, 34px); }
  .hero__identity,
  .hero__support{ font-size: clamp(15px, 4.1vw, 17px); }
  .hero__avail{ font-size: 13px; }
}

/* ---------------------------------------------------------------- life -- */
@media (max-width: 560px){
  .life{ padding-block: clamp(56px, 13vw, 76px); }
  .life__figure{ aspect-ratio: 4 / 3; }
  .life__grid{ row-gap: clamp(22px, 5vw, 30px); }
}

/* --------------------------------------------------------- recognition -- */
@media (max-width: 560px){
  /* Sequence over alternation: image then statement, twice, then the payoff.
     The desktop left/right swap has no meaning in a single column. */
  .rec__beat{ padding-block: clamp(44px, 9vw, 64px); row-gap: clamp(20px, 4.5vw, 28px); }
  .rec__fig--a, .rec__fig--b{ aspect-ratio: 0.95; }
  .rec__copy h2{ font-size: clamp(26px, 7.2vw, 33px); max-width: none; }
  .rec__beat--c{ padding-block: clamp(38px, 9vw, 56px); }
  .rec__ten{ font-size: clamp(21px, 5.6vw, 26px); }
}

/* ---------------------------------------------------------------- solo -- */
@media (max-width: 560px){
  /* The interface is the evidence here. A 16:9 frame at this width renders the
     phone ~205px wide and the navigation becomes unreadable, so the crop
     tightens onto the hands and the device. Vertical extent is untouched,
     so the three actions and the whole bottom navigation stay in frame. */
  .solo{ padding-block: clamp(56px, 13vw, 78px); }
  .solo__figure{ aspect-ratio: 0.62; }
  .solo__words h2{ font-size: clamp(26px, 7.2vw, 33px); }
  .solo__then{ font-size: clamp(16px, 4.2vw, 18px); }
  .solo__rule{ margin: 20px 0; }
}

/* ------------------------------------------------------------- friends -- */
@media (max-width: 560px){
  .friends{ padding-block: clamp(56px, 13vw, 80px); }
  .friends__grid{ padding-left: 0; padding-inline: var(--gutter); }
  .friends__photo img{ height: auto; aspect-ratio: 4 / 3; object-position: 52% 46%; }
  .friends__words h2{ font-size: clamp(25px, 6.8vw, 31px); }
}

/* -------------------------------------------------------------- lounge -- */
@media (max-width: 560px){
  /* Crop holds the chain: her phone low in frame, the television above it,
     her friends between. Losing any one of the three loses the point. */
  .lounge{ min-height: 74svh; }
  .lounge__media img{ object-position: 54% 44%; }
  .lounge__scrim{
    background: linear-gradient(to top, rgba(21,21,21,.96) 0%, rgba(21,21,21,.80) 20%,
                                        rgba(21,21,21,.30) 40%, rgba(21,21,21,0) 62%);
  }
  .lounge__copy h2{ font-size: clamp(27px, 7.4vw, 34px); max-width: none; }
  .lounge__line{ font-size: clamp(16px, 4.2vw, 18px); }
}

/* ------------------------------------------------------------- connect -- */
@media (max-width: 560px){
  /* Full width plus a modest lean to the right of frame: the raised iPhone,
     the QR code on the television and the Apple TV box below it all sit in
     that half, and they are what the section has to prove. */
  .connect{ padding-block: clamp(44px, 10vw, 64px) clamp(60px, 14vw, 88px); padding-inline: var(--gutter); }
  .connect__figure{ aspect-ratio: 1.24; overflow: hidden; }
  .connect__figure img{ width: 100%; height: 100%; object-fit: cover; object-position: 86% 50%; }
  .connect__inner{ row-gap: clamp(20px, 4.5vw, 28px); }
  .connect__words h2{ font-size: clamp(25px, 6.8vw, 31px); }
  .connect__line{ font-size: clamp(16px, 4.2vw, 18px); }
}

/* --------------------------------------------------------------- close -- */
@media (max-width: 560px){
  .close{ padding-block: clamp(72px, 17vw, 104px) clamp(64px, 15vw, 92px); }
  .close__logo{ width: clamp(184px, 52vw, 240px); }
  .close__statement{
    font-size: clamp(28px, 7.8vw, 36px);
    margin: clamp(26px, 6vw, 36px) 0 0;
  }
  .close__second{ font-size: clamp(15px, 4vw, 17px); margin-top: 16px; }
  .close__cta{ margin-top: 28px; }
  .close__avail{ font-size: 13px; margin-top: 14px; }
}

/* -------------------------------------------------------------- footer -- */
@media (max-width: 560px){
  .foot{ padding-block: clamp(30px, 7vw, 42px) clamp(34px, 8vw, 46px); }
  .foot__inner{ gap: clamp(14px, 3.5vw, 20px); }
  .foot__privacy{ font-size: 13.5px; max-width: 42ch; }
  .foot__links{ gap: 4px 20px; }
}

/* ------------------------------------------------------- document pages -- */
@media (max-width: 560px){
  .doc{ padding: 104px var(--gutter) clamp(56px, 14vw, 84px); min-height: 0; }
  .doc__title{ font-size: clamp(28px, 8vw, 38px); }
  .doc__body{ font-size: clamp(16px, 4.3vw, 18px); }
  .doc__back{ padding-block: 8px 6px; }
}

/* ------------------------------------------------- intermediate widths --- */
@media (min-width: 561px) and (max-width: 1024px){
  /* Between phone and desktop the single column would leave very long line
     lengths, so measures are capped rather than the layout re-thought. */
  .rec__copy h2, .solo__words h2, .connect__words h2,
  .friends__words h2, .lounge__copy h2{ max-width: 16em; }
  .solo__then, .connect__line, .lounge__line, .friends__sub{ max-width: 34em; }
  .life__words h2{ max-width: 14em; }
}

/* ============================================================ cinematic === */
/* Directed motion. Every hidden/offset state below is scoped to
   `.motion-ready`, which JavaScript puts on <html> only after it has
   successfully initialised. If the script never runs, none of these rules
   apply and the page is the static site.

   Each animated element carries its own duration and delay so the stagger is
   declarative: JS adds `.is-in` to a whole section at once and the CSS below
   decides the order.

   --mm-d scales every translation distance by breakpoint (1 / .75 / .5),
   which is how the tablet and phone reductions are applied in one place. */

:root{
  --mm-ease: cubic-bezier(.22,.61,.36,1);
  --mm-d: 1;                 /* translation-distance multiplier */
}
@media (min-width: 561px) and (max-width: 1024px){ :root{ --mm-d: .75; } }
@media (max-width: 560px){ :root{ --mm-d: .55; } }

/* ---------------------------------------------------------------- hero -- */
/* The photograph settles on .hero__media so its transform never fights the
   scroll-linked scale living on .hero__img. */
.motion-ready .hero__media{ transform: scale(1.025); }
.motion-ready .hero__media.is-in{
  transform: scale(1);
  transition: transform 1600ms var(--mm-ease);
}

.motion-ready .hero__logo,
.motion-ready .hero__identity,
.motion-ready .hero__statement .d-xl,
.motion-ready .hero__support,
.motion-ready .hero__bottom .btn,
.motion-ready .hero__avail{ opacity: 0; }

.motion-ready .hero__logo{ transform: translateY(calc(12px * var(--mm-d))); }
.motion-ready .hero__identity{ transform: translateY(calc(10px * var(--mm-d))); }
.motion-ready .hero__statement .d-xl{ transform: translateY(calc(14px * var(--mm-d))); }
.motion-ready .hero__support{ transform: translateY(calc(12px * var(--mm-d))); }
.motion-ready .hero__bottom .btn{ transform: translateY(calc(10px * var(--mm-d))); }
.motion-ready .hero__avail{ transform: translateY(calc(8px * var(--mm-d))); }

.motion-ready .hero__logo.is-in,
.motion-ready .hero__identity.is-in,
.motion-ready .hero__statement .d-xl.is-in,
.motion-ready .hero__support.is-in,
.motion-ready .hero__bottom .btn.is-in,
.motion-ready .hero__avail.is-in{ opacity: 1; transform: none; }

.motion-ready .hero__logo.is-in{
  transition: opacity 700ms var(--mm-ease) 150ms, transform 700ms var(--mm-ease) 150ms;
}
.motion-ready .hero__identity.is-in{
  transition: opacity 700ms var(--mm-ease) 500ms, transform 700ms var(--mm-ease) 500ms;
}
.motion-ready .hero__statement .d-xl.is-in{           /* the headline */
  transition: opacity 750ms var(--mm-ease) 320ms, transform 750ms var(--mm-ease) 320ms;
}
.motion-ready .hero__support.is-in{
  transition: opacity 700ms var(--mm-ease) 640ms, transform 700ms var(--mm-ease) 640ms;
}
.motion-ready .hero__bottom .btn.is-in{
  transition: opacity 650ms var(--mm-ease) 920ms, transform 650ms var(--mm-ease) 920ms;
}
.motion-ready .hero__avail.is-in{
  transition: opacity 600ms var(--mm-ease) 780ms, transform 600ms var(--mm-ease) 780ms;
}

/* ---------------------------------------------------------------- life -- */
/* "Built for lives already in motion" — the frame slides in from the bleed. */
.motion-ready .life__figure{ opacity: .55; transform: translateX(calc(-40px * var(--mm-d))); }
.motion-ready .life__figure.is-in{
  opacity: 1; transform: none;
  transition: opacity 900ms var(--mm-ease), transform 900ms var(--mm-ease);
}
.motion-ready .life__figure img{ transform: scale(1.04); }
.motion-ready .life__figure.is-in img{
  transform: scale(1);
  transition: transform 1100ms var(--mm-ease);
}
.motion-ready .life__words{ opacity: 0; transform: translateY(calc(26px * var(--mm-d))); }
.motion-ready .life__words.is-in{
  opacity: 1; transform: none;
  transition: opacity 800ms var(--mm-ease) 120ms, transform 800ms var(--mm-ease) 120ms;
}

/* --------------------------------------------------------- recognition -- */
.motion-ready .rec__fig{ opacity: .50; transform: translateY(calc(26px * var(--mm-d))); }
.motion-ready .rec__fig.is-in{
  opacity: 1; transform: none;
  transition: opacity 900ms var(--mm-ease), transform 900ms var(--mm-ease);
}
.motion-ready .rec__copy{ opacity: 0; transform: translateY(calc(28px * var(--mm-d))); }
.motion-ready .rec__copy.is-in{
  opacity: 1; transform: none;
  transition: opacity 850ms var(--mm-ease) 140ms, transform 850ms var(--mm-ease) 140ms;
}
/* Punctuation, not spectacle. */
.motion-ready .rec__ten{ opacity: 0; transform: scale(.94); }
.motion-ready .rec__ten.is-in{
  opacity: 1; transform: none;
  transition: opacity 650ms var(--mm-ease), transform 650ms var(--mm-ease);
}

/* ---------------------------------------------------------------- solo -- */
.motion-ready .solo__figure{ opacity: .45; transform: translateY(calc(32px * var(--mm-d))); }
.motion-ready .solo__figure.is-in{
  opacity: 1; transform: none;
  transition: opacity 900ms var(--mm-ease), transform 900ms var(--mm-ease);
}
.motion-ready .solo__figure img{ transform: scale(1.035); }
.motion-ready .solo__figure.is-in img{
  transform: scale(1);
  transition: transform 1100ms var(--mm-ease);
}
.motion-ready .solo__words h2{ opacity: 0; transform: translateY(calc(26px * var(--mm-d))); }
.motion-ready .solo__words h2.is-in{
  opacity: 1; transform: none;
  transition: opacity 800ms var(--mm-ease) 140ms, transform 800ms var(--mm-ease) 140ms;
}
/* The rule drawing left-to-right is the hinge from solo use to shared use. */
.motion-ready .solo__rule{ transform: scaleX(0); transform-origin: left center; }
.motion-ready .solo__rule.is-in{
  transform: scaleX(1);
  transition: transform 600ms var(--mm-ease) 420ms;
}
.motion-ready .solo__then{ opacity: 0; transform: translateY(calc(10px * var(--mm-d))); }
.motion-ready .solo__then.is-in{
  opacity: 1; transform: none;
  transition: opacity 700ms var(--mm-ease) 620ms, transform 700ms var(--mm-ease) 620ms;
}

/* ------------------------------------------------------------- friends -- */
/* Slower and calmer than Recognition: this section is emotional, not argued. */
.motion-ready .friends__photo{ opacity: .50; overflow: hidden; }
.motion-ready .friends__photo.is-in{
  opacity: 1;
  transition: opacity 1000ms var(--mm-ease);
}
.motion-ready .friends__photo img{ transform: scale(1.055); }
.motion-ready .friends__photo.is-in img{
  transform: scale(1);
  transition: transform 1200ms var(--mm-ease);
}
.motion-ready .friends__words{ opacity: 0; transform: translateY(calc(24px * var(--mm-d))); }
.motion-ready .friends__words.is-in{
  opacity: 1; transform: none;
  transition: opacity 850ms var(--mm-ease) 130ms, transform 850ms var(--mm-ease) 130ms;
}

/* -------------------------------------------------------------- lounge -- */
/* Scrim opacity only — the gradient itself is untouched. */
.motion-ready .lounge__scrim{ opacity: .70; }
.motion-ready .lounge__scrim.is-in{
  opacity: 1;
  transition: opacity 1200ms var(--mm-ease);
}
.motion-ready .lounge__copy h2{ opacity: 0; transform: translateY(calc(26px * var(--mm-d))); }
.motion-ready .lounge__copy h2.is-in{
  opacity: 1; transform: none;
  transition: opacity 850ms var(--mm-ease), transform 850ms var(--mm-ease);
}
.motion-ready .lounge__line{ opacity: 0; transform: translateY(calc(18px * var(--mm-d))); }
.motion-ready .lounge__line.is-in{
  opacity: 1; transform: none;
  transition: opacity 750ms var(--mm-ease) 160ms, transform 750ms var(--mm-ease) 160ms;
}

/* ------------------------------------------------------------- connect -- */
.motion-ready .connect__figure{
  opacity: .50; overflow: hidden;
  transform: translateY(calc(30px * var(--mm-d)));
}
.motion-ready .connect__figure.is-in{
  opacity: 1; transform: none;
  transition: opacity 900ms var(--mm-ease), transform 900ms var(--mm-ease);
}
.motion-ready .connect__figure img{ transform: scale(1.035); }
.motion-ready .connect__figure.is-in img{
  transform: scale(1);
  transition: transform 1100ms var(--mm-ease);
}
.motion-ready .connect__words h2{ opacity: 0; transform: translateY(calc(24px * var(--mm-d))); }
.motion-ready .connect__words h2.is-in{
  opacity: 1; transform: none;
  transition: opacity 800ms var(--mm-ease) 140ms, transform 800ms var(--mm-ease) 140ms;
}
.motion-ready .connect__line{ opacity: 0; transform: translateY(calc(16px * var(--mm-d))); }
.motion-ready .connect__line.is-in{
  opacity: 1; transform: none;
  transition: opacity 700ms var(--mm-ease) 320ms, transform 700ms var(--mm-ease) 320ms;
}

/* --------------------------------------------------------------- close -- */
/* Deliberately quiet. No parallax, no image movement. */
.motion-ready .close__logo,
.motion-ready .close__statement,
.motion-ready .close__second,
.motion-ready .close__cta,
.motion-ready .close__avail{ opacity: 0; }
.motion-ready .close__logo{ transform: translateY(calc(10px * var(--mm-d))); }
.motion-ready .close__statement{ transform: translateY(calc(12px * var(--mm-d))); }
.motion-ready .close__second{ transform: translateY(calc(8px * var(--mm-d))); }
.motion-ready .close__cta{ transform: translateY(calc(8px * var(--mm-d))); }

.motion-ready .close__logo.is-in,
.motion-ready .close__statement.is-in,
.motion-ready .close__second.is-in,
.motion-ready .close__cta.is-in{ opacity: 1; transform: none; }
.motion-ready .close__avail.is-in{ opacity: 1; }

.motion-ready .close__logo.is-in{
  transition: opacity 700ms var(--mm-ease), transform 700ms var(--mm-ease);
}
.motion-ready .close__statement.is-in{
  transition: opacity 800ms var(--mm-ease) 120ms, transform 800ms var(--mm-ease) 120ms;
}
.motion-ready .close__second.is-in{
  transition: opacity 700ms var(--mm-ease) 260ms, transform 700ms var(--mm-ease) 260ms;
}
.motion-ready .close__cta.is-in{
  transition: opacity 650ms var(--mm-ease) 400ms, transform 650ms var(--mm-ease) 400ms;
}
.motion-ready .close__avail.is-in{
  transition: opacity 600ms var(--mm-ease) 500ms;
}

/* ======================================================== mobile hero ==== */
/* A separately art-directed hero for phone widths (<=767px), built from the
   supplied `Mobile Home Hero` reference.

   It is not the desktop hero compressed. The portrait plate runs full-bleed
   and UNCROPPED — width 100%, height from its own aspect ratio — so the
   television, the profile on it, the women, the woman pointing and the
   iPhone held in landscape all survive at every phone width. The copy then
   sits beneath the photograph, on the plate's own fade to black.

   At 768px and above none of this applies and the approved desktop/tablet
   hero is untouched. `.hero__top` / `.hero__bottom` are hidden below 768px
   and `.mhero` above it, so exactly one hero exists at any width. */

/* <picture> would otherwise be an inline box and add a baseline gap under
   the desktop photograph. */
.hero__media picture{ display: block; width: 100%; height: 100%; }

.mhero{ display: none; }

@media (max-width: 767px){
  :root{
    --mhero-ink: #080604;    /* the plate's own bottom edge, so there is no seam */
    --mhero-pad: 20px;
  }

  /* -- one hero at a time ------------------------------------------------- */
  .hero__top,
  .hero__bottom{ display: none; }
  .mhero{ display: block; }

  /* -- structure ---------------------------------------------------------- */
  .hero{
    flex-direction: column;
    background: var(--mhero-ink);
  }
  .hero__media{
    position: relative; inset: auto;
    flex: 0 0 auto;
    overflow: hidden;        /* the scroll-linked scale crops inside the plate */
  }
  .hero__media picture{ height: auto; }
  .hero__img{
    display: block; width: 100%; height: auto;
    aspect-ratio: 941 / 1238;
    object-position: 50% 38%;
    /* Only genuinely short viewports crop; every listed test width shows the
       whole plate. */
    max-height: 64svh;
  }
  /* The plate is already falling to black at its lower edge; this carries the
     last of it so photograph and type field share one ground. Not a uniform
     overlay — the room above stays warm and vivid. */
  .hero__media::after{
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 42%; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(8,6,4,0) 0%,
      rgba(8,6,4,.42) 54%,
      rgba(8,6,4,.86) 82%,
      var(--mhero-ink) 100%);
  }
  .hero__scrim{ display: none; }

  /* The plate is shown whole, so on a tall phone there is space left under it.
     The copy is centred in that space rather than pinned to the bottom edge,
     which keeps the gap under the photograph and the gap under the CTA close
     to even instead of stranding the type at the very bottom. */
  .hero__body{
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center;
    max-width: none;
    padding: clamp(16px, 3svh, 30px) var(--mhero-pad) clamp(22px, 3.6svh, 36px);
  }

  /* -- headline ----------------------------------------------------------- */
  /* Two deliberate statements, one line each. The size is derived from the
     measured width of the longer line — 14.45em in Montserrat 700 — so it
     holds a single line from 320px upward instead of wrapping, and stops
     growing at 34px. */
  .mhero__statement{
    margin: 0;
    font-size: min(calc((100vw - 46px) / 14.45), 34px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--white);
  }
  .mhero__line{ display: block; }
  .mhero__line + .mhero__line{ margin-top: .06em; }

  /* -- platform row ------------------------------------------------------- */
  .mhero__platform{
    margin: clamp(14px, 2.4svh, 24px) 0 0;
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    font-size: 14px; font-weight: 500; letter-spacing: .04em;
    line-height: 1; color: var(--white);
  }
  .mhero__icons{ display: inline-flex; align-items: center; gap: 8px; }
  .mhero__icons svg{ display: block; }
  .mhero__plus{ font-size: 15px; font-weight: 500; line-height: 1; }
  /* Secondary clarification under the hardware row: smaller and quieter than
     the row itself, so it answers "do I need an Apple TV?" without competing
     with the CTA. */
  .mhero__note{
    margin: 8px 0 0; text-align: center;
    font-size: 12px; font-weight: 400; letter-spacing: .04em;
    line-height: 1.2; color: var(--gray-text);
  }

  /* -- into the next section ---------------------------------------------- */
  /* The Life photograph starts right where the hero ends. Its section's top
     padding was painting an empty band of light ground between the black hero
     and the photo; the bottom padding is unchanged. */
  .life{ padding-top: 0; }

  /* -- CTA ---------------------------------------------------------------- */
  .mhero__cta{
    display: block; width: 100%; max-width: 360px;
    margin: clamp(16px, 2.8svh, 28px) auto 0;
    padding: 17px 24px;
    border-radius: 999px;    /* the reference CTA is a full pill */
    font-size: 17px; text-align: center;
  }
}

/* 431px and up in this range is a narrow window or a small tablet in portrait,
   not a phone: it is wide but rarely tall, so capping the plate's height would
   crop away the television or the landscape iPhone. Cap its WIDTH instead and
   centre it, and the whole composition survives with the ground either side. */
@media (min-width: 481px) and (max-width: 767px){
  .hero__img{ max-width: calc(64svh / 1.316); margin-inline: auto; }
}

/* -------------------------------------------------- mobile hero motion --- */
/* Registered in buildHero() alongside the desktop hero elements, so the
   entrance cascade covers them and nothing can be left hidden. */
.motion-ready .mhero__statement,
.motion-ready .mhero__platform,
.motion-ready .mhero__note,
.motion-ready .mhero__cta{ opacity: 0; }

.motion-ready .mhero__statement{ transform: translateY(calc(14px * var(--mm-d))); }
.motion-ready .mhero__platform{ transform: translateY(calc(10px * var(--mm-d))); }
.motion-ready .mhero__note{ transform: translateY(calc(8px * var(--mm-d))); }
.motion-ready .mhero__cta{ transform: translateY(calc(10px * var(--mm-d))); }

.motion-ready .mhero__statement.is-in,
.motion-ready .mhero__platform.is-in,
.motion-ready .mhero__note.is-in,
.motion-ready .mhero__cta.is-in{ opacity: 1; transform: none; }

.motion-ready .mhero__statement.is-in{
  transition: opacity 750ms var(--mm-ease) 260ms, transform 750ms var(--mm-ease) 260ms;
}
.motion-ready .mhero__platform.is-in{
  transition: opacity 650ms var(--mm-ease) 500ms, transform 650ms var(--mm-ease) 500ms;
}
.motion-ready .mhero__note.is-in{
  transition: opacity 600ms var(--mm-ease) 570ms, transform 600ms var(--mm-ease) 570ms;
}
.motion-ready .mhero__cta.is-in{
  transition: opacity 650ms var(--mm-ease) 640ms, transform 650ms var(--mm-ease) 640ms;
}

/* ======================================================= desktop hero ==== */
/* Desktop and tablet (768px and up).

   The hero owns the whole first viewport at every window shape: it is at
   least 100svh tall, and the photograph fills it with `cover`, so there are
   never side bars and the next section is never visible before scrolling.

   The photograph is a text-free plate of the approved `New Hero` artwork.
   The lockup, headline, supporting lines and CTA are live and pinned to the
   hero's corners, so cropping the photograph to fill an unusual window can
   never crop them. (The earlier version used the artwork with its copy
   painted in; on any window wider than about 1.9:1 there was no way to fill
   the screen without cutting the painted lockup or the painted text.)

   --u is one pixel of the 1672×941 artwork, scaled to the largest 16:9 frame
   that fits the window. Sizes and offsets are written in artwork pixels, so
   a 16:9 window reproduces the artwork, and any other shape keeps its
   proportions and keeps every element on screen.

   Crop anchor: left edge, and 81% down. The copy sits in the artwork's own
   darkened lower band; anchoring at 81% keeps exactly that band behind the
   copy at every window width, and keeps the television profile intact up to
   about a 2.2:1 window.

   Scoped entirely to `min-width: 768px`. The conditional mobile hero lives
   in `max-width: 767px` and is untouched by every rule below. */

@media (min-width: 768px){
  :root{ --u: calc(min(100svh, 100vw / 1.7768) / 941); }

  .hero{ min-height: 100svh; }
  .hero__img{ object-fit: cover; object-position: 0% 81%; }
  .hero__scrim{ display: none; }

  .hero__body{
    position: absolute; inset: 0;
    width: auto; max-width: none; margin: 0; padding: 0;
    display: block;
  }

  /* Lockup: the artwork's own position and size. */
  .hero__top{ position: absolute; left: calc(57 * var(--u)); top: calc(36 * var(--u)); }
  .hero__logo{ display: block; width: calc(418 * var(--u)); height: auto; }

  /* Copy: bottom-left, measured to the artwork to within 2px at 16:9. */
  .hero__copy{
    position: absolute; left: calc(22 * var(--u)); bottom: calc(23.75 * var(--u));
    max-width: none; padding: 0;
  }
  .hero__statement .d-xl,
  .hero__identity, .hero__support, .hero__avail{
    display: block; margin: 0; max-width: none;
    line-height: 1; white-space: nowrap; color: var(--white);
  }
  .hero__statement .d-xl{
    font-size: max(18px, calc(39.57 * var(--u)));
    font-weight: 700; letter-spacing: .005em;
  }
  .hero__word--personal{ color: #ED4D80; }
  .hero__word--solitary{ color: #E52B3C; }
  .hero__identity, .hero__support, .hero__avail{
    font-size: max(12.5px, calc(24 * var(--u)));
    font-weight: 300; letter-spacing: .005em;
  }
  .hero__identity{ margin-top: calc(17 * var(--u)); }
  .hero__support{  margin-top: calc(12 * var(--u)); }
  .hero__avail{    margin-top: calc(20 * var(--u)); }
  .hero__support .brand-pink{ color: #E52C3F; }

  /* CTA: bottom-right, same size clamps and same distance from the page
     edge as before. */
  .hero__bottom{
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end;
    gap: 0;
    padding: 0 max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter))) calc(51.75 * var(--u)) 0;
  }
  .hero__bottom .btn{
    font-size: clamp(14px, 1.2vw, 17px);
    padding: clamp(14px, 1.35vw, 19px) clamp(20px, 2.4vw, 34px);
  }

  /* The lockup and copy used to be painted into the photograph, so they
     arrived with it rather than fading in on their own. Keep it that way;
     the CTA keeps its existing entrance. */
  html.motion-ready .hero__logo,
  html.motion-ready .hero__statement .d-xl,
  html.motion-ready .hero__identity,
  html.motion-ready .hero__support,
  html.motion-ready .hero__avail{ opacity: 1; transform: none; transition: none; }

  /* One lockup at rest over the hero; the nav's mark returns once the bar
     goes solid on scroll. Unchanged from before. */
  .nav__logo{ transition: opacity .3s ease; }
  body:not(.is-doc) .nav:not(.is-stuck) .nav__logo{ opacity: 0; pointer-events: none; }
}

/* ------------------------------------------------------ reduced motion --- */
/* Everything above is scoped to .motion-ready, which JS refuses to add when
   the visitor asks for reduced motion. These rules are the belt-and-braces
   for a preference that changes mid-session. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .motion-ready *,
  .motion-ready *::before,
  .motion-ready *::after{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .btn{ transition: none; }
}