/* ==========================================================================
   Slip a Trip
   Design system: "Atlas" — ink and paper spreads, threaded by the dashed
   flight path lifted straight out of the logo.
   ========================================================================== */

:root {
  /* Ground */
  --ink:        #12100F;   /* warm near-black */
  --ink-2:      #1C1917;   /* raised dark panel */
  --ink-3:      #2A2624;   /* hairlines on ink */
  --paper:      #E9E5DA;   /* atlas paper */
  --paper-lift: #F3F0E8;   /* cards on paper */
  --paper-line: #CFC8B8;   /* hairlines on paper */

  /* Brand — crimson sampled from the logo file */
  --crimson:      #BF1B27;
  --crimson-lift: #E8404C;  /* legible on ink */

  /* Warm accent — carries the route line, stop numbers and leg labels.
     This is the one colour that follows the hero photograph; the brand core
     (ink, paper, crimson) never moves. */
  --sand: #CBA06E;

  /* Hero scrim: RGB triplet plus per-stop alphas, so a darker photograph can
     be held back harder without redefining the whole gradient. */
  --scrim: 250, 247, 241;
  --scrim-a1: 0.86;
  --scrim-a2: 0.64;
  --scrim-a3: 0.34;
  --scrim-a4: 0.10;
  --scrim-top: 0.30;

  /* Text */
  --on-ink:        #F0EBE1;
  --on-ink-muted:  #9A928A;
  --on-paper:      #191512;
  --on-paper-muted:#635B50;

  /* Type */
  --display: 'Instrument Serif', 'Georgia', serif;
  --body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'Space Mono', ui-monospace, 'Courier New', monospace;

  --fs-hero:  clamp(3.1rem, 1.6rem + 8.4vw, 10rem);
  --fs-h2:    clamp(2.3rem, 1.4rem + 3.9vw, 5rem);
  --fs-h3:    clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --fs-lead:  clamp(1.05rem, 0.98rem + 0.42vw, 1.3rem);
  --fs-label: 0.76rem;

  /* Rhythm */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;
  --s9: 7rem;    --s10: 10rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms;
  --t-mid: 550ms;

  --edge: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1400px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
svg { display: block; flex-shrink: 0; }

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

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

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

.pad-y   { padding-block: clamp(4.5rem, 10vw, 10rem); }
.pad-y-s { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

.on-paper { background: var(--paper); color: var(--on-paper); }
.on-ink   { background: var(--ink);   color: var(--on-ink); }

/* Mono utility label — the "ticket stub" voice of the page */
.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
}
.label-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--crimson-lift);
}
.label-rule::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}
.on-paper .label-rule { color: var(--crimson); }

/* Display headings */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.display em {
  font-style: italic;
  color: var(--crimson-lift);
}
.on-paper .display em { color: var(--crimson); }

.h2 { font-size: var(--fs-h2); }

.lead {
  font-size: var(--fs-lead);
  color: var(--on-ink-muted);
  max-width: 52ch;
  line-height: 1.6;
}
.on-paper .lead { color: var(--on-paper-muted); }

/* Focus — visible, on-brand, never removed */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--crimson-lift);
  outline-offset: 4px;
  border-radius: 2px;
}
.on-paper a:focus-visible,
.on-paper button:focus-visible { outline-color: var(--crimson); }

.skip {
  position: absolute;
  top: -80px; left: var(--edge);
  z-index: 300;
  background: var(--crimson);
  color: #fff;
  padding: 0.85rem 1.4rem;
  font-weight: 700;
  transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--crimson);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast) var(--ease);
}
.btn svg { width: 17px; height: 17px; position: relative; z-index: 1; }
.btn span { position: relative; z-index: 1; }
/* Wipe-fill on hover, travelling left→right like the route line */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
  z-index: 0;
}
.btn:hover::after { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--on-ink);
  border: 1px solid rgba(240, 235, 225, 0.32);
}
.btn-outline::after { background: var(--on-ink); }
.btn-outline:hover { color: var(--ink); border-color: var(--on-ink); }

.on-paper .btn-outline {
  --btn-fg: var(--on-paper);
  border-color: var(--paper-line);
}
.on-paper .btn-outline::after { background: var(--ink); }
.on-paper .btn-outline:hover { color: var(--paper); }

