/* Generated by travel/src/build.mjs from site/styles.css. Edit those, not this. */
/* ===== Design tokens: white base, black + navy type ===== */
:root {
  --navy-950: #08130d;
  --navy-900: #0d1d14;
  --navy-850: #12271b;
  --navy-800: #183324;
  --navy-700: #1f4230;
  --navy-600: #2a5a40;

  --bg: #ffffff;
  --bg-2: #f6f4ee;

  --surface: rgba(26, 58, 40, 0.035);
  --surface-2: rgba(26, 58, 40, 0.07);
  --border: rgba(26, 58, 40, 0.14);
  --border-strong: rgba(26, 58, 40, 0.32);

  /* type: black + navy blue */
  --text: #0b130e;
  --text-dim: #24402f;
  /* 4a6b92 clears 4.5:1 on both #fff and the #f6f4ee card ground */
  --text-mute: #4f6858;

  --accent: #1f4a33;
  --accent-2: #9a5413;
  --accent-3: #a85d16;

  --grad: linear-gradient(135deg, #1d4430 0%, #9a5413 55%, #a85d16 100%);
  --on-accent: #ffffff;

  --shadow: 0 18px 50px -22px rgba(13, 29, 20, 0.35);
  --glow: 0 0 0 1px rgba(154, 84, 19, 0.12), 0 20px 50px -24px rgba(154, 84, 19, 0.4);

  --radius: 16px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Sections that stay dark on purpose: the photos need a dark ground,
   and they give the white page a rhythm break. Tokens flip locally. */
.inverse {
  --bg: #0d1d14;
  --bg-2: #12271b;
  --surface: rgba(232, 196, 128, 0.06);
  --surface-2: rgba(232, 196, 128, 0.1);
  --border: rgba(232, 196, 128, 0.16);
  --border-strong: rgba(232, 196, 128, 0.34);
  --text: #ffffff;
  --text-dim: #e4dac3;
  --text-mute: #c4b08a;
  --accent: #e0a85c;
  --accent-2: #ebbf7c;
  --accent-3: #f4dcae;
  --grad: linear-gradient(135deg, #e0a85c 0%, #ebbf7c 50%, #f4dcae 100%);
  --on-accent: #08130d;
  --shadow: 0 20px 60px -20px rgba(5, 12, 8, 0.9);
  --glow: 0 0 0 1px rgba(232, 196, 128, 0.15), 0 24px 60px -24px rgba(224, 168, 92, 0.45);
  background: var(--bg);
  color: var(--text);
}

/* picture wrappers must not become a layout box: the img inside needs to
   participate in the parent grid/absolute positioning directly */
picture { display: contents; }

/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
strong { color: var(--accent); font-weight: 650; }
.inverse strong { color: var(--accent-3); }
[hidden] { display: none !important; }

/* ===== Ambient background ===== */
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
}
.orb {
  position: fixed; border-radius: 50%; filter: blur(100px);
  pointer-events: none; z-index: 0;
  transition: transform 0.3s ease-out;
}
.orb-1 { width: 520px; height: 520px; background: #dfe6d2; top: -180px; left: -170px; opacity: 0.55; }
.orb-2 { width: 420px; height: 420px; background: #efe2c6; top: 42%; right: -150px; opacity: 0.45; }
.orb-3 { width: 460px; height: 460px; background: #e6ecdc; bottom: -200px; left: 26%; opacity: 0.4; }

/* ===== Cursor ===== */
.cursor, .cursor-dot { position: fixed; pointer-events: none; z-index: 9999; border-radius: 50%; }
.cursor {
  width: 32px; height: 32px;
  border: 1.5px solid var(--accent-2);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, width 0.2s, height 0.2s, border-color 0.2s;
}
.cursor-dot { width: 4px; height: 4px; background: var(--accent); transform: translate(-50%, -50%); }
.cursor.hover { width: 56px; height: 56px; border-color: var(--accent); }
@media (hover: none), (max-width: 800px) { .cursor, .cursor-dot { display: none; } }

/* ===== Nav ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, padding 0.3s, box-shadow 0.3s;
}
.nav.scrolled {
  border-bottom-color: var(--border);
  padding: 14px 40px;
  box-shadow: 0 6px 24px -18px rgba(13, 29, 20, 0.5);
}
.nav-logo { display: flex; align-items: center; line-height: 0; }
.logo-mark {
  display: block; width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover; object-position: center 18%;
  background: var(--surface-2);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent-2);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.nav-logo:hover .logo-mark {
  transform: scale(1.07);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent-3);
}
.nav.scrolled .logo-mark { width: 38px; height: 38px; }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a {
  font-size: 14px; color: var(--text-dim); font-weight: 500;
  position: relative; transition: color 0.2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--grad);
  transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }
/* Quick-nav trigger, in place of a second contact button the page
   already has twice. Doubles as the discoverability hint for Ctrl+K. */
.nav-cmd {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 10px 8px 13px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  font-size: 13px; color: var(--text-mute);
  transition: all 0.25s;
}
.nav-cmd:hover { border-color: var(--border-strong); color: var(--text-dim); box-shadow: var(--glow); }
.nav-cmd svg { flex-shrink: 0; }
.nav-cmd kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 3px 6px; border-radius: 5px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-mute); line-height: 1;
  display: inline-flex; gap: 1px;
}

/* ===== CV modal ===== */
.cvm { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 24px; }
.cvm-veil {
  position: absolute; inset: 0;
  background: rgba(13, 29, 20, 0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: veilIn 0.2s ease;
}
.cvm-panel {
  position: relative; z-index: 1;
  width: min(96vw, 940px); height: min(92vh, 1180px);
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 50px 120px -40px rgba(13, 29, 20, 0.6);
  animation: panelPop 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.cvm-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 14px 13px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.cvm-heading { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cvm-heading strong { font-family: var(--font-display); font-size: 15px; color: var(--text); }
.cvm-heading span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute); letter-spacing: 0.6px; }
.cvm-actions { display: flex; align-items: center; gap: 9px; }
.cvm-actions .btn { padding: 9px 14px; font-size: 13px; }
.cvm-x {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--border);
  color: var(--text-mute); transition: all 0.2s;
}
.cvm-x:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }

.cvm-body { position: relative; flex: 1; min-height: 0; background: #fff; }
.cvm-body iframe {
  width: 100%; height: 100%; border: 0; display: block;
  opacity: 0; transition: opacity 0.3s ease;
}
.cvm-body iframe.is-ready { opacity: 1; }
.cvm-loading {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text-mute); letter-spacing: 1px;
}
.cvm-loading[hidden] { display: none; }
.cvm-spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent-2);
  animation: spin 0.7s linear infinite;
}

