/* Dvir Levy — the marked trail. Makhtesh Ramon at dusk, Israel National Trail blazes. */

@font-face {
  font-family: "Secular One";
  src: url("assets/fonts/secular-one-hebrew.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Secular One";
  src: url("assets/fonts/secular-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Assistant";
  src: url("assets/fonts/assistant-var-hebrew.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant";
  src: url("assets/fonts/assistant-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* the trail's inks */
  --dusk: #1e2140;
  --dusk-deep: #161931;
  --blaze: #f4f1ea;
  --blaze-soft: rgb(244 241 234 / 0.82);
  --orange: #f07a1a;
  --orange-deep: #c95f0c;
  --blue: #2c6fd1;
  --night: #121212;
  --screen-blank: #dadada;

  /* one comp pixel: the approved comp is 1024 wide */
  --u: min(100vw / 1024, 1px);
  --gutter: calc(56 * var(--u));

  --display: "Secular One", "Assistant", system-ui, sans-serif;
  --text: "Assistant", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --focus: var(--orange);

  color-scheme: dark;
}

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

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--orange) var(--night);
}

body {
  margin: 0;
  background: transparent;
  color: var(--blaze);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--orange); color: var(--night); }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.keep { white-space: nowrap; }
@media (max-width: 480px) {
  .pain__title .keep, .mark__title .keep { white-space: normal; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.75rem 1.25rem;
  background: var(--orange);
  color: var(--night);
  font-family: var(--display);
  text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ───────── the sky: one land behind the whole page ───────── */

.sky {
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: 100lvh;
  overflow: hidden;
  background: var(--dusk-deep);
}
.sky__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.sky__drift {
  position: absolute;
  inset: 0 0 -6%;
  will-change: transform;
}
.sky__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% top;
}
.sky__layer--dusk { opacity: 1; }
.sky__layer--dusk img { transform-origin: 60% 30%; }
.sky__wash {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.sky__wash--night { background: rgb(8 10 28 / 0.38); }
.sky__wash--dawn { background: rgb(38 22 46 / 0.62); }
.sky__wash--rock { background: rgb(18 12 9 / 0.58); }
.sky__wash--evening { background: rgb(20 23 50 / 0.74); }
.sky__wash--sunset { background: rgb(42 18 12 / 0.6); }
.sky__scrim {
  /* dusk settles first at the top of the sky, where the name and the headline sit */
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(16 22 54 / 0.55), rgb(16 22 54 / 0) 22%);
}

/* the light of each stretch of the walk */
[data-light-now="night"] .sky__layer--night,
[data-light-now="rock"] .sky__layer--rock { opacity: 1; }
[data-light-now="night"] .sky__wash--night,
[data-light-now="dawn"] .sky__wash--dawn,
[data-light-now="rock"] .sky__wash--rock,
[data-light-now="evening"] .sky__wash--evening,
[data-light-now="sunset"] .sky__wash--sunset { opacity: 1; }

/* ───────── masthead ───────── */

.top {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: max(3.25rem, calc(100 * var(--u)));
  padding-inline: var(--gutter);
  color: var(--blaze);
}

.top__name {
  font-weight: 700;
  font-size: max(1.0625rem, calc(35 * var(--u)));
  line-height: 1;
}

.top__wa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline-end: calc(4 * var(--u));
  margin-block-start: calc(-5 * var(--u));
  font-weight: 600;
  font-size: max(1rem, calc(29.5 * var(--u)));
  line-height: 1;
  text-underline-offset: 0.16em;
  text-decoration-thickness: max(2px, calc(3 * var(--u)));
}
@media (hover: hover) { .top__wa:hover { color: var(--orange); } }

/* ───────── hero: the trailhead ───────── */

.hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  /* the near ledge may reach past the page edge; it never makes the page scroll sideways */
  overflow-x: clip;
  min-height: calc(100svh - 184 * var(--u));
  display: flex;
  flex-direction: column;
}


