/* ==========================================================================
   Adiona Travels — We Orchestrate Memories
   Interface in three colours only: white, black, Adiona red. Photography
   stays in full colour, clipped to curved banner shapes from the logo
   (see main.js). One idea per screen.
   ========================================================================== */

/* Inter Tight, self-hosted (SIL OFL, assets/fonts/OFL.txt): one variable file per script covers
   weights 400–800. Latin is preloaded in <head>; Latin Extended only downloads if a page uses it. */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  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: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --white: #FFFFFF;
  --black: #000000;
  --red: #E2323A;          /* logo red — large type, fills */
  --red-ink: #C8242C;      /* AA-safe red for small text & buttons on white */
  --soft: rgba(0, 0, 0, .62);     /* secondary text: black, quieter */
  --line: rgba(0, 0, 0, .14);
  --soft-on-dark: rgba(255, 255, 255, .7);
  --line-on-dark: rgba(255, 255, 255, .18);

  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --fs-small: .9375rem;
  --fs-body: 1.125rem;
  --fs-lead: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  --fs-h3: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --fs-h2: clamp(2.5rem, 1.3rem + 4.6vw, 6rem);
  --fs-display: clamp(2.6rem, .6rem + 9.6vw, 10rem);

  --gutter: clamp(1.25rem, .6rem + 3vw, 4rem);
  --space: clamp(6rem, 3rem + 10vw, 14rem);       /* between sections */
  --space-sm: clamp(3rem, 2rem + 4vw, 6rem);       /* inside sections */
  --measure: 34ch;
  --header-h: 76px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 200ms;
  --t-med: 480ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; background: var(--white); color: var(--black);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--red); color: var(--white); }
:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 4px; }
.on-dark :focus-visible, .on-red :focus-visible { outline-color: var(--white); }