@media (max-width: 700px) {
  .cvm { padding: 0; }
  .cvm-panel { width: 100vw; height: 100vh; border-radius: 0; border: none; }
  .cvm-bar { padding: 11px 12px; }
  .cvm-heading span { display: none; }
  .cvm-actions .btn span { display: none; }
  .cvm-actions .btn { padding: 9px 11px; }
}

/* ===== Command palette ===== */
.cmdk { position: fixed; inset: 0; z-index: 300; display: grid; place-items: start center; }
.cmdk-veil {
  position: absolute; inset: 0;
  background: rgba(13, 29, 20, 0.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: veilIn 0.2s ease;
}
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
.cmdk-panel {
  position: relative; z-index: 1;
  width: min(92vw, 580px); margin-top: 12vh;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(13, 29, 20, 0.5);
  animation: panelPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes panelPop {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmdk-search {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 16px; border-bottom: 1px solid var(--border);
  color: var(--text-mute);
}
.cmdk-search input {
  flex: 1; min-width: 0; border: none; background: none;
  font: inherit; font-size: 15px; color: var(--text);
}
.cmdk-search input:focus { outline: none; }
.cmdk-search input::placeholder { color: #97a59a; }
.cmdk-esc {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 4px 7px; border-radius: 5px;
  border: 1px solid var(--border); color: var(--text-mute);
  transition: all 0.2s;
}
.cmdk-esc:hover { border-color: var(--border-strong); color: var(--text-dim); }

.cmdk-list { list-style: none; max-height: 46vh; overflow-y: auto; padding: 6px; margin: 0; }
.cmdk-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; border-radius: 9px;
  cursor: pointer; transition: background 0.12s;
}
.cmdk-item.is-active { background: var(--surface-2); }
.cmdk-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmdk-item-label { font-size: 14px; font-weight: 500; color: var(--text); }
.cmdk-item-hint {
  font-size: 12px; color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-item-group {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent-2); flex-shrink: 0;
  padding: 3px 7px; border-radius: 999px;
  background: var(--surface-2);
}
.cmdk-empty { padding: 26px 14px; text-align: center; color: var(--text-mute); font-size: 13.5px; }
.cmdk-foot {
  display: flex; gap: 16px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-mute);
}
.cmdk-foot kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 5px; border-radius: 4px; margin-right: 3px;
  background: var(--bg-2); border: 1px solid var(--border);
}

/* ===== Reveal ===== */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== Hero ===== */
.hero {
  min-height: 100vh; padding: 124px 40px 44px;
  display: grid; align-items: center;
  position: relative; z-index: 2;
}
.hero-content { max-width: 1400px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }
.hero-content > * { max-width: 640px; }

/* Hero artwork: the DHIS2 hierarchy as an isometric stack, with data
   rising from community level into decisions. Sits directly on the
   white page, no panel needed. */
.hero-art {
  position: absolute; z-index: 1;
  right: max(24px, calc((100% - 1400px) / 2 + 24px));
  top: 50%; transform: translateY(-50%);
  width: min(42vw, 520px);
  pointer-events: none;
}
.hero-art svg { width: 100%; height: auto; display: block; overflow: visible; }

/* slabs drift in on load, bottom-most first */
.ha-slab {
  opacity: 0;
  animation: slabIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ha-slab[data-slab="1"] { animation-delay: 0.15s; }
.ha-slab[data-slab="2"] { animation-delay: 0.3s; }
.ha-slab[data-slab="3"] { animation-delay: 0.45s; }
.ha-slab[data-slab="4"] { animation-delay: 0.6s; }
.ha-slab[data-slab="5"] { animation-delay: 0.75s; }
@keyframes slabIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ha-slab-top { transform-origin: 200px 168px; }
.ha-slab-top path:last-of-type { filter: drop-shadow(0 8px 20px rgba(154, 84, 19, 0.4)); }

.ha-halo { animation: haloPulse 6s ease-in-out infinite; transform-origin: 200px 150px; }
@keyframes haloPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}

/* motes travel community -> decisions, then reset */
.ha-mote { fill: #9a5413; opacity: 0; }
.ha-mote { animation: moteRise 4.2s cubic-bezier(0.4, 0, 0.5, 1) infinite; }
.ha-mote.m1 { animation-delay: 0s; }
.ha-mote.m2 { animation-delay: 0.7s; }
.ha-mote.m3 { animation-delay: 1.3s; }
.ha-mote.m4 { animation-delay: 2s; }
.ha-mote.m5 { animation-delay: 2.6s; }
.ha-mote.m6 { animation-delay: 3.3s; }
@keyframes moteRise {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  12%  { opacity: 0.9; transform: translateY(-14px) scale(1); }
  82%  { opacity: 0.85; transform: translateY(-268px) scale(1); }
  100% { opacity: 0; transform: translateY(-300px) scale(0.4); }
}

.ha-lab { opacity: 0; animation: labIn 0.6s ease forwards; }
.ha-lab[data-lab="1"] { animation-delay: 0.7s; }
.ha-lab[data-lab="2"] { animation-delay: 0.85s; }
.ha-lab[data-lab="3"] { animation-delay: 1s; }
.ha-lab[data-lab="4"] { animation-delay: 1.15s; }
.ha-lab[data-lab="5"] { animation-delay: 1.3s; }
@keyframes labIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Presence, not availability: where he is, what time it is there, and
   what he is in the middle of. States a fact instead of asking. */
.hero-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 26px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-mute);
}
.status-place { color: var(--text-dim); font-weight: 500; }
.status-time { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.status-rule { width: 16px; height: 1px; background: var(--border-strong); flex-shrink: 0; }
.status-now { text-transform: none; letter-spacing: 0.4px; font-size: 12px; }
.pulse {
  width: 8px; height: 8px; background: var(--accent-2); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(154, 84, 19, 0.6); animation: pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(154, 84, 19, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(154, 84, 19, 0); }
  100% { box-shadow: 0 0 0 0 rgba(154, 84, 19, 0); }
}
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  line-height: 1.02; letter-spacing: -0.025em;
  margin-bottom: 16px; color: var(--text);
  display: flex; flex-direction: column; gap: 4px;
}
.hero-hi {
  font-family: var(--font-mono); font-weight: 400;
  font-size: 0.95rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-mute);
  margin-bottom: 4px;
}
/* keeps the role in the h1 for crawlers and screen readers without
   repeating it visually; it is already shown in .hero-role below */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* one name, one colour: no gradient, no split between given and family */
