/* ==========================================================================
   NIGEL STONE SURVEYORS — site styles (not for client edits)
   Layout concept: a surveyor's drawing set. Cool drawing-film paper sections
   alternate with deep slate-navy "site" sections; mono annotations, scale bars
   and title blocks carry the vernacular of measured drawings.
   ========================================================================== */

:root {
  /* Colour */
  --ink: #0d1a29;          /* slate navy: text on paper, dark sections */
  --ink-2: #13263a;
  --ink-3: #1d344c;
  --paper: #eef1ed;        /* drawing film, faint green bias */
  --paper-2: #e2e8e2;
  --sheet: #f7f9f6;
  --muted: #566271;
  --on-dark: #e8eef0;
  --muted-dark: #9aa9b6;
  --moss: #2e7d55;         /* brand green, deepened */
  --lichen: #94d3a6;       /* brand green on dark */
  --blue: #2c44a0;         /* brand blue square */
  --green: #20a34b;        /* brand green square */
  --rule: rgba(13, 26, 41, .14);
  --rule-dark: rgba(232, 238, 240, .16);

  /* Type */
  --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --gutter: clamp(16px, 4.4vw, 72px);
  --maxw: 1440px;
  --header-h: 76px;
  --ease: cubic-bezier(.16, .84, .24, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--on-dark); padding: 10px 14px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Brand squares (from the logo) */
.sq { display: inline-block; width: 10px; height: 10px; flex: none; }
.sq--blue { background: var(--blue); }
.sq--green { background: var(--green); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --bg: var(--on-dark); --fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 26px; border: 1px solid var(--bg); border-radius: 0;
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  font: 500 15px/1 var(--f-body); letter-spacing: .01em; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green);
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: #fff; border-color: var(--green); }
.btn .arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--on-dark); border-color: rgba(232, 238, 240, .45); }
.btn--ink { --bg: var(--ink); --fg: var(--on-dark); }
.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn--wide { width: 100%; justify-content: center; }
.btn > span, .btn > svg { position: relative; }

/* --------------------------------------------------------------------------
   Loader, cursor, scale bar
   -------------------------------------------------------------------------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 300; background: var(--ink); color: var(--on-dark);
  display: grid; place-items: center; animation: loader-failsafe 0s 3s forwards;
}
.loader__mark { position: relative; width: 64px; height: 64px; }
.loader__mark .sq { position: absolute; width: 30px; height: 30px; }
.loader__mark .sq--blue { left: 0; bottom: 0; }
.loader__mark .sq--green { right: 0; top: 0; }
.loader__read { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; color: var(--muted-dark); }
.is-loaded .loader { pointer-events: none; }
@keyframes loader-failsafe { to { visibility: hidden; opacity: 0; } }

.reticle { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js .reticle {
    display: block; position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none;
    mix-blend-mode: difference; color: #fff;
  }
  .reticle__ring {
    position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid currentColor; border-radius: 50%;
    transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease);
  }
  .reticle__ring::before, .reticle__ring::after { content: ""; position: absolute; background: currentColor; }
  .reticle__ring::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
  .reticle__ring::after { top: 50%; left: -8px; right: -8px; height: 1px; }
  .reticle__read { position: absolute; left: 26px; top: 14px; font-size: 10px; white-space: nowrap; opacity: .8; }
  .reticle.is-hover .reticle__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .js body, .js a, .js button, .js label { cursor: none; }
  .js input, .js textarea { cursor: text; }
}

/* Measuring staff (desktop): strip scrolls, marker stays put */
.ruler { display: none; }
@media (min-width: 1100px) {
  .js .ruler {
    display: block; position: fixed; z-index: 110; right: 0; top: 0; bottom: 0; width: 58px; pointer-events: none;
    color: #fff; mix-blend-mode: difference;
  }
  .ruler::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .22; }
  .ruler__track { position: absolute; inset: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
  .ruler__strip {
    position: absolute; left: 0; top: 0; width: 100%; will-change: transform;
    background:
      linear-gradient(90deg, currentColor 0 16px, transparent 16px) 0 0 / 100% 100px repeat-y,
      linear-gradient(90deg, currentColor 0 10px, transparent 10px) 0 0 / 100% 50px repeat-y,
      linear-gradient(90deg, currentColor 0 5px, transparent 5px) 0 0 / 100% 10px repeat-y;
    -webkit-mask: repeating-linear-gradient(#000 0 1px, transparent 1px 10px); mask: repeating-linear-gradient(#000 0 1px, transparent 1px 10px);
    opacity: .55;
  }
  .ruler__nums { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
  .ruler__nums span { position: absolute; left: 22px; font: 400 10px/1 var(--f-mono); letter-spacing: .04em; transform: translateY(-50%); opacity: .7; }
  .ruler__marker { position: absolute; left: -26px; right: 0; top: 50%; height: 1px; background: var(--lichen); }
  .ruler__marker::before { content: ""; position: absolute; right: 100%; top: -3px; border: 3.5px solid transparent; border-right-color: var(--lichen); }
  .ruler__pct, .ruler__m { position: absolute; right: 8px; font-size: 9.5px; letter-spacing: .06em; color: var(--lichen); }
  .ruler__pct { bottom: 6px; }
  .ruler__m { top: 6px; }
  .ruler__label {
    position: absolute; right: 18px; bottom: 32px; writing-mode: vertical-rl; transform: rotate(180deg);
    display: flex; gap: 12px; font-size: 11px; letter-spacing: .18em; white-space: nowrap;
  }
  .ruler__n { color: var(--lichen); }
  .wrap { padding-right: max(var(--gutter), 76px); }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 100; color: var(--on-dark);
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .6s var(--ease), background-color .4s, color .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid { background: rgba(238, 241, 237, .86); color: var(--ink); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-color: var(--rule); }
.site-header.is-hidden { transform: translateY(-110%); }
.header__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand__mark { position: relative; width: 26px; height: 26px; flex: none; }
.brand__mark .sq { position: absolute; width: 13px; height: 13px; }
.brand__mark .sq--blue { left: 0; bottom: 0; }
.brand__mark .sq--green { right: 0; top: 0; }
.site-header:not(.is-solid) .brand__mark .sq--blue { background: #6f85e0; }
.brand__word { font: 500 21px/1 var(--f-display); letter-spacing: -.01em; display: flex; flex-direction: column; gap: 3px; }
.brand__word em { font: 500 9.5px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; font-style: normal; opacity: .7; }
.nav { display: flex; gap: 6px 22px; align-items: center; }
.header__end { display: flex; align-items: center; gap: 20px; }
.header__tel { text-decoration: none; }
.site-header:not(.is-solid) .btn--sm { --bg: transparent; --fg: var(--on-dark); border-color: rgba(232, 238, 240, .5); }
.site-header.is-solid .btn--sm { --bg: var(--ink); --fg: var(--on-dark); border-color: var(--ink); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; position: relative; cursor: pointer; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 26px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--on-dark);
  padding: calc(var(--header-h) + 32px + env(safe-area-inset-top, 0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io); visibility: hidden;
}
.mobile-nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav__foot { display: flex; flex-direction: column; gap: 8px; color: var(--muted-dark); }
.menu-open .site-header { color: var(--on-dark); background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 1320px) { .header__tel { display: none; } }
@media (max-width: 1100px) { .nav { display: none; } .nav-toggle { display: block; } }
@media (max-width: 520px) { .header__end .btn--sm { display: none; } }

/* --------------------------------------------------------------------------
   Shared section type
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(88px, 12vw, 180px); position: relative; }
.section--paper { background: var(--paper); }
.eyebrow { color: var(--moss); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.eyebrow--light { color: var(--lichen); }
.display {
  font: 350 clamp(44px, 6.4vw, 104px)/.98 var(--f-display); letter-spacing: -.025em;
  font-variation-settings: "opsz" 72;
}
.display em, .hero__title em, .result__title em { font-style: italic; font-weight: 300; color: var(--moss); }
.display--light { color: var(--on-dark); }
.display--light em { color: var(--lichen); }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--muted); max-width: 34em; }
.lead--light { color: var(--muted-dark); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; margin-bottom: clamp(48px, 7vw, 96px); }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

/* Line-mask reveals */
.ln { display: block; overflow: hidden; padding-block: .14em .1em; margin-block: -.14em -.1em; }
.ln > span { display: block; }
.js [data-lines] .ln > span, .js [data-split] .ln > span { transform: translateY(105%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * .09s); }
.js [data-lines].in .ln > span { transform: none; }
.js .is-loaded [data-split] .ln > span { transform: none; transition-delay: calc(.15s + var(--i, 0) * .11s); }
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--d, 0) * .1s); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* Word-by-word text reveal */
.js [data-words] .wd { display: inline-block; opacity: 0; transform: translateY(.7em); filter: blur(6px);
  transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--wi, 0) * 14ms); }