.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: .75rem 1rem;
  background: var(--black); color: var(--white); transform: translateY(-200%); text-decoration: none;
}
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Curved photography ---------- */
.photo { overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* Without JavaScript the curves can't be drawn: soften the corners, and give logo frames the static logo outline */
.no-js [data-curve] { border-radius: 3rem 9rem 3rem 9rem; }
.no-js [data-curve="logo"] { border-radius: 0; clip-path: url(#logo-clip); -webkit-clip-path: url(#logo-clip); }

/* ---------- Type ---------- */
.display { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.05em; line-height: .9; text-transform: uppercase; }
.h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.lead { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -.015em; max-width: var(--measure); }
.soft { color: var(--soft); }
.red { color: var(--red); }
.small { font-size: var(--fs-small); }
.label { font-size: var(--fs-small); font-weight: 500; color: var(--soft); }

/* ---------- Layout ---------- */
.wrap { padding-inline: var(--gutter); max-width: 1680px; margin-inline: auto; }
.section { padding-block: var(--space); }
.section + .section { padding-top: 0; }
.rule { border-top: 1px solid var(--line); }
.stack > * + * { margin-top: var(--space-sm); }
.title-block { max-width: 16ch; }
.offset { margin-left: auto; max-width: min(100%, 30rem); }
@media (min-width: 900px) {
  .offset { margin-right: 8vw; }
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--black); --fg: var(--white);
  display: inline-flex; align-items: center; gap: 1rem; justify-self: start;
  min-height: 56px; padding: 0 1.6rem;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg); border-radius: 999px;
  font-size: 1rem; font-weight: 500; letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  touch-action: manipulation;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn:hover { --bg: var(--red-ink); }
.btn--red { --bg: var(--red-ink); }
.btn--red:hover { --bg: var(--black); }
.btn--line { --bg: transparent; --fg: var(--black); border-color: var(--black); }
.btn--line:hover { --bg: var(--black); --fg: var(--white); }
.btn--white { --bg: var(--white); --fg: var(--black); }
.btn--white:hover { --bg: var(--black); --fg: var(--white); border-color: var(--black); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.text-link {
  display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; text-decoration: none;
  padding-bottom: .2rem; min-height: 44px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
}
/* The underline wipes away to the right and redraws from the left */
.text-link:hover { color: var(--red-ink); animation: underline-redraw .8s var(--ease-in-out); }
.text-link svg { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease-out); }
.text-link:hover svg { transform: translateX(4px); }
@keyframes underline-redraw {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0 1px; background-position: 100% 100%; }
  55% { background-size: 0 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* Masked line reveal for [data-reveal] headings (split by main.js) */
.rl { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.rl-in { display: inline-block; }
.link { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.link:hover { color: var(--red-ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; background: var(--white);
  border-bottom: 1px solid transparent; transition: border-color var(--t-med);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand { display: flex; align-items: center; min-height: 48px; }
.brand img { height: 62px; width: auto; }
@media (min-width: 900px) { :root { --header-h: 92px; } .brand img { height: 76px; } }
.nav { display: none; }
.menu-toggle {
  display: flex; align-items: center; gap: .75rem; min-height: 48px; min-width: 48px;
  background: none; border: 0; cursor: pointer; font-weight: 500;
}
.menu-toggle .bars { width: 24px; height: 10px; position: relative; }
.menu-toggle .bars::before, .menu-toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--black);
}
.menu-toggle .bars::before { top: 0; }
.menu-toggle .bars::after { bottom: 0; }

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
  .nav a { text-decoration: none; font-weight: 500; position: relative; padding-block: .5rem; }
  .nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: var(--red);
    transform: scaleX(0); transform-origin: right; transition: transform var(--t-med) var(--ease-out);
  }
  .nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .nav .btn { min-height: 48px; padding: 0 1.3rem; }
}
/* Nine links and the logo: tighter between 1024 and 1365px so the row never wraps or crowds */
@media (min-width: 1024px) and (max-width: 1365px) {
  .nav { gap: 1.15rem; }
  .nav a { font-size: .975rem; }
  .nav .btn { padding: 0 1.1rem; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 50; background: var(--black); color: var(--white);
  display: grid; grid-template-rows: var(--header-h) 1fr auto;
  visibility: hidden; opacity: 0;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transition: opacity var(--t-med) var(--ease-out); }
.mm-top { display: flex; justify-content: flex-end; align-items: center; padding-inline: var(--gutter); }
.mm-close { background: none; border: 0; color: var(--white); min-height: 48px; min-width: 48px; cursor: pointer; font-weight: 500; }
.mobile-menu nav { padding: 0 var(--gutter); align-self: center; }
.mobile-menu nav a {
  display: block; text-decoration: none; font-weight: 700; letter-spacing: -.045em;
  font-size: clamp(2.5rem, 12vw, 4.5rem); line-height: 1.08;
}
.mobile-menu nav a[aria-current="page"] { color: var(--red); }
.mm-foot { padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom)); display: grid; gap: .5rem; color: var(--soft-on-dark); }
.mm-foot a { text-decoration: none; }
body.menu-open { overflow: hidden; }

/* ---------- Home hero ---------- */
.hero { position: relative; min-height: calc(100svh - var(--header-h)); display: flex; overflow: hidden; }
.hero-stage {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem); padding-block: clamp(2rem, 5vh, 4rem);
  perspective: 1100px; /* depth for the pointer tilt on .hero-window (main.js) */
}
.hero-title { display: contents; }
.hero-title .line {
  position: relative; z-index: 2; display: block; width: 100%; overflow: hidden; padding-bottom: .05em;
  font-size: clamp(2.25rem, .55rem + 9.4vw, 9.75rem);
}
.hero-title .line > span { display: inline-block; }
.hero-title .line--left { order: 0; }
.hero-window { order: 1; }
.hero-title .line--right { order: 2; text-align: right; color: var(--red); }
.hero-window {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1.42; background: var(--black);
  clip-path: url(#banner-clip); -webkit-clip-path: url(#banner-clip); will-change: transform;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden; }
.hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The YouTube player: sized by main.js to cover the window (zoomed past the film's black bars) and drawn at
   2x then scaled down on large screens, so YouTube streams a sharp enough rendition for the full-screen open */
.hero-yt { position: absolute; left: 50%; top: 50%; border: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero-yt.is-playing { opacity: 1; }
.hero-birds { position: absolute; z-index: 3; top: 26%; right: 2%; width: clamp(64px, 13vw, 190px); color: var(--red); }
.hero-birds path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.scroll-cue { display: none; align-items: center; gap: .6rem; font-size: var(--fs-small); color: var(--soft); }
/* Phones: the hero sits close under the header and ends with the enquiry button, so the
   promise, the film and the next step all fit on the first screen. Desktop has the button in the header. */
.hero-cta { order: 3; position: relative; z-index: 2; align-self: flex-start; }
@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero-stage { justify-content: flex-start; gap: 1rem; padding-block: clamp(1rem, 3vh, 2rem) 0; }
  .hero-title .line--right { margin-top: -.15em; }
}
@media (min-width: 900px) { .hero-cta { display: none; } }
@media (min-width: 900px) {
  .hero-window { width: min(56vw, 980px, calc(62svh * 1.42)); }
  .hero-title .line { position: absolute; width: auto; pointer-events: none; }
  .hero-title .line--left { top: clamp(1rem, 4vh, 3rem); left: 0; }
  .hero-title .line--right { bottom: clamp(1rem, 4vh, 3rem); right: 0; }
  .hero-birds { top: 30%; right: 8%; }
  .scroll-cue { display: inline-flex; position: absolute; left: 0; bottom: clamp(1.5rem, 5vh, 3.5rem); }
}

/* ---------- Statement ---------- */
.statement { display: grid; gap: var(--space-sm); }
.statement .h2 { max-width: 17ch; }
@media (min-width: 900px) { .statement .lead { margin-left: auto; margin-right: 8vw; } }

/* ---------- About page: golden-hour light (body.page-ember) ----------
   A warm near-black page lit by two very soft amber light pools that drift slowly
   (main.js) under fine film grain; big headings catch a faint warm sheen where the
   light falls. Amber is used only here and only as light; type at rest and buttons
   keep the red/black/white palette. */
.page-ember { --amber: #FFB45A; --soft: var(--soft-on-dark); --line: var(--line-on-dark); background: #0B0907; color: var(--white); }
.glow { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.glow span { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.glow-a { width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax; background: radial-gradient(circle, rgba(255, 178, 100, .2), rgba(240, 132, 62, .085) 28%, rgba(240, 132, 62, .02) 48%, transparent 62%); }
.glow-b { width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; background: radial-gradient(circle, rgba(196, 92, 42, .12), rgba(196, 92, 42, .03) 35%, transparent 60%); }
.grain {
  position: fixed; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 0; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.4s steps(6) infinite;
}
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } }
.page-ember main, .page-ember .cta, .page-ember .site-footer { position: relative; z-index: 1; }
/* The header stays a white frame, so it keeps the light-page colours */
.page-ember .site-header { color: var(--black); --soft: rgba(0, 0, 0, .62); --line: rgba(0, 0, 0, .14); }
/* Headings catch the light: a warm sheen centred on the main light pool (--lx/--ly from main.js) */
.page-ember .h2:not(:has(.rl)), .page-ember .h2 .rl-in, .page-ember .page-hero .display .line:first-child > span {
  background: radial-gradient(circle 42vmax at var(--lx, 60vw) var(--ly, 30vh), #FFD9A8, #FFF1DF 38%, #FFFFFF 72%) fixed;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-ember .lead { color: var(--soft-on-dark); }
/* Luggage tags in firelight */
.page-ember .tag { filter: drop-shadow(0 0 28px rgba(255, 150, 60, .16)) drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.page-ember .tag-card { color: var(--black); }
.page-ember .tag .what { border-top-color: rgba(0, 0, 0, .14); }
.page-ember .tags-string path { stroke: rgba(255, 255, 255, .55); }
.page-ember .tag-peg::after { background: rgba(255, 255, 255, .7); }
/* Promises warm up under the cursor; offices each have a lit window */
.page-ember .principle h3 { transition: color var(--t-med); }
.page-ember .principle:hover h3 { color: var(--amber); }
.office-light {
  display: inline-block; width: .32em; height: .32em; margin: 0 .35em .18em 0; border-radius: 50%; vertical-align: middle;
  background: var(--amber); box-shadow: 0 0 .35em .06em rgba(255, 160, 80, .55); animation: office-glow 6s ease-in-out infinite;
}
.office:nth-child(2) .office-light { animation-delay: -2.6s; }
@keyframes office-glow { 50% { opacity: .75; box-shadow: 0 0 .25em .03em rgba(255, 160, 80, .4); } }

/* ---------- Story: the orchestra (About, [data-ensemble] in main.js) ----------
   Suppliers seated on arcs around one red conductor dot. Arrival: arcs and lines
   draw in, seats settle, the conductor gives a downbeat. While on screen a faint
   amber cue travels out every few seconds and every seat lights on the same beat.
   Hovering a seat warms its word in the story and the reverse. No JS / reduced
   motion: the finished chart, no loop. */
.story { display: grid; gap: var(--space-sm); }
@media (min-width: 900px) { .story { grid-template-columns: 1fr minmax(0, 40ch); gap: 6vw; align-items: end; } }
.story .prose { max-width: 40ch; }
.ensemble { position: relative; aspect-ratio: 5 / 3; width: 100%; max-width: 640px; font-size: clamp(.8125rem, .7rem + .35vw, 1rem); }
.ensemble svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ens-arc, .ens-line, .ens-cue { fill: none; vector-effect: non-scaling-stroke; }
.ens-arc { stroke: rgba(255, 255, 255, .13); stroke-width: 1; }
.ens-line { stroke: rgba(255, 255, 255, .2); stroke-width: 1; transition: stroke var(--t-med), stroke-width var(--t-med); }
.ens-cue { stroke: var(--amber); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 7 200; stroke-dashoffset: -100; opacity: 0; }
.ens-guest { fill: rgba(255, 255, 255, .42); transform-box: fill-box; transform-origin: center; }
.ens-seat { position: absolute; width: 0; height: 0; }
.ens-dot { position: absolute; left: -.28em; top: -.28em; width: .56em; height: .56em; border-radius: 50%; background: var(--white); transition: background var(--t-med), box-shadow var(--t-med), transform var(--t-med) var(--ease-out); }
.ens-name {
  position: absolute; left: 0; bottom: .85em; transform: translateX(-50%); white-space: nowrap;
  color: var(--soft-on-dark); letter-spacing: .01em; transition: color var(--t-med), letter-spacing 1.4s var(--ease-out);
}
.ens-seat--guests .ens-name { bottom: .7em; }
.ens-conductor .ens-dot { left: -.5em; top: -.5em; width: 1em; height: 1em; background: var(--red); }
.ens-conductor .ens-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--amber); opacity: 0; }
.ens-conductor .ens-name { bottom: auto; top: 1em; color: var(--white); font-weight: 600; }
/* Hover link between chart and story (main.js sets .is-hot on both) */
.ens-line.is-hot { stroke: var(--amber); stroke-width: 1.5; }
.ens-seat.is-hot .ens-name { color: var(--amber); }
.ens-seat.is-hot .ens-dot { background: var(--amber); box-shadow: 0 0 .9em .15em rgba(255, 170, 90, .55); transform: scale(1.35); }
.ens-conductor.is-hot .ens-dot { background: var(--red); box-shadow: 0 0 1.2em .2em rgba(255, 150, 70, .5); }
.ensemble.guests-hot .ens-guest { fill: var(--amber); }
.cue { transition: color var(--t-med), text-shadow var(--t-med); }
.cue.is-hot { color: var(--amber); text-shadow: 0 0 .8em rgba(255, 160, 80, .45); }
@media (hover: hover) { .ens-seat { cursor: default; } .story .cue { cursor: default; } }

/* Arrival (JS only): hidden until .is-live */
.js .ensemble:not(.is-live) .ens-arc, .js .ensemble:not(.is-live) .ens-line { stroke-dashoffset: 100; }
.js .ensemble .ens-arc, .js .ensemble .ens-line { stroke-dasharray: 100; }
.js .ensemble .ens-arc { transition: stroke-dashoffset 1.8s var(--ease-in-out) calc(var(--i) * .15s); }
.js .ensemble .ens-line { transition: stroke-dashoffset 1.4s var(--ease-in-out) calc(1.1s + var(--i) * .1s), stroke var(--t-med), stroke-width var(--t-med); }
.js .ensemble:not(.is-live) .ens-seat { opacity: 0; }
.js .ensemble:not(.is-live) .ens-name { letter-spacing: .14em; }
.js .ensemble .ens-seat { transition: opacity .9s var(--ease-out) calc(.5s + var(--i) * .12s); }
.js .ensemble .ens-conductor { transition-delay: 1.9s; }
.js .ensemble:not(.is-live) .ens-conductor .ens-dot { transform: scale(0); }
.js .ensemble .ens-conductor .ens-dot { transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) 1.9s, box-shadow var(--t-med); }
.js .ensemble:not(.is-live) .ens-guest { opacity: 0; transform: scale(0); }
.js .ensemble .ens-guest { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), fill var(--t-med); transition-delay: calc(2.5s + var(--d) * .7s); }
.ensemble.is-live .ens-conductor .ens-dot::after { animation: ens-downbeat 1.6s var(--ease-out) 2.4s; }
/* The beat: conductor ring, cue along every line, seats and guests light together */
.ensemble.is-playing .ens-conductor .ens-dot::after { animation: ens-downbeat 5s var(--ease-out) infinite; }
.ensemble.is-playing .ens-cue { animation: ens-cue 5s cubic-bezier(.45, 0, .25, 1) infinite; }
.ensemble.is-playing .ens-seat:not(.ens-conductor):not(.is-hot) .ens-dot { animation: ens-seat 5s ease-out infinite; }
.ensemble.is-playing:not(.guests-hot) .ens-guest { animation: ens-guest 5s ease-out infinite; animation-delay: calc(var(--d) * .5s); }
.ensemble.is-settled .ens-guest { transition-delay: 0s; }
.ensemble.is-paused *, .ensemble.is-paused *::after { animation-play-state: paused !important; }
@keyframes ens-downbeat { 0% { opacity: .9; transform: scale(1); } 30%, 100% { opacity: 0; transform: scale(3.4); } }
@keyframes ens-cue { 0% { stroke-dashoffset: -100; opacity: 0; } 3% { opacity: .9; } 24% { stroke-dashoffset: 7; opacity: .9; } 26%, 100% { stroke-dashoffset: 7; opacity: 0; } }
@keyframes ens-seat { 0%, 22% { background: var(--white); box-shadow: none; } 26% { background: var(--amber); box-shadow: 0 0 .9em .15em rgba(255, 170, 90, .5); } 50%, 100% { background: var(--white); box-shadow: none; } }
@keyframes ens-guest { 0%, 26% { fill: rgba(255, 255, 255, .42); } 31% { fill: var(--amber); } 55%, 100% { fill: rgba(255, 255, 255, .42); } }
/* Story words light up as they are read (GSAP scrub in main.js) */
.story .w { display: inline; }
.reduce-motion .ensemble *, .reduce-motion .ensemble *::after { transition: none !important; animation: none !important; }

/* ---------- Numbers: luggage tags on a string (see main.js) ----------
   Phones: two strings of two tags. Desktop: one string of four. */
.tags { position: relative; padding-top: 18px; }
.tags-string { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tags-string path { fill: none; stroke: var(--black); stroke-width: 1; }
.tag-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(3.5rem, 2rem + 6vw, 6rem) clamp(1rem, 4vw, 3rem); }
@media (min-width: 900px) { .tag-row { grid-template-columns: repeat(4, 1fr); } }
.tag { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)) drop-shadow(0 22px 22px rgba(0, 0, 0, .14)); }
.tag-peg { position: relative; z-index: 1; width: 10px; height: 26px; margin-top: -13px; border-radius: 2px; background: var(--red); }
/* The cord: a thin loop from the peg down through the tag's eyelet */
.tag-peg::after { content: ""; position: absolute; left: 50%; top: 20px; width: 1px; height: calc(var(--cord) + 37px); background: var(--black); transform: translateX(-50%); }
.tag-card {
  position: relative; width: 100%; max-width: 300px; margin-top: var(--cord); aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .9rem; padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--white); clip-path: polygon(22% 0, 78% 0, 100% 13%, 100% 100%, 0 100%, 0 13%);
}
.tag-hole { position: absolute; left: 50%; top: 22px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 3px solid var(--red); background: var(--white); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.tag .value { font-size: clamp(2.5rem, 1rem + 5.4vw, 5.5rem); font-weight: 700; letter-spacing: -.065em; line-height: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag .value sup { color: var(--red); font-size: .45em; vertical-align: top; position: relative; top: .1em; margin-left: .04em; letter-spacing: -.04em; }
.tag .what { font-size: var(--fs-small); font-weight: 500; letter-spacing: -.01em; padding-top: .9rem; border-top: 1px solid var(--line); }
.js .tag { will-change: transform; }

/* ---------- Polaroid line (home MICE): prints pegged to a sagging string, see main.js ---------- */
.pl { margin-top: var(--space-sm); }
.pl-print { background: var(--white); padding: 10px 10px 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 24px 40px -20px rgba(0, 0, 0, .45); }
.pl-shot { aspect-ratio: 3 / 2; overflow: hidden; background: var(--line); }
.pl-shot img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pl-note { height: 52px; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: var(--fs-small); letter-spacing: -.01em; }
.pl-peg { position: absolute; left: 50%; top: 0; width: 10px; height: 28px; margin-left: -5px; border-radius: 2px; background: var(--red); box-shadow: 0 2px 3px rgba(0, 0, 0, .25); }
.pl-string path { fill: none; stroke: var(--black); stroke-width: 1; }
.pl-cap { display: grid; gap: 1.25rem; align-content: start; max-width: 34rem; }
.pl-cap .text-link { justify-self: start; }
.pl-controls { display: flex; align-items: center; gap: .75rem; }
.pl-count { margin-right: .75rem; font-size: var(--fs-small); font-weight: 500; color: var(--soft); font-variant-numeric: tabular-nums; }
.pl-count b { color: var(--black); font-weight: 600; }
.pl-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--black); background: transparent;
  display: grid; place-items: center; cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.pl-btn svg { width: 16px; height: 16px; }
.pl-btn:hover { background: var(--black); color: var(--white); }

/* Without JS: a scrollable row of prints, then all four descriptions */
.no-js .pl-string, .no-js .pl-controls, .no-js .pl-peg { display: none; }
.no-js .pl-cards { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2rem; }
.no-js .pl-card { flex: 0 0 min(80%, 440px); scroll-snap-align: start; }
.no-js .pl-caps { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }

/* With JS: absolutely placed prints driven by main.js */
.js .pl { position: relative; overflow: hidden; height: 760px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline-offset: -2px; }
.js .pl[data-drag] { cursor: grabbing; }
.js .pl-string { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.js .pl-card { position: absolute; left: 0; top: 0; width: var(--pl-cw, 360px); transform-origin: 50% 0; will-change: transform; }
.js .pl-print { margin-top: 12px; transition: transform .5s var(--ease-out); }
.js .pl-card:not(.is-on) .pl-print { transform: scale(.88); }
.js .pl-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; cursor: default; }
.js .pl-caps { display: grid; flex: 1; min-width: 0; }
.js .pl-cap { grid-area: 1 / 1; visibility: hidden; }
.js .pl-cap.is-on { visibility: visible; }
.js .pl-cap.is-on > * { animation: pl-in .6s var(--ease-out) both; }
.js .pl-cap.is-on > :nth-child(2) { animation-delay: .06s; }
.js .pl-cap.is-on > :nth-child(3) { animation-delay: .12s; }
@keyframes pl-in { from { transform: translateY(24px); opacity: 0; } }
@media (max-width: 699px) {
  .js .pl-bar { flex-direction: column; align-items: stretch; gap: 1.5rem; }
}
.reduce-motion .pl-cap.is-on > * { animation: none; }
/* Home MICE prints: all four hang on one string per row (4 across from 900px, 2x2 below); each swings in on arrival */
.prints { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(3rem, 2rem + 3vw, 4.5rem); }
.print-item { position: relative; display: grid; gap: 1.75rem; align-content: start; padding: 0 clamp(.5rem, .2rem + 1.2vw, 1.25rem); }
.print-item::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--black); }
.print-item:nth-child(4n+1) { --tilt: -2.2deg; }
.print-item:nth-child(4n+2) { --tilt: 1.6deg; }
.print-item:nth-child(4n+3) { --tilt: -1.2deg; }
.print-item:nth-child(4n+4) { --tilt: 2deg; }
.print-hang { position: relative; z-index: 1; padding-top: 14px; transform-origin: 50% 14px; transform: rotate(var(--tilt, 0deg)); transition: transform 1.4s cubic-bezier(.34, 1.4, .5, 1), opacity .6s; }
.print-hang .pl-peg { z-index: 1; }
.print-hang .pl-note { margin: 0; font-size: var(--fs-small); }
.print-cap { display: grid; gap: 1rem; align-content: start; }
.print-cap .text-link { justify-self: start; }
.js .print-item:not(.is-drawn) .print-hang { opacity: 0; transform: rotate(calc(var(--tilt, 0deg) * -5)) translateY(-10px); }
.print-item:nth-child(2) .print-hang { transition-delay: .12s; }
.print-item:nth-child(3) .print-hang { transition-delay: .24s; }
.print-item:nth-child(4) .print-hang { transition-delay: .36s; }
@media (hover: hover) { .print-item:hover .print-hang { transform: rotate(0deg) translateY(4px); transition-duration: .9s; transition-delay: 0s; } }
.reduce-motion .print-hang { transition: none; }
@media (max-width: 599px) { .print-cap .soft, .print-cap .text-link { font-size: var(--fs-small); } .print-hang .pl-print { padding: 6px 6px 0; } .print-hang .pl-note { height: 40px; } }
@media (min-width: 900px) { .prints { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pl-view { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.pl-view svg { width: 12px; height: 12px; }
.js .pl--zoom .pl-card.is-on { cursor: zoom-in; }

/* Memory viewer (Life page): the centred print enlarged over a dimmed page, see main.js */
.viewer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); color: var(--white); }
.viewer[hidden] { display: none; }
.viewer-backdrop { position: absolute; inset: 0; background: rgba(11, 9, 7, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: zoom-out; }
.viewer-fig { position: relative; display: grid; gap: clamp(1rem, 2.5vh, 1.75rem); justify-items: center; margin: 0; }
.viewer-print { background: var(--white); padding: clamp(6px, 1vw, 12px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); transform-origin: 50% 50%; will-change: transform; touch-action: pan-y; }
.viewer-print img { display: block; width: min(92vw, 1500px, calc((100svh - 13rem) * 1.5)); aspect-ratio: 3 / 2; object-fit: contain; background: #EEE; }
.viewer-cap { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.viewer-cap .h3 { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); }
.viewer-cap p { color: var(--soft-on-dark); max-width: 52ch; font-size: var(--fs-small); margin-top: .35rem; }
.viewer .pl-count { color: var(--soft-on-dark); }
.viewer .pl-count b { color: var(--white); }
.viewer .pl-btn { border-color: rgba(255, 255, 255, .6); color: var(--white); }
.viewer .pl-btn:hover { background: var(--white); color: var(--black); }
.viewer-close {
  position: absolute; z-index: 1; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); min-height: 44px; padding: 0 1rem;
  display: inline-flex; align-items: center; gap: .5rem; background: none; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  color: var(--white); font: inherit; font-weight: 500; cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.viewer-close:hover { background: var(--white); color: var(--black); }
.viewer-close span { font-size: 1.3em; line-height: 1; }
.reduce-motion .pl-print { transition: none; }

/* ---------- Chapters (MICE letters, service features) ---------- */
.chapter { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); padding-block: var(--space-sm); border-top: 1px solid var(--line); }
.chapter-letter {
  font-size: clamp(9rem, 4rem + 22vw, 24rem); font-weight: 800; letter-spacing: -.07em; line-height: .76; color: var(--red);
}
.chapter-text { display: grid; gap: 1.5rem; align-content: start; max-width: 30rem; }
.chapter .photo { aspect-ratio: 4 / 3; }
.chapter-title { max-width: 10ch; }
@media (min-width: 1024px) {
  .chapter { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 8vw; }
  .chapter .photo { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  .chapter--logo .photo { aspect-ratio: 2 / 1; }
  .chapter--flip > :first-child { grid-column: 2; grid-row: 1; }
  .chapter--flip .chapter-text { grid-column: 1; grid-row: 1; }
  .chapter--flip .chapter-letter { text-align: right; }
}

.ticks { display: grid; gap: .9rem; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; }
.ticks li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--red); margin-top: .62em; }

/* ---------- Destinations ---------- */
.dest-list { display: grid; gap: clamp(4rem, 2rem + 6vw, 9rem) clamp(1.5rem, 4vw, 5rem); }
.dest { display: grid; gap: 1.25rem; text-decoration: none; align-content: start; }
.dest .photo { aspect-ratio: 4 / 5; }
.dest .photo img { transition: transform 1.4s var(--ease-out); }
.dest:hover .photo img, .dest:focus-visible .photo img { transform: scale(1.04); }
.dest-name { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dest-name h2, .dest-name h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.dest p { max-width: 36ch; }
/* MICE page frames use the exact logo outline, so they keep close to its ~1.48:1 */
.dest--logo .photo { aspect-ratio: 3 / 2; }
@media (min-width: 800px) {
  .dest-list { grid-template-columns: 1fr 1fr; }
  .dest:nth-child(even) { margin-top: clamp(4rem, 12vw, 14rem); }
}

/* ---------- Holidays: journeys ([data-journey], main.js) ----------
   Each package is a route: a hairline with a dot per day. As the page scrolls, a red line
   fills down it, each stop lights when reached and its travel icon draws in. On desktop the
   photo side stays pinned and shows the day and place you've reached. No JS: the plain
   route with every stop lit. Reduced motion: the finished route. */
.journey { display: grid; gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--line); }
.statement + .journey, .atlas + .journey { margin-top: var(--space-sm); }
/* ---------- Journey atlas (Holidays) ----------
   Region tabs set in large type, a numbered list per region whose rows rise in and draw their
   hairlines, and on wide screens a sticky preview: the trip's photo in a curve, its length, its name
   rolling in and its stops joined by a red line. Hover or focus previews; a click shows the journey. */
.atlas { margin-top: var(--space-sm); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.atlas-tabs { display: flex; flex-wrap: wrap; gap: .75rem clamp(1.5rem, 1rem + 3vw, 4rem); border-bottom: 1px solid var(--line); }
.atlas-tab {
  position: relative; padding: 0 0 1rem; border: 0; background: none; color: var(--soft); cursor: pointer;
  font: inherit; font-size: clamp(1.45rem, 1rem + 2.2vw, 3.25rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; transition: color .5s;
}
.atlas-tab sup { margin-left: .3em; font-size: .3em; font-weight: 500; letter-spacing: 0; vertical-align: .9em; font-variant-numeric: tabular-nums; transition: color .5s; }
.atlas-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.atlas-tab:hover { color: var(--black); }
.atlas-tab[aria-selected="true"] { color: var(--black); }
.atlas-tab[aria-selected="true"] sup { color: var(--red-ink); }
.atlas-tab[aria-selected="true"]::after { transform: scaleX(1); }
.atlas-body { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.atlas-panels { display: grid; gap: 3rem; }
.js .atlas-panels { gap: 0; }
.js .atlas-panel { grid-area: 1 / 1; visibility: hidden; }
.js .atlas-panel.is-on { visibility: visible; }
.js .atlas-region { display: none; }
.atlas-region { margin-bottom: .75rem; }
.atlas-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.atlas-list li { position: relative; }
.atlas-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; }
.atlas-list a {
  position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-areas: "num name len" ". route route";
  column-gap: 1rem; row-gap: .35rem; padding-block: 1.15rem 1.2rem; color: inherit; text-decoration: none; outline-offset: 4px;
}
.atlas-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.atlas-num { grid-area: num; padding-top: .55em; color: var(--soft); font-size: var(--fs-small); font-variant-numeric: tabular-nums; transition: color .4s; }
.atlas-name { grid-area: name; font-size: clamp(1.4rem, 1rem + 1.25vw, 2.15rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; transition: transform .6s var(--ease-out), color .4s; }
.atlas-len { grid-area: len; align-self: center; color: var(--soft); font-size: var(--fs-small); font-variant-numeric: tabular-nums; transition: color .4s; }
.atlas-route { grid-area: route; color: var(--soft); font-size: var(--fs-small); line-height: 1.5; transition: color .4s, transform .6s var(--ease-out); }
.atlas-list a:is(:hover, :focus-visible, .is-hot) .atlas-name { transform: translateX(.6rem); }
.atlas-list a:is(:hover, :focus-visible, .is-hot) .atlas-route { color: var(--black); transform: translateX(.6rem); }
.atlas-list a:is(:hover, :focus-visible, .is-hot) .atlas-num, .atlas-list a:is(:hover, :focus-visible, .is-hot) .atlas-len { color: var(--red-ink); }
.atlas-list a:is(:hover, :focus-visible, .is-hot)::after { transform: scaleX(1); }
.atlas-list a[aria-current="true"] .atlas-name { color: var(--red-ink); }
.atlas-list a[aria-current="true"]::after { transform: scaleX(1); }
/* Arrival and every region change: rows rise one by one while their hairlines draw across */
.js .atlas:not(.is-live) .atlas-list li { opacity: 0; }
.js .atlas.is-live .atlas-panel.is-on li { animation: pl-in .8s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
.js .atlas.is-live .atlas-panel.is-on li::after { animation: atlas-rule 1.1s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms + .1s); }
@keyframes atlas-rule { from { transform: scaleX(0); } }
@media (max-width: 599px) { .atlas-tabs { column-gap: 1.1rem; } .atlas-tab { font-size: 1.2rem; padding-bottom: .8rem; } .atlas-list a { grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: .75rem; } }
.atlas-preview { display: none; }
@media (min-width: 1024px) {
  .js .atlas-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .js .atlas-preview { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: 1.5rem; }
}
.atlas-frame { position: relative; aspect-ratio: 4 / 3; background: var(--line); }
.atlas-frame img { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .9s var(--ease-in-out), transform 1.8s var(--ease-out); }
.atlas-frame img.is-on { z-index: 1; opacity: 1; transform: none; }
.atlas-meta { display: grid; gap: .6rem; }
.atlas-go { justify-self: start; margin-top: 1rem; }
.atlas-p-name { overflow: hidden; padding-bottom: .06em; font-size: clamp(2rem, 1rem + 2.2vw, 3.4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.atlas-p-name span { display: block; }
.atlas-p-name span.is-roll { animation: jn-in .8s var(--ease-out) both; }
.atlas-stops { display: flex; flex-wrap: wrap; align-items: center; row-gap: .5rem; margin: .4rem 0 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.atlas-stops li { display: inline-flex; align-items: center; animation: pl-in .6s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + .15s); }
.atlas-stops li::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: var(--red); }
.atlas-stops li + li::before { margin-left: 0; }
.atlas-stops li:not(:last-child)::after { content: ""; flex: none; width: 1.5rem; height: 1px; margin: 0 .6rem; background: var(--red); transform-origin: left; animation: atlas-rule .6s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + .3s); }
.reduce-motion .atlas-list li, .reduce-motion .atlas-list li::after, .reduce-motion .atlas-stops li, .reduce-motion .atlas-stops li::after, .reduce-motion .atlas-p-name span { animation: none !important; opacity: 1; }
.reduce-motion .atlas-frame img { transition: none; }
.js .journey.is-off { display: none; }
.js .journey.is-shown .journey-side, .js .journey.is-shown .journey-main { animation: pl-in .8s var(--ease-out) both; }
.js .journey.is-shown .journey-main { animation-delay: .08s; }
.reduce-motion .journey.is-shown .journey-side, .reduce-motion .journey.is-shown .journey-main { animation: none; }
.journey { scroll-margin-top: var(--header-h); }
.journey-side { display: grid; gap: 1.5rem; align-content: start; }
.journey-photo { position: relative; aspect-ratio: 4 / 3; }
/* Stop photos stack above the package photo; the one for the day reached fades in (main.js) */
.journey-photo > img { position: absolute; inset: 0; }
.journey-photo > img + img { opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease-in-out), transform 1.8s var(--ease-out); }
.journey-photo > img + img.is-on { opacity: 1; transform: none; }
.journey-head { display: grid; gap: .5rem; }
.journey-name { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.045em; line-height: .98; }
.journey-now { display: none; }
.journey-main { display: grid; gap: var(--space-sm); align-content: start; }
@media (min-width: 1024px) {
  .journey { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8vw; align-items: start; }
  .journey-side { position: sticky; top: calc(var(--header-h) + 2rem); }
  .journey-photo { aspect-ratio: auto; height: min(46svh, 520px); }
  .journey--flip .journey-side { order: 2; }
  .js .journey.is-live .journey-now { display: flex; align-items: baseline; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
}
.jn-day { flex: none; display: inline-flex; gap: .35em; overflow: hidden; font-size: var(--fs-small); font-weight: 500; color: var(--soft); }
.jn-day b { display: inline-block; color: var(--red-ink); font-weight: 600; font-variant-numeric: tabular-nums; animation: jn-in .6s var(--ease-out) both; }
.jn-place { display: block; overflow: hidden; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; padding-bottom: .08em; }
.jn-place > span { display: block; animation: jn-in .8s var(--ease-out) both; }
@keyframes jn-in { from { transform: translateY(105%); } }

.route { position: relative; padding-left: 3rem; }
.route-line { position: absolute; left: 7px; top: .95rem; bottom: 4rem; width: 1px; background: var(--line); }
.route-fill { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(var(--p, 1)); }
.route-tip { display: none; position: absolute; z-index: 2; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -17.5px; transform: translateY(calc(var(--p, 0) * var(--len, 0px))); }
.route-tip svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(180deg); transition: transform .7s var(--ease-out); }
.route-tip path { fill: var(--red); stroke: var(--white); stroke-width: 3; stroke-linejoin: round; paint-order: stroke; }
.route.is-up .route-tip svg { transform: rotate(0deg); }
.route.is-live .route-tip { display: block; }
.stops { display: grid; }
.stop { position: relative; display: grid; gap: .6rem; padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.stop:last-child { padding-bottom: 0; }
.stop-dot {
  position: absolute; left: calc(7.5px - 3rem); top: .3rem; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%;
  background: var(--red); border: 1px solid var(--red); transition: background .5s, border-color .5s, transform .6s var(--ease-out), box-shadow .6s;
}
.stop-day { font-size: var(--fs-small); font-weight: 600; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.stop-place { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; transition: color .6s, transform var(--t-med) var(--ease-out); }
.stop-mode { flex: none; width: .95em; height: .95em; }
.stop-mode path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stop > .soft { max-width: 40ch; }
/* With JS, stops wait in grey until the red line reaches them */
.route.is-live .stop-dot { background: var(--white); border-color: var(--black); }
.route.is-live .stop.is-past .stop-dot { background: var(--red); border-color: var(--red); }
.route.is-live .stop.is-now .stop-dot { transform: scale(1.3); box-shadow: 0 0 0 7px rgba(226, 50, 58, .14); }
.route.is-live .stop:not(.is-past) .stop-place { color: var(--soft); }
.route.is-live .stop-mode path { stroke-dasharray: 1; transition: stroke-dashoffset 1.3s var(--ease-in-out) .15s; }
.route.is-live .stop:not(.is-past) .stop-mode path { stroke-dashoffset: 1; }
@media (hover: hover) { .stop:hover .stop-place { transform: translateX(6px); } }
.journey-incl { display: grid; gap: 1.25rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.journey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 1rem; }

/* ---------- Holidays: start with a feeling ([data-moods], main.js) ----------
   Four big words as tabs; the chosen one is underlined in red, its photo pops into its curve
   and the places rise in one by one. No JS: all four stacked. */
.moods { margin-top: var(--space-sm); }
.mood-tabs { display: flex; flex-wrap: wrap; gap: .25rem clamp(1.25rem, 3vw, 3.25rem); margin-bottom: var(--space-sm); }
.mood-tab {
  position: relative; padding: .2rem 0 .7rem; background: none; border: 0; cursor: pointer; color: var(--soft);
  font-size: clamp(2.1rem, 1rem + 4.4vw, 5.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; transition: color var(--t-med);
}
.mood-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease-out); }
.mood-tab:hover, .mood-tab[aria-selected="true"] { color: var(--black); }
.mood-tab[aria-selected="true"]::after { transform: scaleX(1); transform-origin: left; }
.mood-panel { display: grid; gap: var(--space-sm); outline-offset: 8px; }
.mood-panel + .mood-panel { margin-top: var(--space); }
.mood-photo { aspect-ratio: 3 / 2; }
.mood-text { display: grid; gap: 1.75rem; align-content: start; }
.mood-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.mood-places { border-top: 1px solid var(--line); }
.mood-places a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 1.05rem; border-bottom: 1px solid var(--line);
  text-decoration: none; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -.015em; transition: color var(--t-fast), padding var(--t-med) var(--ease-out);
}
.mood-places a .label { flex: none; transition: color var(--t-fast); }
.mood-places a:hover { color: var(--red-ink); padding-left: .6rem; }
.mood-places a:hover .label { color: var(--red-ink); }
@media (min-width: 900px) { .mood-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 6vw; align-items: center; } }
.moods.is-live .mood-panels { display: grid; }
.moods.is-live .mood-panel { grid-area: 1 / 1; margin-top: 0; visibility: hidden; }
.moods.is-live .mood-panel.is-on { visibility: visible; }
.moods.is-live .mood-title { display: none; }
.moods.is-live .mood-panel.is-on .lead, .moods.is-live .mood-panel.is-on .mood-places li { animation: pl-in .7s var(--ease-out) both; }
.moods.is-live .mood-panel.is-on .mood-places li { animation-delay: calc(.1s + var(--i) * .06s); }
.reduce-motion .mood-panel .lead, .reduce-motion .mood-places li { animation: none !important; }

/* ---------- Holidays: the person who plans it ---------- */
.desk { display: grid; gap: var(--space-sm); align-items: center; }
.desk-photo { aspect-ratio: 4 / 3; max-width: 620px; }
.desk-text { display: grid; gap: 2.5rem; align-content: start; }
.desk-text .h2 { max-width: 13ch; }
@media (min-width: 900px) { .desk { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 6vw; } }

/* ---------- Engagement activities (Life page) ----------
   As an item arrives (main.js adds .is-drawn) a red hairline draws under the photo, then the
   caption settles in. Hover: the number turns red and the title eases right. */
.act-rule { display: block; height: 1px; background: var(--red); transform-origin: left; }
.activity h3 { display: flex; align-items: baseline; gap: .9rem; transition: transform var(--t-med) var(--ease-out); }
.act-num { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; color: var(--soft); font-variant-numeric: tabular-nums; transition: color var(--t-med); }
.js .activity .act-rule { transform: scaleX(0); transition: transform 1.4s var(--ease-out); }
.js .activity .dest-name, .js .activity > p { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease-out) .35s, transform .9s var(--ease-out) .35s; }
.js .activity > p { transition-delay: .5s; }
.js .activity.is-drawn .act-rule { transform: none; }
.js .activity.is-drawn .dest-name, .js .activity.is-drawn > p { opacity: 1; transform: none; }
@media (hover: hover) {
  .activity:hover .act-num { color: var(--red-ink); }
  .activity:hover h3 { transform: translateX(6px); }
}

/* ---------- Service list ---------- */
.services { border-top: 1px solid var(--line); }
.service {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); border-bottom: 1px solid var(--line); text-decoration: none;
}
.service-name { font-size: clamp(2.25rem, 1rem + 5vw, 6.5rem); font-weight: 700; letter-spacing: -.05em; line-height: .95; transition: color var(--t-fast); }
.service .arrow { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--black); display: grid; place-items: center; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.service .arrow svg { width: 18px; height: 18px; }
.service:hover .service-name, .service:focus-visible .service-name { color: var(--red); }
.service:hover .arrow { background: var(--red); border-color: var(--red); color: var(--white); }
.service .peek { display: none; }
/* Row hairlines draw in from the left as rows arrive (main.js adds .is-drawn); a hovered row's line darkens */
.js .service, .js .step, .js .principle, .js .board-row { border-bottom-color: transparent; }
.js .principle { position: relative; }
.js .service::after, .js .step::after, .js .principle::after, .js .board-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out), background-color var(--t-med);
}
.js .service.is-drawn::after, .js .step.is-drawn::after, .js .principle.is-drawn::after, .js .board-row.is-drawn::after { transform: scaleX(1); }
.js .board-row.is-hot::after { background: var(--black); }
.page-ember .principle:hover::after { background: var(--amber); }
.js .service:hover::after { background: var(--black); }
@media (hover: hover) and (min-width: 1024px) {
  /* Positioned and animated by main.js: grows from the cursor in a curved shape */
  .service .peek {
    display: block; position: absolute; z-index: 2; left: 0; top: 0; width: 24vw; max-width: 380px; aspect-ratio: 4 / 3;
    pointer-events: none; opacity: 0;
  }
  .no-js .service:hover .peek { opacity: 1; left: 60%; top: 10%; }
}