.hero-name {
  font-size: clamp(2.5rem, 6vw, 4.6rem); display: block;
  color: #1d4430;
}

/* role line, set like a spec-sheet caption */
.hero-role {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 0.86rem;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 26px;
}
/* one flex item, or the bare text nodes each become their own item
   and stack into columns when space runs short */
.hero-role-text { min-width: 0; }
.hero-role i { font-style: normal; color: var(--text-mute); }
.hero-role-rule {
  width: 34px; height: 2px; flex-shrink: 0;
  background: var(--grad); border-radius: 2px;
}

/* The rotating phrase used to live inside the h1, where every phrase
   change reflowed the whole headline. It now has its own line with a
   reserved height, so nothing below it can move. */
.hero-line {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  line-height: 1.45; color: var(--text);
  margin-bottom: 22px;
  min-height: calc(2 * 1.45em);
}
.typed-slot {
  display: inline-block; position: relative;
  padding: 0 6px; border-radius: 5px;
  background: linear-gradient(to bottom, transparent 58%, rgba(154, 84, 19, 0.16) 58%);
  color: var(--accent-2); white-space: nowrap;
}
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.typed { color: var(--accent-2); }
.caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--accent-2); vertical-align: -0.12em;
  margin-left: 1px; animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hero-sub {
  font-size: clamp(0.95rem, 1.25vw, 1.02rem);
  color: var(--text-dim); max-width: 600px;
  margin-bottom: 24px;
}

/* spec-sheet fact strip */
/* grid, not flex-wrap: four columns must stay on one row or the last
   cell drops below and leaves a dangling divider */
.hero-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-bottom: 30px; max-width: 620px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hero-facts > div {
  padding: 14px 16px 14px 0;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column-reverse; gap: 4px;
  min-width: 0;
}
.hero-facts > div + div { padding-left: 16px; }
.hero-facts > div:last-child { border-right: none; padding-right: 0; }
.hero-facts dt {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-mute); line-height: 1.35;
}
.hero-facts dd {
  margin: 0; font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  cursor: pointer;
}
.btn-primary { background: var(--grad); color: var(--on-accent); box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -22px rgba(154, 84, 19, 0.6); }
.btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-quiet { color: var(--text-mute); padding: 13px 14px; }
.btn-quiet:hover { color: var(--accent); background: var(--surface); }

.hero-socials { display: flex; gap: 16px; }
.hero-socials a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--border);
  color: var(--text-dim); transition: all 0.2s;
}
.hero-socials a:hover { color: var(--accent-2); border-color: var(--accent-2); background: var(--surface); transform: translateY(-2px); }

.scroll-hint {
  position: absolute; bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-mute);
}
.scroll-line {
  width: 1px; height: 40px; background: linear-gradient(to bottom, var(--accent-2), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50% { transform: scaleY(1.3); opacity: 1; }
}

/* ===== Marquee ===== */
.marquee {
  position: relative; z-index: 2;
  overflow: hidden; padding: 18px 0;
  border-block: 1px solid var(--border);
  background: var(--bg-2);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 26px;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee-track span {
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-mute); white-space: nowrap;
}
.marquee-track i { color: var(--accent-2); font-style: normal; font-size: 9px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ===== Sections ===== */
.section { padding: 120px 40px; position: relative; z-index: 2; }
.container { max-width: 1200px; margin: 0 auto; }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 56px; }
.section-num { font-family: var(--font-mono); font-size: 14px; color: var(--accent-2); font-weight: 500; }
.section-title {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.sub-head {
  font-family: var(--font-display); font-size: 1.05rem;
  color: var(--accent); margin: 64px 0 24px;
  text-transform: uppercase; letter-spacing: 2.5px;
}

/* ===== About ===== */
.about-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px;
  align-items: start; margin-bottom: 48px;
}

/* Identity row: portrait reduced to a compact chip */
.identity { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }
.portrait-chip {
  position: relative; margin: 0; flex-shrink: 0;
  width: 128px; height: 128px; border-radius: 50%;
  overflow: hidden; background: var(--surface);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}
.portrait-chip::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; padding: 2px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.75; transition: opacity 0.4s;
}
.portrait-chip:hover { transform: scale(1.06); box-shadow: var(--glow); }
.portrait-chip:hover::after { opacity: 1; }
.portrait-chip img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
.identity-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.identity-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--text); }
.identity-role { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-2); letter-spacing: 0.4px; }

.about-text .lead {
  font-size: 1.22rem; color: var(--text); font-weight: 500;
  margin-bottom: 18px; line-height: 1.5;
}
.about-text p { color: var(--text-dim); margin-bottom: 16px; }
.about-visual { display: flex; flex-direction: column; gap: 20px; }

.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  padding: 28px 24px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  transition: transform 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.stat:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--glow); }
.stat-num {
  font-family: var(--font-display); font-size: 2.5rem;
  font-weight: 700; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-plus { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent-2); font-weight: 600; margin-left: 2px; }
.stat-label { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; }