.hero__trail {
  position: absolute;
  display: block;
  z-index: -1;
  left: 40%;
  top: calc(307 * var(--u));
  width: 50%;
  height: calc(100% - 307 * var(--u) + 184 * var(--u));
  pointer-events: none;
  --end-x: 31.6%; --end-y: 84%;
  /* the path dips out of sight behind the subline and the client names, like the comp; JS measures the gaps */
  --gap1a: calc(150 * var(--u)); --gap1b: calc(330 * var(--u));
  --gap2a: calc(890 * var(--u)); --gap2b: calc(950 * var(--u));
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--gap1a), transparent calc(var(--gap1a) + 14px), transparent calc(var(--gap1b) - 14px), #000 var(--gap1b), #000 var(--gap2a), transparent calc(var(--gap2a) + 10px), transparent calc(var(--gap2b) - 10px), #000 var(--gap2b));
  mask-image: linear-gradient(to bottom, #000 var(--gap1a), transparent calc(var(--gap1a) + 14px), transparent calc(var(--gap1b) - 14px), #000 var(--gap1b), #000 var(--gap2a), transparent calc(var(--gap2a) + 10px), transparent calc(var(--gap2b) - 10px), #000 var(--gap2b));
}
.hero__ledge { display: none; }
.hero__trail picture { display: block; width: 100%; height: 100%; }
.hero__trail picture img {
  width: 100%;
  height: 100%;
  clip-path: inset(0 0 calc(100% - var(--walk, 100%)) 0);
  /* a thin dark edge so the painted path reads as a path over the painted land */
  filter: drop-shadow(0 0 1.5px rgb(20 10 6 / 0.85)) drop-shadow(0 2px 4px rgb(20 10 6 / 0.45));
}
/* small blazes painted along the path: it is a marked trail, not just land */
.trail-mark {
  position: absolute;
  width: var(--mark-w, 13%);
  height: auto;
  translate: -50% -50%;
  filter: drop-shadow(0 1px 2px rgb(20 10 6 / 0.6));
}
.trail-mark--1 { left: var(--m1x, 35.4%); top: var(--m1y, 9.5%); }
.trail-mark--2 { left: var(--m2x, 59%); top: var(--m2y, 45%); }

.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(152 * var(--u)) var(--gutter) calc(104 * var(--u));
}

.hero__title {
  max-width: calc(720 * var(--u));
  font-family: var(--display);
  font-weight: 400;
  font-size: max(2.25rem, calc(101 * var(--u)));
  line-height: 0.92;
  letter-spacing: 0;
  /* Secular One has one weight; the trail-sign lettering in the comp is a step heavier */
  -webkit-text-stroke: 0.028em currentColor;
  paint-order: stroke fill;
}
.hero__title .line { display: block; overflow: hidden; padding-block-end: 0.06em; margin-block-end: -0.06em; }
.hero__title .line > span { display: inline-block; max-width: 100%; }

.hero__sub {
  max-width: calc(600 * var(--u));
  margin-top: calc(44 * var(--u));
  color: var(--blaze);
  font-weight: 500;
  font-size: max(1.0625rem, calc(36 * var(--u)));
  line-height: 1.32;
  text-wrap: pretty;
  /* on phones taller than the comp, the free height opens up around the action */
  margin-bottom: auto;
}

.hero__act {
  display: flex;
  align-items: center;
  gap: calc(21 * var(--u));
  margin-top: max(1.75rem, calc(112 * var(--u)));
  margin-bottom: auto;
}