/* ---------- Process ---------- */
.process-cover { position: relative; height: clamp(420px, 80svh, 900px); overflow: hidden; }
.process-cover .photo { position: absolute; inset: -8% 0; }
.process-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6)); }
.process-cover .wrap { position: absolute; z-index: 1; left: 0; right: 0; bottom: var(--space-sm); }
.process-cover .h2 { color: var(--white); max-width: 12ch; }
.steps { list-style: none; padding: 0; }
.step { position: relative; display: grid; gap: 1rem; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); border-bottom: 1px solid var(--line); }
.step .num { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 600; color: var(--red-ink); }
.step h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.step p { max-width: var(--measure); }
@media (min-width: 900px) { .step { grid-template-columns: 8rem 1fr 1fr; align-items: baseline; gap: 2rem; } }

/* ---------- Why Adiona: a quiet list ----------
   As a row arrives (main.js adds .is-drawn) its hairline draws, and the title's tracking settles
   while it deepens from grey to black. On hover the dot stretches into a red dash, the title
   eases right and the description darkens. Nothing flips, fades up or loops. */
.board { margin-top: var(--space-sm); border-top: 1px solid var(--line); }
.board-row {
  position: relative; display: grid; grid-template-columns: 1.75rem 1fr; row-gap: .9rem; align-items: center;
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem); border-bottom: 1px solid var(--line);
}
.board-row > p { grid-column: 2; max-width: var(--measure); transition: color var(--t-med); }
.board-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; transition: transform var(--t-med) var(--ease-out); }
.board-light { align-self: center; width: 8px; height: 8px; border-radius: 4px; border: 1px solid var(--black); transition: width var(--t-med) var(--ease-out), background var(--t-med), border-color var(--t-med); }
.js .board-row .board-title { letter-spacing: .02em; color: var(--soft); transition: letter-spacing 1.6s var(--ease-out), color 1.6s var(--ease-out), transform var(--t-med) var(--ease-out); }
.js .board-row.is-drawn .board-title { letter-spacing: -.035em; color: var(--black); }
@media (hover: hover) {
  .board-row:hover .board-light { width: 22px; background: var(--red); border-color: var(--red); }
  .board-row:hover .board-title { transform: translateX(8px); }
  .board-row:hover > p { color: var(--black); }
}
@media (min-width: 900px) {
  .board-row { grid-template-columns: 1.75rem 1.2fr 1fr; }
  .board-row > p { grid-column: 3; padding-left: 2rem; }
}

