/* Bjerge Drift – v2
   Spruce ink + birch paper + one amber accent (fresh-cut wood / felling wedges).
   System: pill controls, 12/18/24px radii, floating rounded panels, layered soft shadows, expo-out motion. */

/* Fonts, served from this site: Archivo and Schibsted Grotesk, SIL Open Font License 1.1 (_source/KALLOR.md).
   Latin subset from Google Fonts, which covers every character on the pages (æøå included); the descriptors
   are the ones Google's own CSS used, so the text renders exactly as before. Preloaded in the page <head>. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2?v=e3a28eade2") 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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2?v=4c8b93f431") 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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2?v=4c8b93f431") 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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2?v=4c8b93f431") 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;
}

/* Fallbacks with the web fonts' own metrics (tools/font_fallbacks.py): text drawn in Arial while a web font
   is still loading takes the same room, so nothing moves when the web font swaps in. */
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 106.02%;
  ascent-override: 82.82%;
  descent-override: 19.81%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 100 599;
  src: local("Arial"), local("ArialMT");
  size-adjust: 98.22%;
  ascent-override: 89.39%;
  descent-override: 21.38%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  font-weight: 100 549;
  src: local("Arial"), local("ArialMT");
  size-adjust: 104.50%;
  ascent-override: 93.45%;
  descent-override: 24.67%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  font-weight: 550 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 100.04%;
  ascent-override: 97.62%;
  descent-override: 25.77%;
  line-gap-override: 0.00%;
}

:root {
  color-scheme: light;

  --ink: #0f1712;
  --forest: #15241b;
  --forest-2: #1c3025;
  --moss: #4a6651;
  --paper: #f5f2eb;
  --paper-2: #ece7dc;
  --white: #fffefb;
  --amber: #d9a443;
  --amber-hover: #cb952f;
  --amber-light: #e8c275;

  --text: #15241b;
  --muted: #58645b;
  --faint: #8b948d;
  --text-inv: #f5f2eb;
  --muted-inv: #b5c0b3;
  --hairline: rgba(21, 36, 27, 0.1);
  --hairline-2: rgba(21, 36, 27, 0.17);
  --hairline-inv: rgba(245, 242, 235, 0.12);
  --danger: #a3261b;

  --font-display: "Archivo", "Archivo Fallback", "Arial Narrow", Arial, sans-serif;
  --font-body: "Schibsted Grotesk", "Schibsted Grotesk Fallback", "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --inset: clamp(0.5rem, 1.1vw, 1rem);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: clamp(24px, 3vw, 40px);

  --shadow-sm: 0 1px 2px rgba(15, 23, 18, 0.05), 0 2px 8px rgba(15, 23, 18, 0.04);
  --shadow-md: 0 1px 2px rgba(15, 23, 18, 0.04), 0 14px 34px -12px rgba(15, 23, 18, 0.2);
  --shadow-lg: 0 2px 6px rgba(15, 23, 18, 0.05), 0 44px 80px -32px rgba(15, 23, 18, 0.45);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --header-h: 68px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper) url("/assets/img/korn.png?v=ffb40432bc") repeat;
  /* the grain tile, flattened onto --paper: AVIF 6 KB / WebP 6 KB instead of the 20 KB PNG */
  background-image: image-set(url("/assets/img/korn.avif?v=02f8dd8c3e") type("image/avif"), url("/assets/img/korn.webp?v=f74dc2265b") type("image/webp"), url("/assets/img/korn.png?v=ffb40432bc") type("image/png"));
  background-size: 140px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h2 { font-stretch: 104%; font-size: clamp(2.15rem, 1.3rem + 2.9vw, 3.6rem); }
h3 { font-stretch: 102%; font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; }

::selection { background: var(--amber); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 6px;
}
.panel-dark :focus-visible { outline-color: var(--amber-light); }

.container { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mark-trunk { fill: var(--trunk, currentColor); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;

  overflow: clip; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--forest);
  color: var(--text-inv);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
}
.skip-link:focus { top: 1rem; }

/* ---------- Shared pieces ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--moss);
}
.eyebrow::before,
.badge::before,
.ticks li::before,
.contact-tips li::before {
  content: "";
  flex: none;
  width: 11px; height: 7px;
  background: var(--amber);
  clip-path: polygon(50% 0, 100% 100%, 72% 100%, 50% 45%, 28% 100%, 0 100%); /* one tier of the mark */
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  background: rgba(255, 254, 251, 0.7);
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
}

.lead { font-size: clamp(1.1rem, 1rem + 0.3vw, 1.2rem); line-height: 1.55; color: var(--muted); }

.icon-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--forest);
}
.icon-tile svg { width: 30px; height: 30px; }
.icon-tile-sm { width: 44px; height: 44px; border-radius: 13px; }
.icon-tile-sm svg { width: 22px; height: 22px; }

/* Buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 620;
  font-size: 1rem;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out), color 0.25s;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform 0.35s var(--ease-out); }
.btn { position: relative; isolation: isolate; overflow: hidden; overflow: clip; transform: scale(var(--press, 1)); }
.btn:active { --press: 0.98; transition-duration: 0.12s; }

.btn-primary {
  --btn-bg: var(--amber);
  --btn-fg: var(--ink);
  --btn-fill: var(--forest);
  --btn-fg-hover: var(--text-inv);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(15, 23, 18, 0.14), 0 6px 16px -8px rgba(160, 110, 20, 0.55);
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(15, 23, 18, 0.14), 0 12px 24px -10px rgba(160, 110, 20, 0.6);
}
.btn-light {
  --btn-bg: var(--white);
  --btn-fill: var(--forest);
  --btn-fg-hover: var(--text-inv);
  box-shadow: inset 0 0 0 1px var(--hairline-2), var(--shadow-sm);
}
.btn-light:hover { box-shadow: inset 0 0 0 1px rgba(21, 36, 27, 0.3), var(--shadow-md); }
.btn-dark { --btn-bg: var(--forest); --btn-fg: var(--text-inv); --btn-fill: var(--amber); --btn-fg-hover: var(--ink); }
.btn-small { min-height: 2.5rem; padding: 0 1.05rem; font-size: 0.9rem; gap: 0.5rem; }
.btn-block { width: 100%; min-height: 3.5rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), -webkit-backdrop-filter 0.35s, backdrop-filter 0.35s;
}
.site-header.is-scrolled {
  background: rgba(245, 242, 235, 0.92);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  backdrop-filter: saturate(1.6) blur(20px);
  box-shadow: 0 1px 0 var(--hairline);
}

.header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); }

.brand {
  --trunk: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--forest);
  text-decoration: none;
  flex: none;
}
.brand-mark { width: 24px; height: 30px; }
.wordmark {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark span { font-weight: 400; letter-spacing: 0.07em; }
.brand-light { color: var(--text-inv); }

.nav { position: relative; display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }
.nav a {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-stretch: 102%;
  font-weight: 520;
  font-size: 0.9rem;
  color: var(--forest);
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s;
}
.nav a:hover { background: rgba(21, 36, 27, 0.06); }
.nav a[aria-current="true"] { background: rgba(21, 36, 27, 0.08); }


.menu-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.menu-toggle-bars,
.menu-toggle-bars::before {
  position: absolute;
  left: 12px;
  width: 20px; height: 1.8px;
  border-radius: 2px;
  background: var(--forest);
  transition: transform 0.4s var(--ease-out), top 0.4s var(--ease-out);
}
.menu-toggle-bars { top: 18px; }
.menu-toggle-bars::before { content: ""; left: 0; top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { top: 21.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { top: 0; transform: rotate(-90deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(1.5rem, 4.5vw, 4rem) clamp(3.5rem, 7vw, 6rem);
  isolation: isolate;
  overflow: clip;
}
.hero-rings {
  position: absolute;
  z-index: -1;
  width: min(1400px, 150vw);
  aspect-ratio: 1;
  right: max(-560px, -42vw);
  top: -420px;
  background: var(--forest);
  opacity: 0.07;
  -webkit-mask: url("/assets/img/arringer.svg?v=68317a05e3") center / contain no-repeat;
  mask: url("/assets/img/arringer.svg?v=68317a05e3") center / contain no-repeat;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.hero-title {
  margin-bottom: 1.6rem;
  font-stretch: 104%;
  font-weight: 780;
  font-size: clamp(2.8rem, 1.35rem + 5.1vw, 5.15rem);
  line-height: 0.96;
  letter-spacing: -0.038em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero-title .line > span { display: block; }
.hero-title em { font-style: normal; color: var(--moss); }

.hero-lead { max-width: 31em; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--muted); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 2rem;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--forest);
}
.trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
/* the three promises share one row only when all fit; otherwise they stack, never 2 + 1 */
.hero-copy { container-type: inline-size; }
@container (max-width: 470px) {
  .trust { flex-direction: column; gap: 0.55rem; }
}
.trust svg { width: 17px; height: 17px; color: var(--moss); }

.hero-visual {
  position: relative;
  justify-self: end;
  width: min(100%, 470px);
  isolation: isolate;
}
.stack-card { position: absolute; pointer-events: none; transition: transform 1.1s var(--ease-out); }
.stack-back {
  z-index: -1;
  inset: 3% -4% -2% 5%;
  border-radius: 30px;
  background:
    radial-gradient(120% 80% at 90% 0%, rgba(217, 164, 67, 0.16), transparent 60%),
    var(--forest);
  box-shadow: var(--shadow-md);
  transform: rotate(4.5deg);
}
.stack-badge {
  --trunk: var(--text-inv);
  z-index: 4;
  left: -34px;
  top: 12%;
  display: grid;
  place-items: center;
  width: 104px; height: 104px;
  border-radius: 26px;
  background: linear-gradient(160deg, var(--amber-light), var(--amber) 55%, var(--amber-hover));
  color: var(--forest);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 20px 40px -18px rgba(120, 80, 10, 0.65);
  transform: rotate(-8deg);
}
.stack-badge .brand-mark { width: 42px; height: 52px; }
@media (hover: hover) and (pointer: fine) {
  .hero-visual:hover .stack-back { transform: rotate(7deg) translate(10px, 6px); }
  .hero-visual:hover .stack-badge { transform: rotate(-14deg) translate(-8px, -4px) scale(1.04); }
}

.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;

  overflow: clip;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
  background: var(--paper-2);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-media::before {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(10, 16, 12, 0.38), transparent);
  pointer-events: none;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.chip {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 23, 18, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
}
.chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(217, 164, 67, 0.28);
}

/* ---------- Statement: words light up as you scroll ---------- */
.statement { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
.statement-mark { --trunk: var(--amber); width: 28px; height: 35px; margin-bottom: 1.75rem; color: var(--forest); }
.statement-text {
  max-width: 21.5em;
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 104%;
  font-weight: 700;
  font-size: clamp(1.85rem, 0.95rem + 3.4vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--forest);
  text-wrap: pretty;
}
.statement-text em { font-style: normal; color: var(--moss); }
.statement-text.scrub-on .sw { color: rgba(21, 36, 27, 0.14); transition: color 0.45s var(--ease); }
.statement-text.scrub-on .sw.is-lit { color: var(--forest); }
.statement-text.scrub-on em .sw.is-lit { color: var(--moss); }

/* ---------- Hero gallery: swipe on touch, drag or arrows with a mouse ---------- */
.gallery { touch-action: pan-y; }
.slides {
  display: flex;
  height: 100%;
  margin: 0; padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.slides::-webkit-scrollbar { display: none; }
.slides.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.slide picture { display: block; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; pointer-events: none; }
.slide .chip { left: 1rem; bottom: 2.9rem; }
.hero-media.gallery::before { z-index: 1; pointer-events: none; }

.gal-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-top: -21px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 242, 235, 0.88);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease), background-color 0.2s, transform 0.3s var(--ease-out);
}
.gal-arrow svg { width: 18px; height: 18px; }
.gal-prev { left: 0.8rem; }
.gal-prev svg { transform: rotate(180deg); }
.gal-next { right: 0.8rem; }
.gal-arrow:hover { background: var(--amber); }
.gal-arrow:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .gallery:hover .gal-arrow, .gal-arrow:focus-visible { opacity: 1; }
}
/* touch screens swipe: no invisible arrow buttons sitting over the photo */
@media (hover: none) {
  .gal-arrow { display: none; }
}

.gal-dots {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}
.gal-dots button {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: width 0.35s var(--ease-out), background-color 0.3s;
}
.gal-dots button[aria-current="true"] { width: 22px; background: var(--amber); }

