@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --enamel-deep: #081629;
  --enamel: #0b1d38;
  --enamel-mid: #12305a;
  --enamel-glow: #1d4680;
  --steel: #b9bec4;
  --steel-bright: #e3e6ea;
  --steel-text: #9eabbd;
  --salmon: #e7a98c;
  --salmon-deep: #c98a6e;
  --lume: #eef0f2;
  --ink: #0b1d38;
  --ink-soft: #3b4a5f;

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --gutter: clamp(16px, 4.5vw, 72px);
  --max: 1320px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dial: min(40vw, 76vh, 620px);
  --head-h: 64px; /* the homepage header once compact; the phone's method bar sits just below it */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-color: var(--enamel-glow) var(--enamel-deep); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--enamel);
  color: var(--lume);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
  font-weight: 350;
  line-height: 1.6;
  caret-color: var(--salmon);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--salmon); color: var(--enamel); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--enamel-deep); }
::-webkit-scrollbar-thumb { background: var(--enamel-glow); border-radius: 10px; border: 2px solid var(--enamel-deep); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: var(--lume); }
:focus-visible { outline: 2px solid var(--salmon); outline-offset: 4px; border-radius: 4px; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 em, h2 em { font-style: italic; }
h1 em { color: var(--salmon); }
p, li, dd { margin: 0; text-wrap: pretty; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--salmon); color: var(--enamel); padding: 10px 16px; z-index: 10; }
.skip:focus { left: 16px; top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Small caps label voice (dial lettering) */
.caps { font-family: var(--sans); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; font-weight: 450; }
.ref { display: inline-block; margin-top: .9rem; font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-text); }

/* ---------- Header ---------- */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-header { position: relative; z-index: 5; }
/* On the homepage the header stays: transparent at the top, a compact enamel bar once the page moves. */
.site-header[data-sticky] { position: sticky; top: 0; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.site-header[data-sticky] .wrap { height: var(--head-tall, 92px); padding-block: 0; transition: height .4s var(--ease); }
.site-header.is-scrolled { background: color-mix(in srgb, var(--enamel) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(185, 190, 196, .16), 0 12px 28px -18px rgba(0, 0, 0, .7); }
.site-header.is-scrolled .wrap { height: var(--head-h); }
.site-header.is-scrolled .wordmark span { display: none; }
html:has(.site-header[data-sticky]) { scroll-padding-top: calc(var(--head-h) + 8px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 26px; }
.wordmark { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.wordmark b { font-family: var(--sans); font-weight: 500; letter-spacing: .3em; font-size: .82rem; text-transform: uppercase; }
.wordmark span { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--steel-text); letter-spacing: .01em; margin-top: 4px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a { text-decoration: none; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--steel); transition: color .3s var(--ease); }
.nav a:hover { color: var(--lume); }
.nav a.btn--primary, .nav a.btn--primary:hover { color: var(--enamel); }
.nav .lang { display: flex; gap: 6px; color: var(--steel-text); font-size: .78rem; letter-spacing: .18em; }
.nav .lang a[aria-current="true"] { color: var(--lume); }
.nav .lang span { opacity: .5; }
.nav a[aria-current="page"] { color: var(--lume); }

/* Phone and tablet menu: a native disclosure, no script needed to open it */
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6em; padding: .6em 0; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--steel); transition: color .3s var(--ease); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .4s var(--ease); }
.menu[open] summary, .menu summary:hover { color: var(--lume); }
.menu[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.menu__panel { position: absolute; right: 0; top: calc(100% + 12px); z-index: 6; min-width: 220px; display: flex; flex-direction: column; padding: 8px 22px 18px; border-radius: 4px; background: var(--enamel-deep);
  box-shadow: 0 0 0 1px rgba(185, 190, 196, .2), 0 24px 48px -20px rgba(0, 0, 0, .8); }
.menu__panel > a { padding: .95em 0; border-bottom: 1px solid rgba(185, 190, 196, .14); }
.menu__panel .lang { padding-top: 1em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--sans); font-weight: 500; font-size: .86rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px; padding: 1.05em 1.8em;
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn--primary { background: var(--salmon); color: var(--enamel); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .7); }
.btn--primary:hover { background: #f0bba1; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .75); transform: translateY(-1px); }
.btn--line { color: var(--lume); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--steel) 55%, transparent); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--lume); }
.btn--small { padding: .8em 1.3em; font-size: .74rem; }

