/* VYGN homepage experience layer.
   Loads after css/styles.css on index.html only. It re-themes the shared tokens (type, colour, radius)
   and adds the scroll-driven sections (xp-*). Privacy, terms and 404 keep using styles.css alone.
   Motion only runs when js/experience.js adds .xp-motion to <html>; without it every section is static. */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --paper:#F2F1EC; --surface:#FFFFFF; --ink:#0D1B2A; --ink-2:#56616D; --line:#D8D9D3;
  --plan:#0D1B2A; --on-plan:#FFFFFF; --plan-soft:rgba(13,27,42,.07); --film:rgba(227,163,95,.26);
  --field:#FFFFFF;
  --night:#0B1726; --night-2:#14243A; --on-night:#F2F1EC; --on-night-2:rgba(242,241,236,.68); --night-line:rgba(242,241,236,.14);
  --accent:#E3A35F; --accent-ink:#0B1726; --accent-text:#8A5220;
  --logo-plate:#F4F4F2; --logo-navy:#3E4860; /* the logo's own colours, on white like the van decal */
  --f-display:"Geist","Segoe UI",system-ui,sans-serif;
  --f-body:"Geist","Segoe UI",system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --r:8px; --r-card:22px;
  --header-h:76px;
  --gut:clamp(20px, 4.2vw, 64px);
  --max:calc(var(--max-wide) - 2 * var(--gut)); /* .wrap content lines up with .xp-wrap content */
  --ease-x:cubic-bezier(.16,1,.3,1);
  --ease-o:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0D141E; --surface:#141D29; --ink:#EEEDE8; --ink-2:#A3ABB5; --line:#263140;
    --plan:#E3A35F; --on-plan:#0B1726; --plan-soft:rgba(227,163,95,.12);
    --field:#0D141E; --night:#070E18; --night-2:#101C2D; --accent-text:#E3A35F;
  }
}
:root[data-theme="dark"] {
  --paper:#0D141E; --surface:#141D29; --ink:#EEEDE8; --ink-2:#A3ABB5; --line:#263140;
  --plan:#E3A35F; --on-plan:#0B1726; --plan-soft:rgba(227,163,95,.12);
  --field:#0D141E; --night:#070E18; --night-2:#101C2D; --accent-text:#E3A35F;
}

body { font-size:1.0625rem; letter-spacing:-.005em; }
body::before { background:var(--night); } /* the notch band matches the floating header */
.section, .site-footer { padding-left:max(var(--gut), env(safe-area-inset-left, 0px)); padding-right:max(var(--gut), env(safe-area-inset-right, 0px)); }
h1, h2 { font-weight:500; font-stretch:100%; letter-spacing:-.035em; }
h2 { font-size:clamp(2.1rem, 1.2rem + 3vw, 4.25rem); line-height:1; }
h3 { font-weight:500; letter-spacing:-.02em; }
::selection { background:var(--accent); color:var(--accent-ink); }

/* The shared eyebrow becomes a mono label with a small timber square */
.eyebrow, .xp-label {
  display:flex; align-items:center; gap:10px;
  margin-bottom:1.25rem;
  font-family:var(--f-mono); font-weight:500; font-size:.75rem; line-height:1;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}
.eyebrow::before, .xp-label::before {
  content:""; flex:none; width:7px; height:7px; border:0;
  background:var(--accent);
}