.blaze {
  flex: none;
  width: calc(122 * var(--u));
  aspect-ratio: 1;
  margin-inline-end: calc(-10 * var(--u));
  --p1: 100%; --p2: 100%; --p3: 100%;
}
.blaze { display: block; }
.blaze img { width: 100%; height: 100%; }
.motion .blaze {
  /* three painted strokes: each layer uncovers one stripe, right to left */
  -webkit-mask: linear-gradient(#000 0 0) right 0% / var(--p1) 37% no-repeat, linear-gradient(#000 0 0) right 50% / var(--p2) 33% no-repeat, linear-gradient(#000 0 0) right 100% / var(--p3) 34% no-repeat;
  mask: linear-gradient(#000 0 0) right 0% / var(--p1) 37% no-repeat, linear-gradient(#000 0 0) right 50% / var(--p2) 33% no-repeat, linear-gradient(#000 0 0) right 100% / var(--p3) 34% no-repeat;
}

.cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: max(3.5rem, calc(103 * var(--u)));
  padding-inline: 1rem;
  border-radius: calc(8 * var(--u));
  background: var(--orange);
  color: var(--night);
  font-family: var(--display);
  font-size: max(1.125rem, calc(52 * var(--u)));
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
@media (hover: hover) { .cta:hover { background: var(--blaze); } }
.cta:active { background: var(--orange-deep); transform: translateY(1px); }
.hero .cta, .pain { --focus: var(--blaze); }

.hero__terms {
  margin-top: calc(18 * var(--u));
  color: var(--blaze);
  font-weight: 600;
  font-size: max(1rem, calc(28 * var(--u)));
  line-height: 1.4;
  text-shadow: 0 1px 3px rgb(12 8 6 / 0.7);
}
.proof { margin-top: max(1.75rem, calc(86 * var(--u))); --focus: var(--blaze); }

.proof__label {
  text-shadow: 0 1px 3px rgb(12 8 6 / 0.75);
  font-family: var(--display);
  font-size: max(1rem, calc(29 * var(--u)));
  line-height: 1.2;
}

.proof__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(46 * var(--u));
  margin-top: calc(26 * var(--u));
}

.proof__list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  text-decoration: none;
}
.proof__list .plaque {
  display: block;
  width: 100%;
  transform-origin: 50% 8%;
}
.proof__list .plaque img { transform-origin: 50% 8%; transition: transform 0.4s var(--ease-out); }
@media (hover: hover) { .proof__list a:hover .plaque img { transform: rotate(-1.5deg); } }
.proof__list span, .proof__list small {
  text-shadow: 0 1px 3px rgb(12 8 6 / 0.75);
  text-align: center;
  line-height: 1.2;
}
.proof__list span { font-weight: 700; font-size: max(1rem, calc(31 * var(--u))); }
.proof__list small { margin-top: -0.15rem; color: var(--blaze-soft); font-size: max(0.875rem, calc(24 * var(--u))); font-weight: 600; }

/* ───────── pain: where the trail is lost ───────── */

.pain {
  position: relative;
  /* night falls: the band under the trailhead darkens, then opens onto the land at night */
  background: linear-gradient(to bottom, var(--night) 0, var(--night) calc(150 * var(--u)), rgb(18 18 18 / 0) max(60%, 22rem));
  padding: calc(44 * var(--u)) var(--gutter) calc(160 * var(--u));
}

.pain__title {
  font-weight: 700;
  font-size: max(1.875rem, calc(60 * var(--u)));
  line-height: 1.12;
  text-wrap: balance;
}
.pain__title .keep { display: block; }

.pain__lead {
  max-width: 34em;
  margin-top: 1.25rem;
  color: var(--blaze-soft);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.7;
  text-wrap: pretty;
}

/* ───────── the walked trail: drawn by main.js through every marked point ───────── */

main { position: relative; }
.trail-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.trail__line, .trail__shade, .trail__lost {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trail__line { stroke: var(--blaze); stroke-width: 4.5; }
.trail__shade { stroke: rgb(16 9 5 / 0.55); stroke-width: 9; }
.trail__lost { stroke: var(--blaze); stroke-width: 3.5; stroke-dasharray: 14 22; opacity: 0.5; }
/* while the promise is held on screen, the walked trail steps aside */
.mark.is-held > .trail-layer { opacity: 0; }
.trail-head {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blaze);
  box-shadow: 0 0 0 4px var(--orange), 0 2px 6px rgb(12 8 6 / 0.6);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  will-change: transform;
}
.motion .trail-head.is-walking { opacity: 1; }
main > section:not(.hero) > *:not(.trail-layer) { position: relative; z-index: 1; }