/* the swipe hand: a looping hint until the visitor swipes (touch screens only) */
.swipe-hint {
  --travel: 46px;
  position: absolute;
  z-index: 5;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  pointer-events: none;
  /* a soft pool of shade so the white hand reads on bright photos too */
  background: radial-gradient(38% 30% at 50% 50%, rgba(10, 16, 12, 0.34), transparent 100%);
  transition: opacity 0.35s var(--ease);
}
.swipe-hint.is-gone { opacity: 0; }
.sh-stage { position: relative; width: calc(var(--travel) * 2 + 60px); height: 64px; }
.sh-finger {
  position: absolute;
  left: 50%; top: 0;
  width: 60px; height: 60px;
  margin-left: -30px;
  transform: translateX(var(--travel));
}
.sh-hand {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  transform-origin: 46% 18%;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
/* the touch point sits under the fingertip */
.sh-touch {
  position: absolute;
  left: 27.5px; top: 8.75px;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.22);
  opacity: 0;
}
/* light trail behind the fingertip, drawn from where the drag started */
.sh-trail {
  position: absolute;
  top: 5.75px;
  right: calc(50% - var(--travel) + 2.5px);
  width: calc(var(--travel) * 2);
  height: 6px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 100% 50%;
}
.sh-label {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.42rem 0.8rem 0.42rem 0.5rem;
  border-radius: 999px;
  background: rgba(15, 23, 18, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.sh-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.sh-label svg:last-child { margin-left: 0.15rem; }

@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .gallery.has-hint .swipe-hint { display: flex; animation: hintIn 0.6s var(--ease-out) both; }
  .gallery.has-hint .sh-finger { animation: shMove 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .gallery.has-hint .sh-hand { animation: shPress 2.8s var(--ease-out) infinite; }
  .gallery.has-hint .sh-touch { animation: shTouch 2.8s var(--ease-out) infinite; }
  .gallery.has-hint .sh-trail { animation: shTrail 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .gallery.has-hint .sh-label svg:first-child { animation: shNudge 2.8s var(--ease-out) infinite; }
}
/* 0-12 appear right | 12-22 press | 22-60 drag left | 60-72 release | 72-100 fade + rest */
@keyframes shMove {
  0% { transform: translateX(var(--travel)); opacity: 0; }
  10%, 22% { transform: translateX(var(--travel)); opacity: 1; }
  60% { transform: translateX(calc(var(--travel) * -1)); opacity: 1; }
  72% { transform: translateX(calc(var(--travel) * -1)); opacity: 1; }
  86%, 100% { transform: translateX(calc(var(--travel) * -1)); opacity: 0; }
}
@keyframes shPress {
  0%, 12% { transform: translateY(-6px) scale(1.04); }
  22%, 60% { transform: translateY(0) scale(0.92); }
  72%, 100% { transform: translateY(-8px) scale(1.04); }
}
@keyframes shTouch {
  0%, 14% { opacity: 0; transform: scale(0.4); }
  22%, 60% { opacity: 0.95; transform: scale(1); }
  74% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(1.9); }
}
/* the hint loops until the first swipe: every step is transform or opacity, so it runs on the compositor and
   costs the page nothing (animating width and box-shadow redid layout and paint on every frame) */
@keyframes shTrail {
  0%, 22% { transform: scaleX(0); opacity: 0; }
  26% { opacity: 1; }
  60% { transform: scaleX(1); opacity: 1; }
  78%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes shNudge {
  0%, 22%, 72%, 100% { transform: none; }
  45% { transform: translateX(-3px); }
}
@keyframes hintIn { from { opacity: 0; } }

/* ---------- Sections & panels ---------- */
.section { padding-block: clamp(5rem, 10vw, 8.5rem); }

.panel { margin-inline: var(--inset); border-radius: var(--r-xl); }
.panel-dark {
  position: relative;
  overflow: hidden;

  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(110% 70% at 88% -10%, rgba(217, 164, 67, 0.1), transparent 55%),
    var(--forest);
  color: var(--text-inv);
}
.panel-dark::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1100px;
  aspect-ratio: 1;
  left: -600px;
  bottom: -620px;
  background: var(--text-inv);
  opacity: 0.045;
  -webkit-mask: url("/assets/img/arringer.svg?v=68317a05e3") center / contain no-repeat;
  mask: url("/assets/img/arringer.svg?v=68317a05e3") center / contain no-repeat;
  pointer-events: none;
}
.panel-dark .eyebrow { color: var(--amber-light); }
.panel-dark .lead { color: var(--muted-inv); }
.panel-tint { background: var(--paper-2); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.5rem 4rem;
  align-items: end;
  margin-bottom: clamp(2.75rem, 5vw, 4.25rem);
}
.section-intro { max-width: 29em; margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--muted); }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.service {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow: clip;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-sm);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.service-visual { position: relative; height: 150px; overflow: hidden; overflow: clip; flex: none; }
.service-num {
  position: absolute;
  top: 0.95rem; right: 1.1rem;
  z-index: 2;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(15, 23, 18, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: rgba(245, 242, 235, 0.92);
}
/* photo header (asphalt, stone) */
.sv-photo picture, .sv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-photo img { object-fit: cover; object-position: 50% 45%; transform: scale(1.02); transition: transform 1.6s var(--ease-out); }
.sv-photo img.pos-low { object-position: 50% 82%; }
/* The felling photo is a portrait and the band shows a strip of it. The chain saw must always be in the strip:
   its lower edge sits just under the saw (58.65 % down the photo) and it reaches up towards his helmet as far
   as the band's shape allows. That needs the band's own size (container units); browsers without them get
   the percentage. In a tall band (tablets) the photo is simply shown from its top. */
.sv-photo { container-type: size; }
.sv-photo img.pos-saw {
  object-position: 50% 42%;
  object-position: 50% min(0px, max(100cqh - 133.34cqw, 100cqh - 78.2cqw));
}
.sv-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 18, 0.18), transparent 50%); }


.service-body { position: relative; display: flex; flex: 1; flex-direction: column; padding: 2.5rem 1.9rem 1.8rem; }
.service-icon {
  position: absolute;
  top: -30px;
  left: 1.9rem;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 12px 24px -14px rgba(15, 23, 18, 0.5);
}
.service h3 { margin: 0.9rem 0 0.55rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.service-body > p { color: var(--muted); }

.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.35rem 0 1.9rem; list-style: none; }
.tags li {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--forest);
}



.ticks { list-style: none; margin: 0.5rem 0 2rem; }
.ticks li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.62rem 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.98rem;
}
.ticks li::before { transform: translateY(-1px); }

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-display);
  font-stretch: 104%;
  font-weight: 640;
  font-size: 0.975rem;
  color: var(--forest);
  text-decoration: none;
}
.arrow-dot {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--text-inv);
  overflow: hidden;
  overflow: clip;
  transition: background-color 0.3s, color 0.3s;
}
.arrow-dot svg { width: 15px; height: 15px; }
.service-link:hover .arrow-dot { background: var(--amber); color: var(--ink); }

/* ---------- Asphalt ---------- */
.asphalt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.asphalt-copy h2 { margin-bottom: 1.4rem; }

.steps { list-style: none; margin-top: 2.25rem; border-bottom: 1px solid var(--hairline-inv); }
.steps li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--hairline-inv);
}
.step-num {
  padding-top: 0.2rem;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--amber-light);
}
.steps h3 { margin-bottom: 0.25rem; font-size: 1.1rem; }
.steps p { margin: 0; color: var(--muted-inv); }