/* Buttons: mono labels, soft corners */
.btn {
  border-radius:var(--r); border-width:1px;
  font-family:var(--f-mono); font-size:.8125rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  transition:background-color .25s var(--ease-o), color .25s var(--ease-o), border-color .25s var(--ease-o), transform .4s var(--ease-x);
}
.btn-sm { font-size:.75rem; }
.btn-primary:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-accent { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-accent:hover { background:var(--on-night); border-color:var(--on-night); color:var(--night); }
.btn-ghost { background:transparent; border-color:var(--night-line); color:var(--on-night); }
.btn-ghost:hover { background:var(--on-night); border-color:var(--on-night); color:var(--night); }
.btn .xp-arrow { width:1em; height:1em; transition:transform .5s var(--ease-x); }
.btn:hover .xp-arrow { transform:translateX(4px); }

/* Dark bands keep a visible focus ring */
.xp-dark :focus-visible, .site-header :focus-visible, .xp-hero :focus-visible, .site-footer :focus-visible { outline-color:var(--accent); }

/* 2. Floating header ------------------------------------------------------- */
.site-header {
  position:fixed; top:calc(12px + env(safe-area-inset-top, 0px)); left:0; right:0; z-index:40;
  padding-left:max(var(--gut), env(safe-area-inset-left, 0px)); padding-right:max(var(--gut), env(safe-area-inset-right, 0px));
  background:none; border:0; pointer-events:none;
  --logo-ink:var(--logo-light);
}
.site-header.is-scrolled { border:0; }
.site-header .header-inner {
  pointer-events:auto;
  max-width:var(--max); min-height:60px; margin-inline:auto;
  padding:8px; gap:8px 6px;
  border-radius:14px;
  background:rgba(11,23,38,.6);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 0 0 1px rgba(242,241,236,.1), 0 12px 32px rgba(5,10,18,.18);
  color:var(--on-night);
  transition:background-color .4s var(--ease-o), box-shadow .4s var(--ease-o);
}
.site-header.is-scrolled .header-inner { background:rgba(11,23,38,.82); }
.site-header .brand { color:inherit; }
.site-header .brand-logo { --logo-h:34px; }
/* The logo keeps its navy and timber on a white plate, as on the van, in both themes */
.site-header .brand, .site-footer .brand {
  --logo-ink:var(--logo-navy);
  padding:5px 12px; border-radius:10px; background:var(--logo-plate);
  box-shadow:0 1px 2px rgba(5,10,18,.22);
}
.site-footer .brand { padding:12px 18px; border-radius:14px; }
.site-header .brand:focus-visible, .site-footer .brand:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.site-nav a {
  position:relative; color:rgba(242,241,236,.86);
  font-weight:500; font-size:.9375rem; text-decoration:none;
  transition:color .3s var(--ease-o);
}
.site-nav a::after {
  content:""; position:absolute; left:50%; bottom:5px;
  width:5px; height:5px; background:var(--accent);
  opacity:0; transform:translateX(-50%) scale(0);
  transition:transform .9s var(--ease-x), opacity .3s var(--ease-o);
}
.site-nav a:hover, .site-nav a:focus-visible { color:var(--accent); text-decoration:none; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { opacity:1; transform:translateX(-50%) scale(1); }
.site-header .header-cta { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.site-header .header-cta:hover { background:var(--on-night); border-color:var(--on-night); color:var(--night); }
.site-header .nav-toggle {
  border:1px solid rgba(242,241,236,.24); border-radius:var(--r); color:var(--on-night);
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.site-header .nav-toggle[aria-expanded="true"] { background:var(--on-night); color:var(--night); }

@media (max-width: 759.98px) {
  :root { --header-h:68px; }
  .site-header { top:calc(8px + env(safe-area-inset-top, 0px)); }
  .site-header .header-inner { min-height:54px; padding:6px; }
  .site-header .brand-logo { --logo-h:30px; }
  .site-header .brand { padding:5px 10px; }
  /* The header pill's backdrop-filter makes it the menu's containing block: the menu hangs under the pill, edge to edge */
  .site-nav {
    top:calc(100% + 8px); left:0; right:0;
    padding:6px 18px 10px; border:0; border-radius:14px;
    background:var(--night);
    box-shadow:inset 0 0 0 1px rgba(242,241,236,.1), 0 12px 32px rgba(5,10,18,.28);
  }
  .site-nav.is-open::after { display:none; }
  .site-nav li + li { border-top-color:var(--night-line); }
  .site-nav a { color:var(--on-night); }
  .site-nav a::after { left:auto; right:0; bottom:50%; transform:translateY(50%) scale(0); }
  .site-nav a:hover::after, .site-nav a:focus-visible::after { transform:translateY(50%) scale(1); }
}
@media (max-width: 379.98px) { .site-header .header-cta { display:none; } }

/* The fixed header no longer pushes content down: sections that sit under it pad themselves */
:where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top:calc(var(--header-h) + 28px); }
.section { scroll-margin-top:calc(var(--header-h) + 12px); }

/* 3. Shared pieces --------------------------------------------------------- */
.xp-wrap { width:100%; max-width:var(--max-wide); margin-inline:auto; padding-inline:max(var(--gut), env(safe-area-inset-left, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)); }
.xp-dark { background:var(--night); color:var(--on-night); --ink:var(--on-night); --ink-2:var(--on-night-2); --line:var(--night-line); --logo-ink:var(--logo-light); }
.xp-dark .eyebrow, .xp-dark .xp-label { color:var(--on-night-2); }

/* A folder-tab notch where a light band meets a dark one */
.xp-notch { position:relative; height:44px; margin-bottom:-1px; background:var(--night);
  clip-path:polygon(0 0, 34% 0, calc(34% + 44px) 100%, 100% 100%, 0 100%); }
.xp-notch--right { clip-path:polygon(100% 0, 66% 0, calc(66% - 44px) 100%, 0 100%, 100% 100%); }
.xp-notch--up { background:var(--paper); margin-top:-44px; margin-bottom:0;
  clip-path:polygon(0 100%, 0 0, 22% 0, calc(22% + 44px) 100%); }
@media (max-width: 759.98px) { .xp-notch { height:28px; clip-path:polygon(0 0, 48% 0, calc(48% + 28px) 100%, 100% 100%, 0 100%); } }

/* Registration crosses at grid corners */
.xp-cross { position:absolute; width:11px; height:11px; margin:-6px 0 0 -6px; pointer-events:none; color:var(--ink-2); opacity:.7;
  background:linear-gradient(currentColor,currentColor) center/11px 1px no-repeat, linear-gradient(currentColor,currentColor) center/1px 11px no-repeat; }
.xp-motion .is-in .xp-cross { animation:xp-flicker .9s steps(1, end) both; }
.xp-motion .is-in .xp-cross:nth-child(2n) { animation-delay:.15s; }
.xp-motion .is-in .xp-cross:nth-child(3n) { animation-delay:.32s; }
@keyframes xp-flicker { 0%{opacity:0} 18%{opacity:.8} 26%{opacity:0} 42%{opacity:.8} 50%{opacity:.1} 64%,100%{opacity:.7} }

/* Odometer digits (built by experience.js) */
.xp-odo { display:inline-flex; font-variant-numeric:tabular-nums; }
.xp-odo-col { display:inline-block; height:1em; overflow:hidden; line-height:1; }
.xp-odo-stack { display:flex; flex-direction:column; transition:transform 1.1s var(--ease-x); will-change:transform; }
.xp-odo-stack > span { display:block; height:1em; line-height:1; }

/* Split characters and words */
.xp-split { display:inline; }
.xp-ch { display:inline-block; white-space:pre; will-change:opacity, transform; }
.xp-word { display:inline-block; white-space:nowrap; }
.xp-w { transition:opacity .35s linear; }

/* 4. Hero: pinned photo sequence with swapping headlines ------------------- */
.xp-hero { position:relative; background:var(--night); color:var(--on-night); }
.xp-hero-sticky { position:relative; min-height:100vh; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; }
.xp-hero-media { position:absolute; inset:0; z-index:-2; }
.xp-frame { position:absolute; inset:0; display:block; opacity:0; transform-origin:50% 60%; }
.xp-frame:first-child { opacity:1; }
.xp-frame img { width:100%; height:100%; max-width:none; object-fit:cover; }
.xp-hero-shade { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,23,38,.62) 0%, rgba(11,23,38,.18) 30%, rgba(11,23,38,.28) 55%, rgba(11,23,38,.94) 100%); }
.xp-hero-copy { width:100%; max-width:var(--max-wide); margin-inline:auto;
  padding:calc(var(--header-h) + 72px) max(var(--gut), env(safe-area-inset-right, 0px)) clamp(36px, 6vh, 80px) max(var(--gut), env(safe-area-inset-left, 0px)); }
.xp-hero .xp-label { color:var(--on-night-2); }
.xp-lines { font-family:var(--f-display); font-weight:400; font-size:clamp(2.2rem, 1rem + 4.6vw, 7.25rem); line-height:.98; letter-spacing:-.045em; max-width:15ch; }
.xp-line { display:inline; }
.xp-line + .xp-line::before { content:" "; }
.xp-hero-foot { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 32px; margin-top:clamp(28px, 4vh, 48px); }
.xp-hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.xp-hero-meta { display:flex; align-items:center; gap:16px; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-night-2); }
.xp-hero-meta[hidden] { display:none !important; }
.xp-hero-count { color:var(--on-night); }
.xp-hero-bar { position:relative; width:clamp(90px, 12vw, 180px); height:1px; background:var(--night-line); overflow:hidden; }
.xp-hero-bar i { position:absolute; inset:0; background:var(--accent); transform:scaleX(var(--p, 0)); transform-origin:left; }
.xp-hero-steps { display:flex; gap:14px; }
.xp-hero-steps span { transition:color .4s var(--ease-o); }
.xp-hero-steps span.is-on { color:var(--accent); }

