/* Growth pages (pricing, work, guides, services, articles). Loaded only by those pages, after tokens.css and
   base.css; the homepage and contact page never load it, so nothing here can change them.
   Same world as the homepage (DESIGN_CONTRACT.md section 14): each page opens at the surface, then stays
   underwater in one continuous water column, then surfaces again at the closing window with the duck.
   The section grammar (tag + counter, offset caps titles with one italic letter, glass, bubbles, hairlines
   and crosshairs) is the homepage's own, repeated here so these pages move independently of lower.css. */

.pg {
  --deep-0: #2b6459;
  --deep-1: #215a50;
  --deep-2: #1a5047;
  --deep-3: #13463f;
  --deep-4: #0e3631;
  --deep-5: #0a2622;
  --sky-0: #44614a;
  --sky-1: #4f6f53;
  --ink-1: #f4efe4;
  --ink-2: rgba(244, 239, 228, 0.88);
  --ink-3: rgba(244, 239, 228, 0.76);
  --label: #c6d8ce;
  --line: rgba(255, 255, 255, 0.16);
  --line-2: rgba(255, 255, 255, 0.26);
  --guide: rgba(255, 255, 255, 0.22);
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)), rgba(10, 44, 38, 0.42);
  --well-fill: rgba(4, 24, 20, 0.35);
  --col-gap: clamp(16px, 2vw, 32px);
  --fs-page: clamp(46px, 5.4vw, 104px);
  background: var(--deep-5);
  color: var(--ink-1);
}
.pg #main:focus { outline: none; }
html:has(body.pg) { scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) {
  html:has(body.pg) { scroll-behavior: smooth; }
}
.pg .tag { border-color: rgba(244, 239, 228, 0.5); color: var(--ink-1); background: rgba(6, 28, 24, 0.34); }

/* ---------- Nav: the homepage bar, sticky over each page's surface ---------- */
.pnav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  margin-bottom: calc(var(--nav-h) * -1);
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 40px);
  padding: 0 var(--gutter);
  color: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
/* without JS the bar never turns solid on scroll: make it solid and let it scroll away with the page (the heroes
   then leave no room for it) */
html:not(.js) .pnav { position: relative; margin-bottom: 0; background: rgba(12, 34, 30, 0.94); }
html:not(.js) .phero { padding-top: clamp(40px, 7vh, 88px); }
.pnav.is-solid {
  background: rgba(12, 34, 30, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.pnav__brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; min-height: 44px; min-width: 44px; }
.pnav__mark { width: 30px; height: 30px; fill: currentColor; flex: none; }
.pnav__word { font-family: var(--serif); font-size: 23px; letter-spacing: 0.01em; line-height: 1; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pnav__sub { margin-left: 36%; font-family: var(--sans); font-size: 8.5px; font-weight: 600; letter-spacing: 0.34em; line-height: 1; }
.pnav__links { display: flex; gap: clamp(24px, 2.8vw, 40px); font-size: 15px; font-weight: 500; }
.pnav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.pnav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.pnav__links a:hover::after,
.pnav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.pnav__motion {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: grid;
  place-items: center;
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.pnav__motion:hover { border-color: currentColor; background: rgba(255, 255, 255, 0.06); }
.pnav__motion svg { width: 14px; height: 14px; }
.pnav__motion .i-play,
.psheet__motion .i-play { display: none; }
.pnav__motion[aria-pressed="true"] .i-play { display: block; }
.pnav__motion[aria-pressed="true"] .i-pause { display: none; }
.pnav__cta { border-color: rgba(255, 255, 255, 0.6); min-height: 44px; }
.pnav__menu { display: none; width: 44px; height: 44px; position: relative; }
.pnav__menu i {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out);
}
.pnav__menu i:first-of-type { top: 18px; }
.pnav__menu i:last-of-type { top: 25px; }
.pnav__menu[aria-expanded="true"] i:first-of-type { top: 21.5px; transform: rotate(45deg); }
.pnav__menu[aria-expanded="true"] i:last-of-type { top: 21.5px; transform: rotate(-45deg); }
/* Without JS the menu button does nothing, so phones get the links inline instead */
html:not(.js) .pnav__menu { display: none !important; }

.psheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--forest-900);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  overflow-y: auto;
  /* a focused link scrolls clear of the bar over the sheet */
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
.psheet nav { display: flex; flex-direction: column; }
.psheet a {
  font-family: var(--serif);
  text-transform: uppercase;
  font-size: clamp(28px, 8.4vw, 36px);
  line-height: 1.2;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair-dark);
}
.psheet a[aria-current="page"] { font-style: italic; }
.psheet__cta { color: var(--signal); }
.psheet__motion {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 15px;
}
html.menu-open { overflow: hidden; }
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after { animation-play-state: paused !important; }
/* entrances are not motion to pause: with Pause motion on they are simply skipped (paused, they would hold
   their first keyframe and leave the headline invisible) */
html.motion-off .phero__title .line,
html.motion-off .phero__meta,
html.motion-off .phero__body,
html.motion-off .phero__stats,
html.motion-off .phero__cap,
html.entered .phero__title .line,
html.entered .phero__meta,
html.entered .phero__body,
html.entered .phero__stats,
html.entered .phero__cap { animation: none !important; }
/* with Pause motion on, reveals and drawings simply appear */
html.motion-off [data-reveal],
html.motion-off [data-reveal-group] > *,
html.motion-off [data-art] .art * { transition: none !important; }
/* focusing the sticky bar's own controls never scrolls the page (the bar sits inside the page's scroll-padding) */
.pnav a, .pnav button { scroll-margin-top: calc(-1 * (var(--nav-h) + 16px)); }
/* the motion buttons only show where they have something to pause */
html:not(.js) .pnav__motion, html:not(.js) .psheet__motion { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pnav__motion, .psheet__motion { display: none !important; }
}

/* ---------- Page hero: at the surface ----------
   The headline straddles the waterline: its first line sits in the air, its second in the water.
   Narrow screens: two colour bands split exactly between the two lines (drawn by the title's own
   pseudo-elements, so the split follows the type at every size), with the picture framed below.
   Wide screens (.phero--plate): the picture fills the hero and its own waterline is the split; the title
   is centred on it vertically, which is where cover-fit with a 50% focal point keeps that waterline. */
.phero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--nav-h) + clamp(40px, 7vh, 88px)) var(--gutter) clamp(72px, 9vw, 120px);
  color: var(--ivory);
  background: var(--sky-0);
}
.phero__meta { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(22px, 2.6vw, 34px); }
.phero__count { font-size: 14px; font-feature-settings: "tnum" 1; color: var(--ink-2); }
.phero__title {
  position: relative;
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.93;
  font-size: var(--fs-page);
}
.phero__title .line { display: block; }
.phero__title .line--indent { padding-left: 0.7em; }
.phero__title i { font-style: italic; }
/* the two bands, split between the lines */
.phero__title::before,
.phero__title::after {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  z-index: -2;
  pointer-events: none;
}
.phero__title::before { bottom: 50%; height: 300vh; background: linear-gradient(0deg, var(--sky-1), var(--sky-0) 60%); }
.phero__title::after {
  top: 50%;
  height: 300vh;
  background:
    linear-gradient(180deg, rgba(144, 222, 200, 0.28) 0, rgba(144, 222, 200, 0) 2px),
    linear-gradient(180deg, #2f7566 0, var(--deep-0) 38vh, var(--deep-1) 100%);
}
.phero__body { margin-top: clamp(26px, 2.8vw, 40px); }
.phero__lede {
  max-width: 44ch;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  color: rgba(244, 239, 228, 0.94);
  text-wrap: pretty;
}
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 2.6vw, 38px); }
.phero__ctas .btn--outline { border-color: rgba(244, 239, 228, 0.7); background: rgba(8, 30, 25, 0.3); }
.phero__ctas .btn--outline:hover { background: rgba(8, 30, 25, 0.45); }
.phero__ctas .btn__disc svg { margin-left: 0; }

.phero__guides { display: none; }