/* ---------- Reviews: one quote at a time (main.js); stacked without JS ---------- */
.quotes { display: grid; gap: var(--space-sm); }
.quote { display: grid; gap: 2rem; align-content: start; }
.quote p { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.75rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; max-width: 24ch; text-wrap: balance; }
.quote p::before { content: "“"; color: var(--red); }
.quote figcaption { display: grid; gap: .25rem; }
.quote figcaption b { font-weight: 600; }
.js .quotes { grid-template-areas: "q" "bar"; }
.js .quote { grid-area: q; visibility: hidden; }
.js .quote.is-on { visibility: visible; }
.js .quote.is-on > * { animation: pl-in .7s var(--ease-out) both; }
.js .quote.is-on > :nth-child(2) { animation-delay: .08s; }
.reduce-motion .quote.is-on > * { animation: none; }
.quotes-bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.rating { display: flex; align-items: baseline; gap: .75rem; }
.rating b { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.rating b::after { content: "★"; color: var(--red); font-size: .5em; vertical-align: top; margin-left: .1em; }
.no-js .quotes-bar .pl-controls { display: none; }
/* Reviews micro-motion: words rise one by one from their masks, the red opening mark drops in with a little tip,
   the counter rolls and the pressed arrow nudges its way; the rating's star pops when the section arrives */
.qw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.qw > span { display: inline-block; }
.js .quote.is-on .qw > span { animation: qw-in .9s var(--ease-out) both; animation-delay: calc(var(--k) * 28ms + .05s); }
@keyframes qw-in { from { transform: translateY(105%) rotate(calc(var(--dir, 1) * 3deg)); } }
.quote p::before { display: inline-block; transform-origin: 50% 80%; }
.js .quote.is-on p::before { animation: q-mark .8s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes q-mark { from { transform: translateY(-.4em) rotate(-18deg) scale(.4); opacity: 0; } }
.js .quote.is-on > blockquote { animation: none; }
.js .quote.is-on > figcaption { animation-delay: .35s; }
.pl-count b { display: inline-block; }
.pl-count b.is-roll { animation: q-roll .5s var(--ease-out); }
@keyframes q-roll { from { transform: translateY(calc(var(--dir, 1) * 70%)); opacity: 0; } }
.pl-btn svg.is-roll { animation: q-nudge .45s var(--ease-out); }
@keyframes q-nudge { 40% { transform: translateX(calc(var(--dir, 1) * 6px)); } }
@media (hover: hover) { .quotes .pl-btn[data-q-step="1"]:hover svg { transform: translateX(3px); } .quotes .pl-btn[data-q-step="-1"]:hover svg { transform: translateX(-3px); } .quotes .pl-btn svg { transition: transform .4s var(--ease-out); } }
.js .rating b::after { display: inline-block; transform: scale(0) rotate(-120deg); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) .2s; }
.js .rating.is-in b::after { transform: none; }
.reduce-motion .quote p::before, .reduce-motion .pl-count b, .reduce-motion .pl-btn svg { animation: none !important; }
.reduce-motion .rating b::after { transform: none; transition: none; }
/* The arrows sit right under the quote on phones and right beside it from 768px (client, 2026-10-23); the rating stays below */
.js .quotes { grid-template-areas: "q" "ctl" "bar"; row-gap: 2rem; }
.js .quotes-bar { display: contents; }
.js .quotes-bar .rating { grid-area: bar; padding-top: 2rem; border-top: 1px solid var(--line); }
.js .quotes-bar .pl-controls { grid-area: ctl; justify-self: start; }
@media (min-width: 768px) {
  .js .quotes { grid-template-columns: minmax(0, max-content) 1fr; grid-template-areas: "q ctl" "bar bar"; column-gap: clamp(2rem, 1rem + 3vw, 4rem); row-gap: var(--space-sm); }
  .js .quotes-bar .pl-controls { align-self: center; }
}

/* ---------- Client logos ---------- */
.clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 4vw, 4rem); margin-top: var(--space-sm); align-items: center; }
.clients li { display: grid; place-items: center; }
.clients img { width: 100%; max-width: 190px; transition: transform var(--t-med) var(--ease-out); }
@media (hover: hover) { .clients li:hover img { transform: scale(1.06); } }
@media (min-width: 600px) { .clients { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .clients { grid-template-columns: repeat(5, 1fr); } }

/* ---------- About: mission/vision, milestones, team, awards ---------- */
.aims { display: grid; gap: var(--space-sm); }
.aim { display: grid; gap: 1.25rem; }
.aim .h3 { max-width: 22ch; text-wrap: balance; }
@media (min-width: 900px) { .aims { grid-template-columns: 1fr 1fr; gap: 6vw; } }

.milestones .step h3 { color: var(--red); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .milestones .step { grid-template-columns: 1fr 2fr; } }

/* Milestones as a pinned scroll stage (main.js adds .is-live): an odometer year, the story
   line rising from a mask, and a track whose red line fills with scroll and lights each year */
.timeline { margin-top: var(--space-sm); }
.tl-stage { display: none; }
.timeline.is-live .tl-stage {
  display: grid; grid-template-rows: auto 1fr auto auto; align-content: center; gap: clamp(1.5rem, 4vh, 3rem);
  height: calc(100svh - var(--header-h)); padding-block: clamp(1.5rem, 5vh, 4rem);
}
.timeline.is-live .milestones { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tl-count { font-size: var(--fs-small); font-weight: 500; color: var(--soft); font-variant-numeric: tabular-nums; }
.tl-count b { color: var(--white); font-weight: 600; }
.tl-year {
  display: flex; align-self: end; color: var(--red); font-weight: 800; letter-spacing: -.06em; line-height: 1;
  font-size: clamp(6rem, 2rem + 19vw, 19rem); font-variant-numeric: tabular-nums;
}
.tl-digit { display: block; height: .86em; overflow: hidden; }
.tl-reel { display: flex; flex-direction: column; will-change: transform; }
.tl-reel span { display: block; height: .86em; line-height: .86em; text-align: center; }
.tl-texts { display: grid; align-self: start; }
.tl-text { grid-area: 1 / 1; max-width: 17ch; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; opacity: 0; }
.tl-track { position: relative; height: 64px; margin-inline: 6px; }
.tl-line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.tl-fill { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; }
.tl-tick {
  position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: .75rem;
  padding: 0; background: none; border: 0; color: var(--soft); cursor: pointer; font: inherit;
}
.tl-dot {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--soft); background: #0B0907;
  transition: background var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.tl-label { font-size: var(--fs-small); font-weight: 500; font-variant-numeric: tabular-nums; transition: color var(--t-med); }
.tl-tick.is-past .tl-dot { background: var(--red); border-color: var(--red); transform: scale(.6); }
.tl-tick.is-on .tl-dot { background: var(--red); border-color: var(--red); transform: scale(1.25); box-shadow: 0 0 0 6px rgba(226, 50, 58, .18), 0 0 26px 4px rgba(255, 170, 90, .35); }
.tl-tick.is-on .tl-label { color: var(--white); }
@media (hover: hover) { .tl-tick:hover .tl-dot { transform: scale(1.4); border-color: var(--white); } .tl-tick:hover .tl-label { color: var(--white); } }
/* Phones: only the active year is labelled, so seven ticks fit */
@media (max-width: 699px) { .tl-tick:not(.is-on) .tl-label { opacity: 0; } }
@media (min-width: 900px) {
  .timeline.is-live .tl-stage { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; column-gap: 6vw; }
  .tl-count { grid-column: 1 / -1; }
  .tl-year { align-self: center; }
  .tl-texts { align-self: center; }
  .tl-track { grid-column: 1 / -1; }
}

.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(1rem, 3vw, 3rem); margin-top: var(--space-sm); }
.person { display: grid; gap: .35rem; align-content: start; }
.person .person-photo { aspect-ratio: 1 / 1; margin-bottom: 1rem; border-radius: clamp(18px, 2.2vw, 32px); }
.person-photo img { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .person:hover .person-photo img { transform: scale(1.04); } }
.reduce-motion .person-photo img { transition: none; }
.person h3 { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.person-initials { display: grid; place-items: center; background: var(--red); color: var(--white); font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); font-weight: 700; letter-spacing: -.05em; }
@media (min-width: 700px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .team { grid-template-columns: repeat(4, 1fr); } }

/* Affiliations sit on a white plate so every logo keeps its own colours, on light or dark pages */
ul.affiliations {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1rem, 3vw, 3rem);
  margin-top: var(--space-sm); padding: clamp(4rem, 3rem + 5vw, 7.5rem) clamp(1.5rem, 4vw, 4rem); background: var(--white);
}
.affiliations img { width: clamp(76px, 9vw, 128px); }
/* Awards: transparent cut-outs, so they catch the page's light; hover lifts and warms them */
.awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 3rem); margin-top: var(--space-sm); }
.awards li { display: grid; place-items: center; }
.awards img { width: 100%; transition: transform var(--t-med) var(--ease-out), filter var(--t-med); }
@media (hover: hover) {
  .awards li:hover img { transform: translateY(-8px) scale(1.04); }
  .page-ember .awards li:hover img { filter: drop-shadow(0 0 28px rgba(255, 170, 90, .35)); }
}
@media (min-width: 900px) { .awards { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Careers ---------- */
/* One open role per block: the essentials and Apply on the left, the duties and requirements on the right */
.job { display: grid; gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); }
.job-head { display: grid; gap: 1.25rem; align-content: start; }
.job-kicker { color: var(--red-ink); font-weight: 600; }
.job .h3 { max-width: 18ch; text-wrap: balance; }
.job-intro { max-width: 46ch; }
.job-facts { display: grid; gap: .9rem; margin: .5rem 0; }
.job-facts div { display: grid; gap: .15rem; }
.job-facts dt { font-size: var(--fs-small); color: var(--soft); }
.job-facts dd { margin: 0; font-weight: 600; }
.job-head .btn { margin-top: .5rem; }
.job-body { display: grid; gap: 1.25rem; align-content: start; }
.job-body h4 { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.02em; }
.job-body h4 + ul { margin-bottom: 1.5rem; }
@media (min-width: 1024px) {
  .job { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 6vw; }
  .job-head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.role { align-items: start !important; }
.role .chapter-text:first-child { gap: .75rem; }

/* ---------- Legal pages ---------- */
.legal { max-width: 72ch; display: grid; gap: 1.25rem; }
.legal h2 { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin-top: 2.5rem; }
.legal h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1rem; }
.legal ul { display: grid; gap: .6rem; padding-left: 1.25rem; margin: 0; }
.legal li::marker { color: var(--red); }
.legal address { font-style: normal; }

/* ---------- Journal ----------
   The index reuses the service list (hairlines draw in, the photo follows the cursor).
   An article has a pinned contents list on desktop: the section you're reading gets a red
   bar and darkens, sections already read stay dark. */
.post-row-text { display: grid; gap: .7rem; }
.post-row-title { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.5rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; max-width: 22ch; text-wrap: balance; transition: color var(--t-fast); }
.post-row:hover .post-row-title, .post-row:focus-visible .post-row-title { color: var(--red); }
.post-row-text .post-kind { color: var(--red-ink); font-weight: 600; }
.blog-page-of { margin-bottom: 1.5rem; }
/* Blog pages: ← Previous · 1 2 3 · Next →. The current page is a black circle; others get a red ring on hover. */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: var(--space-sm); }
.pager ol { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pager ol a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.pager ol a:hover { border-color: var(--red-ink); color: var(--red-ink); }
.pager ol a[aria-current="page"] { background: var(--black); border-color: var(--black); color: var(--white); }
.pager-step { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; font-weight: 500; text-decoration: none; }
.pager-step:last-child { justify-self: end; }
.pager-step svg { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease-out); }
.pager-step[rel="next"]:hover svg { transform: translateX(4px); }
.pager-step[rel="prev"]:hover svg { transform: translateX(-4px); }
.pager-step:hover { color: var(--red-ink); }
@media (max-width: 599px) { .pager { grid-template-columns: 1fr 1fr; } .pager ol { grid-column: 1 / -1; grid-row: 1; justify-content: center; } }
.post-hero { display: grid; gap: 1.5rem; padding-top: clamp(2rem, 1rem + 4vw, 5rem); }
.post-back { justify-self: start; }
.text-link.post-back:hover svg { transform: translateX(-4px); }
.post-title { max-width: 20ch; }
.post-hero .lead { max-width: 40ch; }
.post-photo { margin-top: var(--space-sm); aspect-ratio: 16 / 10; }
.post-credit { justify-self: end; font-size: .75rem; }
@media (min-width: 900px) { .post-photo { aspect-ratio: 2 / 1; } }
.post-body { display: grid; gap: var(--space-sm); padding-block: var(--space-sm) var(--space); }
.toc ol { display: grid; margin-top: 1rem; border-left: 1px solid var(--line); }
.toc a { position: relative; display: block; padding: .5rem 0 .5rem 1.1rem; font-size: var(--fs-small); line-height: 1.35; text-decoration: none; color: var(--soft); transition: color var(--t-med); }
.toc a::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease-out); }
.toc a:hover, .toc a.is-read { color: var(--black); }
.toc a.is-on { color: var(--black); font-weight: 600; }
.toc a.is-on::before { transform: scaleY(1); }
@media (min-width: 1024px) {
  .post-body { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: 6vw; }
  .toc { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; max-height: calc(100svh - var(--header-h) - 4rem); overflow-y: auto; }
}
.article { max-width: 68ch; display: grid; gap: 1.35rem; font-size: 1.1875rem; line-height: 1.72; }
.article h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin-top: 2.5rem; text-wrap: balance; }
.article h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin-top: 1rem; }
.article ul, .article ol { display: grid; gap: .6rem; margin: 0; padding-left: 1.25rem; }
.article li::marker { color: var(--red); }
.article strong { font-weight: 600; }
.table-scroll { overflow-x: auto; }
.article table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.article td, .article th { padding: .85rem 1.25rem .85rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article tr:first-child td { font-weight: 600; border-bottom-color: var(--black); }

/* ---------- Red CTA ---------- */
/* --red-ink, not --red: white body text on it passes AA (5.6:1 vs 4.4:1) */
.cta { background: var(--red-ink); color: var(--white); padding-block: var(--space); }
.cta .display { font-size: clamp(3rem, .8rem + 11vw, 13rem); line-height: .86; }
.cta-row { display: grid; gap: var(--space-sm); }
.cta .lead { color: var(--white); }
@media (min-width: 900px) { .cta-row { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--white); padding-top: var(--space-sm); }
.footer-top { display: grid; gap: var(--space-sm); padding-bottom: var(--space-sm); }
.footer-contact a { display: block; width: fit-content; text-decoration: none; font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }
.footer-contact a:hover { color: var(--red); }
.footer-cols { display: grid; gap: 3rem; }
.footer-cols h2 { font-size: var(--fs-small); font-weight: 500; color: var(--soft-on-dark); margin-bottom: 1rem; }
.footer-cols address { font-style: normal; max-width: 30ch; color: var(--soft-on-dark); }
.footer-cols ul a { text-decoration: none; display: inline-block; padding-block: .35rem; }
.footer-cols ul a:hover { color: var(--red); }
.footer-word { font-size: clamp(4rem, 1rem + 16vw, 21rem); font-weight: 800; letter-spacing: -.07em; line-height: .78; white-space: nowrap; overflow: hidden; padding-top: 2rem; }
.footer-word span { color: var(--red); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); font-size: var(--fs-small); color: var(--soft-on-dark); border-top: 1px solid var(--line-on-dark); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--white); text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 600px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-cols { grid-template-columns: 1.4fr 1.4fr 1fr 1fr; } }