.xp-motion .xp-hero { height:320vh; }
.xp-motion .xp-hero-sticky { position:sticky; top:0; height:100vh; height:100svh; }
.xp-motion .xp-lines { display:grid; max-width:16ch; }
.xp-motion .xp-line { display:block; grid-area:1 / 1; align-self:end; }
.xp-motion .xp-line + .xp-line::before { content:none; }
.xp-motion .xp-line .xp-ch { opacity:0; transition:opacity .16s linear; }
.xp-motion .xp-line .xp-ch.is-on { opacity:1; }

/* "Scroll to explore": a label that trails the pointer on desktop, a bottom cue on touch screens */
.xp-cursor { position:fixed; left:0; top:0; z-index:35; pointer-events:none; display:none;
  font-family:var(--f-mono); font-size:max(11px, .68vw); font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; mix-blend-mode:difference; white-space:nowrap; }
.xp-cursor .xp-ch { opacity:0; transition:opacity .25s var(--ease-o); }
.xp-cursor.is-on .xp-ch { opacity:1; }
.xp-scrollcue { position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); display:none;
  flex-direction:column; align-items:center; gap:12px; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-night-2);
  transition:opacity .4s var(--ease-o); }
.xp-scrollcue i { position:relative; width:1px; height:34px; background:var(--night-line); overflow:hidden; }
.xp-scrollcue i::after { content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--accent); animation:xp-cue 1.8s var(--ease-o) infinite; }
@keyframes xp-cue { to { top:100%; } }
@media (hover: hover) and (pointer: fine) { .xp-motion .xp-cursor { display:block; } }
@media (hover: none), (pointer: coarse) { .xp-motion .xp-scrollcue { display:flex; } }
.xp-scrollcue.is-gone { opacity:0; }
@media (max-width: 759.98px) {
  .xp-hero-copy { padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  .xp-hero-meta { display:none; }
  .xp-hero-actions .btn { flex:1 1 auto; }
}

/* 5. Intro statement with words that fill in as you scroll ----------------- */
.xp-intro { padding-block:clamp(96px, 13vw, 200px) clamp(56px, 7vw, 104px); background:var(--paper); }
.xp-statement { font-family:var(--f-display); font-weight:400; font-size:clamp(1.9rem, 1rem + 3.3vw, 4.5rem); line-height:1.04; letter-spacing:-.04em; max-width:21ch; color:var(--ink); text-wrap:balance; }
.xp-statement strong { font-weight:400; color:inherit; background:linear-gradient(var(--accent), var(--accent)) no-repeat 0 92% / var(--hl, 100%) .09em; transition:background-size .9s var(--ease-x); }
.xp-motion .xp-statement .xp-w { opacity:.16; }
.xp-motion .xp-statement strong { --hl:0%; }
.xp-motion .xp-statement strong.is-lit { --hl:100%; }

/* 6. Facts grid with crosses and a pointer glow ---------------------------- */
.xp-facts-wrap { padding-bottom:clamp(72px, 9vw, 140px); background:var(--paper); }
.xp-facts { position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); list-style:none; margin:0; padding:0; }
.xp-fact { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:28px; min-height:clamp(150px, 15vw, 210px); padding:clamp(18px, 2vw, 30px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.xp-fact-k { font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.xp-fact-v { position:relative; z-index:1; font-family:var(--f-display); font-size:clamp(1.35rem, 1rem + 1.2vw, 2.25rem); line-height:1.05; letter-spacing:-.03em; }
.xp-fact-v .xp-odo { font-size:1em; }
.xp-fact::after { content:""; position:absolute; left:var(--mx, 50%); top:var(--my, 50%); width:26rem; height:26rem; margin:-13rem 0 0 -13rem; pointer-events:none;
  background:radial-gradient(circle, rgba(227,163,95,.55), transparent 60%); opacity:0; transition:opacity .5s var(--ease-o); }
@media (hover: hover) and (pointer: fine) { .xp-fact:hover::after { opacity:.28; } }
.xp-facts > .xp-cross { z-index:2; }
@media (min-width: 1000px) { .xp-facts { grid-template-columns:repeat(4, minmax(0, 1fr)); } }

/* 7. Ways in: three rounded cards ------------------------------------------ */
.xp-paths { padding-block:clamp(72px, 9vw, 140px); background:var(--surface); }
.xp-paths-head { display:grid; gap:20px 40px; align-items:end; margin-bottom:clamp(36px, 5vw, 64px); }
.xp-paths-head h2 { max-width:14ch; }
.xp-paths-head p { max-width:34em; color:var(--ink-2); font-size:1.125rem; }
@media (min-width: 1000px) { .xp-paths-head { grid-template-columns:1.3fr 1fr; } }
.xp-cards { display:grid; gap:16px; list-style:none; margin:0; padding:0; }
@media (min-width: 900px) { .xp-cards { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.xp-card { position:relative; display:flex; flex-direction:column; gap:28px; padding:clamp(24px, 2.6vw, 40px); border-radius:var(--r-card); background:var(--paper); color:var(--ink); }
.xp-card-eyebrow { display:flex; gap:14px; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.xp-card-eyebrow b { font-weight:500; color:var(--accent-text); }
.xp-card h3 { font-size:clamp(1.5rem, 1.1rem + 1vw, 2.25rem); line-height:1.08; letter-spacing:-.03em; margin-bottom:.7rem; }
.xp-card p { color:var(--ink-2); }
.xp-card-media { position:relative; aspect-ratio:16 / 10; margin-top:auto; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--night); }
.xp-card-media img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-x); }
.xp-card-credit { position:absolute; right:10px; bottom:8px; font-family:var(--f-mono); font-size:.625rem; letter-spacing:.08em; color:rgba(255,255,255,.86); text-shadow:0 1px 2px rgba(0,0,0,.6); }
.xp-card-cta { display:inline-flex; align-items:center; gap:10px; align-self:flex-start; min-height:44px; font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.xp-card-cta::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.xp-card-cta .xp-arrow { width:1.1em; height:1.1em; transition:transform .5s var(--ease-x); }
.xp-card:hover .xp-card-media img { transform:scale(1.045); }
.xp-card:hover .xp-card-cta .xp-arrow { transform:translateX(5px); }
.xp-card:hover .xp-card-cta { color:var(--accent-text); }
.xp-card:has(.xp-card-cta:focus-visible) { outline:3px solid var(--plan); outline-offset:3px; }
.xp-card-cta:focus-visible { outline:none; }

/* 8. Services: an expanding card rail -------------------------------------- */
.xp-services { padding-block:clamp(72px, 9vw, 140px); background:var(--paper); overflow:hidden; }
.xp-services-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(32px, 4vw, 56px); }
.xp-services-head p { max-width:30em; margin-top:1rem; color:var(--ink-2); font-size:1.125rem; }
.xp-rail-nav { display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; color:var(--ink-2); }
.xp-rail-btn { display:inline-grid; place-items:center; width:48px; height:48px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); transition:background-color .3s var(--ease-o), color .3s var(--ease-o), border-color .3s var(--ease-o); }
.xp-rail-btn:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.xp-rail-btn:disabled { opacity:.4; cursor:default; background:var(--surface); color:var(--ink); border-color:var(--line); }
.xp-rail-btn .icon { width:20px; height:20px; }
.xp-rail { display:flex; gap:10px; list-style:none; margin:0; padding:0 0 4px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.xp-rail::-webkit-scrollbar { display:none; }
.xp-svc { position:relative; flex:0 0 min(84vw, 420px); min-height:520px; scroll-snap-align:start; border-radius:18px; overflow:hidden; background:var(--night); color:var(--on-night); isolation:isolate; }
.xp-svc-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s var(--ease-x), filter .8s var(--ease-o); }
.xp-svc::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,23,38,.45) 0%, rgba(11,23,38,.05) 35%, rgba(11,23,38,.9) 100%); }
.xp-svc-tab { display:none; }
.xp-svc-body { position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:12px; padding:24px; }
.xp-svc-num { font-family:var(--f-mono); font-size:.75rem; letter-spacing:.16em; color:var(--accent); }
.xp-svc-body h3 { font-size:clamp(1.4rem, 1.1rem + .9vw, 2rem); line-height:1.08; letter-spacing:-.03em; color:var(--on-night); }
.xp-svc-body h3:focus { outline:none; }
.xp-svc-body p { color:var(--on-night-2); font-size:1rem; max-width:32em; }
.xp-svc-meta { font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-night-2); }
.xp-svc-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.xp-svc-links .btn { min-height:44px; }
.xp-svc-top { position:absolute; left:24px; top:22px; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.16em; color:var(--accent); }