.compare { --pos: 50%; }
.compare-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;

  overflow: clip;
  border-radius: var(--r-lg);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  isolation: isolate;
}
.compare-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.compare-layer { position: absolute; inset: 0; }
/* the photos are lazy <img> elements: they load when the slider comes near, not with the page */
.compare-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.compare-before {
  background-color: #9a968f;
}
.compare-after {
  background-color: #111211;
  clip-path: inset(0 0 0 var(--pos));
}
.compare-tag {
  position: absolute;
  bottom: 1rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.compare-before .compare-tag { left: 1rem; background: rgba(15, 23, 18, 0.55); color: var(--text-inv); }
.compare-after .compare-tag { right: 1rem; background: rgba(245, 242, 235, 0.9); color: var(--ink); }

.compare-range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none; /* drags are handled on the stage; the input serves keyboard + screen readers */
}
.compare-handle {
  position: absolute;
  z-index: 3;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.compare-handle span {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 6px rgba(217, 164, 67, 0.22), 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease-out);
}
.compare-stage:active .compare-handle span { transform: scale(0.92); }
.compare-handle span::before,
.compare-handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border: solid var(--ink);
  border-width: 0 0 2px 2px;
  border-radius: 1px;
}
.compare-handle span::before { left: 13px; transform: rotate(45deg); }
.compare-handle span::after { right: 13px; transform: rotate(-135deg); }
.compare-range:focus-visible + .compare-handle span { outline: 2px solid var(--text-inv); outline-offset: 4px; }

.compare figcaption { margin-top: 1rem; font-size: 0.85rem; color: var(--muted-inv); }

/* ---------- Process ---------- */
.process-label { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; list-style: none; }
.process li { position: relative; padding-top: 1.9rem; }
.process li:nth-child(1) { --i: 0; }
.process li:nth-child(2) { --i: 1; }
.process li:nth-child(3) { --i: 2; }
.process li:nth-child(4) { --i: 3; }
.process li::before,
.process li::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  border-radius: 2px;
}
.process li::before { height: 1px; background: var(--hairline-2); }
.process li::after {
  top: -1px;
  height: 3px;
  background: var(--amber);
  transform-origin: left;
}
.process-num {
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 300;
  font-size: 3.4rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
}
.process h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
.process p { margin: 0; color: var(--muted); }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.about-media {
  width: min(100%, 520px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;

  overflow: clip;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.about-copy h2 { margin-bottom: 1.4rem; }
.about-copy > p:not(.eyebrow):not(.lead) { color: var(--muted); max-width: 34em; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0 2.25rem;
  border-block: 1px solid var(--hairline-2);
}
.facts div { padding: 1.05rem 1rem 1.05rem 0; }
.facts div + div { padding-left: 1.25rem; border-left: 1px solid var(--hairline-2); }
.facts dt {
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
}
.facts dd { margin: 0; font-weight: 600; line-height: 1.35; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.contact-copy h2 { margin-bottom: 1.4rem; }

.contact-list {
  margin-top: 2rem;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-sm);
  overflow: hidden;

  overflow: clip;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.contact-row + .contact-row { box-shadow: inset 0 1px 0 var(--hairline); }
.contact-row:hover { background: rgba(21, 36, 27, 0.03); }
.contact-row .icon-tile { color: var(--moss); }
.row-text { min-width: 0; }
.row-text small { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.3; }
.row-text strong {
  display: block;
  font-family: var(--font-display);
  font-stretch: 102%;
  font-weight: 680;
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.25rem);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.row-chev { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--faint); transition: transform 0.35s var(--ease-out), color 0.2s; }
.contact-row:hover .row-chev { transform: translateX(3px); color: var(--forest); }

.contact-tips { margin-top: 2.25rem; }
.contact-tips h3 { margin-bottom: 0.9rem; font-size: 1rem; }
.contact-tips ul { list-style: none; display: grid; gap: 0.55rem; }
.contact-tips li { display: flex; gap: 0.7rem; align-items: baseline; color: var(--muted); }
.contact-tips li::before { transform: translateY(-1px); }

.contact-form {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  background: var(--white);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-lg);
}
.form-head { margin-bottom: 1.75rem; }
.form-head h3 { font-size: 1.45rem; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.form-head p { margin: 0; font-size: 0.925rem; color: var(--muted); }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.field { margin-bottom: 1.15rem; }
.field label,
.field legend { display: block; margin-bottom: 0.45rem; padding: 0; font-size: 0.9rem; font-weight: 600; }
.optional { margin-left: 0.3rem; font-weight: 400; font-size: 0.82rem; color: var(--faint); }

.field input,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid rgba(21, 36, 27, 0.17);
  border-radius: var(--r-sm);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 23, 18, 0.04);
  transition: border-color 0.2s, box-shadow 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.5; }
.field ::placeholder { color: #9aa29b; }
.field input:hover, .field textarea:hover { border-color: rgba(21, 36, 27, 0.3); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(217, 164, 67, 0.3);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(163, 38, 27, 0.15); }
.field-error { margin: 0.4rem 0 0; font-size: 0.85rem; font-weight: 500; color: var(--danger); }

/* service choice as pills */
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice-pill { position: relative; cursor: pointer; }
.choice-pill input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 1.05rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(21, 36, 27, 0.17);
  font-size: 0.925rem;
  font-weight: 500;
  transition: background-color 0.25s var(--ease), color 0.25s, box-shadow 0.25s;
}
.choice-pill:hover span { box-shadow: inset 0 0 0 1px rgba(21, 36, 27, 0.35); }
.choice-pill input:checked + span { background: var(--forest); color: var(--text-inv); box-shadow: inset 0 0 0 1px var(--forest); }
.choice-pill input:focus-visible + span { outline: 2px solid var(--forest); outline-offset: 3px; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact-form .btn-block { margin-top: 0.5rem; }
.form-note { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--muted); text-align: center; }
.form-status { margin: 0.75rem 0 0; font-weight: 600; text-align: center; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--moss); }
.form-status.is-error { color: var(--danger); }

/* photos */
.field-label { display: block; margin-bottom: 0.45rem; font-size: 0.9rem; font-weight: 600; }
.field .photo-drop { /* beats the generic ".field label" rule */
  position: relative;
  display: flex;
  margin-bottom: 0;
  font-weight: 400;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border: 1.5px dashed rgba(21, 36, 27, 0.25);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: 0.925rem;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.photo-drop:hover, .photo-drop.is-over { border-color: var(--forest); background: var(--paper); }
.photo-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-drop input:focus-visible + svg { outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 6px; }
.photo-drop svg { width: 26px; height: 26px; flex: none; color: var(--moss); }
.photo-drop strong { color: var(--forest); }
.photo-list { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.7rem; list-style: none; }
.photo-list:empty { display: none; }
.photo-list li { position: relative; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hairline); }
.photo-list img { width: 100%; height: 100%; object-fit: cover; }
.photo-list button {
  position: absolute; top: 4px; right: 4px;
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(15, 23, 18, 0.72); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}

