/* Experientzia public site. Palette from the client's forest picture, the hero's background:
   linen paper, forest greens, lake blue and sunlight gold. Fraunces for statements, Jost for text. */

/* ---------- fonts (self-hosted, Latin subset covers Swedish) ---------- */
/* Fraunces is a variable font with more axes than the site uses, so both files are cut down to what it asks for:
   SOFT stays at 100, the weights stop where the heaviest rule does, and the italic is fixed at the text optical
   size (opsz 72, WONK 0), the only way the site sets italic. Together that halves the two files. An italic
   heading at display size (--soft) would need the italic file cut again, with opsz 72..144 and WONK 0..1. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  /* Text colours are checked against --linen and --cream for WCAG AA; --leaf, --lake and --gold are for shapes only. */
  --linen: #f3f0e4;
  --linen-deep: #e4dfcb;
  --cream: #faf8f0;
  --paper: #fdfcf7;
  --ink: #1c3324;
  --ink-2: #34503d;
  --ink-deep: #10231a;
  --muted: #5b6a5c;

  --forest: #1f5a2e;
  --forest-deep: #174523;
  --moss: #47771f;
  --leaf: #8db255;
  --leaf-light: #dbe8bf;
  --lake: #5d9fb4;
  --lake-deep: #2b6478;
  --lake-light: #b7d8e2;
  --gold: #e2b04a;
  --gold-deep: #c8912c;
  --gold-text: #7c5d14;
  --gold-light: #efd08a;

  /* The Swedish flag, for the button that switches to Swedish. Yellow on this blue meets WCAG AA for small text. */
  --flag-blue: #005293;
  --flag-yellow: #fecb00;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --soft: "SOFT" 100, "WONK" 1, "opsz" 144;
  --soft-text: "SOFT" 100, "WONK" 0, "opsz" 72;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(5rem, 11vw, 9.5rem);
  --header-h: 4.75rem;
  --radius: 22px;
  --radius-lg: clamp(20px, 2.6vw, 34px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--linen); color: var(--ink); font-family: var(--body); font-size: 1.125rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--focus, var(--forest)); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--ink); }
main:focus { outline: none; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .8rem 1.3rem; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 500; text-decoration: none; transition: top .2s var(--ease); }
.skip-link:focus { top: 1rem; }

.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); opacity: .13; mix-blend-mode: multiply; }
.grain > * { position: relative; z-index: 1; }

/* Accent colours for services, steps and statements. The class names are the colour names stored with each item
   (BrandColor); since the forest palette they show forest green, gold, lake blue and moss green. */
.c-terracotta { color: var(--forest); }
.c-gold { color: var(--gold-text); }
.c-teal { color: var(--lake-deep); }
.c-plum { color: var(--moss); }

.is-terracotta { --accent: var(--forest); --accent-text: var(--forest); --on-accent: var(--cream); --glow: rgba(141, 178, 85, .34); }
.is-gold { --accent: var(--gold); --accent-text: var(--gold-text); --on-accent: var(--ink); --glow: rgba(255, 246, 222, .6); }
.is-teal { --accent: var(--lake-deep); --accent-text: var(--lake-deep); --on-accent: var(--cream); --glow: rgba(183, 216, 226, .3); }
.is-plum { --accent: var(--moss); --accent-text: var(--moss); --on-accent: var(--cream); --glow: rgba(239, 208, 138, .36); }

/* On the dark green sections the focus ring turns light gold, so it stays visible. */
.hero, .closing, .contact, .site-footer { --focus: var(--gold-light); }
/* The header sits on the hero picture until the page scrolls, and the menu panel turns it light again. */
.has-dark-hero .site-header:not(.is-scrolled):not([data-menu-open]) { --focus: var(--gold-light); }
/* The skip link keeps its ring inside its own dark pill, so it never depends on what is behind it. */
.skip-link:focus-visible { --focus: var(--gold-light); outline-offset: -5px; }

/* ---------- type ---------- */
.display { font-family: var(--display); font-variation-settings: var(--soft); font-weight: 800; line-height: .95; letter-spacing: -.012em; text-wrap: balance; overflow-wrap: break-word; }

/* Big statements are sized by their longest word (see SiteView.LengthClass), so long Swedish words fit. */
.fit-half.len-s { font-size: min(14.5vw, 6.6rem); }
.fit-half.len-m { font-size: min(10.5vw, 5rem); }
.fit-half.len-l { font-size: min(8.2vw, 3.9rem); }
.fit-half.len-xl { font-size: min(6.4vw, 3rem); }
@media (min-width: 1000px) {
  .fit-half.len-s { font-size: min(8.4vw, 6.6rem); }
  .fit-half.len-m { font-size: min(5.9vw, 5rem); }
  .fit-half.len-l { font-size: min(4.55vw, 3.9rem); }
  .fit-half.len-xl { font-size: min(3.5vw, 3rem); }
}
.fit-full.len-s { font-size: min(16vw, 8.5rem); }
.fit-full.len-m { font-size: min(11.5vw, 7rem); }
.fit-full.len-l { font-size: min(8.8vw, 5.6rem); }
.fit-full.len-xl { font-size: min(6.6vw, 4.4rem); }