/* the picture, framed (narrow layout) */
.phero__plate { position: relative; margin-top: clamp(36px, 6vw, 56px); }
.phero__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(180deg, var(--sky-1) 0 50%, #2f8a78 50%); }
.phero__frame img,
.phero__frame video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus-x, 72%) 50%; }
.phero__frame video { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.phero__frame video.is-playing { opacity: 1; }
.phero__plate .film-toggle { right: 12px; bottom: 12px; }
.phero__plate::before,
.phero__plate::after { content: ""; position: absolute; left: -100vw; right: -100vw; height: 1px; background: var(--guide); pointer-events: none; z-index: 1; }
.phero__plate::before { top: 0; }
.phero__plate::after { top: calc(100% - var(--cap-h, 0px)); }
.phero__plate .cross { z-index: 2; }
.phero__cap { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }

/* glass figures (as the homepage hero stats) */
.phero__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pstat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 150px;
  min-height: 104px;
  padding: 16px 16px 14px 18px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 32, 26, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.pstat__num { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; letter-spacing: -0.01em; }
.pstat__label { font-size: 13.5px; line-height: 1.3; max-width: 17ch; color: var(--ivory); }

@media (min-width: 821px) and (min-aspect-ratio: 4 / 3) {
  .phero--plate {
    min-height: 100vh;
    min-height: 100svh;
    max-height: 1200px;
    padding: 0;
    display: block;
    background: var(--deep-2);
  }
  .phero--plate .phero__title::before,
  .phero--plate .phero__title::after { display: none; }
  /* the film fills the hero; its own waterline is the split */
  .phero--plate .phero__plate { position: absolute; inset: 0; z-index: -2; margin: 0; }
  .phero--plate .phero__frame { position: absolute; inset: 0; aspect-ratio: auto; }
  .phero--plate .phero__frame img,
  .phero--plate .phero__frame video { object-position: var(--focus-x, 64%) 50%; }
  .phero--plate .phero__plate > .cross { display: none; }
  .phero--plate .phero__plate .film-toggle { right: var(--gutter); bottom: auto; top: calc(var(--nav-h) + 72px); }
  /* darken the reading side of the water, and the very top under the nav */
  .phero--plate .phero__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(10, 32, 26, 0.34) 0, rgba(10, 32, 26, 0) 16%),
      linear-gradient(90deg, rgba(8, 34, 30, 0.62) 0, rgba(8, 34, 30, 0.5) 30%, rgba(8, 34, 30, 0.14) 50%, rgba(8, 34, 30, 0) 62%),
      linear-gradient(180deg, rgba(8, 34, 30, 0) 50%, rgba(10, 44, 38, 0.2) 70%, rgba(15, 52, 46, 0.86) 100%);
  }
  .phero--plate .phero__head {
    position: absolute;
    left: var(--gutter);
    top: 52%;
    translate: 0 -50%;
    max-width: 52vw;
  }
  .phero--plate .phero__meta { position: absolute; left: 0; bottom: 100%; margin-bottom: clamp(22px, 2.6vw, 34px); }
  .phero--plate .phero__body { position: absolute; left: 0; top: 100%; width: min(44ch, 40vw); }
  .phero--plate .phero__lede { font-size: clamp(17px, 1.3vw, 20px); }
  .phero--plate .phero__plate::before,
  .phero--plate .phero__plate::after { display: none; }
  .phero--plate .phero__cap {
    position: absolute;
    right: var(--gutter);
    top: calc(var(--nav-h) + 22px);
    max-width: 34ch;
    margin: 0;
    text-align: right;
    font-size: 13.5px;
    color: rgba(244, 239, 228, 0.9);
    text-shadow: 0 1px 12px rgba(10, 32, 26, 0.6);
  }
  .phero--plate .phero__stats {
    position: absolute;
    right: var(--gutter);
    bottom: clamp(28px, 5vh, 56px);
    margin: 0;
    flex-wrap: nowrap;
  }
  .phero--plate .pstat { flex: none; width: clamp(180px, 14vw, 220px); min-height: clamp(104px, 13vh, 124px); }
  /* layout-sheet guides: gutters, the nav's foot and the hero's foot */
  .phero__guides { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .phero__guides i { position: absolute; background: var(--guide); }
  .phero__guides .g-l, .phero__guides .g-r { top: var(--nav-h); bottom: 0; width: 1px; }
  .phero__guides .g-l { left: var(--gutter); }
  .phero__guides .g-r { right: var(--gutter); }
  .phero__guides .g-t, .phero__guides .g-b { left: 0; right: 0; height: 1px; }
  .phero__guides .g-t { top: var(--nav-h); }
  .phero__guides .g-b { bottom: 0; }
  .phero__guides .cross { position: absolute; }
  .phero__guides .cross--nav { top: var(--nav-h); }
}

/* ---------- Where the money goes: the opening shot that sinks under the surface ----------
   Default (no JS, reduced motion, frames not loaded): the opening frame fills the first screen with the
   headline at its waterline, and the two notes follow as a plain block in the water.
   .is-scrub (pages.js): the stage pins for the length of .dip, scrolling plays the shot frame by frame and
   the notes come in as the camera passes the surface. */
.dip { position: relative; color: var(--ivory); background: var(--deep-1); }
.dip__stage { position: relative; }
.dip__media {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  max-height: 1200px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-1) 0 52%, #2f8a78 52%);
}
.dip__media picture,
.dip__media img,
.dip__canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.dip__media img { object-fit: cover; object-position: var(--focus-x, 66%) 52%; }
.dip__canvas { display: none; }
.dip__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 32, 26, 0.36) 0, rgba(10, 32, 26, 0) 15%),
    linear-gradient(90deg, rgba(8, 34, 30, 0.6) 0, rgba(8, 34, 30, 0.42) 30%, rgba(8, 34, 30, 0.1) 52%, rgba(8, 34, 30, 0) 64%),
    linear-gradient(180deg, rgba(8, 34, 30, 0) 58%, rgba(15, 52, 46, 0.55) 86%, rgba(26, 82, 73, 0.9) 100%);
}
.dip__guides { position: absolute; inset: 0; pointer-events: none; }
.dip__guides i { position: absolute; background: var(--guide); }
.dip__guides .g-t { top: var(--nav-h); left: 0; right: 0; height: 1px; }
.dip__guides .g-l, .dip__guides .g-r { top: var(--nav-h); height: 100svh; width: 1px; }
.dip__guides .g-l { left: var(--gutter); }
.dip__guides .g-r { right: var(--gutter); }
.dip__guides .cross--nav { top: var(--nav-h); }
.dip__head {
  position: absolute;
  inset: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  max-height: 1200px;
  pointer-events: none;
}
.dip__head > * { pointer-events: auto; }
.dip__meta,
.dip__title,
.dip__body { position: absolute; left: var(--gutter); }
.dip__title {
  top: 52%;
  translate: 0 -50%;
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.93;
  font-size: var(--fs-page);
}
.dip__title .line { display: block; }
.dip__title .line--indent { padding-left: 0.7em; }
.dip__title i { font-style: italic; }
.dip__meta { bottom: calc(48% + var(--fs-page) * 0.93 + clamp(20px, 2.4vw, 32px)); }
.dip__body { top: calc(52% + var(--fs-page) * 0.93 + clamp(24px, 2.6vw, 36px)); width: min(44ch, 42vw); }
.dip__lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: rgba(244, 239, 228, 0.95); text-wrap: pretty; }
.dip__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.4vw, 34px); }
/* side by side on wide screens, past the text column if need be: wrapped, the second button fell below short
   laptop windows (the stage is one screen tall and clips). Under 1080px wide the row would run into the price
   cards, and wrapped it still fits */
@media (min-width: 1080px) and (min-aspect-ratio: 1311 / 1000) {
  .dip__ctas { flex-wrap: nowrap; width: max-content; }
}
.dip__ctas .btn--outline { border-color: rgba(244, 239, 228, 0.7); background: rgba(8, 30, 25, 0.3); }
.dip__ctas .btn--outline:hover { background: rgba(8, 30, 25, 0.45); }
.dip__ctas .btn__disc svg { margin-left: 0; }
.dip__stats { position: absolute; right: var(--gutter); bottom: clamp(28px, 5vh, 56px); display: flex; gap: 10px; }
.dip__stats .pstat { flex: none; width: clamp(176px, 14vw, 220px); min-height: clamp(104px, 13vh, 124px); }