.btn-ink { --btn-bg: var(--ink); --btn-fg: var(--on-ink); }
.btn-ink::after { background: var(--crimson); }

/* --------------------------------------------------------------------------
   Header — always ink-backed so the logo reads from the very first paint
   -------------------------------------------------------------------------- */

/* No masthead at rest — the logo and nav sit straight on the hero, which is
   washed pale at the top so the black linework reads. A cream bar only fades
   in once you scroll, because past the hero the sections behind it go dark. */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 420ms var(--ease), border-color 420ms var(--ease),
              box-shadow 420ms var(--ease), transform 460ms var(--ease);
}
/* Once past the hero it slides away entirely while you read downward, and
   returns — on its own cream ground, since what's behind it may be dark —
   only when you scroll back up. */
.hdr.stuck {
  background: var(--paper);
  border-bottom-color: var(--paper-line);
  box-shadow: 0 8px 28px -18px rgba(18, 16, 15, 0.55);
}
.hdr.tucked { transform: translateY(-101%); }
@media (prefers-reduced-motion: reduce) {
  .hdr.tucked { transform: none; }
}
.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: 0.8rem;
  transition: padding 420ms var(--ease);
}
.hdr.stuck .hdr-in { padding-block: 0.6rem; }

/* Logo: fixed height, auto width, white-knocked so it never merges with the
   photo behind it. Intrinsic ratio 2500x1037. */
/* The logo keeps its real colours. Because both dark grounds would swallow
   its black linework, it sits on its own paper plate — a luggage-tag badge
   that guarantees it reads at any scroll position. */
.logo { display: block; line-height: 0; }
.logo img {
  height: 58px;
  width: auto;
  transition: height 420ms var(--ease);
}
.hdr.stuck .logo img { height: 46px; }
@media (max-width: 520px) {
  .logo img { height: 42px; }
  .hdr.stuck .logo img { height: 38px; }
}

.nav { display: none; gap: clamp(1.5rem, 2.4vw, 2.75rem); align-items: center; }
/* Plain sans, sentence case, normal tracking — the nav is for reading, not
   for texture. */
.nav a {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--on-paper);
  position: relative;
  padding-block: 0.35rem;
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 380ms var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.hdr-cta { display: none; }

.burger {
  width: 46px; height: 46px;
  margin-right: -0.6rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--on-paper);
}
.burger span {
  display: block;
  width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform 320ms var(--ease), opacity 200ms linear;
}
.burger span + span { margin-top: 6px; }

@media (min-width: 1000px) {
  .nav, .hdr-cta { display: flex; }
  .burger { display: none; }
}

/* Mobile sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  color: var(--on-paper);
  display: flex;
  flex-direction: column;
  padding: var(--s5) var(--edge) var(--s6);
  overflow-y: auto;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 620ms var(--ease), visibility 0s linear 620ms;
}
.sheet.open {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition: clip-path 620ms var(--ease), visibility 0s linear 0s;
}
.sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.95rem;
}
.sheet-top .logo img { height: 40px; }
.sheet-close { width: 46px; height: 46px; margin-right: -0.6rem; display: grid; place-items: center; cursor: pointer; color: var(--on-paper); }
.sheet-close svg { width: 22px; height: 22px; }

.sheet nav {
  display: flex;
  flex-direction: column;
  margin-top: var(--s6);
  border-top: 1px solid var(--paper-line);
}
.sheet nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding-block: clamp(0.85rem, 2.6vw, 1.3rem);
  border-bottom: 1px solid var(--paper-line);
  font-family: var(--display);
  font-size: clamp(1.9rem, 9vw, 2.9rem);
  line-height: 1;
}
.sheet nav a i {
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--crimson);
}
.sheet-foot { margin-top: auto; padding-top: var(--s6); display: grid; gap: var(--s4); }
.sheet-foot .btn { justify-content: center; }
.sheet-foot .label { color: var(--on-paper-muted); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--paper);
  color: var(--on-paper);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Resting scale is deliberately generous: it is the headroom the scroll
   parallax translates within, so the frame never uncovers the ground. */
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Framed on the open water and the plane, so the type sits over pale sand
     and sea rather than over the palms — which stay sharp at the edge. */
  object-position: 76% 56%;
  transform: scale(1.18);
  will-change: transform, opacity;
}
.js .hero-bg img { transform: scale(1.30); opacity: 0; }
.loaded .hero-bg img {
  opacity: 1;
  transform: scale(1.18);
  transition: transform 2400ms var(--ease), opacity 1400ms ease-out;
}
/* The photograph is bright, so it needs only a scrim from the left to hold
   the type — the top stays open so the logo and nav sit on the sky itself. */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(var(--scrim), var(--scrim-a1)) 0%,
      rgba(var(--scrim), var(--scrim-a2)) 26%,
      rgba(var(--scrim), var(--scrim-a3)) 52%,
      rgba(var(--scrim), var(--scrim-a4)) 78%,
      rgba(var(--scrim), 0) 100%),
    linear-gradient(180deg,
      rgba(var(--scrim), var(--scrim-top)) 0%,
      rgba(var(--scrim), 0) 30%);
}