/* ---------- Dial stage: hero + job/work + five questions share one sticky dial ---------- */
.stage { position: relative; overflow-x: clip; } /* the dial's glow reaches past the viewport edge on phones */
.stage .wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--dial); gap: clamp(32px, 5vw, 96px); }
.stage__copy { min-width: 0; }
.stage__dial { position: relative; }
.stage__dial-inner { position: sticky; top: calc(50vh - var(--dial) / 2); height: var(--dial); }
.stage__dial-inner::before {
  content: ""; position: absolute; inset: -32%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 70, 128, .9) 0%, rgba(29, 70, 128, .35) 42%, transparent 68%);
}

.hero { min-height: calc(100svh - 110px); display: flex; flex-direction: column; justify-content: center; padding-block: 4vh 12vh; }
.hero h1 { font-size: clamp(3rem, 6.2vw, 6rem); }
.hero__lede { margin-top: 1.8rem; max-width: 34ch; font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); color: var(--steel-bright); font-weight: 300; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.4rem; }
.hero__meta { margin-top: 2rem; color: var(--steel-text); }

/* ---------- Dial ---------- */
.dial { position: relative; width: 100%; height: 100%; border-radius: 50%; padding: 3.4%;
  background: conic-gradient(from 200deg, #6f7781, #eef1f4 12%, #8a929b 28%, #d7dbe0 45%, #737b85 60%, #f2f4f6 76%, #8e969f 90%, #6f7781);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.dial__face { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .028) 0deg, rgba(0, 0, 0, .05) 1.5deg, rgba(255, 255, 255, .028) 3deg),
    radial-gradient(circle at 50% 50%, #2a5ea6 0%, #1a4887 34%, #102e59 66%, #081a33 100%);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .35), inset 0 18px 40px rgba(0, 0, 0, .45);
}
.dial__face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from calc(300deg + var(--light, 0deg)), transparent 0deg, rgba(150, 190, 245, .2) 28deg, transparent 56deg, transparent 180deg, rgba(150, 190, 245, .2) 208deg, transparent 236deg); }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial .track { stroke: var(--steel); fill: none; opacity: .45; }
.dial .tick { stroke: var(--steel); stroke-width: 1.4; opacity: .55; }
.dial .tick--five { stroke-width: 3; opacity: .85; }
.dial .index rect.baton { fill: url(#steel); }
.dial .index rect.lume { fill: var(--steel-bright); opacity: .35; transition: fill .8s var(--ease), opacity .8s var(--ease); }
.dial .index .num { font-family: var(--serif); font-size: 34px; fill: var(--lume); opacity: .72; transition: fill .8s var(--ease), opacity .8s var(--ease); }
.dial .index .lbl { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .24em; fill: var(--lume); opacity: .92; transition: fill .8s var(--ease), opacity .8s var(--ease); }
.dial .index.is-active rect.lume { fill: var(--salmon); opacity: 1; }
.dial .index.is-active .num { fill: var(--salmon); opacity: 1; }
.dial .index.is-active .lbl { fill: var(--lume); opacity: 1; }
.dial .sig { font-family: var(--serif); font-size: 30px; fill: var(--lume); letter-spacing: .04em; }
.dial .sub { font-family: var(--sans); font-size: 10.5px; letter-spacing: .38em; fill: var(--steel); }
.dial-hand, .dial-seconds { transform-box: view-box; transform-origin: 300px 300px; }
.dial-hand { transform: rotate(var(--turn, 0deg)); transition: transform 1.8s var(--ease); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); }
.dial-seconds { animation: sweep 60s linear infinite; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .4)); }
@keyframes sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dial-seconds { animation: none; transform: rotate(150deg); }
  .dial-hand, .dial .index *, .close__dial .index .lume { transition: none; }
}