/* ---------- Contact dock (bottom right) ----------
   One black button; on open, WhatsApp / call / email rise out one by one and the icon turns to ×.
   It shows after the first screen and steps aside while the footer is in view (main.js). */
.dock { position: fixed; z-index: 45; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: grid; justify-items: end; gap: .75rem; }
.no-js .dock { position: static; padding: 0 var(--gutter) 2rem; background: var(--black); justify-items: start; }
.dock-menu { display: grid; gap: .5rem; justify-items: end; margin: 0; padding: 0; list-style: none; }
.dock-menu a {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 48px; padding: 0 1.15rem 0 .9rem;
  background: var(--white); color: var(--black); border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
  font-size: var(--fs-small); font-weight: 500; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); transition: background var(--t-fast), color var(--t-fast);
}
.dock-menu a:hover { background: var(--black); color: var(--white); }
.dock-ico { display: grid; place-items: center; width: 20px; height: 20px; color: var(--red-ink); transition: color var(--t-fast); }
.dock-menu a:hover .dock-ico { color: var(--white); }
.dock-ico svg { width: 20px; height: 20px; }
.dock-btn {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--black); color: var(--white); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 30px -10px rgba(0, 0, 0, .5);
  transition: background var(--t-fast), transform var(--t-med) var(--ease-out);
}
.dock-btn:hover { background: var(--red-ink); }
.dock-btn svg { position: absolute; width: 22px; height: 22px; transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast); }
.dock-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.dock.is-open .dock-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.dock.is-open .dock-x { opacity: 1; transform: none; }
.js .dock { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .dock.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.js .dock-menu li { opacity: 0; transform: translateY(12px) scale(.96); transform-origin: right center; pointer-events: none; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.js .dock.is-open .dock-menu li { opacity: 1; transform: none; pointer-events: auto; }
.js .dock.is-open .dock-menu li:nth-child(3) { transition-delay: 0s; }
.js .dock.is-open .dock-menu li:nth-child(2) { transition-delay: .05s; }
.js .dock.is-open .dock-menu li:nth-child(1) { transition-delay: .1s; }
.js .dock.is-open .dock-menu li:nth-child(4) { transition-delay: .15s; }
body.menu-open .dock { opacity: 0; pointer-events: none; }
.dock-menu button { display: inline-flex; align-items: center; gap: .7rem; min-height: 48px; padding: 0 1.15rem 0 .9rem; background: var(--white); color: var(--black); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: var(--fs-small); font-weight: 500; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); transition: background var(--t-fast), color var(--t-fast); }
.dock-menu button:hover { background: var(--black); color: var(--white); }

/* ---------- Angel, the site assistant (main.js + api/chat.php) ----------
   A panel that grows out of the contact dock. Questions go to Claude (Haiku) through api/chat.php;
   "take me to..." requests are matched to the page map in the page and open instantly. The
   conversation and open state survive page changes (sessionStorage), so Angel can walk someone
   through the site. */
/* Angel's mark: a halo above a head, white on red */
.ad-mark { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--red-ink); color: var(--white); }
.ad-mark svg { width: 64%; height: 64%; }
.dock-menu .ad-mark { width: 22px; height: 22px; }
.dock-menu button:hover .ad-mark { background: var(--red); }
.ad {
  position: fixed; z-index: 46; right: max(1rem, env(safe-area-inset-right)); bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 70px);
  width: min(390px, calc(100vw - 2rem)); height: min(580px, calc(100svh - 120px));
  display: grid; grid-template-rows: auto 1fr auto auto; background: var(--white); color: var(--black);
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .06);
  transform-origin: calc(100% - 28px) calc(100% + 40px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s;
  opacity: 0; transform: translateY(14px) scale(.96); visibility: hidden;
}
.ad.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.ad-head { display: flex; align-items: center; gap: .75rem; padding: .9rem .9rem .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.ad-head .ad-mark { width: 34px; height: 34px; }
.ad-title { font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ad-sub { font-size: .8125rem; color: var(--soft); }
.ad-close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: background var(--t-fast); }
.ad-close:hover { background: rgba(0, 0, 0, .06); }
.ad-close svg { width: 18px; height: 18px; }
.ad-log { overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; scroll-behavior: smooth; }
.ad-msg { max-width: 86%; font-size: .9688rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; animation: ad-in .4s var(--ease-out) both; }
.ad-msg--you { align-self: flex-end; background: var(--black); color: var(--white); padding: .6rem .9rem; border-radius: 18px 18px 4px 18px; }
.ad-msg--ad { align-self: flex-start; display: grid; gap: .5rem; }
.ad-msg--ad .text-link { justify-self: start; min-height: 36px; font-size: var(--fs-small); color: var(--red-ink); }
@keyframes ad-in { from { opacity: 0; transform: translateY(8px); } }
/* An enquiry Angel wrote up, waiting for the visitor to send it */
.ad-lead { display: grid; gap: .55rem; padding: .95rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--red-ink); border-radius: 14px; font-size: .9063rem; background: #FAFAFA; }
.ad-lead-title { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--red-ink); }
.ad-lead-who { font-size: .8125rem; color: var(--soft); }
.ad-lead-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.ad-lead-send, .ad-lead-no { min-height: 40px; padding: 0 1rem; border-radius: 999px; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.ad-lead-send { border: 0; background: var(--red-ink); color: var(--white); }
.ad-lead-send:hover { background: var(--black); }
.ad-lead-send:disabled { opacity: .6; cursor: default; }
.ad-lead-no { border: 1px solid var(--line); background: var(--white); }
.ad-lead-no:hover { border-color: var(--black); }
.ad-lead-done { font-weight: 600; font-size: .875rem; }
.ad-lead-done span { color: var(--red-ink); }
.ad-typing { display: inline-flex; gap: 5px; padding: .5rem 0; }
.ad-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: ad-dot 1.1s ease-in-out infinite; }
.ad-typing span:nth-child(2) { animation-delay: .15s; }
.ad-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ad-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.ad-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1.1rem .8rem; }
.ad-chips:empty { display: none; }
.ad-chips button { min-height: 36px; padding: 0 .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: inherit; font-size: .8438rem; font-weight: 500; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.ad-chips button:hover { border-color: var(--red-ink); color: var(--red-ink); }
.ad-form { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem .7rem .7rem 1.1rem; border-top: 1px solid var(--line); }
.ad-form textarea { flex: 1; min-height: 44px; max-height: 120px; padding: .6rem 0; border: 0; resize: none; font: inherit; font-size: 1rem; line-height: 1.4; background: none; }
.ad-form textarea:focus-visible { outline: none; }
.ad-form:focus-within { box-shadow: inset 0 2px 0 var(--red-ink); }
.ad-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--black); color: var(--white); cursor: pointer; display: grid; place-items: center; transition: background var(--t-fast), transform var(--t-med) var(--ease-out); }
.ad-send:hover { background: var(--red-ink); }
.ad-send:disabled { opacity: .35; cursor: default; background: var(--black); }
.ad-send svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.ad-note { padding: 0 1.1rem .8rem; font-size: .75rem; line-height: 1.4; color: var(--soft); }
/* Phones: a sheet across the bottom of the screen; the round button steps aside while it's open */
@media (max-width: 599px) {
  .ad { left: .5rem; right: .5rem; bottom: max(.5rem, env(safe-area-inset-bottom)); width: auto; height: min(78svh, 640px); border-radius: 20px; transform-origin: 50% 100%; }
  body.ad-open .dock { opacity: 0; pointer-events: none; }
}
/* Invitation: a red dot on the round button until Angel is first opened, and once per visit a bubble
   beside it (page-specific line) that springs in, floats gently and leaves after 15 s */
