/* ==========================================================================
   Raylea — Zilzie
   ========================================================================== */

:root {
  --color-sand: #e3d8ca;
  --color-orange: #f47a40;
  --color-blue: #333558;
  --color-lavender: #e0ccde;

  --color-ink: var(--color-blue);
  --color-paper: var(--color-sand);

  --font-body: commuters-sans, sans-serif;
  --font-heading: commuters-sans, sans-serif;
  --font-label: carbona-variable, sans-serif;
  --font-professor: professor, sans-serif;

  --header-height: 100px;
  --section-pad-y: clamp(64px, 10vw, 140px);
  --section-pad-x: clamp(24px, 6vw, 96px);
  --content-max: 1280px;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-sand);
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: inherit; }
input { font: inherit; }

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

.skip-link {
  position: absolute;
  left: 0; top: -60px;
  background: var(--color-blue);
  color: var(--color-sand);
  padding: 12px 20px;
  z-index: 1000;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Type roles ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
  opacity: 0.85;
}

.heading-lg {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(22px, 3.5vw, 39px);
  line-height: 1.08;
  /* "100" letter-spacing in the reference design read as design-tool tracking
     units (1000 units = 1em), i.e. 0.1em — a literal 100px would be nearly
     2x the heading's own cap-height between letters. */
  letter-spacing: 0.1em;
  margin: 0 0 24px;
  max-width: 18ch;
}

.body-copy {
  font-family: var(--font-label);
  font-variation-settings: "MONO" 0, "slnt" 0, "wght" 400;
  font-weight: 400;
  text-transform: none;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;
  max-width: 52ch;
}
.body-copy p { margin: 0 0 1em; }
.body-copy p:last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  margin-top: 32px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* Text link with a trailing arrow, not a pill — no border/fill, just an
   underline that draws in on hover and an arrow that nudges forward. */
.btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 4px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--color-orange);
  position: relative;
}
.btn--outline::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.btn--outline:hover::before,
.btn--outline:focus-visible::before {
  transform: scaleX(1);
}
.btn--outline::after {
  content: '\2192';
  transition: transform 0.25s var(--ease);
}
.btn--outline:hover::after,
.btn--outline:focus-visible::after {
  transform: translateX(4px);
}

.btn--solid {
  background: var(--color-orange);
  color: var(--color-sand);
  border: 1.5px solid var(--color-orange);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  background: transparent;
  color: var(--color-orange);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.site-header__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--section-pad-x);
}

.site-header__logo img {
  /* Sized by width, not height: the wordmark file's crop can change
     (clear-space trims) without altering how large the mark reads. */
  width: 140px;
  height: auto;
}

.site-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.site-nav__list {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-sand);
}
.site-nav__list a { transition: color 0.2s var(--ease); }
.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--color-orange); }

.site-header.is-scrolled {
  background: var(--color-sand);
}
.site-header.is-scrolled .site-nav__list { color: var(--color-blue); }

/* ---------- Burger + mobile nav ----------
   The overlay sits BELOW the header (z-index 450 vs 500) so the logo and the
   burger stay on top of it and the menu can always be closed; its own top
   padding clears the header band. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-sand);
  transition: color 0.2s var(--ease);
}
/* Follows the header's own state: blue once the header has its sand
   background, sand while it's transparent over the blue overlay. Forcing it
   sand whenever the menu was open made it invisible on the scrolled header. */