/* From 1024px experience.js adds .is-acc: the cards fold into tabs and one opens at a time.
   Without it (no JavaScript) the rail scrolls sideways at every width. */
.xp-rail:not(.is-acc) { margin-inline:calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px))); padding-inline:max(var(--gut), env(safe-area-inset-left, 0px)); scroll-padding-inline:max(var(--gut), env(safe-area-inset-left, 0px)); }
.xp-rail-nav[hidden] { display:none; }
@media (min-width: 1024px) {
  .xp-rail.is-acc { gap:8px; margin-inline:0; padding-inline:0; overflow:visible; scroll-snap-type:none; height:600px; }
  .is-acc .xp-svc { flex:0 0 60px; min-height:0; height:100%; transition:flex-grow .9s var(--ease-x); cursor:pointer; }
  .is-acc .xp-svc.is-open { flex-grow:1; cursor:default; }
  .is-acc .xp-svc:not(.is-open) .xp-svc-img { filter:grayscale(.6) brightness(.7); }
  .is-acc .xp-svc:not(.is-open):hover .xp-svc-img { filter:grayscale(0) brightness(.85); }
  .is-acc .xp-svc.is-open .xp-svc-img { transform:scale(1.02); }
  .is-acc .xp-svc-tab { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:22px 0;
    border:0; background:transparent; color:var(--on-night); text-align:left; }
  .is-acc .xp-svc-tab span:first-child { font-family:var(--f-mono); font-size:.75rem; letter-spacing:.16em; color:var(--accent); }
  .is-acc .xp-svc-tab span:last-child { writing-mode:vertical-rl; transform:rotate(180deg); font-size:1.0625rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap; }
  .is-acc .xp-svc-tab:focus-visible { outline-offset:-6px; border-radius:18px; }
  .is-acc .xp-svc.is-open .xp-svc-tab { display:none; }
  .is-acc .xp-svc-body { padding:32px; width:clamp(330px, 100%, 560px); } /* keeps its width while the card opens; the card clips it */
  .is-acc .xp-svc:not(.is-open) .xp-svc-body, .is-acc .xp-svc:not(.is-open) .xp-svc-top { visibility:hidden; opacity:0; }
  .is-acc .xp-svc .xp-svc-body > * { transition:opacity .6s var(--ease-o) .25s, transform .9s var(--ease-x) .2s; }
  .is-acc .xp-svc:not(.is-open) .xp-svc-body > * { opacity:0; transform:translateY(16px); transition:none; }
}
@media (min-width: 1280px) { .is-acc .xp-svc { flex-basis:72px; } }