/* Narrow screens: the copy spans the full width and sits low, so the wash
   comes up from the bottom instead of in from the left. The top stays open
   either way, which is what keeps the logo sitting on the sky. */
@media (max-width: 900px) {
  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(var(--scrim), 0.24) 0%,
      rgba(var(--scrim), 0.06) 12%,
      rgba(var(--scrim), 0.46) 26%,
      rgba(var(--scrim), 0.80) 48%,
      rgba(var(--scrim), 0.94) 70%,
      rgba(var(--scrim), 0.96) 100%);
  }
}


.hero-in {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  padding-top: 8rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
  max-width: 15ch;
}
.hero h1 em { font-style: italic; color: var(--crimson); }

/* Hero sits on a pale wash, so its type and controls take the paper palette. */
.hero .label-rule { color: var(--crimson); }
.hero .lead { color: var(--on-paper-muted); }
.hero .btn-outline {
  --btn-fg: var(--on-paper);
  border-color: rgba(25, 21, 18, 0.28);
}
.hero .btn-outline::after { background: var(--ink); }
.hero .btn-outline:hover { color: var(--paper); border-color: var(--ink); }

/* Line-by-line mask reveal */
.rise { display: block; overflow: hidden; }
.rise > span {
  display: block;
  transition: transform 1100ms var(--ease);
}
.js .rise > span { transform: translateY(105%); }
.loaded .rise > span { transform: translateY(0); }
.loaded .rise:nth-of-type(2) > span { transition-delay: 90ms; }
.loaded .rise:nth-of-type(3) > span { transition-delay: 180ms; }
.loaded .rise:nth-of-type(4) > span { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .rise > span { transform: none; }
}

.js .hero-fade {
  opacity: 0;
  transform: translateY(14px);
}
.loaded .hero-fade {
  opacity: 1;
  transform: none;
  transition: opacity 900ms ease-out 520ms, transform 900ms var(--ease) 520ms;
}
@media (prefers-reduced-motion: reduce) {
  .hero-fade { opacity: 1; transform: none; }
}

.hero-lead { margin-top: clamp(1.2rem, 2.4vw, 1.9rem); }
.hero-acts { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Ticket-stub detail bottom-right of the hero */
.hero-stub {
  position: absolute;
  right: var(--edge);
  bottom: clamp(2.5rem, 6vw, 5rem);
  z-index: 1;
  display: none;
  text-align: right;
  color: var(--on-paper-muted);
}
.hero-stub .label { display: block; color: var(--crimson); }
.hero-stub b {
  display: block;
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--on-paper);
  line-height: 1.1;
  margin-top: 0.4rem;
}
@media (min-width: 1000px) { .hero-stub { display: block; } }

/* --------------------------------------------------------------------------
   Marquee — a departure board strip
   -------------------------------------------------------------------------- */

/* Ink, not crimson. Red is reserved for things you can act on — keeping it
   off a decorative strip is what makes the buttons and the closing CTA read
   as the loudest things on the page. */