.site-header.is-scrolled .nav-toggle { color: var(--color-blue); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars {
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

/* Burger folds into an X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: calc(var(--header-height) + 24px) var(--section-pad-x) 48px;
  background: var(--color-blue);
  color: var(--color-sand);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav__list a {
  display: block;
  padding: 14px 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(26px, 8vw, 34px);
  letter-spacing: 0.06em;
  color: var(--color-sand);
  transition: color 0.2s var(--ease);
}
.mobile-nav__list a:hover,
.mobile-nav__list a:focus-visible { color: var(--color-orange); }

.mobile-nav__cta {
  align-self: flex-start;
  margin-top: 32px;
  /* Sand, matching the nav links above it, rather than the lavender the
     btn--outline picks up elsewhere on blue. */
  color: var(--color-sand);
}

/* Locks the page behind the overlay without the scroll position jumping. */
body.is-nav-open {
  overflow: hidden;
}

/* Register tab — fixed to viewport edge, whole-page sticky.
   writing-mode (not a rotate() transform) sizes the box directly in its
   final orientation, so it can never overhang past the viewport edge. */
.register-tab {
  position: fixed;
  top: 50%;
  right: 0;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  background: var(--color-orange);
  color: var(--color-sand);
  padding: 28px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  z-index: 600;
  border-radius: 0 8px 8px 0;
  transition: padding 0.2s var(--ease), opacity 0.3s var(--ease);
}
.register-tab:hover,
.register-tab:focus-visible {
  padding-left: 18px;
  padding-right: 18px;
}
.register-tab.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Section scaffolding ----------
   Margins are edge-relative (padding-left/right), not an auto-centred
   max-width column, so each section can carry its own left/right margin
   to match the original 3456px-wide design. --section-pad-left/-right
   fall back to the shared --section-pad-x when a section has no
   measured override of its own. */
.section { position: relative; scroll-margin-top: var(--header-height); }
.section__inner {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  padding-left: var(--section-pad-left, var(--section-pad-x));
  padding-right: var(--section-pad-right, var(--section-pad-x));
}

/* Vision margins: 830px at the 3456px-wide design reference (830/3456 = 24.02vw). */
.vision .section__inner {
  --section-pad-left: clamp(24px, 24.02vw, 830px);
  --section-pad-right: clamp(24px, 24.02vw, 830px);
}

.vision .eyebrow { margin-bottom: 83px; }
.vision .btn { margin-top: 66px; }

/* Match the register tab's text sizing — 14px / 0.06em tracking — rather
   than the base .btn's 15px / 0.02em. */
.vision .btn,
.lifestyle .btn,
.about .btn {
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* Double the heading/body text measure — still capped by the section's own
   margins since a block element's max-width can never exceed its parent's
   content box, regardless of how wide the ch value computes to. */
.vision .heading-lg { max-width: 36ch; }
.vision .body-copy { max-width: 104ch; }

.vision .btn--outline {
  color: var(--color-blue);
}

.section--sand { background: var(--color-sand); color: var(--color-blue); }
.section--blue { background: var(--color-blue); color: var(--color-sand); }
.section--blue .eyebrow { color: var(--color-lavender); }
.section--blue a:not(.btn) { color: var(--color-lavender); }

.section--media {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  color: var(--color-sand);
  overflow: hidden;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  /* dvh tracks the mobile browser's collapsing address bar; vh above is the
     fallback for browsers that don't support it. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-sand);
}
.hero__media {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  /* Buffers the parallax translate below — without the extra height and
     scale, shifting this layer on scroll would expose its bottom edge. */
  height: calc(100% + 80px);
  transform: scale(1.1);
  will-change: transform;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(51,53,88,0.25) 0%, rgba(51,53,88,0.55) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero__brandmark {
  width: min(420px, 90vw);
  height: auto;
  margin: 0 auto;
}
.hero__caption {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}

/* ---------- Views ----------
   Inset 80px left/right rather than a full-bleed background; text sits at
   the top of the frame instead of the bottom, so the section reads on the
   page's own sand background with dark ink, not light text over photo. */
.views {
  /* Overrides .section--media's min-height: 100vh — 850px matches a
     MacBook Pro 16" logical viewport (1728px wide, half the 3456px
     design canvas) rather than stretching to fill the full screen. */
  min-height: 850px;
  /* A gradient anchored to the block's own top/bottom edges — not a
     scroll-driven flat colour — so it matches Vision's sand above and
     Quote's blue below seamlessly no matter the scroll position or
     viewport height. A flat colour can't do that once the section is
     shorter than the viewport, since both seams can be on screen at once. */
  background: linear-gradient(to bottom, var(--color-sand) 0%, var(--color-orange) 50%, var(--color-blue) 100%);
  color: var(--color-blue);
  align-items: flex-start;
}
.views .eyebrow { margin-bottom: 83px; }
.views .toggle-group { margin-top: 33px; }

.views__media,
.views__scrim {
  position: absolute;
  inset: 0 80px;
}
.views__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.views__image.is-active {
  opacity: 1;
}
.views__scrim {
  background: linear-gradient(180deg, rgba(227,216,202,0.6) 0%, rgba(227,216,202,0) 40%);
}
.views .section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 80px;
  /* 80px matches the image's own inset; +48px keeps the text off that edge. */
  --section-pad-left: 128px;
  --section-pad-right: 128px;
}

/* ---------- Toggle groups ----------
   One outlined track with a single sliding thumb, rather than a row of
   separate buttons. Segments size to their own labels; main.js measures the
   active one and feeds --toggle-thumb-x/-w so the thumb tracks it at any
   width. The equal-column fallback below only applies before that runs. */
.toggle-group {
  --toggle-count: 4;
  --toggle-pad: 4px;
  --toggle-thumb: var(--color-orange);

  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  /* No max-width: a percentage max-width clamps this grid's box below its
     own track sizes on narrow parents, collapsing the pill. Narrow screens
     are handled by shrinking the segments in the media query instead. */
  width: fit-content;
  margin-top: 28px;
  padding: var(--toggle-pad);
  border: 1px solid currentColor;
  border-radius: 999px;
}

/* The sliding thumb */
.toggle-group::before {
  content: '';
  position: absolute;
  top: var(--toggle-pad);
  height: calc(100% - (var(--toggle-pad) * 2));
  width: var(--toggle-thumb-w, calc((100% - (var(--toggle-pad) * 2)) / var(--toggle-count)));
  left: var(--toggle-thumb-x, var(--toggle-pad));
  border-radius: 999px;
  background: var(--toggle-thumb);
  transition: left 0.45s var(--ease), width 0.45s var(--ease), background-color 0.3s var(--ease);
}

.toggle-group__btn {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 20px;
  text-align: center;
  white-space: nowrap;
  border-radius: 999px;
  opacity: 0.65;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.toggle-group__btn:hover,
.toggle-group__btn:focus-visible {
  opacity: 1;
}
.toggle-group__btn.is-active {
  opacity: 1;
  color: var(--color-sand);
}

.lifestyle .eyebrow { margin-bottom: 83px; }
.lifestyle .heading-lg,
.lifestyle .body-copy { color: var(--color-lavender); }
/* -10px, not 16px (half of the base 32px): .lifestyle__panels reserves a
   fixed min-height so switching locations doesn't jump the layout, which
   adds ~53px of fixed space below the copy regardless of this margin. This
   value is solved to land the total visual gap at exactly half of the
   original 85px (~43px), measured directly rather than assumed. */
.lifestyle .btn { margin-top: -10px; }
.lifestyle .btn--outline {
  color: var(--color-lavender);
}

/* Lifestyle toggle bar sits on Blue — Lavender accent per brief */
.lifestyle .toggle-group {
  --toggle-thumb: var(--color-lavender);
  color: var(--color-lavender);
}
.lifestyle .toggle-group__btn.is-active {
  color: var(--color-blue);
}

/* ---------- Quote ---------- */
.quote .section__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200px;
  padding-bottom: 150px;
}
.lifestyle .section__inner {
  padding-top: calc(var(--section-pad-y) * 0.75);
}
.quote__text {
  /* Professor is only shipped at weight 400 with no italic face, so drop
     the italic/300-weight styling that was set for Commuter Sans. */
  font-family: var(--font-professor);
  font-weight: 400;
  font-size: clamp(56px, 10vw, 96px);
  line-height: 1;
  text-transform: none;
  margin: 0 0 32px;
  color: var(--color-orange);
}
.quote__icon {
  width: 64px;
  height: auto;
}

/* ---------- Lifestyle ---------- */
.lifestyle__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.lifestyle__panels { position: relative; min-height: 4.8em; margin: 24px 0; }
.lifestyle__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.lifestyle__panel.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.lifestyle__media {
  position: relative;
  height: 700px;
  border-radius: 8px;
  overflow: hidden;
}
.lifestyle__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.lifestyle__image.is-active {
  opacity: 1;
  position: relative;
}

/* ---------- About the developer ---------- */
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
/* The figure stacks the framed image above its caption; the fixed height and
   the crop live on the frame so the caption isn't clipped by it. */
.about__media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about__media-frame {
  height: 700px;
  border-radius: 8px;
  overflow: hidden;
}
.about__caption {
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.about .eyebrow { margin-bottom: 83px; }
.about .btn { margin-top: 66px; }
.about .btn--outline {
  color: var(--color-blue);
}
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  scroll-margin-top: var(--header-height);
  background: var(--color-orange);
  color: var(--color-sand);
  /* Derived from the footer logo's own viewBox (283.46 x 125.2), applied
     to the SAME width the logo itself renders at (100vw + 200px) — this
     is what makes the footer's height track the logo's natural height
     exactly at any viewport width, rather than a fixed px value that
     under- or over-crops depending on screen size. */
  height: calc((100vw + 200px) * 125.2 / 283.46);
  overflow: hidden;
}
/* z-index 2 lifts the ripples above .site-footer__inner (z-index 1), so they
   play across the wordmark rather than behind it. overlay blending makes the
   crests read as light moving over the orange and the logo, instead of flat
   grey rings drawn on top. */
/* The WebGL canvas renders the orange ground and the wordmark itself, so it
   sits at z-index 1 — above the plain background, below the legal text. The
   2D fallback instead draws rings over the top and sets its own blend mode
   inline, since in that mode the DOM logo stays visible. */
.site-footer__ripple {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* The <picture> around the wordmark only switches sources; taking its box out
   of the layout leaves the img as the direct child, so the absolute
   positioning on desktop and the flex centring on mobile both still apply. */
.site-footer__inner picture {
  display: contents;
}
/* Only hidden once WebGL is confirmed working — otherwise the static logo
   must keep rendering. Kept in the DOM (not display:none) for its alt text. */
.site-footer.has-webgl-ripples .site-footer__logo {
  opacity: 0;
}
.site-footer__inner {
  position: relative;
  z-index: 2;
  height: 100%;
}
/* The logo is a background element: pinned to the top, wide enough to
   bleed past the left/right viewport edges, and tall enough (following
   its own aspect ratio) that its bottom runs past the footer's fixed
   height and gets cropped by overflow: hidden — bleeding off the bottom
   of the page since this is the last section. .site-footer carries no
   horizontal padding, so the containing block for this absolutely
   positioned element IS the true viewport width, and a plain
   left: 50% / translateX(-50%) centres it with no extra compensation. */
.site-footer__logo {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100vw + 200px);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

/* Legal text sits on top of the logo, anchored to the corner rather than
   stacked below it. */
.site-footer__legal {
  position: absolute;
  z-index: 1;
  right: var(--section-pad-x);
  bottom: 32px;
}
.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 13px;
}
.site-footer__legal li:not(:last-child)::after {
  content: '|';
  margin: 0 12px;
  opacity: 0.6;
}

/* ---------- Register panel (slide-out) ---------- */
.register-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(480px, 92vw);
  height: 100vh;
  height: 100dvh;
  background: var(--color-blue);
  color: var(--color-sand);
  z-index: 700;
  transform: translateX(100%);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  overflow-y: auto;
}
.register-panel.is-open {
  transform: translateX(0);
  box-shadow: -10px 0 40px -16px rgba(0, 0, 0, 0.35);
}

.register-panel__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100%;
  padding: 48px 40px;
}