/* the notes: default, a block in the water below the opening frame */
.dip__notes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(24px, 3vw, 40px);
  scroll-margin-top: var(--nav-h);
}
.dip__note {
  padding: clamp(22px, 2.4vw, 36px);
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(8, 32, 26, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}
.dip__note-title { margin-top: 10px; font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 40px); line-height: 1.02; }
.dip__note .beads { margin-top: clamp(18px, 2vw, 26px); }
.dip__note .beads li { padding-top: 11px; padding-bottom: 11px; }
.dip__note-foot { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.dip__note-foot a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dip__note-foot a:hover { text-decoration-color: var(--signal); }

/* scrub mode: pinned stage, the shot plays with the scroll */
.dip.is-scrub { height: 290vh; height: 290svh; }
.dip.is-scrub .dip__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.dip.is-scrub .dip__media { height: 100%; max-height: none; }
.dip.is-scrub .dip__canvas { display: block; }
/* until its first frame is drawn the canvas (opaque) stays hidden over the poster, and the notes take their places
   without a fade */
.dip.is-scrub:not(.has-frame) .dip__canvas { visibility: hidden; }
.dip.is-scrub:not(.has-frame) .dip__note { transition: none; opacity: 0 !important; pointer-events: none !important; }
.dip.is-scrub .dip__poster { opacity: 0; transition: opacity 0.4s var(--ease-out); }
.dip.is-scrub:not(.has-frame) .dip__poster { opacity: 1; }
.dip.is-scrub .dip__head { max-height: none; }
.dip.is-scrub .dip__head > * { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
/* under Pause motion the dive's text changes without fades */
html.motion-off .dip.is-scrub .dip__head > *,
html.motion-off .dip.is-scrub .dip__note { transition: none !important; }
/* the headline and the first note share the screen's upper half: each comes back only once the other has gone */
.dip.is-scrub:not(.is-under) .dip__head > * { transition-delay: 0.4s; }
.dip.is-scrub.show-above .dip__note--above { transition-delay: 0.4s; }
.dip.is-scrub.show-below .dip__note--below { transition-delay: 0.35s; }
.dip.is-scrub.show-below .dip__note--above { transition-duration: 0.3s; }
.dip__note--below:focus { outline: none; }
.dip.is-scrub.is-under .dip__meta,
.dip.is-scrub.is-under .dip__title,
.dip.is-scrub.is-under .dip__body,
.dip.is-scrub.is-under .dip__stats { opacity: 0; transform: translate3d(0, -24px, 0); pointer-events: none; }
.dip.is-scrub .dip__notes { position: absolute; inset: 0; display: block; max-width: none; padding: 0; pointer-events: none; }
.dip.is-scrub .dip__note {
  position: absolute;
  left: var(--gutter);
  width: min(30rem, 40vw);
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.dip.is-scrub .dip__note--above { top: calc(var(--nav-h) + 6vh); }
.dip.is-scrub .dip__note--below { bottom: 7vh; }
.dip.is-scrub.show-above .dip__note--above,
.dip.is-scrub.show-below .dip__note--below { opacity: 1; transform: none; pointer-events: auto; }
.dip.is-scrub.show-below .dip__note--above { opacity: 0.0; transform: translate3d(0, -28px, 0); }
.dip.is-scrub .dip__note:focus-within,
.dip.is-scrub .dip__head > :focus-within { opacity: 1; transform: none; pointer-events: auto; }

.dip__film,
.dip__loop { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus-x, 66%) 52%; opacity: 0; }
/* the scroll-played shot ends on its own framing (pages.js), which the loop then takes */
.dip.is-scrub .dip__loop { object-position: var(--focus-x, 66%) var(--focus-y, 52%); }
.dip__film { transition: none; }
.dip__film.is-playing { opacity: 1; }
.dip.is-scrub .dip__film { display: none; }
/* the paddling loop takes over where the shot ends: its first frame is the shot's last (aligned, matched in
   colour and sharpness), so it simply appears, paused on that frame, and then starts moving */
.dip__loop.is-on { opacity: 1; }
.dip__toggle { display: none !important; left: 12px; right: auto; top: 12px; bottom: auto; z-index: 3; }
.js .dip.has-motion .dip__toggle { display: grid !important; }
@media (min-width: 821px) and (min-aspect-ratio: 1311 / 1000) {
  .dip__toggle { left: auto; right: var(--gutter); bottom: auto; top: calc(var(--nav-h) + 22px); }
}

/* stacked: phones and portrait screens. The headline straddles a sage/water split drawn by its own
   pseudo-elements; the shot sits framed below and plays once in view; the notes follow as cards. */
@media (max-width: 820px), (max-aspect-ratio: 131 / 100) {
  .dip { overflow: clip; background: var(--deep-1); }
  .dip__stage { display: flex; flex-direction: column; }
  .dip__head { order: 1; position: relative; inset: auto; height: auto; min-height: 0; max-height: none; padding: calc(var(--nav-h) + 30px) var(--gutter) 0; isolation: isolate; }
  html:not(.js) .dip__head { padding-top: 30px; }
  .dip__meta, .dip__title, .dip__body { position: relative; left: auto; top: auto; bottom: auto; translate: none; width: auto; }
  .dip__title { margin-top: 20px; }
  .dip__title::before,
  .dip__title::after { content: ""; position: absolute; left: -100vw; right: -100vw; z-index: -1; pointer-events: none; }
  .dip__title::before { bottom: 50%; height: 300vh; background: linear-gradient(0deg, var(--sky-1), var(--sky-0) 60%); }
  .dip__title::after { top: 50%; height: 300vh; background: linear-gradient(180deg, rgba(144, 222, 200, 0.28) 0, rgba(144, 222, 200, 0) 2px), linear-gradient(180deg, #2f7566 0, var(--deep-0) 40vh, var(--deep-1) 100%); }
  .dip__body { margin-top: 24px; }
  .dip__stats { position: relative; right: auto; bottom: auto; flex-wrap: wrap; margin-top: 24px; }
  .dip__stats .pstat { flex: 1 1 calc(50% - 5px); width: auto; min-height: 92px; }
  /* z-index: the headline's water band (.dip__title::after) runs down behind the picture; Chrome paints the picture
     over it because of flex order, Safari by source order would not */
  .dip__media { order: 2; z-index: 1; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 10; margin: 32px var(--gutter) 0; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 70px rgba(3, 20, 17, 0.35); }
  .dip__shade, .dip__guides { display: none; }
  .dip__notes { order: 3; grid-template-columns: 1fr; padding-top: 28px; }
}

/* ---------- Water column ---------- */
.deep {
  position: relative;
  z-index: 1;
  color: var(--ink-1);
  background: linear-gradient(180deg, var(--deep-1) 0, var(--deep-2) 70vh, var(--deep-3) 30%, var(--deep-4) 66%, var(--deep-5) 100%);
  overflow: clip;
}
.phero--plate + .deep,
.phero + .deep { margin-top: -1px; }
.deep__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px, #000 45%, rgba(0, 0, 0, 0.4) 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 220px, #000 45%, rgba(0, 0, 0, 0.4) 100%);
}
.deep__sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.deep__caustics {
  position: absolute;
  inset: -512px;
  background: url("../assets/img/caustics.webp?v=w1") repeat;
  background-size: 512px 512px;
  opacity: 0.07;
  animation: pg-caustic 46s linear infinite;
  will-change: transform;
}
.deep__caustics--b { background-size: 768px 768px; inset: -768px; opacity: 0.045; animation: pg-caustic-b 70s linear infinite; }
@keyframes pg-caustic { to { transform: translate3d(512px, 512px, 0); } }
@keyframes pg-caustic-b { to { transform: translate3d(-768px, 768px, 0); } }
.deep__bubbles i {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85) 0 14%, rgba(255, 255, 255, 0.12) 36%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.35) 72%, transparent 76%);
  opacity: 0.55;
  animation: pg-bubble var(--d) linear infinite;
  animation-delay: var(--t);
  will-change: transform;
}
@keyframes pg-bubble {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(6px, -27vh, 0); }
  50% { transform: translate3d(-5px, -55vh, 0); }
  75% { transform: translate3d(7px, -82vh, 0); }
  100% { transform: translate3d(0, -112vh, 0); }
}
.deep__rays {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 130vh;
  pointer-events: none;
  z-index: 0;
  transform-origin: 50% 0;
  animation: pg-sway 14s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22vh, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22vh, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
}
.deep__rays i {
  position: absolute;
  top: -10vh;
  height: 140vh;
  width: 9vw;
  background: linear-gradient(180deg, rgba(220, 255, 240, 0.12), rgba(220, 255, 240, 0) 85%);
  transform: skewX(-14deg);
}
.deep__rays i:nth-child(1) { left: 8%; width: 6vw; opacity: 0.8; }
.deep__rays i:nth-child(2) { left: 21%; width: 11vw; opacity: 0.55; }
.deep__rays i:nth-child(3) { left: 39%; width: 5vw; opacity: 0.9; }
.deep__rays i:nth-child(4) { left: 55%; width: 12vw; opacity: 0.45; }
.deep__rays i:nth-child(5) { left: 73%; width: 7vw; opacity: 0.7; }
.deep__rays i:nth-child(6) { left: 88%; width: 9vw; opacity: 0.5; }
@keyframes pg-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }

/* ---------- Section grammar (the homepage lower half) ---------- */
.lw { position: relative; z-index: 1; padding: var(--section-y) 0; }
.lw__wrap { max-width: 1560px; margin: 0 auto; padding: 0 var(--gutter); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.sec-head__meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; max-width: 560px; }
.sec-count { font-size: 14px; font-feature-settings: "tnum" 1; color: var(--ink-2); }
.sec-title {
  grid-column: 1 / span 7;
  margin-top: clamp(24px, 2.8vw, 40px);
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  font-size: clamp(38px, 4.6vw, 76px);
}
.sec-title > span { display: block; }
.sec-title .indent { padding-left: 1.25em; }
.sec-title i { font-style: italic; }
.sec-lede { grid-column: 9 / -1; font-size: var(--fs-long); line-height: 1.55; color: var(--ink-2); max-width: 44ch; padding-bottom: 0.4em; text-wrap: pretty; }
.sec-lede + .sec-lede { grid-column: 9 / -1; margin-top: 14px; padding-bottom: 0.4em; }
.sec-head--stack { display: block; }
.sec-head--stack .sec-lede { margin-top: 26px; padding: 0; }

.glass { background: var(--glass-fill); border: 1px solid var(--line); border-radius: var(--radius-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
.num { font-family: var(--serif); font-style: italic; color: var(--ink-3); opacity: 1; font-feature-settings: "lnum" 1; }
.caps { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.pg-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--ink-1);
  text-decoration: underline;
  text-decoration-color: rgba(244, 239, 228, 0.45);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.25s var(--ease-out);
}
.pg-link:hover { text-decoration-color: var(--signal); }
.pg-link svg { width: 15px; height: 15px; flex: none; }
.prose p + p { margin-top: 14px; }
.prose p { font-size: var(--fs-long); line-height: 1.6; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.prose a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(244, 239, 228, 0.5); }
.prose a:hover { text-decoration-color: var(--signal); }

/* glass bubble: step numbers and bullets */
.bubble {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1;
  color: var(--ivory);
  background:
    radial-gradient(circle at 27% 24%, rgba(255, 255, 255, 0.7) 0 6%, rgba(255, 255, 255, 0) 14%),
    radial-gradient(circle at 50% 50%, rgba(8, 36, 31, 0.35) 0 50%, rgba(190, 240, 225, 0.2) 70%, rgba(255, 255, 255, 0.55) 76%, rgba(255, 255, 255, 0) 79%);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1);
}
.bubble--sm { width: 34px; height: 34px; font-size: 15px; }

/* bead list: glass beads on hairlines (the plan list) */
.beads { display: grid; }
.beads li {
  position: relative;
  padding: 13px 0 13px 30px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.beads li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85) 0 16%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.5) 70%, transparent 74%);
}
.beads strong { color: var(--ink-1); font-weight: 600; }