/* 9. Process: pinned steps with a rolling counter -------------------------- */
.xp-process { padding-top:clamp(64px, 8vw, 120px); padding-bottom:44px; } /* room for the paper notch that follows */
.xp-process-head { display:grid; gap:20px 48px; align-items:end; margin-bottom:clamp(40px, 5vw, 72px); }
.xp-process-head h2 { max-width:12ch; }
.xp-process-head .xp-copy p { color:var(--on-night-2); font-size:1.125rem; max-width:34em; }
.xp-process-head .xp-copy p + p { margin-top:.9em; }
@media (min-width: 1000px) { .xp-process-head { grid-template-columns:1.2fr 1fr; } }
.xp-steps { padding-bottom:clamp(72px, 9vw, 140px); }
.xp-steps-list { display:grid; gap:40px; list-style:none; margin:0; padding:0; counter-reset:none; }
.xp-step-num { display:block; margin-bottom:12px; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.16em; color:var(--accent); }
.xp-step h3 { font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.5rem); line-height:1.05; letter-spacing:-.03em; color:var(--on-night); }
.xp-step p { margin-top:.7rem; color:var(--on-night-2); max-width:30em; }
.xp-step-fig { position:relative; margin-top:22px; aspect-ratio:4 / 3; border-radius:16px; overflow:hidden; background:var(--night-2); }
.xp-step-fig img { width:100%; height:100%; object-fit:cover; }
.xp-step-fig figcaption { position:absolute; left:14px; bottom:12px; z-index:3; font-family:var(--f-mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.9); text-shadow:0 1px 3px rgba(0,0,0,.6); }
.xp-odo-big { display:none; }
.xp-steps-bar { display:none; }