/* ---------- Job vs work ---------- */
.ledger { padding-block: clamp(56px, 7vh, 88px); }
.ledger h2 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); max-width: 14ch; }
.ledger__table { width: 100%; margin-top: 2.6rem; border-collapse: collapse; font-variant-numeric: lining-nums; }
.ledger__table th, .ledger__table td { text-align: left; padding: 1.05rem 1rem 1.05rem 0; border-top: 1px solid rgba(185, 190, 196, .22); vertical-align: top; }
.ledger__table thead th, .ledger__table thead td { border-top: 0; padding-bottom: .6rem; }
.ledger__table thead th.col-work { color: var(--lume); }
.ledger__table tbody th { font-weight: 400; color: var(--steel-text); width: 34%; font-size: .95rem; }
.ledger__table td { font-family: var(--serif); font-size: clamp(1.1rem, .5vw + 1rem, 1.35rem); }
.ledger__table td.work { color: var(--lume); }
.ledger__table td.job { color: var(--steel); }
.ledger .plus { font-family: var(--sans); font-weight: 400; color: var(--steel-bright); } /* Bodoni's plus is a hairline */
.verdict { margin-top: clamp(40px, 6vh, 64px); padding-top: 2.4rem; border-top: 1px solid rgba(185, 190, 196, .35); }
.verdict p.big { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.15; max-width: 22ch; }
.verdict p.big em { color: var(--lume); }
.toll { margin-top: clamp(28px, 4vh, 44px); padding-top: 1.4rem; border-top: 1px solid rgba(185, 190, 196, .22); max-width: 46rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem clamp(20px, 3vw, 40px); align-items: baseline; }
.toll b { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 4vw, 3.8rem); line-height: 1; color: var(--lume); font-variant-numeric: lining-nums; white-space: nowrap; }
.toll span { color: var(--steel-bright); max-width: 34ch; }
.toll cite { display: block; margin-top: .45rem; font-style: normal; font-size: .72rem; letter-spacing: .01em; color: var(--steel-text); }