/* sending + thank-you */
.contact-form.is-sending .btn-block { opacity: 0.75; pointer-events: none; }
.contact-form.is-sending .btn-block svg { animation: nudge 0.9s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.contact-form.is-done > :not(.form-done) { display: none; }
.form-done { padding: 1.5rem 0.5rem 1rem; text-align: center; outline: none; }
.form-done h3 { margin: 1.1rem 0 0.5rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.form-done p { margin: 0 auto; max-width: 26em; color: var(--muted); }
.form-done a { color: var(--forest); font-weight: 600; }
.done-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--forest); color: var(--amber-light); }
.done-mark svg { width: 30px; height: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .contact-form.is-done .done-mark { animation: badgeIn 0.8s var(--ease-spring) both; }
  .contact-form.is-done .done-mark path { stroke-dasharray: 24; animation: drawCheck 0.6s var(--ease-out) 0.35s both; }
}
@keyframes drawCheck { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* ---------- Footer ---------- */
.site-footer { margin-bottom: var(--inset); padding-top: clamp(3.5rem, 7vw, 5.5rem); color: var(--muted-inv); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.footer-brand p { max-width: 24em; margin-top: 1.1rem; }
.footer-title {
  margin-bottom: 1rem;
  font-stretch: 125%;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-light);
}
.site-footer ul { list-style: none; }
.site-footer li { margin: 0.45rem 0; }
.site-footer li a { color: var(--text-inv); text-decoration: none; transition: color 0.2s; }
.site-footer li a:hover { color: var(--amber-light); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-inv);
  font-size: 0.875rem;
}
.footer-base p { margin: 0; }
.to-top { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-inv); text-decoration: none; }
.to-top svg { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform 0.35s var(--ease-out); }
.to-top:hover svg { transform: rotate(-90deg) translateX(3px); }

.footer-wordmark {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: -0.2em;
  text-align: center;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: calc(min(1180px, 100vw - 2 * var(--gutter)) / 9.55);
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(245, 242, 235, 0.07);
  user-select: none;
}
.footer-wordmark span { font-weight: 400; letter-spacing: 0.07em; }

/* footer contact rows: an icon tile beside the number and the address */
.site-footer li a.foot-contact { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.15rem 0; background: none; }
.foot-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: rgba(232, 194, 117, 0.1);
  box-shadow: inset 0 0 0 1px rgba(232, 194, 117, 0.28);
  color: var(--amber-light);
  transition: background-color 0.3s var(--ease), color 0.3s, box-shadow 0.3s;
}
.foot-ico svg { width: 17px; height: 17px; }
.foot-txt {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.45s var(--ease-out);
}
.foot-contact:hover .foot-ico { background: var(--amber); color: var(--ink); box-shadow: none; }
.foot-contact:hover .foot-txt { background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .foot-ico-phone svg { transform-origin: 50% 60%; }
  .foot-contact:hover .foot-ico-phone svg { animation: ring 0.7s ease-in-out; }
  .foot-contact:hover .foot-ico-mail svg { animation: envelopeHop 0.6s var(--ease-spring); }
}
@keyframes envelopeHop {
  0%, 100% { transform: none; }
  40% { transform: translateY(-3px) rotate(-6deg); }
}

/* ---------- Mobile action bar ---------- */
.action-bar { display: none; }

/* ---------- 404 ---------- */
.notfound {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 3rem;
  overflow: hidden;

  overflow: clip;
  isolation: isolate;
}
.notfound .brand { display: flex; width: max-content; margin-bottom: clamp(3rem, 10vh, 6rem); }
.notfound h1 { margin-bottom: 1.25rem; font-stretch: 104%; font-size: clamp(2.6rem, 1.4rem + 5vw, 4.8rem); letter-spacing: -0.035em; }
.notfound .lead { max-width: 30em; margin-bottom: 2rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* page-load choreography */
  .badge { --d: 0s; }
  .hero-title .line:nth-child(1) > span { --d: 0.08s; }
  .hero-title .line:nth-child(2) > span { --d: 0.18s; }
  .hero-lead { --d: 0.34s; }
  .hero-actions { --d: 0.44s; }
  .trust { --d: 0.54s; }

  /* the hero text is on the first screen: it rises into place but is never invisible, so it paints in the
     first frame (a fade from 0 held back the paint the browser counts as the page's main content) */
  .intro { animation: riseIn 1s var(--ease-out) var(--d, 0s) backwards; }
  .hero-title .line > span { animation: lineUp 1.15s var(--ease-out) var(--d, 0s) backwards; }
  .hero-media { animation: mediaIn 1.5s var(--ease-out) 0.12s backwards; }
  .slide:first-child img { animation: imgIn 2s var(--ease-out) 0.12s backwards; }
  .slide:first-child .chip { animation: fadeUp 0.9s var(--ease-out) 0.95s backwards; }
  .stack-back { animation: stackIn 1.4s var(--ease-out) 0.45s backwards; }
  .stack-badge { animation: badgeIn 1s var(--ease-spring) 1.05s backwards; }

  /* scroll reveals (added by JS only for elements below the fold) */
  .will-reveal { opacity: 0; transform: translateY(28px); }
  .will-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: var(--delay, 0s);
  }

  /* process progress lines draw in sequence */
  .process.will-draw li::after { transform: scaleX(0); }
  .process.will-draw.is-in li::after {
    transform: scaleX(1);
    transition: transform 1.1s var(--ease-out);
    transition-delay: calc(0.25s + var(--i) * 0.22s);
  }
}
@media print {
  .will-reveal, .intro, .hero-title .line > span, .hero-media, .chip { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; }
  .site-header, .action-bar, .skip-link { display: none !important; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { transform: translateY(16px); }
  to { transform: none; }
}
@keyframes lineUp {
  from { transform: translateY(105%); }
  to { transform: none; }
}
/* the first gallery photo is the largest thing on the first screen: it must paint in its first frame, so the
   card only moves in (transform runs on the compositor); fading it in from 0 delayed that paint */
@keyframes mediaIn {
  from { transform: translateY(26px) scale(0.965); }
  to { transform: none; }
}
@keyframes stackIn {
  from { opacity: 0; transform: rotate(0deg) scale(0.96); }
}
@keyframes badgeIn {
  from { opacity: 0; transform: rotate(-30deg) scale(0.5); }
}
@keyframes imgIn {
  from { transform: scale(1.14); }
  to { transform: none; }
}

/* =========================================================================
   Interaction layer
   Pointer effects only on devices with a real mouse; scroll effects everywhere;
   everything calmer with prefers-reduced-motion.
   ========================================================================= */

/* ---- Buttons: they never move; colour fills in from where the cursor enters ---- */
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  width: 300%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-fill, transparent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--btn-fg-hover, var(--btn-fg)); }
  .btn:hover::before { transform: translate(-50%, -50%) scale(1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover svg:has(use[href="#i-arrow"]),
  .service-link:hover .arrow-dot svg,
  .service:hover .arrow-dot svg { animation: arrowLoop 0.65s var(--ease-out); }
  .btn:hover svg:has(use[href="#i-phone"]) { animation: ring 0.7s ease-in-out; }
}
@keyframes arrowLoop {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(140%); opacity: 0; }
  41% { transform: translateX(-140%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-10deg); }
  60% { transform: rotate(7deg); }
  75% { transform: rotate(-3deg); }
}