/* ===== Highlights ===== */
.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.highlight {
  padding: 26px 24px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative; overflow: hidden;
  transition: transform 0.35s, border-color 0.3s, box-shadow 0.35s;
}
.highlight::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--grad);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.highlight:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--glow); }
.highlight:hover::before { transform: scaleY(1); }
.highlight-icon { color: var(--accent-2); font-size: 15px; display: block; margin-bottom: 12px; }
.highlight h4 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; color: var(--text); }
.highlight p { font-size: 14px; color: var(--text-dim); }

/* ===== Projects ===== */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.project {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
  transform-style: preserve-3d;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 18px -12px rgba(13, 29, 20, 0.3);
}
.project:hover { border-color: var(--border-strong); box-shadow: 0 30px 60px -30px rgba(13, 29, 20, 0.45); }
.project-cover {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--navy-850);
  border-bottom: 1px solid var(--border);
}
.project-cover img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.project:hover .project-cover img { transform: scale(1.05); }
.project-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.project-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-mute);
  font-family: var(--font-mono); margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: 1px;
}
.project-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.project p { color: var(--text-dim); font-size: 14.5px; margin-bottom: 18px; flex: 1; }
.project-tech { display: flex; flex-wrap: wrap; gap: 6px; }
.project-tech span {
  padding: 4px 10px; background: var(--surface-2);
  border-radius: 6px; font-size: 11px;
  font-family: var(--font-mono); color: var(--text-dim);
  border: 1px solid var(--border);
}

/* ===== Code window (stays dark; syntax colours are deliberate) ===== */
.code-window {
  background: var(--navy-950);
  border: 1px solid rgba(26, 58, 40, 0.2);
  border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 24px 60px -28px rgba(13, 29, 20, 0.7);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.code-window:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -30px rgba(13, 29, 20, 0.8); }
.code-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid rgba(232, 196, 128, 0.14);
  background: rgba(232, 196, 128, 0.05);
}
.code-header .dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green { background: #28c840; }
.code-title { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: #c4b08a; }
.code-body {
  padding: 22px 24px; font-family: var(--font-mono); font-size: 13px;
  line-height: 1.75; color: #e4dac3;
  white-space: pre; overflow-x: auto;
}
.code-caret {
  display: inline-block; width: 8px; height: 1em;
  background: #ebbf7c; vertical-align: -0.15em;
  margin-left: 1px;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.cmt { color: #6b8299; font-style: italic; }
.kw  { color: #c084fc; }
.var { color: #22d3ee; }
.key { color: #f472b6; }
.str { color: #86efac; }
.num { color: #fbbf24; }

/* ===== Quote band (dark block) ===== */
.band {
  position: relative; z-index: 2;
  min-height: 58vh;
  display: grid; align-items: center;
  padding: 100px 40px;
  overflow: hidden;
}
.band-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.band-media img {
  position: absolute; inset: 0;
  width: 100%; height: 116%; top: -8%;
  object-fit: cover; object-position: 72% center;
  filter: saturate(0.3) contrast(1.05);
  will-change: transform;
}
.band-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, var(--bg) 12%, color-mix(in oklab, var(--bg) 58%, transparent) 46%, transparent 74%),
    linear-gradient(200deg, rgba(31, 66, 48, 0.6), transparent 60%);
}
.band-quote { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; }
.band-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 600; line-height: 1.28;
  letter-spacing: -0.015em;
  max-width: 640px; color: var(--text);
  margin-bottom: 18px;
}
.band-quote cite {
  font-style: normal; font-family: var(--font-mono);
  font-size: 13px; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: 2px;
}
.band-quote cite::before { content: "· "; }

/* ===== Timeline ===== */
.timeline { list-style: none; position: relative; padding-left: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(to bottom, var(--accent-2), var(--accent-3), transparent);
  opacity: 0.4;
}
.tl-item { position: relative; padding-bottom: 42px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -34px; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent-2);
  transition: box-shadow 0.4s, background 0.4s, transform 0.4s;
}
.tl-item:hover .tl-dot { background: var(--accent-2); transform: scale(1.2); box-shadow: 0 0 0 6px rgba(154, 84, 19, 0.12); }
.tl-date {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--accent-2); text-transform: uppercase; letter-spacing: 1.6px;
  display: block; margin-bottom: 6px;
}
.tl-role { font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.tl-org { font-size: 13.5px; color: var(--text-mute); display: block; margin-bottom: 10px; }
.tl-body p { color: var(--text-dim); font-size: 15px; max-width: 760px; }

/* ===== Skills ===== */
.skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.skill-cluster {
  padding: 32px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.skill-cluster:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--glow); }
.skill-cluster h3 {
  font-family: var(--font-display); font-size: 1.05rem;
  margin-bottom: 18px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 1.6px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-tight { gap: 6px; }
.chip {
  padding: 8px 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; font-size: 13px; color: var(--text-dim);
  font-weight: 500;
  transition: all 0.22s;
}
.chip:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-2px); }
.chip-solid { background: var(--grad); color: #fff; border-color: transparent; font-weight: 600; }

/* ===== Credentials ===== */
.cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cred-card {
  padding: 32px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.cred-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--glow); }
.cred-label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-2); text-transform: uppercase;
  letter-spacing: 2.2px; display: block; margin-bottom: 14px;
}
.cred-card h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 6px; color: var(--text); }
.cred-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 8px; }
.cred-org { color: var(--text-mute); font-size: 13px; }
.cred-note {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-mute);
  font-family: var(--font-mono); line-height: 1.5;
}
.cred-list, .lang-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cred-list li { color: var(--text-dim); font-size: 15px; padding-left: 18px; position: relative; }
.cred-list li::before { content: "◆"; position: absolute; left: 0; color: var(--accent-2); font-size: 9px; top: 6px; }
.lang-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.lang-list li:last-child { border-bottom: none; padding-bottom: 0; }
.lang-list span { color: var(--text); font-weight: 600; }
.lang-list em { font-style: normal; color: var(--text-mute); font-size: 13px; font-family: var(--font-mono); }