/* ---------- Five questions ---------- */
.method { padding-block: clamp(32px, 4vh, 56px) clamp(48px, 7vh, 80px); }
.method__intro h2 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); max-width: 15ch; }
.method__intro p { margin-top: 1.4rem; color: var(--steel-bright); max-width: 40ch; }
.method__intro { margin-bottom: clamp(28px, 4vh, 48px); }
.q { padding-block: clamp(18px, 2.6vh, 28px); border-top: 1px solid rgba(185, 190, 196, .18); }
.q h3 { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.q__num { display: inline-block; min-width: 1.9em; font-size: .42em; vertical-align: .62em; color: var(--steel); letter-spacing: .04em; }
.q p { margin-top: .8rem; max-width: 46ch; color: var(--steel-bright); }
.q { opacity: .68; transition: opacity .9s var(--ease); }
.q.is-active, .no-js .q { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .q { opacity: 1; } }

.method__check { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding-top: 2rem; border-top: 1px solid rgba(185, 190, 196, .22); }
.method__check p { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.2; }

.method__bar { display: none; }
.mini-dial { width: 52px; height: 52px; border-radius: 50%; padding: 3px; flex: none;
  background: conic-gradient(from 200deg, #6f7781, #eef1f4 15%, #8a929b 35%, #d7dbe0 55%, #737b85 75%, #eef1f4 90%, #6f7781); }
.mini-dial svg { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #2a5ea6, #102e59 70%, #081a33); }
.mini-dial .baton { fill: #c3c8ce; }
.mini-dial .lume { fill: #eef0f2; opacity: .4; }
.mini-dial .index.is-active .lume { fill: var(--salmon); opacity: 1; }
.mini-dial .dial-hand { transform-box: view-box; transform-origin: 300px 300px; transform: rotate(var(--turn, 0deg)); transition: transform 1.4s var(--ease); }
.method__bar-label { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lume); }

/* ---------- Section frame ---------- */
.section { padding-block: clamp(56px, 8vh, 96px); position: relative; }
.section__head h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); max-width: 16ch; }
.section__head p { margin-top: 1.4rem; max-width: 52ch; color: var(--steel-bright); }
.minute-rule { height: 14px; margin-bottom: clamp(48px, 7vh, 80px);
  background:
    repeating-linear-gradient(90deg, rgba(185, 190, 196, .7) 0 2px, transparent 2px 60px) bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, rgba(185, 190, 196, .35) 0 1px, transparent 1px 12px) bottom / 100% 7px no-repeat;
  border-bottom: 1px solid rgba(185, 190, 196, .35);
}

/* Three paths: complications */
/* Patagonia stands beside the heading as the whole portrait frame (clouds, Fitz Roy, the trail), its top
   rising into the empty right side above the section so the mountains show without adding height. */
.paths__head { position: relative; display: flex; align-items: center; min-height: clamp(260px, 30vh, 340px); }
.paths__head .section__head { position: relative; z-index: 1; max-width: 34rem; }
.paths__photo { position: absolute; z-index: 0; right: 0; bottom: -2rem; width: min(44%, 540px); aspect-ratio: 3 / 4; margin: 0; pointer-events: none;
  -webkit-mask: linear-gradient(to right, transparent, #000 26%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent);
  -webkit-mask-composite: source-in; mask: linear-gradient(to right, transparent, #000 26%, #000 84%, transparent) intersect, linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent); }
.paths__photo img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.75); }
/* the minute track fades out before it reaches the mountains */
.paths .minute-rule { -webkit-mask: linear-gradient(to right, #000 48%, transparent 60%); mask: linear-gradient(to right, #000 48%, transparent 60%); }
.paths__grid { margin-top: clamp(56px, 8vh, 96px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.path { text-align: center; }
.subdial { width: min(170px, 60%); aspect-ratio: 1; margin: 0 auto 1.6rem; border-radius: 50%; position: relative; padding: 6px;
  background: conic-gradient(from 200deg, #6f7781, #eef1f4 15%, #8a929b 35%, #d7dbe0 55%, #737b85 75%, #eef1f4 90%, #6f7781);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); }
.subdial__face { width: 100%; height: 100%; border-radius: 50%; position: relative; overflow: hidden;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px), radial-gradient(circle at 50% 40%, #173f78, #0a1c38 75%);
  box-shadow: inset 0 8px 20px rgba(0, 0, 0, .55); }
.subdial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.subdial .ring { fill: none; stroke: var(--steel); opacity: .5; }
.subdial .tk { stroke: var(--steel); stroke-width: 2; opacity: .7; }
.subdial .lbl { font-family: var(--sans); font-size: 11px; letter-spacing: .3em; fill: var(--steel-bright); }
.subdial .hand { fill: var(--salmon); transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--to, 40deg)); transition: transform 1.4s var(--ease); }
.path:hover .subdial .hand { transform: rotate(calc(var(--to, 40deg) + 30deg)); }
.path h3 { font-size: clamp(2rem, 3vw, 2.6rem); }
.path p { margin: .9rem auto 0; max-width: 32ch; color: var(--steel-bright); }
.path p.path__label { margin-top: 2rem; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--steel-text); }
.path__eg { list-style: none; margin: .9rem auto 0; padding: 0; max-width: 32ch; border-top: 1px solid rgba(185, 190, 196, .22); }
.path__eg li { padding: .85rem 0; border-bottom: 1px solid rgba(185, 190, 196, .22); color: var(--steel-text); font-size: 1rem; font-weight: 400; line-height: 1.45; }


/* Offers: brushed steel case */
.offers { background:
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .03) 3px 4px, transparent 4px 7px, rgba(255, 255, 255, .12) 7px 8px, transparent 8px 13px),
  linear-gradient(100deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .25) 60%, rgba(0, 0, 0, .04)),
  linear-gradient(180deg, #e2e6ea, #c6cbd1);
  color: var(--ink); color-scheme: light; }
.offers ::selection { background: var(--enamel); color: var(--lume); }
.offers .section__head p { color: var(--ink-soft); }
.offers .minute-rule { filter: brightness(.35); }
.offer-list { margin-top: clamp(36px, 5vh, 56px); border-top: 1px solid rgba(11, 29, 56, .25); }
.offer { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) minmax(0, .8fr) 12rem; gap: clamp(16px, 3vw, 48px); align-items: center; padding: 1.6rem 0; border-bottom: 1px solid rgba(11, 29, 56, .25); }
.offer h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.offer .when { display: block; margin-top: .45rem; color: var(--ink-soft); letter-spacing: .14em; }
.offer p { color: var(--ink-soft); max-width: 46ch; }
.offer .price { font-family: var(--serif); font-size: clamp(1.3rem, 1.6vw, 1.6rem); font-variant-numeric: lining-nums tabular-nums; }
.offer .price small { display: block; font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: .25rem; }
.offers .btn--primary { background: var(--enamel); color: var(--lume); box-shadow: 0 10px 26px -14px rgba(11, 29, 56, .7); }
.offers .btn--primary:hover { background: var(--enamel-mid); }
.offers .btn--line { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11, 29, 56, .5); }
.offers .btn--line:hover { color: var(--enamel); box-shadow: inset 0 0 0 1px var(--enamel); }
.offers :focus-visible { outline-color: var(--enamel); }
.offer .btn { justify-self: end; }
.offer__note { justify-self: end; max-width: 12rem; text-align: right; font-size: .92rem; line-height: 1.4; color: var(--ink-soft); }
.founding { margin-top: 2.4rem; display: flex; gap: 1.2rem; align-items: baseline; max-width: 70ch; color: var(--ink-soft); }
.founding b { color: var(--ink); font-weight: 500; white-space: nowrap; }

/* The movement (about) */
.movement { background:
  repeating-radial-gradient(circle at -30% 160%, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, .012) 14px, rgba(255, 255, 255, .055) 30px, rgba(255, 255, 255, .012) 38px, rgba(0, 0, 0, .06) 44px, rgba(255, 255, 255, 0) 46px),
  radial-gradient(70vw 60vw at 80% 30%, rgba(29, 70, 128, .35), transparent 65%),
  var(--enamel-deep); }
.intro { display: grid; grid-template-columns: clamp(6.5rem, 12vw, 10rem) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: clamp(36px, 5vh, 56px); }
.intro__photo { margin: 0; }
.intro__photo img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(185, 190, 196, .25), 0 30px 60px -30px rgba(0, 0, 0, .85); }
.intro__text .caps { color: var(--steel-text); }
.intro__line { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.18; max-width: 26ch; color: var(--lume); }
.intro__sub { margin-top: .7rem; max-width: 40ch; color: var(--steel-bright); }
.movement__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.movement__story h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); max-width: 12ch; margin-bottom: 1rem; }
.movement__story p { margin-top: 1.3rem; color: var(--steel-bright); max-width: 48ch; }
.movement__story p.big { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.15; color: var(--lume); }
.movement__story p.big em { color: var(--lume); }
.movement__actions { margin-top: 2.2rem; }
.movement__story .intro { grid-template-columns: clamp(4.5rem, 7vw, 6rem) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: 2rem; }
.movement__story .intro__line { margin-top: 0; font-size: clamp(1.2rem, 1.7vw, 1.55rem); max-width: 24ch; color: var(--lume); }
/* A cutout: the JPEG is masked to the figure, the shadow sits on the figure so the mask keeps it. */
.portrait { margin: 0 0 clamp(40px, 6vh, 64px); filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .55)); }
.portrait img { display: block; width: min(100%, 23rem); height: auto; margin-inline: auto;
  -webkit-mask: url(/assets/img/portrait-mask.png) center / 100% 100% no-repeat; mask: url(/assets/img/portrait-mask.png) center / 100% 100% no-repeat; }