/* ---- Photos: tvOS-style tilt, zoom, glare and depth ---- */
.tilt {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 1s var(--ease-out), box-shadow 0.8s var(--ease-out);
}
.tilt picture { display: block; width: 100%; height: 100%; transform: scale(var(--zoom, 1.08)); transition: transform 1.3s var(--ease-out); }
.tilt img { transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) + var(--par, 0px)), 0); transition: transform 0.6s var(--ease-out); }
.glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 58%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.tilt .chip { transform: translate3d(calc(var(--tx, 0px) * -0.7), calc(var(--ty, 0px) * -0.7), 0); transition: transform 0.6s var(--ease-out); }
.tilt.is-tilting {
  --zoom: 1.13;
  transition: transform 0.2s ease-out, box-shadow 0.8s var(--ease-out);
  box-shadow: 0 2px 6px rgba(15, 23, 18, 0.05), 0 70px 110px -44px rgba(15, 23, 18, 0.55);
}
.tilt.is-tilting .glare { opacity: 1; }
.tilt.is-tilting img,
.tilt.is-tilting .chip { transition-duration: 0.25s; }

/* ---- Service cards: cursor spotlight + glowing edge + living icons ---- */
.service { position: relative; isolation: isolate; }
.service::before,
.service::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.service::before {
  z-index: -1;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 164, 67, 0.12), transparent 46%);
}
.service::after {
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 164, 67, 0.9), transparent 48%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.icon-tile { transition: background-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.6s var(--ease-spring), box-shadow 0.4s; }
.service-num { transition: color 0.3s; }
.tier, .stone { transform-box: fill-box; }
.tier { transform-origin: 50% 100%; }
.stone { transform-origin: 50% 100%; }

/* ---- Nav: one pill that glides between links ---- */
.nav-pill {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: var(--pw, 0px);
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(21, 36, 27, 0.075);
  transform: translate3d(var(--pl, 0px), -50%, 0);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.3s var(--ease);
  pointer-events: none;
}
.nav-pill.is-on { opacity: 1; }
.nav-pill.no-anim { transition: opacity 0.3s var(--ease); }
.nav a { position: relative; z-index: 1; }
.nav.has-pill a:hover,
.nav.has-pill a[aria-current="true"] { background: none; }