.dock-btn.has-dot::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px var(--white); animation: ad-ping 2.4s var(--ease-out) infinite;
}
@keyframes ad-ping { 0% { box-shadow: 0 0 0 2px var(--white), 0 0 0 2px rgba(226, 50, 58, .5); } 70%, 100% { box-shadow: 0 0 0 2px var(--white), 0 0 0 12px rgba(226, 50, 58, 0); } }
.ad-teaser {
  position: fixed; z-index: 45; right: max(1rem, env(safe-area-inset-right)); bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 70px);
  display: flex; align-items: flex-start; width: min(430px, calc(100vw - 2rem));
  background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--red-ink); border-radius: 24px 24px 6px 24px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .08); transform-origin: calc(100% - 20px) 100%;
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.ad-teaser.is-on { opacity: 1; transform: none; pointer-events: auto; animation: ad-float 3.6s ease-in-out .7s infinite; }
@keyframes ad-float { 50% { transform: translateY(-4px); } }
.ad-teaser-open { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.5rem 0 1.5rem 1.4rem; border: 0; background: none; text-align: left; font: inherit; font-size: 1.125rem; line-height: 1.45; cursor: pointer; color: var(--black); }
.ad-teaser-open b { display: block; margin-bottom: .25rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.ad-teaser-cta { display: flex; width: fit-content; align-items: center; gap: .5rem; margin-top: .9rem; min-height: 44px; padding: 0 1.15rem; border-radius: 999px; background: var(--red-ink); color: var(--white); font-size: .9375rem; font-weight: 600; transition: background var(--t-fast); }
.ad-teaser-cta svg { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease-out); }
.ad-teaser-open:hover .ad-teaser-cta { background: var(--black); }
.ad-teaser-open:hover .ad-teaser-cta svg { transform: translateX(4px); }
.ad-teaser-open .ad-mark { width: 56px; height: 56px; }