.marquee {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: 0.95rem;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}
.marquee-track > span {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track i { font-style: normal; color: var(--crimson-lift); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* --------------------------------------------------------------------------
   The desk — team, without claiming one person does it all
   -------------------------------------------------------------------------- */

.desk-head { display: grid; gap: var(--s5); }
.desk-head h2 { max-width: 18ch; }
@media (min-width: 900px) {
  .desk-head {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s8);
    align-items: end;
  }
}

.desks {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--paper-line);
}
.desk {
  display: grid;
  gap: var(--s3);
  padding-block: clamp(1.6rem, 3.2vw, 2.4rem);
  border-bottom: 1px solid var(--paper-line);
  align-items: baseline;
}
.desk-no {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--crimson);
}
.desk h3 {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
}
.desk p { color: var(--on-paper-muted); max-width: 58ch; }
@media (min-width: 800px) {
  .desk { grid-template-columns: 7rem 15rem 1fr; gap: var(--s6); }
}

/* --------------------------------------------------------------------------
   Destinations — the signature. Stops threaded on the logo's flight path.
   -------------------------------------------------------------------------- */

.route { position: relative; }

.route-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.route-base {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 7 9;
  stroke-linecap: round;
}
/* Travelled portion — solid over the dashed plan. JS owns its dash values. */
.route-live {
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.route-plane { fill: var(--crimson-lift); }

/* Left gutter on small screens keeps the route clear of the content */
.stops {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(3.5rem, 8vw, 7rem);
  padding-left: 2.25rem;
}
@media (min-width: 900px) { .stops { padding-left: 0; } }

.stop { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) {
  .stop { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .stop:nth-child(even) .stop-media { order: 2; }
}

.stop-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--ink-2);
}
.stop-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1200ms var(--ease);
}
.stop:hover .stop-media img { transform: scale(1.07); }
/* Curtain that lifts on reveal */
.stop-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1000ms var(--ease);
}
.js .stop-media::after { transform: scaleY(1); }
.js .stop.seen .stop-media::after { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) {
  .stop-media::after { transform: scaleY(0); }
}

.stop-tag {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  background: var(--crimson);
  color: #fff;
  padding: 0.55rem 0.9rem;
}

.stop-body { display: grid; gap: var(--s3); align-content: center; }
.stop-no {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--sand);
}
.stop h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.stop p { color: var(--on-ink-muted); max-width: 42ch; }

.stop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--ink-3);
}
.stop-meta div { display: grid; gap: 0.3rem; }
.stop-meta dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-ink-muted); }
.stop-meta dd { margin: 0; font-weight: 600; font-size: 0.95rem; }

.stop-link {
  justify-self: start;
  margin-top: var(--s3);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.9rem;
  padding-bottom: 0.35rem;
  background-image: linear-gradient(var(--crimson-lift), var(--crimson-lift));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 420ms var(--ease);
}
.stop-link svg { width: 15px; height: 15px; transition: transform 420ms var(--ease); }
.stop-link:hover { background-size: 0% 1px; background-position: 100% 100%; }
.stop-link:hover svg { transform: translateX(5px); }

/* Divider between international and domestic legs */
.leg {
  display: flex;
  align-items: center;
  gap: var(--s5);
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.leg::after { content: ''; flex: 1; height: 1px; background: var(--ink-3); }
.leg .label { color: var(--sand); }

/* --------------------------------------------------------------------------
   Proof strip
   -------------------------------------------------------------------------- */

.proof { display: grid; gap: var(--s7); }
@media (min-width: 800px) { .proof { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }

.proof-item { border-top: 1px solid var(--ink-3); padding-top: var(--s4); }
.proof-item b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.8rem, 2rem + 3.4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.proof-item span { display: block; margin-top: var(--s3); color: var(--on-ink-muted); max-width: 30ch; }

/* --------------------------------------------------------------------------
   Process — a genuine sequence, so numbering earns its place
   -------------------------------------------------------------------------- */

.steps { margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--paper-line); }
.step {
  display: grid;
  gap: var(--s3);
  padding-block: clamp(1.7rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--paper-line);
  align-items: start;
  position: relative;
}
.step-no {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  line-height: 0.9;
  color: var(--crimson);
}
.step h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.step p { color: var(--on-paper-muted); max-width: 56ch; }
@media (min-width: 800px) {
  .step { grid-template-columns: 6rem 16rem 1fr; gap: var(--s6); align-items: baseline; }
}

/* --------------------------------------------------------------------------
   Reviews — honest placeholders
   -------------------------------------------------------------------------- */

/* Live Google rating — the one piece of social proof that is real today */
.rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--paper-line);
  background: var(--paper-lift);
  color: var(--on-paper);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.rating:hover { border-color: var(--on-paper); transform: translateY(-2px); }