/* marks are painted when the walker reaches them; faded ones flicker into sight */
.motion .fix__mark, .motion .station__mark, .motion .sign__route {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.motion .fix__mark.is-marked, .motion .station__mark.is-marked, .motion .sign__route.is-marked { clip-path: inset(0 0 0 0); }
.motion .lost__mark { opacity: 0; }
.motion .lost__mark.is-marked { animation: flicker 1.2s steps(1, end) forwards, settle 0.6s 1.2s ease-out forwards; }
@keyframes flicker { 0% { opacity: 0; } 12% { opacity: 0.7; } 22% { opacity: 0.12; } 34% { opacity: 0.6; } 48% { opacity: 0.2; } 100% { opacity: 0.7; } }
@keyframes settle { to { opacity: 0.7; } }

/* ───────── shared section frame ───────── */

.pain, .mark, .works, .process, .offers, .faq {
  padding-inline: max(var(--gutter), (100vw - 1180px) / 2);
}
.mark, .works, .process, .offers, .faq {
  padding-block: clamp(5rem, 11vw, 9.5rem);
}

.works__title, .process__title, .offers__title, .faq__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.5rem);
  line-height: 1.02;
  text-wrap: balance;
}

.works__lead, .process__lead, .offers__lead {
  max-width: 34em;
  margin-top: 1.125rem;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.7;
  text-wrap: pretty;
}

h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* ───────── pain: the trail breaks ───────── */

.lost {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  margin-top: clamp(3rem, 8vw, 5rem);
  max-width: 46rem;
  --mark: clamp(4rem, 12vw, 5.5rem);
}

.lost__stop {
  position: relative;
  display: grid;
  grid-template-columns: var(--mark) 1fr;
  column-gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.lost__mark {
  grid-row: span 2;
  display: block;
  width: 100%;
  opacity: 0.7;
}
.lost__stop h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.2;
}
.lost__stop p {
  margin-top: 0.5rem;
  color: var(--blaze-soft);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
}

/* ───────── mark: the trail is re-marked ───────── */

.mark {
  position: relative;
  --focus: var(--blaze);
}

.mark__stage {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.mark__paint {
  position: relative;
  width: clamp(9rem, 30vw, 20rem);
  aspect-ratio: 520 / 450;
}
.mark__stripe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mark__stripe--1 { clip-path: inset(0 0 64% 0); }
.mark__stripe--2 { clip-path: inset(36% 0 34% 0); }
.mark__stripe--3 { clip-path: inset(66% 0 0 0); }

.mark__title {
  max-width: 15em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.2rem + 4.4vw, 5.25rem);
  line-height: 1.08;
  text-wrap: balance;
}

.mark__lead {
  max-width: 34em;
  margin-top: 1.25rem;
  color: var(--blaze-soft);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.7;
}

.fixes {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3rem);
  margin-top: clamp(4rem, 10vw, 7rem);
}
.fix {
  display: grid;
  grid-template-columns: clamp(3.25rem, 9vw, 4.25rem) 1fr;
  column-gap: clamp(1rem, 3vw, 1.5rem);
  align-items: start;
}
.fix__mark { grid-row: span 2; width: 100%; margin-top: 0.2em; }
.fix h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.2;
}
.fix p {
  margin-top: 0.5rem;
  color: var(--blaze-soft);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
}

/* ───────── works: viewpoints in daylight ───────── */

.works {
  position: relative;
  --focus: var(--blaze);
}
.works__lead { color: var(--blaze-soft); }

.process {
  position: relative;
  --focus: var(--blaze);
}
.process__lead { color: var(--blaze-soft); }

.works__list {
  display: grid;
  gap: clamp(4rem, 10vw, 7rem);
  margin-top: clamp(3rem, 8vw, 5rem);
}

.work {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}

.work__view {
  position: relative;
  aspect-ratio: 1100 / 779;
  width: 100%;
  max-width: 46rem;
}
.work__screen {
  position: absolute;
  /* the plaque's measured window */
  left: 12.83%; right: 13.02%; top: 19.3%; bottom: 21.42%;
  overflow: hidden;
  background: var(--screen-blank);
}
.work__page { width: 100%; height: auto; will-change: transform; }
.work__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgb(10 6 4 / 0.55));
}