.register-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.register-panel__head .eyebrow { margin: 0; color: var(--color-lavender); }

.register-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.2s var(--ease);
}
.register-panel__close:hover,
.register-panel__close:focus-visible {
  background: rgba(227, 216, 202, 0.15);
}

.register-panel__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin: 0;
}

.register-panel__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.register-panel__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.register-panel__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.register-panel__label {
  font-family: var(--font-label);
  font-variation-settings: "MONO" 1, "slnt" 0, "wght" 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.75;
}
.register-panel__field input,
.register-panel__field select {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(227, 216, 202, 0.4);
  color: var(--color-sand);
  padding: 6px 0;
  font-size: 15px;
  border-radius: 0;
  transition: border-color 0.2s var(--ease);
}
.register-panel__field input:focus,
.register-panel__field select:focus {
  outline: none;
  border-color: var(--color-orange);
}
.register-panel__field select option { color: var(--color-blue); }

.register-panel__submit {
  width: 100%;
  text-align: center;
  border: none;
  margin-top: 8px;
}

.register-panel__legal {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.7;
  margin: 0;
}
.register-panel__legal a { text-decoration: underline; }

/* ---------- Legal pages (Privacy Policy, Disclaimer) ----------
   Reuses the existing type roles: eyebrow for the label, heading-lg for the
   title, body-copy for the text (its 52ch measure is what keeps long legal
   copy readable). Only the sub-heading, the back link and list spacing are
   new. */