.ad-teaser-x { flex: none; width: 44px; height: 44px; margin: .55rem .55rem 0 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--soft); display: grid; place-items: center; }
.ad-teaser-x:hover { background: rgba(0, 0, 0, .06); color: var(--black); }
.ad-teaser-x svg { width: 16px; height: 16px; }
body.menu-open .ad-teaser, body.ad-open .ad-teaser { opacity: 0; pointer-events: none; }
.reduce-motion .ad, .reduce-motion .ad-msg, .reduce-motion .ad-teaser { transition: none; animation: none; }
.reduce-motion .dock-btn.has-dot::after { animation: none; }
.reduce-motion .ad-typing span { animation: none; opacity: .6; }
@media print { .ad { display: none !important; } }
@media print { .dock { display: none !important; } }

/* ---------- Inner page hero ---------- */
.page-hero { padding-top: clamp(3rem, 2rem + 6vw, 8rem); }
.page-hero .display { font-size: clamp(2.6rem, .5rem + 8.8vw, 9.5rem); }
.page-hero .display .line { display: block; overflow: hidden; padding-bottom: .04em; }
.page-hero .display .line > span { display: inline-block; }
.page-hero .display .line:last-child { color: var(--red); }
.page-hero .offset { margin-top: var(--space-sm); display: grid; gap: 2.5rem; }
.page-hero-photo { margin-top: var(--space-sm); aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .page-hero-photo { aspect-ratio: 2 / 1; } }