/* The five questions, lived: one column per dial index, each headed by a blued screw on a hairline. */
.lived { margin-top: clamp(48px, 6vh, 72px); }
.calibre__head { margin: 0 0 1.4rem; color: var(--steel-text); }
.calibre { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 40px); }
.calibre div { position: relative; display: grid; align-content: start; gap: .7rem; padding: 1.7rem 0 0; border-top: 1px solid rgba(185, 190, 196, .3); }
.calibre dt { color: var(--steel-text); font-variant-numeric: tabular-nums lining-nums; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; padding-top: .3em; }
.calibre dd { margin: 0; }
.calibre div::before { content: ""; position: absolute; top: -8px; left: 0; width: 15px; height: 15px; border-radius: 50%;
  background:
    linear-gradient(35deg, transparent 44%, rgba(6, 16, 32, .9) 44%, rgba(6, 16, 32, .9) 56%, transparent 56%),
    radial-gradient(circle at 40% 35%, #4a7fd0 0%, #1d4680 55%, #0b1d38 100%);
  box-shadow: 0 0 0 2px #c3c8ce, 0 0 0 3px #6f7781, 0 2px 4px 3px rgba(0, 0, 0, .35); }
.calibre dd b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; display: block; }
.calibre dd span { color: var(--steel-text); font-size: 1rem; font-weight: 400; }
/* The calling is the thread through the timeline, so the word is set like the headline italics. */
.calibre dd em { font-family: var(--serif); font-style: italic; font-size: 1.1em; color: var(--lume); }
.calibre__foot { margin-top: 1.6rem; color: var(--steel-text); }
.story__photos { margin-top: clamp(40px, 6vh, 64px); max-width: 30rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.story__photos figure { margin: 0; }
.story__photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.85); box-shadow: 0 0 0 1px rgba(185, 190, 196, .25), 0 24px 48px -24px rgba(0, 0, 0, .8); }