.eyebrow { display: inline-flex; align-items: center; gap: .8rem; margin: 0 0 1.25rem; font-family: var(--body); font-size: .8rem; font-weight: 500; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before { content: ""; flex: none; width: 1.9rem; height: .6rem; border-radius: 2px; background: linear-gradient(to bottom, var(--gold) 0 33.3%, var(--leaf) 33.3% 66.6%, var(--lake) 66.6% 100%); }

.section-head { display: grid; gap: 1.25rem 4rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head.is-centered { justify-items: center; text-align: center; }
.section-head.is-centered .section-intro p { margin-inline: auto; }
@media (min-width: 900px) {
  .section-head:not(.is-centered) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; }
}
.section-title { font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(2.2rem, 4.6vw, 3.9rem); font-weight: 600; line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
.section-intro p { max-width: 44ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.section-intro p:last-child { margin-bottom: 0; }

/* ---------- buttons & links ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-hover-bg: var(--forest); --btn-hover-fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.05rem 1.75rem; border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 .92rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); translate: 0 -2px; box-shadow: 0 16px 30px -16px rgba(28, 51, 36, .6); }
.btn:active { translate: 0 0; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: progress; opacity: .75; translate: 0 0; box-shadow: none; }
.btn-small { padding: .78rem 1.2rem; font-size: .78rem; }
.btn-light { --btn-bg: var(--cream); --btn-fg: var(--ink-deep); --btn-hover-bg: var(--gold-light); --btn-hover-fg: var(--ink); }
.icon-arrow { width: 1.15em; height: 1.15em; flex: none; transition: translate .3s var(--ease); }
.btn:hover .icon-arrow { translate: .25rem 0; }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; padding-block: .3rem; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 2px; transition: background-size .4s var(--ease); }
.link-arrow:hover { background-position: 100% 100%; background-size: 0 2px; }

.stripes { display: grid; }
.stripes span { height: 7px; }
.stripes span:nth-child(1) { background: var(--gold); }
.stripes span:nth-child(2) { background: var(--leaf); }
.stripes span:nth-child(3) { background: var(--lake); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.site-header.is-scrolled { background: rgba(243, 240, 228, .88); box-shadow: 0 1px 0 rgba(28, 51, 36, .12), 0 14px 30px -26px rgba(28, 51, 36, .5); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
.site-header[data-menu-open] { background: var(--linen); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.header-inner { display: flex; align-items: center; gap: 1.25rem; width: min(1320px, 100% - 2 * var(--gutter)); height: var(--header-h); margin-inline: auto; }

.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .75rem; margin-right: auto; color: var(--ink); text-decoration: none; }
.brand-mark { width: 2.75rem; height: 2.75rem; border-radius: 32%; object-fit: cover; box-shadow: 0 0 0 1px rgba(28, 51, 36, .16); }
.brand-word { font-family: var(--display); font-variation-settings: var(--soft); font-size: 1.28rem; font-weight: 800; line-height: 1; letter-spacing: .05em; }

.main-nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.main-nav ul { display: flex; flex-wrap: wrap; gap: .5rem clamp(1rem, 2.1vw, 2rem); margin: 0; padding: 0; list-style: none; }
.main-nav ul a { position: relative; display: inline-block; padding-block: .45rem; color: var(--ink); font-size: .82rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; }
.main-nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: var(--forest); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.main-nav ul a:hover::after, .main-nav ul a[aria-current="true"]::after, .main-nav ul a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 1200px) and (max-width: 1379px) {
  /* Six menu links plus the badge only just fit next to the logo and buttons at these widths. */
  .main-nav { gap: 1.1rem; }
  .main-nav ul { column-gap: 1rem; }
  .main-nav ul a { letter-spacing: .08em; }
  .nav-extra { gap: .6rem; }
}
.nav-badge { display: inline-block; margin-left: .35rem; padding: .2rem .4rem .16rem; border-radius: 999px; background: var(--moss); color: var(--cream); font-size: .62rem; font-weight: 600; letter-spacing: .06em; line-height: 1; vertical-align: .12em; }
.nav-extra { display: flex; align-items: center; gap: .9rem; }
/* In the header bar, above the open phone menu like the logo and the menu button; on wide screens after the menu. */
.lang-switch { position: relative; z-index: 2; display: inline-flex; align-items: center; padding: .55rem .85rem; border: 1.5px solid rgba(28, 51, 36, .3); border-radius: 999px; color: var(--ink); font-size: .78rem; font-weight: 500; line-height: 1; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; transition: border-color .3s, background-color .3s; }
.lang-switch:hover { border-color: var(--ink); background: rgba(250, 248, 240, .6); }
.lang-switch.is-swedish { border-color: var(--flag-blue); background: var(--flag-blue); color: var(--flag-yellow); font-weight: 600; }
.lang-switch.is-swedish:hover { border-color: var(--flag-yellow); background: #003f72; }
.lang-switch-short { display: none; }
@media (min-width: 1200px) {
  .lang-switch { order: 1; }
}
@media (max-width: 480px) {
  .lang-switch { padding: .6rem .7rem; }
  .lang-switch-full { display: none; }
  .lang-switch-short { display: inline; }
}

.menu-toggle { position: relative; z-index: 2; display: none; align-items: center; gap: .65rem; padding: .65rem 1rem; border: 1.5px solid rgba(28, 51, 36, .3); border-radius: 999px; background: transparent; color: var(--ink); font: 500 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 480px) {
  .header-inner { gap: .75rem; }
  .brand { gap: .6rem; min-width: 0; }
  .brand-mark { width: 2.3rem; height: 2.3rem; }
  .brand-word { font-size: 1.02rem; letter-spacing: .03em; }
  .menu-toggle { padding: .6rem .8rem; }
}
@media (max-width: 360px) {
  .menu-toggle [data-menu-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.menu-icon { display: grid; gap: 5px; width: 18px; }
.menu-icon span { height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
[data-menu-open] .menu-icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
[data-menu-open] .menu-icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1199px) {
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; padding-block: .8rem; }
  html:not(.js) .main-nav { flex-wrap: wrap; width: 100%; }

  .js .menu-toggle { display: inline-flex; }
  .js .main-nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 2.5rem;
    padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2.5rem;
    overflow-y: auto; background: var(--linen);
    opacity: 0; visibility: hidden; transform: translateY(-.75rem);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  }
  .js [data-menu-open] .main-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .main-nav ul { flex-direction: column; flex-wrap: nowrap; gap: .2rem; }
  .js .main-nav ul a { font-family: var(--display); font-variation-settings: var(--soft); font-size: clamp(2.1rem, 9vw, 3.3rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-transform: none; }
  .js .main-nav ul a::after { bottom: .25rem; height: 3px; }
  .js .main-nav ul a .nav-badge { margin-left: .5rem; padding: .3rem .55rem .26rem; font-family: var(--body); font-size: .85rem; vertical-align: .75em; }
  .js .nav-extra { flex-wrap: wrap; justify-content: space-between; }
}

/* Over the homepage's dark hero picture the header is light, until it gets its own background (scrolled, or with the
   phone menu open). The menu links sit in the header bar only from 1200px; below that they're in the light menu panel. */
.site-header :is(.brand, .menu-toggle) { transition: color .3s var(--ease), border-color .3s var(--ease); }
.has-dark-hero .site-header:not(.is-scrolled):not([data-menu-open]) :is(.brand, .menu-toggle, .lang-switch:not(.is-swedish)) { color: var(--cream); }
.has-dark-hero .site-header:not(.is-scrolled):not([data-menu-open]) :is(.menu-toggle, .lang-switch:not(.is-swedish)) { border-color: rgba(250, 248, 240, .5); }
.has-dark-hero .site-header:not(.is-scrolled):not([data-menu-open]) .lang-switch:not(.is-swedish):hover { background: rgba(250, 248, 240, .14); }
@media (min-width: 1200px) {
  .main-nav ul a { transition: color .3s var(--ease); }
  .has-dark-hero .site-header:not(.is-scrolled) .main-nav ul a { color: var(--cream); }
  .has-dark-hero .site-header:not(.is-scrolled) .main-nav ul a::after { background: var(--gold-light); }
  .has-dark-hero .site-header:not(.is-scrolled) .nav-extra .btn { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-hover-bg: var(--gold-light); --btn-hover-fg: var(--ink); }
}

/* ---------- hero ---------- */
/* The client's forest picture fills the first screen. On wide screens its middle (the plate) sits right of the text,
   which gets a dark-green shade; on portrait screens the plate and its cutlery span the top, like a poster, and the
   text sits below it. */
.hero { position: relative; overflow: clip; display: grid; align-items: center; min-height: min(100vh, 75rem); min-height: min(100svh, 75rem); margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + clamp(2.5rem, 6vh, 4.5rem)) 0 clamp(5rem, 11vh, 7.5rem); background: var(--ink-deep); color: var(--cream); }
.hero-backdrop { position: absolute; inset: 0; overflow: hidden; container-type: size; }
/* The picture's middle sits right of the text, sized so the plate with its fork and knife fits in the hero. Where it
   doesn't reach the left edge, the shade there is dark enough to hide that. Made for a 3:2 picture; other shapes are
   cropped to fit. Its left edge fades out, so where it starts inside the hero there is no line. */
.hero-backdrop > * { position: absolute; left: 63%; top: 50%; width: max(100cqw, 172.5cqh); height: auto; max-width: none; aspect-ratio: 3 / 2; object-fit: cover; translate: -50% -50%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
@media (max-width: 1199px) {
  /* Narrower landscape screens: smaller and further right, so the text stays off the plate. */
  .hero-backdrop > * { left: 69%; width: max(100cqw, 150cqh); }
}
.hero-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to bottom, rgba(16, 35, 26, .6) 0%, rgba(16, 35, 26, 0) 24%),
  linear-gradient(to top, rgba(16, 35, 26, .55) 0%, rgba(16, 35, 26, 0) 26%),
  linear-gradient(90deg, rgba(16, 35, 26, .93) 0%, rgba(16, 35, 26, .84) 24%, rgba(16, 35, 26, .5) 42%, rgba(16, 35, 26, .1) 58%, rgba(16, 35, 26, 0) 66%); }
@media (max-aspect-ratio: 4 / 5) {
  .hero { align-items: end; }
  .hero-backdrop > * { left: 50%; top: 31%; width: 200cqw; }
  .hero-shade { background: linear-gradient(to bottom, rgba(16, 35, 26, .6) 0%, rgba(16, 35, 26, 0) 15%, rgba(16, 35, 26, 0) 36%, rgba(16, 35, 26, .84) 54%, var(--ink-deep) 67%); }
}

.hero-copy { position: relative; }
/* Narrow enough that the headline wraps and everything stays left of the plate. */
.hero-copy > * { max-width: 36rem; }
.hero-title { margin-bottom: 1.5rem; color: var(--cream); }
.hero-title .w, .hero-title .w > span { display: inline-block; }
/* Sunlight, leaf and lake, light enough for the shade (like "Your case. Our mission."). */
.grad { padding-right: .05em; background: linear-gradient(100deg, var(--gold-light) 0%, var(--leaf-light) 50%, var(--lake-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The client's key sentence, with a sunlit marker stroke drawn across its lines in reading order. */
.hero-statement { max-width: 31ch; margin-bottom: 2.25rem; color: var(--cream); font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(1.28rem, 2vw, 1.7rem); font-style: italic; font-weight: 500; line-height: 1.45; text-wrap: pretty; text-shadow: 0 1px 16px rgba(16, 35, 26, .6); }
.hero-statement > span { padding-inline: .06em; background: linear-gradient(rgba(226, 176, 74, .45), rgba(226, 176, 74, .45)) no-repeat 0 88% / 100% .5em; }
.hero-statement .w, .hero-statement .w > span { display: inline-block; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

.scroll-hint { position: absolute; left: var(--gutter); bottom: 1.75rem; display: none; align-items: center; gap: .9rem; color: var(--cream); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.scroll-hint i { position: relative; width: 3.5rem; height: 2px; overflow: hidden; background: rgba(250, 248, 240, .3); }
.scroll-hint i::after { content: ""; position: absolute; inset: 0; background: var(--cream); transform: translateX(-100%); }
@media (min-width: 1000px) { .scroll-hint { display: inline-flex; } }

/* The logo road on the error pages: sunlight, forest and lake. */
.error-art path { fill: none; stroke-linecap: round; }
.road-sun { stroke: var(--gold); }
.road-leaf { stroke: var(--leaf); }
.road-lake { stroke: var(--lake); }

/* ---------- placeholder art (shown until the admin uploads a photo) ---------- */
.art { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.art::before, .art::after { content: ""; position: absolute; }
/* Without a hero picture: a lake-blue plate on dark forest, after the client's picture. */
.art-hero-top { background: radial-gradient(circle at 50% 50%, var(--lake-light) 0 12%, var(--lake) 12.5% 15%, rgba(93, 159, 180, 0) 15.5%), linear-gradient(160deg, var(--moss), var(--forest) 55%, var(--ink-deep)); }
.art-about-photo { background: linear-gradient(180deg, #3f7a4a, var(--forest-deep)); }
.art-about-photo::before { left: 8%; top: 30%; width: 54%; aspect-ratio: 1; border-radius: 50%; background: rgba(183, 216, 226, .9); mix-blend-mode: screen; }
.art-about-photo::after { right: 8%; top: 44%; width: 54%; aspect-ratio: 1; border-radius: 50%; background: rgba(226, 176, 74, .85); mix-blend-mode: screen; }
.art-closing-photo { background: linear-gradient(180deg, var(--ink-deep) 0%, var(--forest) 45%, var(--moss) 72%, var(--gold) 100%); }
.art-closing-photo::before { left: 50%; top: 60%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(180deg, #f6dc9b, var(--gold-deep)); transform: translate(-50%, -50%); }
.art-closing-photo::after { left: 0; right: 0; top: 58%; height: 32%; background: repeating-linear-gradient(180deg, transparent 0 12px, rgba(16, 35, 26, .72) 12px 18px); }

/* ---------- about ---------- */
.about { overflow: clip; background: var(--linen); }
.about-grid { display: grid; gap: clamp(3rem, 7vw, 6rem); align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.about-title { margin-bottom: 1.25rem; font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(2.4rem, 5.2vw, 4.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.about-triad { margin-bottom: 2rem; font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(1.35rem, 2.3vw, 1.95rem); font-style: italic; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.about-body p { max-width: 46ch; color: var(--ink-2); font-size: clamp(1.1rem, 1.4vw, 1.25rem); }
.about-figure { position: relative; justify-self: center; width: min(100%, 440px); }
.about-figure-sun { position: absolute; left: -16%; bottom: -9%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); }
.arch { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px var(--radius) var(--radius); background: var(--linen-deep); box-shadow: 0 40px 70px -40px rgba(28, 51, 36, .6); }
.arch-img { width: 100%; height: 100%; object-fit: cover; }

.big-words { display: grid; gap: .08em; margin: clamp(4.5rem, 10vw, 8rem) 0; padding: 0; list-style: none; }
.big-word { font-family: var(--display); font-variation-settings: var(--soft); font-size: clamp(3rem, 10.5vw, 9.2rem); font-weight: 800; line-height: .95; letter-spacing: -.025em; overflow-wrap: break-word; }
@media (min-width: 900px) {
  .big-word:nth-child(2) { padding-left: 12%; }
  .big-word:nth-child(3) { padding-left: 24%; }
}

.core { display: grid; gap: clamp(1.5rem, 4vw, 4.5rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 2px solid rgba(28, 51, 36, .14); }
@media (min-width: 900px) { .core { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; } }
.core-title { color: var(--forest); }
.core-body p { max-width: 46ch; color: var(--ink-2); }

/* ---------- statements ---------- */
.statement { overflow: clip; padding-block: clamp(5rem, 12vw, 9.5rem); background: var(--accent, var(--forest)); color: var(--on-accent, var(--cream)); text-align: center; }
.statement-sun { position: absolute; left: 50%; top: 56%; width: min(84vw, 860px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 62%); transform: translate(-50%, -50%); pointer-events: none; }
.statement-text { max-width: 15ch; margin: 0 auto; }
.statement-text .w, .steps-title .w, .closing-title .w, .contact-title .w { display: inline-block; }

/* ---------- services ---------- */
.services { background: var(--paper); }
.service-grid { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.service-card {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 300px; display: flex; flex-direction: column;
  min-height: clamp(270px, 26vw, 340px); padding: clamp(1.6rem, 2.8vw, 2.4rem);
  border-radius: var(--radius-lg); background: var(--accent); color: var(--on-accent);
  transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
@media (min-width: 1000px) { .service-card { flex-basis: 30%; } }
.service-card::after { content: ""; position: absolute; z-index: -1; right: -3.5rem; top: -3.5rem; width: 11rem; aspect-ratio: 1; border-radius: 50%; background: var(--glow); transition: transform .8s var(--ease); }
.service-card:hover { translate: 0 -6px; box-shadow: 0 34px 50px -32px rgba(28, 51, 36, .6); }
.service-card:hover::after { transform: scale(1.4); }
.service-number { margin-bottom: auto; font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(2.7rem, 4vw, 3.6rem); font-style: italic; font-weight: 500; line-height: 1; }
.service-title { margin: 2.5rem 0 .8rem; font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(1.5rem, 2.2vw, 1.95rem); font-weight: 650; line-height: 1.1; text-wrap: balance; }
.service-text { max-width: 40ch; margin: 0; font-size: 1.03rem; line-height: 1.55; }

/* ---------- steps (the road) ---------- */
.steps { overflow: clip; background: var(--linen); }
.steps-title { margin-bottom: .5rem; }
.road { --progress: 0; position: relative; isolation: isolate; display: grid; gap: clamp(2.75rem, 5vw, 4rem); max-width: 1000px; margin: clamp(3.5rem, 7vw, 5.5rem) auto 0; padding: 0; list-style: none; }
/* The line sits behind the steps, also while they fade in: a fading step is painted as one layer, so a z-index on its marker can't lift the marker above the line. */
.road::before, .road::after { content: ""; position: absolute; top: 0; bottom: 0; left: 1.75rem; z-index: -1; width: 15px; border-radius: 8px; background: linear-gradient(to right, var(--gold) 0 33.3%, var(--leaf) 33.3% 66.6%, var(--lake) 66.6% 100%); transform: translateX(-50%); }
.road::before { opacity: .2; }
.road::after { transform: translateX(-50%) scaleY(var(--progress)); transform-origin: top; }
html:not(.js) .road::after { transform: translateX(-50%); }
.road-step { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.road-marker { display: grid; place-items: center; width: 3.5rem; aspect-ratio: 1; border: 3px solid var(--accent-text); border-radius: 50%; background: var(--linen); color: var(--ink); font-family: var(--display); font-variation-settings: var(--soft-text); font-size: 1.1rem; font-style: italic; font-weight: 600; transition: background-color .5s var(--ease), color .5s var(--ease), scale .5s var(--ease); }
.road-step.is-reached .road-marker { background: var(--accent); color: var(--on-accent); scale: 1.1; }
.road-title { margin-bottom: .6rem; color: var(--accent-text); font-family: var(--display); font-variation-settings: var(--soft); font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.015em; }
.road-text { max-width: 36ch; margin: 0; color: var(--ink-2); font-size: 1.08rem; }
@media (min-width: 860px) {
  .road::before, .road::after { left: 50%; }
  .road-step { grid-template-columns: minmax(0, 1fr) 4.75rem minmax(0, 1fr); gap: 2.75rem; align-items: center; }
  .road-marker { grid-column: 2; grid-row: 1; width: 4.75rem; font-size: 1.4rem; }
  .road-card { grid-row: 1; }
  .road-step:nth-child(odd) .road-card { grid-column: 1; text-align: right; }
  .road-step:nth-child(odd) .road-text { margin-left: auto; }
  .road-step:nth-child(even) .road-card { grid-column: 3; }
}

/* ---------- closing ---------- */
.closing { overflow: clip; background: var(--ink); color: var(--cream); }
.closing.grain::after { mix-blend-mode: overlay; opacity: .18; }
.closing-sun { position: absolute; right: -24vw; top: -30vw; width: min(90vw, 1000px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(226, 176, 74, .2) 0%, rgba(93, 159, 180, .12) 42%, transparent 66%); pointer-events: none; }
.closing-title { max-width: 20ch; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.closing-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) { .closing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.closing-figure { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) clamp(80px, 12vw, 180px); background: var(--ink-2); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); }
.closing-img { width: 100%; height: 100%; object-fit: cover; }
.closing-body p { max-width: 44ch; color: rgba(250, 248, 240, .9); font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.sometimes { display: grid; gap: 1.1rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.sometimes li { font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(1.4rem, 2.4vw, 2.05rem); font-style: italic; font-weight: 500; line-height: 1.22; text-wrap: balance; }
.sometimes li:nth-child(3n + 1) { color: var(--gold-light); }
.sometimes li:nth-child(3n + 2) { color: var(--leaf-light); }
.sometimes li:nth-child(3n + 3) { color: var(--lake-light); }
.sometimes li span { padding-bottom: .08em; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 2px; transition: background-size 1.3s var(--ease-out) .35s; }
.sometimes li.is-visible span, html:not(.js) .sometimes li span { background-size: 100% 2px; }
.closing-finale { margin-top: clamp(4.5rem, 10vw, 8rem); text-align: center; }
.closing-whatever { margin-bottom: 1.1rem; font-size: .85rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; opacity: .82; }
.closing-statement { max-width: 15ch; margin: 0 auto; padding-bottom: .06em; background: linear-gradient(100deg, var(--gold-light) 0%, var(--leaf-light) 50%, var(--lake-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- contact ---------- */
.contact { overflow: clip; padding-block: var(--section); background: linear-gradient(180deg, var(--ink-deep) 0%, var(--forest-deep) 45%, #1d5a2d 80%, #23652f 100%); color: var(--cream); }
.contact.grain::after { mix-blend-mode: soft-light; opacity: .4; }
.contact-glow { position: absolute; left: 50%; bottom: -58%; width: min(125vw, 1350px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(239, 208, 138, .5) 0%, rgba(141, 178, 85, .2) 38%, transparent 64%); transform: translateX(-50%); pointer-events: none; }
.contact-grid { display: grid; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.contact-title { margin-bottom: 1.5rem; }
.contact-body p { max-width: 40ch; color: rgba(250, 248, 240, .92); font-size: clamp(1.1rem, 1.5vw, 1.25rem); }
.contact-details { display: grid; gap: 1.2rem; margin: 2.5rem 0 0; }
.contact-details:empty { display: none; }
.contact-details div { display: grid; gap: .15rem; }
.contact-details dt { font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; opacity: .78; }
.contact-details dd { margin: 0; font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(1.3rem, 2vw, 1.65rem); overflow-wrap: anywhere; }
.contact-details a { text-decoration: none; background: linear-gradient(var(--gold-light), var(--gold-light)) no-repeat 0 100% / 100% 2px; transition: background-size .35s var(--ease), color .35s var(--ease); }
.contact-details a:hover, .contact-details a:focus-visible { background-size: 100% 3px; color: var(--gold-light); }

.contact-form { display: grid; gap: 1.35rem; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--radius-lg); background: rgba(16, 35, 26, .4); box-shadow: inset 0 0 0 1px rgba(250, 248, 240, .14), 0 40px 80px -50px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.field-row { display: grid; gap: 1.35rem; }
@media (min-width: 600px) { .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: grid; gap: .45rem; align-content: start; }
.field label { font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.optional { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .72; }
.field input, .field textarea { width: 100%; padding: .8rem .9rem; border: 0; border-bottom: 2px solid rgba(250, 248, 240, .45); border-radius: 10px 10px 2px 2px; background: rgba(250, 248, 240, .07); color: var(--cream); font: inherit; font-size: 1.05rem; transition: border-color .3s, background-color .3s; }
.field input::placeholder, .field textarea::placeholder { color: rgba(250, 248, 240, .7); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold-light); background: rgba(250, 248, 240, .13); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.field [aria-invalid="true"] { border-bottom-color: #ffb09c; }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field-error { margin: 0; color: #ffd4c6; font-size: .92rem; line-height: 1.4; }
.field-check { grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-items: start; }
.field-check input { width: 1.3rem; height: 1.3rem; margin: .22rem 0 0; padding: 0; accent-color: var(--gold-light); }
.field-check label { font-size: .98rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.field-check a { color: var(--gold-light); text-underline-offset: 3px; }
.field-check .field-error { grid-column: 2; }
.field-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .25rem; }
.form-status { flex: 1 1 14rem; margin: 0; font-size: 1.02rem; line-height: 1.45; }
.form-status:empty { flex: 0 0 0; }
.form-status[data-state="success"] { color: var(--gold-light); font-weight: 500; }
.form-status[data-state="error"] { color: #ffd4c6; }
.form-banner { margin: 0; padding: .95rem 1.15rem; border-radius: 14px; background: rgba(250, 248, 240, .12); }
.form-banner[data-state="success"] { box-shadow: inset 0 0 0 1.5px var(--gold-light); }
.form-banner[data-state="error"] { box-shadow: inset 0 0 0 1.5px #ffb09c; }

/* ---------- footer ---------- */
.site-footer { overflow: clip; background: var(--ink); color: var(--cream); }
.footer-grid { display: grid; gap: 2.5rem; padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 860px) { .footer-grid { grid-template-columns: minmax(min-content, 1.4fr) 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 1rem; align-self: start; }
.footer-mark { width: 4rem; height: 4rem; border-radius: 32%; object-fit: cover; }
.footer-word { margin: 0; font-family: var(--display); font-variation-settings: var(--soft); font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: .05em; }
.footer-motto { margin: .55rem 0 0; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; opacity: .78; }
.footer-heading { margin-bottom: 1rem; font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.footer-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.footer-list a { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .35s var(--ease); }
.footer-list a:hover { background-size: 100% 1px; }
.footer-tagline { width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding-block: 1rem 2.5rem; background: linear-gradient(100deg, var(--gold-light) 0%, var(--leaf-light) 50%, var(--lake-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(1.6rem, 4.6vw, 3.8rem); text-align: center; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1.5rem 2rem; border-top: 1px solid rgba(250, 248, 240, .14); font-size: .88rem; }
.footer-bottom p { margin: 0; opacity: .72; }
/* The builder's mark: quiet enough to stay out of the way, readable enough to be a credit. */
.site-credit { font-size: .82rem; opacity: .55; }
.site-credit a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .35s var(--ease); }
.site-credit a:hover { background-size: 100% 1px; }
.back-to-top { text-decoration: none; opacity: .85; }
.back-to-top:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- standalone pages ---------- */
.page-hero { overflow: clip; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)) 0 clamp(2.5rem, 5vw, 4rem); }
.page-container { width: min(780px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.back-link { display: inline-flex; gap: .55rem; margin-bottom: 2rem; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.page-title { margin-bottom: 1rem; font-size: clamp(2.3rem, 8vw, 4.6rem); font-weight: 700; line-height: 1; }
.page-updated { margin: 0; color: var(--muted); font-size: .95rem; }
.prose { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose p:first-child { font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.55; }
.prose h2 { margin: 2.75rem 0 .75rem; color: var(--forest); font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 650; line-height: 1.15; }
.prose h3 { margin: 2rem 0 .5rem; font-family: var(--display); font-variation-settings: var(--soft-text); font-size: 1.35rem; font-weight: 650; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose a { color: var(--forest-deep); text-underline-offset: 3px; }
.prose table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: .6rem .75rem; border-bottom: 1px solid rgba(28, 51, 36, .18); text-align: left; }

/* ---------- partners page ---------- */
.partners { padding-top: clamp(3.5rem, 8vw, 6rem); }
.partners-title { margin-bottom: 0; }
.partners-empty { max-width: 44ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }

.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.partner-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .85rem;
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
  border: 1px solid rgba(28, 51, 36, .12); border-radius: var(--radius-lg); background: var(--paper);
  transition: translate .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.partner-card:hover { translate: 0 -6px; border-color: transparent; box-shadow: 0 34px 50px -32px rgba(28, 51, 36, .5); }

/* Logos arrive in every shape, so each one is fitted into the same box rather than scaled to a fixed width.
   A square mark uses the full height; a wide wordmark runs out of width first and keeps its own proportions. */
.partner-logo { display: flex; align-items: center; min-height: 4rem; }
.partner-logo-img { width: auto; max-width: min(100%, 13.75rem); max-height: 4rem; object-fit: contain; }

.partner-name { font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 650; line-height: 1.15; }
.partner-text { margin-bottom: 0; color: var(--ink-2); }
.partner-link { margin-top: auto; padding-top: .5rem; color: var(--forest); }

/* ---------- error pages ---------- */
.error-page { overflow: clip; display: grid; place-items: center; min-height: calc(100vh - var(--header-h)); margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 3rem) 0 clamp(4rem, 9vw, 7rem); text-align: center; }
.error-inner { display: grid; justify-items: center; }
.error-art { width: min(300px, 70vw); margin-bottom: 2rem; overflow: visible; }
.error-art path { stroke-width: 20; }
.error-art-ring { fill: var(--cream); }
.error-art-sun { fill: var(--gold-deep); }
.error-title { margin-bottom: 1.25rem; color: var(--forest); }
.error-body p { max-width: 42ch; margin-inline: auto; color: var(--ink-2); font-size: 1.2rem; }
.error-body { margin-bottom: 1.5rem; }

/* ---------- 3D journey ---------- */
.journey { position: relative; margin-top: calc(-1 * var(--header-h)); background: var(--linen); }
.journey-stage { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; }
.journey-scene { position: absolute; inset: 0; overflow: hidden; background: var(--linen); }
.journey-scene.grain::after { z-index: 2; opacity: .1; }
.journey-poster, .journey-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.journey-canvas { opacity: 0; transition: opacity 1.2s var(--ease); }
.journey.is-3d .journey-canvas { opacity: 1; }
.journey.is-3d .journey-poster { visibility: hidden; transition: visibility 0s linear 1.2s; }

/* Stop navigation: numbered dots on a line that fills up as you travel. */
.journey-nav { position: absolute; top: 50%; right: clamp(.75rem, 2vw, 1.75rem); z-index: 3; translate: 0 -50%; }
.journey-nav ol { position: relative; display: grid; justify-items: end; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.journey-nav ol::before, .journey-nav ol::after { content: ""; position: absolute; top: 1.1rem; bottom: 1.1rem; right: calc(1.1rem - 1px); width: 2px; border-radius: 2px; background: rgba(28, 51, 36, .22); }
.journey-nav ol::after { background: var(--moss); transform: scaleY(var(--journey-progress, 0)); transform-origin: top; }
/* Dot on the right, its label to the left; the labels are hidden until hover or focus but still take space. */
.journey-nav a { display: flex; flex-direction: row-reverse; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.journey-nav-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid rgba(28, 51, 36, .28); border-radius: 50%; background: var(--cream); font-family: var(--display); font-variation-settings: var(--soft-text); font-size: .8rem; font-weight: 700; line-height: 1; transition: background-color .3s, border-color .3s, color .3s, scale .3s var(--ease); }
.journey-nav-label { padding: .35rem .75rem; border-radius: 999px; background: rgba(250, 248, 240, .94); box-shadow: 0 10px 24px -16px rgba(16, 35, 26, .6); font-size: .74rem; font-weight: 500; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; opacity: 0; translate: .5rem 0; transition: opacity .3s, translate .3s var(--ease); pointer-events: none; }
.journey-nav a:hover .journey-nav-label, .journey-nav a:focus-visible .journey-nav-label { opacity: 1; translate: 0 0; }
.journey-nav a:hover .journey-nav-dot { border-color: var(--moss); }
.journey-nav a.is-passed .journey-nav-dot { border-color: var(--moss); color: var(--forest); }
.journey-nav a[aria-current] .journey-nav-dot { border-color: var(--moss); background: var(--moss); color: var(--cream); scale: 1.12; }
.journey-nav a:focus-visible { outline: none; }
.journey-nav a:focus-visible .journey-nav-dot { outline: 3px solid var(--ink); outline-offset: 3px; }
/* With JavaScript the dots only show between the heading and the last screen. */
.js .journey-nav { opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.js .journey.is-traveling .journey-nav { opacity: 1; visibility: visible; transition-delay: 0s; }
.js .journey-nav:focus-within { opacity: 1; visibility: visible; transition-delay: 0s; }

/* The panels scroll over the stage. Only their contents take clicks, so the dots underneath stay usable. */
.journey-panels { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.journey-panel { display: grid; align-items: center; min-height: 140vh; min-height: 140svh; padding: calc(var(--header-h) + 2rem) calc(var(--gutter) + 4rem) 3rem var(--gutter); }
.journey-panel:focus { outline: none; }
.journey-intro-copy, .journey-card { pointer-events: auto; }
.journey-intro { align-items: start; min-height: 100vh; min-height: 100svh; }
.journey-intro-copy { width: min(var(--container), 100%); margin-inline: auto; padding-top: clamp(.5rem, 5vh, 3.5rem); }
.journey-title { max-width: 11ch; margin-bottom: 1.1rem; color: var(--ink); }
.journey-title .w, .journey-title .w > span { display: inline-block; }
/* A soft paper-coloured glow keeps the text readable where the hills reach up behind it on short screens. */
.journey-lead { max-width: 32ch; color: var(--ink-2); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; text-shadow: 0 0 12px rgba(250, 248, 240, .95), 0 0 24px rgba(250, 248, 240, .8); }
.journey-lead p { margin: 0; }
.journey-hint { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; padding: .35rem .8rem .35rem .9rem; margin-left: -.9rem; border-radius: 999px; background: rgba(250, 248, 240, .82); font-weight: 500; text-decoration: none; }
.journey-hint:hover { text-decoration: underline; text-underline-offset: 4px; }

.journey-card { width: min(100%, 27rem); padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: var(--radius); background: rgba(250, 248, 240, .9); color: var(--ink); box-shadow: 0 30px 60px -36px rgba(16, 35, 26, .6); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
.journey-panel.is-left .journey-card { justify-self: start; }
.journey-panel.is-right .journey-card { justify-self: end; }
.journey-number { margin: 0 0 .3rem; color: var(--moss); font-family: var(--display); font-variation-settings: var(--soft); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; }
.journey-stop-title { margin: 0 0 .75rem; font-family: var(--display); font-variation-settings: var(--soft-text); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.05; }
.journey-text p { margin: 0 0 .8rem; color: var(--ink-2); }
.journey-text p:last-child { margin-bottom: 0; }
.journey-end { justify-items: center; min-height: 125vh; min-height: 125svh; }
.journey-end-card { width: min(100%, 38rem); text-align: center; }
.journey-panel .journey-end-card { justify-self: center; }
.journey-end-title { margin-bottom: 1rem; color: var(--forest); font-size: clamp(2.2rem, 6vw, 3.7rem); }
.journey-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; margin-top: 1.6rem; }

@media (min-width: 760px) {
  /* The last view looks into the sun; keep the card below it. */
  .journey-end-card { translate: 0 20vh; }
}

@media screen and (max-width: 759px), screen and (max-aspect-ratio: 1/1) {
  /* Portrait screens: lower half of the screen when the stop is centred; the landmark and the van show above the card. */
  .journey-panel .journey-card { justify-self: stretch; width: 100%; translate: 0 24vh; translate: 0 24svh; }
}

@media (max-width: 759px) {
  .journey-panel { padding: calc(var(--header-h) + 2rem) var(--gutter) 1.25rem; }

  /* The dots become a row under the header. */
  .journey-nav { top: calc(var(--header-h) + .6rem); right: auto; left: 50%; translate: -50% 0; }
  .journey-nav ol { grid-auto-flow: column; gap: 1.2rem; }
  .journey-nav ol::before, .journey-nav ol::after { top: calc(50% - 1px); right: 1rem; bottom: auto; left: 1rem; width: auto; height: 2px; }
  .journey-nav ol::after { transform: scaleX(var(--journey-progress, 0)); transform-origin: left; }
  .journey-nav-dot { width: 2rem; height: 2rem; font-size: .72rem; }
  .journey-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
}

@media print {
  .journey { margin-top: 0; }
  .journey-stage { display: none; }
  .journey-panels { margin-top: 0; }
  .journey-panel { display: block; min-height: 0; padding: 0 0 1.5rem; }
  .journey-card, .journey-end-card { width: auto; padding: 0; background: none; box-shadow: none; translate: none; text-align: left; }
  .journey-actions { display: none; }
}

/* Link to the journey under "How we work" */
.journey-teaser { display: flex; align-items: center; gap: 1rem; width: fit-content; max-width: 100%; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: .7rem 1.6rem .7rem .7rem; border-radius: 999px; background: var(--cream); color: var(--ink); text-decoration: none; box-shadow: 0 22px 44px -30px rgba(28, 51, 36, .6); transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
.journey-teaser:hover { translate: 0 -2px; box-shadow: 0 26px 50px -28px rgba(28, 51, 36, .7); }
.journey-teaser-art { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; }
.journey-teaser-copy { display: grid; gap: .15rem; }
.journey-teaser-text { color: var(--muted); font-size: .95rem; line-height: 1.35; }
.journey-teaser-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; line-height: 1.3; }
.journey-teaser:hover .icon-arrow { translate: .25rem 0; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes scroll-line { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes marker { from { background-size: 0% .5em; } to { background-size: 100% .5em; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-settle { from { scale: 1.1; } to { scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* On load the hero picture fades up and slowly zooms out while the headline rises, the statement comes in word by
     word (site.js staggers the words) and its marker stroke is drawn. */
  .hero-backdrop > * { animation: backdrop-in 1.4s var(--ease) both, backdrop-settle 9s cubic-bezier(.2, .6, .2, 1) both; }
  .hero-title .w > span { animation: rise 1s var(--ease-out) .15s both; }
  .hero-title .w:nth-child(2) > span { animation-delay: .23s; }
  .hero-title .w:nth-child(3) > span { animation-delay: .31s; }
  .hero-title .w:nth-child(4) > span { animation-delay: .39s; }
  .hero-title .w:nth-child(n + 5) > span { animation-delay: .47s; }
  .hero-copy .eyebrow { animation: fade-up .9s var(--ease-out) both; }
  .hero-statement .w > span { animation: rise .8s var(--ease-out) .55s both; }
  .hero-statement > span { animation: marker 1.5s cubic-bezier(.45, 0, .2, 1) 1.9s both; }
  .hero-actions { animation: fade-up .9s var(--ease-out) 1.2s both; }
  .scroll-hint { animation: fade-up .9s var(--ease-out) 1.6s both; }
  .scroll-hint i::after { animation: scroll-line 2.4s var(--ease) 2.4s infinite; }

  .js [data-reveal]:not([data-reveal="words"]) { opacity: 0; transform: translateY(1.75rem); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  .js [data-reveal="words"] .w { opacity: 0; transform: translateY(.4em) rotate(2deg); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
  .js [data-reveal="words"].is-visible .w { opacity: 1; transform: none; }
  .js [data-reveal="words"] .w:nth-child(2) { transition-delay: .07s; }
  .js [data-reveal="words"] .w:nth-child(3) { transition-delay: .14s; }
  .js [data-reveal="words"] .w:nth-child(4) { transition-delay: .21s; }
  .js [data-reveal="words"] .w:nth-child(5) { transition-delay: .28s; }
  .js [data-reveal="words"] .w:nth-child(6) { transition-delay: .35s; }
  .js [data-reveal="words"] .w:nth-child(7) { transition-delay: .42s; }
  .js [data-reveal="words"] .w:nth-child(n + 8) { transition-delay: .49s; }
}

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

/* ---------- print ---------- */
@media print {
  .js [data-reveal], .js [data-reveal="words"] .w { opacity: 1 !important; transform: none !important; }

  /* Printers drop background colours, so the dark sections would print as their own text colour on white.
     Everything that carried its colour in a background turns into ink on paper instead. */
  .hero, .statement, .closing, .contact, .site-footer, .service-card {
    background: none !important;
    color: var(--ink) !important;
    box-shadow: none !important;
  }
  .statement, .service-card { --accent: transparent; --on-accent: var(--ink); --accent-text: var(--ink); --glow: transparent; }
  .grad, .closing-statement, .footer-tagline {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--ink);
  }
  .hero-statement { color: var(--ink); text-shadow: none; background: none; }
  .closing-body p, .contact-details dd, .footer-list a, .site-footer p { color: var(--ink); }

  /* Decoration and controls that mean nothing on paper. */
  .hero-backdrop, .hero-shade, .statement-sun, .closing-sun, .contact-glow, .scroll-hint,
  .contact-form, .back-to-top, .site-header, .skip-link, .journey-nav { display: none !important; }
}