.js [data-words].in .wd { opacity: 1; transform: none; filter: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: max(680px, 100svh); color: var(--on-dark); background: var(--ink);
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: -12% 0 -12% 0; z-index: -3; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.js .hero__media img { transform: scale(1.18); transition: transform 2.6s var(--ease); }
.js .is-loaded .hero__media img { transform: scale(1.04); }
.hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(13, 26, 41, .55) 0%, rgba(13, 26, 41, .15) 35%, rgba(13, 26, 41, .35) 60%, rgba(13, 26, 41, .92) 100%); }
.hero__grid { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: rgba(232, 238, 240, .07); }
.hero__top { padding-top: calc(var(--header-h) + 28px + env(safe-area-inset-top, 0px)); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--rule-dark); background: rgba(13, 26, 41, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lichen); box-shadow: 0 0 0 0 rgba(148, 211, 166, .6); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(148, 211, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(148, 211, 166, 0); } }
.hero__coord { color: rgba(232, 238, 240, .7); align-self: center; }
.hero__inner { margin-top: auto; padding-bottom: clamp(88px, 11vh, 140px); }
.hero__eyebrow { color: var(--lichen); margin-bottom: 26px; }
.hero__title { font: 300 clamp(54px, 10.4vw, 176px)/.9 var(--f-display); letter-spacing: -.035em; font-variation-settings: "opsz" 72; }
.hero__title em { color: var(--lichen); }
.hero__foot { margin-top: clamp(28px, 4vw, 48px); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 48px; flex-wrap: wrap; }
.hero__sub { max-width: 36em; font-size: clamp(17px, 1.35vw, 20px); color: rgba(232, 238, 240, .82); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.js .hero__eyebrow, .js .hero__foot, .js .hero__top { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease) .7s, transform 1.2s var(--ease) .7s; }
.js .is-loaded .hero__eyebrow, .js .is-loaded .hero__foot, .js .is-loaded .hero__top { opacity: 1; transform: none; }
.js .is-loaded .hero__eyebrow { transition-delay: .25s; }
.scroll-cue { position: absolute; right: var(--gutter); bottom: 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: rgba(232, 238, 240, .7); writing-mode: vertical-rl; font-size: 10px; }
.scroll-cue__line { width: 1px; height: 54px; background: linear-gradient(var(--lichen), transparent); animation: cue 2.2s var(--ease-io) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 700px) { .scroll-cue { display: none; } .hero__coord { display: none; } }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee { background: var(--ink); color: var(--on-dark); border-top: 1px solid var(--rule-dark); overflow: hidden; padding-block: 26px; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: 36px; padding-right: 36px; flex: none; }
.marquee__group span { font: 300 clamp(26px, 3vw, 44px)/1 var(--f-display); white-space: nowrap; letter-spacing: -.01em; }
.marquee__group span:nth-child(4n+1) { font-style: italic; color: var(--lichen); }
.marquee .sq { width: 9px; height: 9px; }

/* --------------------------------------------------------------------------
   Intro statement
   -------------------------------------------------------------------------- */
.intro { padding-bottom: clamp(40px, 6vw, 80px); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px 64px; }
.intro__grid .eyebrow { padding-top: 14px; align-self: start; }
.statement { font: 350 clamp(30px, 3.9vw, 62px)/1.12 var(--f-display); letter-spacing: -.018em; max-width: 20em; }
.statement .w { transition: color .4s; }
.js .statement .w { color: rgba(13, 26, 41, .16); }
.js .statement .w.on { color: var(--ink); }
.js .statement .w.hl.on { color: var(--moss); font-style: italic; }
.intro__facts { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin-top: clamp(40px, 6vw, 88px); }
.fact { padding: 22px 22px 0 0; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--rule); }
.fact + .fact { padding-left: 22px; }
.fact:last-child { border-right: 0; }
.fact__k { color: var(--moss); }
.fact__v { font-size: 16px; line-height: 1.4; }
@media (max-width: 960px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__facts { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--rule); }
  .fact + .fact { padding-left: 0; }
  .fact:nth-child(even) { padding-left: 16px; border-right: 0; }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.card { background: var(--sheet); border: 1px solid var(--rule); display: flex; flex-direction: column; transition-delay: calc(var(--d, 0) * .12s); }