/* ===== Contact (dark block) ===== */
.contact-section { position: relative; overflow: hidden; }
.contact-section .container { text-align: center; position: relative; z-index: 2; }
.contact-section .section-head { justify-content: center; }
.contact-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 22% center;
  filter: saturate(0.3) contrast(1.05);
  -webkit-mask-image: linear-gradient(to left, transparent 30%, #000 78%);
  mask-image: linear-gradient(to left, transparent 30%, #000 78%);
  opacity: 0.45;
}
.contact-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(260deg, var(--bg) 26%, color-mix(in oklab, var(--bg) 55%, transparent) 58%, transparent 82%),
    linear-gradient(140deg, rgba(168, 93, 22, 0.16), transparent 60%);
}
/* Intro sits as plain text so the form below is the section's single
   panel, rather than one floating box stacked on another. */
.contact-card {
  max-width: 660px; margin: 0 auto;
  position: relative;
}
.contact-lead { font-size: 1.12rem; color: var(--text-dim); margin-bottom: 26px; }
.contact-email {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 2.1rem);
  font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 30px;
  transition: transform 0.3s;
}
.contact-email svg { color: var(--accent-2); -webkit-text-fill-color: initial; flex-shrink: 0; }
.contact-email:hover { transform: translateY(-2px); }
.contact-socials { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; color: var(--text-mute); font-size: 14px; }
.contact-socials a { color: var(--text-dim); transition: color 0.2s; }
.contact-socials a:hover { color: var(--accent-2); }

/* ===== Enquiry form ===== */
.form-shell {
  position: relative;
  max-width: 760px; margin: 46px auto 0;
  text-align: left;
  background: color-mix(in oklab, var(--bg-2) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.form-rail { height: 3px; background: var(--surface-2); }
.form-rail-fill {
  height: 100%; width: 33.333%;
  background: var(--grad);
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
#enquiry { padding: 30px 34px 26px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}
.form-steps { display: flex; gap: 10px; flex-wrap: wrap; }
.form-step {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-family: var(--font-mono);
  color: var(--text-mute); letter-spacing: 0.6px;
  transition: color 0.35s;
}
.form-step b {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--text-mute);
  transition: all 0.35s;
}
.form-step.is-active { color: var(--text); }
.form-step.is-active b { background: var(--grad); border-color: transparent; color: var(--on-accent); }
.form-step.is-done b { background: var(--surface-2); border-color: var(--accent-2); color: var(--accent-2); }
.form-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-mute); }