.legal .section__inner {
  /* The standard section padding clears the fixed header at desktop but not
     at mobile, where --section-pad-y bottoms out below the header height. */
  padding-top: calc(var(--header-height) + clamp(24px, 5vw, 72px));
}
.legal .heading-lg {
  max-width: 24ch;
  margin-bottom: 36px;
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-blue);
}
.legal__back::before {
  content: '\2190';
  transition: transform 0.25s var(--ease);
}
.legal__back::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.legal__back:hover::before,
.legal__back:focus-visible::before { transform: translateX(-4px); }
.legal__back:hover::after,
.legal__back:focus-visible::after { transform: scaleX(1); }

/* Sits between heading-lg and body-copy: small, tracked and uppercase so it
   reads as a label in the site's voice rather than a second display size. */
.legal__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 44px 0 14px;
}
.legal__heading:first-child { margin-top: 0; }

.legal__list {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.legal__list li { margin-bottom: 1em; }
.legal__list li:last-child { margin-bottom: 0; }

/* body-copy pins the variable font to wght 400, and font-variation-settings
   outranks font-weight — so <strong> needs the axis set, not just a weight. */
.body-copy strong {
  font-variation-settings: "MONO" 0, "slnt" 0, "wght" 650;
  font-weight: 650;
}

.legal .body-copy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }

  .lifestyle__inner,
  .about__inner {
    grid-template-columns: 1fr;
  }
  .about__media { order: -1; }

  .register-tab {
    padding: 20px 10px;
    font-size: 12px;
  }

  .register-panel { width: 100vw; }
  .register-panel__row--two {
    grid-template-columns: 1fr;
  }

  /* 16px, not 15px: iOS Safari zooms the whole page when a focused field is
     under 16px, which throws the layout off mid-form. */
  .register-panel__field input,
  .register-panel__field select {
    font-size: 16px;
  }

  /* Keep the toggle on one row by shrinking the segments, not wrapping —
     wrapping would break the single sliding thumb. */
  .toggle-group__btn {
    padding: 9px 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* ---------- Phone ----------
   Everything below undoes desktop-scale geometry that was measured against
   the 3456px design canvas and doesn't survive a 375px viewport. */
@media (max-width: 640px) {
  /* Vision's 24.02vw side margins left a ~195px text column; fall back to
     the shared page gutter. */
  .vision .section__inner {
    --section-pad-left: var(--section-pad-x);
    --section-pad-right: var(--section-pad-x);
  }

  /* The eyebrow-to-heading gap and the button offsets were set in desktop
     proportions; at this width they read as dead space. */
  .vision .eyebrow,
  .views .eyebrow,
  .lifestyle .eyebrow,
  .about .eyebrow {
    margin-bottom: 32px;
  }
  .vision .btn,
  .about .btn {
    margin-top: 36px;
  }
  .lifestyle .btn {
    margin-top: 8px;
  }

  /* Views: the 80px frame inset and its matching 128px text gutter left a
     215px-wide letterbox strip of photo and a 119px text column. */
  .views__media,
  .views__scrim {
    inset: 0 16px;
  }
  .views .section__inner {
    /* Matches the 40px side gutter, so the copy sits high in the sky area of
       each photo rather than drifting down into the detail. */
    padding-top: 40px;
    --section-pad-left: 40px;
    --section-pad-right: 40px;
  }
  .views {
    min-height: 620px;
  }

  /* Fixed 700px media boxes took up ~86% of the viewport on their own. */
  .lifestyle__media,
  .about__media-frame {
    height: clamp(300px, 52vh, 420px);
  }

  .quote .section__inner {
    padding-top: 96px;
    padding-bottom: 88px;
  }

  /* The sticky register tab is ~35px of the right edge; keeping running text
     clear of it avoids clipped line-ends without visibly offsetting the
     column (the copy is ragged-right anyway). */
  .body-copy,
  .lifestyle__panels {
    padding-right: 28px;
  }

  /* A 1fr track floors at min-content, so the Lifestyle toggle's natural
     width (~356px) was blowing the grid column past the page gutter and
     under the register tab. Let the column shrink... */
  .lifestyle__inner,
  .about__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ...and tighten the segments enough that all four labels — "Rockhampton"
     being the long one — fit inside the gutter without reaching the tab. */
  .toggle-group__btn {
    padding: 9px 6px;
    letter-spacing: 0.04em;
  }

  /* Reserved height is set in ems against the desktop measure; a narrower
     column wraps to more lines, so give it room to avoid a layout jump. */
  .lifestyle__panels {
    min-height: 7em;
  }

  /* ---------- Mobile footer ----------
     The desktop footer bleeds the wordmark past both edges and overlays the
     legal line on top of it, which at phone width crops the logo to
     unreadable fragments and squeezes the links into it. Here the footer
     flows instead: a complete, centred wordmark with the links stacked below
     it as proper tap targets. The ripple canvas still fills the panel, and
     it composites the logo from its measured position, so it follows. */
  .site-footer {
    height: auto;
    padding: 56px var(--section-pad-x) 40px;
  }
  .site-footer__inner {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .site-footer__logo {
    position: static;
    width: min(260px, 68vw);
    transform: none;
  }
  .site-footer__legal {
    position: static;
    right: auto;
    bottom: auto;
  }
  .site-footer__legal ul {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: 12px;
  }
  /* The pipes only make sense on a single row. */
  .site-footer__legal li:not(:last-child)::after {
    content: none;
  }
  /* Even rows come from the li padding; the anchors then cancel it and
     re-apply it inside themselves, so a link's tap target covers its whole
     row rather than just the 12px text. */
  .site-footer__legal li {
    padding: 7px 0;
  }
  .site-footer__legal a {
    display: block;
    margin: -7px 0;
    padding: 7px 12px;
  }

  /* Shrink to the labels rather than filling the column, so the last segment
     stays a tappable target instead of running under the register tab.
     max-width keeps it from ever forcing a horizontal scroll. */
  .lifestyle .toggle-group {
    width: min-content;
    max-width: 100%;
  }

  /* A slimmer tab buys back the clearance that shrink-to-fit needs. */
  .register-tab {
    padding: 16px 8px;
    font-size: 11px;
  }
}

/* Very small phones (320px-class): four segments only fit here if the labels
   give up a little more size and tracking. 375px screens keep the 10px. */
@media (max-width: 340px) {
  .toggle-group__btn {
    padding: 9px 4px;
    font-size: 9px;
    letter-spacing: 0.02em;
  }
}