.work__caption h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--blaze);
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.1;
}
.work__caption p {
  margin-top: 0.25rem;
  color: var(--blaze-soft);
  font-size: 1.0625rem;
}
.work__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 0.5rem;
  color: var(--blaze);
  font-weight: 700;
  font-size: 1.0625rem;
}
.work__link svg {
  width: 1.15em; height: 1.15em;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s var(--ease-out);
}
@media (hover: hover) { .work__link:hover { color: var(--orange); } }
@media (hover: hover) { .work__link:hover svg { transform: translateX(-4px); } }

.works__ask {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  margin-top: clamp(4.5rem, 10vw, 7rem);
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
}
.works__ask p {
  font-family: var(--display);
  color: var(--blaze);
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.15;
  text-wrap: balance;
}
.works__ask .cta, .end .cta { flex: none; width: 100%; max-width: 34rem; }

/* ───────── process: the route, station by station ───────── */

.process { padding-top: 0; }

.route {
  position: relative;
  display: grid;
  gap: clamp(2.25rem, 6vw, 3rem);
  margin-top: clamp(3rem, 8vw, 4.5rem);
  max-width: 46rem;
  --mark: clamp(3.25rem, 9vw, 4rem);
}
/* the trail still to walk, dashed; the walked trail, solid dusk paint */

.station {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--mark) 1fr;
  column-gap: clamp(1rem, 3vw, 1.5rem);
}
.station__mark {
  grid-row: span 2;
  width: 100%;
}
.station h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--blaze);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.2;
}
.station p {
  margin-top: 0.4rem;
  color: var(--blaze-soft);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
}

/* ───────── offers: two routes at the trailhead ───────── */

.offers {
  position: relative;
  --focus: var(--blaze);
}
.offers__lead { color: var(--blaze-soft); }

.signs {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  margin-top: clamp(3rem, 8vw, 4.5rem);
}

.sign {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem);
  border-radius: 4px;
  background: #3b2618 url("assets/plates/signboard.webp") center / cover;
  color: var(--blaze);
  box-shadow: 0 18px 34px rgb(6 6 16 / 0.5);
  --route-y: 0%;
  --focus: var(--blaze);
}
.sign--long { --route-y: 100%; }

/* the route's colour, painted on the board like a blaze stripe */
.sign__route {
  display: block;
  width: 4.5rem;
  height: 1.15rem;
  margin-bottom: 0.9rem;
  background: url("assets/plates/blaze-mark.webp") 50% var(--route-y) / 100% 300% no-repeat;
}
.sign__name {
  font-family: var(--display);
  font-weight: 400;
  color: var(--blaze);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.05;
}
.sign__for {
  margin-top: 0.6rem;
  color: var(--blaze-soft);
  font-size: 1.0625rem;
}

.sign__gets {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.25rem;
}
.sign__gets li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.sign__gets li::before {
  /* a small painted blaze in the route's colour */
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.9rem;
  height: 0.42rem;
  border-radius: 1px;
  background: var(--orange);
}
.sign--long .sign__gets li::before { background: var(--blue); }
.sign__plus {
  margin: 0.9rem 0 1.5rem;
  color: var(--blaze-soft);
  font-size: 1rem;
}
.sign__ledger {
  margin: 1.5rem 0 0;
  border-top: 2px solid rgb(244 241 234 / 0.6);
}
.sign__ledger div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid rgb(244 241 234 / 0.22);
}
.sign__ledger dt { color: var(--blaze-soft); font-size: 1rem; }
.sign__ledger dd { margin: 0; font-weight: 700; font-size: 1.0625rem; text-align: end; }
.sign__price dd {
  font-family: var(--display);
  font-weight: 400;
  color: var(--blaze);
  font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cta--sign { margin-top: auto; flex: none; min-height: 3.5rem; font-size: 1.25rem; }

.perks {
  display: grid;
  gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 2px solid rgb(244 241 234 / 0.5);
}
.perks li {
  max-width: 30em;
  color: var(--blaze-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.perks strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--display);
  font-weight: 400;
  color: var(--blaze);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
}
.perks__small {
  margin-top: 1.5rem;
  color: var(--blaze-soft);
  font-size: 1rem;
}

.offers__note {
  max-width: 36em;
  margin-top: 2rem;
  color: var(--blaze-soft);
  font-size: 1rem;
}
.offers__unsure {
  max-width: 36em;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 1.0625rem;
}
.offers__unsure a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blaze); font-weight: 700; }
@media (hover: hover) { .offers__unsure a:hover { color: var(--orange); } }