/* FAQ, then the personal sign-off that leads into the close */
.faq { padding-bottom: clamp(40px, 6vh, 72px); }
/* The Bible photo stands beside the questions, at its own 4:5 proportions. */
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(15rem, 24vw, 21rem); gap: clamp(32px, 5vw, 80px); align-items: end; }
.faq__photo { margin: 0; }
.faq__photo img { display: block; width: 100%; height: auto; filter: saturate(.85); box-shadow: 0 0 0 1px rgba(185, 190, 196, .25), 0 24px 48px -24px rgba(0, 0, 0, .8); }
.faq__list { margin-top: clamp(40px, 6vh, 64px); border-top: 1px solid rgba(185, 190, 196, .25); max-width: 60rem; }
.faq details { border-bottom: 1px solid rgba(185, 190, 196, .25); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 1.5rem 0; font-family: var(--serif); font-size: clamp(1.3rem, 1.8vw, 1.65rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 1.5px solid var(--steel); border-bottom: 1.5px solid var(--steel); transform: rotate(45deg) translateY(-4px); transition: transform .5s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq summary:hover { color: var(--steel-bright); }
.faq details p { padding: 0 0 1.6rem; max-width: 62ch; color: var(--steel-bright); }

/* Close */
.close { text-align: center; padding-block: clamp(64px, 9vh, 110px); background: var(--enamel); }
.close__dial { width: 92px; height: 92px; margin: 0 auto; }
.close__dial .dial-hand { --turn: 288deg; transition-duration: 2.4s; }
.close__dial.is-time .dial-hand { --turn: 360deg; }
.close__dial .index .lume { transition: fill .6s var(--ease) 1.8s, opacity .6s var(--ease) 1.8s; }
.close__dial.is-time .index .lume { fill: var(--salmon); opacity: 1; }
.close__dial + h2 { margin-top: 1.8rem; }
.close h2 { font-size: clamp(2.6rem, 5.6vw, 5.2rem); max-width: 16ch; margin-inline: auto; }
.close p { margin: 1.6rem auto 0; max-width: 46ch; color: var(--steel-bright); }
.close__actions { margin-top: 2.6rem; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.close .close__meta { margin-top: 2rem; max-width: none; color: var(--steel-text); }

.site-footer { background: var(--enamel-deep); color: var(--steel-text); font-size: .9rem; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 32px; }
.site-footer a { color: var(--steel); }

/* Imprint and privacy */
.legal { padding-block: clamp(48px, 9vh, 110px) clamp(96px, 14vh, 170px); }
.legal h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.legal h2 { font-size: clamp(1.45rem, 2vw, 1.9rem); margin-top: 2.8rem; }
.legal p, .legal address { margin-top: 1rem; max-width: 64ch; color: var(--steel-bright); font-style: normal; }
.legal .legal__lede { margin-top: 1.8rem; font-family: var(--serif); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.3; color: var(--lume); max-width: 40ch; }
.legal a { color: var(--lume); }
.legal .legal__meta { margin-top: 3.4rem; color: var(--steel-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nav .nav__link, .nav > .lang { display: none; }
  .menu { display: block; }
}
@media (max-width: 900px) {
  :root { --dial: min(54vw, 300px); } /* small enough that the headline shows on the first phone screen */
  .stage .wrap { grid-template-columns: minmax(0, 1fr); }
  .stage__dial { order: -1; margin-top: 8px; }
  .stage__dial-inner { position: relative; top: 0; margin-inline: auto; width: var(--dial); }
  .hero { min-height: 0; padding-block: 44px 48px; }
  .q { padding-block: 20px; opacity: 1; }
  .method { padding-bottom: 40px; }
  .method__bar { display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 4; margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter);
    background: var(--enamel); box-shadow: 0 1px 0 rgba(185, 190, 196, .18), 0 10px 24px -14px rgba(0, 0, 0, .6); }
  .site-header[data-sticky] ~ main .method__bar { top: var(--head-h); }
  .paths__grid, .movement__grid, .calibre { grid-template-columns: minmax(0, 1fr); }
  .calibre { gap: 0; }
  .lived { margin-top: 48px; }
  /* Phones: question and headline share a line, the sentence follows. */
  .calibre div { display: block; padding: 1.2rem 0 1rem; }
  .calibre dt { display: inline; margin-right: .7em; }
  .calibre dd, .calibre dd b { display: inline; }
  .calibre dd span { display: block; margin-top: .4rem; }
  .story__photos img { aspect-ratio: 1 / 1; }
  /* Phones: Patagonia shows as the whole frame (clouds, Fitz Roy and the trail) under the heading; the Bible photo follows the FAQ. */
  .paths__head { display: block; min-height: 0; }
  .paths__photo { position: static; width: min(100%, 17rem); margin-top: 24px; }
  .paths .minute-rule { -webkit-mask: none; mask: none; }
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .faq__photo { width: min(100%, 14rem); }
  .portrait img { width: min(100%, 11.5rem); }
  .paths__grid { gap: 40px; }
  /* Phones: a small subdial beside the path name, the text left-aligned below. */
  .path { text-align: left; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .path .subdial { width: 76px; margin: 0; padding: 4px; }
  .path .subdial .lbl { display: none; }
  .path > p, .path__eg { grid-column: 1 / -1; max-width: none; margin-inline: 0; }
  .path > p:first-of-type { margin-top: 1.2rem; }
  .path p.path__label { display: none; }
  .path__eg { margin-top: 1.1rem; }
  /* Phones: the price sits beside the title, the description and button run full width below. */
  .offer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title price" "desc desc" "btn btn"; gap: .6rem 16px; padding: 1.3rem 0; align-items: start; }
  .offer > div:first-child { grid-area: title; }
  .offer > p { grid-area: desc; }
  .offer .price { grid-area: price; text-align: right; max-width: 9.5rem; }
  .offer .btn, .offer__note { grid-area: btn; justify-self: start; margin-top: .3rem; text-align: left; max-width: none; }
  .founding { flex-direction: column; gap: .3rem; }
}
@media (max-width: 560px) {
  .dial .lbl, .dial .sub { display: none; }
  .close__meta .sep:nth-last-child(2) { display: none; }
  .close__meta span:last-child { display: block; margin-top: .5em; }
  .site-header .wrap { padding-block: 18px; }
  .site-header[data-sticky] { --head-tall: 74px; }
  .wordmark span { display: none; }
  .wordmark b { letter-spacing: .2em; font-size: .72rem; }
  .nav { gap: 12px; }
  .nav .btn--small { padding: .8em 1.05em; letter-spacing: .06em; font-size: .72rem; white-space: nowrap; }
  .ledger__table tbody th { width: 30%; }
  .toll { grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { width: 100%; justify-content: center; }
  /* both hero buttons fit on the first screen of a 375×812 phone */
  :root { --dial: min(44vw, 300px); }
  .hero { padding-top: 22px; }
  .hero__lede { margin-top: 1.2rem; }
  .hero__actions { margin-top: 1.7rem; gap: 10px; }
}