.card:nth-child(2) { --d: 1; margin-top: clamp(0px, 5vw, 72px); }
.card:nth-child(3) { --d: 2; margin-top: clamp(0px, 10vw, 144px); }
.card__media { aspect-ratio: 4 / 3.3; overflow: hidden; position: relative; max-width: 100%; }
.card__media img { width: 100%; height: 118%; object-fit: cover; transform: translateY(var(--ty, -8%)) scale(1.02); transition: scale 1.2s var(--ease); }
.card:hover .card__media img { scale: 1.06; }
.js .card__media { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-io) calc(var(--d, 0) * .12s); }
.js .card.in .card__media { clip-path: inset(0 0 0 0); }
.card__body { padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.card__tag { color: var(--moss); }
.card h3 { font: 400 clamp(28px, 2.4vw, 38px)/1.05 var(--f-display); letter-spacing: -.015em; }
.card p { color: var(--muted); }
.card__list { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--rule); font-size: 11.5px; }
.card__list li { padding: 12px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card__list li::after { content: "→"; font-family: var(--f-body); color: var(--moss); transition: transform .4s var(--ease); }
.card__list li:hover::after { transform: translateX(4px); }
.services__more { margin-top: clamp(40px, 6vw, 72px); color: var(--muted); text-align: center; text-wrap: balance; line-height: 1.9; }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; } .card:nth-child(n) { margin-top: 0; } .card__media { aspect-ratio: 16 / 10; } }

/* --------------------------------------------------------------------------
   Survey chooser
   -------------------------------------------------------------------------- */
.chooser { background: var(--paper-2); border-top: 1px solid var(--rule); }
.chooser__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 112px); align-items: center; }
.chooser__intro .display { margin: 22px 0 24px; }
.chooser__opts { margin-top: 36px; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.opt {
  display: flex; gap: 18px; align-items: center; text-align: left; padding: 18px 8px 18px 0; background: none; border: 0;
  border-bottom: 1px solid var(--rule); font-size: 17px; cursor: pointer; position: relative; transition: padding .5s var(--ease), color .3s;
}
.opt::before { content: ""; position: absolute; left: -100vw; right: 0; top: 0; bottom: 0; background: var(--ink); z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.opt { isolation: isolate; }
.opt__k { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--rule); transition: background .3s, color .3s, border-color .3s; }
.opt:hover { padding-left: 10px; }
.opt[aria-checked="true"] { padding-left: 16px; color: var(--on-dark); }
.opt[aria-checked="true"]::before { transform: scaleX(1); transform-origin: left; }
.opt[aria-checked="true"] .opt__k { background: var(--green); border-color: var(--green); color: #fff; }

.result__sheet {
  position: relative; background: var(--sheet); border: 1px solid var(--rule); padding: clamp(26px, 3.4vw, 52px);
  box-shadow: 0 40px 80px -40px rgba(13, 26, 41, .35);
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
}
.result__sheet::after { content: ""; position: absolute; inset: 10px; border: 1px dashed var(--rule); pointer-events: none; }
.result__head { width: 100%; display: flex; justify-content: space-between; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.result__ref { color: var(--moss); }
.result__title { font: 350 clamp(34px, 3.4vw, 54px)/1 var(--f-display); letter-spacing: -.02em; }
.result__note { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--moss); margin-top: -8px; }
.result__desc { color: var(--muted); max-width: 34em; }
.result__list { list-style: none; padding: 0; margin: 0; width: 100%; }
.result__list li { padding: 11px 0 11px 26px; border-top: 1px solid var(--rule); position: relative; }
.result__list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 9px; background: var(--green); }
.depth { width: 100%; display: grid; gap: 10px; color: var(--muted); margin: 6px 0 10px; }
.depth__bar { height: 6px; background: repeating-linear-gradient(90deg, var(--rule) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); position: relative; }
.depth__fill { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--moss) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); clip-path: inset(0 calc(100% - var(--depth, 40%)) 0 0); transition: clip-path .9s var(--ease); }
.result.swap .result__title, .result.swap .result__desc, .result.swap .result__list, .result.swap .result__note { animation: swap .7s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 960px) { .chooser__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Floor plans
   -------------------------------------------------------------------------- */
.plans { background: var(--ink); color: var(--on-dark); position: relative; }
.plans__scroller { position: relative; }
.plans__sticky { min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 24px) 48px; }
.plans__layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.plans__copy .display { font-size: clamp(42px, 4.6vw, 76px); margin: 20px 0 32px; }
.stages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-dark); }
.stage { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--rule-dark); opacity: .38; transition: opacity .5s; }
.stage.is-active { opacity: 1; }
.stage__n { color: var(--lichen); padding-top: 5px; }
.stage h3 { font: 400 24px/1.1 var(--f-display); margin-bottom: 6px; }
.stage p { color: var(--muted-dark); font-size: 15px; line-height: 1.5; }
.plans__area { margin-top: 28px; display: grid; gap: 4px; }
.plans__area .mono { color: var(--muted-dark); }
.plans__num { font: 300 clamp(48px, 4.6vw, 72px)/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plans__ft { color: var(--lichen) !important; }

.plans__frame { position: relative; background: var(--sheet); color: var(--ink); padding: clamp(14px, 2vw, 28px); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .7); min-width: 0; }
.plans__hud { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 10.5px; }
.plans__sheet b { color: var(--moss); font-weight: 500; }
.plans__progress { height: 2px; background: var(--rule); margin-top: 12px; }
.plans__progress span { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }

.fp { width: 100%; height: auto; display: block; margin-top: 10px; overflow: visible; }
.fp-grid { stroke: rgba(13, 26, 41, .06); stroke-width: 1; }
.fp .room { stroke: none; transform-box: fill-box; transform-origin: center; }
.fp .lbl { transform-box: fill-box; }
.r-lav { fill: #e3ddf0; } .r-blue { fill: #d7e5f3; } .r-sage { fill: #dbeccf; } .r-sand { fill: #f1e6d2; } .r-blush { fill: #f3dfe6; }
.fp .wall { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: square; }
.fp .wall--outer { stroke-width: 15; stroke-linejoin: miter; }
.fp .wall--thin { stroke-width: 5; }
.fp .windows path { fill: none; stroke: var(--sheet); stroke-width: 9; }
.fp .glass path { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.fp .doors path, .fp .stairs path, .fp .stairs rect, .fp .fit > * { fill: none; stroke: var(--ink); stroke-width: 2; }
.fp .fit .dash { stroke-dasharray: 8 6; stroke-width: 1.5; }
.fp .dims path { fill: none; stroke: var(--moss); stroke-width: 1.5; }
.fp .dim-labels text { fill: var(--moss); font: 500 22px var(--f-mono); letter-spacing: .04em; }
.fp .labels text { fill: var(--ink); font: 600 27px var(--f-body); text-anchor: middle; }
.fp .labels text.sz { font: 400 19px var(--f-mono); fill: var(--muted); }
.fp .labels text.sm { font-size: 22px; }
.fp .titles .ttl { font: 400 44px var(--f-display); fill: var(--ink); }
.fp .titles .sub { font: 400 20px var(--f-mono); fill: var(--muted); letter-spacing: .04em; }
.fp .north circle { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fp .north path { fill: var(--ink); }
.fp .north text { font: 500 22px var(--f-mono); fill: var(--ink); }
.fp .scan { color: var(--green); opacity: 0; }
.fp .scan line { stroke: var(--green); stroke-width: 2; }

/* Examples */
.examples { padding-block: clamp(56px, 8vw, 120px) clamp(88px, 12vw, 160px); }
.examples__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; flex-wrap: wrap; margin-bottom: 40px; border-top: 1px solid var(--rule-dark); padding-top: 40px; }
.examples__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.example { margin: 0; }
.example--tall { margin-top: clamp(0px, 8vw, 120px); }
.example__img { position: relative; background: #fff; overflow: hidden; aspect-ratio: 3258 / 1575; max-width: 100%; }
.example--tall .example__img { aspect-ratio: 3300 / 2219; }
.example__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.example__img .base { filter: grayscale(1) contrast(1.6) brightness(1.05); opacity: .65; }
.example__img .top { clip-path: inset(0 calc(100% - var(--scan, 100%)) 0 0); }
.example__line { position: absolute; top: 0; bottom: 0; left: var(--scan, 100%); width: 2px; background: var(--green); box-shadow: 0 0 24px 4px rgba(32, 163, 75, .45); }
.example figcaption { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-top: 16px; font: 400 22px/1.2 var(--f-display); }
.example figcaption .mono:first-child { color: var(--lichen); }
.example__m { color: var(--muted-dark); margin-left: auto; font-size: 10.5px; }

@media (max-width: 1000px) {
  .plans__sticky { min-height: 0; padding-block: clamp(88px, 12vw, 140px) 24px; }
  .plans__layout { grid-template-columns: 1fr; }
  .examples__grid { grid-template-columns: 1fr; }
  .example--tall { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Energy
   -------------------------------------------------------------------------- */
.energy__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px clamp(40px, 6vw, 112px); align-items: center; }
.energy__copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.energy__copy > p:not(.lead):not(.eyebrow) { max-width: 34em; }
.badges img { height: 64px; width: auto; mix-blend-mode: multiply; }
.epc { margin: 0; background: var(--sheet); border: 1px solid var(--rule); padding: clamp(18px, 2.4vw, 36px); }
.epc__head { display: grid; grid-template-columns: 1fr 72px 72px; gap: 8px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--rule); font-size: 10.5px; }
.epc__head span:not(:first-child) { text-align: center; }
.epc__rows { position: relative; display: grid; gap: 7px; padding: 16px 160px 16px 0; }
.epc__row { height: clamp(34px, 3.2vw, 44px); }
.epc__bar {
  height: 100%; width: var(--w); background: var(--c); color: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 12px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  transform-origin: 0 50%;
}
.epc__bar b { font: 700 20px/1 var(--f-body); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.epc__bar i { font-style: normal; font-size: 11px; padding-right: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.js .epc__bar { transform: scaleX(0); transition: transform 1.1s var(--ease); }
.js .epc.in .epc__bar { transform: none; }
.epc__row:nth-child(2) .epc__bar { transition-delay: .06s; } .epc__row:nth-child(3) .epc__bar { transition-delay: .12s; }
.epc__row:nth-child(4) .epc__bar { transition-delay: .18s; } .epc__row:nth-child(5) .epc__bar { transition-delay: .24s; }
.epc__row:nth-child(6) .epc__bar { transition-delay: .3s; } .epc__row:nth-child(7) .epc__bar { transition-delay: .36s; }
.epc__arrow {
  --rowh: clamp(34px, 3.2vw, 44px);
  position: absolute; top: calc(16px + (var(--row) * (var(--rowh) + 7px))); height: var(--rowh); width: 72px;
  background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; gap: 4px;
  font: 600 15px/1 var(--f-body); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); padding-left: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25); font-variant-numeric: tabular-nums;
}
.epc__arrow b { font-weight: 700; font-size: 18px; }
.epc__arrow--cur { right: 80px; }
.epc__arrow--pot { right: 0; }
.js .epc__arrow { opacity: 0; transform: translateX(30px); transition: opacity .8s var(--ease) .7s, transform 1s var(--ease) .7s, top 1.4s var(--ease) .7s; }
.js .epc.in .epc__arrow { opacity: 1; transform: none; }
.js .epc__arrow--pot { transition-delay: 1s; }
.epc figcaption { color: var(--muted); padding-top: 14px; border-top: 1px solid var(--rule); font-size: 10.5px; line-height: 1.7; text-transform: none; letter-spacing: .02em; }
@media (max-width: 960px) { .energy__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .epc__rows { padding-right: 132px; }
  .epc__head { grid-template-columns: 1fr 60px 60px; }
  .epc__arrow { width: 60px; font-size: 13px; }
  .epc__arrow b { font-size: 15px; }
  .epc__arrow--cur { right: 66px; }
  .epc__bar i { display: none; }
}

/* --------------------------------------------------------------------------
   Parallax band
   -------------------------------------------------------------------------- */
.band { position: relative; min-height: clamp(560px, 92vh, 900px); display: flex; align-items: center; overflow: hidden; color: var(--on-dark); isolation: isolate; background: var(--ink); }
.band__media { position: absolute; inset: -20% 0; z-index: -2; will-change: transform; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13, 26, 41, .9) 0%, rgba(13, 26, 41, .74) 55%, rgba(13, 26, 41, .5) 100%); }
.band__quote { margin: 0 auto; padding-block: 120px; }
.band__mark { width: 56px; fill: var(--lichen); margin-bottom: 32px; }
.band blockquote { margin: 0; }
.band blockquote p { font: 300 clamp(30px, 4vw, 64px)/1.12 var(--f-display); letter-spacing: -.018em; max-width: 22em; font-style: italic; }
.band figcaption { margin-top: 36px; color: var(--lichen); }
.band figcaption span { color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.process { background: var(--paper-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.step { padding: 32px 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.step:nth-child(2) { --d: 1; } .step:nth-child(3) { --d: 2; } .step:nth-child(4) { --d: 3; }
.step__n { width: 46px; height: 46px; display: grid; place-items: center; background: var(--ink); color: var(--on-dark); margin-bottom: 12px; }
.step:last-child .step__n { background: var(--green); }
.step h3 { font: 400 clamp(24px, 2vw, 30px)/1.1 var(--f-display); }
.step p { color: var(--muted); font-size: 16px; }
.steps__rule { height: 1px; background: var(--rule); margin-top: -1px; position: relative; order: -1; }
.process .steps { border-top: 1px solid var(--rule); }
.steps__rule { display: none; }
.process .steps::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: var(--moss); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Area map
   -------------------------------------------------------------------------- */
.area { background: var(--ink); color: var(--on-dark); overflow: hidden; }
.area__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px clamp(40px, 6vw, 112px); align-items: center; }
.area__copy { display: flex; flex-direction: column; gap: 24px; }
.area__p { color: var(--muted-dark); max-width: 34em; }
.area__slate { position: relative; margin-top: 16px; aspect-ratio: 16 / 7; overflow: hidden; max-width: 100%; }
.area__slate img { width: 100%; height: 130%; object-fit: cover; transform: translateY(var(--ty, -10%)); }
.area__slate span { position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--lichen); padding: 10px 14px 0 0; font-size: 10.5px; }
.map { position: relative; aspect-ratio: 1000 / 813; width: 100%; max-width: 100%; background: #0a1522; border: 1px solid var(--rule-dark); overflow: hidden; }
.map__canvas, .map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__coast { fill: none; stroke: rgba(148, 211, 166, .7); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.map__towns { list-style: none; margin: 0; padding: 0; }
.map__towns li {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(10px, -50%);
  font: 400 clamp(11px, 1.05vw, 14px)/1 var(--f-body); white-space: nowrap; color: var(--on-dark); display: flex; flex-direction: column; gap: 4px;
}
.map__towns li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--on-dark); }
.map__towns li.l { transform: translate(calc(-100% - 12px), -50%); text-align: right; }
.map__towns li.l::before { left: auto; right: -14px; }
.map__towns li.hq { color: var(--lichen); }
.map__towns li.hq b { font: 400 clamp(18px, 1.9vw, 26px)/1 var(--f-display); }
.map__towns li.hq span { font-size: 9.5px; color: var(--muted-dark); }
.map__towns li.hq::before { background: var(--green); width: 11px; height: 11px; margin-top: -14px; left: -16px; box-shadow: 0 0 0 0 rgba(32, 163, 75, .7); animation: hq 2.4s infinite; }
@keyframes hq { 0% { box-shadow: 0 0 0 0 rgba(32, 163, 75, .6); } 80%, 100% { box-shadow: 0 0 0 16px rgba(32, 163, 75, 0); } }
.js .map__towns li { opacity: 0; transition: opacity .8s var(--ease); transition-delay: calc(var(--n, 0) * .08s + .3s); }
.js .map.in .map__towns li { opacity: 1; }
.map__label { position: absolute; color: var(--muted-dark); font-size: 10px; }
.map__sea { left: 8%; top: 28%; font-style: italic; font: italic 300 clamp(18px, 2vw, 28px)/1 var(--f-display); text-transform: none; letter-spacing: 0; color: rgba(154, 169, 182, .7); }
.map__legend { right: 12px; bottom: 10px; }
@media (max-width: 960px) { .area__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px clamp(40px, 6vw, 112px); align-items: start; }
.contact__copy { display: flex; flex-direction: column; gap: 24px; }
.details { margin: 12px 0 0; border-top: 1px solid var(--rule); }
.details div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.details dt { color: var(--moss); padding-top: 4px; }
.details dd { margin: 0; font: 400 clamp(19px, 1.6vw, 23px)/1.35 var(--f-display); overflow-wrap: anywhere; }
.details a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.details a:hover { background-size: 100% 1px; }
.accred { display: flex; align-items: center; gap: 20px; }
.accred__rics { background: var(--ink); padding: 10px 14px; display: inline-block; }
.accred__rics img { height: 46px; width: auto; }
.accred > img { height: 62px; width: auto; }

.form { background: var(--sheet); border: 1px solid var(--rule); padding: clamp(22px, 3vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: transparent; padding: 26px 0 10px; font: 400 17px/1.4 var(--f-body); color: var(--ink);
  border-radius: 0; outline: none; transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field label { position: absolute; left: 0; top: 26px; color: var(--muted); pointer-events: none; transition: transform .4s var(--ease), color .3s, font-size .4s var(--ease); transform-origin: 0 0; }
.field input:focus, .field textarea:focus { border-color: var(--moss); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-22px) scale(.74); color: var(--moss); }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--moss); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.chips { border: 0; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { color: var(--muted); margin-bottom: 12px; padding: 0; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; }
.chips span { display: inline-block; padding: 10px 16px; border: 1px solid var(--rule); font-size: 15px; transition: background .3s, color .3s, border-color .3s; cursor: pointer; }
.chips input:checked + span { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.consent input { accent-color: var(--moss); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.form__msg { font: 400 19px/1.4 var(--f-display); color: var(--moss); border-left: 3px solid var(--green); padding-left: 14px; }
.form__msg.is-error { color: #a3312a; border-color: #a3312a; }
@media (max-width: 960px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-dark); padding-top: clamp(72px, 9vw, 120px); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding-bottom: 56px; border-bottom: 1px solid var(--rule-dark); }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; min-width: 0; }
.footer__col .mono { color: var(--lichen); margin-bottom: 6px; }
.footer__col a { text-decoration: none; color: var(--muted-dark); transition: color .3s; overflow-wrap: anywhere; }
.footer__col a:hover { color: var(--on-dark); }
.footer__col > span:not(.mono) { color: var(--muted-dark); }
.footer__word { width: max-content; font: 300 160px/.82 var(--f-display); letter-spacing: -.045em; white-space: nowrap; margin: 40px 0 28px; color: var(--on-dark); }
.footer__word .ch { display: inline-block; }
.js .footer__word .ch { transform: translateY(100%); opacity: 0; transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); transition-delay: calc(var(--i) * .04s); }
.js .footer__word.in .ch { transform: none; opacity: 1; }
.footer__base { display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; color: var(--muted-dark); font-size: 10px; padding-top: 20px; border-top: 1px solid var(--rule-dark); text-transform: none; letter-spacing: .03em; }
@media (max-width: 860px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer__top { grid-template-columns: 1fr; } }

/* ==========================================================================
   MULTI-PAGE SITE — navigation, interior pages, forms, consent, legal
   ========================================================================== */

/* Demo ribbon (demo server only) */
.demo-flag { position: fixed; left: 0; bottom: 0; z-index: 140; background: #d9a400; color: var(--ink); padding: 6px 12px; font-size: 10px; pointer-events: none; }

/* Placeholder copy waiting for the client — must not reach the live site */
.todo { background: #fff3b0; color: #5a4500; box-shadow: 0 0 0 3px #fff3b0; font-style: normal; }
.todo::before { content: "To confirm · "; font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Primary navigation with dropdown sheets
   -------------------------------------------------------------------------- */
.nav__item { position: relative; display: flex; align-items: center; gap: 2px; }
.nav__link { position: relative; text-decoration: none; font-size: 15px; padding: 6px 0; cursor: default; }
a.nav__link { cursor: pointer; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__item:hover .nav__link::after, .nav__item.is-current .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__item.is-current .nav__link::after { background: var(--green); height: 2px; }
.nav__caret { width: 22px; height: 28px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; opacity: .7; }
.nav__caret svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--ease); }
.nav__item:hover .nav__caret svg, .nav__item.is-open .nav__caret svg { transform: rotate(180deg); }

.menu {
  position: absolute; top: calc(100% + 18px); left: -28px; z-index: 5; width: min(640px, 70vw);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 40px 80px -30px rgba(13, 26, 41, .45);
  opacity: 0; visibility: hidden; transform: translateY(8px); clip-path: inset(0 0 100% 0);
  transition: opacity .3s, transform .5s var(--ease), clip-path .6s var(--ease-io), visibility 0s .6s;
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; } /* hover bridge */
.menu--sm { width: 280px; grid-template-columns: 1fr; }
.nav__item:hover .menu, .nav__item:focus-within .menu, .nav__item.is-open .menu {
  opacity: 1; visibility: visible; transform: none; clip-path: inset(0 0 0 0); transition: opacity .3s, transform .5s var(--ease), clip-path .6s var(--ease-io), visibility 0s;
}
.site-header.is-hidden .menu { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
.menu__intro { padding: 26px 26px 24px; background: var(--paper-2); border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.menu__intro .mono { color: var(--moss); font-size: 10.5px; }
.menu__intro p { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.menu__all { margin-top: auto; text-decoration: none; color: var(--ink); font-size: 11px; }
.menu__all:hover { color: var(--moss); }
.menu__list { list-style: none; margin: 0; padding: 12px 0; }
.menu__list a { display: flex; align-items: baseline; gap: 14px; padding: 11px 24px; text-decoration: none; font-size: 15.5px; transition: background .3s, padding .4s var(--ease); }
.menu__list a .mono { color: var(--muted); font-size: 10px; }
.menu__list a:hover, .menu__list a:focus-visible { background: var(--paper); padding-left: 30px; }
.menu__list a[aria-current="page"] { color: var(--moss); }
.menu__list a[aria-current="page"] .mono { color: var(--green); }
.tag-new { font-style: normal; font-size: 9px !important; color: #fff !important; background: var(--green); padding: 3px 6px 2px; margin-left: auto; align-self: center; }

/* Mobile menu: grouped accordions */
.mobile-nav { overflow-y: auto; }
.mobile-nav nav > a, .mobile-nav summary { font: 400 clamp(30px, 8vw, 48px)/1.15 var(--f-display); text-decoration: none; border-bottom: 1px solid var(--rule-dark); padding: 10px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font: 300 28px/1 var(--f-body); color: var(--lichen); transition: transform .4s var(--ease); }
.mobile-nav details[open] summary::after { transform: rotate(45deg); }
.mobile-nav details ul { list-style: none; margin: 0; padding: 8px 0 18px; border-bottom: 1px solid var(--rule-dark); }
.mobile-nav details li a { display: block; padding: 8px 0; color: var(--muted-dark); text-decoration: none; font-size: 17px; }
.mobile-nav details li a:hover { color: var(--on-dark); }
.mobile-nav__foot { margin-top: 32px; }
.mobile-nav__foot a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Interior page header
   -------------------------------------------------------------------------- */
.phero {
  position: relative; min-height: clamp(520px, 78svh, 820px); color: var(--on-dark); background: var(--ink);
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
}
.phero--short { min-height: clamp(380px, 52svh, 520px); }
.phero__media { position: absolute; inset: -12% 0; z-index: -3; will-change: transform; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.js .phero__media img { transform: scale(1.12); transition: transform 2.2s var(--ease); }
.js .is-loaded .phero__media img { transform: scale(1.02); }
.phero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(13, 26, 41, .7) 0%, rgba(13, 26, 41, .45) 40%, rgba(13, 26, 41, .94) 100%); }
.phero .hero__grid { color: rgba(232, 238, 240, .06); }
.phero__top { padding-top: calc(var(--header-h) + 28px + env(safe-area-inset-top, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 11px; }
.crumbs li { display: flex; align-items: center; color: rgba(232, 238, 240, .62); }
.crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .45; }
.crumbs a { text-decoration: none; color: inherit; transition: color .3s; }
.crumbs a:hover { color: var(--on-dark); }
.crumbs [aria-current] { color: var(--lichen); }
.phero__sheet { color: rgba(232, 238, 240, .5); font-size: 10.5px; }
.phero__inner { margin-top: auto; padding-block: 48px clamp(64px, 9vh, 112px); }
.phero__title { font: 300 clamp(46px, 7.4vw, 124px)/.94 var(--f-display); letter-spacing: -.032em; font-variation-settings: "opsz" 72; max-width: 14em; }
.phero__title em { font-style: italic; color: var(--lichen); }
.phero--short .phero__title { font-size: clamp(42px, 6vw, 96px); }
.phero__lead { margin-top: clamp(22px, 3vw, 36px); max-width: 38em; font-size: clamp(17px, 1.4vw, 21px); color: rgba(232, 238, 240, .82); }
.js .phero__lead, .js .phero__top { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease) .45s, transform 1.2s var(--ease) .45s; }
.js .is-loaded .phero__lead, .js .is-loaded .phero__top { opacity: 1; transform: none; }
@media (max-width: 700px) { .phero__sheet { display: none; } }

/* --------------------------------------------------------------------------
   Service page body: prose + title block
   -------------------------------------------------------------------------- */
.svc { padding-block: clamp(64px, 9vw, 140px); }
.svc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 56px clamp(40px, 7vw, 128px); align-items: start; }
.svc__aside { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 960px) { .svc__grid { grid-template-columns: 1fr; } .svc__aside { position: static; } }

.prose { max-width: 44em; font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose > p:first-child, .prose .intro { font: 350 clamp(24px, 2.2vw, 32px)/1.35 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.prose h2 { font: 350 clamp(32px, 3.4vw, 50px)/1.05 var(--f-display); letter-spacing: -.02em; margin-top: 1.9em; padding-top: .9em; border-top: 1px solid var(--rule); position: relative; }
.prose h2::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--green); }
.prose h2 em { font-style: italic; color: var(--moss); font-weight: 300; }
.prose h3 { font: 400 clamp(22px, 1.8vw, 27px)/1.2 var(--f-display); margin-top: 1.6em; }
.prose p, .prose li { color: #2c3846; }
.prose a { color: var(--moss); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul, .prose ol { padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.prose ul li, .prose ol li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--rule); }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 9px; height: 9px; background: var(--green); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; padding-left: 46px; }
.prose ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 500 12px/1 var(--f-mono); color: var(--moss); letter-spacing: .06em; }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; height: auto; border: 1px solid var(--rule); background: #fff; }
.prose figcaption { margin-top: 10px; font: 400 11px/1.6 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--moss); }
.prose .table-wrap { overflow-x: auto; }
.note { border: 1px solid var(--rule); border-left: 3px solid var(--green); background: var(--sheet); padding: 20px 24px; font-size: 16.5px; }
.note > * + * { margin-top: .7em; }
.note .mono { color: var(--moss); display: block; margin-bottom: 6px; }
.note--warn { border-left-color: #c9a227; }
.js .rv-soft[data-reveal] { transform: translateY(18px); }

/* FAQ accordions */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font: 400 clamp(20px, 1.6vw, 24px)/1.3 var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--f-body); color: var(--moss); transition: transform .4s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; color: #2c3846; }
.faq details > div > * + * { margin-top: .8em; }
.prose .faq { margin-top: 1.4em; }
.prose .faq summary { margin: 0; }

/* Title block (drawing sheet title block) */
.tblock { position: relative; background: var(--sheet); border: 1px solid var(--rule); padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 60px -36px rgba(13, 26, 41, .35); }
.tblock::after { content: ""; position: absolute; inset: 6px; border: 1px dashed var(--rule); pointer-events: none; }
.tblock__head { display: flex; justify-content: space-between; color: var(--muted); font-size: 10.5px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.tblock__head span:last-child { color: var(--moss); }
.tblock__rows { margin: 0; }
.tblock__rows div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.tblock__rows dt { color: var(--moss); font-size: 10.5px; padding-top: 3px; }
.tblock__rows dd { margin: 0; font-size: 15px; line-height: 1.45; }
.tblock__tel { text-align: center; font-size: 14px; color: var(--muted); text-decoration: none; }
.tblock__tel span { color: var(--ink); font-weight: 500; }
.tblock__tel:hover span { color: var(--moss); }
.aside-docs, .related { display: flex; flex-direction: column; }
.aside-docs > .mono, .related > .mono { color: var(--moss); padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.aside-docs a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 15px; }
.aside-docs a i { font-style: normal; font-size: 9.5px; border: 1px solid var(--rule); padding: 3px 6px 2px; color: var(--muted); }
.aside-docs a:hover { color: var(--moss); }
.related ul { list-style: none; margin: 0; padding: 0; }
.related a { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 15px; color: var(--muted); transition: color .3s, padding .4s var(--ease); }
.related a::after { content: "→"; color: var(--moss); }
.related a:hover { color: var(--ink); padding-left: 6px; }
.related a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.related a[aria-current="page"]::after { content: ""; width: 9px; height: 9px; background: var(--green); align-self: center; }

/* --------------------------------------------------------------------------
   Hub pages: sheet index of services
   -------------------------------------------------------------------------- */
.hub-intro { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px 64px; padding-bottom: clamp(48px, 6vw, 88px); }
.hub-intro .eyebrow { padding-top: 12px; align-self: start; }
.hub-intro__body { max-width: 46em; display: flex; flex-direction: column; gap: 1.1em; font-size: 18px; color: #2c3846; }
.hub-intro__body > p:first-child { font: 350 clamp(26px, 2.6vw, 40px)/1.25 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
@media (max-width: 860px) { .hub-intro { grid-template-columns: 1fr; } }

.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.sheet-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 280px; padding: 26px 26px 22px;
  background: var(--sheet); border: 1px solid var(--rule); text-decoration: none; color: inherit; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), border-color .5s;
}
.sheet-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .7s var(--ease); }
.sheet-card:hover, .sheet-card:focus-visible { color: var(--on-dark); border-color: var(--ink); }
.sheet-card:hover::before, .sheet-card:focus-visible::before { transform: none; }
.sheet-card__top { display: flex; justify-content: space-between; color: var(--muted); font-size: 10.5px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); transition: color .5s, border-color .5s; }
.sheet-card:hover .sheet-card__top { color: var(--muted-dark); border-color: var(--rule-dark); }
.sheet-card__top b { color: var(--moss); font-weight: 500; }
.sheet-card:hover .sheet-card__top b { color: var(--lichen); }
.sheet-card h3 { font: 400 clamp(26px, 2.2vw, 34px)/1.08 var(--f-display); letter-spacing: -.015em; }
.sheet-card p { color: var(--muted); font-size: 16px; transition: color .5s; }
.sheet-card:hover p { color: var(--muted-dark); }
.sheet-card__go { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--moss); }
.sheet-card:hover .sheet-card__go { color: var(--lichen); }
.sheet-card__go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .5s var(--ease); }
.sheet-card:hover .sheet-card__go svg { transform: translateX(6px); }
.sheet-card .tag-new { margin-left: 8px; vertical-align: 1px; }

/* Closing CTA band */
.cta-band { background: var(--ink); color: var(--on-dark); padding-block: clamp(80px, 11vw, 160px); border-top: 1px solid var(--rule-dark); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(232, 238, 240, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 238, 240, .05) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; }
.cta-band__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 112px); align-items: end; }
.cta-band .display { margin-top: 22px; }
.cta-band__end { display: flex; flex-direction: column; gap: 28px; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 960px) { .cta-band__grid { grid-template-columns: 1fr; } }

/* Small helpers */
.link-arrow { display: inline-flex; gap: 10px; align-items: center; color: var(--moss); text-decoration: none; }
.link-arrow span { transition: transform .4s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }
.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__list a { position: relative; z-index: 1; text-decoration: none; flex: 1; }
.card__list a:hover { color: var(--moss); }
.card__list li { position: relative; z-index: 1; }
.services__more a { color: inherit; text-underline-offset: 3px; }
.services__more a:hover { color: var(--moss); }
.result__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.result__more { color: var(--moss); text-decoration: none; }
.result__more:hover { color: var(--ink); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Team, testimonials, reviews
   -------------------------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.team-card { display: flex; flex-direction: column; gap: 14px; }
.team-card__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); position: relative; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .8s var(--ease), scale 1.2s var(--ease); }
.team-card:hover .team-card__photo img { filter: none; scale: 1.03; }
.team-card__photo::after { content: ""; position: absolute; left: 14px; bottom: 14px; width: 12px; height: 12px; background: var(--green); box-shadow: -12px 12px 0 var(--blue); }
.team-card h3 { font: 400 clamp(26px, 2.2vw, 32px)/1.1 var(--f-display); margin-top: 6px; }
.team-card__role { color: var(--moss); font: 500 11px/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.team-card p:not(.team-card__role) { color: var(--muted); font-size: 16px; }
.js .team-card .team-card__photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-io); }
.js .team-card.in .team-card__photo { clip-path: inset(0 0 0 0); }