.rating-score {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
}
.rating-stars { display: inline-flex; gap: 3px; color: var(--crimson); }
.rating-stars svg { width: 17px; height: 17px; }
.rating-text { font-size: 0.95rem; color: var(--on-paper-muted); }
.rating-text strong { color: var(--on-paper); font-weight: 700; }

/* Featured review — the one with a photograph of the actual group */
.feature {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid;
  gap: 0;
  background: var(--paper-lift);
  border: 1px solid var(--paper-line);
  overflow: hidden;
}
@media (min-width: 900px) {
  .feature { grid-template-columns: 1.05fr 1fr; }
}
.feature-media { position: relative; background: var(--ink); min-height: 240px; }
.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
@media (min-width: 900px) {
  .feature-media img { aspect-ratio: auto; position: absolute; inset: 0; }
}
.feature-body {
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  display: grid;
  gap: var(--s4);
  align-content: center;
}
.feature-body .label { color: var(--crimson); }
.feature-body blockquote {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  line-height: 1.24;
  color: var(--on-paper);
}
.feature-body figcaption {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-paper);
}
.feature-body figcaption span { font-weight: 400; color: var(--on-paper-muted); }

.reviews { display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 850px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

.review {
  border: 1px solid var(--paper-line);
  background: var(--paper-lift);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid;
  gap: var(--s4);
  align-content: start;
}
.review-stars { display: flex; gap: 3px; color: var(--crimson); }
.review-stars svg { width: 15px; height: 15px; }
.review blockquote {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-paper);
}
.review footer {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--on-paper);
}
.review footer span { font-weight: 400; color: var(--on-paper-muted); }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.close-cta { background: var(--crimson); color: #fff; position: relative; overflow: hidden; }
.close-cta h2 { max-width: 16ch; }
.close-cta .lead { color: rgba(255,255,255,0.86); }
.close-cta .label-rule { color: rgba(255,255,255,0.75); }
.close-cta-acts { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 0.9rem; }
.close-cta .btn-outline { --btn-fg: #fff; border-color: rgba(255,255,255,0.5); }
.close-cta .btn-outline::after { background: #fff; }
.close-cta .btn-outline:hover { color: var(--crimson); border-color: #fff; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Paper footer, for the same reason as the masthead: the logo needs a light
   ground to sit on without anything drawn around it. */
.ftr { background: var(--paper); color: var(--on-paper-muted); }
.ftr-grid { display: grid; gap: var(--s7); }
@media (min-width: 850px) { .ftr-grid { grid-template-columns: 1.4fr 0.8fr 1fr; gap: var(--s8); } }

.ftr-brand .logo img { height: 76px; width: auto; }
@media (max-width: 520px) { .ftr-brand .logo img { height: 58px; } }
.ftr-brand p { margin-top: var(--s5); max-width: 34ch; font-size: 0.95rem; }

.ftr h4 { margin-bottom: var(--s5); }
.ftr h4.label { color: var(--on-paper-muted); }
.ftr-col ul { display: grid; gap: var(--s3); }
.ftr-col a { font-size: 0.95rem; transition: color var(--t-fast) var(--ease); }
.ftr-col a:hover { color: var(--crimson); }

address { font-style: normal; font-size: 0.95rem; line-height: 1.7; }
address a { transition: color var(--t-fast) var(--ease); }
address a:hover { color: var(--crimson); }

.ftr-social { display: flex; gap: var(--s4); margin-top: var(--s5); }
.ftr-social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--paper-line);
  color: var(--on-paper);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ftr-social svg { width: 18px; height: 18px; }
.ftr-social a:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }

.ftr-base {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--s5);
  border-top: 1px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.ftr-base .label { color: var(--on-paper-muted); }
@media (min-width: 700px) {
  .ftr-base { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* --------------------------------------------------------------------------
   Floating WhatsApp
   -------------------------------------------------------------------------- */

.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding-inline: 19px;
  background: var(--crimson);
  color: #fff;
  box-shadow: 0 10px 34px -10px rgba(191, 27, 39, 0.75);
  transform: translateY(120%);
  transition: transform 620ms var(--ease), background var(--t-fast) var(--ease), gap 380ms var(--ease), padding 380ms var(--ease);
}
.fab.in, html:not(.js) .fab { transform: translateY(0); }
.fab svg { width: 24px; height: 24px; }
.fab b {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  transition: max-width 420ms var(--ease);
}
.fab:hover { gap: 0.6rem; background: var(--ink); }
.fab:hover b { max-width: 12rem; }
@media (prefers-reduced-motion: reduce) {
  .fab { transform: none; }
}

/* --------------------------------------------------------------------------
   Blog — index listing and article pages
   -------------------------------------------------------------------------- */

/* Pages without a hero need to clear the fixed header themselves */
.masthead { padding-top: clamp(7rem, 12vw, 10rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.masthead h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-top: var(--s4);
  max-width: 18ch;
}
.masthead h1 em { font-style: italic; color: var(--crimson); }
.masthead .lead { margin-top: var(--s5); }

/* Index: an editorial list, the same language as the desks and the steps */
.posts { border-top: 1px solid var(--paper-line); }
.post-row {
  display: grid;
  gap: var(--s3);
  padding-block: clamp(1.8rem, 3.6vw, 2.8rem);
  border-bottom: 1px solid var(--paper-line);
  align-items: start;
}
@media (min-width: 800px) {
  .post-row { grid-template-columns: 12rem 1fr auto; gap: var(--s6); align-items: baseline; }
}
.post-meta {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}
.post-row h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.12;
}
.post-row h2 a { transition: color var(--t-fast) var(--ease); }
.post-row:hover h2 a { color: var(--crimson); }
.post-row p { margin-top: var(--s3); color: var(--on-paper-muted); max-width: 62ch; }
.post-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.post-go svg { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease); }
.post-row:hover .post-go svg { transform: translateX(4px); }

.posts-empty {
  margin-top: var(--s6);
  font-size: 0.95rem;
  color: var(--on-paper-muted);
}

/* Article */
.article { padding-bottom: clamp(4rem, 8vw, 7rem); }
.article-body {
  max-width: 68ch;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.article-body > * + * { margin-top: 1.4em; }
.article-body p {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--on-paper);
}
.article-body h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.15;
  margin-top: 2.2em;
}
.article-body h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 1.8em;
}
.article-body ul { display: grid; gap: 0.7rem; padding-left: 1.1rem; list-style: disc; }
.article-body li { line-height: 1.7; }
.article-body a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }
.article-body strong { font-weight: 700; }