/* Protection film over the last photo */
.xp-film { position:absolute; inset:0; z-index:2; display:flex; align-items:center; overflow:hidden; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.34), rgba(227,163,95,.22) 40%, rgba(255,255,255,.28) 70%, rgba(227,163,95,.18));
  -webkit-backdrop-filter:saturate(.7) blur(1.5px); backdrop-filter:saturate(.7) blur(1.5px);
  transform:translateY(0); transition:transform 1.3s var(--ease-x); }
.xp-film span { display:block; white-space:nowrap; font-family:var(--f-mono); font-size:.75rem; font-weight:500; letter-spacing:.3em; color:rgba(11,23,38,.55); animation:xp-marquee 22s linear infinite; }
@keyframes xp-marquee { to { transform:translateX(-50%); } }
.xp-motion .xp-step:not(.is-active) .xp-film { transform:translateY(101%); }

@media (min-width: 1000px) {
  .xp-motion .xp-steps { height:calc(4 * 85vh); padding-bottom:0; }
  .xp-motion .xp-steps-sticky { position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; align-items:center;
    padding-top:calc(var(--header-h) + 24px); padding-bottom:40px; }
  .xp-motion .xp-steps-left { display:flex; flex-direction:column; gap:28px; }
  .xp-motion .xp-odo-big { display:flex; align-items:baseline; gap:.15em; font-family:var(--f-display); font-weight:300; font-size:clamp(5rem, 9vw, 10rem); line-height:1; letter-spacing:-.05em; color:var(--on-night); }
  .xp-motion .xp-odo-big small { font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.14em; color:var(--on-night-2); }
  .xp-motion .xp-steps-list { gap:0; border-top:1px solid var(--night-line); }
  .xp-motion .xp-step { padding-block:18px; border-bottom:1px solid var(--night-line); opacity:.42; transition:opacity .5s var(--ease-o); }
  .xp-motion .xp-step.is-active { opacity:1; }
  .xp-motion .xp-step h3 { font-size:clamp(1.25rem, .9rem + .8vw, 1.75rem); }
  .xp-motion .xp-step-num { margin-bottom:6px; }
  .xp-motion .xp-step-text p { display:grid; grid-template-rows:0fr; overflow:hidden; margin-top:0; transition:grid-template-rows .7s var(--ease-x), margin-top .7s var(--ease-x); }
  .xp-motion .xp-step-text p > span { min-height:0; }
  .xp-motion .xp-step.is-active .xp-step-text p { grid-template-rows:1fr; margin-top:.6rem; }
  .xp-motion .xp-step-fig { position:absolute; right:0; top:calc(var(--header-h) + 24px); bottom:40px; width:calc((100% - 48px) * 7 / 12); margin:0; aspect-ratio:auto;
    clip-path:inset(100% 0 0 0 round 16px); transition:clip-path 1.1s var(--ease-x); }
  .xp-motion .xp-step-fig img { transform:scale(1.12); transition:transform 1.6s var(--ease-x); }
  .xp-motion .xp-step.is-active .xp-step-fig { clip-path:inset(0 0 0 0 round 16px); z-index:1; }
  .xp-motion .xp-step.is-past .xp-step-fig { clip-path:inset(0 0 0 0 round 16px); }
  .xp-motion .xp-step.is-active .xp-step-fig img { transform:scale(1); }
  .xp-motion .xp-steps-bar { display:block; position:relative; height:1px; background:var(--night-line); }
  .xp-motion .xp-steps-bar i { position:absolute; inset:0; background:var(--accent); transform:scaleX(var(--p, 0)); transform-origin:left; }
}
/* Static steps (narrow screens, or no motion): two columns, then four */
@media (min-width: 760px) {
  .xp-steps-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:48px 28px; }
}
@media (min-width: 1200px) {
  html:not(.xp-motion) .xp-steps-list { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .xp-motion .xp-steps-list { grid-template-columns:minmax(0, 1fr); }
}

/* 10. Featured project: a draggable strip ---------------------------------- */
.xp-project { padding-block:clamp(88px, 10vw, 150px) clamp(72px, 9vw, 140px); background:var(--paper); overflow:hidden; }
.xp-project-head { display:grid; gap:24px 56px; margin-bottom:clamp(32px, 4vw, 56px); }
.xp-project-head h2 { max-width:12ch; }
.xp-project-head .project-text { color:var(--ink-2); font-size:1.0625rem; max-width:40em; }
.xp-project-head .project-label { margin-top:1.4rem; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.xp-project-head .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:.8rem; }
.xp-project-head .chip { padding:.4rem .75rem; border:1px solid var(--line); border-radius:999px; font-size:.875rem; }
@media (min-width: 1000px) { .xp-project-head { grid-template-columns:1fr 1.15fr; align-items:end; } }
.xp-strip-wrap { position:relative; }
.xp-strip { display:flex; gap:12px; list-style:none; margin:0; padding:0 0 6px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain;
  margin-inline:calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px))); padding-inline:max(var(--gut), env(safe-area-inset-left, 0px)); scroll-padding-inline:max(var(--gut), env(safe-area-inset-left, 0px)); }