/* ───────── faq: before setting out ───────── */

.faq { position: relative; }
.faq__list {
  max-width: 50rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid rgb(244 241 234 / 0.22);
}
details { border-bottom: 1px solid rgb(244 241 234 / 0.22); }
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding-block: 1.1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  line-height: 1.4;
}
summary::-webkit-details-marker { display: none; }
summary svg {
  flex: none;
  width: 1.4rem; height: 1.4rem;
  fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s var(--ease-out);
}
details[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) { summary:hover { color: var(--orange); } }
details p {
  max-width: 40em;
  padding-bottom: 1.25rem;
  color: var(--blaze-soft);
  font-size: 1.0625rem;
}

/* ───────── end: the trail's end, at night ───────── */

.end {
  position: relative;
  min-height: max(100svh, 40rem);
  display: flex;
  align-items: flex-start;
  --focus: var(--blaze);
}
.end__ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* the last stretch rises out of the night above it */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%);
}
.end__ground img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 100%; }
/* under the walked trail (z 0), over the fixed sky */
main > section.end > .end__ground { position: absolute; z-index: -1; }
.end__cairn { position: absolute; width: 1px; height: 1px; left: var(--cairn-x, 60%); top: var(--cairn-y, 62%); }
.end__inner {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  width: 100%;
  padding: clamp(5rem, 12vw, 9rem) max(var(--gutter), (100vw - 1180px) / 2) 3rem;
}
.end__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(4.5rem, 2rem + 12vw, 10rem);
  line-height: 0.9;
}
.end__lead {
  max-width: 30em;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
}
.end__recap {
  font-family: var(--display);
  color: var(--blaze-soft);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
}
.end .cta { margin-top: 0.5rem; }
.end__phone { font-size: 1.0625rem; }
.end__phone a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ───────── footer ───────── */

.footer {
  position: relative;
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 3rem max(var(--gutter), (100vw - 1180px) / 2) 6rem;
  background: var(--night);
  color: var(--blaze-soft);
  font-size: 1rem;
}
.footer__name { color: var(--blaze); font-weight: 700; }
.footer__ig { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) { .footer__ig:hover { color: var(--orange); } }
.a11y { max-width: 46rem; width: 100%; border-bottom: 0; }
.a11y summary { justify-content: flex-start; font-size: 1rem; font-weight: 600; padding-block: 0.5rem; }
.a11y__body { display: grid; gap: 0.75rem; padding-bottom: 1rem; }
.a11y__body p { padding: 0; font-size: 1rem; }

/* ───────── wider screens ───────── */