.form-panel { border: none; padding: 0; margin: 0; display: none; }
.form-panel.is-active { display: block; animation: panelIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes panelIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.form-legend {
  font-family: var(--font-display); font-size: 1.24rem;
  font-weight: 600; color: var(--text); margin-bottom: 20px; padding: 0;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field-mt { margin-top: 4px; }
.field-label { font-size: 13px; color: var(--text-dim); font-weight: 500; }
.field-label i { color: var(--accent-2); font-style: normal; }
.field-opt { color: var(--text-mute); font-size: 11.5px; font-family: var(--font-mono); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 11px;
  color: var(--text); font: inherit; font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #97a59a; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(154, 84, 19, 0.12);
}
.field.has-err input, .field.has-err textarea { border-color: #dc2626; }
.field.has-err input:focus, .field.has-err textarea:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.13); }
.field-err {
  font-size: 12.5px; color: #dc2626; font-family: var(--font-mono);
  min-height: 0; opacity: 0; transform: translateY(-3px);
  transition: opacity 0.25s, transform 0.25s;
}
.field-err.show { opacity: 1; transform: translateY(0); }
.field-meta { font-size: 11.5px; color: var(--text-mute); font-family: var(--font-mono); align-self: flex-end; }

.picker { display: flex; flex-wrap: wrap; gap: 9px; }
.pick { cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-dim);
  transition: all 0.22s;
}
.pick span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-mute); transition: all 0.22s;
}
.pick:hover span { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.pick input:checked + span {
  background: var(--grad); border-color: transparent;
  color: #fff; font-weight: 600;
}
.pick input:checked + span::before { background: #fff; transform: scale(1.15); }
.pick input:focus-visible + span { box-shadow: 0 0 0 4px rgba(154, 84, 19, 0.2); }

.form-recap {
  margin-top: 18px; padding: 16px 18px;
  border-radius: 12px; border: 1px dashed var(--border-strong);
  background: var(--surface);
  font-size: 13px; color: var(--text-dim);
  display: none;
}
.form-recap.show { display: block; animation: panelIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.form-recap dt {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 3px;
}
.form-recap dd { margin: 0 0 11px; color: var(--text); }
.form-recap dd:last-child { margin-bottom: 0; }

.form-foot { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
.form-foot .btn { position: relative; }
#formBack { margin-right: auto; }
#formNext, #formSend { margin-left: auto; }

.spinner {
  position: absolute; inset: 0; margin: auto;
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
  display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.is-sending .send-label, .is-sending .send-icon { opacity: 0; }
.is-sending .spinner { display: block; }
.is-sending { pointer-events: none; }

.form-done { padding: 54px 34px 58px; text-align: center; }
.form-done-mark { width: 68px; height: 68px; margin: 0 auto 20px; }
.form-done-mark svg { width: 100%; height: 100%; }
.fd-c {
  stroke: var(--accent-2); stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: fdCircle 0.7s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.fd-t {
  stroke: var(--accent-3); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: fdTick 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.55s forwards;
}
@keyframes fdCircle { to { stroke-dashoffset: 0; } }
@keyframes fdTick { to { stroke-dashoffset: 0; } }
.form-done h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 10px; color: var(--text); }
.form-done p { color: var(--text-dim); margin-bottom: 24px; max-width: 420px; margin-inline: auto; }

/* ===== Footer ===== */
.footer { border-top: 1px solid var(--border); padding: 30px 40px; position: relative; z-index: 2; background: var(--bg); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; color: var(--text-mute); font-size: 13px; }
/* The travel practice is linked from here rather than the main menu: it is a
   separate business, and the menu is for this site's own sections. */
.footer-travel { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: color .2s, border-color .2s; }
.footer-travel:hover, .footer-travel:focus-visible { color: var(--accent-2); border-bottom-color: currentColor; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .hero-art { width: 38vw; }
  .hero-content > * { max-width: 52%; }
}
@media (max-width: 1000px) {
  .highlights { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav { padding: 16px 20px; }
  .nav.scrolled { padding: 12px 20px; }
  .nav-links { display: none; }

  /* artwork follows the copy on small screens (it is after .hero-content
     in the DOM; on desktop it is absolutely positioned, so order there
     is unaffected) */
  .hero { padding: 100px 20px 60px; align-content: center; }
  .hero-art {
    position: relative; right: auto; top: auto; transform: none;
    width: min(84%, 360px); margin: 34px auto 0;
  }
  .hero-content > * { max-width: 100%; }

  /* no physical keyboard to hint at */
  .nav-cmd { padding: 8px 12px; }
  .nav-cmd-label, .nav-cmd kbd { display: none; }
  .cmdk-panel { margin-top: 8vh; }
  .cmdk-foot { display: none; }
  .cmdk-list { max-height: 58vh; }

  .section { padding: 80px 20px; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .projects, .skills-grid, .cred-grid { grid-template-columns: 1fr; }
  .about-stats, .highlights { grid-template-columns: 1fr 1fr; }
  .band { padding: 70px 20px; min-height: 46vh; }
  .band-media img { object-position: 66% center; opacity: 0.5; }
  .contact-bg img { opacity: 0.26; }
  .contact-card { padding: 44px 24px; }
  .footer-inner { flex-direction: column; gap: 10px; text-align: center; }
  .scroll-hint { display: none; }
  .timeline { padding-left: 28px; }
  .tl-dot { left: -28px; width: 14px; height: 14px; }
  #enquiry { padding: 24px 20px 22px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-legend { font-size: 1.1rem; }
  .form-step span, .form-step { font-size: 11.5px; }
  .form-done { padding: 44px 22px 48px; }
}
@media (max-width: 560px) {
  .about-stats, .highlights { grid-template-columns: 1fr; }
  /* four columns are unreadable at this width */
  .hero-role { font-size: 0.72rem; letter-spacing: 1.2px; gap: 9px; }
  .hero-role-rule { width: 22px; }
  .hero-facts { grid-template-columns: 1fr 1fr; }
  .hero-facts > div:nth-child(2) { border-right: none; padding-right: 0; }
  .hero-facts > div:nth-child(3) { padding-left: 0; border-top: 1px solid var(--border); }
  .hero-facts > div:nth-child(4) { border-top: 1px solid var(--border); }
  .identity { gap: 16px; }
  .portrait-chip { width: 92px; height: 92px; }
  .identity-name { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  /* these start at opacity 0 and are revealed by their animation, so
     they must be forced visible when animations are suppressed */
  .ha-slab, .ha-lab { opacity: 1 !important; transform: none !important; }
  .ha-mote { display: none; }
}

/* ===== Article index & article pages ===== */
.page-head { padding-top: 150px; padding-bottom: 30px; }
.section-tight { padding-top: 20px; }
.crumbs {
  display: flex; gap: 9px; align-items: center;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 18px;
}
.crumbs a { color: var(--accent-2); }
.crumbs a:hover { text-decoration: underline; }
.page-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.025em;
  color: #1d4430; margin-bottom: 16px;
}
.page-lead { font-size: 1.1rem; color: var(--text-dim); max-width: 640px; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30px; }
.filter {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 13px; color: var(--text-dim); font-weight: 500;
  transition: all 0.22s;
}
.filter:hover { border-color: var(--border-strong); color: var(--text); }
.filter.is-active { background: var(--grad); color: #fff; border-color: transparent; }

.post-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.post { }
.post-link {
  display: block; padding: 28px 30px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.3s;
}
a.post-link:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--glow); }
.post.is-draft .post-link { opacity: 0.62; cursor: default; }
.post-meta {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 12px;
}
.post-kind { color: var(--accent-2); }
.post-status {
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.post-title {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.25;
}
.post-excerpt { color: var(--text-dim); font-size: 15px; max-width: 720px; margin-bottom: 16px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-tags span {
  padding: 4px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim);
}
.post-empty { color: var(--text-mute); padding: 30px 0; }

/* article body */
.article { padding-top: 140px; }
.article-wrap { max-width: 720px; margin: 0 auto; }
.article-head { margin-bottom: 40px; }
.article-body { font-size: 1.05rem; color: var(--text-dim); line-height: 1.75; }
.article-body > * + * { margin-top: 22px; }
.article-body h2 {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--text); margin-top: 44px; letter-spacing: -0.015em;
}
.article-body h3 {
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 600;
  color: var(--text); margin-top: 32px;
}
.article-body strong { color: var(--accent); }
.article-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
  border-left: 3px solid var(--accent-2);
  padding: 4px 0 4px 20px; color: var(--text);
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
}
.article-body code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface-2); padding: 2px 6px; border-radius: 5px;
  color: var(--accent);
}
.article-body figure { margin: 32px 0; }
.article-body figcaption {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-mute); margin-top: 10px; text-align: center;
}
.article-foot {
  margin-top: 56px; padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--text-mute);
}
.article-foot a { color: var(--accent-2); }

@media (max-width: 900px) {
  .page-head { padding-top: 120px; }
  .article { padding-top: 110px; }
  .post-link { padding: 22px 20px; }
}

.flash-admin {
  margin-top: 18px; padding: 10px 14px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-dim); display: inline-block;
}
.flash-admin a { color: var(--accent-2); text-decoration: underline; }

/* Screen recordings and diagrams inside an article */
.article-body .fig { margin: 34px 0; text-align: center; }
.article-body .fig img {
  max-width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--border);
  box-shadow: 0 24px 60px -30px rgba(13, 29, 20, 0.5);
}
/* phone recordings should not stretch to the full column */
.article-body .fig img[src*="supervision"],
.article-body .fig source + img { max-width: 360px; }