/* ---------- Plan cards (the homepage .plan) ---------- */
.plans { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.plan { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 40px); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.plan--feature { border-color: rgba(232, 105, 47, 0.75); box-shadow: inset 0 0 0 1px rgba(232, 105, 47, 0.25); }
.plan__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.plan__name { font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: 0.01em; }
.plan__tag { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.7vw, 26px); color: var(--ink-1); }
.plan__price { margin-top: clamp(18px, 2vw, 30px); font-family: var(--serif); font-size: clamp(72px, 8vw, 132px); line-height: 0.9; letter-spacing: -0.02em; }
.plan__price--text { font-size: clamp(40px, 4.2vw, 70px); line-height: 1; }
.plan__cur { font-size: 0.32em; vertical-align: 1.5em; margin-right: 0.04em; }
.plan__price--text .plan__cur { font-size: 0.5em; vertical-align: 0.7em; }
.plan__per { font-family: var(--sans); font-size: 15px; letter-spacing: 0; margin-left: 12px; color: var(--ink-2); }
.plan__text { margin-top: 18px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.plan .beads { margin-top: clamp(22px, 2.4vw, 34px); }
.plan__note { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.plan__note strong { color: var(--ink-1); font-weight: 600; }
.plan__cta { margin-top: auto; padding-top: 30px; align-self: flex-start; }

/* ---------- Expanders (FAQ and fine print), the homepage .qa ---------- */
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none;
  display: grid;
  grid-template-columns: clamp(64px, 6vw, 96px) 1fr 34px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 16px 0;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__q { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.15; }
.qa__icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  translate: -50% -50%;
  background: var(--ivory);
  transition: transform 0.35s var(--ease-out);
}
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa summary:hover .qa__icon { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); }
.qa__a { padding: 0 46px 26px calc(clamp(64px, 6vw, 96px) + 12px); }
.qa__a p { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.qa__a p + p { margin-top: 12px; }
.qa__a a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.qa__a a:hover { text-decoration-color: var(--signal); }
@supports selector(::details-content) {
  .qa::details-content { block-size: 0; overflow: hidden; transition: block-size 0.5s var(--ease-out), content-visibility 0.5s allow-discrete; }
  .qa[open]::details-content { block-size: auto; }
}
@supports (interpolate-size: allow-keywords) { :root:has(body.pg) { interpolate-size: allow-keywords; } }

/* ---------- Page blocks: intro copy, ownership panel, fine print, FAQ split ---------- */
.options__intro { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.options__intro > * { grid-column: 1 / span 7; }
.owned {
  margin-top: clamp(40px, 4.4vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(26px, 3vw, 48px);
}
.owned__item { border-top: 1px solid var(--line); padding-top: 16px; }
.owned__item p:not(.caps) { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.fine { margin-top: clamp(32px, 3.4vw, 52px); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: 12px 24px; align-items: baseline; padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.6vw, 40px); }
.fine p:not(.caps) { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 90ch; }
.faq { padding-bottom: calc(var(--section-y) * 1.2); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq__grid .sec-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq__grid .sec-lede { margin-top: 22px; }
@media (max-width: 1100px) {
  .options__intro > * { grid-column: 1 / -1; }
  .owned { grid-template-columns: 1fr; gap: 22px; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__grid .sec-head { position: static; }
}
@media (max-width: 620px) {
  .fine { grid-template-columns: 1fr; }
}

/* ---------- Comparison tables (options and care) ---------- */
.compare { margin-top: clamp(40px, 4.4vw, 64px); padding: clamp(8px, 1vw, 16px) clamp(20px, 2.6vw, 40px) clamp(14px, 1.6vw, 24px); }
.ctable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ctable th, .ctable td { text-align: left; vertical-align: top; }
.ctable__corner { width: 22%; }
.ctable thead th { padding: clamp(18px, 2vw, 28px) clamp(14px, 1.6vw, 24px) clamp(16px, 1.8vw, 26px); }
.ctable__col--feature { position: relative; }
.ctable__col--feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--signal); border-radius: 2px; }
.ctable__kicker { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-2); }
.ctable__name { margin-top: 6px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.2; text-transform: none; }
.ctable__price { margin-top: clamp(10px, 1.2vw, 18px); font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 5.6vw, 96px); line-height: 0.9; letter-spacing: -0.02em; }
.ctable__price--sm { font-size: clamp(44px, 4vw, 72px); }
.ctable__sub { margin-top: 10px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.ctable tbody th {
  padding: 18px clamp(14px, 1.6vw, 24px) 18px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  line-height: 1.5;
}
.ctable--care tbody th { letter-spacing: 0; text-transform: none; font-size: 15.5px; font-weight: 500; color: var(--ink-1); }
.ctable tbody td { padding: 18px clamp(14px, 1.6vw, 24px); border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.ctable tbody td p + .beads { margin-top: 14px; }
.beads--tight li { padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
.tick, .dash { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; }
.tick::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.4' fill='none' stroke='%23f4efe4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(8, 36, 31, 0.35) 0 50%, rgba(190, 240, 225, 0.2) 70%, rgba(255, 255, 255, 0.55) 76%, rgba(255, 255, 255, 0) 79%);
}
.tick { color: var(--ink-1); }
.dash { color: var(--ink-3); }
.dash::before { content: ""; width: 14px; height: 1px; background: currentColor; margin: 0 4px; }

/* ---------- When you pay: bubble steps on a waterline ---------- */
.tline { position: relative; margin-top: clamp(48px, 5vw, 80px); }
.tline__wave { position: absolute; left: 0; right: 0; top: 12px; width: 100%; height: 22px; overflow: visible; }
.tline__wave path { fill: none; stroke: rgba(235, 255, 248, 0.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tline__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col-gap); counter-reset: none; }
.tstep { display: grid; align-content: start; gap: 14px; }
.tstep .bubble { background-color: rgba(19, 70, 63, 0.92); }
.tstep--pay .bubble { box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(232, 105, 47, 0.8); }
.tstep__title { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.12; }
.tstep p { font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
.pay__note { margin-top: clamp(28px, 3vw, 44px); font-size: 15.5px; color: var(--ink-2); }

/* ---------- Framed media (crosshair corners) and the care layout ---------- */
.frame { position: relative; margin: 0; }
.frame__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 90px rgba(3, 20, 17, 0.35); }
.frame__media img, .frame__media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.frame__media video { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.frame__media video.is-playing { opacity: 1; }
.frame .cross { z-index: 2; }
.frame .cross--bottom { top: calc(100% - var(--cap-h, 34px)); }
.frame__cap { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.frame .film-toggle { right: 12px; bottom: calc(var(--cap-h, 34px) + 12px); }
.care__grid { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.care__grid .compare { margin-top: 0; }
.care__film { position: sticky; top: calc(var(--nav-h) + 32px); }
.care__more { margin-top: 18px; }
.owned--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.owned--stack { grid-template-columns: 1fr; margin-top: 0; gap: 26px; }

@media (max-width: 1100px) {
  .tline__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .tline__wave { display: none; }
  .care__grid { grid-template-columns: 1fr; }
  .care__film { position: relative; top: auto; }
  .owned--two { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  /* tables become stacked rows: the column name rides on each cell */
  .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; width: 100%; }
  .ctable thead { display: block; }
  .ctable thead tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ctable__corner { display: none !important; }
  .ctable thead th { padding: 16px 0 14px; }
  .ctable tbody tr { padding: 4px 0 10px; border-top: 1px solid var(--line); }
  .ctable tbody th { border-top: 0; padding: 14px 0 6px; }
  .ctable tbody td { border-top: 0; padding: 8px 0; display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; }
  .ctable tbody td::before { content: attr(data-col); font-size: 12.5px; font-weight: 600; color: var(--label); }
  .ctable__price { font-size: clamp(40px, 11vw, 56px); }
}
@media (max-width: 560px) {
  .tline__list { grid-template-columns: 1fr; row-gap: 26px; }
  .tline__list::before { content: ""; position: absolute; left: 22px; top: 24px; bottom: 24px; width: 1px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 3px, transparent 3px 8px); }
  .tstep { grid-template-columns: 46px 1fr; column-gap: 16px; row-gap: 6px; }
  .tstep .bubble { grid-row: span 2; position: relative; }
  .tstep__title { margin-top: 10px; }
  .ctable tbody td { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Closing: back at the surface, the duck floating calm ---------- */
.pcta { position: relative; z-index: 3; color: var(--ivory); background: var(--deep-5); }
.pcta__copy { padding: var(--section-y) 0 clamp(56px, 6vw, 96px); background: linear-gradient(180deg, var(--deep-5) 0%, #0d3530 55%, #2a5a47 100%); }
.pcta__meta { max-width: none; }
.pcta__title { margin-top: clamp(28px, 3.4vw, 52px); font-size: clamp(44px, 6.6vw, 112px); }
.pcta__title > span { display: block; }
.pcta__title .indent { padding-left: 1.25em; }
.pcta__title .br-m { display: none; }
.pcta__lower {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  margin-top: clamp(32px, 3.6vw, 56px);
  padding-left: calc(clamp(44px, 6.6vw, 112px) * 1.25);
}
.pcta__sub { max-width: 42ch; font-size: var(--fs-long); line-height: 1.55; color: rgba(244, 239, 228, 0.86); }
.pcta__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.pcta__btns .btn__disc svg { width: 16px; height: 16px; margin-left: 0; }
.pcta__stage { position: relative; }
.pcta__window {
  position: relative;
  display: block;
  width: 100%;
  height: 56vh;
  height: 56svh;
  min-height: 300px;
  overflow: hidden;
  background: linear-gradient(180deg, #607253 0 55%, #81ad90 55% 100%);
}
.pcta__window img,
.pcta__film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 64% 8%; }
.pcta__film { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.pcta__film.is-playing { opacity: 1; }
.pcta__stage::before,
.pcta__stage::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.18); pointer-events: none; z-index: 1; }
.pcta__stage::before { top: 0; }
.pcta__stage::after { bottom: 0; }
.pcta__stage .cross { z-index: 2; }
.film-toggle {
  position: absolute;
  right: calc(var(--gutter) + 14px);
  bottom: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: rgba(6, 24, 20, 0.55);
  color: var(--ivory);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.25s var(--ease-out);
}
.js .film-toggle { display: grid; }
.film-toggle:hover { background: rgba(6, 24, 20, 0.8); }
.film-toggle svg { width: 14px; height: 14px; }
.film-toggle .i-play { display: none; }
.film-toggle.is-paused .i-play { display: block; }
.film-toggle.is-paused .i-pause { display: none; }

/* ---------- Footer: the homepage footer, with the giant wordmark ---------- */
.pfoot { position: relative; z-index: 3; background: var(--forest-900); color: var(--ivory); padding: clamp(56px, 6vw, 96px) 0 28px; overflow: hidden; }
.pfoot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; }
.pfoot__id { grid-column: 1 / span 5; }
.pfoot__brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.pfoot__mark { width: 40px; height: 40px; fill: url(#q-silver); flex: none; }
.pfoot__word { font-family: var(--serif); font-size: 26px; line-height: 1; letter-spacing: 0.01em; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pfoot__word span { margin-left: 36%; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.34em; line-height: 1; opacity: 0.78; }
.pfoot__line { margin-top: 18px; max-width: 34ch; font-size: 15px; line-height: 1.5; color: rgba(244, 239, 228, 0.76); }
.pfoot__h { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); margin-bottom: 14px; }
.pfoot__contact { grid-column: 6 / span 3; font-size: 15px; line-height: 1.5; }
.pfoot__contact p { color: rgba(244, 239, 228, 0.82); }
.pfoot__email { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease-out); }
.pfoot__email:hover { border-color: currentColor; }
.pfoot__nav { grid-column: 10 / -1; }
.pfoot__nav ul { display: grid; }
.pfoot__nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: rgba(244, 239, 228, 0.88); transition: color 0.2s var(--ease-out); }
.pfoot__nav a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pfoot__nav a[aria-current="page"] { color: var(--ivory); font-weight: 600; }
.pfoot__file { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; color: var(--mist); }
.pfoot__giant {
  margin-top: clamp(48px, 6vw, 96px);
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-size: clamp(64px, 20.4vw, 360px);
  line-height: 0.8;
  padding-bottom: 0.2em;
  letter-spacing: -0.01em;
  color: rgba(233, 237, 239, 0.07);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
/* the wordmark is drawn from data-word: decorative, so it carries no text node */
.pfoot__giant::before { content: attr(data-word); }
.pfoot__giant-o { width: 0.7em; height: 0.7em; margin-left: 0.03em; fill: rgba(233, 237, 239, 0.07); flex: none; }
.pfoot__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13.5px; color: rgba(244, 239, 228, 0.7); }
.pfoot__base small { font-size: inherit; }
.pfoot__top-link { display: inline-flex; align-items: center; min-height: 44px; }
.pfoot__top-link:hover { color: var(--ivory); }

/* ---------- Motion: reveals and the hero's arrival ---------- */
@media (prefers-reduced-motion: no-preference) {
  .phero__title .line { animation: pg-rise 1s var(--ease-out) both; }
  .phero__title .line:nth-child(2) { animation-delay: 0.08s; }
  .phero__meta, .phero__body, .phero__stats, .phero__cap { animation: pg-fade 1s 0.3s var(--ease-out) both; }
  .js [data-reveal] { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
  .js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
  .js [data-reveal-group] > * { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.1s); }
  .js [data-reveal-group]:not(.is-in) > * { opacity: 0; transform: translate3d(0, 32px, 0); }
}
[data-reveal-group] > :nth-child(2) { --i: 1; }
[data-reveal-group] > :nth-child(3) { --i: 2; }
[data-reveal-group] > :nth-child(4) { --i: 3; }
@keyframes pg-rise { from { opacity: 0; transform: translateY(0.32em); } }
@keyframes pg-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .deep__caustics, .deep__bubbles i, .deep__rays { animation: none !important; }
  .deep__bubbles { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sec-title { grid-column: 1 / -1; }
  .sec-lede, .sec-lede + .sec-lede { grid-column: 1 / span 9; margin-top: 22px; padding: 0; }
  .pfoot__id { grid-column: 1 / -1; }
  .pfoot__contact { grid-column: 1 / span 6; }
  .pfoot__nav { grid-column: 7 / -1; }
}
@media (max-width: 820px) {
  .pnav__links, .pnav__cta, .pnav__motion { display: none; }
  .pnav__menu { display: block; }
  html:not(.js) .pnav { height: auto; min-height: var(--nav-h); flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  html:not(.js) .pnav__links { display: flex; flex-wrap: wrap; gap: 4px 20px; width: 100%; order: 3; }
  .plans { grid-template-columns: 1fr; }
  .pcta__title .br-m { display: block; }
  .pcta__lower { padding-left: 0; }
  .pcta__window { height: 40vh; height: 40svh; min-height: 240px; }
  .pcta__film, .pcta__window img { object-position: 70% 12%; }
  .pg { --fs-page: clamp(32px, 10vw, 84px); }
}
@media (max-width: 560px) {
  .qa summary { grid-template-columns: 48px 1fr 34px; }
  .qa__a { padding-left: 0; padding-right: 0; }
  .pfoot__contact, .pfoot__nav { grid-column: 1 / -1; }
  .pfoot__base { flex-direction: column; align-items: flex-start; }
  .phero__ctas .btn, .pcta__btns .btn { flex: 1 1 auto; justify-content: center; }
  .pstat { flex-basis: calc(50% - 5px); min-height: 92px; padding: 12px 12px 10px 14px; border-radius: 16px; }
  .pstat__num { font-size: 26px; }
  .pstat__label { font-size: 12.5px; }
}
@media (max-width: 440px) {
  .pnav__word { display: none; }
}

/* =====================================================================================================
   Components for the other growth pages (care, builds, work, guides, articles)
   ===================================================================================================== */

/* ---------- Line art: draws on when its container comes into view (slots: art-slots block) ---------- */
.art { display: block; width: 100%; height: auto; overflow: visible; }
.art .lbl { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; fill: var(--ivory); stroke: none; }
.js [data-art] .art .ln { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.js [data-art] .art .dt { opacity: 0; }
.js [data-art] .art .pl { opacity: 0; transform: translate3d(0, 10px, 0); }
.js [data-art] .art .nd { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); }
.js [data-art].is-drawn .art .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out) calc(0.2s + var(--i, 0) * 260ms); }
.js [data-art].is-drawn .art .dt { opacity: 1; transition: opacity 0.6s ease calc(0.2s + var(--i, 0) * 260ms); }
.js [data-art].is-drawn .art .pl { opacity: 1; transform: none; transition: opacity 0.6s ease calc(0.2s + var(--i, 0) * 260ms), transform 0.9s var(--ease-out) calc(0.2s + var(--i, 0) * 260ms); }
.js [data-art].is-drawn .art .nd { transform: none; transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) calc(0.2s + var(--i, 0) * 260ms); }
@media (prefers-reduced-motion: reduce) {
  .js [data-art] .art .ln { stroke-dashoffset: 0; }
  .js [data-art] .art .dt, .js [data-art] .art .pl { opacity: 1; transform: none; }
  .js [data-art] .art .nd { transform: none; }
}

/* the well: a dark pane in the water holding a drawing, crosshairs at its corners */
.well {
  position: relative;
  margin: 0;
  padding: clamp(18px, 2vw, 30px);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(4, 24, 20, 0.52), rgba(4, 24, 20, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.well .cross { z-index: 2; }
.well__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: clamp(12px, 1.4vw, 20px); }
.well__cap { margin-top: clamp(12px, 1.4vw, 18px); font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.well__labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: clamp(16px, 1.8vw, 26px); }
.well__labels li { border-top: 1px solid var(--line); padding-top: 12px; }
.well__labels h3 { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.1; }
.well__labels p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Hero with a drawing (builds, guides, articles): title left, the well right ---------- */
.phero--art { padding-bottom: clamp(64px, 8vw, 128px); }
.phero--art .phero__well { margin-top: clamp(36px, 6vw, 56px); }
.phero__byline { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.phero__tags { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1101px) {
  .phero--art { min-height: min(100svh, 980px); display: grid; align-items: center; }
  .phero--art .phero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; max-width: 1560px; margin: 0 auto; width: 100%; }
  .phero--art .phero__head { grid-column: 1 / span 6; }
  .phero--art .phero__well { grid-column: 7 / -1; margin-top: 0; }
  .phero--art .phero__title { font-size: clamp(46px, 5vw, 96px); }
}

/* ---------- Split section: a short aside, the main copy ---------- */
.split { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: start; }
.split__aside { grid-column: 1 / span 5; }
.split__main { grid-column: 7 / -1; }
.split__main .prose p { max-width: 58ch; }
.split--even .split__aside { grid-column: 1 / span 6; }
.split--even .split__main { grid-column: 7 / -1; }

/* moments: the occasions a site needs attention, as hairline rows */
.moments li { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.moments li:last-child { border-bottom: 1px solid var(--line); }
.moments .num { font-size: 18px; }
.moments span:last-child { font-family: var(--serif); text-transform: uppercase; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.1; }

/* facts: a short definition list in glass */
.facts { padding: clamp(22px, 2.4vw, 34px); }
.facts div { padding: 14px 0; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; padding-top: 0; }
.facts dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.facts dd { margin-top: 6px; font-family: var(--serif); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; }

/* the monthly check: numbered glass cards */
.mchecks { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.mcheck { display: flex; flex-direction: column; gap: 18px; min-height: 230px; padding: clamp(20px, 2vw, 28px); }
.mcheck .num { font-size: 22px; }
.mcheck p { margin-top: auto; font-size: 16px; line-height: 1.5; color: var(--ink-1); }
.mcheck .bubble { margin-top: auto; }
.mcheck--done .bubble { width: 38px; height: 38px; }

/* the framed example panel: a hypothetical, labelled as one */
.example { position: relative; margin-top: clamp(32px, 3.4vw, 52px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 18px 32px; padding: clamp(22px, 2.6vw, 40px); }
.example .tag { justify-self: start; align-self: start; }
.example .prose p { max-width: 70ch; }
.example .cross { z-index: 2; }
.example--cols { grid-template-columns: 1fr; }
.example__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.example__col { border-top: 1px solid var(--line); padding-top: 14px; }
.example__col .caps { margin-bottom: 8px; }
.example__col p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.aside-note { margin-top: 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); max-width: 72ch; }

/* a square duck still beside copy */
.story { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; align-items: center; }
.story .frame { grid-column: 1 / span 4; }
.story .frame__media { aspect-ratio: 1 / 1; }
.story__copy { grid-column: 6 / -1; }
.story__copy .prose p { max-width: 54ch; }
.story--flip .frame { grid-column: 9 / -1; grid-row: 1; }
.story--flip .story__copy { grid-column: 1 / span 7; grid-row: 1; }

/* ways: hairline link rows to the next page */
.ways { margin-top: clamp(40px, 4.4vw, 64px); border-bottom: 1px solid var(--line); }
.way { display: grid; grid-template-columns: clamp(56px, 6vw, 96px) minmax(0, 5fr) minmax(0, 6fr) 44px; gap: 12px 24px; align-items: center; padding: clamp(20px, 2.2vw, 30px) 0; border-top: 1px solid var(--line); }
.way .num { font-size: 20px; }
.way__title { font-family: var(--serif); text-transform: uppercase; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.05; }
.way__title a { text-decoration: none; }
.way__title a::after { content: ""; position: absolute; inset: 0; }
.way { position: relative; transition: background-color 0.3s var(--ease-out); }
.way:hover { background: rgba(255, 255, 255, 0.03); }
.way p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.way p a { position: relative; z-index: 1; color: var(--ink-1); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.way__go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out); }
.way__go svg { width: 15px; height: 15px; }
.way:hover .way__go { border-color: var(--ivory); background: rgba(255, 255, 255, 0.06); }
.way__title a:focus-visible { outline: none; }
.way:has(.way__title a:focus-visible) { outline: 2px solid var(--ivory); outline-offset: 4px; border-radius: 4px; }

/* ---------- Step films: one action per step, played in turn along the waterline ---------- */
.steps { position: relative; margin-top: clamp(48px, 5vw, 80px); }
.steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.step { display: grid; align-content: start; gap: 16px; }
.step__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: linear-gradient(180deg, #5d7c5c 0 54%, #2f8a78 54%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.step__media img, .step__media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; }
.step__media video { opacity: 0; }
.step__media video.is-playing { opacity: 1; }
.step.is-current .step__media { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 24px 60px rgba(3, 20, 17, 0.4); }
.step__row { display: flex; align-items: center; gap: 14px; }
.step .bubble { background-color: rgba(19, 70, 63, 0.92); }
.step__title { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.1; }
.step p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.step p strong { color: var(--ink-1); font-weight: 600; }
.steps__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(24px, 2.6vw, 36px); padding-top: 16px; border-top: 1px solid var(--line); }
.steps__bar p { font-size: 14.5px; color: var(--ink-2); }
.steps .film-toggle { position: static; display: none; flex: none; }
.js .steps .film-toggle { display: grid; }

/* ---------- Work: framed exhibits of real screens ---------- */
.exhibit { position: relative; margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.exhibit__main { grid-column: 1 / span 9; }
.exhibit__phone { grid-column: 10 / -1; }
.exhibit .frame__media { background: var(--deep-4); }
.exhibit__phone .frame__media { aspect-ratio: 390 / 844; }
.exhibit .frame__cap { min-height: 2.9em; }
.notes3 { margin-top: clamp(32px, 3.4vw, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.notes3 > div { border-top: 1px solid var(--line); padding-top: 16px; }
.notes3 p:not(.caps) { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.notes3 strong { color: var(--ink-1); font-weight: 600; }
.study { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: start; }
.study .well { grid-column: 1 / span 7; }
.study__list { grid-column: 9 / -1; }
.study__list > p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.study__eg { padding-bottom: 18px; }
.study__eg h3 { margin-top: 8px; font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.05; }
.study__eg p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.study ol li { display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.study ol .num { grid-row: span 2; font-size: 20px; }
.study ol strong { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: 19px; }
.study ol p { font-size: 15px; color: var(--ink-2); }
.permission { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 48px; padding: clamp(24px, 2.6vw, 40px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.permission h2 { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.02; }
.permission h2 i { font-style: italic; }

/* ---------- Guides: three paths, each a drawing and a question ---------- */
.paths { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.path { position: relative; display: flex; flex-direction: column; gap: 16px; }
.path .well { padding: clamp(14px, 1.4vw, 20px); transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out); }
.path:hover .well { border-color: rgba(255, 255, 255, 0.34); }
.path__meta { display: flex; justify-content: space-between; align-items: baseline; }
.path__meta .num { font-size: 20px; }
.path h2 { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.04; }
.path h2 a { text-decoration: none; }
.path h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.path h2 a:focus-visible { outline: none; }
.path:has(h2 a:focus-visible) .well { outline: 2px solid var(--ivory); outline-offset: 4px; }
.path p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.path .pg-link { position: relative; z-index: 1; margin-top: auto; align-self: flex-start; }

/* checks: a list with glass ticks */
.checks { display: grid; }
.checks li { position: relative; padding: 14px 0 14px 44px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--ink-1); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.4' fill='none' stroke='%23f4efe4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(8, 36, 31, 0.35) 0 50%, rgba(190, 240, 225, 0.2) 70%, rgba(255, 255, 255, 0.55) 76%, rgba(255, 255, 255, 0) 79%);
}
.checks-panel { padding: clamp(22px, 2.6vw, 40px); }
.checks-panel > .caps { margin-bottom: 14px; }

/* ---------- Articles: a reading column with a rail ---------- */
.article { position: relative; z-index: 1; padding: clamp(56px, 6vw, 96px) 0 var(--section-y); }
.article__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); max-width: 1560px; margin: 0 auto; padding: 0 var(--gutter); }
.rail { grid-column: 1 / span 3; }
.rail__inner { position: sticky; top: calc(var(--nav-h) + 32px); }
.rail ol { margin-top: 14px; border-left: 1px solid var(--line); }
.rail a { display: flex; align-items: center; min-height: 40px; padding: 4px 0 4px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 14.5px; line-height: 1.3; color: var(--ink-3); transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.rail a:hover { color: var(--ink-1); }
.rail a[aria-current="true"] { color: var(--ivory); border-left-color: var(--ivory); }
.article__body { grid-column: 4 / span 7; }
.asec { padding-top: clamp(48px, 5vw, 80px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.asec:first-child { padding-top: 0; }
.asec__head .caps { display: block; }
.asec h2 { margin-top: 14px; font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.2vw, 52px); line-height: 1.02; letter-spacing: -0.005em; }
.asec h2 > span { display: block; }
.asec h2 .indent { padding-left: 1.1em; }
.asec h2 i { font-style: italic; }
.asec .prose { margin-top: 22px; }
.asec .prose p { max-width: 64ch; }
.asec > .checks, .asec > .vsteps, .asec > .rrr, .asec > .record, .asec > .example, .asec > .checks-panel, .asec > .plans, .asec > .well, .asec > .duo { margin-top: 28px; }
.callout { margin-top: 26px; padding: clamp(22px, 2.6vw, 36px); }
.callout .caps { margin-bottom: 12px; }
.callout .prose { margin-top: 0; }
.callout .prose p:first-child { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 27px); line-height: 1.35; color: var(--ink-1); }
.vsteps { position: relative; display: grid; gap: 0; }
.vsteps::before { content: ""; position: absolute; left: 22px; top: 30px; bottom: 30px; width: 1px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 3px, transparent 3px 8px); }
.vsteps li { position: relative; display: grid; grid-template-columns: 46px 1fr; column-gap: 20px; padding: 14px 0; }
.vsteps .bubble { background-color: rgba(19, 70, 63, 0.95); grid-row: span 2; }
.vsteps h3 { margin-top: 10px; font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.1; }
.vsteps p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.rrr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rrr > div { padding: clamp(18px, 1.8vw, 26px); display: flex; flex-direction: column; gap: 12px; }
.rrr dt { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; }
.rrr dd { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.record { padding: clamp(22px, 2.4vw, 34px); }
.record dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 10px; }
.record dl div { padding: 14px 0; border-top: 1px solid var(--line); }
.record dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.record dd { margin-top: 18px; height: 1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 6px); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.duo > div { padding: clamp(18px, 1.8vw, 26px); }
.duo h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; }
.duo p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.duo .pg-link { margin-top: 8px; }
.deep--quiet .deep__caustics { opacity: 0.04; }
.deep--quiet .deep__caustics--b { opacity: 0.025; }

@media (max-width: 1100px) {
  .split__aside, .split__main, .split--even .split__aside, .split--even .split__main { grid-column: 1 / -1; }
  .mchecks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .example { grid-template-columns: 1fr; }
  .story .frame { grid-column: 1 / span 5; }
  .story__copy { grid-column: 6 / -1; }
  .story--flip .frame { grid-column: 8 / -1; }
  .story--flip .story__copy { grid-column: 1 / span 7; }
  .way { grid-template-columns: 56px minmax(0, 1fr) 44px; }
  .way p { grid-column: 2 / 3; }
  .way__go { grid-column: 3; grid-row: 1; }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .exhibit__main { grid-column: 1 / span 8; }
  .exhibit__phone { grid-column: 9 / -1; }
  .notes3 { grid-template-columns: 1fr; }
  .study .well, .study__list { grid-column: 1 / -1; }
  .paths { grid-template-columns: 1fr; max-width: 720px; }
  .rail { display: none; }
  .article__body { grid-column: 1 / -1; max-width: 760px; }
  .permission { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .well__labels { grid-template-columns: 1fr; gap: 0; }
  .well__labels li { padding: 12px 0; }
  .story .frame, .story__copy, .story--flip .frame, .story--flip .story__copy { grid-column: 1 / -1; grid-row: auto; }
  .story .frame { max-width: 420px; }
  .exhibit__main, .exhibit__phone { grid-column: 1 / -1; }
  .exhibit__phone { max-width: 300px; margin-top: 28px; }
  .rrr, .duo, .record dl { grid-template-columns: 1fr; }
  .example__cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mchecks { grid-template-columns: 1fr; }
  .mcheck { min-height: 0; }
  .steps__list { grid-template-columns: 1fr; }
  .way { grid-template-columns: 1fr 44px; padding: 20px 0; }
  .way .num { display: none; }
  .way__title { grid-column: 1; }
  .way p { grid-column: 1 / -1; }
  .way__go { grid-column: 2; }
}

/* ---------- Care hero: marks on the film's waterline ---------- */
.phero--care { --focus-x: 18%; }
.phero__marks { position: absolute; right: 12px; top: 50%; z-index: 2; width: clamp(110px, 12vw, 180px); height: 0; pointer-events: none; }
.phero__marks i { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(244, 239, 228, 0.8); }
.phero__marks i::before { content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); }
.phero__mark {
  position: absolute;
  right: 0;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(244, 239, 228, 0.55);
  background: rgba(6, 28, 24, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ivory);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.phero__mark--up { bottom: 12px; }
.phero__mark--down { top: 12px; }
@media (min-width: 821px) and (min-aspect-ratio: 4 / 3) {
  .phero--care .phero__title { font-size: clamp(44px, 4.6vw, 88px); }
  .phero--care .phero__marks { right: var(--gutter); }
  .phero--care .phero__head { top: 50%; }
  /* the care film's water is bright on the reading side: a deeper shade behind the copy */
  .phero--care .phero__frame::after {
    background:
      linear-gradient(180deg, rgba(10, 32, 26, 0.34) 0, rgba(10, 32, 26, 0) 16%),
      linear-gradient(90deg, rgba(6, 30, 26, 0.78) 0, rgba(6, 30, 26, 0.66) 30%, rgba(6, 30, 26, 0.22) 50%, rgba(6, 30, 26, 0) 62%),
      linear-gradient(180deg, rgba(8, 34, 30, 0) 50%, rgba(10, 44, 38, 0.2) 70%, rgba(15, 52, 46, 0.86) 100%);
  }
}
.lw--last { padding-bottom: calc(var(--section-y) * 1.2); }
@media (max-width: 560px) {
  .phero__marks { right: 8px; width: 78px; }
  .phero__mark { font-size: 9.5px; padding: 4px 8px; letter-spacing: 0.1em; }
  .phero__mark--up { bottom: 8px; }
  .phero__mark--down { top: 8px; }
}

/* ---------- Page plan: three pages, joined by the customer's route ---------- */
.pplan__tag { margin-top: clamp(40px, 4.4vw, 64px); }
.pplan { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.pplan__page { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: clamp(220px, 20vw, 300px); padding: clamp(20px, 2vw, 30px); padding-top: clamp(40px, 3.4vw, 52px); }
.pplan__page::before { content: ""; position: absolute; left: clamp(20px, 2vw, 30px); right: clamp(20px, 2vw, 30px); top: 18px; height: 8px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; }
.pplan__page .num { font-size: 20px; }
.pplan__page h3 { margin-top: auto; font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.4vw, 38px); line-height: 1; }
.pplan__page p { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
.pplan__page:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: clamp(28px, 4vw, 64px);
  height: 9px;
  translate: 0 -50%;
  background:
    radial-gradient(circle at calc(100% - 4.5px) 50%, var(--signal) 0 3.5px, transparent 4px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, transparent 0) 0 50% / 6px 1px repeat-x;
}
@media (max-width: 820px) {
  .pplan { grid-template-columns: 1fr; gap: 26px; }
  .pplan__page { min-height: 0; }
  .pplan__page:not(:last-child)::after { top: 100%; left: 50%; width: 9px; height: 26px; translate: -50% 0;
    background: radial-gradient(circle at 50% calc(100% - 4.5px), var(--signal) 0 3.5px, transparent 4px), linear-gradient(180deg, rgba(255, 255, 255, 0.6) 50%, transparent 0) 50% 0 / 1px 6px repeat-y; }
}

/* ---------- Work: a short surface, then the exhibits ---------- */
.phero--short { padding-bottom: clamp(56px, 6vw, 96px); }
.phero--short .phero__body { margin-top: clamp(24px, 2.6vw, 36px); }
@media (min-width: 1101px) {
  .phero--short .phero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; max-width: 1560px; margin: 0 auto; }
  .phero--short .phero__head { grid-column: 1 / span 8; }
  .phero--short .phero__body { grid-column: 9 / -1; margin: 0; padding-bottom: 0.3em; }
}
.lw--exhibit { padding-top: clamp(32px, 3.4vw, 56px); }
.lw--exhibit .exhibit { margin-top: 0; }
.exhibit__head { margin-top: clamp(72px, 7vw, 120px); }
.exhibit .film-toggle, .demo .film-toggle { right: 12px; bottom: calc(var(--cap-h, 34px) + 12px); }
.exhibit .frame__cap { --cap-h: 0; }
.exhibit__main { --cap-h: 52px; }
.exhibit__phone { --cap-h: 52px; }
.exhibit .cross--bottom { top: calc(100% - var(--cap-h)); }
.exhibit .frame__cap { min-height: 38px; }
.demo { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: start; }
.demo__frame { grid-column: 1 / span 7; --cap-h: 52px; }
.demo__frame .frame__media { aspect-ratio: 16 / 10; }
.demo__frame .cross--bottom { top: calc(100% - var(--cap-h)); }
.demo__copy { grid-column: 9 / -1; }
.exhibit__main .frame__media { aspect-ratio: 16 / 10; }
@media (max-width: 1100px) {
  .demo__frame, .demo__copy { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .exhibit .cross--bottom, .demo .cross--bottom { display: none; }
}

/* ---------- Guides and articles: small parts ---------- */
.lw--paths { padding-top: clamp(40px, 4vw, 64px); }
.lw--paths .paths { margin-top: 0; }
.mismatch { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mismatch > div { padding: 18px 22px; }
.mismatch__v { margin-top: 12px; }
.mismatch__bad { border-style: dashed; border-color: rgba(255, 255, 255, 0.4); }
.inset { margin-top: 18px; }
.inset .prose p { max-width: 64ch; }
.asec .callout + .prose { margin-top: 18px; }
@media (max-width: 560px) {
  .mismatch { grid-template-columns: 1fr; }
}

/* art-slots:start (tools/make_growth_art.py) */
.art .s0 { --i: 0; }
.art .s1 { --i: 0.1; }
.art .s2 { --i: 0.2; }
.art .s3 { --i: 0.3; }
.art .s4 { --i: 0.4; }
.art .s5 { --i: 0.5; }
.art .s6 { --i: 0.6; }
.art .s8 { --i: 0.8; }
.art .s9 { --i: 0.9; }
.art .s10 { --i: 1; }
.art .s11 { --i: 1.1; }
.art .s12 { --i: 1.2; }
.art .s13 { --i: 1.3; }
.art .s14 { --i: 1.4; }
.art .s15 { --i: 1.5; }
.art .s16 { --i: 1.6; }
.art .s17 { --i: 1.7; }
.art .s18 { --i: 1.8; }
.art .s19 { --i: 1.9; }
.art .s20 { --i: 2; }
.art .s22 { --i: 2.2; }
.art .s23 { --i: 2.3; }
.art .s24 { --i: 2.4; }
.art .s26 { --i: 2.6; }
.art .s27 { --i: 2.7; }
.art .s28 { --i: 2.8; }
.art .s29 { --i: 2.9; }
.art .s30 { --i: 3; }
.art .s31 { --i: 3.1; }
.art .s32 { --i: 3.2; }
.art .s34 { --i: 3.4; }
.art .s36 { --i: 3.6; }
.art .s37 { --i: 3.7; }
.art .s38 { --i: 3.8; }
.art .s39 { --i: 3.9; }
.art .s40 { --i: 4; }
.art .s43 { --i: 4.3; }
.art .s46 { --i: 4.6; }
/* art-slots:end */

/* ---------- If pages.js never runs ----------
   The head's inline script marks every page .js before pages.js arrives, so a failed download would leave the
   reveals and drawings hidden, the bar clear over the page and the film and motion buttons dead. pages.js marks the
   page .pg-ready at once; without it, after 2.5 s everything shows as it would without JS. */
@keyframes pg-failsafe-show { to { opacity: 1; transform: none; stroke-dashoffset: 0; } }
@keyframes pg-failsafe-hide { to { opacity: 0; transform: scale(0); } }
@keyframes pg-failsafe-bar { to { background-color: rgba(12, 34, 30, 0.94); } }
.js:not(.pg-ready) [data-reveal]:not(.is-in),
.js:not(.pg-ready) [data-reveal-group]:not(.is-in) > *,
.js:not(.pg-ready) [data-art] .art .ln,
.js:not(.pg-ready) [data-art] .art .dt,
.js:not(.pg-ready) [data-art] .art .pl,
.js:not(.pg-ready) [data-art] .art .nd { animation: pg-failsafe-show 0.01s linear 2.5s forwards; }
.js:not(.pg-ready) .film-toggle,
.js:not(.pg-ready) .pnav__motion,
.js:not(.pg-ready) .psheet__motion { animation: pg-failsafe-hide 0.01s linear 2.5s forwards; }
.js:not(.pg-ready) .pnav { animation: pg-failsafe-bar 0.01s linear 2.5s forwards; }