.article-note {
  margin-top: 2.5rem;
  padding: var(--s5);
  border-left: 3px solid var(--crimson);
  background: var(--paper-lift);
  font-size: 0.98rem;
  color: var(--on-paper-muted);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--on-paper);
}
.back-link svg { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease); }
.back-link:hover svg { transform: translateX(-4px); }

/* --------------------------------------------------------------------------
   Plane cursor — the logo's plane and dashed flight path, on the pointer
   -------------------------------------------------------------------------- */

:root { --cursor-c: var(--crimson); }
/* Over the dark sections the plain crimson goes muddy; over crimson itself it
   disappears entirely. Both cases get their own colour. */
html.cursor-dark  { --cursor-c: var(--crimson-lift); }
html.cursor-light { --cursor-c: var(--paper-lift); }

.plane-cursor,
.cursor-trail {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.cursor-trail { width: 100%; height: 100%; z-index: 998; }
.cursor-trail polyline {
  fill: none;
  stroke: var(--cursor-c);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  opacity: 0.45;
}
.plane-cursor {
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  z-index: 999;
  will-change: transform;
}
.plane-cursor svg { width: 100%; height: 100%; fill: var(--cursor-c); }

/* Only ever visible once JS has switched it on */
html.plane-on .plane-cursor,
html.plane-on .cursor-trail { opacity: 1; }
html.plane-on.cursor-away .plane-cursor,
html.plane-on.cursor-away .cursor-trail { opacity: 0; }

/* Hide the system cursor only while the plane is actually running */
@media (hover: hover) and (pointer: fine) {
  html.plane-on, html.plane-on * { cursor: none !important; }
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

.js .rv { opacity: 0; transform: translateY(30px); }
.rv.seen {
  opacity: 1;
  transform: none;
  transition: opacity 900ms ease-out, transform 900ms var(--ease);
}
.rv-d1.seen { transition-delay: 90ms; }
.rv-d2.seen { transition-delay: 180ms; }
.rv-d3.seen { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}