/* ===== Mobile navigation ===== */
.nav-burger {
  display: none;                 /* desktop shows the links inline */
  width: 42px; height: 42px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-2);
  cursor: pointer; flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.nav-burger:hover { border-color: var(--border-strong); }
.nav-burger span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--accent); transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-burger { display: flex; }

  /* The links become a panel under the bar rather than disappearing.
     Hidden by default, revealed by .is-open from nav.js. */
  /* A panel down the side of the screen rather than across the whole of it:
     the page stays visible beside it, and a tap anywhere on that page
     closes it. */
  .nav-links {
    display: flex !important;    /* overrides the earlier display:none */
    position: fixed; top: 0; bottom: auto; right: 0; left: auto;
    width: min(76vw, 300px);
    flex-direction: column; gap: 0;
    padding: 88px 22px 14px;
    /* As tall as the links in it and no taller: a menu of eight items should
       not need scrolling, and a scrollbar inside it feels like a window
       within a window. */
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    border-radius: 0 0 0 16px;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -26px 0 60px -32px rgba(13, 29, 20, 0.5);
    transform: translateX(100%);
    opacity: 1; visibility: hidden; pointer-events: none;
    transition: transform 0.34s cubic-bezier(0.16,1,0.3,1), visibility 0.34s;
    z-index: 99;                 /* under the bar, so the burger stays reachable */
  }
  .nav-links.is-open {
    transform: translateX(0);
    visibility: visible; pointer-events: auto;
  }
  .nav-links li { width: 100%; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    display: block; width: 100%;
    padding: 13px 4px; font-size: 16.5px;
    color: var(--text); font-weight: 500;
    border-bottom: 1px solid var(--border);
  }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-links a::after { display: none; }   /* the underline animation is a pointer affordance */
  .nav-links a:active { color: var(--accent-2); }
  .nav-links a[aria-current="page"] { color: var(--accent-2); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-burger span { transition: none !important; }
}

/* ===== Live demo callout on a project card ===== */
.project-demo {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--border-strong);
}
.demo-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px;
  background: var(--grad); color: #fff;
  font-size: 13.5px; font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}
.demo-link:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.demo-creds { margin-top: 11px; }
/* inline-flex, not a flex column: as a column each <code> became a flex
   item and stretched to the full card width */
.demo-creds-line {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-mute);
}
.demo-creds-line code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 6px; color: var(--accent);
  user-select: all;                 /* one click selects the whole value */
}
.demo-creds-line .sep { color: var(--border-strong); }
.demo-creds-note { margin-top: 5px; font-size: 11.5px; color: var(--text-mute); opacity: 0.85; }

/* ===== 404 ===== */
.err-wrap { text-align: center; }
.err-code {
  font-family: var(--font-mono); font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 500; line-height: 1; letter-spacing: -2px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; opacity: 0.85; margin-bottom: 8px;
}
.err-wrap .page-lead { margin-inline: auto; }
.err-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 30px;
}
.err-map {
  margin-top: 52px; padding-top: 26px;
  border-top: 1px solid var(--border); text-align: left;
}
.err-map-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-mute); display: block; margin-bottom: 14px;
}
.err-map ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.err-map li {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.err-map li:last-child { border-bottom: none; }
.err-map a { color: var(--accent-2); font-weight: 500; }
.err-map a:hover { text-decoration: underline; }
.err-map em { font-style: normal; font-size: 13px; color: var(--text-mute); }

/* Nothing should ever be able to push the page sideways. Images and
   embedded media are the usual culprits when new content is added. */
img, svg, video, iframe, table, pre { max-width: 100%; }

/* ===== Projects ===== */
.proj-group { margin-bottom: 44px; }
.proj-group .sub-head { margin-top: 0; }
.proj-note {
  font-size: 13px; color: var(--text-mute); margin: -8px 0 16px;
  font-family: var(--font-mono); letter-spacing: 0.3px;
}
.proj-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.proj {
  padding: 26px 28px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--border);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.3s;
}
.proj:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--glow); }

/* An offer must not be mistakable for delivered work, so it is dashed
   and unfilled rather than a solid card like the rest. */
.proj-available { background: transparent; border-style: dashed; }

.proj-head {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px;
}
.proj-kind {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1.3px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--accent-2);
}
.proj-delivered .proj-kind { color: #0f7a4a; border-color: rgba(15,122,74,.3); background: rgba(15,122,74,.1); }
.proj-available .proj-kind { color: var(--text-mute); }
.proj-period { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-mute); }
.proj-title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
.proj-summary { color: var(--text-dim); font-size: 15px; margin-bottom: 14px; max-width: 720px; }
.proj-foot {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-mute);
}
.proj-foot a { color: var(--accent-2); text-decoration: underline; }

/* private preview banner */
.preview-banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; margin-bottom: 30px;
  border-radius: 12px;
  background: rgba(154,84,19,.07); border: 1px dashed var(--border-strong);
}
.preview-banner strong { display: block; font-size: 14px; color: var(--text); }
.preview-banner span { font-size: 12.5px; color: var(--text-mute); }
.preview-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
  background: var(--accent-2); flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(154,84,19,.15);
}
.preview-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }

@media (max-width: 900px) {
  .proj { padding: 20px 18px; }
}

/* The line out of Selected Work to the projects page. */
.work-more {
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.work-more a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.work-more a:hover { border-bottom-color: currentColor; }
.work-more a svg { transition: transform .2s ease; }
.work-more a:hover svg { transform: translateX(3px); }


/* The office is on its own subdomain and behind a login: a nav link, set
   slightly apart from the sections of this page. */
.nav-links a.nav-office {
  color: var(--text-mute);
  padding-left: 18px;
  margin-left: 4px;
  position: relative;
}
.nav-links a.nav-office::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--border);
}
.nav-links a.nav-office:hover { color: var(--accent-2); }
/* Between the phone menu and a wide screen, the links and the palette button
   do not fit at full size: measured without these rules, the gap between them
   closes to nothing at 901px and the button's label wraps. Tighten the gaps
   and keep the button icon-only. */