/* ---- Before/after: knob reacts, cursor label ---- */
.compare-cursor {
  position: absolute;
  z-index: 5;
  top: 0; left: 0;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(245, 242, 235, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 650;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
  transform: translate3d(calc(var(--cx, 0px) + 16px), calc(var(--cy, 0px) + 16px), 0) scale(var(--cs, 0.6));
  opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.12s linear;
  pointer-events: none;
}
.compare-stage.is-hover .compare-cursor { --cs: 1; opacity: 1; }
.compare-stage.is-dragging .compare-cursor { opacity: 0; }
.compare-stage.is-hover .compare-handle span { transform: scale(1.08); }
.compare-stage.is-dragging .compare-handle span { transform: scale(0.94); }

/* ---- Headings: words rise out of a mask ---- */
.split .w { display: inline-block; vertical-align: top; overflow: hidden; overflow: clip; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.split .w > span { display: inline-block; }

/* ---- Small hovers ---- */
.process li .process-num,
.process li h3 { transition: transform 0.5s var(--ease-out), color 0.3s; }
.contact-row .icon-tile { transition: background-color 0.3s var(--ease), color 0.3s; }
.contact-row:hover .icon-tile { background: var(--forest); color: var(--text-inv); }
.site-footer li a {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color 0.2s, background-size 0.45s var(--ease-out);
}
.site-footer li a:hover { background-size: 100% 1px; }

/* ---- Footer wordmark: light follows the cursor, rises as the footer arrives ---- */
.footer-wordmark {
  color: transparent;
  background-image: radial-gradient(320px circle at var(--fx, 50%) var(--fy, 260%), rgba(245, 242, 235, 0.36), rgba(245, 242, 235, 0.075) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: translate3d(0, var(--rise, 0%), 0);
}

/* ---- Scroll-linked rings ---- */
.hero-rings,
.panel-dark::before { transform: rotate(var(--spin, 0deg)); }

@media (hover: hover) and (pointer: fine) {
  .service { transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
  .service:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-md); }
  .service:hover::before,
  .service:hover::after { opacity: 1; }
  .service:hover .icon-tile { background: var(--forest); color: var(--text-inv); transform: scale(1.06) rotate(-4deg); box-shadow: 0 10px 20px -10px rgba(15, 23, 18, 0.6); }
  .service:hover .service-num { color: var(--amber-hover); }
  .service:hover .arrow-dot { background: var(--amber); color: var(--ink); }
  .service:hover .sv-photo img { transform: scale(1.07); }
  .service:hover .stone { animation: stoneSettle 0.7s var(--ease-spring) both; }
  .service:hover .stone:nth-child(2) { animation-delay: 0.06s; }
  .service:hover .stone:nth-child(3) { animation-delay: 0.12s; }
  .service:hover .stone:nth-child(4) { animation-delay: 0.18s; }

  .process li:hover .process-num { color: var(--moss); transform: translateX(6px); }
  .process li:hover h3 { transform: translateX(3px); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .service:hover .road-dash { animation: roadDash 0.9s linear infinite; }
  .service:hover .tier { animation: tierPop 0.75s var(--ease-spring) both; }
  .service:hover .tier:nth-child(2) { animation-delay: 0.07s; }
  .service:hover .tier:nth-child(3) { animation-delay: 0.14s; }
}
@keyframes roadDash { to { stroke-dashoffset: -6; } }
@keyframes stoneSettle { 0% { transform: translateY(0); } 40% { transform: translateY(-2.2px); } 100% { transform: translateY(0); } }
@keyframes tierPop {
  0% { transform: translateY(0); }
  35% { transform: translateY(-2.4px); }
  100% { transform: translateY(0); }
}

/* touch: tactile press instead of hover */
@media (hover: none) {
  .service:active { transform: scale(0.985); transition: transform 0.15s; }
  .contact-row:active { background: rgba(21, 36, 27, 0.05); }
}

@media (prefers-reduced-motion: no-preference) {
  .split.will-reveal { opacity: 1; transform: none; }
  .split.will-reveal .w > span { transform: translateY(110%); }
  .split.will-reveal.is-in .w > span { transform: none; transition: transform 1.05s var(--ease-out) var(--wd, 0s); }

  .tilt.will-reveal { opacity: 0; transform: none; clip-path: inset(9% 9% 9% 9% round 40px); }
  .tilt.will-reveal.is-in {
    opacity: 1;
    clip-path: inset(0 round var(--r-lg));
    transition: clip-path 1.4s var(--ease-out), opacity 0.9s var(--ease-out);
  }
}

@media (max-width: 960px) {
  .nav-pill { display: none; }
}

/* tablets: each service card is a row, picture on the left */
@media (min-width: 761px) and (max-width: 960px) {
  .service { display: grid; grid-template-columns: 36% 1fr; }
  .service-visual { height: auto; min-height: 100%; }
  .service-body { padding: 1.9rem 1.9rem 1.8rem 2.8rem; }
  .service-icon { top: 1.7rem; left: -28px; }
  .service h3 { margin-top: 0.2rem; }
}
/* phones: stacked cards, a shorter picture band */
@media (max-width: 760px) {
  .service-visual { height: 150px; }
  .service h3 { margin-top: 0.75rem; font-size: 1.35rem; }
  .tags li { font-size: 0.82rem; padding: 0.35rem 0.7rem; }
}

/* ---------- Desktop polish ---------- */
@media (min-width: 961px) {
  .contact-copy { position: sticky; top: calc(var(--header-h) + 2.5rem); }
  .service-body > p { min-height: calc(1.6em * 3); }
}

/* ---------- Scroll performance on phones and touch devices ---------- */
@media (hover: none), (max-width: 960px) {
  .site-header, .site-header.is-scrolled, .nav, .action-bar,
  .badge, .chip, .service-num, .compare-tag {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .site-header, .site-header.is-scrolled { background: rgba(245, 242, 235, 0.97); }
  .nav { background: var(--white); }
  .action-bar { background: rgba(255, 254, 251, 0.97); }
  .badge { background: var(--white); }
  .chip { background: rgba(15, 23, 18, 0.7); }
  .service-num { background: rgba(15, 23, 18, 0.55); }
  .compare-before .compare-tag { background: rgba(15, 23, 18, 0.78); }
  .hero-rings, .panel-dark::before { transform: none; }
}

/* ---------- Logo: the spruce sways, its tiers hop ---------- */
.brand-mark { overflow: visible; }
.bm-sway, .bm-tier { transform-box: fill-box; transform-origin: 50% 100%; }
.bm-sway { transition: transform 0.7s var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .brand:hover .bm-sway { transform: rotate(-10deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .brand.is-poked .bm-tier { animation: bmPop 0.7s var(--ease-spring) both; }
  .brand.is-poked .bm-tier:nth-child(2) { animation-delay: 0.06s; }
  .brand.is-poked .bm-tier:nth-child(3) { animation-delay: 0.12s; }
  .brand.is-swayed .bm-sway { animation: treeSway 1.1s var(--ease-out) both; }
}
@keyframes bmPop {
  0%, 100% { transform: none; }
  35% { transform: translateY(-3.5px); }
}
@keyframes treeSway {
  0%, 100% { transform: none; }
  25% { transform: rotate(-14deg); }
  55% { transform: rotate(7deg); }
  80% { transform: rotate(-3deg); }
}

/* ---------- Hero badge: the line flips to the three services (width never changes) ---------- */
.badge::before { transition: transform 0.5s var(--ease-spring); }
.badge-text { display: inline-grid; overflow: hidden; overflow: clip; padding: 0.15em 0; margin: -0.15em 0; }
.badge-text > span { grid-area: 1 / 1; transition: transform 0.6s var(--ease-out), opacity 0.35s var(--ease); }
.bt-b { transform: translateY(115%); opacity: 0; }
.badge.is-flipped .bt-a { transform: translateY(-115%); opacity: 0; }
.badge.is-flipped .bt-b { transform: none; opacity: 1; }
.badge.is-flipped::before { transform: translateY(-2px) rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .badge { cursor: default; }
  .badge:hover .bt-a { transform: translateY(-115%); opacity: 0; }
  .badge:hover .bt-b { transform: none; opacity: 1; }
  .badge:hover::before { transform: translateY(-2px) rotate(180deg); }
}

/* ---------- Headlines: words hop, a warm sheen passes (readable at every moment) ---------- */
.hero-title .wd, .split .w > span { display: inline-block; }
/* room for ascenders, accents and descenders (y, g, Å) inside each word's box: the sheen is painted with
   background-clip: text, which only covers the box. Negative margins keep the layout exactly as before. */
.hero-title .wd { padding: 0.14em 0.04em 0.22em; margin: -0.14em -0.04em -0.22em; }
/* the reveal masks must not clip a word while it hops */
.hero-title.is-waving .line, .split.is-waving .w { overflow: visible; }
.hero-title .line:nth-child(1) { --c: var(--forest); }
.hero-title .line:nth-child(2) { --c: var(--moss); }
.hero-title .line:nth-child(1) .wd:nth-child(2) { --wi: 1; }
.hero-title .line:nth-child(2) .wd:nth-child(1) { --wi: 2; }
.hero-title .line:nth-child(2) .wd:nth-child(2) { --wi: 3; }
@media (prefers-reduced-motion: no-preference) {
  .hero-title.is-waving .wd {
    color: transparent;
    background: linear-gradient(105deg, var(--c) 42%, var(--amber) 50%, var(--c) 58%) 0 0 / 300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: wordHop 0.85s var(--ease-out) calc(var(--wi, 0) * 75ms) both, sheen 1.1s ease-in-out calc(var(--wi, 0) * 75ms) both;
  }
  .split.is-waving .w > span { animation: wordHop 0.8s var(--ease-out) calc(var(--wd, 0s) * 0.9) both; }
}
/* phones: fade only, no movement while scrolling */
@media (prefers-reduced-motion: no-preference) {
  .calm .will-reveal,
  .calm .tilt.will-reveal { transform: none; clip-path: none; }
  .calm .will-reveal.is-in,
  .calm .tilt.will-reveal.is-in { transition: opacity 0.55s var(--ease); transition-delay: 0s; }
}

@keyframes wordHop {
  0%, 100% { transform: none; }
  35% { transform: translateY(-0.1em) rotate(-1.5deg); }
  70% { transform: translateY(0.015em); }
}
@keyframes sheen {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav a { padding: 0.5rem 0.65rem; font-size: 0.875rem; }
}

@media (max-width: 960px) {
  :root { --header-h: 62px; }

  .site-header { background: rgba(245, 242, 235, 0.93); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); }
  .menu-toggle { display: block; }
  .menu-toggle { margin-left: auto; }
  .nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: var(--inset); right: var(--inset);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.5rem;
    background: rgba(255, 254, 251, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-lg);
  }
  .nav.is-open { display: flex; animation: menuIn 0.35s var(--ease-out) both; }
  .nav a { padding: 0.95rem 1rem; border-radius: 14px; font-size: 1.05rem; }
  .nav a + a { box-shadow: inset 0 1px 0 var(--hairline); }
  .nav a:hover, .nav a[aria-current="true"] { box-shadow: none; }

  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem; }
  .hero-title { font-size: clamp(2.5rem, 6.2vw, 3.4rem); }
  .hero-actions .btn { padding: 0 1.3rem; }

  .section-head,
  .asphalt-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .section-head { gap: 1rem; }

  .services { grid-template-columns: 1fr; gap: 1rem; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .compare { max-width: 640px; }
  .contact-form { max-width: 680px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  body { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }

  .hero-grid,
  .about-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(2.6rem, 11.5vw, 3.6rem); }
  .hero-visual { justify-self: stretch; width: 100%; margin-top: 0.5rem; }
  .hero-media { aspect-ratio: 4 / 4.4; border-radius: 24px; }
  .stack-back { inset: 3% -2.5% -2% 4%; border-radius: 26px; }
  .stack-badge { left: -6px; top: 7%; width: 76px; height: 76px; border-radius: 20px; }
  .stack-badge .brand-mark { width: 30px; height: 37px; }
  .about-media { width: 100%; aspect-ratio: 4 / 4.4; }


  .field-row { grid-template-columns: 1fr; }

  .action-bar {
    position: fixed;
    z-index: 40;
    left: 0.6rem; right: 0.6rem;
    bottom: calc(0.6rem + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 254, 251, 0.82);
    -webkit-backdrop-filter: saturate(1.6) blur(20px);
    backdrop-filter: saturate(1.6) blur(20px);
    box-shadow: inset 0 0 0 1px var(--hairline), 0 18px 40px -16px rgba(15, 23, 18, 0.45);
    transform: translateY(calc(100% + 1.5rem));
    transition: transform 0.5s var(--ease-out);
  }
  .action-bar .btn { min-height: 3rem; }
  .action-bar.is-visible { transform: none; }
}

@media (max-width: 760px) {
  .eyebrow { font-size: 0.8rem; gap: 0.65rem; }
  .eyebrow::before { width: 12px; height: 8px; }
  .footer-title { font-size: 0.78rem; }
}

@media (max-width: 520px) {
  .wordmark { font-size: 1rem; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .trust { flex-direction: column; gap: 0.55rem; }
  .service-body { padding: 2.4rem 1.4rem 1.6rem; }
  .service-icon { left: 1.4rem; }

  .process { grid-template-columns: 1fr; }

  .facts { grid-template-columns: 1fr; }
  .facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline-2); }

  .choice-pill span { min-height: 2.5rem; padding: 0 0.9rem; font-size: 0.9rem; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Rendering: sections below the first screen are skipped until they come near ---------- */
/* content-visibility lets the browser skip layout, text shaping and paint for these sections until the reader
   scrolls toward them, so the first screen is ready sooner and loading costs the phone far less work. The
   placeholder heights were measured on 29.09 per layout; once a section has rendered, the browser keeps its
   real height (auto), so the scrollbar settles and nothing jumps. */
#tjenester, #asfalt, #slik-jobber-vi, #om, #kontakt, .site-footer {
  content-visibility: auto;
  contain-intrinsic-block-size: auto var(--cv-h, 900px);
}
#tjenester { --cv-h: 1080px; }
#asfalt { --cv-h: 830px; }
#slik-jobber-vi { --cv-h: 550px; }
#om { --cv-h: 820px; }
#kontakt { --cv-h: 1160px; }
.site-footer { --cv-h: 470px; }
@media (max-width: 960px) {
  #tjenester { --cv-h: 1400px; }
  #asfalt { --cv-h: 1230px; }
  #slik-jobber-vi { --cv-h: 630px; }
  #om { --cv-h: 740px; }
  #kontakt { --cv-h: 1560px; }
  .site-footer { --cv-h: 550px; }
}
@media (max-width: 760px) {
  #tjenester { --cv-h: 2000px; }
  #asfalt { --cv-h: 1150px; }
  #slik-jobber-vi { --cv-h: 1080px; }
  #om { --cv-h: 1250px; }
  #kontakt { --cv-h: 1930px; }
  .site-footer { --cv-h: 680px; }
}

/* ---------- Service photos: click or tap to see the whole picture ---------- */
/* main.js puts a button over each card photo (the card only shows a band of it) and opens the photo in a
   <dialog>: the browser handles focus, Esc and the back gesture. Without JS the cards are as before. */
.sv-zoom {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: zoom-in;
}
.sv-zoom:focus-visible { outline: 3px solid var(--amber-light); outline-offset: -5px; border-radius: 0; }
.sv-zoom-ico {
  position: absolute;
  right: 1.1rem;
  bottom: 0.85rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15, 23, 18, 0.55);
  color: var(--text-inv);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.sv-zoom-ico svg, .lightbox-close svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .sv-zoom:hover .sv-zoom-ico { background: var(--amber); color: var(--ink); }
}

html.lb-open { overflow: hidden; padding-right: var(--sbw, 0px); }   /* no scrolling behind, no jump */
.lightbox {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background: none;
  color: var(--text-inv);
}
.lightbox::backdrop { background: rgba(10, 16, 12, 0.95); }
/* the close button has its own row above the picture's right corner, so it can never lie on the picture */
.lightbox[open] { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.lightbox figure { margin: 0; }
.lightbox-img picture { display: block; }
.lightbox-img img {
  display: block;
  width: min(92vw, 960px, calc((100vh - 150px) * var(--ar, 1.33)));   /* 150px: close button, caption, air */
  width: min(92vw, 960px, calc((100dvh - 150px) * var(--ar, 1.33)));
  height: auto;
  aspect-ratio: var(--ar, 1.33);
  border-radius: 18px;
  background: var(--forest-2);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.75);
}
.lightbox figcaption {
  margin-top: 0.85rem;
  text-align: center;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-inv);
}
.lightbox-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 242, 235, 0.14);
  color: var(--text-inv);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox-close:focus-visible { outline-color: var(--amber-light); border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .lightbox-close:hover { background: var(--amber); color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open], .lightbox[open]::backdrop { animation: lbFade 0.25s var(--ease-out); }
  .lightbox[open] figure { animation: lbRise 0.4s var(--ease-out); }
}
@keyframes lbFade { from { opacity: 0; } }
@keyframes lbRise { from { transform: translateY(14px) scale(0.98); } }