.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.quote-card { margin: 0; background: var(--sheet); border: 1px solid var(--rule); padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; gap: 22px; }
.quote-card svg { width: 40px; fill: var(--green); }
.quote-card blockquote { margin: 0; font: 300 clamp(22px, 2vw, 30px)/1.3 var(--f-display); font-style: italic; letter-spacing: -.01em; }
.quote-card figcaption { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--moss); }
.quote-card figcaption span { color: var(--muted); }
.reviews__score { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.reviews__num { font: 300 clamp(64px, 7vw, 112px)/.9 var(--f-display); letter-spacing: -.03em; }
.reviews__stars { color: #e3a008; letter-spacing: .12em; font-size: 18px; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.review { margin: 0; background: var(--sheet); border: 1px solid var(--rule); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.review blockquote { margin: 0; color: #2c3846; font-size: 16px; }
.review figcaption { margin-top: auto; color: var(--muted); font-size: 10.5px; }
.review figcaption a { color: var(--moss); text-decoration: none; }
.reviews__attr { margin-top: 28px; color: var(--muted); font-size: 10.5px; }
.reviews__attr a { color: var(--moss); }
.disclaimer { margin-top: 28px; color: var(--muted); font-size: 14px; max-width: 46em; }

/* --------------------------------------------------------------------------
   Contact page, legal pages, 404
   -------------------------------------------------------------------------- */
.contact-page .contact__grid { align-items: start; }
.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.hours dt { color: var(--muted); }
.hours dd { margin: 0; }
.legal-meta { color: var(--muted); font-size: 11px; }
.toc { border: 1px solid var(--rule); background: var(--sheet); padding: 18px 22px; }
.toc ol { border: 0 !important; columns: 2 240px; column-gap: 32px; }
.toc li { border: 0 !important; padding: 5px 0 5px 34px !important; break-inside: avoid; }
.toc li::before { top: 9px !important; }
.notfound { min-height: 100svh; }

/* --------------------------------------------------------------------------
   Footer additions
   -------------------------------------------------------------------------- */
.footer__reg { display: flex; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--rule-dark); color: var(--muted-dark); font-size: 13.5px; line-height: 1.6; }
.footer__reg p { max-width: 70em; }
.footer__rics { flex: none; display: block; }
.footer__rics img { height: 42px; width: auto; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__legal a, .footer__legal .linklike { color: var(--muted-dark); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; font-family: var(--f-mono); }
.footer__legal a:hover, .footer__legal .linklike:hover { color: var(--on-dark); }
.footer__base a { color: var(--lichen); text-decoration: none; }
.footer__base a:hover { color: var(--on-dark); }
.footer__credits { color: rgba(154, 169, 182, .6); font-size: 9.5px; text-transform: none; letter-spacing: .03em; padding-top: 12px; }
@media (max-width: 1100px) { .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__reg { flex-direction: column; align-items: flex-start; } }

/* --------------------------------------------------------------------------
   Forms: selects, honeypot, small chips, reCAPTCHA notice
   -------------------------------------------------------------------------- */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--select select {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: transparent; padding: 26px 28px 10px 0; font: 400 17px/1.4 var(--f-body); color: var(--ink);
  border-radius: 0; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--moss) 50%), linear-gradient(135deg, var(--moss) 50%, transparent 50%);
  background-position: calc(100% - 12px) 34px, calc(100% - 7px) 34px; background-size: 5px 5px; background-repeat: no-repeat;
}
.field--select label { transform: translateY(-22px) scale(.74); color: var(--moss); }
.field--select select:focus { border-color: var(--moss); }
.chips--sm span { padding: 7px 12px; font-size: 14px; }
.form__legal { font-size: 12.5px; color: var(--muted); }
.form__legal a { color: inherit; }
.consent a { color: var(--moss); }
.grecaptcha-badge { visibility: hidden; } /* replaced by the notice under the form, as Google allows */
.btn[disabled] { opacity: .6; pointer-events: none; }

/* --------------------------------------------------------------------------
   Cookie banner
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed; z-index: 260; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); width: min(440px, calc(100vw - 24px));
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 40px 80px -30px rgba(13, 26, 41, .55);
  opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.cookie.is-in { opacity: 1; transform: none; }
.cookie [hidden], [hidden].btn, .form__msg[hidden] { display: none !important; }
.cookie__inner { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.cookie__title { display: flex; align-items: center; gap: 10px; color: var(--moss); }
.cookie__title .sq { width: 8px; height: 8px; }
.cookie__text { font-size: 15px; line-height: 1.55; color: #2c3846; }
.cookie__text a { color: var(--moss); }
.cookie__prefs { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.cookie__opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.cookie__opt b { display: block; color: var(--ink); font-weight: 600; }
.cookie__opt input { accent-color: var(--moss); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.cookie__actions .btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.cookie__actions .linklike { font-size: 11px; margin-left: 4px; }
.reticle { z-index: 270; }
@media (max-width: 480px) { .cookie__actions .btn--sm { flex: 1 1 40%; justify-content: center; } }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-words] .wd { opacity: 1; transform: none; filter: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .statement .w { color: var(--ink); }
}