.nav-logo { flex-shrink: 0; }
@media (min-width: 901px) and (max-width: 1240px) {
  .nav-links { gap: 20px; }
  .nav-cmd-label, .nav-cmd kbd { display: none; }
  .nav-cmd { padding: 8px 12px; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .nav { padding-left: 24px; padding-right: 24px; }
  .nav-links { gap: 15px; }
  .nav-links a { font-size: 13.5px; }
}
@media (max-width: 900px) {
  .nav-links a.nav-office { padding-left: 0; margin-left: 0; }
  .nav-links a.nav-office::before { display: none; }
}

/* ==========================================================================
   travel.omutsani.com
   Everything above this line is site/styles.css with the palette swapped
   (see src/theme.mjs). Below: fonts, and the few pieces the main site has
   no equivalent for. Each one is built from the main site's tokens and
   proportions, so it reads as part of the same system.
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/space-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; z-index: 200; }
.skip:focus { width: auto; height: auto; clip-path: none; top: 12px; inset-inline-start: 12px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; }

/* The wordmark beside the portrait: the main site needs no name there,
   this one does, or a visitor cannot tell which site they are on. */
.nav-logo { gap: 12px; }
.nav-word {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; color: var(--text); line-height: 1.15;
}
.nav-word small {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-mute);
}
@media (max-width: 420px) { .nav-word small { display: none; } }

/* Hero artwork: three ridgelines and a sun, drawn in as the slabs are on
   the main site. Decorative only. */
.hero-art .ridge { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: ridgeIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-art .ridge.r2 { animation-delay: 0.25s; }
.hero-art .ridge.r3 { animation-delay: 0.5s; }
.hero-art .sun { opacity: 0; animation: labIn 0.9s ease 0.9s forwards; }
.hero-art .acacia { opacity: 0; animation: labIn 0.9s ease 1.2s forwards; }
@keyframes ridgeIn { to { stroke-dashoffset: 0; } }

/* Trip cards are .project cards without covers */
.project.trip { text-decoration: none; }
.project.trip .project-body { padding: 26px 26px 24px; }
.trip-price {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
}
.trip-price dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-mute); }
.trip-price dd { margin: 3px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text); }
.trip-price dd.fee { color: var(--accent-2); }
.project.trip.consult { background: transparent; border-style: dashed; }

/* Trip page: article column and a sticky price card */
.trip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
/* the story fills its column, up to the price card, rather than stopping short of it */
.trip-layout .article-body { max-width: none; }
.trip-layout .article-body .lead { font-size: 1.22rem; color: var(--text); font-weight: 500; line-height: 1.5; }
.price-card { position: sticky; top: 96px; }
.price-card .cred-label { margin-bottom: 6px; }
.price-big { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1.05; color: var(--text); }
.price-fee { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--accent-2); }
.price-card p { font-size: 13.5px; color: var(--text-mute); margin: 6px 0 16px; }
.price-card .btn { width: 100%; justify-content: center; margin-top: 10px; }
.trip-facts { margin-top: 26px; }
.trip-facts dd { font-size: 1.05rem; -webkit-text-fill-color: currentColor; background: none; color: var(--text); font-weight: 600; line-height: 1.25; }
.timeline.days { margin-top: 8px; }
.timeline.days .tl-body p { font-size: 15.5px; }

/* FAQ, in the post-link card style */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; transition: border-color 0.3s, box-shadow 0.3s;
}
.faq details[open], .faq details:hover { border-color: var(--border-strong); box-shadow: var(--glow); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent-2); font-size: 1.1rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin-top: 10px; color: var(--text-dim); font-size: 15px; }

/* Steps reuse .highlight; the number takes the icon slot */
.highlights.steps-4 { grid-template-columns: repeat(4, 1fr); }
.highlight-icon.num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1.4px; }
@media (max-width: 1000px) { .highlights.steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .highlights.steps-4 { grid-template-columns: 1fr; } }

/* Brief form: the main site's .field, plus a select */
.field select {
  width: 100%; padding: 13px 15px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 11px;
  color: var(--text); font: inherit; font-size: 15px;
}
.field select:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(154, 84, 19, 0.12); }
#brief { padding: 30px 34px 26px; }
.brief-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.brief-note { font-size: 12.5px; color: var(--text-mute); font-family: var(--font-mono); margin: 4px 0 18px; }
.field[aria-invalid="true"] input, input[aria-invalid="true"] { border-color: #dc2626; }

/* Contact block: the main site's, with the number set where the email is */
.contact-section .contact-email { direction: ltr; }
.contact-section .btn { margin: 0 6px 12px; }

/* Arabic page */
[dir="rtl"] body, body[dir="rtl"] { font-family: "Noto Naskh Arabic", "Geeza Pro", Tahoma, var(--font-sans); }
[dir="rtl"] .page-title, [dir="rtl"] .section-title, [dir="rtl"] .article-body h2 { font-family: "Noto Naskh Arabic", "Geeza Pro", Tahoma, serif; letter-spacing: 0; line-height: 1.4; }
[dir="rtl"] .timeline { padding-left: 0; padding-right: 34px; }
[dir="rtl"] .timeline::before { left: auto; right: 7px; }
[dir="rtl"] .tl-dot { left: auto; right: -34px; }
[dir="rtl"] .crumbs, [dir="rtl"] .tl-date, [dir="rtl"] .cred-label { letter-spacing: 0; }
.ar-sub { font-family: "Noto Naskh Arabic", "Geeza Pro", Tahoma, serif; font-size: 1.5rem; color: var(--text-dim); margin: -6px 0 14px; }

@media (max-width: 900px) {
  .trip-layout { grid-template-columns: 1fr; gap: 36px; }
  .price-card { position: static; order: -1; }   /* price before the long read on phones */
  #brief { padding: 24px 20px 22px; }
}

/* Introductions run the full width of the content, the same as the cards,
   steps and forms beneath them. The main site keeps its 640px measure; on
   this site a short intro above full-width boxes read as unfinished. */
.page-lead { max-width: none; }