.xp-strip::-webkit-scrollbar { display:none; }
.xp-strip.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.xp-strip.is-dragging a { pointer-events:none; }
.xp-strip > li { flex:0 0 auto; scroll-snap-align:start; }
.xp-strip .work-link { display:block; height:clamp(240px, 34vw, 440px); aspect-ratio:3 / 2; border-radius:14px; overflow:hidden; background:var(--night); }
.xp-strip > li:nth-child(3n+2) .work-link { aspect-ratio:4 / 5; }
.xp-strip .work-link img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-x); -webkit-user-drag:none; user-select:none; }
.xp-strip .work-link:hover img { transform:scale(1.04); }
.xp-strip-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:16px; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.xp-strip-bar { position:relative; flex:1 1 160px; max-width:260px; align-self:center; height:1px; background:var(--line); }
.xp-strip-bar i { position:absolute; left:0; top:0; height:1px; width:var(--w, 20%); background:var(--accent); transform:translateX(var(--x, 0)); }

/* 11. Work gallery and contact: shared sections, lightly re-skinned --------- */
.work, .contact { border-top:0; }
.work { background:var(--surface); }
.section-head h2 { font-size:clamp(2.1rem, 1.2rem + 3vw, 4.25rem); }
.filter { border-radius:999px; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.work-fig, .work-link, .work-item img { border-radius:12px; }
.work-cta { border-radius:var(--r-card); }
.contact-card, .form-panel, .c-result { border-radius:var(--r-card); }

/* 12. FAQ: tabs over an accordion ------------------------------------------ */
.xp-faq { padding-block:clamp(72px, 9vw, 140px); background:var(--paper); border-top:1px solid var(--line); }
.xp-faq-grid { display:grid; gap:32px 64px; }
@media (min-width: 1000px) { .xp-faq-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); } }
.xp-faq-intro p { margin-top:1rem; color:var(--ink-2); font-size:1.125rem; max-width:26em; }
.xp-tabs { display:inline-flex; gap:4px; padding:4px; margin-bottom:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.xp-tab { min-height:44px; padding:0 18px; border:0; border-radius:9px; background:transparent; color:var(--ink-2);
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; transition:background-color .3s var(--ease-o), color .3s var(--ease-o); }
.xp-tab[aria-selected="true"] { background:var(--ink); color:var(--paper); }
.xp-tab:not([aria-selected="true"]):hover { color:var(--ink); }
.xp-tabs[hidden] { display:none; }
/* Without JavaScript every group shows under its own heading; with it, the tabs name the groups */
.xp-acc-group { margin:32px 0 8px; font-family:var(--f-mono); font-size:.75rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.xp-acc-panel:first-child .xp-acc-group { margin-top:0; }
.xp-js .xp-acc-group { display:none; }
.xp-acc { border-top:1px solid var(--line); }
.xp-acc details { border-bottom:1px solid var(--line); }
.xp-acc summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding-block:14px; cursor:pointer; list-style:none;
  font-size:clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight:500; letter-spacing:-.015em; }
.xp-acc summary::-webkit-details-marker { display:none; }
.xp-acc summary i { position:relative; flex:none; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; transition:transform .6s var(--ease-x), background-color .3s var(--ease-o); }
.xp-acc summary i::before, .xp-acc summary i::after { content:""; position:absolute; left:50%; top:50%; width:10px; height:1px; margin:-.5px 0 0 -5px; background:currentColor; transition:transform .6s var(--ease-x); }
.xp-acc summary i::after { transform:rotate(90deg); }
.xp-acc details[open] summary i { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:rotate(180deg); }
.xp-acc details[open] summary i::after { transform:rotate(0deg); }
.xp-acc summary:hover { color:var(--accent-text); }
.xp-acc .xp-acc-body { padding:0 44px 22px 0; color:var(--ink-2); max-width:40em; }
.xp-acc .xp-acc-body p + p { margin-top:.7em; }
.xp-acc .xp-acc-body a { color:var(--ink); text-underline-offset:.18em; }
@supports (interpolate-size: allow-keywords) {
  .xp-acc details { interpolate-size:allow-keywords; }
  .xp-acc details::details-content { height:0; overflow:hidden; transition:height .55s var(--ease-x), content-visibility .55s allow-discrete; }
  .xp-acc details[open]::details-content { height:auto; }
}

/* 13. Footer on the night band --------------------------------------------- */
.site-footer { background:var(--night); color:var(--on-night); border-top:0; --ink:var(--on-night); --ink-2:var(--on-night-2); --line:var(--night-line); --logo-ink:var(--logo-light); }
.site-footer a { color:inherit; }
.site-footer a:hover { color:var(--accent); }
.xp-footer-cta { padding-block:clamp(72px, 9vw, 140px) clamp(40px, 5vw, 64px); }
.xp-footer-cta p { font-family:var(--f-display); font-size:clamp(2.2rem, 1rem + 5vw, 7rem); line-height:.95; letter-spacing:-.05em; max-width:13ch; }
.xp-footer-cta .btn { margin-top:28px; }

/* 14. Reveal on entry ------------------------------------------------------ */
.xp-motion [data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-o), transform 1.2s var(--ease-x); transition-delay:var(--d, 0s); }
.xp-motion [data-reveal].is-in { opacity:1; transform:none; }

/* 15. Reduced motion: everything static ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .xp-film span, .xp-scrollcue i::after, .xp-cross { animation:none !important; }
  .xp-odo-stack, .xp-svc, .xp-svc-img, .xp-card-media img, .xp-step-fig, .xp-step-fig img { transition:none !important; }
}