/* ---------- Text blocks ---------- */
.prose { max-width: 60ch; display: grid; gap: 1.25em; }

.principles { border-top: 1px solid var(--line); }
.principle { display: grid; gap: 1rem; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-bottom: 1px solid var(--line); }
.principle h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.principle p { max-width: var(--measure); }
@media (min-width: 900px) { .principle { grid-template-columns: 1fr 1fr; align-items: baseline; gap: 4rem; } }

/* ---------- Offices ---------- */
.offices { display: grid; gap: var(--space-sm); }
.office { display: grid; gap: 1.25rem; align-content: start; }
.office h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.04em; }
.office address { font-style: normal; max-width: 32ch; }
.map { width: 100%; aspect-ratio: 4 / 3; border: 0; filter: grayscale(1); background: #EEE; margin-top: 1rem; border-radius: 2rem 6rem 2rem 6rem; }
@media (min-width: 900px) { .offices { grid-template-columns: 1fr 1fr; gap: 6vw; } }

/* ---------- Contact ---------- */
.contact-lines { display: grid; gap: 2.5rem; }
.contact-lines a { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); font-weight: 600; letter-spacing: -.04em; text-decoration: none; line-height: 1.1; overflow-wrap: anywhere; }
.contact-lines a:hover { color: var(--red-ink); }
/* Contact page kept compact so the brief starts high (client, 2026-10-23): lead, call and email beside the title */
.page-contact .page-hero .offset { margin-top: 2rem; gap: 2rem; }
.page-contact .contact-lines { gap: 1.25rem; }
.page-contact .contact-lines a { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); }
.contact-brief.section { padding-top: var(--space-sm); }
@media (min-width: 900px) {
  .page-contact .page-hero { display: grid; grid-template-columns: auto minmax(0, 30rem); justify-content: space-between; align-items: end; column-gap: var(--space-sm); }
  .page-contact .page-hero .offset { margin: 0 0 .6rem; }
}

/* ---------- Form ---------- */
.form { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 760px; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 2rem; }
.form legend { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; margin-bottom: 2rem; padding: 0; }
.field { display: grid; gap: .5rem; }
.field label { font-weight: 500; }
.field .req { color: var(--red-ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 56px; padding: .75rem 0; font-size: 1.125rem;
  background: transparent; border: 0; border-bottom: 1.5px solid rgba(0,0,0,.4); border-radius: 0;
  transition: border-color var(--t-fast);
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .25rem center; padding-right: 2rem; cursor: pointer;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--black); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--red-ink); }
.field .hint { font-size: var(--fs-small); color: var(--soft); }
.field .error { font-size: var(--fs-small); color: var(--red-ink); display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: var(--red-ink); }
.field.has-error .error { display: block; }
.form-status { padding: 1rem 1.25rem; border: 1px solid var(--black); display: none; }
.form-status.is-visible { display: block; }
.form-status.is-error { border-color: var(--red-ink); color: var(--red-ink); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
/* ---------- Brief builder (contact.html, main.js) ----------
   Each fieldset is one question. With JS only the current one shows, sliding in from the side, under a
   red progress line; single-choice questions move on by themselves. Choices are real radios/checkboxes
   styled as large pills; the chosen one turns black and a red dot pops in. Without JS: one long form. */
.brief { max-width: 900px; }
.brief .brief-step { gap: 1.75rem; }
.brief legend { max-width: 22ch; line-height: 1.1; text-wrap: balance; }
.choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 52px; padding: .65rem 1.3rem; border: 1px solid rgba(0, 0, 0, .25); border-radius: 999px;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-med) var(--ease-out);
}
.choice input:hover + span { border-color: var(--black); }
.choice input:active + span { transform: scale(.97); }
.choice input:checked + span { background: var(--black); color: var(--white); border-color: var(--black); }
.choice input:checked + span::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: .6rem; border-radius: 50%; background: var(--red); animation: choice-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.choice input:focus-visible + span { outline: 2px solid var(--red-ink); outline-offset: 3px; }
@keyframes choice-pop { from { transform: scale(0); } }
.brief-sub { margin-top: .5rem; }
.brief-bar { display: flex; align-items: center; gap: 1.25rem; margin-bottom: .5rem; }
.brief-count { flex: none; font-size: var(--fs-small); font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; }
.brief-count b { color: var(--red-ink); }
.brief-progress { position: relative; flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.brief-progress span { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .7s var(--ease-out); }
.brief-nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: .5rem; }
.brief-nav .text-link { background-color: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 500; }
.brief-nav .text-link:hover svg { transform: translateX(-4px); }
.brief-error { color: var(--red-ink); font-size: var(--fs-small); }
.brief-summary { display: grid; gap: .1rem; padding: 1.1rem 1.4rem; border: 1px solid var(--line); border-radius: 22px; }
.brief-summary p { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .45rem; border-bottom: 1px solid var(--line); }
.brief-summary p:last-child { border-bottom: 0; }
.brief-summary span { color: var(--soft); font-size: var(--fs-small); flex: none; }
.brief-summary b { font-weight: 500; text-align: right; }
.brief-summary button { flex: none; margin-left: .75rem; padding: 0; border: 0; background: none; color: var(--red-ink); font: inherit; font-size: var(--fs-small); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.brief.is-stepped .brief-step { display: none; }
.brief.is-stepped .brief-step.is-on { display: grid; animation: brief-in .5s var(--ease-out); }
.brief.is-stepped.is-back .brief-step.is-on { animation-name: brief-back; }
@keyframes brief-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes brief-back { from { opacity: 0; transform: translateX(-28px); } }
.reduce-motion .brief-step.is-on, .reduce-motion .choice span::before { animation: none !important; }

.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

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

@media print { .site-header, .mobile-menu, .cta, .form { display: none !important; } }

/* ---------- Holiday itinerary pop-up (contact page brief) ----------
   A modal <dialog> with the trip's photo in a curve, its days and inclusions; opens from the note
   under "Or name a place" or by itself the first time a holiday brief names one of our trips. */
.trip-hint { margin-top: -.25rem; padding: 1rem 1.25rem; border-left: 2px solid var(--red); background: rgba(226, 50, 58, .05); font-size: var(--fs-small); line-height: 1.5; }
.trip-hint button { margin-left: .6rem; padding: 0; border: 0; background: none; color: var(--red-ink); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.trip-hint button + button { margin-left: 1rem; color: var(--soft); }
.trip {
  width: min(100% - 2rem, 62rem); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--white); color: var(--black); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
}
.trip::backdrop { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.trip[open] { animation: trip-in .6s var(--ease-out); }
.trip[open]::backdrop { animation: trip-fade .4s ease-out; }
@keyframes trip-in { from { opacity: 0; transform: translateY(28px) scale(.98); } }
@keyframes trip-fade { from { opacity: 0; } }
.reduce-motion .trip[open], .reduce-motion .trip[open]::backdrop { animation: none; }
.trip-inner { position: relative; display: grid; gap: 2rem; padding: clamp(1.25rem, 1rem + 2vw, 2.75rem); }
.trip-close {
  position: absolute; top: .75rem; right: .75rem; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--black); cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.trip-close svg { width: 14px; height: 14px; }
.trip-close:hover { background: var(--black); color: var(--white); }
.trip-photo { aspect-ratio: 4 / 3; border-radius: 40% 12% 36% 14% / 18% 30% 14% 28%; }
.js .trip-photo { border-radius: 0; }
.trip-body { display: grid; gap: 1rem; align-content: start; }
.trip-name { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; padding-right: 3rem; }
.trip-days { list-style: none; margin: .5rem 0 1rem; padding: 0; border-top: 1px solid var(--line); }
.trip-days li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline; padding-block: .6rem; border-bottom: 1px solid var(--line); }
.trip-days b { color: var(--red-ink); font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.trip-days li { animation: pl-in .6s var(--ease-out) both; }
.trip-days li:nth-child(n+2) { animation-delay: .04s; } .trip-days li:nth-child(n+3) { animation-delay: .08s; } .trip-days li:nth-child(n+4) { animation-delay: .12s; }
.trip-days li:nth-child(n+5) { animation-delay: .16s; } .trip-days li:nth-child(n+6) { animation-delay: .2s; } .trip-days li:nth-child(n+7) { animation-delay: .24s; }
.reduce-motion .trip-days li { animation: none; }
.trip-incl { font-size: var(--fs-small); }
.trip-others { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.trip-alt { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-link { display: inline-flex; align-items: baseline; gap: .5rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: var(--fs-small); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.choice-link:hover { border-color: var(--red-ink); color: var(--red-ink); }
.trip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: .75rem; }
@media (min-width: 820px) {
  .trip-inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .trip-photo { position: sticky; top: 0; }
}