@media (min-width: 760px) {
  .fixes { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
  .fix { grid-template-columns: 1fr; row-gap: 1rem; }
  .fix__mark { grid-row: auto; width: 4.25rem; }
  .signs { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .perks { grid-template-columns: repeat(2, 1fr); }
  .works__ask { grid-template-columns: 1fr auto; align-items: center; }
  .works__ask .cta { width: auto; min-width: 22rem; }
}

@media (min-width: 1100px) {
  .perks { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .lost { grid-template-columns: repeat(3, 1fr); max-width: none; column-gap: 3rem; }
  .lost__stop { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .lost__mark { grid-row: auto; width: var(--mark); position: relative; }

  .mark__stage { grid-template-columns: 1fr auto; }
  .mark__paint { order: 2; }

  .work { grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
  .work:nth-child(even) { grid-template-columns: 1fr 1.5fr; }
  .work:nth-child(even) .work__view { order: 2; justify-self: end; }

  .route {
    grid-template-columns: repeat(5, 1fr);
    max-width: none;
    column-gap: 2rem;
  }
  .station { grid-template-columns: 1fr; row-gap: 1rem; }
  .station__mark { grid-row: auto; width: var(--mark); }
}

/* desktop and wide landscape: the trailhead becomes a panorama */
@media (orientation: landscape) and (min-width: 900px) {
  :root { --u: min(100vw / 1440, 100svh / 900, 1.15px); --gutter: max(2.5rem, (100vw - 1180px) / 2); }

  .hero { min-height: max(100svh, 40rem); }
  .hero__trail {
    left: auto;
    right: calc(var(--gutter) - 130 * var(--u));
    top: 0;
    width: calc(1440 * var(--u));
    height: calc(960 * var(--u));
    -webkit-mask-image: none;
    mask-image: none;
    --m1x: 31.8%; --m1y: 40.8%;
    --m2x: 50.2%; --m2y: 71.6%;
    --mark-w: 3.3%;
    --end-x: 57.4%; --end-y: 99.5%;
  }
  .sky__layer img { object-position: 50% 30%; }
  .end__ground img { object-position: 50% 100%; }

  /* a near ledge the boulder stands on; it moves with the trailhead, over the far land */
  .hero__ledge {
    display: block;
    position: absolute;
    z-index: -2;
    right: calc(var(--gutter) - 130 * var(--u) + 440 * var(--u));
    top: calc(363 * var(--u));
    width: calc(1060 * var(--u));
    pointer-events: none;
    /* the near rock dissolves into the far land on its open side */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
    mask-image: linear-gradient(to right, transparent, #000 22%);
  }
  .hero__ledge img { width: 100%; height: auto; }
  .hero__trail picture img { filter: drop-shadow(0 2px 3px rgb(20 10 6 / 0.55)); }
  .blaze { position: relative; }
  .blaze::after {
    /* where the boulder meets the shelf */
    content: "";
    position: absolute;
    z-index: -1;
    left: 6%; right: 6%; bottom: 4%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(12 7 4 / 0.7), rgb(12 7 4 / 0));
  }
  /* the whole trailhead, proof included, inside one landscape screen: budgeted in 900 units */
  .hero__inner { padding-top: calc(130 * var(--u)); padding-bottom: calc(36 * var(--u)); }
  .hero__title { max-width: calc(900 * var(--u)); font-size: max(2.25rem, calc(88 * var(--u))); }
  .hero__sub { max-width: calc(760 * var(--u)); margin-top: calc(30 * var(--u)); font-size: max(1.0625rem, calc(26 * var(--u))); line-height: 1.45; }
  .hero__act { margin-top: calc(40 * var(--u)); }
  /* on the panorama the blaze is painted on a boulder at the far end of the action, where the trail arrives */
  .blaze { order: 2; width: calc(150 * var(--u)); margin-inline: calc(4 * var(--u)) 0; margin-block: calc(-34 * var(--u)) calc(-24 * var(--u)); }
  .hero__act { max-width: calc(820 * var(--u)); }
  .cta { min-height: max(3.5rem, calc(82 * var(--u))); font-size: max(1.125rem, calc(36 * var(--u))); }
  .hero__terms { margin-top: calc(14 * var(--u)); font-size: max(1rem, calc(22 * var(--u))); }
  .proof { margin-top: auto; padding-top: calc(26 * var(--u)); }
  .proof__list { grid-template-columns: repeat(3, calc(210 * var(--u))); gap: calc(32 * var(--u)); margin-top: calc(14 * var(--u)); }
  .proof__label { font-size: max(1rem, calc(24 * var(--u))); }
  .proof__list span { font-size: max(1rem, calc(21 * var(--u))); }
  .proof__list small { font-size: max(0.875rem, calc(17 * var(--u))); }
  .top__name { font-size: max(1.0625rem, calc(28 * var(--u))); }
  .top__wa { font-size: max(1rem, calc(24 * var(--u))); }

  .pain { padding-top: clamp(4rem, 8vw, 7rem); }
  .pain__title { font-size: clamp(2.25rem, 1.3rem + 4vw, 4.5rem); }
  .pain__title .keep { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}