/* ==========================================================
   SILVARN - Base, Navbar, Footer
   Light theme tokens live here, dark tokens in darkmode.css,
   RTL fixes in rtl.css
   ========================================================== */

:root {
  color-scheme: light;

  /* Palette - Light mode (Warm Ivory / Linen / Ember Orange) */
  --bg: #f3f1ed;             /* Warm Ivory */
  --surface: #ffffff;        /* cards */
  --accent: #b34e1d;         /* Ember Orange: links, highlights, accents */
  --accent-text: #a9481a;    /* text-safe accent on light (deeper Ember for small text) */
  --text: #181a1b;           /* headings / main text */
  --text-muted: #5e6163;     /* body text */
  --border: #ddd8cf;         /* decorative separators */
  --control-border: #b34e1d; /* inputs / icon buttons (3:1+ contrast) */
  --input-bg: #ffffff;
  --alt-surface: #e9e5de;    /* Linen: alternate sections */

  --btn-bg: #181a1b;
  --btn-text: #f3f1ed;
  --btn-hover-bg: #e0783f;
  --btn-hover-text: #181a1b;

  --logo-gear: #b34e1d;
  --logo-s: #f3f1ed;

  --shadow: 0 6px 18px rgba(24,26,27, 0.12);

  /* Typography */
  --font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sub: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --header-h: 72px;
  --radius: 4px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  transition: background-color .3s ease, color .3s ease;
}

body.menu-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.2;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; }

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-sub);
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  min-height: 44px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sub);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .15s ease;
}
.btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
.btn:active { transform: translateY(1px); }
.btn[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--btn-text); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  font-family: var(--font-sub);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.icon-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-text);
}
.icon-btn svg { width: 20px; height: 20px; flex: none; }

/* theme icon swap: show sun in dark, moon in light */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

/* ==========================================================
   HEADER / NAVBAR
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow); }

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: var(--text);
  text-decoration: none;
}
.brand-logo { width: 44px; height: 44px; flex: none; }
.brand-name {
  font-family: var(--font-head);
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: .04em;
}

.logo-gear { fill: var(--logo-gear); }
.logo-ring { fill: none; stroke: var(--logo-s); stroke-width: 1.2; }
.logo-s { fill: none; stroke: var(--logo-s); stroke-width: 3.6; stroke-linecap: round; }

/* ---- Desktop menu ---- */
.primary-nav { justify-self: center; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-login-mobile { display: none; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-sub);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 3px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.nav-link:hover,
.nav-link[aria-expanded="true"],
.nav-link[aria-current="page"],
.nav-item.is-active > .nav-link { color: var(--accent-text); }
.nav-link:hover::after,
.nav-link[aria-expanded="true"]::after,
.nav-link[aria-current="page"]::after,
.nav-item.is-active > .nav-link::after { transform: scaleX(1); }

.caret { width: 14px; height: 14px; flex: none; transition: transform .25s ease; }
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* ---- Dropdown ---- */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 190px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-dropdown.open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dropdown a {
  display: block;
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color .2s ease, color .2s ease;
}
.dropdown a:hover,
.dropdown a[aria-current="page"] {
  background: var(--bg);
  color: var(--accent-text);
}
.dropdown a[aria-current="page"] { font-weight: 600; }

@media (min-width: 901px) and (hover: hover) {
  .has-dropdown:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-dropdown:hover > .nav-link { color: var(--accent-text); }
  .has-dropdown:hover > .nav-link::after { transform: scaleX(1); }
  .has-dropdown:hover .caret { transform: rotate(180deg); }
}

/* ---- Right-side actions ---- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
.nav-actions .nav-login-desktop { height: 44px; min-height: 44px; padding: 0 12px; font-size: .85rem; line-height: 1; white-space: nowrap; }
.menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 0; }
.menu-toggle .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle.is-open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Tablet + mobile: hamburger ---- */
@media (max-width: 900px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-login-desktop { display: none; }
  .menu-toggle { display: inline-flex; }

  .primary-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    justify-self: stretch;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    transition: max-height .3s ease, visibility .3s;
  }
  .primary-nav.open {
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    visibility: visible;
    box-shadow: var(--shadow);
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding: 8px 24px 20px;
  }
  .nav-item { border-bottom: 1px solid var(--border); }
  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
  }
  .nav-link::after { display: none; }
  .nav-item.is-active > .nav-link,
  .nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); padding-inline-start: 12px; }

  .dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 8px 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .has-dropdown.open > .dropdown { display: block; }
  .dropdown a { padding: 10px 0; padding-inline-start: 20px; }

  .nav-login-mobile { display: block; border-bottom: 0; padding-top: 16px; }
  .nav-login-mobile .btn { width: 100%; }
}

@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .nav-list { padding-inline: 16px; }
  .brand-name { font-size: 1.45rem; }
  .brand-logo { width: 38px; height: 38px; }
  .nav-actions { gap: 8px; }
  .icon-btn { min-width: 42px; height: 42px; padding: 0 9px; }
}

/* ==========================================================
   MAIN (placeholder container so footer sits at the bottom)
   ========================================================== */
.page-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 40px;
}
.page-main h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
.page-main p { margin-top: 12px; font-size: 1.rem; color: var(--text-muted); }
.page-main .btn { margin-top: 20px; }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
  background: var(--surface);
  border-top: 3px solid var(--accent);
  color: var(--text);
  transition: background-color .3s ease, color .3s ease;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr 1.5fr;
  gap: 32px 32px;
  padding-block: 44px 36px;
}
.footer-title {
  margin-bottom: 14px;
  color: var(--accent-text);
  font-family: var(--font-sub);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.footer-brand .brand { margin-bottom: 14px; }
.footer-col p { font-size: .95rem; line-height: 1.65; }

.footer-links { display: grid; gap: 9px; }
.footer-links a,
.footer-bottom a,
.footer-contact a {
  color: var(--text);
  font-size: .95rem;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: color .2s ease, background-size .25s ease;
}
.footer-links a:hover,
.footer-bottom a:hover,
.footer-contact a:hover { color: var(--accent-text); background-size: 100% 2px; }
.footer-links { justify-items: start; }

.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--text);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: var(--btn-text); }
.social svg { width: 20px; height: 20px; }

.footer-contact { display: grid; gap: 12px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; line-height: 1.5; }
.footer-contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent-text); }
.ltr-text { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.newsletter-form { display: grid; gap: 10px; margin-top: 14px; }
.newsletter-form input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
}
.newsletter-form input::placeholder { color: var(--text-muted); opacity: 1; }
.newsletter-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.newsletter-form .btn { width: 100%; }
.form-msg { font-size: .95rem; line-height: 1.5; font-weight: 600; }
.form-msg:empty { display: none; }

.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 16px;
}
.footer-bottom p,
.footer-bottom a { font-size: .95rem; }
.footer-bottom nav { display: flex; gap: 20px; }

/* ---- Footer responsive ---- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(6, 1fr); gap: 30px 28px; padding-block: 40px 32px; }
  .footer-brand { grid-column: span 3; }
  .footer-newsletter { grid-column: span 3; grid-row: 1; }
  .footer-brand { grid-row: 1; }
  .footer-grid > .footer-col:nth-child(2),
  .footer-grid > .footer-col:nth-child(3),
  .footer-contact-col { grid-column: span 2; grid-row: 2; }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; padding-block: 32px 28px; }
  .footer-brand,
  .footer-contact-col,
  .footer-newsletter { grid-column: 1 / -1; grid-row: auto; }
  .footer-grid > .footer-col:nth-child(2),
  .footer-grid > .footer-col:nth-child(3) { grid-column: span 1; grid-row: auto; }
  .footer-bottom .container { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================
   MERGED: home-1.css
   ========================================================== */
/* ==========================================================
   SILVARN - Home 1 / Section 1: "Forge Reveal" banner
   Light tokens here, dark tokens in darkmode.css, RTL in rtl.css
   Fonts: header = Prata, sub-header = Arimo, content = Inter
   ========================================================== */
/* The hero owns the whole <main>: no padding, no centering */
.page-main--flush {
  display: block;
  padding: 0;
  text-align: start;
}
.hero {
  /* One spacing unit used for every gap + the top/bottom padding */
  --hero-gap: clamp(14px, 2.6vh, 26px);
  --hero-pad: clamp(16px, 3vh, 30px);
  --rail-h: clamp(92px, 16vh, 188px);          /* side-card photo height */
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Light mode: cream overlay, dark text, petrol accents */
  --hero-ov: 243, 241, 237;
  --hero-ov-top: .9;
  --hero-ov-mid: .8;
  --hero-ov-bot: .93;
  --hero-chip-bg: rgba(243,241,237, .82);
  --hero-card-bg: var(--surface);
  --hero-card-border: var(--accent-text);
  --hero-spark: #b34e1d;
  --hero-gear-op: .5;

  position: relative;
  isolation: isolate;
  display: flex;
  overflow: hidden;
  /* exactly one screen below the sticky navbar (header + 1px border) */
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
  color: var(--text);
}
/* Scroll-cue target stays below the sticky navbar */
.hero ~ *,
.site-footer { scroll-margin-top: calc(var(--header-h) + 1px); }
/* ---------- 1. Background ---------- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}
.hero-photo-wrap,
.hero-gear-wrap,
.hero-dust {
  position: absolute;
  will-change: transform;
}
.hero-photo-wrap {
  inset: -22px;
  transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -12px), 0);
}
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  animation: heroZoom 30s ease-in-out infinite alternate;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--hero-ov), var(--hero-ov-top)) 0%,
    rgba(var(--hero-ov), var(--hero-ov-mid)) 45%,
    rgba(var(--hero-ov), var(--hero-ov-bot)) 100%
  );
  transition: background .3s ease;
}
.hero-gear-wrap {
  top: 42%;
  left: 50%;
  width: min(74vh, 560px);
  aspect-ratio: 1;
  margin: calc(min(74vh, 560px) / -2) 0 0 calc(min(74vh, 560px) / -2);
  transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px), 0);
}
.hero-gear {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--hero-gear-op);
  animation: gearSpin 90s linear infinite;
}
.hero-gear .gear-teeth { fill: none; stroke: var(--accent); stroke-width: .2; stroke-linejoin: round; }
.hero-gear .gear-ring { fill: none; stroke: var(--accent); stroke-width: .16; stroke-dasharray: .5 .9; }
.hero-gear .gear-ring-2 { stroke-dasharray: .3 1.1; }
.hero-dust { inset: 0; pointer-events: none; transform: translate3d(calc(var(--mx, 0) * 22px), calc(var(--my, 0) * 16px), 0); }
.spark {
  position: absolute;
  bottom: -12px;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: var(--hero-spark);
  box-shadow: 0 0 8px 1px var(--hero-spark);
  opacity: 0;
  animation: sparkRise var(--d, 14s) linear var(--w, 0s) infinite;
}
.hero.is-offscreen .hero-photo,
.hero.is-offscreen .hero-gear,
.hero.is-offscreen .spark { animation-play-state: paused; }
/* ---------- Layout: one centred stage + build rail ---------- */
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap);
  padding-block: var(--hero-pad);
}
.hero-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hero-gap);
  text-align: center;
}
/* 2. Eyebrow chip */
.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  background: var(--hero-chip-bg);
  color: var(--accent-text);
  border: 1px solid var(--accent-text);
  border-radius: 999px;
  font-family: var(--font-sub);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  animation: heroFade .8s var(--ease) .05s backwards;
}
/* 3. Headline - line by line mask wipe */
.hero-title {
  font-size: clamp(1.9rem, min(5.6vw, 8vh), 4.5rem);
  line-height: 1.12;
  margin-bottom: -.2em;          /* trims the empty descender room so all gaps look equal */
  color: var(--text);
}
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.hero-title .line-inner {
  display: block;
  animation: heroLine 1s var(--ease) backwards;
}
.hero-title .line:nth-child(1) .line-inner { animation-delay: .3s; }
.hero-title .line:nth-child(2) .line-inner { animation-delay: .5s; }
.hero-title .accent-word { position: relative; display: inline-block; }
.hero-title .accent-word::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: .02em;
  height: 3px;
  background: var(--accent);
  transform-origin: left center;
  animation: heroUnderline .9s var(--ease) 1s backwards;
}
/* 4. Subtext */
.hero-sub {
  max-width: 80ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.5;
  color: var(--text);
  animation: heroFade .8s var(--ease) 1s backwards;
}
/* Controls row: scroll cue | buttons | counter */
.hero-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--hero-gap);
  width: 100%;
}
/* 5. Buttons */
.hero-cta {
  display: flex;
  gap: 12px;
  animation: heroFade .8s var(--ease) 1.15s backwards;
}
.hero .btn { min-height: 48px; padding-inline: 26px; }
.hero .btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--accent-text);
}
.hero .btn-outline:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}
/* 6. Scroll cue + counter */
.scroll-cue {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-sub);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  animation: heroFade .8s var(--ease) 1.3s backwards;
}
.scroll-cue .mouse {
  position: relative;
  flex: none;
  width: 24px;
  height: 36px;
  border: 2px solid var(--accent-text);
  border-radius: 14px;
}
.scroll-cue .mouse::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--accent);
  animation: wheel 1.8s ease-in-out infinite;
}
.scroll-cue:hover { color: var(--accent-text); }
.hero-counter {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: heroFade .8s var(--ease) 1.3s backwards;
}
.hero-count {
  margin-inline-end: 4px;
  font-family: var(--font-sub);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.hero-arrow { padding: 0; background: var(--hero-chip-bg); }
.hero-arrow svg { width: 18px; height: 18px; }
/* 7. Build rail */
.build-rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr;
  align-items: end;
  gap: var(--hero-gap);
  width: 100%;
}
.build-item { grid-row: 1; min-width: 0; }
.build-item[data-slot="1"] { grid-column: 1; }
.build-item[data-slot="2"] { grid-column: 2; }
.build-item[data-slot="3"] { grid-column: 3; }
.build-item[data-slot="4"] { grid-column: 4; }
.build-item[data-slot="5"] { grid-column: 5; }
.build-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--hero-card-bg);
  color: var(--text);
  border: 1px solid var(--hero-card-border);
  border-radius: 6px;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s ease, background-color .4s ease, color .4s ease, border-color .4s ease;
  animation: heroRise .9s var(--ease) calc(1.2s + var(--rise, 0) * .1s) backwards;
}
.build-media {
  display: block;
  height: var(--rail-h);
  overflow: hidden;
  border: 1px solid rgba(var(--hero-ov), .35);
  border-radius: 3px;
  transition: height .5s var(--ease);
}
.build-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transition: transform .8s var(--ease);
}
.build-label {
  display: block;
  font-family: var(--font-sub);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.build-year { display: none; }
.build-progress {
  display: none;
  height: 4px;
  margin-inline: 4px;
  border-radius: 4px;
  background: rgba(24,26,27, .28);
  overflow: hidden;
}
.build-bar {
  display: block;
  height: 100%;
  background: var(--btn-text);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}
/* Active (centre) card: enlarged + copper */
.build-item.is-active .build-card {
  background: var(--accent);
  color: var(--btn-text);
  border-color: var(--accent);
}
.build-item.is-active .build-media { height: calc(var(--rail-h) * 1.3); border-color: rgba(24,26,27, .35); }
.build-item.is-active .build-year { display: inline; }
.build-item.is-active .build-progress { display: block; }
.build-card:hover img,
.build-card:focus-visible img { transform: scale(1.06); }
@media (hover: hover) {
  .build-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
}
.build-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
@media (min-width: 641px) and (max-width: 1024px) {
  .build-rail { grid-template-columns: 1fr 1.45fr 1fr; }
  .build-item[data-slot="1"],
  .build-item[data-slot="5"] { display: none; }
  .build-item[data-slot="2"] { grid-column: 1; }
  .build-item[data-slot="3"] { grid-column: 2; }
  .build-item[data-slot="4"] { grid-column: 3; }
  .hero { --rail-h: clamp(92px, 15vh, 170px); }
  .hero-controls { grid-template-columns: auto 1fr auto; }
  .hero-cta { justify-self: center; }
}
@media (max-width: 640px) {
  .hero {
    --hero-gap: clamp(10px, 2vh, 18px);
    --hero-pad: clamp(14px, 2.4vh, 22px);
    --rail-h: clamp(76px, 12vh, 118px);
  }
  .hero-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .hero-chip { padding: 6px 16px; font-size: .95rem; letter-spacing: .04em; }
  .hero-controls { grid-template-columns: 1fr; justify-items: stretch; }
  .scroll-cue { display: none; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .hero-counter { justify-self: center; }
  .build-rail {
    display: flex;
    gap: 12px;
    margin-inline: -16px;
    padding: 6px 16px 0;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .build-rail::-webkit-scrollbar { display: none; }
  .build-item {
    flex: 0 0 min(62%, 250px);
    scroll-snap-align: center;
  }
  .build-item[data-slot] { grid-column: auto; }
  .build-item.is-active .build-media { height: var(--rail-h); }
  .build-card { animation-delay: calc(1.2s + var(--rise, 0) * .06s); }
}
@media (min-width: 641px) and (max-height: 660px) {
  .hero { --hero-gap: 12px; --hero-pad: 14px; --rail-h: 78px; }
  .hero-title { font-size: clamp(1.9rem, min(5.6vw, 7vh), 4.5rem); }
  .hero .btn { min-height: 44px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .hero-chip { padding: 6px 12px; font-size: .875rem; letter-spacing: .02em; white-space: nowrap; }
  .hero-cta { flex-direction: row; gap: 10px; }
  .hero-cta .btn { flex: 1; width: auto; padding-inline: 10px; font-size: .95rem; }
}
@media (max-width: 640px) and (max-height: 600px) {
  .hero-counter { display: none; }
}
@media (max-width: 400px) {
  .hero-chip { padding: 6px 12px; font-size: .875rem; letter-spacing: .02em; white-space: nowrap; }
}
/* ---------- Tablet: 3 cards ---------- */
/* ---------- Mobile: swipe strip, stacked buttons ---------- */
/* ---------- Short screens: keep everything inside one screen ---------- */
/* ---------- Keyframes ---------- */
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes gearSpin { to { transform: rotate(360deg); } }
@keyframes heroFade { from { opacity: 0; transform: translateY(14px); } }
@keyframes heroLine { from { transform: translateY(105%); } }
@keyframes heroUnderline { from { transform: scaleX(0); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(46px); } }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(11px); } }
@keyframes sparkRise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  12%  { opacity: .9; }
  80%  { opacity: .5; }
  100% { opacity: 0; transform: translate3d(var(--dx, 20px), -105vh, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before, .hero *::after { animation: none !important; transition: none !important; }
  .hero-dust, .build-progress { display: none !important; }
}

/* ==========================================================
   HOME 1 / SECTION 3 — Craft Partner
   Left: photo + caption column (title, text, arrow) over a ruled row of
   three numbers. Right: tag, headline, text, one ruled feature row, button.
   Open layout (no boxes): lines, squares and cut corners only.
   ========================================================== */
.sv-pt {
  --pt-gap: clamp(16px, 2.2vw, 28px);
  --pt-pad: clamp(48px, 7vw, 88px);
  --pt-line: color-mix(in srgb, var(--text) 28%, transparent);
  --pt-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative; background: var(--bg); color: var(--text);
}
.sv-pt *, .sv-pt *::before, .sv-pt *::after { box-sizing: border-box; }
:where(.sv-pt h2, .sv-pt h3, .sv-pt ul) { margin: 0; padding: 0; }
.sv-pt .sv-pt__tag, .sv-pt .sv-pt__lede, .sv-pt .sv-pt__cap-desc, .sv-pt .sv-pt__feat-desc { margin: 0; }
.sv-pt__wrap {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: calc(var(--pt-gap) * 2.5); align-items: center;
  padding-block: var(--pt-pad);
}
.sv-pt__left { display: flex; flex-direction: column; gap: var(--pt-gap); min-width: 0; }
.sv-pt__top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--pt-gap); align-items: stretch; }
.sv-pt__fig { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface); clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--pt-ease) .15s; }
.sv-pt__fig::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--accent); }
.sv-pt__fig img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1); transition: transform 1.8s var(--pt-ease) .15s; }
html[data-theme="dark"] .sv-pt__fig img { filter: brightness(.94) contrast(1.04); }
.sv-pt__cap { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--pt-gap); min-width: 0; }
.sv-pt__cap-name { font: 700 clamp(22px, 2vw, 28px)/1.15 var(--font-head); color: var(--text); }
.sv-pt .sv-pt__cap-desc { margin-top: 8px !important; font: 400 16px/1.55 var(--font-body); color: var(--text-muted); }

.sv-pt__go, .sv-pt__btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn-bg); color: var(--btn-text); text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.sv-pt__go { width: 56px; height: 56px; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.sv-pt__btn { gap: 14px; min-height: 56px; padding: 0 30px; font: 700 16px/1.2 var(--font-sub); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); align-self: flex-start; }
.sv-pt__go:hover, .sv-pt__go:focus-visible, .sv-pt__btn:hover, .sv-pt__btn:focus-visible { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
.sv-pt__go svg, .sv-pt__btn svg { width: 22px; height: 22px; flex: none; transition: transform .3s var(--pt-ease); }
.sv-pt__go:hover svg, .sv-pt__btn:hover svg, .sv-pt__go:focus-visible svg, .sv-pt__btn:focus-visible svg { transform: translateX(4px); }
.sv-pt__go:focus-visible, .sv-pt__btn:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }

.sv-pt__stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pt-gap); list-style: none; padding-top: var(--pt-gap); border-top: 2px solid var(--pt-line); }
.sv-pt__stats::before { content: ""; position: absolute; inset: -2px 0 auto 0; height: 2px; background: var(--accent); transform-origin: left center; transition: transform 1.5s var(--pt-ease) .5s; }
.sv-pt__stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv-pt__stat + .sv-pt__stat { padding-inline-start: var(--pt-gap); border-inline-start: 2px solid var(--pt-line); }
.sv-pt__num { font: 700 clamp(36px, 4.2vw, 56px)/1 var(--font-head); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.sv-pt__lbl { font: 400 16px/1.4 var(--font-body); color: var(--text-muted); }

.sv-pt__right { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pt-gap); min-width: 0; }
.sv-pt .sv-pt__tag { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px; border: 2px solid var(--text); font: 700 15px/1.3 var(--font-sub); letter-spacing: .04em; color: var(--text); }
.sv-pt__tag::before, .sv-pt__tag::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sv-pt__title { font: 700 clamp(34px, 4.6vw, 64px)/1.05 var(--font-head); letter-spacing: -.012em; color: var(--text); text-wrap: balance; }
.sv-pt .sv-pt__lede { max-width: 54ch; font: 400 clamp(16px, 1.25vw, 18px)/1.65 var(--font-body); color: var(--text-muted); }
.sv-pt__feat { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--pt-gap); align-items: center; padding-block: var(--pt-gap); border-block: 2px solid var(--pt-line); }
.sv-pt__feat-ic { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--accent); color: var(--accent-text); }
.sv-pt__feat-ic svg { width: 26px; height: 26px; }
.sv-pt__feat-name { font: 700 22px/1.2 var(--font-head); color: var(--text); }
.sv-pt .sv-pt__feat-desc { margin-top: 4px !important; font: 400 16px/1.55 var(--font-body); color: var(--text-muted); }

/* one entrance, only when JS runs */
.sv-pt__right > *, .sv-pt__cap > *, .sv-pt__stat { transition: opacity .8s var(--pt-ease) var(--d, 0s), transform .8s var(--pt-ease) var(--d, 0s); }
.sv-pt__tag { --d: .05s; } .sv-pt__title { --d: .15s; } .sv-pt__lede { --d: .3s; } .sv-pt__feat { --d: .42s; } .sv-pt__btn { --d: .54s; }
.sv-pt__cap > :nth-child(1) { --d: .6s; } .sv-pt__cap > :nth-child(2) { --d: .7s; }
.sv-pt__stat:nth-child(1) { --d: .75s; } .sv-pt__stat:nth-child(2) { --d: .88s; } .sv-pt__stat:nth-child(3) { --d: 1s; }
.js .sv-pt:not(.is-in) .sv-pt__right > *, .js .sv-pt:not(.is-in) .sv-pt__cap > *, .js .sv-pt:not(.is-in) .sv-pt__stat { opacity: 0; transform: translateY(18px); }
.js .sv-pt:not(.is-in) .sv-pt__fig { clip-path: inset(100% 0 0 0); }
.js .sv-pt:not(.is-in) .sv-pt__fig img { transform: scale(1.15); }
.js .sv-pt:not(.is-in) .sv-pt__stats::before { transform: scaleX(0); }

@media (max-width: 1024px) {
  .sv-pt__wrap { grid-template-columns: minmax(0, 1fr); gap: calc(var(--pt-gap) * 1.5); }
  .sv-pt__right { order: -1; }
}
@media (max-width: 640px) {
  .sv-pt__top { grid-template-columns: minmax(0, 1fr); }
  .sv-pt__fig { aspect-ratio: 4 / 3; }
  .sv-pt__cap { flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; }
  .sv-pt__cap-tx { flex: 1; min-width: 0; }
  .sv-pt__stats { grid-template-columns: minmax(0, 1fr); }
  .sv-pt__stat + .sv-pt__stat { padding-inline-start: 0; border-inline-start: 0; padding-top: var(--pt-gap); border-top: 2px solid var(--pt-line); }
  .sv-pt__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-pt *, .sv-pt *::before, .sv-pt *::after { transition: none !important; }
  .js .sv-pt:not(.is-in) .sv-pt__right > *, .js .sv-pt:not(.is-in) .sv-pt__cap > *, .js .sv-pt:not(.is-in) .sv-pt__stat { opacity: 1; transform: none; }
  .js .sv-pt:not(.is-in) .sv-pt__fig { clip-path: inset(0 0 0 0); }
  .js .sv-pt:not(.is-in) .sv-pt__fig img { transform: none; }
  .js .sv-pt:not(.is-in) .sv-pt__stats::before { transform: none; }
}


/* ==========================================================
   MERGED: build-journey.css  (REDESIGN v2 - Pinned Build Line)
   Home-1 / The Silvarn Method: a pinned stage; vertical scroll
   drives a horizontal build line of full-bleed stage panels
   plus a mechanical progress ruler. No stacking, no swapping.
   One gap token; frame padding top = bottom; text >= 14px.
   ========================================================== */
.build-journey {
  --jr-gap: clamp(16px, 2vh, 24px);
  --jr-pad: clamp(20px, 3.2vh, 32px);
  --jr-vw: min(1280px, 100vw - 48px);
  --jr-w: min(880px, calc(var(--jr-vw) * .72));
  --hdr: 73px; --p: 0;
  --jr-bg:#f3f1ed; --jr-ink:#181a1b; --jr-muted:#5e6163; --jr-copper:#a9481a;
  --jr-line:rgba(94,97,99,.5); --jr-grid:rgba(94,97,99,.07);
  position:relative; height:400vh; color:var(--jr-ink); background-color:var(--jr-bg);
  background-image:linear-gradient(var(--jr-grid) 1px,transparent 1px),linear-gradient(90deg,var(--jr-grid) 1px,transparent 1px);
  background-size:48px 48px; border-top:1px solid var(--jr-line);
}
html[data-theme="dark"] .build-journey {
  --jr-bg:#181a1b; --jr-ink:#f3f1ed; --jr-muted:#b9b4ac; --jr-copper:#e0783f;
  --jr-line:rgba(236,143,91,.45); --jr-grid:rgba(236,143,91,.06);
}
.jr-pin {position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));box-sizing:border-box;width:var(--jr-vw);margin-inline:auto;padding-block:var(--jr-pad);display:flex;flex-direction:column;gap:var(--jr-gap)}
.jr-head {flex:0 0 auto;text-align:center}
.build-journey .jr-kicker {display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 10px;color:var(--jr-copper);font:700 14px/1.3 var(--font-sub);letter-spacing:.18em;text-transform:uppercase}
.jr-kicker span {width:clamp(24px,6vw,72px);height:2px;background:var(--jr-copper)}
.build-journey .jr-head h2 {margin:0;font:400 clamp(28px,3.8vw,50px)/1.12 var(--font-head);letter-spacing:-.02em;color:var(--jr-ink)}
.build-journey .jr-head h2 em {font-style:normal;color:var(--jr-copper)}

/* viewport + track */
.jr-viewport {flex:1 1 auto;min-height:0;overflow:hidden;border-radius:6px;direction:ltr}
.jr-track {display:flex;gap:var(--jr-gap);height:100%;width:max-content;will-change:transform}
.jr-panel {position:relative;flex:0 0 var(--jr-w);height:100%;overflow:hidden;border:1px solid var(--jr-line);border-radius:6px;background:#181a1b;color:#f3f1ed;isolation:isolate;filter:brightness(calc(.62 + .38*var(--f,1)))}
html[dir="rtl"] .jr-panel {direction:rtl}
.jr-panel>img {position:absolute;top:0;left:-6%;width:112%;max-width:none;height:100%;object-fit:cover;z-index:-2;transform:translate3d(var(--px,0px),0,0) scale(1.02);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.jr-panel:hover>img {transform:translate3d(var(--px,0px),0,0) scale(1.08)}
.jr-panel::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(24,26,27,.7) 0%,rgba(24,26,27,0) 34%),linear-gradient(to top,rgba(24,26,27,.55) 0%,rgba(24,26,27,0) 45%)}
.jr-num {position:absolute;top:18px;left:24px;font:400 clamp(56px,7vw,96px)/1 var(--font-head);color:#f3f1ed;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.jr-tag {position:absolute;top:22px;right:24px;padding:9px 14px;border-bottom:2px solid #e0783f;border-radius:3px;background:rgba(24,26,27,.92);color:#f3f1ed;font:700 14px/1 var(--font-sub);letter-spacing:.14em}
.jr-plate {position:absolute;left:0;bottom:0;width:min(520px,100%);box-sizing:border-box;padding:24px 28px 26px;background:rgba(24,26,27,.92);border-top:3px solid #e0783f;border-top-right-radius:6px;transition:padding .35s ease}
.build-journey .jr-mark {margin:0 0 8px;color:#e0783f;font:700 14px/1.3 var(--font-sub);letter-spacing:.16em;text-transform:uppercase;padding-top:20px;}
.build-journey .jr-plate h3 {margin:0 0 10px;font:400 clamp(26px,2.6vw,36px)/1.15 var(--font-head);color:#ffffff}
.build-journey .jr-text {margin:0 0 16px;color:#f3f1ed;font:400 16px/1.55 var(--font-body)}
.build-journey .jr-out {margin:0;padding-top:14px;border-top:1px solid rgba(224,120,63,.45);color:#ffffff;font:500 15px/1.4 var(--font-body)}
.jr-out b {display:block;margin-bottom:4px;color:#e0783f;font:700 14px/1.3 var(--font-sub);letter-spacing:.14em}

/* closing CTA panel */
.jr-panel--cta {background:#e38f5f;color:#181a1b;border-color:#e0783f;display:flex;align-items:center;filter:none}
.jr-panel--cta::before {display:none}
.jr-panel--cta .jr-num {left:clamp(24px,4vw,56px);color:#181a1b;text-shadow:none;opacity:.9}
.jr-cta-copy {width:min(560px,100%);box-sizing:border-box;padding:0 clamp(24px,4vw,56px)}
.build-journey .jr-panel--cta .jr-mark {color:#181a1b}
.build-journey .jr-panel--cta h3 {margin:0 0 12px;font:400 clamp(30px,3.6vw,48px)/1.12 var(--font-head);color:#181a1b}
.build-journey .jr-panel--cta .jr-text {color:#181a1b;font-size:17px;margin-bottom:24px}
.jr-cta {display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border-radius:999px;background:#181a1b;color:#f3f1ed;font:700 15px/1.2 var(--font-sub);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease}
.jr-cta:hover,.jr-cta:focus-visible {transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.3)}

/* progress rail */
.jr-rail {flex:0 0 auto;display:flex;align-items:flex-start;gap:20px}
.jr-count {display:flex;align-items:baseline;gap:6px;min-width:78px;color:var(--jr-ink)}
.jr-count b {font:400 34px/1 var(--font-head);color:var(--jr-copper)}
.jr-count span {font:700 14px/1 var(--font-sub);letter-spacing:.1em;color:var(--jr-muted)}
.jr-ruler {position:relative;flex:1;min-width:0}
.jr-line {position:relative;height:16px;border-bottom:2px solid var(--jr-line);background:repeating-linear-gradient(90deg,var(--jr-line) 0 1px,transparent 1px 12px) left bottom/100% 9px no-repeat}
.jr-fill {position:absolute;left:0;right:0;bottom:-3px;height:4px;background:var(--jr-copper);transform:scaleX(var(--p));transform-origin:left}
.jr-gear {position:absolute;top:calc(100% - 15px);left:calc(15px + (100% - 30px)*var(--p));width:30px;height:30px;margin-left:-15px;color:var(--jr-copper);transform:rotate(calc(var(--p)*720deg))}
.jr-gear svg {display:block;width:100%;height:100%;fill:currentColor}
.jr-hole {fill:var(--jr-bg)}
.jr-stops {list-style:none;margin:0;padding:0;position:relative;height:20px;margin-top:20px}
.jr-stops li {position:absolute;top:0;left:calc(var(--s)*100%);transform:translateX(-50%);white-space:nowrap;color:var(--jr-muted);font:700 14px/1.3 var(--font-sub);letter-spacing:.08em;text-transform:uppercase;transition:color .3s ease}
.jr-stops li:first-child {transform:none}
.jr-stops li:last-child {transform:translateX(-100%)}
.jr-stops i {font-style:normal}
.jr-stops li.is-done {color:var(--jr-ink)}
.jr-stops li.is-active {color:var(--jr-copper)}

/* static / reduced-motion: no pin, manual horizontal scroll with snap */
.build-journey.jr-static {height:auto}
.jr-static .jr-pin {position:static;height:auto;padding-block:clamp(48px,6vw,72px)}
.jr-static .jr-viewport {overflow-x:auto;scroll-snap-type:x mandatory;height:clamp(460px,70vh,620px);flex:none}
.jr-static .jr-panel {scroll-snap-align:start;filter:none}
.jr-static .jr-rail {display:none}

@media (max-width:700px) {
  .build-journey {--jr-vw:min(1280px,100vw - 32px);--jr-w:calc(var(--jr-vw) * .9)}
  .jr-num {top:14px;left:16px}
  .jr-tag {top:16px;right:16px;padding:8px 10px;letter-spacing:.1em}
  .jr-plate {width:100%;padding:18px 18px 20px;border-top-right-radius:0}
  .build-journey .jr-text {font-size:15px;margin-bottom:12px}
  .build-journey .jr-out {padding-top:10px}
  .jr-count {min-width:0}
  .jr-count span {display:none}
  .jr-rail {gap:14px}
  .jr-stops li {letter-spacing:.02em}
  .jr-stops i {display:none}
  .jr-kicker span {display:none}
  .build-journey .jr-kicker {letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce) {
  .jr-panel>img {transition:none}
}

/* ==========================================================
   MERGED: why-silvarn.css  (REDESIGN v2 - Gallery Strip)
   Home-1 / Section 2: 4-panel mechanical build gallery.
   One spacing token (--why-gap) drives every gap; section
   padding top = bottom. All text >= 14px, theme-safe.
   ========================================================== */
.why-silvarn {
  --why-gap: clamp(20px, 2.2vw, 28px);
  --why-pad: clamp(56px, 6vw, 80px);
  --why-bg:#f3f1ed; --why-card:#ffffff; --why-ink:#181a1b; --why-muted:#5e6163;
  --why-copper:#b34e1d; --why-line:rgba(94,97,99,.38); --why-grid:rgba(94,97,99,.07);
  --why-btn-bg:#181a1b; --why-btn-ink:#f3f1ed;
  position:relative; isolation:isolate; overflow:hidden;
  color:var(--why-ink); background-color:var(--why-bg);
  background-image:linear-gradient(var(--why-grid) 1px,transparent 1px),linear-gradient(90deg,var(--why-grid) 1px,transparent 1px);
  background-size:48px 48px;
  padding-block:var(--why-pad);
}
html[data-theme="dark"] .why-silvarn {
  --why-bg:#181a1b; --why-card:#25292b; --why-ink:#f3f1ed; --why-muted:#b9b4ac;
  --why-copper:#e0783f; --why-line:rgba(236,143,91,.4); --why-grid:rgba(236,143,91,.06);
  --why-btn-bg:#e0783f; --why-btn-ink:#181a1b;
}
.why-inner {display:flex;flex-direction:column;gap:var(--why-gap)}
.why-heading {text-align:center;max-width:860px;margin:0 auto}
.why-silvarn .why-eyebrow {display:flex;align-items:center;justify-content:center;gap:16px;color:var(--why-copper);font:700 14px/1.3 var(--font-sub);letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px}
.why-eyebrow span {width:clamp(32px,7vw,88px);height:2px;background:var(--why-copper)}
.why-silvarn .why-heading h2 {font:400 clamp(32px,4.4vw,56px)/1.12 var(--font-head);color:var(--why-ink);margin:0 0 14px}
.why-silvarn .why-heading h2 em {font-style:normal;color:var(--why-copper)}
.why-silvarn .why-lede {font:400 17px/1.6 var(--font-body);color:var(--why-muted);margin:0 auto;max-width:700px}

/* gallery strip */
.why-gallery {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--why-gap)}
.why-panel {position:relative;display:flex;flex-direction:column;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--why-line);border-radius:var(--radius);background:#181a1b;color:#f3f1ed;isolation:isolate}
.why-panel>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.why-panel::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(24,26,27,.96) 0%,rgba(24,26,27,.86) 34%,rgba(24,26,27,.15) 66%,rgba(24,26,27,0) 100%)}
.why-panel::after {content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:#e0783f;transform:scaleX(.18);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.why-panel:hover>img,.why-panel:focus-within>img {transform:scale(1.06)}
.why-panel:hover::after,.why-panel:focus-within::after {transform:scaleX(1)}
.why-panel-top {display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:rgba(24,26,27,.94);border-bottom:2px solid #e0783f}
.why-num {font:700 20px/1 var(--font-sub);letter-spacing:.12em;color:#f3f1ed}
.why-icon {display:grid;place-items:center;width:36px;height:36px;border:1px solid #e0783f;border-radius:50%;color:#e0783f;font-size:18px;line-height:1}
.why-panel-body {margin-top:auto;padding:0 18px 22px}
.why-silvarn .why-overline {font:700 14px/1.3 var(--font-sub);letter-spacing:.14em;text-transform:uppercase;color:white;margin:0 0 8px;}
.why-silvarn .why-panel h3 {font:400 clamp(22px,2vw,26px)/1.18 var(--font-head);color:#ffffff;margin:0 0 10px}
.why-silvarn .why-panel-body>p:last-child {font:400 15px/1.55 var(--font-body);color:#f3f1ed;margin:0}

/* proof strip */
.why-proof {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--why-line);border:1px solid var(--why-line);border-radius:var(--radius);overflow:hidden}
.why-proof>div {background:var(--why-card);padding:18px 16px;text-align:center}
.why-silvarn .why-proof strong {display:block;font:400 clamp(26px,2.6vw,32px)/1.1 var(--font-head);color:var(--why-copper);margin:0 0 6px}
.why-silvarn .why-proof p {font:600 15px/1.35 var(--font-sub);color:var(--why-muted);margin:0}

/* footer cta */
.why-footer {display:flex;justify-content:center}
.why-cta {display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:var(--radius);background:var(--why-btn-bg);color:var(--why-btn-ink);font:700 15px/1.2 var(--font-sub);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.why-cta:hover,.why-cta:focus-visible {transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}

.why-silvarn [data-why-reveal] {opacity:0;transform:translateY(18px);transition:opacity .6s ease calc(var(--i,0)*.08s),transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.08s)}
.why-silvarn [data-why-reveal].is-visible,.why-silvarn.is-visible [data-why-reveal] {opacity:1;transform:none}

@media(max-width:1024px) {
  .why-gallery {grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-panel {aspect-ratio:4/3.4}
  .why-proof {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px) {
  .why-gallery {grid-template-columns:minmax(0,1fr)}
  .why-panel {aspect-ratio:4/3.6}
  .why-lede {font-size:16px}
}
@media(prefers-reduced-motion:reduce) {
  .why-silvarn *,.why-silvarn *::before,.why-silvarn *::after {transition:none!important;animation:none!important}
  .why-silvarn [data-why-reveal] {opacity:1;transform:none}
}

/* ==========================================================
   MERGED: silvarn-standard.css  (REDESIGN v2 - Build Steps)
   Home-1 / Section 5: five stepped image tiles + centred copy.
   One spacing token (--st-gap); top padding = bottom padding;
   all text >= 14px; theme-safe via local tokens.
   ========================================================== */
.silvarn-standard {
  --st-gap: clamp(16px, 2vw, 28px);
  --st-step: clamp(32px, 4.6vw, 60px);
  --st-pad: clamp(56px, 6vw, 80px);
  --st-bg:#f3f1ed; --st-ink:#181a1b; --st-muted:#5e6163; --st-copper:#a9481a;
  --st-line:rgba(94,97,99,.38); --st-glow:rgba(224,120,63,.18);
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:var(--st-pad);
  color:var(--st-ink); background:var(--st-bg);
  background-image:radial-gradient(ellipse at 50% 100%,var(--st-glow),transparent 55%);
  border-top:1px solid var(--st-line);
}
html[data-theme="dark"] .silvarn-standard {
  --st-bg:#181a1b; --st-ink:#f3f1ed; --st-muted:#b9b4ac; --st-copper:#e0783f;
  --st-line:rgba(236,143,91,.4); --st-glow:rgba(224,120,63,.16);
}
.standard-wrap {width:min(1280px,calc(100% - 48px));margin-inline:auto}
.standard-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--st-gap);align-items:start}
.standard-steps {display:contents;list-style:none;margin:0;padding:0}

/* tiles */
.st-tile {grid-column:var(--col);grid-row:1;margin-top:calc(var(--lvl)*var(--st-step));min-width:0;list-style:none}
.st-tile--edge {grid-row:1 / span 2}
.st-tile figure {margin:0;display:flex;flex-direction:column;gap:14px}
.st-media {position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:6px;border:1px solid var(--st-line);background:#181a1b;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease,box-shadow .35s ease,clip-path 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.14s);clip-path:inset(100% 0 0 0)}
.st-media img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(var(--sc,1.35));transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.st-media::after {content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.st-badge {position:absolute;top:10px;left:10px;z-index:2;min-width:40px;padding:7px 10px;text-align:center;border-radius:4px;background:rgba(24,26,27,.92);color:#f3f1ed;border-bottom:2px solid #e0783f;font:700 14px/1 var(--font-sub);letter-spacing:.12em}
.st-tile figcaption {display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.silvarn-standard .st-name {font:600 18px/1.3 var(--font-sub);color:var(--st-ink);position:relative;padding-bottom:6px}
.silvarn-standard .st-name::after {content:"";position:absolute;left:50%;bottom:0;width:28px;height:2px;background:var(--st-copper);transform:translateX(-50%);transition:width .4s ease}
.silvarn-standard .st-sub {font:400 15px/1.45 var(--font-body);color:var(--st-muted)}
.st-tile:hover .st-name::after {width:72px}
.st-tile:hover .st-media {box-shadow:0 16px 34px rgba(0,0,0,.28)}
.st-tile:hover .st-media::after {transform:translateX(120%);transition:transform .9s ease}
.st-tile:hover .st-media img {--sc:1.22}

/* centre copy */
.standard-center {grid-column:2 / 5;grid-row:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--st-gap);min-width:0}
.silvarn-standard .standard-eyebrow {margin:0;color:var(--st-copper);font:700 14px/1.3 var(--font-sub);letter-spacing:.18em;text-transform:uppercase}
.silvarn-standard .standard-center h2 {margin:0;font:400 clamp(32px,4.4vw,58px)/1.14 var(--font-head);letter-spacing:-.02em;color:var(--st-ink)}
.st-line {display:block;overflow:hidden;padding-bottom:.08em}
.st-line>span,.st-line>em {display:block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.8,.2,1) .5s}
.st-line:nth-child(2)>em {transition-delay:.7s}
.silvarn-standard .standard-center h2 em {font-style:normal;color:var(--st-copper)}
.silvarn-standard .standard-lede {margin:0;max-width:600px;color:var(--st-muted);font:400 17px/1.6 var(--font-body)}
.standard-cta {display:inline-flex;align-items:center;gap:14px;padding:6px 26px 6px 6px;border:1.5px solid var(--st-ink);border-radius:999px;color:var(--st-ink);text-decoration:none;background:transparent;transition:background .3s ease,color .3s ease,transform .3s ease}
.st-cta-icon {display:grid;place-items:center;width:42px;height:42px;border:1.5px solid var(--st-ink);border-radius:50%;font-size:20px;line-height:1;transition:transform .4s ease,background .3s ease,color .3s ease;animation:stPulse 2.4s ease-out infinite}
.st-cta-text {font:700 15px/1.2 var(--font-sub);letter-spacing:.08em;text-transform:uppercase}
.standard-cta:hover,.standard-cta:focus-visible {background:var(--st-ink);color:var(--st-bg);transform:translateY(-2px)}
.standard-cta:hover .st-cta-icon,.standard-cta:focus-visible .st-cta-icon {transform:rotate(45deg);background:var(--st-copper);border-color:var(--st-copper);color:#181a1b}
@keyframes stPulse {0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-copper) 55%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}

/* reveal states */
.st-tile figcaption,.standard-center>p,.standard-cta {opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.st-tile figcaption {transition-delay:calc(var(--i)*.14s + .6s)}
.standard-center>.standard-eyebrow {transition-delay:.35s}
.standard-center>.standard-lede {transition-delay:.9s}
.standard-cta {transition-delay:1.1s}
.silvarn-standard.is-in .st-media {clip-path:inset(0 0 0 0)}
.silvarn-standard.is-in .st-media img {--sc:1.12}
.silvarn-standard.is-in .st-tile figcaption,.silvarn-standard.is-in .standard-center>p,.silvarn-standard.is-in .standard-cta {opacity:1;transform:none}
.silvarn-standard.is-in .st-line>span,.silvarn-standard.is-in .st-line>em {transform:none}
.silvarn-standard.is-in .st-media::after {animation:stShine 1.2s ease calc(var(--i)*.14s + 1s) 1 both}
@keyframes stShine {from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.silvarn-standard.is-in .standard-cta {transition-delay:0s}

@media (max-width:900px) {
  .standard-wrap {width:min(100% - 32px,640px)}
  .standard-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-tile,.st-tile--edge {grid-column:auto;grid-row:auto;margin-top:0}
  .standard-center {grid-column:1 / -1;grid-row:1;padding:0 0 var(--st-gap)}
  .st-tile:nth-child(1),.st-tile:nth-child(2) {grid-row:2}
  .st-tile:nth-child(3),.st-tile:nth-child(4) {grid-row:3}
  .st-tile:nth-child(5) {grid-column:1 / 3;grid-row:4}
  .st-tile:nth-child(5) .st-media {aspect-ratio:3/2}
}
@media (max-width:420px) {
  .st-cta-text {font-size:14px;letter-spacing:.05em}
}
@media (prefers-reduced-motion:reduce) {
  .silvarn-standard *,.silvarn-standard *::before,.silvarn-standard *::after {animation:none!important;transition:none!important}
  .st-media {clip-path:none}
  .st-media img {--sc:1.12}
  .st-tile figcaption,.standard-center>p,.standard-cta {opacity:1;transform:none}
  .st-line>span,.st-line>em {transform:none}
}

/* ==========================================================
   MERGED: silvarn-next.css
   ========================================================== */
/* SILVARN HOME-1 SECTION 6 — WORKSHOP NOTES / editorial FAQ */
.silvarn-next {position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(44px,5vw,72px);color:var(--text);background:radial-gradient(ellipse at 8% 45%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 35%),var(--bg)}
.silvarn-next:before {content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.42;background:linear-gradient(115deg,transparent 0 69%,color-mix(in srgb,var(--accent) 9%,transparent) 69.1%,transparent 69.3%)}
.workshop-notes-wrap {width:min(1200px,calc(100% - 48px));margin-inline:auto}
.wn-topline {display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--border);color:var(--accent-text);font:600 14px/1.4 "Lora",sans-serif;letter-spacing:.1em}
.wn-topline span:first-child {display:flex;align-items:center;gap:11px}
.wn-topline i {display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent),0 0 18px color-mix(in srgb,var(--accent) 50%,transparent)}
.wn-heading {max-width:790px;margin:clamp(26px,3.2vw,42px) 0 26px}
.wn-kicker {margin:0 0 10px;color:var(--accent-text);font:600 14px/1.5 "Lora",sans-serif;letter-spacing:.15em}
.wn-heading h2 {margin:0;font:400 clamp(36px,5vw,64px)/1.08 "Cormorant Garamond",serif;letter-spacing:-.025em}
.wn-heading h2 em {font-style:normal;color:var(--accent-text);position:relative}
.wn-heading h2 em:after {content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .8s ease}
.silvarn-next.is-visible .wn-heading h2 em:after {transform:scaleX(1)}
.wn-intro {max-width:670px;margin:18px 0 0;color:var(--text-muted);font:400 16px/1.7 "Lora",sans-serif;padding-top:18px;}
.wn-layout {display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1.65fr);gap:clamp(20px,3vw,42px);align-items:stretch}
.wn-index-panel {position:relative;overflow:hidden;min-height:350px;border:1px solid var(--border);border-radius:16px;padding:25px;background:color-mix(in srgb,var(--surface) 58%,transparent);display:flex;flex-direction:column;justify-content:space-between}
.wn-index-large {font:400 clamp(76px,10vw,138px)/.9 "Cormorant Garamond",serif;color:var(--accent-text);letter-spacing:-.07em;transition:opacity .2s,transform .2s}
.wn-index-line {height:1px;width:100%;background:linear-gradient(90deg,var(--accent),transparent);transform-origin:left;animation:wn-line 4s ease-in-out infinite}
.wn-index-caption {font:600 14px/1.7 "Lora",sans-serif;letter-spacing:.12em;color:var(--text-muted)}
.wn-orbit {position:absolute;width:170px;height:170px;border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);border-radius:50%;right:-52px;bottom:46px;animation:wn-spin 18s linear infinite}
.wn-orbit:before,.wn-orbit:after {content:"";position:absolute;inset:16px;border:1px dashed color-mix(in srgb,var(--accent) 40%,transparent);border-radius:50%}
.wn-orbit:after {inset:38px;border-style:solid}
.wn-orbit span {position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 70%,transparent)}
.wn-orbit span:nth-child(1) {top:13px;left:55px}
.wn-orbit span:nth-child(2) {right:15px;top:85px}
.wn-orbit span:nth-child(3) {left:43px;bottom:12px}
.wn-questions {border-top:1px solid var(--border)}
.wn-item {border-bottom:1px solid var(--border)}
.wn-item h3 {margin:0}
.wn-question {width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) 34px;align-items:center;gap:14px;text-align:left;padding:19px 4px;background:transparent;border:0;color:var(--text);cursor:pointer;font:400 clamp(18px,2vw,22px)/1.35 "Cormorant Garamond",serif}
.wn-question:focus-visible {outline:2px solid var(--accent);outline-offset:-2px;border-radius:5px}
.wn-qnum {font:600 14px/1.3 "Lora",sans-serif;color:var(--accent-text);letter-spacing:.06em}
.wn-toggle {width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;font:400 22px/1 "Lora",sans-serif;color:var(--accent-text);transition:transform .3s,background .3s}
.wn-item.is-open .wn-toggle {background:color-mix(in srgb,var(--accent) 15%,transparent);transform:rotate(180deg)}
.wn-answer {padding:0 45px 20px 58px;animation:wn-answer-in .3s ease}
.wn-answer p {margin:0;max-width:690px;color:var(--text-muted);font:500 15px/1.75 "Lora",sans-serif}
.wn-bottom {margin-top:22px;padding:18px 0 0;border-top:1px solid var(--border);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.wn-bottom>span {color:var(--accent-text);font:600 14px/1.5 "Lora",sans-serif;letter-spacing:.1em}
.wn-bottom p {margin:0;color:var(--text-muted);font:400 15px/1.6 "Lora",sans-serif}
.wn-cta {display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:48px;padding:12px 18px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--bg);text-decoration:none;font:600 15px/1.3 "Lora",sans-serif;transition:transform .25s,box-shadow .25s}
.wn-cta:hover {transform:translateY(-2px);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 38%,transparent)}
.wn-cta span {font-size:20px}
[data-wn-reveal] {opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.silvarn-next.is-visible [data-wn-reveal] {opacity:1;transform:none}
.silvarn-next.is-visible [data-wn-reveal]:nth-child(2) {transition-delay:.08s}
.silvarn-next.is-visible [data-wn-reveal]:nth-child(3) {transition-delay:.16s}
.silvarn-next.is-visible [data-wn-reveal]:nth-child(4) {transition-delay:.24s}
@keyframes wn-spin {to{transform:rotate(360deg)}}
@keyframes wn-line {0%,100%{transform:scaleX(.3);opacity:.6}50%{transform:scaleX(1);opacity:1}}
@keyframes wn-answer-in {from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(max-width:760px) {
  .workshop-notes-wrap {width:min(100% - 32px,600px)}
  .wn-topline {align-items:flex-start;font-size:14px}
  .wn-topline span:last-child {text-align:right;max-width:45%}
  .wn-heading {margin-block:25px 22px}
  .wn-heading h2 {font-size:clamp(35px,9vw,48px)}
  .wn-layout {grid-template-columns:1fr;gap:16px}
  .wn-index-panel {min-height:115px;padding:17px 20px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:15px}
  .wn-index-large {font-size:66px}
  .wn-index-line {display:none}
  .wn-index-caption {font-size:14px}
  .wn-orbit {width:105px;height:105px;right:-24px;bottom:-40px}
  .wn-orbit:before {inset:10px}
  .wn-orbit:after {inset:24px}
  .wn-question {grid-template-columns:34px minmax(0,1fr) 32px;gap:10px;padding:17px 2px;font-size:18px}
  .wn-answer {padding:0 8px 18px 46px}
  .wn-bottom {grid-template-columns:1fr;gap:8px;align-items:start}
  .wn-cta {justify-self:start;margin-top:6px}
}
@media(prefers-reduced-motion:reduce) {
  .silvarn-next *, .silvarn-next *:before,.silvarn-next *:after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-wn-reveal] {opacity:1;transform:none}
}

/* ==========================================================
   MERGED: silvarn-brief-console.css
   ========================================================== */
/* SILVARN HOME-1 SECTION 7 — Build Ledger */
.sv-bld {position:relative;overflow:hidden;color:var(--text);background:var(--bg);padding-block:clamp(48px,5.5vw,72px)}
.sv-bld__inner {width:min(1200px,calc(100% - 48px));margin-inline:auto;display:flex;flex-direction:column;gap:28px}
.sv-bld__top {display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--accent);color:var(--accent-text);font:700 14px/1.4 "Lora",sans-serif;letter-spacing:.14em}
.sv-bld__top span {display:inline-flex;align-items:center;gap:10px}
.sv-bld__top i {width:10px;height:10px;border-radius:50%;background:var(--accent);animation:sv-bld-pulse 2s ease-in-out infinite}
.sv-bld__title {margin:0;max-width:none;font:400 clamp(34px,4.6vw,60px)/1.12 var(--font-head);color:var(--text)}
.sv-bld__title em {display:inline-block;font-style:normal;color:var(--accent-text);background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 3px no-repeat;transition:background-size .9s .35s ease}
.sv-bld__title.is-visible em {background-size:100% 3px}
main .sv-bld__lead {margin:-12px 0 0;max-width:640px;font:400 17px/1.7 var(--font-body);color:var(--text-muted)}
.sv-bld__chain {overflow:hidden;border-block:1px solid var(--border);padding-block:16px;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000000 6%,#000000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000000 6%,#000000 94%,transparent)}
.sv-bld__track {display:flex;gap:16px;width:max-content;animation:sv-bld-chain 48s linear infinite}
.sv-bld__chain:hover .sv-bld__track {animation-play-state:paused}
.sv-bld__track img {width:260px;height:170px;object-fit:cover;border-radius:6px;display:block;flex:none;filter:saturate(.95)}
.sv-bld__list {list-style:none;margin:0;padding:0;border-top:2px solid var(--accent)}
.sv-bld__row {border-bottom:1px solid var(--border)}
.sv-bld__link {position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;column-gap:clamp(18px,3vw,40px);padding:28px 0;color:var(--text);text-decoration:none;padding-right:20px;}
.sv-bld__link:before {content:"";position:absolute;z-index:-1;inset:0;background:color-mix(in srgb,var(--accent) 22%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.sv-bld__link:hover:before,.sv-bld__link:focus-visible:before {transform:scaleX(1)}
.sv-bld__link:focus-visible {outline:2px solid var(--accent-text);outline-offset:-2px}
.sv-bld__no {align-self:start;font:400 clamp(30px,3.4vw,44px)/1 var(--font-head);color:var(--accent-text);padding-inline-start:12px;transition:transform .4s ease}
.sv-bld__link:hover .sv-bld__no {transform:translateX(6px)}
.sv-bld__body {display:flex;flex-direction:column;gap:10px}
.sv-bld__name {font:400 clamp(24px,2.6vw,34px)/1.2 var(--font-head);color:var(--text)}
.sv-bld__desc {max-width:720px;font:400 16px/1.65 var(--font-body);color:var(--text-muted)}
.sv-bld__meta {display:flex;flex-wrap:wrap;gap:6px 28px;font:400 15px/1.5 var(--font-body);color:var(--text)}
.sv-bld__meta b {display:inline-block;margin-inline-end:6px;font:700 14px/1.5 "Lora",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.sv-bld__go {display:inline-flex;align-items:center;gap:12px;padding:13px 20px;border:1.5px solid var(--control-border);border-radius:6px;font:700 15px/1.2 "Lora",sans-serif;color:var(--text);white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.sv-bld__go i {font-style:normal;transition:transform .3s}
.sv-bld__link:hover .sv-bld__go,.sv-bld__link:focus-visible .sv-bld__go {background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-text)}
.sv-bld__link:hover .sv-bld__go i {transform:translate(3px,-3px)}
.sv-bld__foot {display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;font:700 14px/1.5 "Lora",sans-serif;letter-spacing:.12em;color:var(--accent-text)}
.sv-bld-reveal {opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.sv-bld-reveal.is-visible {opacity:1;transform:none}
.sv-bld__row:nth-child(2) {transition-delay:.1s}
.sv-bld__row:nth-child(3) {transition-delay:.2s}
@keyframes sv-bld-chain {to {transform:translateX(calc(-50% - 8px))}}
@keyframes sv-bld-pulse {50% {transform:scale(1.5);opacity:.55}}
@media(max-width:860px) {
  .sv-bld__inner {width:min(100% - 32px,620px);gap:24px}
  .sv-bld__top {flex-direction:column;align-items:flex-start;gap:6px}
  .sv-bld__link {grid-template-columns:48px minmax(0,1fr);row-gap:16px;padding:24px 0}
  .sv-bld__no {padding-inline-start:4px}
  .sv-bld__go {grid-column:2;justify-self:start}
  .sv-bld__meta {flex-direction:column;gap:4px}
  .sv-bld__track img {width:210px;height:140px}
  .sv-bld__foot {flex-direction:column}
}
@media(prefers-reduced-motion:reduce) {
  .sv-bld *,.sv-bld *:before {animation:none!important;transition:none!important}
  .sv-bld-reveal {opacity:1;transform:none}
  .sv-bld__title em {background-size:100% 3px}
}

/* ==========================================================
   MERGED: home-2.css
   ========================================================== */
/* ==========================================================
   SILVARN - Home 2 / Section 1: "The Workbench Split"
   Tokens only (--bg, --surface, --text, --accent ...) so dark + light both work.
   Fonts: header = Prata, sub-header = Arimo, content = Inter. Min text size 14px.
   No background effects. RTL handled with logical properties.
   ========================================================== */
html:not([data-theme="dark"]) .h2-hero { background: #efece6; }
.h2-hero {
  --h2-pad: clamp(48px, 7vh, 80px);     /* top padding = bottom padding */
  --h2-gap: 20px;                        /* one rhythm between every block */
  --h2-ease: cubic-bezier(.2, .8, .2, 1);
  --h2-dur: 6s;                          /* autoplay time per slide */
  --h2-hide: inset(0 100% 0 0);
  padding-block: var(--h2-pad);
  background: var(--bg);
  color: var(--text);
}
.h2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(32px, 4vw, 48px);
  align-items: stretch;
}
/* ---------- Left column ---------- */
.h2-left { display: flex; flex-direction: column; justify-content: center; gap: var(--h2-gap); min-width: 0; }
.h2-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--h2-gap); }
.h2-hero .h2-chip {
  margin: 0;
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  color: var(--accent-text);
  font: 700 14px/1.4 var(--font-sub);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.h2-hero .h2-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(34px, 3.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--text);
}
.h2-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.h2-line-in { display: block; }
.h2-accent { position: relative; display: inline-block; color: var(--accent-text); }
.h2-accent::after {
  content: ""; position: absolute; inset-inline: 0; bottom: .02em; height: 3px;
  background: var(--accent); transform-origin: left; transition: transform .8s var(--h2-ease) 1s;
}
.h2-hero .h2-sub { margin: 0; max-width: 46ch; color: var(--text-muted); font: 400 17px/1.6 var(--font-body); }
.h2-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.h2-cta .btn { margin: 0; font-size: 16px; }
.h2-cta .h2-btn-outline { background: transparent; color: var(--text); border-color: var(--control-border); }
.h2-cta .h2-btn-outline:hover { background: var(--accent-text); border-color: var(--accent-text); color: var(--bg); }
/* ---------- Tabs ---------- */
.h2-tabs { border-top: 1px solid var(--border); }
.h2-tab {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center;
  width: 100%; min-height: 48px; padding: 0 4px; margin: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text-muted); font: 600 15px/1.2 var(--font-sub); text-align: start; cursor: pointer;
  transition: color .25s ease;
}
.h2-tab:hover { color: var(--text); }
.h2-tab-no { letter-spacing: .06em; color: var(--accent-text); }
.h2-tab-arrow { display: inline-flex; color: var(--accent-text); opacity: 0; transition: opacity .25s ease; }
.h2-tab-arrow svg { width: 18px; height: 18px; }
.h2-tab[aria-selected="true"] { color: var(--text); }
.h2-tab[aria-selected="true"] .h2-tab-arrow { opacity: 1; }
.h2-tab-bar {
  position: absolute; inset-inline: 0; bottom: -1px; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
.h2-tab[aria-selected="true"] .h2-tab-bar { transform: scaleX(1); }
.h2-hero.is-playing .h2-tab[aria-selected="true"] .h2-tab-bar { animation: h2-fill var(--h2-dur) linear both; }
.h2-hero.is-paused .h2-tab[aria-selected="true"] .h2-tab-bar { animation-play-state: paused; }
@keyframes h2-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ---------- Right visual ---------- */
.h2-visual { position: relative; min-height: 440px; }
.h2-frame {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  clip-path: inset(0); transition: clip-path .9s var(--h2-ease);
}
.h2-slide { position: absolute; inset: 0; margin: 0; clip-path: var(--h2-hide); z-index: 0; }
.h2-slide.is-prev { clip-path: inset(0); z-index: 1; }
.h2-slide.is-active { clip-path: inset(0); z-index: 2; transition: clip-path .9s var(--h2-ease); }
.h2-media {
  position: absolute; inset: 0;
  transform: translate(var(--h2-px, 0), var(--h2-py, 0)) scale(1.04);
  transition: transform .5s var(--h2-ease);
}
.h2-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* corner crop marks */
.h2-mark { position: absolute; z-index: 5; width: 30px; height: 30px; pointer-events: none; transition: opacity .5s ease .6s, transform .6s var(--h2-ease) .6s; }
.h2-mark--tl { top: -8px; inset-inline-start: -8px; border-top: 3px solid var(--accent); border-inline-start: 3px solid var(--accent); }
.h2-mark--tr { top: -8px; inset-inline-end: -8px; border-top: 3px solid var(--accent); border-inline-end: 3px solid var(--accent); }
.h2-mark--bl { bottom: -8px; inset-inline-start: -8px; border-bottom: 3px solid var(--accent); border-inline-start: 3px solid var(--accent); }
.h2-mark--br { bottom: -8px; inset-inline-end: -8px; border-bottom: 3px solid var(--accent); border-inline-end: 3px solid var(--accent); }
/* counter */
.h2-counter {
  position: absolute; z-index: 5; top: 16px; inset-inline-end: 16px;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--surface); border: 1px solid var(--control-border); border-radius: 999px;
}
.h2-count { padding-inline: 10px; font: 700 14px/1 var(--font-sub); letter-spacing: .06em; color: var(--text); direction: ltr; unicode-bidi: isolate; }
.h2-arrow {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  background: transparent; border: 0; border-radius: 50%; color: var(--text); cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.h2-arrow svg { width: 18px; height: 18px; }
.h2-arrow:hover { background: var(--accent-text); color: var(--bg); }
/* spec plate */
.h2-plate {
  position: absolute; z-index: 3; bottom: 16px; inset-inline-start: 16px; max-width: calc(100% - 32px);
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border);
}
.h2-plate-label { color: var(--accent-text); font: 700 14px/1.3 var(--font-sub); letter-spacing: .08em; text-transform: uppercase; }
.h2-plate-title { color: var(--text); font: 600 15px/1.4 var(--font-body); }
.h2-plate-link { align-self: flex-start; color: var(--accent-text); font: 600 14px/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
.h2-plate-link:hover { color: var(--text); }
.h2-slide.is-active .h2-plate { animation: h2-plate-in .6s var(--h2-ease) .45s both; }
@keyframes h2-plate-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* pins (position set by JS from the photo's own coordinates) */
.h2-pins { position: absolute; inset: 0; }
.h2-pin { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.h2-pin::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid var(--accent); animation: h2-pulse 2.4s ease-out infinite; }
.h2-pin-label {
  position: absolute; top: 50%; left: calc(100% + 12px); transform: translateY(-50%); white-space: nowrap;
  padding: 4px 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font: 700 14px/1.3 var(--font-sub); letter-spacing: .06em; text-transform: uppercase;
}
.h2-pin[data-side="left"] .h2-pin-label { left: auto; right: calc(100% + 12px); }
@keyframes h2-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
/* ---------- Load animation (only when JS is running) ---------- */
.h2-js .h2-hero:not(.is-loaded) .h2-line-in { transform: translateY(110%); }
.h2-line-in { transition: transform .8s var(--h2-ease); }
.h2-line:nth-child(2) .h2-line-in { transition-delay: .09s; }
.h2-js .h2-hero:not(.is-loaded) .h2-accent::after { transform: scaleX(0); }
.h2-reveal { transition: opacity .7s ease var(--h2-d, 0s), transform .7s var(--h2-ease) var(--h2-d, 0s); }
.h2-js .h2-hero:not(.is-loaded) .h2-reveal { opacity: 0; transform: translateY(14px); }
.h2-js .h2-hero:not(.is-loaded) .h2-frame { clip-path: var(--h2-hide); }
.h2-js .h2-hero:not(.is-loaded) .h2-mark { opacity: 0; transform: scale(.4); }
.h2-js .h2-hero:not(.is-loaded) .h2-counter { opacity: 0; }
.h2-counter { transition: opacity .6s ease .9s; }
.h2-js .h2-hero:not(.is-loaded) .h2-pin { opacity: 0; }
.h2-pin { transition: opacity .5s ease 1.1s; }
@media (max-width: 900px) {
  .h2-hero { --h2-pad: 40px; }
  .h2-grid { grid-template-columns: minmax(0, 1fr); gap: var(--h2-gap); }
  .h2-left { display: contents; }
  .h2-copy { order: 1; }
  .h2-visual { order: 2; min-height: 0; aspect-ratio: 16 / 11; }
  .h2-tabs { order: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 0; }
  .h2-tab {
    grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 44px; padding: 0 8px;
    border: 1px solid var(--control-border); border-radius: 999px; text-align: center; overflow: hidden; font-size: 14px;
  }
  .h2-tab-no, .h2-tab-arrow { display: none; }
  .h2-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--btn-text); }
  .h2-tab-bar { display: none; }
  .h2-pins { display: none; }
}
@media (max-width: 559px) {
  .h2-hero .h2-chip { padding: 6px 12px; letter-spacing: .03em; white-space: nowrap;font-size:12.5px; }
  .h2-visual { aspect-ratio: 4 / 5; }
  .h2-cta { flex-direction: column; align-self: stretch; }
  .h2-cta .btn { width: 100%; }
  .h2-tab { font-size: 14px; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-hero *, .h2-hero *::before, .h2-hero *::after { transition: none !important; animation: none !important; }
  .h2-hero .h2-tab[aria-selected="true"] .h2-tab-bar { transform: scaleX(1); }
}

/* ==========================================================
   SILVARN - Home 2 / Section 3: "The Build Sequence"
   Tokens only, so dark + light both work. Fonts: Prata / Arimo / Inter.
   Every text >= 14px. Background effect: faint copper tint + dot grid.
   ========================================================== */
.h2-seq {
  --h2q-ease: cubic-bezier(.2, .8, .2, 1);
  --h2-hide: inset(0 100% 0 0);
  --prog: 0;
  --rot: 0deg;
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 7vh, 80px);     /* top = bottom */
  background: var(--bg);
  color: var(--text);
}
html[dir="rtl"] .h2-seq { --h2-hide: inset(0 0 0 100%); }
.h2-seq::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 46%),
    radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent) 1px, transparent 1.6px) 0 0 / 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000000 0%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000000 0%, transparent 88%);
}
.h2-seq.is-pin .h2q-pin { position: sticky; top: calc(var(--header-h) + 16px); }

/* ---------- Header (centred) ---------- */
.h2q-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 24px; }
.h2-seq .h2q-eyebrow {
  margin: 0; display: flex; align-items: center; gap: 10px;
  color: var(--accent-text); font: 700 14px/1.4 var(--font-sub); letter-spacing: .12em; text-transform: uppercase;
}
.h2q-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.h2-seq .h2q-title {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: .28em;
  font-family: var(--font-head); font-size: clamp(34px, 3.6vw, 52px); line-height: 1.12;
  letter-spacing: -.015em; color: var(--text);
}
.h2q-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.h2q-line-in { display: block; transition: transform .8s var(--h2q-ease); }
.h2q-line:nth-child(2) .h2q-line-in { transition-delay: .09s; }
.h2q-accent { position: relative; display: inline-block; color: var(--accent-text); }
.h2q-accent::after {
  content: ""; position: absolute; inset-inline: 0; bottom: .02em; height: 3px; background: var(--accent);
  transform-origin: left; transition: transform .8s var(--h2q-ease) .9s;
}
html[dir="rtl"] .h2q-accent::after { transform-origin: right; }
.h2-seq .h2q-lede { margin: 0; max-width: 72ch; color: var(--text-muted); font: 400 17px/1.6 var(--font-body); }

/* ---------- Rail: line + rolling wheel + 5 nodes ---------- */
.h2q-rail { position: relative; margin-bottom: 24px; }
.h2q-line-track {
  position: absolute; top: 17px; inset-inline: 10%; height: 2px; pointer-events: none;
  background: color-mix(in srgb, var(--border) 45%, transparent);
}
.h2q-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--prog) * 100%);
  background: var(--accent); transition: width .6s var(--h2q-ease);
}
.h2q-wheel {
  position: absolute; z-index: 2; top: 50%; inset-inline-start: calc(var(--prog) * 100%); pointer-events: none;
  width: 36px; height: 36px; margin-top: -18px; translate: -50% 0;
  color: var(--accent-text); background: var(--bg); border-radius: 50%;
  transform: rotate(var(--rot)); transition: inset-inline-start .6s var(--h2q-ease), transform .6s var(--h2q-ease);
}
html[dir="rtl"] .h2q-wheel { translate: 50% 0; }
.h2q-wheel svg { display: block; width: 100%; height: 100%; }
.h2-seq.is-pin .h2q-fill { transition: width .12s linear; }
.h2-seq.is-pin .h2q-wheel { transition: inset-inline-start .12s linear, transform .12s linear; }
.h2q-nodes { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.h2q-node {
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 8px; row-gap: 4px;
  width: 100%; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer;
  color: var(--text-muted); font: 700 14px/1.3 var(--font-sub); transition: color .25s ease;
}
.h2q-dot {
  grid-column: 1 / -1; justify-self: center; position: relative; z-index: 1;
  width: 20px; height: 20px; margin-block: 8px; border-radius: 50%; background: var(--bg);
  border: 2px solid var(--control-border); transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.h2q-no { letter-spacing: .06em; color: var(--accent-text); }
.h2q-nm { font: 600 15px/1.3 var(--font-sub); }
.h2q-node:hover, .h2q-node.is-active { color: var(--text); }
.h2q-node.is-done .h2q-dot { background: var(--accent); border-color: var(--accent); }
.h2q-node:hover .h2q-dot { transform: scale(1.15); }
.h2q-node:focus-visible, .h2q-arrow:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }

/* ---------- Stage card: photo + text ---------- */
.h2q-stage {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
}
.h2q-photos { position: relative; display: grid; min-height: 340px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
.h2q-photo { grid-area: 1 / 1; position: relative; margin: 0; overflow: hidden; clip-path: var(--h2-hide); z-index: 0; }
.h2q-photo.is-prev { clip-path: inset(0); z-index: 1; }
.h2q-photo.is-active { clip-path: inset(0); z-index: 2; transition: clip-path .9s var(--h2q-ease); }
.h2q-photo img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: scale(1.12); transition: transform 2.4s var(--h2q-ease);
}
.h2q-photo.is-active img { transform: scale(1.03); }
.h2q-tag {
  position: absolute; z-index: 2; bottom: 12px; inset-inline-start: 12px; max-width: calc(100% - 24px);
  padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font: 600 14px/1.3 var(--font-body);
}
.h2q-texts { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-block: 14px; padding-inline-end: 14px; }
.h2q-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.h2-seq .h2q-label { margin: 0; color: var(--accent-text); font: 700 14px/1.3 var(--font-sub); letter-spacing: .12em; text-transform: uppercase; }
.h2q-of { color: var(--text-muted); }
.h2q-odo { height: 56px; overflow: hidden; font-family: var(--font-head); font-size: 56px; line-height: 1; color: var(--accent-text); direction: ltr; }
.h2q-odo-strip { margin: 0; padding: 0; list-style: none; transform: translateY(calc(var(--i, 0) * -1em)); transition: transform .7s var(--h2q-ease); }
.h2q-odo-strip li { height: 1em; line-height: 1; }
.h2q-infos { display: grid; flex: 1; }
.h2q-info {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; min-width: 0;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s;
}
.h2q-info.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease .2s, visibility 0s; }
.h2q-info > * { transform: translateY(14px); transition: transform .6s var(--h2q-ease) .2s; }
.h2q-info > :nth-child(2) { transition-delay: .28s; }
.h2q-info > :nth-child(3) { transition-delay: .36s; }
.h2q-info > :nth-child(4) { transition-delay: .44s; }
.h2q-info.is-active > * { transform: none; }
.h2-seq .h2q-info h3 { margin: 0; font-family: var(--font-head); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; color: var(--text); }
.h2-seq .h2q-desc { margin: 0; max-width: 44ch; color: var(--text-muted); font: 400 16px/1.6 var(--font-body); }
.h2q-specs { margin: 0; border-top: 1px solid var(--border); }
.h2q-specs div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); }
.h2q-specs dt { color: var(--accent-text); font: 700 14px/1.3 var(--font-sub); letter-spacing: .08em; text-transform: uppercase; }
.h2q-specs dd { margin: 0; color: var(--text); font: 600 15px/1.4 var(--font-body); }
.h2q-link {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text);
  font: 700 15px/1.3 var(--font-sub); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px;
  transition: color .25s ease, gap .25s ease;
}
.h2q-link:hover { color: var(--text); gap: 12px; }

/* ---------- Bottom bar ---------- */
.h2q-bar { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.h2q-count { min-width: 64px; color: var(--text); font: 700 14px/1 var(--font-sub); letter-spacing: .06em; direction: ltr; unicode-bidi: isolate; }
.h2q-progress { position: relative; flex: 1; height: 3px; background: color-mix(in srgb, var(--border) 45%, transparent); overflow: hidden; }
.h2q-progress span { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--prog)); transition: transform .6s var(--h2q-ease); }
html[dir="rtl"] .h2q-progress span { transform-origin: right; }
.h2-seq.is-pin .h2q-progress span { transition: transform .12s linear; }
.h2q-arrows { display: flex; gap: 8px; }
.h2q-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0;
  background: transparent; color: var(--text); border: 1px solid var(--control-border); border-radius: 50%; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.h2q-arrow svg { width: 18px; height: 18px; }
.h2q-arrow:hover { background: var(--accent-text); color: var(--bg); }
html[dir="rtl"] .h2q-arrow svg { transform: scaleX(-1); }

/* ---------- Entrance (only when JS runs) ---------- */
.h2q-fade { transition: opacity .7s ease var(--d, 0s), transform .7s var(--h2q-ease) var(--d, 0s); }
.h2-js .h2-seq:not(.is-in) .h2q-fade { opacity: 0; transform: translateY(14px); }
.h2-js .h2-seq:not(.is-in) .h2q-line-in { transform: translateY(110%); }
.h2-js .h2-seq:not(.is-in) .h2q-accent::after { transform: scaleX(0); }

@media (max-width: 900px) {
  .h2-seq { padding-block: 40px; }
  .h2q-head { margin-bottom: 20px; }
  .h2q-stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .h2q-photos { min-height: 0; aspect-ratio: 16 / 11; }
  .h2q-texts { padding: 0 4px 4px; }
  .h2q-odo { height: 44px; font-size: 44px; }
}
@media (max-width: 700px) {
  .h2q-nm { display: none; }
  .h2q-line-track { inset-inline: 10%; }
  .h2q-specs div { grid-template-columns: 84px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .h2-seq *, .h2-seq *::before, .h2-seq *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================
   SILVARN - Home 2 / Section 4: "The Build Register"
   Tokens only, so dark + light both work. Fonts: Prata / Arimo / Inter.
   Every text >= 14px. Background effect: faint copper corner tints only.
   ========================================================== */
.h2-reg {
  --h2r-ease: cubic-bezier(.2, .8, .2, 1);
  --h2-hide: inset(0 100% 0 0);
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 7vh, 80px);     /* top = bottom */
  background: var(--bg);
  color: var(--text);
}
html[dir="rtl"] .h2-reg { --h2-hide: inset(0 0 0 100%); }
.h2-reg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 40%);
}

/* ---------- Header ---------- */
.h2r-head {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: 28px;
}
.h2r-head-main { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.h2r-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; min-width: 0; }
.h2-reg .h2r-eyebrow {
  margin: 0; display: flex; align-items: center; gap: 10px;
  color: var(--accent-text); font: 700 14px/1.4 var(--font-sub); letter-spacing: .12em; text-transform: uppercase;
}
.h2r-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.h2-reg .h2r-title {
  margin: 0; font-family: var(--font-head); font-size: clamp(34px, 4vw, 56px); line-height: 1.12;
  letter-spacing: -.015em; color: var(--text);
}
.h2r-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.h2r-line-in { display: block; transition: transform .8s var(--h2r-ease); }
.h2r-line:nth-child(2) .h2r-line-in { transition-delay: .09s; }
.h2r-accent { position: relative; display: inline-block; color: var(--accent-text); }
.h2r-accent::after {
  content: ""; position: absolute; inset-inline: 0; bottom: .02em; height: 3px; background: var(--accent);
  transform-origin: left; transition: transform .8s var(--h2r-ease) .9s;
}
html[dir="rtl"] .h2r-accent::after { transform-origin: right; }
.h2-reg .h2r-lede { margin: 0; max-width: 46ch; color: var(--text-muted); font: 400 17px/1.6 var(--font-body); }
.h2r-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.h2r-chip {
  min-height: 40px; padding: 8px 18px; margin: 0; background: transparent; color: var(--text);
  border: 1px solid var(--control-border); border-radius: 999px; cursor: pointer;
  font: 600 14px/1.3 var(--font-sub); transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.h2r-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.h2r-chip.is-on { background: var(--accent-text); border-color: var(--accent-text); color: var(--bg); }
.h2r-chip:focus-visible, .h2r-btn:focus-visible, .h2r-view:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.h2-reg .h2r-count { margin: 0; color: var(--text-muted); font: 500 15px/1.4 var(--font-body); }
.h2r-count-n { color: var(--text); font-weight: 700; }

/* ---------- Register rows ---------- */
.h2r-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.h2r-row {
  position: relative; border-bottom: 1px solid var(--border);
  transition: opacity .6s ease calc(var(--k, 0) * 80ms + .25s), transform .6s var(--h2r-ease) calc(var(--k, 0) * 80ms + .25s), background-color .3s ease;
}
.h2r-row[hidden] { display: none; }
.h2r-row::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--h2r-ease);
}
.h2r-row.is-open { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.h2r-row.is-open::before { transform: scaleY(1); }
.h2r-row.is-out { opacity: 0; transform: translateX(-16px); transition: opacity .25s ease, transform .25s ease; }
html[dir="rtl"] .h2r-row.is-out { transform: translateX(16px); }
.h2r-h { margin: 0; font: inherit; }
.h2r-btn {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 190px) 72px auto; align-items: center; gap: 16px;
  width: 100%; min-height: 76px; margin: 0; padding: 12px; background: transparent; border: 0; color: var(--text);
  text-align: start; cursor: pointer;
}
.h2r-no { color: var(--accent-text); font: 700 15px/1 var(--font-sub); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.h2r-name {
  justify-self: start; padding-bottom: 4px; font-family: var(--font-head); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 3px no-repeat;
  transition: background-size .5s var(--h2r-ease), transform .4s var(--h2r-ease);
}
html[dir="rtl"] .h2r-name { background-position: 100% 100%; }
.h2r-btn:hover .h2r-name, .h2r-row.is-open .h2r-name { background-size: 100% 3px; }
.h2r-btn:hover .h2r-name { transform: translateX(8px); }
html[dir="rtl"] .h2r-btn:hover .h2r-name { transform: translateX(-8px); }
.h2r-meta { display: contents; }
.h2r-cat, .h2r-yr { color: var(--text-muted); font: 600 15px/1.3 var(--font-sub); }
.h2r-yr { font-variant-numeric: tabular-nums; }
.h2r-ico {
  justify-self: end; color: var(--accent-text); font: 700 13px/1.2 var(--font-sub);
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: color .25s ease;
}
.h2r-btn:hover .h2r-ico { color: var(--text); }

/* ---------- Expanding panel ---------- */
.h2r-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .6s var(--h2r-ease), visibility 0s .6s; }
.h2r-row.is-open .h2r-panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s, 0s; }
.h2r-panel-in { min-height: 0; overflow: hidden; padding-inline: 12px; }
.h2r-photo {
  position: relative; overflow: hidden; height: clamp(260px, 32vw, 380px); margin: 0 0 14px;
  border: 1px solid var(--border); background: var(--bg); clip-path: inset(0); transition: clip-path .9s var(--h2r-ease) .15s;
}
.h2r-row:not(.is-open) .h2r-photo { clip-path: var(--h2-hide); transition-delay: 0s; }
.h2r-photo img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: scale(1.12); transition: transform 2.2s var(--h2r-ease);
}
.h2r-row.is-open .h2r-photo img { transform: scale(1.03); }
.h2r-plate {
  position: absolute; z-index: 2; bottom: 16px; inset-inline-start: 16px; width: min(360px, calc(100% - 32px));
  padding: 8px 16px; background: var(--surface); border: 1px solid var(--border);
}
.h2r-plate dl { margin: 0; }
.h2r-plate dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 5px 0; }
.h2r-plate dt { color: var(--accent-text); font: 700 14px/1.3 var(--font-sub); letter-spacing: .08em; text-transform: uppercase; }
.h2r-plate dd { margin: 0; color: var(--text); font: 600 15px/1.4 var(--font-body); }
.h2r-row.is-open .h2r-plate, .h2r-row.is-open .h2r-view { animation: h2r-plate-in .6s var(--h2r-ease) .5s both; }
.h2r-view {
  position: absolute; z-index: 2; bottom: 16px; inset-inline-end: 16px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; background: var(--btn-bg); color: var(--btn-text); border-radius: var(--radius);
  font: 700 15px/1.2 var(--font-sub); text-decoration: none; transition: background-color .25s ease, color .25s ease;
}
.h2r-view:hover { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
@keyframes h2r-plate-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Bottom bar ---------- */
.h2r-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 28px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.h2-reg .h2r-cta-text { margin: 0; font-family: var(--font-head); font-size: clamp(20px, 2vw, 26px); line-height: 1.2; color: var(--text); }
.h2r-cta-links { display: flex; flex-wrap: wrap; gap: 12px; }
.h2r-cta .btn { margin: 0; font-size: 16px; }
.h2r-cta .h2r-btn-outline { background: transparent; color: var(--text); border-color: var(--control-border); }
.h2r-cta .h2r-btn-outline:hover { background: var(--accent-text); border-color: var(--accent-text); color: var(--bg); }

/* ---------- Cursor preview (desktop only) ---------- */
.h2r-peek {
  position: fixed; top: 0; left: 0; z-index: 30; width: 240px; height: 160px; overflow: hidden; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  opacity: 0; transform: translate3d(-999px, -999px, 0); transition: opacity .25s ease;
}
.h2r-peek.is-show { opacity: 1; }
.h2r-peek img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ---------- Entrance + filter (only when JS runs) ---------- */
.h2r-fade { transition: opacity .7s ease var(--d, 0s), transform .7s var(--h2r-ease) var(--d, 0s); }
.h2-js .h2-reg:not(.is-in) .h2r-fade { opacity: 0; transform: translateY(14px); }
.h2-js .h2-reg:not(.is-in) .h2r-line-in { transform: translateY(110%); }
.h2-js .h2-reg:not(.is-in) .h2r-accent::after { transform: scaleX(0); }
.h2-js .h2-reg:not(.is-in) .h2r-row { opacity: 0; transform: translateY(18px); }

@media (max-width: 900px) {
  .h2-reg { padding-block: 40px; }
  .h2r-head { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .h2r-head-side { align-items: flex-start; }
  .h2r-filters { justify-content: flex-start; }
  .h2r-peek { display: none; }
}
@media (max-width: 700px) {
  .h2r-btn { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "no name ico" ". meta ico"; column-gap: 12px; row-gap: 4px; padding-inline: 8px; }
  .h2r-no { grid-area: no; }
  .h2r-name { grid-area: name; }
  .h2r-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; grid-area: meta; }
  .h2r-ico { grid-area: ico; }
  .h2r-panel-in { padding-inline: 8px; }
  .h2r-photo { height: auto; clip-path: inset(0); }
  .h2r-photo img { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; }
  .h2r-plate { position: static; width: auto; border-width: 1px 0 0; }
  .h2r-view { position: static; justify-content: center; border-radius: 0; }
  .h2r-row.is-open .h2r-plate, .h2r-row.is-open .h2r-view { animation: none; }
  .h2r-cta { padding: 16px; }
  .h2r-cta-links, .h2r-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-reg *, .h2-reg *::before, .h2-reg *::after { transition: none !important; animation: none !important; }
  .h2r-peek { display: none; }
}

/* ==========================================================
   MERGED: about-us.css
   ========================================================== */
/* SILVARN - About Us: Banner + Section 2 ("Three Slats" + "Sticky Story Stage")
   Tokens only (dark + light). Prata / Arimo / Inter. Every text >= 14px. Equal top/bottom padding. */
:root {--ab-pad:clamp(40px,6vh,64px);--ab-ease:cubic-bezier(.2,.8,.2,1);
--ab-shadow:0 12px 28px rgba(24,26,27,.16),0 2px 6px rgba(24,26,27,.12);
--ab-shadow-lg:0 22px 44px rgba(24,26,27,.24),0 4px 12px rgba(24,26,27,.14);
--ab-edge:color-mix(in srgb,var(--accent) 45%,transparent)}
.page-main--about {display:block;padding:0;text-align:start}
.page-main--about p {margin:0}
.ab-hero,.ab-story {background:var(--bg);color:var(--text)}
html:not([data-theme="dark" ]) .page-main--about .ab-hero {background:#ede2cd}
.ab-hero,.ab-story-pin {position:relative;isolation:isolate;padding-block:var(--ab-pad)}
.ab-hero::before,.ab-story-pin::before::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--accent) 14%,transparent),transparent 45%),
radial-gradient(color-mix(in srgb,var(--text) 10%,transparent) 1px,transparent 1.6px) 0 0/28px 28px;
-webkit-mask-image:radial-gradient(ellipse at 70% 35%,#000000,transparent 78%);mask-image:radial-gradient(ellipse at 70% 35%,#000000,transparent 78%)}
.ab-chip {margin:0;padding:6px 14px;border:1px solid var(--control-border);border-radius:999px;color:var(--accent-text);font:700 14px/1.4 var(--font-sub);letter-spacing:.1em;text-transform:uppercase}
.ab-accent {position:relative;display:inline-block;color:var(--accent-text)}
.ab-accent::after {content:"";position:absolute;inset-inline:0;bottom:.02em;height:3px;background:var(--accent);transform-origin:left}
.ab-line {display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ab-line-in {display:block}
.page-main--about .ab-lede {max-width:50ch;color:var(--text-muted);font:400 17px/1.6 var(--font-body)}
/* ---- Banner ---- */
.ab-hero {min-height:75vh;display:flex;align-items:center}
.ab-hero>.container {width:100%}
.ab-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:stretch}
.ab-copy {display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;min-width:0}
.page-main--about .ab-title {font-size:clamp(32px,3.4vw,52px);line-height:1.12;letter-spacing:-.015em;color:var(--text)}
.ab-hero .ab-actions {display:flex;flex-wrap:wrap;gap:12px}
.ab-hero .ab-actions .btn {margin:0}
.ab-btn-ghost {background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--control-border)}
.ab-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:520px}
.ab-stat {background:var(--surface);border:1px solid var(--ab-edge);border-radius:var(--radius);box-shadow:var(--ab-shadow);padding:12px 16px}
.ab-stat b {display:block;font:400 30px/1.2 var(--font-head);color:var(--accent-text)}
.ab-stat span {display:block;font:500 14px/1.4 var(--font-sub);color:var(--text-muted)}
.ab-slats {position:relative;display:flex;gap:12px;min-height:min(calc(75vh - 2*var(--ab-pad)),640px)}
.ab-slat {position:relative;flex:1;align-self:flex-start;height:calc(100% - 32px);overflow:hidden;border-radius:var(--radius);background:var(--surface);border:1px solid var(--ab-edge);box-shadow:var(--ab-shadow)}
.ab-slat:nth-child(2) {align-self:flex-end}
.ab-slat-img {position:absolute;inset:0;overflow:hidden}
.ab-slat img {position:absolute;inset:-28px 0;width:100%;height:calc(100% + 56px);object-fit:cover;transform:translateY(var(--ab-py,0))}
.ab-slat::after {content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--accent);transform-origin:left}
.ab-badge {position:absolute;bottom:20px;inset-inline-start:calc((100% - 24px)/3 + 6px);margin-inline-start:-38px;z-index:2;width:76px;height:76px;border-radius:50%;background:var(--bg);box-shadow:var(--ab-shadow-lg);display:grid;place-items:center}
.ab-badge svg {width:56px;height:56px}
.ab-gear {fill:var(--logo-gear);transform-origin:24px 24px;transform:rotate(var(--ab-rot,0deg))}
.ab-ring,.ab-s {fill:none;stroke:var(--logo-s);stroke-width:1.6}
.ab-s {stroke-width:3;stroke-linecap:round}
/* ---- Section 2 ---- */
.ab-story-head {display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:28px}
.page-main--about .ab-h2 {font-size:clamp(28px,3.2vw,44px);line-height:1.15;letter-spacing:-.015em;color:var(--text)}
.ab-story-head .ab-lede {max-width:56ch}
.ab-sgrid {display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.1fr);column-gap:16px;align-items:stretch}
.ab-stage {position:relative;min-height:320px;overflow:hidden;border-radius:var(--radius);background:var(--surface);border:1px solid var(--ab-edge);box-shadow:var(--ab-shadow-lg)}
.ab-fig {position:absolute;inset:0;margin:0;clip-path:inset(100% 0 0 0);transition:clip-path .9s var(--ab-ease)}
.ab-fig.is-on {clip-path:inset(0)}
.ab-fig img {display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.2s var(--ab-ease)}
.ab-fig.is-on img {transform:none}
.ab-count {position:absolute;inset-inline-start:14px;bottom:14px;z-index:2;padding:6px 14px;border-radius:999px;background:var(--bg);color:var(--text);box-shadow:var(--ab-shadow);font:700 14px/1.4 var(--font-sub);letter-spacing:.08em}
.ab-count.tick {animation:abTick .5s var(--ab-ease)}
@keyframes abTick {from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.ab-rail,.ab-steps {display:grid;grid-template-rows:repeat(3,1fr);row-gap:14px;margin:0;padding:0;list-style:none}
.ab-rail {position:relative;justify-items:center;align-items:center}
.ab-rail::before,.ab-rail-fill {content:"";position:absolute;inset-block:calc((100% - 28px)/6);inset-inline-start:calc(50% - 1px);width:2px;background:color-mix(in srgb,var(--control-border) 40%,transparent)}
.ab-rail-fill {background:var(--accent);transform-origin:top;transform:scaleY(var(--ab-fill,0));transition:transform .25s linear}
.ab-node {position:relative;z-index:1;width:16px;height:16px;padding:0;border-radius:50%;border:2px solid var(--control-border);background:var(--bg);cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.ab-node::after {content:"";position:absolute;inset:-14px}
.ab-node.is-done {background:var(--accent);border-color:var(--accent)}
.ab-node.is-on {transform:scale(1.3);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
.ab-card {display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;align-content:center;padding:16px 20px;background:var(--bg);border:1px solid var(--ab-edge);border-radius:var(--radius);box-shadow:var(--ab-shadow);transition:transform .4s var(--ab-ease),box-shadow .4s,background .4s,border-color .4s}
.ab-card.is-on {background:var(--surface);border-color:var(--accent);box-shadow:var(--ab-shadow-lg);transform:translateY(-2px)}
.ab-num {grid-row:1/3;font:400 30px/1.1 var(--font-head);color:var(--accent-text)}
.ab-card-top {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.ab-card h3 {font-size:20px;line-height:1.25;color:var(--text)}
.ab-tag {font:700 14px/1.4 var(--font-sub);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.page-main--about .ab-card p {font:400 15px/1.5 var(--font-body);color:var(--text-muted)}
.ab-card-img {display:none}
@media (min-width:901px) {
  .ab-js .ab-story {height:250vh}
  .ab-js .ab-story-pin {position:sticky;top:var(--header-h);min-height:calc(100vh - var(--header-h));display:flex;align-items:center}
  .ab-story-pin>.container {width:100%}
}
@media (max-width:900px) {
  .ab-hero {min-height:0}
  .ab-grid,.ab-sgrid {grid-template-columns:1fr}
  .ab-slats {min-height:340px}
  .ab-stage,.ab-rail {display:none}
  .ab-steps {grid-template-rows:none;row-gap:16px}
  .ab-card {grid-template-columns:40px minmax(0,1fr);grid-template-areas:"image image" "no head" "no body";column-gap:12px;row-gap:6px}
  .ab-num {grid-area:no;grid-row:auto;align-self:start;padding-top:2px}
  .ab-card-top {grid-area:head;min-width:0}
  .ab-card p {grid-area:body;min-width:0;overflow-wrap:normal}
  .ab-card-img {display:block;grid-area:image;width:100%;height:180px;object-fit:cover;border-radius:var(--radius);margin-bottom:8px}
}
/* ---- Entrance (only when JS is on and motion is allowed) ---- */
.ab-js .ab-line-in {transform:translateY(105%);transition:transform .8s var(--ab-ease)}
.ab-js .ab-line:nth-child(2) .ab-line-in {transition-delay:.09s}
.ab-js .ab-accent::after {transform:scaleX(0);transition:transform .8s var(--ab-ease) .9s}
.ab-js .ab-rv,.ab-js .ab-slat,.ab-js .ab-badge,.ab-js .ab-stage,.ab-js .ab-card {opacity:0;transform:translateY(24px)}
.ab-js .ab-rv,.ab-js .ab-slat,.ab-js .ab-stage {transition:opacity .8s var(--ab-ease) var(--d,0s),transform .8s var(--ab-ease) var(--d,0s)}
.ab-js .ab-badge {transform:scale(.5);transition:opacity .6s var(--ab-ease) var(--d,0s),transform .8s var(--ab-ease) var(--d,0s)}
.ab-js .ab-slat-img {clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ab-ease) var(--d,0s)}
.ab-js .ab-slat::after {transform:scaleX(0)}
.ab-js .ab-card {transition:opacity .7s var(--ab-ease) var(--d,0s),transform .7s var(--ab-ease) var(--d,0s),box-shadow .4s,background .4s,border-color .4s}
.ab-js .is-in .ab-line-in,.ab-js .is-in .ab-rv,.ab-js .is-in .ab-slat,.ab-js .is-in .ab-badge,.ab-js .is-in .ab-stage,.ab-js .is-in .ab-card {opacity:1;transform:none}
.ab-js .is-in .ab-card.is-on {transform:translateY(-2px)}
.ab-js .is-in .ab-accent::after {transform:scaleX(1)}
.ab-js .is-in .ab-slat-img {clip-path:inset(0)}
.ab-js .is-in .ab-slat::after {transform:scaleX(1);transition:transform .9s var(--ab-ease) calc(var(--d,0s) + .6s)}
.ab-hero.is-in,.ab-story.is-in {--e:1}
.ab-js .is-settled .ab-card {transition-delay:0s}

/* ==========================================================
   About Us / Section 4: The Moving Wall
   Entrance classes (.is-in / .is-settled) are added by index.js.
   One gap value (--ab-wall-gap) and one padding value (--ab-wall-pad).
   ========================================================== */
:root {
  --ab-wall-sh: 0 1px 2px rgba(24,26,27,.10), 0 6px 14px rgba(24,26,27,.12), 0 18px 32px rgba(24,26,27,.12);
  --ab-wall-sh-hover: 0 2px 4px rgba(24,26,27,.14), 0 14px 26px rgba(24,26,27,.20), 0 30px 52px rgba(24,26,27,.22);
  --ab-wall-btn-sh: 0 1px 2px rgba(24,26,27,.16), 0 6px 14px rgba(24,26,27,.16), 0 14px 26px rgba(24,26,27,.10);
}
.ab-wall {
  --ab-wall-pad: var(--ab-pad);
  --ab-wall-gap: clamp(20px, 3vw, 36px);
  --ab-wall-tw: max(260px, 20vw);
  --ab-wall-ar: 4 / 3;
  --ab-wall-hide: inset(-40px calc(100% + 60px) -90px -60px);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--ab-wall-pad);
  background: var(--bg);
  color: var(--text);
}
/* faint copper corner tint + very light dot grid, fading out, behind everything */
.ab-wall::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%),
    radial-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1.6px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 65%, #000000, transparent 78%);
  mask-image: radial-gradient(ellipse at 30% 65%, #000000, transparent 78%);
}
.ab-wall-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ab-wall-gap);
}

/* rows: edge to edge, clipped sideways only so the hover lift and shadow stay visible */
.ab-wall-row {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}
.ab-wall-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.ab-wall-row--b .ab-wall-track {
  margin-inline-start: calc((var(--ab-wall-tw) + var(--ab-wall-gap)) / -2);
}

/* tiles: photo on top, solid caption strip underneath */
.ab-wall-tile {
  flex: 0 0 var(--ab-wall-tw);
  width: var(--ab-wall-tw);
  margin-inline-end: var(--ab-wall-gap);
  transition: transform .35s var(--ab-ease);
}
.ab-wall-fig {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--ab-edge);
  border-radius: var(--radius);
  box-shadow: var(--ab-wall-sh);
  transition: border-color .3s ease, box-shadow .35s var(--ab-ease);
}
.ab-wall-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ab-wall-ar);
  object-fit: cover;
  background: var(--surface);
}
.ab-wall-cap {
  padding: 10px 14px;
  border-top: 3px solid var(--accent);
  background: var(--surface);
  color: var(--text);
  font: 700 15px/1.4 var(--font-sub);
  letter-spacing: .04em;
}
@media (hover: hover) {
  .ab-wall-tile:hover { transform: translateY(-8px); }
  .ab-wall-tile:hover .ab-wall-fig { border-color: var(--accent); box-shadow: var(--ab-wall-sh-hover); }
}

/* centre band */
.ab-wall-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ab-wall-gap) * .6);
  text-align: center;
}
.page-main--about .ab-wall-band .ab-lede { max-width: none; text-wrap: balance; }
.ab-wall .ab-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ab-wall .btn { box-shadow: var(--ab-wall-btn-sh), 0 0 0 1px var(--ab-edge); }
.ab-wall .ab-btn-ghost { box-shadow: inset 0 0 0 2px var(--control-border), var(--ab-wall-btn-sh); }

/* mobile: shorter tiles, same layout, same equal padding */
@media (max-width: 900px) {
  .ab-wall { --ab-wall-tw: 210px; --ab-wall-ar: 16 / 10; }
}

/* entrance: tiles wipe in (stagger set by JS from the centre outwards) */
.ab-js .ab-wall-tile {
  clip-path: var(--ab-wall-hide);
  transition: clip-path .9s var(--ab-ease) calc(var(--i, 0) * .1s), transform .35s var(--ab-ease);
}
.ab-js .is-in .ab-wall-tile { clip-path: inset(-40px -60px -90px -60px); }
.ab-js .is-settled .ab-wall-tile { clip-path: none; transition: transform .35s var(--ab-ease); }

/* reduced motion: no marquee, no drift - a static strip you swipe */
@media (prefers-reduced-motion: reduce) {
  .ab-wall-row {
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 12px 40px;
    margin-block: -12px -40px;
    padding-inline: 24px;
    -webkit-overflow-scrolling: touch;
  }
  .ab-wall-track { transform: none !important; will-change: auto; }
  .ab-wall-row--b .ab-wall-track { margin-inline-start: 0; }
  .ab-wall-row--b { padding-inline-start: calc(24px + (var(--ab-wall-tw) + var(--ab-wall-gap)) / 2); }
  .ab-wall-tile { clip-path: none !important; transition: none !important; }
  .ab-wall-tile[aria-hidden="true"] { display: none; }
}

/* ==========================================================
   About Us / Section 5: The Build Ledger — pinned parts schedule
   Five full-width rows (no columns of cards). Scroll drives a gauge down the
   rail; each row's photo develops from grey to colour and stays developed.
   Static (all developed) under 1000px wide, under 620px tall, or reduced motion.
   ========================================================== */
.abp { --g:20px; --rail:36px; position:relative; background:var(--bg); color:var(--text); padding-block:clamp(48px,6vw,72px); --hdr:73px; }
.abp *, .abp *::before, .abp *::after { box-sizing:border-box; }
.abp__wrap { display:flex; flex-direction:column; gap:var(--g); }
.abp__head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
main .abp__eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0; font:700 14px/1.4 var(--font-sub); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); }
.abp__eyebrow i { width:8px; height:8px; background:var(--accent); transform:rotate(45deg); }
.abp__title { margin:0; font:400 clamp(30px,3.8vw,48px)/1.1 var(--font-head); color:var(--text); }
.abp__title em { font-style:italic; color:var(--accent-text); }
main .abp__lede { margin:0; font:400 16px/1.5 var(--font-body); color:var(--text-muted); }

.abp__board { position:relative; padding-inline-start:var(--rail); }
.abp__ledger { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); border-bottom:1px solid var(--border); }
.abp__row { position:relative; display:grid; grid-template-columns:minmax(0,1fr); row-gap:12px; padding-block:18px; border-top:1px solid var(--border); min-width:0; }
.abp__row::before { content:""; position:absolute; top:-1px; inset-inline:0; height:2px; background:var(--accent); transform-origin:left center; transform:scaleX(var(--t,1)); }
html[dir="rtl"] .abp__row::before { transform-origin:right center; }
.abp__no { font:400 40px/1 var(--font-head); color:var(--accent-text); }
.abp__id { display:flex; flex-direction:column; gap:2px; min-width:0; }
.abp__tag { font:700 14px/1.3 var(--font-sub); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); }
.abp__name { margin:0; font:400 clamp(24px,2.2vw,30px)/1.15 var(--font-head); color:var(--text); }
main .abp__text { margin:0; font:400 15px/1.5 var(--font-body); color:var(--text-muted); }
.abp__img { position:relative; margin:0; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
.abp__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.abp__img { display:grid; place-items:center; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface)); }
.abp__label { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border:1px solid var(--ab-edge); border-inline-start:3px solid var(--accent); background:var(--surface); color:var(--accent-text); font:700 13px/1.3 var(--font-sub); letter-spacing:.1em; text-transform:uppercase; }

.abp__g { filter:grayscale(1) brightness(.92); }
.abp__c { clip-path:inset(0 calc((1 - var(--t,1)) * 100%) 0 0); }
html[dir="rtl"] .abp__c { clip-path:inset(0 0 0 calc((1 - var(--t,1)) * 100%)); }
.abp__img::after { content:""; position:absolute; top:0; bottom:0; inset-inline-start:calc(var(--t,1) * 100%); width:2px; background:var(--accent); opacity:0; }
.abp__rail, .abp__mark { display:none; }

/* ---------- pinned mode (JS adds .is-pinned on wide, tall screens) ---------- */
.abp.is-pinned { padding:0; height:calc(100svh - var(--hdr) + 340svh); }
.abp.is-pinned .abp__pin { position:sticky; top:var(--hdr); height:calc(100svh - var(--hdr)); display:flex; flex-direction:column; justify-content:center; padding-block:28px; }
.abp.is-pinned .abp__wrap { flex:1; min-height:0; }
.abp.is-pinned .abp__board { flex:1; min-height:0; display:flex; }
.abp.is-pinned .abp__ledger { flex:1; min-height:0; grid-template-rows:repeat(5,minmax(0,1fr)); }
.abp.is-pinned .abp__row { grid-template-columns:64px minmax(0,.9fr) minmax(0,1.25fr) minmax(0,1.5fr); column-gap:28px; row-gap:0; align-items:center; padding-block:8px; }
.abp.is-pinned .abp__img { aspect-ratio:auto; height:100%; width:100%; }
.abp.is-pinned .abp__rail { display:block; position:absolute; top:0; bottom:0; inset-inline-start:10px; width:2px; background:var(--border); }
.abp.is-pinned .abp__fill { position:absolute; inset:0; background:var(--accent); transform-origin:top center; transform:scaleY(var(--s,0)); }
.abp.is-pinned .abp__mark { display:block; position:absolute; inset-inline-start:50%; top:calc(var(--s,0) * 100%); width:14px; height:14px; margin:-7px 0 0 -7px; background:var(--accent); transform:rotate(45deg); box-shadow:0 0 0 4px var(--bg); }
html[dir="rtl"] .abp.is-pinned .abp__mark { margin-inline-start:-7px; margin-left:0; }
.abp.is-pinned .abp__row:not(.is-lit) .abp__no { color:var(--text-muted); }
.abp.is-pinned .abp__img::after { opacity:1; }
.abp.is-pinned .abp__row.is-lit .abp__img::after { opacity:0; }
@media (max-height:700px) {
  .abp.is-pinned .abp__lede { display:none; }
  .abp.is-pinned .abp__title { font-size:clamp(28px,3.2vw,38px); }
  .abp.is-pinned .abp__no { font-size:34px; }
  .abp.is-pinned .abp__name { font-size:clamp(22px,2vw,26px); }
  main .abp.is-pinned .abp__text { font-size:14px; line-height:1.4; }
}
/* ---------- static (not pinned) ---------- */
@media (min-width:640px) and (max-width:999px) {
  .abp__ledger { max-width:720px; margin-inline:auto; width:100%; }
}
@media (max-width:480px) { .abp { --rail:0px; } }
@media (prefers-reduced-motion:reduce) {
  .abp *, .abp *::before, .abp *::after { animation:none!important; transition:none!important; }
}

/* ==========================================================
   SILVARN HOME-2 SECTION 5 — The Build Reel (sideways gallery)
   ========================================================== */
.h2-reel { position: relative; overflow: hidden; background: var(--bg); color: var(--text); padding-block: clamp(48px, 5.5vw, 72px); }
.h2f-inner { display: flex; flex-direction: column; gap: 28px; }
.h2f-head { display: flex; flex-direction: column; gap: 14px; }
main .h2f-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--accent); font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.h2f-eyebrow i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: h2f-pulse 2s ease-in-out infinite; }
.h2f-title { margin: 0; font: 400 clamp(34px, 4.6vw, 60px)/1.12 var(--font-head); color: var(--text); }
.h2f-title em { font-style: normal; color: var(--accent-text); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 3px no-repeat; transition: background-size .9s .4s ease; }
.h2f-title.is-in em { background-size: 100% 3px; }
main .h2f-lede { margin: 0; max-width: 640px; font: 400 17px/1.7 var(--font-body); color: var(--text-muted); }
.h2f-view { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; outline-offset: 4px; }
.h2f-view::-webkit-scrollbar { display: none; }
.h2f-view.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.h2f-track { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; width: max-content; }
.h2f-item { width: min(340px, 78vw); flex: none; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; }
.h2f-fig { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--surface); clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--k) * .08s); }
.h2f-fig::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.h2f-item:hover .h2f-fig::after { transform: scaleX(1); }
.h2f-fig img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); transition: transform 1.2s ease; pointer-events: none; -webkit-user-drag: none; }
.h2f-item:hover .h2f-fig img { transform: scale(1.04); }
.h2-reel.is-in .h2f-fig { clip-path: inset(0 0 0 0); }
.h2-reel.is-in .h2f-fig img { transform: scale(1); }
.h2-reel.is-in .h2f-item:hover .h2f-fig img { transform: scale(1.05); }
.h2f-cap { display: flex; align-items: flex-start; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.h2f-no { font: 400 30px/1 var(--font-head); color: var(--accent-text); }
.h2f-name { margin: 0; font: 400 22px/1.25 var(--font-head); color: var(--text); }
main .h2f-meta { margin: 4px 0 0; font: 400 15px/1.5 var(--font-body); color: var(--text-muted); }
.h2f-ctrl { display: flex; align-items: center; gap: 20px; }
.h2f-count { font: 700 15px/1 var(--font-sub); letter-spacing: .08em; color: var(--text-muted); white-space: nowrap; }
.h2f-count b { color: var(--text); font-weight: 700; }
.h2f-bar { flex: 1; height: 3px; background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 2px; overflow: hidden; direction: ltr; }
.h2f-bar-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(.2); transform-origin: left; transition: transform .25s ease; }
.h2f-btns { display: flex; gap: 10px; }
.h2f-arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--control-border); border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.h2f-arrow svg { width: 20px; height: 20px; }
.h2f-arrow:hover:not(:disabled), .h2f-arrow:focus-visible { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); }
.h2f-arrow:disabled { opacity: .4; cursor: default; }
html[dir="rtl"] .h2f-arrow svg { transform: scaleX(-1); }
.h2f-fade { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.h2f-fade.is-in { opacity: 1; transform: none; }
@keyframes h2f-pulse { 50% { transform: scale(1.5); opacity: .55; } }
@media (max-width: 700px) {
  .h2f-inner { gap: 24px; }
  .h2f-ctrl { flex-wrap: wrap; }
  .h2f-bar { order: 3; flex-basis: 100%; }
  .h2f-btns { margin-inline-start: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-reel *, .h2-reel *::before, .h2-reel *::after { animation: none !important; transition: none !important; }
  .h2f-fade { opacity: 1; transform: none; }
  .h2f-fig { clip-path: none; }
  .h2f-fig img { transform: none; }
  .h2f-title em { background-size: 100% 3px; }
}

/* ==========================================================
   SILVARN HOME-2 SECTION 6 — The Workshop Rule (measuring scale)
   ========================================================== */
.h2-rule { position: relative; overflow: hidden; background: var(--bg); color: var(--text); padding-block: clamp(48px, 5.5vw, 72px); }
.h2g-inner { display: flex; flex-direction: column; gap: 28px; }
main .h2g-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.h2g-eyebrow i { width: 10px; height: 10px; background: var(--accent); animation: h2g-spin 6s linear infinite; }
.h2g-title { margin: 0; font: 400 clamp(38px, 6vw, 84px)/1.05 var(--font-head); color: var(--text); }
.h2g-title em { display: block; font-style: normal; color: var(--accent-text); }
.h2g-scale { height: 22px; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1) .2s; border-bottom: 2px solid var(--accent); }
.h2g-ticks { display: block; height: 100%; background:
  repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 100px) bottom / 100% 100% no-repeat,
  repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 20px) bottom / 100% 9px no-repeat; }
.h2-rule.is-in .h2g-scale { clip-path: inset(0 0 0 0); }
html[dir="rtl"] .h2g-scale { clip-path: inset(0 0 0 100%); }
html[dir="rtl"] .h2-rule.is-in .h2g-scale { clip-path: inset(0 0 0 0); }
.h2g-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.h2g-item { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 10px; align-items: baseline; opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; transition-delay: calc(.9s + var(--k) * .15s); }
.h2-rule.is-in .h2g-item { opacity: 1; transform: none; }
.h2g-mark { display: none; }
.h2g-no { font: 400 34px/1 var(--font-head); color: var(--accent-text); }
.h2g-name { margin: 0; font: 400 clamp(24px, 2.4vw, 32px)/1.2 var(--font-head); color: var(--text); }
main .h2g-text { grid-column: 1 / -1; margin: 0; max-width: 360px; font: 400 16px/1.65 var(--font-body); color: var(--text-muted); }
.h2g-cta { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 28px; border-top: 1px solid var(--border); }
.h2g-link { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 240px; padding: 16px 22px; border: 2px solid var(--control-border); border-radius: 0; font: 700 16px/1.2 var(--font-sub); letter-spacing: .04em; color: var(--text); text-decoration: none; transition: color .35s; }
.h2g-link::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.h2g-link:hover::before, .h2g-link:focus-visible::before { transform: none; }
.h2g-link:hover, .h2g-link:focus-visible { color: var(--btn-text); }
.h2g-link i { font-style: normal; transition: transform .3s; }
.h2g-link:hover i { transform: translate(3px, -3px); }
.h2g-link--main { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); }
.h2g-link--main::before { background: var(--text); }
.h2g-link--main:hover, .h2g-link--main:focus-visible { color: var(--bg); }
.h2g-fade { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.h2g-fade.is-in { opacity: 1; transform: none; }
@keyframes h2g-spin { to { transform: rotate(90deg); } }
@media (max-width: 860px) {
  .h2g-inner { gap: 24px; }
  .h2g-list { grid-template-columns: 1fr; gap: 24px; }
  .h2g-text { max-width: none; }
  .h2g-link { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-rule *, .h2-rule *::before { animation: none !important; transition: none !important; }
  .h2g-fade, .h2g-item { opacity: 1; transform: none; }
  .h2g-scale { clip-path: none; }
}

/* ==========================================================
   SILVARN HOME-2 SECTION 7 — The Workshop Ticker (type in motion)
   ========================================================== */
.h2-tick { position: relative; overflow: hidden; background: var(--bg); color: var(--text); padding-block: clamp(48px, 5.5vw, 72px); }
.h2h-inner { display: flex; flex-direction: column; gap: 28px; }
main .h2h-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--accent); font: 700 12px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.h2h-eyebrow i { width: 10px; height: 10px; background: var(--accent); animation: h2h-turn 6s linear infinite; }
.h2h-board { border-block: 1px solid var(--border); padding-block: 20px; overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000000 5%, #000000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000000 5%, #000000 95%, transparent); }
.h2h-rows { display: flex; flex-direction: column; gap: 20px; }
.h2h-row { overflow: hidden; }
.h2h-track { display: flex; width: max-content; animation: h2h-run 38s linear infinite; }
.h2h-row--rev .h2h-track { animation-direction: reverse; animation-duration: 46s; }
.h2h-board:hover .h2h-track { animation-play-state: paused; }
.h2h-set { display: flex; align-items: center; gap: 36px; padding-inline-end: 36px; flex: none; }
.h2h-word { font: 400 clamp(38px, 6vw, 82px)/1.05 var(--font-head); text-transform: uppercase; white-space: nowrap; color: var(--text); }
.h2h-word--out { color: transparent; -webkit-text-stroke: 2px var(--accent-text); }
.h2h-sq { width: 16px; height: 16px; flex: none; background: var(--accent); transform: rotate(45deg); }
.h2h-link { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 24px; row-gap: 6px; padding: 24px 0; border-bottom: 2px solid var(--accent); color: var(--text); text-decoration: none; }
.h2h-link::before { content: ""; position: absolute; z-index: -1; inset: 0; background: color-mix(in srgb, var(--accent) 24%, transparent); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
html[dir="rtl"] .h2h-link::before { transform-origin: right; }
.h2h-link:hover::before, .h2h-link:focus-visible::before { transform: scaleX(1); }
.h2h-link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.h2h-link-main { font: 400 clamp(28px, 4vw, 52px)/1.15 var(--font-head); transition: transform .4s ease; }
.h2h-link-sub { grid-column: 1; font: 400 17px/1.6 var(--font-body); color: var(--text-muted); transition: transform .4s ease; }
.h2h-arrow { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: clamp(32px, 4vw, 52px); line-height: 1; color: var(--accent-text); transition: transform .4s ease; }
.h2h-link:hover .h2h-link-main, .h2h-link:hover .h2h-link-sub { transform: translateX(12px); }
html[dir="rtl"] .h2h-link:hover .h2h-link-main, html[dir="rtl"] .h2h-link:hover .h2h-link-sub { transform: translateX(-12px); }
.h2h-link:hover .h2h-arrow { transform: translate(6px, -6px); }
.h2h-fade { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.h2h-fade.is-in { opacity: 1; transform: none; }
@keyframes h2h-run { to { transform: translateX(-50%); } }
@keyframes h2h-turn { to { transform: rotate(90deg); } }
@media (max-width: 700px) {
  .h2h-inner { gap: 24px; }
  .h2h-set { gap: 24px; padding-inline-end: 24px; }
  .h2h-sq { width: 12px; height: 12px; }
  .h2h-word--out { -webkit-text-stroke-width: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-tick *, .h2-tick *::before { animation: none !important; transition: none !important; }
  .h2h-fade { opacity: 1; transform: none; }
}

/* ==========================================================
   SILVARN HOME-2 SECTION 8 — The Final Call (premium CTA)
   Always a dark, photographic band so it reads in both themes.
   ========================================================== */
.h2-call { position: relative; isolation: isolate; overflow: hidden; background: #181a1b; color: #f3f1ed; padding-block: clamp(64px, 8vw, 104px); }
.h2k-bg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; animation: h2k-drift 26s ease-in-out infinite alternate; }
.h2-call::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(24,26,27, .86), rgba(24,26,27, .78) 50%, rgba(24,26,27, .9)); }
.h2-call::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(224,120,63, .16), transparent 60%); }
.h2k-mark { position: absolute; width: 40px; height: 40px; border: 0 solid #e0783f; opacity: 0; transform: scale(.6); transition: opacity .8s ease .3s, transform .8s cubic-bezier(.2, .7, .2, 1) .3s; }
.h2k-mark--tl { top: 28px; inset-inline-start: 28px; border-top-width: 2px; border-inline-start-width: 2px; }
.h2k-mark--tr { top: 28px; inset-inline-end: 28px; border-top-width: 2px; border-inline-end-width: 2px; }
.h2k-mark--bl { bottom: 28px; inset-inline-start: 28px; border-bottom-width: 2px; border-inline-start-width: 2px; }
.h2k-mark--br { bottom: 28px; inset-inline-end: 28px; border-bottom-width: 2px; border-inline-end-width: 2px; }
.h2-call.is-in .h2k-mark { opacity: 1; transform: none; }
.h2k-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
main .h2k-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 700 12px/1.4 var(--font-sub); letter-spacing: .2em; text-transform: uppercase; color: #ec8f5b; }
.h2k-eyebrow::before, .h2k-eyebrow::after { content: ""; width: 48px; height: 1px; background: #e0783f; }
.h2k-eyebrow i { width: 9px; height: 9px; background: #e0783f; transform: rotate(45deg); animation: h2k-pulse 2.4s ease-in-out infinite; }
.h2k-title { margin: 0; font: 400 clamp(40px, 6.4vw, 92px)/1.06 var(--font-head); color: #f3f1ed; }
.h2k-line { display: block; overflow: hidden; padding-bottom: .08em; }
.h2k-line-in { display: block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.h2k-line:nth-child(2) .h2k-line-in { transition-delay: .15s; }
.h2-call.is-in .h2k-line-in { transform: none; }
.h2k-title em { font-style: normal; color: #ec8f5b; }
main .h2k-lede { margin: 0; max-width: 620px; font: 400 18px/1.7 var(--font-body); color: #ddd8cf; }
.h2k-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.h2k-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 260px; padding: 18px 26px; border: 2px solid #f3f1ed; border-radius: 0; font: 700 16px/1.2 var(--font-sub); letter-spacing: .06em; text-transform: uppercase; color: #f3f1ed; text-decoration: none; transition: color .35s, border-color .35s; }
.h2k-btn::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #f3f1ed; transform: translateY(101%); transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.h2k-btn:hover::before, .h2k-btn:focus-visible::before { transform: none; }
.h2k-btn:hover, .h2k-btn:focus-visible { color: #181a1b; }
.h2k-btn i { font-style: normal; transition: transform .3s; }
.h2k-btn:hover i { transform: translate(3px, -3px); }
.h2k-btn:focus-visible { outline: 2px solid #ec8f5b; outline-offset: 3px; }
.h2k-btn--main { background: #e0783f; border-color: #e0783f; color: #181a1b; }
.h2k-btn--main::after { content: ""; position: absolute; z-index: 1; inset-block: 0; inset-inline-start: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255, .45), transparent); transform: skewX(-20deg); animation: h2k-shine 4.5s ease-in-out infinite; pointer-events: none; }
.h2k-fade { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.h2k-fade.is-in { opacity: 1; transform: none; }
@keyframes h2k-drift { from { transform: scale(1.04); } to { transform: scale(1.14); } }
@keyframes h2k-pulse { 50% { transform: rotate(45deg) scale(1.5); opacity: .6; } }
@keyframes h2k-shine { 0%, 55% { inset-inline-start: -40%; } 100% { inset-inline-start: 140%; } }
@media (max-width: 700px) {
  .h2-call { padding-block: 64px; }
  .h2k-inner { gap: 24px; }
  .h2k-mark { width: 26px; height: 26px; }
  .h2k-mark--tl, .h2k-mark--tr { top: 14px; }
  .h2k-mark--bl, .h2k-mark--br { bottom: 14px; }
  .h2k-mark--tl, .h2k-mark--bl { inset-inline-start: 14px; }
  .h2k-mark--tr, .h2k-mark--br { inset-inline-end: 14px; }
  .h2k-eyebrow::before, .h2k-eyebrow::after { width: 24px; }
  .h2k-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-call *, .h2-call *::before, .h2-call *::after { animation: none !important; transition: none !important; }
  .h2k-line-in { transform: none; }
  .h2k-fade { opacity: 1; transform: none; }
  .h2k-mark { opacity: 1; transform: none; }
}

/* ==========================================================
   SILVARN HOME-1 SECTION 8 — The Handover (slide-to-start CTA)
   ========================================================== */
.hcta { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--text); padding-block: clamp(56px, 6.5vw, 88px); }
.hcta::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 0 1px, transparent 1px 120px); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 50%, #000000, transparent 75%); }
.hcta::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -140px; top: 50%; width: 420px; aspect-ratio: 1; transform: translateY(-50%); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%); animation: hcta-breathe 7s ease-in-out infinite; }
.hcta-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; display: flex; flex-direction: column; gap: 28px; }
main .hcta-top { text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--accent); font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; color: var(--accent-text); }
.hcta-top span { display: inline-flex; align-items: center; gap: 10px; }
.hcta-top i { width: 10px; height: 10px; background: var(--accent); animation: hcta-turn 6s linear infinite; }
.hcta-title { margin: 0; font: 400 clamp(38px, 6.2vw, 88px)/1.06 var(--font-head); color: var(--text); }
.hcta-line { display: block; overflow: hidden; padding-bottom: .08em; }
.hcta-line-in { display: block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.hcta-line:nth-child(2) .hcta-line-in { transition-delay: .15s; }
.hcta.is-in .hcta-line-in { transform: none; }
.hcta-title em { font-style: normal; color: var(--accent-text); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 3px no-repeat; transition: background-size 1s .9s ease; }
.hcta.is-in .hcta-title em { background-size: 100% 3px; }
main .hcta-lede { margin: 0; max-width: 620px; font: 400 17px/1.7 var(--font-body); color: var(--text-muted); }
.hcta-slide { --hc-p: 0; position: relative; height: 84px; border: 2px solid var(--control-border); border-radius: 0; overflow: hidden; direction: ltr; user-select: none; touch-action: pan-y; }
.hcta-fill { position: absolute; inset: 0; width: calc(var(--hc-p) * (100% - 80px) + 80px); background: color-mix(in srgb, var(--accent) 38%, transparent); border-inline-end: 2px solid var(--accent); }
.hcta-label { position: absolute; inset: 0; display: grid; place-items: center; padding-inline: 96px; text-align: center; font: 700 16px/1.2 var(--font-sub); letter-spacing: .16em; text-transform: uppercase; color: var(--text); opacity: calc(1 - var(--hc-p) * 1.4); }
.hcta-handle { position: absolute; top: 0; bottom: 0; left: calc(var(--hc-p) * (100% - 80px)); width: 80px; display: grid; place-items: center; border: 0; border-radius: 0; background: var(--btn-bg); color: var(--btn-text); font-size: 30px; line-height: 1; cursor: grab; touch-action: none; }
.hcta-handle:active { cursor: grabbing; }
.hcta-handle:focus-visible { outline: 3px solid var(--accent-text); outline-offset: -6px; }
.hcta-handle span { display: block; animation: hcta-nudge 1.8s ease-in-out infinite; }
.hcta-slide.is-drag .hcta-handle span, .hcta-slide.is-done .hcta-handle span { animation: none; }
.hcta-slide:not(.is-drag) .hcta-handle, .hcta-slide:not(.is-drag) .hcta-fill { transition: left .45s cubic-bezier(.2, .7, .2, 1), width .45s cubic-bezier(.2, .7, .2, 1); }
.hcta-slide.is-done .hcta-label { opacity: 1; }
.hcta-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.hcta-link { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1.4 var(--font-sub); letter-spacing: .06em; text-transform: uppercase; color: var(--text); text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat; padding-bottom: 6px; transition: background-size .35s ease, color .3s; }
.hcta-link:hover, .hcta-link:focus-visible { background-size: 100% 100%; color: var(--btn-text); }
.hcta-link i { font-style: normal; transition: transform .3s; }
.hcta-link:hover i { transform: translate(3px, -3px); }
.hcta-fade { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.hcta-fade.is-in { opacity: 1; transform: none; }
@keyframes hcta-turn { to { transform: rotate(90deg); } }
@keyframes hcta-nudge { 50% { transform: translateX(6px); } }
@keyframes hcta-breathe { 50% { transform: translateY(-50%) scale(1.15); opacity: .7; } }
@media (max-width: 700px) {
  .hcta-inner { width: min(100% - 32px, 620px); gap: 24px; }
  .hcta-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hcta-slide { height: 72px; }
  .hcta-fill { width: calc(var(--hc-p) * (100% - 68px) + 68px); }
  .hcta-handle { width: 68px; left: calc(var(--hc-p) * (100% - 68px)); }
  .hcta-label { padding-inline: 78px; font-size: 14px; letter-spacing: .1em; }
  .hcta-links { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .hcta *, .hcta::before, .hcta::after { animation: none !important; }
  .hcta-line-in { transform: none; transition: none; }
  .hcta-fade { opacity: 1; transform: none; transition: none; }
  .hcta-title em { background-size: 100% 3px; transition: none; }
}

/* ==========================================================
   About Us / Section 6: The Workshop Door (pinned CTA)
   Scroll lifts a roll-up shutter; one centred panel is revealed.
   One padding value (--abd-pad) is used top and bottom.
   ========================================================== */
.abd { --hdr: 73px; --abd-pad: clamp(24px, 4vh, 40px); --abd-stage: max(600px, calc(100svh - var(--hdr))); --lift: 0; --rev: 1; position: relative; background: var(--bg); color: var(--text); }
.abd *, .abd *::before, .abd *::after { box-sizing: border-box; }
.abd__pin { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--abd-stage); padding: var(--abd-pad) clamp(16px, 4vw, 48px); overflow: hidden; isolation: isolate; }
.abd__bg { position: absolute; inset: 0; z-index: -1; margin: 0; }
.abd__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abd__bg::after { content: ""; position: absolute; inset: 0; background: rgba(24,26,27, .45); }
.abd__panel { position: relative; width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: clamp(28px, 4vh, 44px) clamp(20px, 4vw, 48px); background: color-mix(in srgb, var(--bg) 97%, transparent); color: var(--text); border: 2px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); }
main .abd__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.abd__eyebrow i { width: 10px; height: 10px; background: var(--accent); flex: none; }
.abd__title { margin: 0; font: 600 clamp(40px, 6vw, 76px)/1 var(--font-head); letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.abd__title em { font-style: italic; color: var(--accent-text); }
main .abd__lede { margin: 0; max-width: 52ch; font: 400 17px/1.6 var(--font-body); color: var(--text-muted); }
.abd__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
main .abd .btn { margin: 0; min-height: 48px; padding-inline: 26px; }
.abd .abd__ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--control-border); }
.abd .abd__ghost:hover { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
.abd__facts { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0; padding: 20px 0 0; list-style: none; border-top: 2px solid var(--accent); }
.abd__facts li { padding-inline: clamp(14px, 3vw, 32px); font: 600 15px/1.4 var(--font-sub); letter-spacing: .04em; color: var(--text-muted); }
.abd__facts li + li { border-inline-start: 1px solid var(--control-border); }
.abd__facts b { color: var(--text); font-weight: 700; font-size: 17px; }

/* Roll-up door: only built when JS is on and motion is allowed */
.abd__door { display: none; }
.ab-js .abd { height: calc(var(--abd-stage) + 130vh); }
.ab-js .abd__pin { position: sticky; top: var(--hdr); height: var(--abd-stage); min-height: 0; }
.ab-js .abd__bg img { transform: scale(calc(1.12 - .12 * var(--lift))); }
.ab-js .abd__panel { opacity: var(--rev); transform: translateY(calc((1 - var(--rev)) * 28px)); }
.ab-js .abd__door { display: flex; flex-direction: column; position: absolute; inset: 0; z-index: 3; transform: translateY(calc(var(--lift) * -100%)); background: var(--surface); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 46px, color-mix(in srgb, var(--text) 22%, transparent) 46px, color-mix(in srgb, var(--text) 22%, transparent) 50px); will-change: transform; pointer-events: none; }
.abd__door-label { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: var(--abd-pad); text-align: center; }
.abd__door-label > span { background: var(--surface); padding: 6px 18px; }
.abd__door-eyebrow { font: 700 14px/1.4 var(--font-sub); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.abd__door-title { font: 600 clamp(40px, 7vw, 88px)/1 var(--font-head); color: var(--text); }
.abd__door-hint { font: 600 16px/1.4 var(--font-sub); letter-spacing: .08em; color: var(--text); }
.abd__door-hint i { display: inline-block; font-style: normal; color: var(--accent-text); animation: abd-nudge 1.6s ease-in-out infinite; }
.abd__bar { flex: none; height: 18px; background: var(--accent); box-shadow: 0 6px 0 var(--text); }
@keyframes abd-nudge { 50% { transform: translateY(-5px); } }
@media (max-width: 700px) {
  .abd { --abd-stage: max(680px, calc(100svh - var(--hdr))); }
  .abd__panel { gap: 16px; }
  .abd__actions { width: 100%; flex-direction: column; }
  .abd__actions .btn { width: 100%; }
  .abd__facts { flex-direction: column; align-items: center; gap: 8px; }
  .abd__facts li + li { border-inline-start: 0; }
  .abd__facts li { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .abd__door { display: none !important; }
  .abd__door-hint i { animation: none; }
}




/* ==========================================================
   SERVICES / Section 1: The Weld Seam (75vh banner)
   Tokens only (dark + light). Prata / Arimo / Inter. Every text >= 14px.
   One spacing token (--sv-gap); top padding = bottom padding (--sv-pad).
   ========================================================== */
.page-main--svc{display:block;padding:0;text-align:start}
.page-main--svc p{margin:0}
.sv-hero{--sv-ov:243, 241, 237;--sv-pad:clamp(56px,8vh,80px);--sv-gap:clamp(20px,2.6vh,28px);--sv-x:50%;--sv-hide:inset(0 100% 0 0);--sv-ease:cubic-bezier(.2,.8,.2,1);
position:relative;isolation:isolate;overflow:hidden;min-height:75vh;display:flex;align-items:center;padding-block:var(--sv-pad);background:var(--bg);color:var(--text)}
.sv-hero>.container{width:100%}
/* background: two full-bleed halves welded along a copper seam */
.sv-bg{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:var(--sv-x) minmax(0,1fr);background:var(--bg)}
.sv-pane{position:relative;overflow:hidden;min-width:0}
.sv-pane img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;animation:svDrift 20s ease-in-out infinite alternate}
.sv-after img{animation-direction:alternate-reverse}
.sv-seam{position:absolute;z-index:2;top:0;bottom:0;inset-inline-start:var(--sv-x);width:3px;margin-inline-start:-1.5px;pointer-events:none;
background:linear-gradient(180deg,transparent,var(--accent) 14%,#ec8f5b 50%,var(--accent) 86%,transparent);box-shadow:0 0 16px 2px rgba(224,120,63,.55);transform-origin:top;animation:svSeam 1s var(--sv-ease) both;
-webkit-mask-image:linear-gradient(180deg,#000000 0,#000000 17%,transparent 24%,transparent 76%,#000000 83%,#000000 100%);mask-image:linear-gradient(180deg,#000000 0,#000000 17%,transparent 24%,transparent 76%,#000000 83%,#000000 100%)}
.sv-spark{position:absolute;top:var(--t);inset-inline-start:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--accent);box-shadow:0 0 8px 2px rgba(224,120,63,.85);opacity:0;transform:rotate(45deg);animation:svSpark 2.8s ease-out var(--dl) infinite}
.sv-scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(0deg,rgba(var(--sv-ov),.88) 0,rgba(var(--sv-ov),0) 24%),
radial-gradient(ellipse 58% 70% at 50% 50%,rgba(var(--sv-ov),.94) 0,rgba(var(--sv-ov),.9) 50%,rgba(var(--sv-ov),.1) 100%),
linear-gradient(rgba(var(--sv-ov),.14),rgba(var(--sv-ov),.14))}
html:not([data-theme="dark" ]) .sv-hero .sv-scrim{background:linear-gradient(0deg,rgba(var(--sv-ov),.62) 0,rgba(var(--sv-ov),0) 24%),radial-gradient(ellipse 58% 70% at 50% 50%,rgba(var(--sv-ov),.84) 0,rgba(var(--sv-ov),.78) 50%,rgba(var(--sv-ov),.16) 100%),linear-gradient(rgba(var(--sv-ov),.1),rgba(var(--sv-ov),.1))}
/* before / after tags */
.sv-tag{position:absolute;bottom:clamp(20px,3.4vh,32px);z-index:2;display:flex;align-items:center;gap:12px;font:700 14px/1.3 var(--font-sub);letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.sv-tag::before{content:"";width:32px;height:2px;background:var(--accent)}
.sv-tag-before{inset-inline-start:clamp(24px,3vw,48px)}
.sv-tag-after{inset-inline-end:clamp(24px,3vw,48px);flex-direction:row-reverse}
/* content: one centred column, one gap value */
.sv-inner{display:flex;flex-direction:column;align-items:center;gap:var(--sv-gap);max-width:860px;margin-inline:auto;text-align:center}
.sv-eyebrow{display:flex;align-items:center;gap:16px;font:700 14px/1.4 var(--font-sub);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.sv-eyebrow::before,.sv-eyebrow::after{content:"";width:44px;height:1px;background:var(--accent)}
.page-main--svc .sv-title{font-size:clamp(32px,calc(2.2vw + 2.2vh),62px);text-wrap:balance;line-height:1.12;letter-spacing:-.015em;color:var(--text)}
.sv-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.sv-line-in{display:block}
.sv-accent{position:relative;display:inline-block;color:var(--accent-text)}
.sv-accent::after{content:"";position:absolute;inset-inline:0;bottom:.02em;height:3px;background:var(--accent);transform-origin:left}
.sv-lede{max-width:56ch;font:400 clamp(17px,calc(.7vw + .9vh),21px)/1.65 var(--font-body);color:var(--text);text-wrap:balance}
.sv-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sv-gap) 40px}
.sv-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;font:500 14px/1.5 var(--font-body);letter-spacing:.02em;color:var(--text-muted)}
.sv-dot{width:6px;height:6px;background:var(--accent);transform:rotate(45deg)}
/* premium CTA: square plate, arrow slot, viewfinder corners, copper sweep + shine */
.sv-cta{position:relative;display:inline-block;text-decoration:none;color:var(--btn-text)}
.sv-cta::before,.sv-cta::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none;transition:inset .35s var(--sv-ease)}
.sv-cta::before{inset-block-start:-9px;inset-inline-start:-9px;border-top:2px solid var(--accent-text);border-inline-start:2px solid var(--accent-text)}
.sv-cta::after{inset-block-end:-9px;inset-inline-end:-9px;border-bottom:2px solid var(--accent-text);border-inline-end:2px solid var(--accent-text)}
.sv-cta:hover::before,.sv-cta:focus-visible::before{inset-block-start:-4px;inset-inline-start:-4px}
.sv-cta:hover::after,.sv-cta:focus-visible::after{inset-block-end:-4px;inset-inline-end:-4px}
.sv-cta-in{position:relative;display:flex;align-items:stretch;min-height:60px;overflow:hidden;
background:linear-gradient(var(--btn-hover-bg),var(--btn-hover-bg)) no-repeat 0 0/0 100%,var(--btn-bg);box-shadow:var(--shadow);transition:background-size .5s var(--sv-ease),color .35s ease}
.sv-cta-in::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:-60%;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);animation:svShine 5s ease-in-out 2.6s infinite;pointer-events:none}
.sv-cta-label{display:flex;align-items:center;padding:0 28px;font:700 16px/1.2 var(--font-sub);letter-spacing:.1em;text-transform:uppercase}
.sv-cta-arrow{display:grid;place-items:center;width:60px;box-shadow:inset 1px 0 0 color-mix(in srgb,currentColor 35%,transparent)}
.sv-cta-arrow svg,.sv-link svg{width:22px;height:22px;transition:transform .35s var(--sv-ease)}
.sv-cta:hover .sv-cta-in,.sv-cta:focus-visible .sv-cta-in{background-size:100% 100%;color:var(--btn-hover-text)}
.sv-cta:hover .sv-cta-arrow svg,.sv-cta:focus-visible .sv-cta-arrow svg{transform:translateX(5px)}
.sv-cta:focus-visible{outline-offset:8px}
.sv-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding-block:4px;color:var(--text);text-decoration:none;font:700 16px/1.2 var(--font-sub);letter-spacing:.1em;text-transform:uppercase;
background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/34% 2px;transition:background-size .4s var(--sv-ease)}
.sv-link:hover,.sv-link:focus-visible{background-size:100% 2px}
.sv-link:hover svg,.sv-link:focus-visible svg{transform:translateX(5px)}
/* entrance (only when JS is running) */
.sv-rv,.sv-fade,.sv-line-in,.sv-accent::after,.sv-after{transition:opacity .8s var(--sv-ease) var(--d,0s),transform .8s var(--sv-ease) var(--d,0s)}
.sv-after{transition:clip-path 1.3s var(--sv-ease) .55s}
.sv-accent::after{transition:transform .7s var(--sv-ease) var(--a,1.2s)}
.js .sv-hero:not(.is-in) .sv-after{clip-path:var(--sv-hide)}
.js .sv-hero:not(.is-in) .sv-rv{opacity:0;transform:translateY(18px)}
.js .sv-hero:not(.is-in) .sv-fade{opacity:0}
.js .sv-hero:not(.is-in) .sv-line-in{transform:translateY(110%)}
.js .sv-hero:not(.is-in) .sv-accent::after{transform:scaleX(0)}
@keyframes svDrift{from{transform:scale(1.02)}to{transform:scale(1.08)}}
@keyframes svSeam{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes svSpark{0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.6)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-64px) rotate(225deg) scale(.2)}}
@keyframes svShine{0%,70%{inset-inline-start:-60%}100%{inset-inline-start:130%}}
/* mobile + small tablet: panes stack, seam turns horizontal */
@media (max-width:700px){
  .sv-hero{--sv-pad:56px}
  .sv-bg{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--sv-x) minmax(0,1fr)}
  .sv-seam{top:var(--sv-x);bottom:auto;inset-inline:0;width:auto;height:3px;margin:-1.5px 0 0;background:linear-gradient(90deg,transparent,var(--accent) 14%,#ec8f5b 50%,var(--accent) 86%,transparent);transform-origin:left;animation-name:svSeamX}
  .sv-spark{top:0;inset-inline-start:var(--t)}
  .sv-scrim{background:linear-gradient(rgba(var(--sv-ov),.82),rgba(var(--sv-ov),.88))}
  .sv-tag{display:none}
  .sv-dot{display:none}
  .sv-note{flex-direction:column;gap:6px}
  .sv-seam{z-index:0;-webkit-mask-image:none;mask-image:none}
  .sv-scrim{z-index:1}
  .sv-hero{--sv-hide:inset(0 0 100% 0)}
  .sv-actions{flex-direction:column;gap:var(--sv-gap)}
  .sv-cta{width:100%;max-width:340px}
  .sv-cta-in{justify-content:space-between}
  .sv-cta-label{padding:0 20px}
}
@keyframes svSeamX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .sv-hero *,.sv-hero *::before,.sv-hero *::after{animation:none!important;transition:none!important}
  .sv-spark{display:none}
}

/* Home 1 hero: sub-copy always uses main text colour so it stays crisp over the photo */
.page-main .hero .hero-sub { color: var(--text); }

/* Home 1 typography */
body.home-1 {--font-head:"Cormorant Garamond", Georgia, "Times New Roman", serif;--font-body:"Lora", Georgia, "Times New Roman", serif}

/* Center the workshop notes index and remove its orbit graphic */
.wn-index-panel {align-items:center;text-align:center}
.wn-index-large,.wn-index-caption {width:100%;text-align:center}
.wn-index-line {width:72%;flex:0 0 1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}

/* Center and scale the Home 1 handover headline */
.hcta-title {font-size:clamp(34px,4.8vw,64px);text-align:center}
main .hcta-lede {margin-inline:auto;text-align:center}

/* Back to top button */
.back-to-top {
  position: fixed;
  inset-inline-end: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 1100;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--accent, #a9481a);
  border-radius: 50%;
  background: var(--surface, #f3f1ed);
  color: var(--accent-text, #a9481a);
  box-shadow: 0 6px 18px rgba(24,26,27, .18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background-color .2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent, #a9481a); color: var(--surface, #f3f1ed); }
.back-to-top:focus-visible { outline: 3px solid var(--accent, #a9481a); outline-offset: 3px; }
.back-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }


/* ==========================================================
   SERVICES / SECTION 2 - Before / After (pinned shutter reveal)
   A pinned frame of 14 vertical shutters; scroll flips each one
   from the BEFORE photo to the AFTER photo in a wave. Giant
   vertical BEFORE / AFTER words bookend the frame. One gap token;
   equal top/bottom padding; text >= 14px; theme-safe.
   Default (no JS / reduced motion) = split view, half and half.
   ========================================================== */
.ba {
  --ba-gap: clamp(14px, 2vh, 24px);
  --ba-pad: clamp(48px, 6vw, 72px);
  --hdr: 73px; --p: .5;
  --ba-bg:#f2eae3; --ba-ink:#2c3033; --ba-muted:#4a4f52; --ba-copper:#8d563f; --ba-line:rgba(74,79,82,.45);
  position:relative; color:var(--ba-ink); background:var(--ba-bg); border-top:1px solid var(--ba-line);
}
html[data-theme="dark"] .ba {
  --ba-bg:#202325; --ba-ink:#f2eae3; --ba-muted:#d9b8a6; --ba-copper:#e0a07d; --ba-line:rgba(217,184,166,.45);
}
.ba.ba-live {height:300vh}
.ba-pin {width:min(1280px,calc(100% - 48px));margin-inline:auto;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:var(--ba-gap);padding-block:clamp(48px,6vw,72px)}
.ba-live .ba-pin {position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));padding-block:var(--ba-pad)}

.ba-head {flex:0 0 auto;text-align:center}
.page-main--svc .ba .ba-kicker {display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 8px;color:var(--ba-copper);font:700 14px/1.3 var(--font-sub);letter-spacing:.18em;text-transform:uppercase}
.ba-kicker span {width:clamp(24px,6vw,72px);height:2px;background:var(--ba-copper)}
.ba .ba-head h2 {margin:0;font:500 clamp(30px,4.2vw,56px)/1.1 var(--font-head);letter-spacing:-.01em;color:var(--ba-ink)}
.ba .ba-head h2 em {font-style:normal;color:var(--ba-copper)}

.ba-stage {flex:1 1 auto;min-height:0;display:flex;align-items:stretch;justify-content:center;gap:var(--ba-gap)}
.ba-tags {display:none}
.ba-side {flex:0 0 auto;height:100%;width:auto;overflow:visible}
.ba-side text {stroke:var(--ba-ink);stroke-width:2.5;stroke-linejoin:round;fill:var(--ba-copper)}
.ba-side--b text {fill-opacity:calc(1 - var(--p))}
.ba-side--a text {fill-opacity:var(--p)}

.ba-frame {flex:0 1 auto;height:100%;aspect-ratio:4/3;max-width:100%;container-type:size;display:flex;position:relative;perspective:1600px;outline:1px solid var(--ba-line);outline-offset:8px;background:#202325}
.ba-slat {flex:1 1 0;min-width:0;margin-right:-.6px;position:relative;transform-style:preserve-3d;transform:rotateY(var(--a,0deg))}
.ba-f {position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-repeat:no-repeat;
  --S:max(100cqw,100cqh);background-size:var(--S) var(--S);
  background-position:calc((100cqw - var(--S)) / 2 - var(--i) * 100cqw / 14) calc((100cqh - var(--S)) * .58)}
.ba-front {background-image:url(../Images/before.png)}
.ba-back {background-image:url(../Images/after.png);transform:rotateY(180deg)}
.ba-f::after {content:"";position:absolute;inset:0;background:#101213;opacity:calc(var(--sh,0) * .5)}

/* progress rail */
.ba-rail {flex:0 0 auto;display:flex;align-items:flex-start;gap:20px}
.ba-count {display:flex;align-items:baseline;gap:8px;min-width:150px}
.ba-count b {font:500 34px/1 var(--font-head);color:var(--ba-copper);min-width:3.2ch}
.ba-count span {font:700 14px/1 var(--font-sub);letter-spacing:.12em;text-transform:uppercase;color:var(--ba-muted)}
.ba-ruler {position:relative;flex:1;min-width:0}
.ba-line {position:relative;height:16px;border-bottom:2px solid var(--ba-line);background:repeating-linear-gradient(90deg,var(--ba-line) 0 1px,transparent 1px 12px) left bottom/100% 9px no-repeat}
.ba-fill {position:absolute;left:0;right:0;bottom:-3px;height:4px;background:var(--ba-copper);transform:scaleX(var(--p));transform-origin:left}
.ba-needle {position:absolute;bottom:-9px;left:calc(var(--p) * 100%);width:3px;height:26px;margin-left:-1.5px;background:var(--ba-ink)}
.ba-stops {list-style:none;margin:0;padding:0;position:relative;height:20px;margin-top:20px}
.ba-stops li {position:absolute;top:0;left:calc(var(--s) * 100%);transform:translateX(-50%);white-space:nowrap;color:var(--ba-muted);font:700 14px/1.3 var(--font-sub);letter-spacing:.08em;text-transform:uppercase;transition:color .3s ease}
.ba-stops li:first-child {transform:none}
.ba-stops li:last-child {transform:translateX(-100%)}
.ba-stops i {font-style:normal}
.ba-stops li.is-done {color:var(--ba-ink)}
.ba-stops li.is-active {color:var(--ba-copper)}

@media (max-width:700px) {
  .ba-pin {width:min(100% - 32px,640px)}
  .ba-side {display:none}
  .ba-stage {flex-direction:column;align-items:stretch;justify-content:center;flex:0 1 auto}
  .page-main--svc .ba .ba-tags {display:flex;justify-content:space-between;align-items:center;margin:0;font:700 30px/1 var(--font-sub);text-transform:uppercase;-webkit-text-stroke:1.5px var(--ba-ink)}
  .ba-tags span:first-child {color:color-mix(in srgb,var(--ba-copper) calc((1 - var(--p)) * 100%),transparent)}
  .ba-tags span:last-child {color:color-mix(in srgb,var(--ba-copper) calc(var(--p) * 100%),transparent)}
  .ba-frame {height:auto;width:100%;aspect-ratio:1/1;flex:none}
  .ba-count {min-width:0}
  .ba-count span {display:none}
  .ba-stops i {display:none}
  .ba-rail {gap:14px}
}
@media (prefers-reduced-motion:reduce) {
  .ba-slat,.ba-stops li {transition:none!important}
}

/* ==========================================================
   SERVICES / SECTION 3 - The Brief (pinned blueprint)  (REDESIGN v2 - Blueprint Draft)
   Home-1 / Section 7: pinned stage. Scroll drafts a motorcycle
   line drawing, then pins three project paths to it with leader
   lines. No tabs, no swapping, no stacking, no 2-column.
   One gap token; frame padding top = bottom; text >= 14px.
   Default state = fully drawn (no JS / reduced motion).
   ========================================================== */
.br-section {
  --br-gap: clamp(14px, 2vh, 22px);
  --br-pad: clamp(48px, 6vw, 72px);
  --hdr: 73px; --p: 0;
  --br-bg:#f2eae3; --br-ink:#2c3033; --br-muted:#4a4f52; --br-copper:#8d563f;
  --br-line:rgba(74,79,82,.45); --br-dots:rgba(74,79,82,.16);
  position:relative; color:var(--br-ink); background-color:var(--br-bg);
  background-image:radial-gradient(var(--br-dots) 1.2px,transparent 1.4px);
  background-size:26px 26px; border-top:1px solid var(--br-line);
}
html[data-theme="dark"] .br-section {
  --br-bg:#202325; --br-ink:#f2eae3; --br-muted:#d9b8a6; --br-copper:#e0a07d;
  --br-line:rgba(217,184,166,.45); --br-dots:rgba(217,184,166,.13);
}
.br-section.br-live {height:360vh}
.br-pin {width:min(1280px,calc(100% - 48px));margin-inline:auto;box-sizing:border-box;padding-block:clamp(48px,6vw,72px);display:flex;flex-direction:column;gap:var(--br-gap)}
.br-live .br-pin {position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));padding-block:var(--br-pad)}

.br-head {flex:0 0 auto;text-align:center}
.br-section .br-kicker {display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 10px;color:var(--br-copper);font:700 14px/1.3 var(--font-sub);letter-spacing:.18em;text-transform:uppercase}
.br-kicker span {width:10px;height:10px;border-radius:50%;background:var(--br-copper);box-shadow:0 0 0 5px color-mix(in srgb,var(--br-copper) 22%,transparent)}
.br-kicker b {font-weight:700;color:var(--br-muted);padding-left:14px;border-left:2px solid var(--br-line)}
.br-section .br-head h2 {margin:0;font:400 clamp(28px,3.8vw,50px)/1.12 var(--font-head);letter-spacing:-.02em;color:var(--br-ink)}
.br-section .br-head h2 em {font-style:normal;color:var(--br-copper)}
.br-section .br-lede {margin:10px auto 0;max-width:640px;color:var(--br-muted);font:400 16px/1.55 var(--font-body)}

.br-stage {position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--br-gap)}
.br-calls {list-style:none;margin:0;padding:0;flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--br-gap)}
.br-call {min-width:0;text-align:center;padding:14px clamp(16px,2vw,28px) 8px;box-sizing:border-box;border-top:2px solid var(--br-copper);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.br-section .br-label {margin:0 0 6px;color:var(--br-copper);font:700 14px/1.3 var(--font-sub);letter-spacing:.16em;text-transform:uppercase}
.br-section .br-call h3 {margin:0 0 6px;font:400 clamp(20px,1.9vw,26px)/1.18 var(--font-head);color:var(--br-ink)}
.br-section .br-sub {margin:0 0 8px;color:var(--br-muted);font:400 15px/1.45 var(--font-body)}
.br-link {display:inline-flex;align-items:center;gap:8px;color:var(--br-ink);font:700 15px/1.3 var(--font-sub);text-decoration:none;border-bottom:2px solid var(--br-copper);padding-bottom:2px;transition:gap .3s ease,color .3s ease}
.br-link:hover,.br-link:focus-visible {gap:14px;color:var(--br-copper)}

.br-bike {flex:1 1 auto;min-height:0;width:100%;max-width:900px;margin-inline:auto}
.br-bike svg {display:block;width:100%;height:100%}
.br-d {fill:none;stroke:var(--br-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.br-spin {transform-box:fill-box;transform-origin:center;transform:rotate(var(--rot,0deg))}
.br-core {fill:var(--br-copper)}
.br-ring {fill:none;stroke:var(--br-copper);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:brPulse 2s ease-out infinite}
@keyframes brPulse {0%{transform:scale(.8);opacity:1}100%{transform:scale(2.2);opacity:0}}
.br-leaders {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.br-calls,.br-bike {position:relative;z-index:1}
.br-leader {stroke:var(--br-copper);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;fill:none}
.br-dot {fill:var(--br-copper)}
.br-leaders {display:none}

.br-foot {flex:0 0 auto;display:flex;align-items:center;gap:18px;color:var(--br-muted);font:700 14px/1.3 var(--font-sub);letter-spacing:.12em;text-transform:uppercase}
.br-bar {flex:1;height:4px;background:var(--br-line);border-radius:2px;overflow:hidden}
.br-fill {display:block;height:100%;background:var(--br-copper);transform:scaleX(1);transform-origin:left}

/* live (pinned) states */
.br-live .br-leaders {display:block}
.br-live .br-d {stroke-dashoffset:1}
.br-live .br-fill {transform:scaleX(var(--p))}
.br-live .br-call {opacity:0;transform:translateY(14px)}
.br-live .br-call.is-on {opacity:1;transform:none}
.br-live .br-hot {opacity:0;transition:opacity .4s ease}
.br-live .br-hot.is-on {opacity:1}
.br-live .br-dot {opacity:0;transition:opacity .3s ease}
.br-live .br-dot.is-on {opacity:1}

@media (max-width:700px) {
  .br-pin {width:min(100% - 32px,640px)}
  .br-section .br-lede,.br-foot,.br-leaders,.br-live .br-leaders {display:none}
  .br-section .br-kicker {letter-spacing:.08em;flex-wrap:wrap;gap:6px 12px}
  .br-kicker b {border-left:0;padding-left:0}
  .br-calls {grid-template-columns:minmax(0,1fr);gap:calc(var(--br-gap) * .75)}
  .br-bike {order:-1}
  .br-section .br-call h3 {font-size:19px}
  .br-call {padding-top:10px}
}
@media (prefers-reduced-motion:reduce) {
  .br-ring {animation:none}
}



/* ==========================================================
   SERVICES / SECTION 4 — The Craft Mosaic (seamless bento wall)
   ========================================================== */
.svm { position: relative; overflow: hidden; background: var(--bg); color: var(--text); padding-block: clamp(56px, 6.5vw, 88px); }
.svm-inner { display: flex; flex-direction: column; gap: 28px; }
.svm-head { display: flex; flex-direction: column; gap: 14px; }
main .svm-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--accent); font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.svm-eyebrow i { width: 10px; height: 10px; background: var(--accent); animation: svm-turn 6s linear infinite; }
.svm-title { margin: 0; font: 400 clamp(34px, 4.8vw, 64px)/1.1 var(--font-head); color: var(--text); }
.svm-title em { font-style: normal; color: var(--accent-text); }
main .svm-lede { margin: 0; max-width: 640px; font: 400 17px/1.7 var(--font-body); color: var(--text-muted); }
.svm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 16px; }
.svm-t1 { grid-column: 1 / span 5; grid-row: 1 / span 3; }
.svm-t2 { grid-column: 6 / span 4; grid-row: 1 / span 2; }
.svm-t3 { grid-column: 10 / span 3; grid-row: 1 / span 3; }
.svm-t4 { grid-column: 6 / span 4; grid-row: 3 / span 1; }
.svm-t5 { grid-column: 1 / span 7; grid-row: 4 / span 1; }
.svm-t6 { grid-column: 8 / span 5; grid-row: 4 / span 1; }
.svm-cell { min-width: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--k) * .12s); }
.svm.is-in .svm-cell { clip-path: inset(0 0 0 0); }
.svm-tile { --mx: 50%; --my: 50%; position: relative; isolation: isolate; display: block; width: 100%; height: 100%; overflow: hidden; background: #202325; color: #f2eae3; text-decoration: none; border-radius: 10px; }
.svm-img { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); transition: transform 1.4s ease; }
.svm.is-in .svm-img { transform: scale(1); }
.svm-tile:hover .svm-img, .svm-tile:focus-visible .svm-img { transform: scale(1.07); }
.svm-tile::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(0deg, rgba(32,35,37, .94) 0%, rgba(32,35,37, .62) 48%, rgba(32,35,37, .2) 100%); }
.svm-tile::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(217,184,166, .28), transparent 70%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.svm-tile:hover::after { opacity: 1; }
.svm-tile:focus-visible { outline: 3px solid #d9b8a6; outline-offset: -6px; }
.svm-info { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 22px; }
.svm-info::before { content: ""; position: absolute; inset-inline: 24px; top: 0; height: 2px; background: #b98269; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
html[dir="rtl"] .svm-info::before { transform-origin: right; }
.svm-tile:hover .svm-info::before, .svm-tile:focus-visible .svm-info::before { transform: scaleX(1); }
.svm-no { font: 700 14px/1.2 var(--font-sub); letter-spacing: .16em; color: #d9b8a6; }
.svm-name { font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--font-head); color: #f2eae3; }
.svm-t1 .svm-name { font-size: clamp(30px, 3.4vw, 46px); }
.svm-desc { max-width: 420px; font: 400 16px/1.55 var(--font-body); color: #e5d5c9; }
.svm-go { position: absolute; top: 20px; inset-inline-end: 22px; font-style: normal; font-size: 28px; line-height: 1; color: #d9b8a6; transition: transform .4s ease; }
.svm-tile:hover .svm-go { transform: translate(4px, -4px); }
.svm-fade { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.svm-fade.is-in { opacity: 1; transform: none; }
@keyframes svm-turn { to { transform: rotate(90deg); } }
@media (max-width: 980px) {
  .svm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 230px; }
  .svm-t1, .svm-t2, .svm-t3, .svm-t4, .svm-t5, .svm-t6 { grid-column: auto; grid-row: auto; }
  .svm-t1, .svm-t5 { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .svm-inner { gap: 24px; }
  .svm-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .svm-t1, .svm-t5 { grid-column: auto; }
  .svm-info { padding: 18px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .svm *, .svm *::before, .svm *::after { animation: none !important; transition: none !important; }
  .svm-cell { clip-path: none; }
  .svm-fade { opacity: 1; transform: none; }
  .svm-img { transform: none; }
}

/* ==========================================================
   SERVICES / SECTION 5 — The Workshop Index (two columns: Restoration | Fabrication)
   ========================================================== */
.svt { position: relative; overflow: hidden; background: var(--bg); color: var(--text); padding-block: clamp(56px, 6.5vw, 88px); }
.svt-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); row-gap: 28px; align-items: start; }
main .svt-eyebrow { grid-column: 1 / -1; justify-self: stretch; display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--accent); font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.svt-eyebrow i { width: 10px; height: 10px; background: var(--accent); animation: svt-turn 6s linear infinite; }
.svt-group { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.svt-gh { display: flex; flex-direction: column; gap: 8px; }
.svt-word { margin: 0; font: 400 clamp(44px, 6.4vw, 96px)/1 var(--font-head); letter-spacing: -.01em; color: var(--text); }
.svt-word--out { color: transparent; -webkit-text-stroke: 2px var(--accent-text); }
main .svt-sub { margin: 0; font: 400 17px/1.6 var(--font-body); color: var(--text-muted); }
.svt-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--accent); }
.svt-row { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 36px auto 1fr; column-gap: 14px; row-gap: 4px; align-items: baseline; min-height: 96px; align-content: center; padding: 16px 12px; border-bottom: 1px solid var(--border); opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; transition-delay: calc(var(--k) * .08s); }
.svt.is-in .svt-row { opacity: 1; transform: none; }
.svt-row::before { content: ""; position: absolute; z-index: -1; inset: 0; background: color-mix(in srgb, var(--accent) 20%, transparent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
html[dir="rtl"] .svt-row::before { transform-origin: right; }
.svt-row:hover::before { transform: scaleX(1); }
.svt-no { grid-column: 1; grid-row: 1; font: 700 14px/1.4 var(--font-sub); letter-spacing: .12em; color: var(--accent-text); }
.svt-item { grid-column: 2; grid-row: 1; font: 400 clamp(20px, 2vw, 27px)/1.25 var(--font-head); color: var(--text); transition: transform .4s ease; }
.svt-row:hover .svt-item { transform: translateX(8px); }
html[dir="rtl"] .svt-row:hover .svt-item { transform: translateX(-8px); }
.svt-lead { grid-column: 3; grid-row: 1; min-width: 16px; height: 8px; align-self: center; background: radial-gradient(circle, var(--accent) 1.6px, transparent 2.2px) 0 50% / 10px 8px space no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--k) * .08s + .25s); }
html[dir="rtl"] .svt-lead { clip-path: inset(0 0 0 100%); }
.svt.is-in .svt-lead { clip-path: inset(0 0 0 0); }
.svt-note { grid-column: 2 / -1; grid-row: 2; font: 400 16px/1.5 var(--font-body); color: var(--text-muted); }
.svt-fade { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.svt-fade.is-in { opacity: 1; transform: none; }
@keyframes svt-turn { to { transform: rotate(90deg); } }
@media (max-width: 860px) {
  .svt-inner { grid-template-columns: 1fr; row-gap: 28px; }
  .svt-row { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svt *, .svt *::before { animation: none !important; transition: none !important; }
  .svt-row, .svt-fade { opacity: 1; transform: none; }
  .svt-lead { clip-path: none; }
}

/* ==========================================================
   SERVICES / SECTION 6 — Anatomy of a Restoration (annotated exploded view)
   Always a dark band (the photo is black-backed), palette = site dark tokens.
   ========================================================== */
.svx { --x-bg: #181a1b; --x-ink: #f3f1ed; --x-muted: #b9b4ac; --x-acc: #e0783f; --x-line: rgba(236,143,91, .55); position: relative; overflow: hidden; background: var(--x-bg); color: var(--x-ink); padding-block: clamp(56px, 6.5vw, 88px); }
.svx-inner { display: flex; flex-direction: column; gap: 28px; }
.svx-head { display: flex; flex-direction: column; gap: 14px; }
main .svx-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--x-acc); font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--x-acc); }
.svx-eyebrow i { width: 10px; height: 10px; background: var(--x-acc); animation: svx-turn 6s linear infinite; }
.svx-title { margin: 0; max-width: 900px; font: 400 clamp(34px, 4.8vw, 64px)/1.1 var(--font-head); color: var(--x-ink); }
.svx-title em { display: block; font-style: normal; color: var(--x-acc); }
main .svx-lede { margin: 0; max-width: 640px; font: 400 17px/1.7 var(--font-body); color: var(--x-muted); }
.svx-stage { display: flex; justify-content: center; }
.svx-fig { --figw: 580px; position: relative; width: var(--figw); height: var(--figw); flex: none; }
.svx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-mask-image: radial-gradient(closest-side, #000000 80%, transparent); mask-image: radial-gradient(closest-side, #000000 80%, transparent); transform: scale(1.1); opacity: 0; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1), opacity 1.2s ease; }
.svx.is-in .svx-img { transform: none; opacity: 1; animation: svx-float 9s ease-in-out 1.6s infinite; }
.svx-co { position: absolute; top: calc(var(--y) * var(--figw)); transform: translateY(-50%); display: flex; align-items: center; gap: 0; }
.svx-co--r { left: calc(var(--x) * var(--figw)); width: calc((1 - var(--x)) * var(--figw) + 300px); flex-direction: row; }
.svx-co--l { right: calc((1 - var(--x)) * var(--figw)); width: calc(var(--x) * var(--figw) + 300px); flex-direction: row-reverse; }
.svx-mk { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-inline: -15px; background: var(--x-bg); border: 2px solid var(--x-acc); color: var(--x-ink); font: 700 14px/1 var(--font-sub); transform: scale(0); transition: transform .5s cubic-bezier(.2, .9, .3, 1.4), background .3s, color .3s; transition-delay: calc(1s + var(--k) * .12s); z-index: 2; }
.svx-mk::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--x-acc); opacity: 0; animation: svx-ping 2.6s ease-out infinite; animation-delay: calc(var(--k) * .4s); }
.svx.is-in .svx-mk { transform: none; }
.svx-ld { flex: 1; height: 1px; background: var(--x-line); transform: scaleX(0); transition: transform .8s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(1.2s + var(--k) * .12s); }
.svx-co--r .svx-ld { transform-origin: left; }
.svx-co--l .svx-ld { transform-origin: right; }
.svx.is-in .svx-ld { transform: none; }
.svx-lb { flex: none; width: 250px; display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity .7s ease; transition-delay: calc(1.6s + var(--k) * .12s); }
.svx-co--r .svx-lb { padding-inline-start: 16px; text-align: start; }
.svx-co--l .svx-lb { padding-inline-end: 16px; text-align: end; }
.svx.is-in .svx-lb { opacity: 1; }
.svx-lb strong { font: 400 24px/1.2 var(--font-head); color: var(--x-ink); }
.svx-lb span { font: 400 16px/1.45 var(--font-body); color: var(--x-muted); }
.svx-co:hover .svx-mk { background: var(--x-acc); color: var(--x-bg); }
.svx-co:hover .svx-ld { background: var(--x-acc); }
.svx-co:hover .svx-lb strong { color: var(--x-acc); }
.svx-list { display: none; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--x-acc); }
.svx-list li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid rgba(236,143,91, .22); }
.svx-ln { font: 700 14px/1.4 var(--font-sub); letter-spacing: .1em; color: var(--x-acc); }
.svx-lt { display: flex; flex-direction: column; gap: 2px; }
.svx-lt strong { font: 400 22px/1.25 var(--font-head); color: var(--x-ink); }
.svx-lt span { font: 400 16px/1.5 var(--font-body); color: var(--x-muted); }
.svx-fade { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.svx-fade.is-in { opacity: 1; transform: none; }
@keyframes svx-turn { to { transform: rotate(90deg); } }
@keyframes svx-float { 50% { transform: translateY(-8px); } }
@keyframes svx-ping { 0% { opacity: .7; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@media (max-width: 1100px) {
  .svx-fig { --figw: min(520px, 100%); width: 100%; max-width: 520px; height: auto; aspect-ratio: 1; }
  .svx-co { width: auto; flex-direction: row; }
  .svx-co--l, .svx-co--r { left: calc(var(--x) * 100%); right: auto; width: auto; top: calc(var(--y) * 100%); }
  .svx-ld, .svx-lb { display: none; }
  .svx-mk { margin-inline: -15px; }
  .svx-list { display: block; }
}
@media (max-width: 620px) {
  .svx-inner { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .svx *, .svx *::before, .svx *::after { animation: none !important; transition: none !important; }
  .svx-img, .svx-mk, .svx-ld, .svx-lb, .svx-fade { opacity: 1; transform: none; }
}

/* ==========================================================
   SERVICES / SECTION 7 — The Work Order (sentence-builder CTA)
   ========================================================== */
.svc { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--text); padding-block: clamp(56px, 6.5vw, 88px); }
.svc::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%); }
.svc-inner { display: flex; flex-direction: column; gap: 28px; }
main .svc-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--accent); font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.svc-eyebrow i { width: 10px; height: 10px; background: var(--accent); animation: svc-turn 6s linear infinite; }
.svc-form { display: flex; flex-direction: column; gap: 28px; margin: 0; }
main .svc-sentence { margin: 0; font: 400 clamp(28px, 4vw, 56px)/1.55 var(--font-head); color: var(--text); }
.svc-w { display: inline; }
.svc-f { display: inline-block; position: relative; vertical-align: baseline; margin-inline: .12em; }
.svc-f::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--accent-text); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.7, 0, .2, 1); pointer-events: none; }
html[dir="rtl"] .svc-f::after { transform-origin: right; }
.svc-f:focus-within::after { transform: scaleX(1); }
.svc-in { display: inline-block; font: inherit; color: var(--accent-text); background: transparent; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 0; padding: 0 .1em .02em; outline: none; appearance: none; -webkit-appearance: none; max-width: 100%; box-shadow: none; }
.svc-in::placeholder { color: var(--text-muted); opacity: .9; }
.svc-in--bike { width: 17ch; }
.svc-in--mail { width: 20ch; }
.svc-in--need { width: 11.5ch; padding-inline-end: .75em; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b34e1d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right .05em center / .5em; }
html[dir="rtl"] .svc-in--need { background-position: left .05em center; }
.svc-in--need option { font: 400 18px/1.4 var(--font-body); color: #181a1b; background: #f3f1ed; }
.svc-in:-webkit-autofill { -webkit-text-fill-color: var(--accent-text); transition: background-color 9999s; }
.svc-act { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.svc-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 240px; padding: 13px 20px; border: 2px solid var(--btn-bg); border-radius: 0; background: var(--btn-bg); color: var(--btn-text); font: 700 16px/1.2 var(--font-sub); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .35s, border-color .35s; }
.svc-btn::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--btn-hover-bg); transform: translateY(101%); transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.svc-btn:hover::before, .svc-btn:focus-visible::before { transform: none; }
.svc-btn:hover, .svc-btn:focus-visible { color: var(--btn-hover-text); border-color: var(--btn-hover-bg); }
.svc-btn:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.svc-btn i, .svc-alt i { font-style: normal; display: inline-block; transition: transform .3s; }
.svc-btn:hover i, .svc-alt:hover i { transform: translate(3px, -3px); }
.svc-alt { font: 700 16px/1.5 var(--font-sub); color: var(--text); text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat; padding-bottom: 4px; transition: background-size .35s, color .3s; }
.svc-alt:hover, .svc-alt:focus-visible { background-size: 100% 100%; color: var(--btn-text); }
.svc-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--k) * .09s); }
.svc.is-in .svc-up { opacity: 1; transform: none; }
.svc-w.svc-up, .svc-f.svc-up { display: inline-block; }
@keyframes svc-turn { to { transform: rotate(90deg); } }
@media (max-width: 700px) {
  .svc-inner, .svc-form { gap: 24px; }
  .svc-act { flex-direction: column; align-items: stretch; padding-top: 24px; }
  .svc-btn { min-width: 0; width: min(100%, 260px); align-self: center; padding: 12px 18px; }
  .svc-in--mail { width: 17ch; }
}
@media (prefers-reduced-motion: reduce) {
  .svc *, .svc *::before { animation: none !important; transition: none !important; }
  .svc-up { opacity: 1; transform: none; }
}


/* ==========================================================
   SERVICES / Section 1: The Link Chain (75vh banner)
   Diamond-cut photo chains frame a centred message. Tokens only (dark + light).
   Every text >= 14px. One spacing token (--sv3-gap); top padding = bottom padding.
   ========================================================== */
.sv3{--sv3-pad:clamp(40px,6vh,64px);--sv3-gap:clamp(20px,2.8vh,28px);--sv3-ease:cubic-bezier(.2,.8,.2,1);
position:relative;isolation:isolate;overflow:hidden;min-height:75vh;display:flex;align-items:center;justify-content:center;padding-block:var(--sv3-pad);background:var(--bg);color:var(--text)}
.sv3::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(color-mix(in srgb,var(--text) 12%,transparent) 1px,transparent 1.6px) 0 0/28px 28px,radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%);
-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000000,transparent 82%);mask-image:radial-gradient(ellipse at 50% 50%,#000000,transparent 82%)}
.page-main--svc .sv3 p{margin:0}
/* the two chains: width = a third of their height, so three diamonds touch tip to tip */
.sv3-chain{position:absolute;top:0;bottom:0;aspect-ratio:1/3;pointer-events:none}
.sv3-chain--a{inset-inline-start:0}
.sv3-chain--b{inset-inline-end:0}
.sv3-list{list-style:none;margin:0;padding:0;height:100%;display:grid;grid-template-rows:repeat(3,1fr);
filter:drop-shadow(1.5px 0 0 var(--accent)) drop-shadow(-1.5px 0 0 var(--accent)) drop-shadow(0 1.5px 0 var(--accent)) drop-shadow(0 -1.5px 0 var(--accent))}
.sv3-dia{position:relative;overflow:hidden;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--surface);transition:opacity .9s var(--sv3-ease) calc(.15s + var(--i)*.12s),transform .9s var(--sv3-ease) calc(.15s + var(--i)*.12s)}
.sv3-dia img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;animation:sv3Drift 16s ease-in-out infinite alternate}
.sv3-dia:nth-child(even) img{animation-direction:alternate-reverse}
.sv3-dia::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-120%);animation:sv3Shine 7s ease-in-out calc(2s + var(--i)*.9s) infinite}
/* weld nodes where the diamonds meet */
.sv3-node{position:absolute;inset-inline-start:50%;top:calc(var(--n)*33.333%);width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--btn-bg);box-shadow:0 0 0 2px var(--accent);transform:rotate(45deg);z-index:2;animation:sv3Pulse 3.2s ease-in-out infinite}
.sv3-node[style*="--n:2"]{animation-delay:1.1s}
/* vertical captions on the inner edge of each chain */
.sv3-cap{position:absolute;top:50%;display:flex;align-items:center;gap:14px;font:700 14px/1.3 var(--font-sub);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-text);writing-mode:vertical-rl;white-space:nowrap}
.sv3-cap::before,.sv3-cap::after{content:"";width:1px;height:36px;background:var(--accent)}
.sv3-cap--a{left:100%;margin-left:22px;transform:translateY(-50%) rotate(180deg)}
.sv3-cap--b{right:100%;margin-right:22px;transform:translateY(-50%)}
/* centred message */
.sv3-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--sv3-gap);width:min(720px,calc(100% - 2*(75vh / 3) - 120px));text-align:center}
.sv3-eyebrow{display:flex;align-items:center;gap:14px;font:700 14px/1.4 var(--font-sub);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.sv3-eyebrow::before,.sv3-eyebrow::after{content:"";width:8px;height:8px;background:var(--accent);transform:rotate(45deg);flex:none}
.page-main--svc .sv3-title{font-size:clamp(30px,calc(2vw + 2.2vh),58px);line-height:1.12;letter-spacing:-.015em;color:var(--text)}
.sv3-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.sv3-line-in{display:block}
.sv3-hl{color:var(--accent-text)}
.sv3-lede{max-width:52ch;font:400 clamp(16px,calc(.55vw + .85vh),20px)/1.65 var(--font-body);color:var(--text-muted);text-wrap:balance}
.sv3-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sv3-gap) 36px}
/* arrow-shaped CTA (pointed end), copper-style sweep in site teal */
.sv3-cta{display:inline-block;text-decoration:none;color:var(--btn-text)}
.sv3-cta:focus-visible{outline-offset:6px}
.sv3-cta-in{position:relative;display:flex;align-items:stretch;min-height:60px;overflow:hidden;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);
background:linear-gradient(var(--btn-hover-bg),var(--btn-hover-bg)) no-repeat 0 0/0 100%,var(--btn-bg);transition:background-size .5s var(--sv3-ease),color .35s ease}
.sv3-cta-label{display:flex;align-items:center;padding:0 24px 0 30px;font:700 16px/1.2 var(--font-sub);letter-spacing:.1em;text-transform:uppercase}
.sv3-cta-arrow{display:grid;place-items:center;width:64px;padding-inline-end:14px}
.sv3-cta-arrow svg{width:22px;height:22px;transition:transform .35s var(--sv3-ease)}
.sv3-cta:hover .sv3-cta-in,.sv3-cta:focus-visible .sv3-cta-in{background-size:100% 100%;color:var(--btn-hover-text)}
.sv3-cta:hover .sv3-cta-arrow svg,.sv3-cta:focus-visible .sv3-cta-arrow svg{transform:translateX(5px)}
/* entrance (only when JS is running) */
.sv3-rv,.sv3-line-in{transition:opacity .8s var(--sv3-ease) var(--d,0s),transform .8s var(--sv3-ease) var(--d,0s)}
.js .sv3:not(.is-in) .sv3-rv{opacity:0;transform:translateY(18px)}
.js .sv3:not(.is-in) .sv3-line-in{transform:translateY(110%)}
.js .sv3:not(.is-in) .sv3-dia{opacity:0;transform:scale(.55)}
.js .sv3:not(.is-in) .sv3-node,.js .sv3:not(.is-in) .sv3-cap{opacity:0}
.sv3-node,.sv3-cap{transition:opacity .8s ease 1.1s}
@keyframes sv3Drift{from{transform:scale(1.04)}to{transform:scale(1.14)}}
@keyframes sv3Shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes sv3Pulse{0%,100%{box-shadow:0 0 0 2px var(--accent),0 0 0 2px transparent}50%{box-shadow:0 0 0 2px var(--accent),0 0 0 9px color-mix(in srgb,var(--accent) 0%,transparent)}}
/* mobile / tablet: both chains join into one row of six diamonds above the message */
@media (max-width:900px){
  .sv3{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;justify-content:center;row-gap:var(--sv3-gap);--sv3-d:min(15vw,104px)}
  .sv3-chain{position:relative;inset:auto;width:calc(var(--sv3-d)*3);height:var(--sv3-d);aspect-ratio:auto}
  .sv3-chain--a{grid-area:1/1;justify-self:end}
  .sv3-chain--b{grid-area:1/2;justify-self:start}
  .sv3-list{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
  .sv3-node{top:50%;inset-inline-start:calc(var(--n)*33.333%);margin:-5px 0 0 -5px;width:10px;height:10px}
  .sv3-cap{display:none}
  .sv3-inner{grid-area:2/1/3/3;justify-self:center;width:100%;max-width:640px;padding-inline:20px}
  .sv3-actions{flex-direction:column}
  .sv3-eyebrow{letter-spacing:.08em;gap:10px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .sv3 *,.sv3 *::before,.sv3 *::after{animation:none!important;transition:none!important}
}


@media (max-width:700px) {
  .jr-cta-copy { padding-inline: 18px; }
  .build-journey .jr-panel--cta .jr-mark { padding-top: 0; margin-bottom: 10px; }
  .build-journey .jr-panel--cta h3 { font-size: clamp(25px, 7vw, 30px); line-height: 1.08; margin-bottom: 10px; }
  .build-journey .jr-panel--cta .jr-text { font-size: 15px; line-height: 1.4; margin-bottom: 14px; }
  .jr-cta { padding: 13px 20px; }
}

@media (max-width:700px) {
  .jr-panel:not(.jr-panel--cta) .jr-plate { height: 74%; }
}

/* Services hero: replace the six diamond photos with one full-bleed workshop image. */
.sv3 { background-image: url('../Images/black-custom-motorcycle-workshop-hero.jpg'); background-size: cover; background-position: center 58%; }
.sv3-chain { display: none; }
.sv3::before { z-index: 0; background: linear-gradient(rgba(24,26,27,.48),rgba(24,26,27,.48)), radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%); -webkit-mask-image: none; mask-image: none; }
html:not([data-theme='dark']) .page-main--svc .sv3-eyebrow,
html:not([data-theme='dark']) .page-main--svc .sv3-title,
html:not([data-theme='dark']) .page-main--svc .sv3-lede,
html:not([data-theme='dark']) .page-main--svc .sv-link { color: #f3f1ed; text-shadow: 0 2px 14px rgba(0,0,0,.42); }
html:not([data-theme='dark']) .page-main--svc .sv3-hl { color: #ec8f5b; }
html[data-theme='dark'] .sv3::before { background: linear-gradient(rgba(24,26,27,.64),rgba(24,26,27,.64)), radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%); }

/* ==========================================================
   About Us / Section 3: The Torque Sheet (pinned, no images)
   One padding value (--abv-pad) top and bottom; one gap (--abv-gap).
   ========================================================== */
.abv { --hdr: 73px; --abv-pad: clamp(20px, 4vh, 40px); --abv-gap: clamp(14px, 3vh, 32px); --abv-stage: max(560px, calc(100svh - var(--hdr))); background: var(--bg); color: var(--text); }
.abv *, .abv *::before, .abv *::after { box-sizing: border-box; }
.abv__pin { padding-block: var(--abv-pad); }
.abv__wrap { display: flex; flex-direction: column; gap: var(--abv-gap); }
.abv__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.abv .ab-chip { margin: 0; }
.abv__title { margin: 0; font: 600 clamp(30px, 5.4vh, 60px)/1.1 var(--font-head); letter-spacing: -.01em; color: var(--text); }
.abv__gauge { display: flex; gap: 8px; }
.abv__gauge i { position: relative; flex: 1; height: 12px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 28%, transparent) 0 3px, transparent 3px 12px); overflow: hidden; }
.abv__gauge i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 12px); transform-origin: left; transform: scaleX(var(--f, 1)); }
.abv__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.abv__row { --f: 1; position: relative; display: grid; grid-template-columns: clamp(48px, 5vw, 72px) auto 1fr; grid-template-areas: "no name tag" ". text text"; align-items: baseline; column-gap: 0; row-gap: 4px; padding-block: clamp(10px, 2.4vh, 28px); border-bottom: 2px solid color-mix(in srgb, var(--text) 22%, transparent); }
.abv__row:first-child { border-top: 2px solid color-mix(in srgb, var(--text) 22%, transparent); }
.abv__row::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--f)); }
.abv__no { grid-area: no; font: 600 clamp(24px, 4vh, 40px)/1 var(--font-head); color: var(--accent-text); }
.abv__name { grid-area: name; position: relative; justify-self: start; margin: 0; font: 700 clamp(32px, 7.4vh, 80px)/1.05 var(--font-head); letter-spacing: -.01em; }
.abv__o { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--text-muted); }
.abv__f { position: absolute; inset: 0; color: var(--text); clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0); }
.abv__tag { grid-area: tag; justify-self: end; font: 700 14px/1.4 var(--font-sub); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.page-main--about .abv__text { grid-area: text; margin: 0; max-width: 78ch; font: 400 clamp(16px, 2vh, 19px)/1.5 var(--font-body); color: var(--text-muted); }
.ab-js .abv__row, .ab-js .abv__gauge i { --f: 0; }
@media (min-width: 901px) and (max-height: 780px) {
  .abv { --abv-pad: 20px; --abv-gap: 14px; }
  .abv__title { font-size: clamp(28px, 5vh, 42px); }
  .abv__name { font-size: clamp(32px, 6.6vh, 54px); }
  .abv__row { padding-block: 15px; row-gap: 4px; }
  .abv__no { font-size: 30px; }
}
@media (min-width: 901px) {
  .ab-js .abv { height: calc(var(--abv-stage) + 170vh); }
  .ab-js .abv__pin { position: sticky; top: var(--hdr); min-height: var(--abv-stage); display: flex; align-items: center; }
  .ab-js .abv__pin > .container { width: 100%; }
}
@media (max-width: 900px) {
  .abv__row { grid-template-columns: 44px 1fr; grid-template-areas: "no name" ". tag" ". text"; }
  .abv__tag { justify-self: start; }
  .abv__name { font-size: clamp(30px, 8vw, 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .abv__row, .abv__gauge i { --f: 1 !important; }
}

/* ==========================================================
   Contact page: Section 1 banner, Section 2 work-order form, Section 3 find us, Section 4 what happens next, Section 5 questions, Section 6 closing band, Section 5 FAQ
   Every section uses one padding value (--ct-pad) top and bottom and one gap (--ct-gap).
   ========================================================== */
.page-main--contact { display: block; padding: 0; text-align: start; --ct-pad: clamp(40px, 6vh, 64px); --ct-gap: clamp(14px, 2.2vh, 22px); --ct-err: #b3261e; --ct-ease: cubic-bezier(.2,.8,.2,1); }
html[data-theme="dark"] .page-main--contact { --ct-err: #ff9c94; }
.page-main--contact *, .page-main--contact *::before, .page-main--contact *::after { box-sizing: border-box; }
.page-main--contact p, .page-main--contact h1, .page-main--contact h2, .page-main--contact h3 { margin: 0; }
.page-main--contact .btn { margin: 0; min-height: 48px; padding-inline: 26px; }
.page-main--contact .ct-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--control-border); }
.page-main--contact .ct-ghost:hover { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
.ct-sec { position: relative; isolation: isolate; padding-block: var(--ct-pad); background: var(--bg); color: var(--text); }
.ct-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ct-gap); margin-inline: auto; width: 100%; }
.ct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; font-style: normal; }
.page-main--contact .ct-tag { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.ct-tag i { width: 10px; height: 10px; background: var(--accent); flex: none; }
.page-main--contact .ct-h2 { font: 600 clamp(32px, 5vw, 56px)/1.1 var(--font-head); letter-spacing: -.01em; color: var(--text); }

/* reveal (only when motion is allowed) */
.ct-js .ct-rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ct-ease), transform .7s var(--ct-ease); transition-delay: calc(var(--i, 0) * .09s); }
.ct-js .is-in .ct-rv { opacity: 1; transform: none; }

/* ---------- Section 1: banner ---------- */
.ctb { background: var(--bg); }
.ctb::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(color-mix(in srgb, var(--text) 16%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000000, transparent 80%); mask-image: radial-gradient(ellipse at 50% 40%, #000000, transparent 80%); }
.ctb__dim { position: absolute; inset-inline: clamp(16px, 4vw, 48px); top: 16px; height: 14px; display: flex; align-items: center; gap: 0; direction: ltr; }
.ctb__dim i { width: 3px; height: 14px; background: var(--accent); flex: none; }
.ctb__dim b { flex: 1; height: 3px; background: var(--accent); transform-origin: left; }
.ct-js .ctb__dim b { transform: scaleX(0); transition: transform 1.2s var(--ct-ease); }
.ct-js .ctb.is-in .ctb__dim b { transform: none; }
.ctb__col { max-width: 880px; }
.ctb__chip { padding: 6px 16px; border: 2px solid var(--control-border); border-radius: 999px; font: 700 14px/1.4 var(--font-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.ctb__chip ol { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.ctb__chip li + li::before { content: "/"; margin-inline: 10px; color: var(--text-muted); }
.ctb__chip a { color: var(--accent-text); text-decoration: none; }
.ctb__chip a:hover { text-decoration: underline; }
.page-main--contact .ctb__title { font: 600 clamp(40px, 7vw, 92px)/1 var(--font-head); letter-spacing: -.015em; color: var(--text); }
.ctb__line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.ctb__line-in { display: block; }
.ctb__title em { font-style: italic; color: var(--accent-text); }
.ct-js .ctb__line-in { transform: translateY(110%); transition: transform 1s var(--ct-ease); }
.ct-js .ctb__line:nth-child(2) .ctb__line-in { transition-delay: .15s; }
.ct-js .ctb.is-in .ctb__line-in { transform: none; }
.page-main--contact .ctb__lede { max-width: 56ch; font: 400 18px/1.6 var(--font-body); color: var(--text-muted); }
.ctb__actions, .ctm__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ctb__strip { display: flex; width: 100%; max-width: 760px; margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--accent); }
.ctb__strip li { flex: 1; min-width: 0; }
.ctb__strip li + li { border-inline-start: 1px solid var(--control-border); }
.ctb__strip a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--ct-gap) 10px 0; text-decoration: none; color: var(--text); }
.ctb__strip b { font: 700 14px/1.4 var(--font-sub); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.ctb__strip span { font: 500 17px/1.4 var(--font-body); overflow-wrap: anywhere; }
.ctb__strip a:hover span, .ctb__strip a:focus-visible span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Section 2: work order (split layout: photo + form panel) ----------
   --ctf-pad = outer padding of the panel AND the gap between photo and panel.
   --ctf-s   = the one spacing step used between everything inside the panel. */
.ctf { background: var(--alt-surface); --ctf-pad: clamp(24px, 3.2vw, 44px); --ctf-s: clamp(18px, 2vw, 24px); }
.ctf__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--ctf-pad); align-items: stretch; }

/* photo column */
.ctf__media { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: var(--ctf-pad); overflow: hidden; background: #181a1b; border-radius: var(--radius); color: #f3f1ed; }
.ctf__media img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ctf__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(24,26,27,.10) 0%, rgba(24,26,27,.30) 40%, rgba(24,26,27,.92) 100%); }
.ctf__cap { display: flex; flex-direction: column; gap: var(--ctf-s); }
.page-main--contact .ctf__cap-tag { font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: #ec8f5b; }
.page-main--contact .ctf__cap-title { font: 600 clamp(28px, 3vw, 38px)/1.15 var(--font-head); color: #f3f1ed; }
.ctf__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ctf-s); margin: 0; padding: var(--ctf-s) 0 0; list-style: none; border-top: 1px solid rgba(243,241,237,.4); }
.ctf__facts li { display: flex; flex-direction: column; gap: 4px; }
.ctf__facts b { font: 600 clamp(24px, 2.4vw, 30px)/1.1 var(--font-head); color: #f3f1ed; }
.ctf__facts span { font: 500 14px/1.4 var(--font-body); color: #d9d6d0; }

/* form panel */
.ctf__panel { display: flex; flex-direction: column; gap: var(--ctf-s); padding: var(--ctf-pad); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.ctf__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ctf-s); }
.ctf__progress { display: flex; align-items: center; gap: var(--ctf-s); width: 100%; }
.ctf__gauge { display: flex; flex: 1; gap: 8px; }
.ctf__gauge i { position: relative; flex: 1; height: 12px; overflow: hidden; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 28%, transparent) 0 3px, transparent 3px 12px); }
.ctf__gauge i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 12px); transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform .5s var(--ct-ease); }
.ctf__count { flex: none; font: 600 14px/1.4 var(--font-sub); color: var(--text-muted); white-space: nowrap; }
.ctf__count b { color: var(--accent-text); font-weight: 700; }
.ctf__wrap { width: 100%; display: flex; flex-direction: column; }
.ctf__form { display: flex; flex-direction: column; gap: var(--ctf-s); width: 100%; text-align: start; }
.ctf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ctf-s); }
.ctf__field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ctf__field label, .ctf__field legend { padding: 0; font: 700 15px/1.4 var(--font-sub); color: var(--text); }
.ctf__field input[type="text"], .ctf__field input[type="email"], .ctf__field textarea { width: 100%; min-height: 52px; padding: 12px 16px; background: var(--input-bg); color: var(--text); border: 2px solid var(--control-border); border-radius: var(--radius); font: 400 16px/1.5 var(--font-body); transition: box-shadow .25s ease, border-color .25s ease; }
.ctf__field textarea { min-height: 128px; resize: vertical; }
.ctf__field input:hover, .ctf__field textarea:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ctf__field input:focus-visible, .ctf__field textarea:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.ctf__field [aria-invalid="true"] { border-color: var(--ct-err); }
.ctf__err { font: 600 14px/1.4 var(--font-sub); color: var(--ct-err); }
.ctf__err:empty { display: none; }
.ctf__err::before { content: "! "; font-weight: 700; }

/* service tiles: 3 + 2 laid on a 6-column grid so both rows fill the full width */
.ctf__tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ctf__tile { position: relative; display: block; grid-column: span 2; cursor: pointer; }
.ctf__tile:nth-child(n+4) { grid-column: span 3; }
.ctf__tile input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ctf__tile span { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 2px solid var(--control-border); border-radius: var(--radius); background: var(--input-bg); font: 600 15px/1.25 var(--font-sub); color: var(--text); transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ct-ease), box-shadow .25s ease; }
.ctf__tile svg { flex: none; width: 22px; height: 22px; color: var(--accent-text); transition: color .25s ease, transform .35s var(--ct-ease); }
.ctf__tile:hover span { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 14%, var(--input-bg)); box-shadow: 0 6px 14px color-mix(in srgb, var(--text) 14%, transparent); }
.ctf__tile input:checked + span { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.ctf__tile input:checked + span svg { color: var(--btn-text); transform: scale(1.18) rotate(-8deg); }
.ctf__tile input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.ctf__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--ctf-s); }
.ctf__hint { font: 500 15px/1.4 var(--font-body); color: var(--text-muted); }
.ctf__done { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--ctf-s); width: 100%; flex: 1; padding: var(--ctf-pad); border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.ctf__done[hidden] { display: none; }
.page-main--contact .ctf__done h3 { font: 600 clamp(26px, 3.4vw, 36px)/1.15 var(--font-head); color: var(--text); }
.page-main--contact .ctf__done p { max-width: 46ch; font: 400 16px/1.6 var(--font-body); color: var(--text-muted); }
.ctf__done:focus { outline: none; }

/* section 2 motion: photo wipes in and settles, caption rises in order */
.ct-js .ctf__media { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ct-ease); }
.ct-js .ctf.is-in .ctf__media { clip-path: inset(0); }
.ct-js .ctf__media img { transform: scale(1.14); transition: transform 2.2s var(--ct-ease); }
.ct-js .ctf.is-in .ctf__media img { transform: scale(1); }
.ct-js .ctf__cap > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ct-ease), transform .7s var(--ct-ease); }
.ct-js .ctf.is-in .ctf__cap > * { opacity: 1; transform: none; }
.ct-js .ctf__cap > :nth-child(1) { transition-delay: .55s; }
.ct-js .ctf__cap > :nth-child(2) { transition-delay: .7s; }
.ct-js .ctf__cap > :nth-child(3) { transition-delay: .85s; }

/* ---------- Section 3: find us ---------- */
.ctm { background: var(--bg); }
.ctm__col { max-width: 960px; }
.ctm__frame { position: relative; width: 100%; padding: 8px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.ctm__frame::before, .ctm__frame::after { content: ""; position: absolute; width: 28px; height: 28px; pointer-events: none; border: 0 solid var(--accent-text); }
.ctm__frame::before { top: -6px; inset-inline-start: -6px; border-top-width: 5px; border-inline-start-width: 5px; }
.ctm__frame::after { bottom: -6px; inset-inline-end: -6px; border-bottom-width: 5px; border-inline-end-width: 5px; }
.ctm__frame iframe { display: block; width: 100%; aspect-ratio: 21 / 9; border: 0; background: var(--alt-surface); }
html[data-theme="dark"] .ctm__frame iframe { filter: invert(.92) hue-rotate(180deg) brightness(.92) contrast(.95); }
.ct-js .ctm__frame { clip-path: inset(0 50% 0 50%); transition: clip-path 1.1s var(--ct-ease); }
.ct-js .ctm.is-in .ctm__frame { clip-path: inset(-12px); }
.page-main--contact .ctm__fallback { font: 700 15px/1.4 var(--font-sub); color: var(--accent-text); text-underline-offset: 4px; }
.ctm__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.ctm__days li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ctm__days i { display: block; width: 100%; height: 12px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 30%, transparent) 0 3px, transparent 3px 7px); transform-origin: left; }
.ctm__days .is-open i { background: var(--accent); }
.ctm__days span { padding-bottom: 2px; font: 600 14px/1.4 var(--font-sub); letter-spacing: .04em; color: var(--text-muted); border-bottom: 2px solid transparent; }
.ctm__days .is-today span { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }
.ct-js .ctm__days i { transform: scaleX(0); transition: transform .6s var(--ct-ease); transition-delay: calc(.35s + var(--k) * .12s); }
.ct-js .ctm.is-in .ctm__days i { transform: none; }
.page-main--contact .ctm__hours { font: 700 clamp(18px, 2.4vw, 22px)/1.3 var(--font-sub); color: var(--text); }
.ctm__addr { font: 400 17px/1.5 var(--font-body); font-style: normal; color: var(--text-muted); }

/* ---------- Section 4: what happens next (timeline + checklist band) ----------
   --ctp-gap is used for the column gap, the head gap and the band gap, so every block is spaced alike. */
.ctp { background: var(--alt-surface); --ctp-gap: clamp(24px, 3.2vw, 44px); --ctp-node: 56px; }
.ctp__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; gap: var(--ctp-gap); margin-bottom: var(--ctp-gap); }
.ctp__titles { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ct-gap); }
.page-main--contact .ctp__lede { font: 400 18px/1.6 var(--font-body); color: var(--text-muted); }
.ctp__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ctp-gap); margin: 0; padding: 0; list-style: none; }
.ctp__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ct-gap); min-width: 0; }
.ctp__node { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: var(--ctp-node); height: var(--ctp-node); border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); font: 600 22px/1 var(--font-head); color: var(--text); transition: transform .35s var(--ct-ease), box-shadow .35s ease; }
.ctp__step:not(:last-child)::before, .ctp__step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--ctp-node) / 2 - 1px); inset-inline-start: var(--ctp-node); width: calc(100% - var(--ctp-node) + var(--ctp-gap)); height: 2px; }
.ctp__step:not(:last-child)::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 32%, transparent) 0 6px, transparent 6px 12px); }
.ctp__step:not(:last-child)::after { background: var(--accent); transform-origin: left; }
.ctp__body { display: flex; flex-direction: column; gap: 8px; }
.page-main--contact .ctp__when { font: 700 14px/1.4 var(--font-sub); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.page-main--contact .ctp__body h3 { font: 600 clamp(26px, 2.4vw, 30px)/1.15 var(--font-head); color: var(--text); }
.page-main--contact .ctp__body p:last-child { font: 400 16px/1.6 var(--font-body); color: var(--text-muted); }
.ctp__step:hover .ctp__node { transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); }

.ctp__bring { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); align-items: center; gap: var(--ctp-gap); margin-top: var(--ctp-gap); padding-top: var(--ct-gap); border-top: 3px solid var(--accent); }
.page-main--contact .ctp__bring-title { font: 600 clamp(24px, 2.2vw, 28px)/1.2 var(--font-head); color: var(--text); }
.ctp__bring-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ctp-gap); margin: 0; padding: 0; list-style: none; }
.ctp__bring-list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ctp__bring-list svg { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-text); }
.ctp__bring-list span { font: 600 17px/1.4 var(--font-sub); color: var(--text); }

/* section 4 motion: the rail draws left to right and each node fills as it is reached */
.ct-js .ctp__node { transition: opacity .7s var(--ct-ease) calc(var(--i, 0) * .09s), transform .7s var(--ct-ease) calc(var(--i, 0) * .09s), background-color .4s ease calc(.45s + var(--k) * .5s), color .4s ease calc(.45s + var(--k) * .5s), border-color .4s ease calc(.45s + var(--k) * .5s), box-shadow .35s ease; }
.ct-js .ctp.is-in .ctp__node { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.ct-js .ctp__step:not(:last-child)::after { transform: scaleX(0); transition: transform .5s linear calc(.7s + var(--k) * .5s); }
.ct-js .ctp.is-in .ctp__step:not(:last-child)::after { transform: none; }
.ct-js .is-in .ctp__step:hover .ctp__node { transform: scale(1.08); }

/* ---------- Section 5: questions (intro column + ruled accordion) ---------- */
.ctq { background: var(--bg); --ctq-gap: clamp(24px, 3.2vw, 44px); }
.ctq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--ctq-gap); align-items: start; }
.ctq__intro { position: sticky; top: calc(var(--header-h, 72px) + var(--ct-pad)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--ct-gap); }
.page-main--contact .ctq__lede { font: 400 18px/1.6 var(--font-body); color: var(--text-muted); }
.ctq__list { border-top: 3px solid var(--accent); min-width: 0; }
.ctq__item { position: relative; border-bottom: 1px solid var(--control-border); }
.ctq__item::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ct-ease); }
.ctq__item[open]::before { transform: none; }
.ctq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-gap); padding: var(--ct-gap) 20px; cursor: pointer; list-style: none; font: 600 clamp(18px, 1.6vw, 21px)/1.35 var(--font-sub); color: var(--text); transition: color .25s ease, padding .3s var(--ct-ease); }
.ctq__item summary::-webkit-details-marker { display: none; }
.ctq__item summary:hover { color: var(--accent-text); }
.ctq__item summary:focus-visible { outline: 3px solid var(--accent-text); outline-offset: -3px; }
.ctq__item summary i { position: relative; flex: none; width: 36px; height: 36px; border: 2px solid var(--control-border); border-radius: 50%; transition: background-color .3s ease, transform .4s var(--ct-ease); }
.ctq__item summary i::before, .ctq__item summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--text); transition: transform .4s var(--ct-ease), background-color .3s ease; }
.ctq__item summary i::after { transform: rotate(90deg); }
.ctq__item[open] summary i { background: var(--btn-bg); border-color: var(--btn-bg); transform: rotate(180deg); }
.ctq__item[open] summary i::before, .ctq__item[open] summary i::after { background: var(--btn-text); }
.ctq__item[open] summary i::after { transform: rotate(0); }
.page-main--contact .ctq__item p { padding: 0 calc(36px + var(--ct-gap) + 20px) var(--ct-gap) 20px; font: 400 16px/1.65 var(--font-body); color: var(--text-muted); }
.ctq__item[open] p { animation: ctqIn .45s var(--ct-ease); }
@keyframes ctqIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Section 6: closing band (wide photo panel) ---------- */
.ctc { background: var(--alt-surface); --ctc-pad: clamp(28px, 4vw, 56px); }
.ctc__panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--ctc-pad); align-items: center; padding: var(--ctc-pad); overflow: hidden; border-radius: var(--radius); background: #181a1b; color: #f3f1ed; }
.ctc__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ctc__panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24,26,27,.92) 0%, rgba(24,26,27,.72) 55%, rgba(24,26,27,.5) 100%); }
.ctc__msg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ct-gap); }
.page-main--contact .ctc__tag { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: #ec8f5b; }
.ctc__tag i { width: 10px; height: 10px; background: #ec8f5b; }
.page-main--contact .ctc__title { font: 600 clamp(34px, 4.4vw, 58px)/1.08 var(--font-head); letter-spacing: -.01em; color: #f3f1ed; }
.page-main--contact .ctc__lede { max-width: 48ch; font: 400 18px/1.6 var(--font-body); color: #d9d6d0; }
.ctc__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-main--contact .ctc__btn { background: #e0783f; color: #181a1b; }
.page-main--contact .ctc__btn:hover { background: #ec8f5b; color: #181a1b; }
.page-main--contact .ctc__ghost { background: transparent; color: #f3f1ed; box-shadow: inset 0 0 0 2px #f3f1ed; }
.page-main--contact .ctc__ghost:hover { background: #f3f1ed; color: #181a1b; }
.ctc__direct { margin: 0; padding: 0; list-style: none; border-top: 3px solid #ec8f5b; }
.ctc__direct li + li { border-top: 1px solid rgba(243,241,237,.35); }
.ctc__direct a { display: flex; flex-direction: column; gap: 4px; padding: var(--ct-gap) 0; text-decoration: none; color: #f3f1ed; }
.ctc__direct b { font: 700 14px/1.4 var(--font-sub); letter-spacing: .12em; text-transform: uppercase; color: #ec8f5b; }
.ctc__direct span { font: 500 clamp(18px, 1.8vw, 22px)/1.35 var(--font-body); overflow-wrap: anywhere; transition: transform .3s var(--ct-ease); }
.ctc__direct a:hover span, .ctc__direct a:focus-visible span { transform: translateX(8px); text-decoration: underline; text-underline-offset: 5px; }
.ct-js .ctc__panel { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ct-ease); }
.ct-js .ctc.is-in .ctc__panel { clip-path: inset(0); }
.ct-js .ctc__img { transform: scale(1.12); transition: transform 2.2s var(--ct-ease); }
.ct-js .ctc.is-in .ctc__img { transform: none; }
.ct-js .ctc .ct-rv { transition-delay: calc(.4s + var(--i, 0) * .1s); }
@media (max-width: 960px) {
  .ctq__grid { grid-template-columns: minmax(0, 1fr); }
  .ctq__intro { position: static; }
  .ctc__panel { grid-template-columns: minmax(0, 1fr); }
  .ctc__panel::after { background: rgba(24,26,27,.8); }
}
@media (max-width: 640px) {
  .ctc__actions .btn { flex: 1 1 100%; }
  .page-main--contact .ctq__item p { padding-inline-end: 20px; }
  .ctq__item summary { padding-inline: 16px; }
  .page-main--contact .ctq__item p { padding-inline-start: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-js .ctc__panel { clip-path: none !important; transition: none !important; }
  .ct-js .ctc__img { transform: none !important; transition: none !important; }
  .ctq__item[open] p { animation: none; }
}

@media (max-width: 700px) {
  .ctb__strip { flex-direction: column; }
  .ctb__strip li + li { border-inline-start: 0; border-top: 1px solid var(--control-border); }
  .ctb__strip a { padding-block: var(--ct-gap); }
  .ctb__strip li:first-child a { padding-top: var(--ct-gap); }
  .ctb__actions .btn, .ctm__actions .btn { flex: 1 1 100%; }
  .ctm__frame iframe { aspect-ratio: 4 / 3; }
  .ctb__chip ol { flex-wrap: wrap; }
}
@media (max-width: 1024px) {
  .ctf__grid { grid-template-columns: minmax(0, 1fr); }
  .ctf__media { min-height: clamp(300px, 46vw, 420px); }
}
@media (max-width: 960px) {
  .ctp__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ctp__steps { grid-template-columns: minmax(0, 1fr); }
  .ctp__step { display: grid; grid-template-columns: var(--ctp-node) minmax(0, 1fr); align-items: start; column-gap: var(--ct-gap); }
  .ctp__step:not(:last-child)::before, .ctp__step:not(:last-child)::after { top: var(--ctp-node); inset-inline-start: calc(var(--ctp-node) / 2 - 1px); width: 2px; height: calc(100% - var(--ctp-node) + var(--ctp-gap)); }
  .ctp__step:not(:last-child)::before { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--text) 32%, transparent) 0 6px, transparent 6px 12px); }
  .ctp__step:not(:last-child)::after { transform-origin: top; }
  .ct-js .ctp__step:not(:last-child)::after { transform: scaleY(0); }
  .ct-js .ctp.is-in .ctp__step:not(:last-child)::after { transform: none; }
  .ctp__bring { grid-template-columns: minmax(0, 1fr); }
  .ctq__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ctq__col + .ctq__col { border-top: 0; }
  .ctq__cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .ctf__row { grid-template-columns: minmax(0, 1fr); }
  .ctf__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctf__tile, .ctf__tile:nth-child(n+4) { grid-column: span 1; }
  .ctf__tile { min-width: 0; }
  .ctf__tile span { flex-direction: column; justify-content: center; gap: 6px; min-height: 88px; padding: 8px 6px; text-align: center; overflow-wrap: anywhere; }
  .ctf__tile svg { width: 20px; height: 20px; }
  .ctf__tile:last-child { grid-column: span 2; }
  .ctf__progress { flex-direction: column; align-items: flex-start; }
  .ctf__gauge { width: 100%; flex: none; }
  .ctf__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ctp__bring-list { grid-template-columns: minmax(0, 1fr); gap: var(--ct-gap); }
  .ctq__cta-actions, .ctq__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-js .ct-rv, .ct-js .ctb__line-in, .ct-js .ctm__days i, .ct-js .ctb__dim b { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ct-js .ctm__frame, .ct-js .ctf__media { clip-path: none !important; transition: none !important; }
  .ct-js .ctf__media img, .ct-js .ctf__cap > *, .ct-js .ctq__cta img, .ct-js .ctp__node, .ct-js .ctp__step::after { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ct-js .ctp__node { background: var(--btn-bg) !important; color: var(--btn-text) !important; border-color: var(--btn-bg) !important; }
}
.ctf__form[hidden] { display: none; }
.ct-sec { scroll-margin-top: var(--header-h, 72px); }

/* ==========================================================
   About Us / Section 4: Work Grid (three columns; intro + photo | two photos | tall photo + button)
   --abw-gap is the single spacing step between every tile, column and the section padding scale.
   ========================================================== */
.abw { --abw-gap: clamp(14px, 1.8vw, 24px); --abw-ease: cubic-bezier(.2,.8,.2,1); padding-block: clamp(56px, 7vw, 96px); background: var(--bg); color: var(--text); }
.abw *, .abw *::before, .abw *::after { box-sizing: border-box; }
.abw__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abw-gap); height: clamp(560px, 46vw, 680px); }
.abw__col { display: flex; flex-direction: column; gap: var(--abw-gap); min-height: 0; min-width: 0; }
.abw__intro { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: calc(var(--abw-gap) / 2); }
.abw .abw__tag { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 14px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.abw__tag i { width: 10px; height: 10px; background: var(--accent); flex: none; }
.abw .abw__title { margin: 0; font: 600 clamp(30px, 3.2vw, 44px)/1.1 var(--font-head); letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.abw .abw__lede { margin: 0; font: 400 17px/1.6 var(--font-body); color: var(--text-muted); }
.abw__tile { position: relative; isolation: isolate; flex: 1 1 0; min-height: 0; margin: 0; overflow: hidden; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.abw__tile img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--abw-ease); }
.abw__tile:hover img { transform: scale(1.07); }
.abw__tile figcaption { position: absolute; inset-inline-start: 14px; inset-block-end: 14px; max-width: calc(100% - 28px); padding: 8px 16px; border-radius: 999px; background: rgba(243,241,237,.94); color: #181a1b; font: 700 14px/1.3 var(--font-sub); transition: background-color .3s ease, transform .4s var(--abw-ease); }
.abw__tile:hover figcaption { background: #e0783f; transform: translateY(-3px); }
.abw__more { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border: 2px solid var(--control-border); border-radius: 999px; background: transparent; color: var(--text); font: 700 16px/1.2 var(--font-sub); text-decoration: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.abw__more svg { width: 20px; height: 20px; transition: transform .35s var(--abw-ease); }
.abw__more:hover, .abw__more:focus-visible { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-text); }
.abw__more:hover svg { transform: translateX(5px); }
.abw__more:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
html[dir="rtl"] .abw__more svg { transform: scaleX(-1); }
html[dir="rtl"] .abw__more:hover svg { transform: scaleX(-1) translateX(5px); }

/* entrance: tiles wipe up one after another, photos settle, intro rises */
.abw-js .abw__tile, .abw-js .abw__more { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--abw-ease) calc(var(--k, 0) * .12s), transform .8s var(--abw-ease) calc(var(--k, 0) * .12s), background-color .3s ease, color .3s ease, border-color .3s ease; }
.abw-js .abw__tile { clip-path: inset(12% 0 0 0); transition: opacity .8s var(--abw-ease) calc(var(--k, 0) * .12s), transform .8s var(--abw-ease) calc(var(--k, 0) * .12s), clip-path 1s var(--abw-ease) calc(var(--k, 0) * .12s); }
.abw-js.is-in .abw__tile, .abw-js.is-in .abw__more { opacity: 1; transform: none; clip-path: inset(0); }
.abw-js .abw__intro > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--abw-ease), transform .7s var(--abw-ease); }
.abw-js.is-in .abw__intro > * { opacity: 1; transform: none; }
.abw-js .abw__intro > :nth-child(2) { transition-delay: .1s; } .abw-js .abw__intro > :nth-child(3) { transition-delay: .2s; }
.abw-js .abw__tile img { transform: scale(1.15); }
.abw-js.is-in .abw__tile img { transform: scale(1); transition: transform 1.8s var(--abw-ease); }
.abw-js.is-in .abw__tile:hover img { transform: scale(1.07); transition: transform 1s var(--abw-ease); }

@media (max-width: 960px) {
  .abw__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .abw__col { display: contents; }
  .abw__intro { grid-column: 1 / -1; padding-bottom: 0; }
  .abw__tile { flex: none; aspect-ratio: 4 / 5; }
  .abw__more { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .abw__tile figcaption { inset-inline-start: 10px; inset-block-end: 10px; max-width: calc(100% - 20px); padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .abw-js .abw__tile, .abw-js .abw__more, .abw-js .abw__intro > *, .abw-js .abw__tile img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* Keep primary action buttons consistent across every page. */
.btn, .gx-btn, .sv-pt__btn, .why-cta, .sr-cta, .gxb__btn, .abw__more, .h2k-btn, .svc-btn, .sv-cta-in, .sv3-cta-in, .h2r-view, .ctc__btn {
  border-radius: var(--radius) !important;
  clip-path: none !important;
}



/* ===== Merged from auth.css ===== */
/* Authentication and account pages */
.page-main--auth { flex: 1 0 auto; background: var(--alt-surface); }
.au { padding-block: 40px; }
.au-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: stretch; gap: clamp(28px, 5vw, 72px); }
.au-art { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(420px, 48vw, 600px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #202325; box-shadow: var(--shadow); }
.au-art::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(24,26,27,.88), rgba(24,26,27,.04) 72%); pointer-events: none; }
.au-art img { position: absolute; z-index: -2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.au-art-cap { position: relative; z-index: 1; width: 100%; max-width: 38ch; margin: 0; padding: 28px; color: #fff !important; background: linear-gradient(90deg, rgba(24,26,27,.94), rgba(24,26,27,.78)); text-shadow: 0 2px 10px rgba(0,0,0,.72); font: 500 clamp(20px, 2.3vw, 30px)/1.3 var(--font-head); }
.au-card { width: 100%; max-width: 560px; justify-self: center; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.au-tag { margin: 0 0 10px; color: var(--accent-text); font: 700 13px/1.4 var(--font-sub); letter-spacing: .14em; text-transform: uppercase; }
.au-title { margin: 0; color: var(--text); font: 500 clamp(36px, 4vw, 54px)/1.05 var(--font-head); }
.au-lede { margin: 10px 0 26px; color: var(--text-muted); font: 400 16px/1.55 var(--font-body); }
.au-form { display: flex; flex-direction: column; gap: 18px; }
.au-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; }
.au-field > label, .au-field > legend { padding: 0; color: var(--text); font: 700 14px/1.4 var(--font-sub); }
.au-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.au-input { display: flex; align-items: center; width: 100%; min-width: 0; border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--input-bg); }
.au-input input { width: 100%; min-width: 0; height: 48px; padding: 10px 13px; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 15px/1.4 var(--font-body); }
.au-input:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.au-input input::placeholder { color: var(--text-muted); opacity: .8; }
.au-input--pw input { padding-inline-end: 4px; }
.au-eye { flex: none; display: grid; place-items: center; width: 42px; height: 42px; margin-inline-end: 3px; padding: 9px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: pointer; }
.au-eye svg { width: 20px; height: 20px; }
.au-eye-off { display: none; }
.au-eye[aria-pressed="true"] .au-eye-on { display: none; }
.au-eye[aria-pressed="true"] .au-eye-off { display: block; }
.au-eye:focus-visible, .au-link:focus-visible, .sx-btn2:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.au-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; color: var(--text-muted); font: 400 14px/1.4 var(--font-body); }
.au-check { display: inline-flex; align-items: flex-start; gap: 9px; color: var(--text-muted); font: 400 14px/1.45 var(--font-body); cursor: pointer; }
.au-check input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--accent); }
.au-link { color: var(--accent-text); font: 700 14px/1.4 var(--font-sub); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.au-submit { width: 100%; min-height: 48px; }
.au-status { min-height: 0; margin: 0; color: var(--text-muted); font: 500 14px/1.5 var(--font-body); }
.au-status:not(:empty) { padding: 10px 12px; border-inline-start: 3px solid var(--accent); background: var(--alt-surface); }
.au-err { min-height: 0; margin: 0; color: #a1261d; font: 600 13px/1.4 var(--font-body); }
.au-err:empty { display: none; }
.au-err::before { content: "! "; font-weight: 700; }
.au-input[aria-invalid="true"] { border-color: #a1261d; }
.au-meter { display: grid; gap: 7px; }
.au-meter-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.au-meter-bar i { height: 5px; border-radius: 3px; background: var(--border); }
.au-meter[data-lvl="1"] .au-meter-bar i:nth-child(-n+1), .au-meter[data-lvl="2"] .au-meter-bar i:nth-child(-n+2), .au-meter[data-lvl="3"] .au-meter-bar i:nth-child(-n+3), .au-meter[data-lvl="4"] .au-meter-bar i:nth-child(-n+4) { background: var(--accent); }
.au-meter-tx { margin: 0; color: var(--text-muted); font: 400 13px/1.4 var(--font-body); }
.au-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; color: var(--text-muted); font: 400 14px/1.5 var(--font-body); }
@media (max-width: 820px) { .au-wrap { grid-template-columns: minmax(0, 1fr); max-width: 640px; } .au-art { min-height: clamp(260px, 55vw, 380px); } .au-card { max-width: none; } }
@media (max-width: 520px) { .au { padding-block: 40px; } .au-wrap { gap: 20px; } .au-art { min-height: 330px; } .au-art::after { background: linear-gradient(0deg, rgba(24,26,27,.58), rgba(24,26,27,.02) 78%); } .au-art-cap { padding: 20px; font-size: 22px; background: linear-gradient(90deg, rgba(24,26,27,.72), rgba(24,26,27,.58)); } .au-card { padding: 22px 18px; } .au-row { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ===== Merged from gallery.css ===== */
/* ==========================================================
   SILVARN - Gallery page
   S1  Banner        : headline over a shutter-opening photo band + ruler
   S2  Piston Wall   : pinned scroll, columns slide in opposite directions
   S3  Before/After  : drag-to-compare restoration slider
   S4  Build Stages  : three-column showcase (heading + next card, tall stage photo, picker + description cards)
   S5  Build Ring    : ten photos on a turning 3D ring, scroll spins it, centred call to action below
   Rules: theme tokens only (light + dark), every text >= 14px,
   ONE gap token (--gx-gap) for every space between items,
   ONE padding token (--gx-pad) used for top AND bottom of each section.
   ========================================================== */

.page-main--gx { display: block; padding: 0; text-align: start; }
.page-main--gx p { margin: 0; font-size: inherit; }

.gx {
  --gx-pad: clamp(40px, 6vh, 72px);
  --gx-gap: clamp(14px, 2.6vh, 28px);
  --gx-hdr: 73px;
  --gx-cut: 18px;
  --gx-ease: cubic-bezier(.2, .8, .2, 1);
  --gx-line: color-mix(in srgb, var(--text) 30%, transparent);
  --gx-cut-poly: polygon(0 0, calc(100% - var(--gx-cut)) 0, 100% var(--gx-cut), 100% 100%, var(--gx-cut) 100%, 0 calc(100% - var(--gx-cut)));
  position: relative;
  color: var(--text);
  background: var(--bg);
}
.gx *, .gx *::before, .gx *::after { box-sizing: border-box; }

/* ---------- shared pieces ---------- */
.gx-h2 {
  font: 700 clamp(30px, 4.4vw, 56px)/1.08 var(--font-head);
  letter-spacing: -.01em;
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}
.gx-lede {
  max-width: 78ch;
  font: 400 clamp(16px, 1.25vw, 18px)/1.6 var(--font-body);
  color: var(--text-muted);
  text-align: center;
  text-wrap: balance;
}
.gx-tag {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 18px;
  border: 2px solid var(--text);
  font: 700 15px/1.3 var(--font-sub);
  letter-spacing: .04em;
  color: var(--text);
}
.gx-tag::before, .gx-tag::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.gx-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gx-gap) calc(var(--gx-gap) * 1.5); }
.gx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 30px;
  background: var(--btn-bg); color: var(--btn-text);
  font: 700 16px/1.2 var(--font-sub);
  text-decoration: none;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: background-color .25s ease, color .25s ease;
}
.gx-btn:hover, .gx-btn:focus-visible { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
.gx-link {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding-block: 4px;
  font: 700 16px/1.2 var(--font-sub);
  color: var(--text); text-decoration: none;
  border-bottom: 2px solid var(--accent);
  transition: color .25s ease;
}
.gx-link:hover, .gx-link:focus-visible { color: var(--accent-text); }
.gx-btn svg, .gx-link svg { width: 20px; height: 20px; flex: none; transition: transform .3s var(--gx-ease); }
.gx-btn:hover svg, .gx-link:hover svg, .gx-btn:focus-visible svg, .gx-link:focus-visible svg { transform: translateX(4px); }
.gx-btn:focus-visible { outline-offset: 4px; }

/* measuring ruler: grey ticks, accent fill grows with --f (0..1) */
.gx-ruler {
  --gx-tick: repeating-linear-gradient(90deg, #000000 0 2px, transparent 2px 12px) bottom / 100% 8px no-repeat,
             repeating-linear-gradient(90deg, #000000 0 2px, transparent 2px 60px) top / 100% 100% no-repeat;
  position: relative; flex: none; width: 100%; height: 16px;
  background: var(--gx-line);
  -webkit-mask: var(--gx-tick); mask: var(--gx-tick);
}
.gx-ruler::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--f, 1));
}

/* framed photo: accent border that follows the cut corners */
.gx-frame {
  padding: 3px;
  background: var(--accent);
  clip-path: var(--gx-cut-poly);
}
.gx-frame-in {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--surface);
  --gx-cut-in: 16px;
  clip-path: polygon(0 0, calc(100% - var(--gx-cut-in)) 0, 100% var(--gx-cut-in), 100% 100%, var(--gx-cut-in) 100%, 0 calc(100% - var(--gx-cut-in)));
}
.gx-frame-in img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
html[data-theme="dark"] .gx-frame-in img,
html[data-theme="dark"] .gx-tile img,
html[data-theme="dark"] .gx-st-item img,
html[data-theme="dark"] .gx-st img,
html[data-theme="dark"] .gx-pr-fig img,
html[data-theme="dark"] .gx-ring-tile img { filter: brightness(.92) contrast(1.05); }

/* ==========================================================
   S1  BANNER
   ========================================================== */
.gx-hero { min-height: 75vh; display: flex; flex-direction: column; justify-content: center; background-color: #181a1b; background-image: linear-gradient(rgba(24,26,27,.72), rgba(24,26,27,.72)), url("../Images/hero.jpg"); background-size: cover; background-position: center; }
.gx-hero-wrap {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: var(--gx-gap);
  padding-block: clamp(64px, 9vh, 104px);
  background-color: transparent;
}
.gx-hero .gx-title { color: #f3f1ed; }
.gx-hero .gx-lede { color: #f2eae3; }
.gx-hero .gx-tag { color: #f3f1ed; border-color: #f3f1ed; }
.gx-hero .gx-link { color: #f3f1ed; }
.gx-hero .gx-hero-note { font: 700 13px/1.4 var(--font-sub); letter-spacing: .12em; text-transform: uppercase; color: #f3f1ed; text-align: center; }
.gx-title {
  font: 700 clamp(38px, 6.4vw, 88px)/1.04 var(--font-head);
  letter-spacing: -.015em;
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}
.gx-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.gx-line-in { display: block; }
.gx-band { width: 100%; flex: 1; display: flex; min-height: clamp(240px, 38vh, 560px); }
.gx-band .gx-frame-in { flex: 1; height: auto; align-self: stretch; min-height: 0; }
.gx-band .gx-frame-in img { position: absolute; inset: 0; object-position: 50% 60%; }

/* one orchestrated entrance, only when JS runs */
.gx-rv, .gx-line-in { transition: opacity .8s var(--gx-ease) var(--d, 0s), transform .8s var(--gx-ease) var(--d, 0s); }
.gx-band { transition: clip-path 1.1s var(--gx-ease) .45s; }
.gx-hero .gx-ruler::after { transition: transform 1.6s var(--gx-ease) .9s; }
.js .gx-hero:not(.is-in) .gx-rv { opacity: 0; transform: translateY(14px); }
.js .gx-hero:not(.is-in) .gx-line-in { transform: translateY(110%); }
.js .gx-hero:not(.is-in) .gx-band {
  clip-path: polygon(0 46%, calc(100% - var(--gx-cut)) 46%, 100% 46%, 100% 54%, var(--gx-cut) 54%, 0 54%);
}
.js .gx-hero:not(.is-in) .gx-ruler::after { transform: scaleX(0); }

/* ==========================================================
   S2  PISTON WALL
   Static grid by default. When JS + motion are allowed the stage is
   pinned and --p (0..1) slides odd columns up, even columns down.
   ========================================================== */
.gx-wallsec { border-top: 2px solid var(--gx-line); }
.gx-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--gx-gap); padding-block: var(--gx-pad); }
.gx-head { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--gx-gap); }
.gx-wall {
  --cols: 5;
  width: 100%;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gx-gap);
}
.gx-col { display: contents; margin: 0; padding: 0; list-style: none; }
.gx-tile {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  clip-path: var(--gx-cut-poly);
  --gx-cut: 16px;
}
.gx-tile img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform .6s var(--gx-ease);
}
.gx-tile:hover img { transform: scale(1.06); }
.gx-cap {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; align-items: center;
  min-height: 44px; padding: 8px 14px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 2px solid var(--accent);
}
.gx-cap b { font: 700 18px/1.15 var(--font-head); color: var(--text); }
.gx-wallsec .gx-h2 { font-size: clamp(28px, min(4.4vw, 5.4vh), 56px); }
.gx-wallsec .gx-ruler { display: none; }

@media (max-width: 1024px) { .gx-wall { --cols: 3; } }
@media (max-width: 640px)  { .gx-wall { --cols: 2; } }

@media (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  .js .gx-wallsec {
    --gx-stage: calc(100vh - var(--gx-hdr));
    --gx-stage: calc(100svh - var(--gx-hdr));
    height: calc(var(--gx-stage) + 140vh);
  }
  .js .gx-stage { position: sticky; top: var(--gx-hdr); height: var(--gx-stage); }
  .js .gx-wallsec .gx-ruler { display: block; --f: var(--p, 0); }
  .js .gx-wallsec .gx-ruler::after { transition: none; }
  .js .gx-wall { flex: 1; min-height: 0; container-type: size; overflow: hidden; align-items: start; }
  .js .gx-col {
    display: flex; flex-direction: column; gap: var(--gx-gap);
    --travel: calc(100cqh + var(--gx-gap));
    will-change: transform;
  }
  .js .gx-tile { aspect-ratio: auto; flex: none; height: calc((100cqh - var(--gx-gap)) / 2); }
  .js .gx-col:nth-child(odd)  { transform: translateY(calc(var(--p, 0) * var(--travel) * -1)); }
  .js .gx-col:nth-child(even) { transform: translateY(calc((var(--p, 0) - 1) * var(--travel))); }
  @media (max-width: 1024px) { .js .gx-col:nth-child(n+4) { display: none; } }
  @media (max-width: 640px)  { .js .gx-col:nth-child(n+3) { display: none; } }
}

/* ==========================================================
   S3  BEFORE / AFTER
   ========================================================== */
.gx-compare { background: var(--alt-surface); border-top: 2px solid var(--gx-line); }
.gx-cmp-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--gx-gap); padding-block: var(--gx-pad); }
.gx-ba { width: min(100%, 1120px, calc((100vh - 300px) * 1.7778)); width: min(100%, 1120px, calc((100svh - 300px) * 1.7778)); min-width: min(100%, 520px); aspect-ratio: 16 / 9; }
.gx-ba .gx-frame { position: relative; width: 100%; height: 100%; }
.gx-ba-img { position: absolute; inset: 0; object-position: 50% 62%; }
.gx-ba-img--before { clip-path: inset(0 calc(100% - var(--pos, 50) * 1%) 0 0); }
.gx-ba-chip {
  position: absolute; top: 16px; z-index: 2;
  padding: 6px 14px;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--text);
  font: 700 15px/1.3 var(--font-sub);
}
.gx-ba-chip--l { left: 16px; }
.gx-ba-chip--r { right: 16px; }
.gx-ba-handle {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  left: calc(var(--pos, 50) * 1%);
  width: 4px; margin-left: -2px;
  background: var(--btn-bg);
  pointer-events: none;
}
.gx-ba-knob {
  position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-text);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.gx-ba-knob svg { width: 26px; height: 26px; }
.gx-ba-range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.gx-ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; }
.gx-ba-range::-moz-range-thumb { width: 2px; height: 100%; border: 0; }
.gx-ba:has(.gx-ba-range:focus-visible) .gx-ba-knob { outline: 3px solid var(--text); outline-offset: 3px; }
.gx-hint { font: 400 15px/1.5 var(--font-body); color: var(--text-muted); text-align: center; }


/* ==========================================================
   S4  BUILD STAGES
   Three-column showcase. Left: heading + "up next" card.
   Centre: one tall stage photo (cross-fades). Right: stage picker
   card (accent) + description card. Click, tap, hover or arrow keys
   change the stage (gallery.js).
   ========================================================== */
.gx-stages { border-top: 2px solid var(--gx-line); --gx-on-acc: #ffffff; }
html[data-theme="dark"] .gx-stages { --gx-on-acc: #181a1b; }
.gx-st-wrap {
  --gx-st-h: clamp(480px, 70vh, 620px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, .86fr);
  gap: calc(var(--gx-gap) * 1.3);
  padding-block: var(--gx-pad);
  align-items: stretch;
}

/* left column */
.gx-st-left { display: flex; flex-direction: column; justify-content: space-between; gap: var(--gx-gap); min-height: var(--gx-st-h); min-width: 0; }
.gx-st-head { display: flex; flex-direction: column; gap: var(--gx-gap); align-items: flex-start; }
.gx-st-title, .gx-st-lede { text-align: start; text-wrap: pretty; }
.gx-st-copy { max-width: 40ch; margin: 0; color: var(--text-muted); font: 400 16px/1.65 var(--font-body); text-wrap: pretty; }
.gx-st-title { font-size: clamp(32px, 3.9vw, 54px); }
.gx-st-next {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  width: max-content; max-width: 100%;
  margin: 0; padding: 10px 22px 10px 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow);
  font: inherit; text-align: start; cursor: pointer;
  clip-path: var(--gx-cut-poly);
  transition: transform .35s var(--gx-ease), border-color .25s ease;
}
.gx-st-next:hover, .gx-st-next:focus-visible { transform: translateY(-3px); border-color: var(--accent); }
.gx-st-next:focus-visible { outline: 3px solid var(--accent-text); outline-offset: -4px; }
.gx-st-next-img { position: relative; display: block; width: 112px; height: 84px; overflow: hidden; background: var(--alt-surface); }
.gx-st-next-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.gx-st-next-img i {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, #000 28%, transparent); color: #fff;
}
.gx-st-next-img svg { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--accent); color: var(--gx-on-acc); transition: transform .3s var(--gx-ease); }
.gx-st-next:hover .gx-st-next-img svg { transform: translateX(3px); }
.gx-st-next-tx { display: grid; gap: 4px; min-width: 0; }
.gx-st-next-k { font: 700 14px/1.2 var(--font-sub); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.gx-st-next-n { font: 700 22px/1.15 var(--font-head); color: var(--text); }
.gx-st-next-n b { font: 700 15px/1.2 var(--font-sub); letter-spacing: .06em; color: var(--accent-text); margin-inline-end: 6px; }

/* centre: stacked photos */
.gx-st-rail {
  position: relative; min-width: 0; height: var(--gx-st-h);
  margin: 0; padding: 0; list-style: none; overflow: hidden;
  background: var(--surface);
  border-bottom: 4px solid var(--accent);
  clip-path: var(--gx-cut-poly);
}
.gx-st-item { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.gx-st-item.is-open { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.gx-st-item img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: scale(1.12); transition: transform 1.6s var(--gx-ease);
}
.gx-st-item.is-open img { transform: scale(1); }

/* right column: cards */
.gx-st-right { display: flex; flex-direction: column; gap: calc(var(--gx-gap) * 1.3); min-height: var(--gx-st-h); min-width: 0; }
.gx-st-card { position: relative; min-width: 0; padding: clamp(18px, 2.2vw, 28px); clip-path: var(--gx-cut-poly); }
.gx-st-pick { background: var(--accent); color: var(--gx-on-acc); display: grid; gap: 8px; align-content: start; }
.gx-st-pick p { color: inherit; }
.gx-st-pick-k { font: 700 14px/1.2 var(--font-sub); letter-spacing: .08em; text-transform: uppercase; opacity: .92; }
.gx-st-count { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.gx-st-count span { font: 700 clamp(52px, 5.4vw, 76px)/1 var(--font-head); }
.gx-st-count small { font: 700 18px/1 var(--font-sub); opacity: .92; }
.gx-st-pick-name { font: 700 clamp(22px, 2vw, 28px)/1.15 var(--font-head); }
.gx-st-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding-inline-start: 6px; }
.gx-st {
  position: relative; display: block; flex: none; width: 52px; height: 52px;
  margin: 0; margin-inline-start: -12px; padding: 0; overflow: hidden;
  border: 3px solid var(--accent); border-radius: 50%;
  background: var(--alt-surface); cursor: pointer;
  transition: transform .3s var(--gx-ease), box-shadow .3s ease;
}
.gx-st:first-child { margin-inline-start: 0; }
.gx-st img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.gx-st:hover { transform: translateY(-4px); z-index: 2; }
.gx-st:focus-visible { outline: 3px solid var(--gx-on-acc); outline-offset: 3px; z-index: 2; }
.gx-st.is-on { transform: translateY(-4px) scale(1.12); box-shadow: 0 0 0 3px var(--gx-on-acc); z-index: 3; }
.gx-st-note {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--gx-gap);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.gx-st-desc { font: 400 clamp(16px, 1.3vw, 18px)/1.6 var(--font-body); color: var(--text-muted); }
.gx-st-go {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: var(--gx-gap); border-top: 2px solid var(--gx-line);
  font: 700 20px/1.2 var(--font-head); color: var(--text); text-decoration: none;
  transition: color .25s ease;
}
.gx-st-go i {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: var(--gx-on-acc);
  transition: transform .3s var(--gx-ease);
}
.gx-st-go svg { width: 20px; height: 20px; }
.gx-st-go:hover, .gx-st-go:focus-visible { color: var(--accent-text); }
.gx-st-go:hover i, .gx-st-go:focus-visible i { transform: translateX(4px); }
.gx-st-go:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; }

/* text swap when the stage changes */
.gx-st-swap.is-swap { animation: gxStSwap .5s var(--gx-ease); }
@keyframes gxStSwap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.gx-stages .gx-ruler::after { transition: transform 1.6s var(--gx-ease) .6s; }

/* one entrance, only when JS runs */
.js .gx-stages .gx-st-left, .js .gx-stages .gx-st-right { transition: opacity .9s ease .25s, transform .9s var(--gx-ease) .25s; }
.js .gx-stages .gx-st-rail { transition: clip-path 1.1s var(--gx-ease); }
.js .gx-stages:not(.is-in) .gx-st-left { opacity: 0; transform: translateX(-28px); }
.js .gx-stages:not(.is-in) .gx-st-right { opacity: 0; transform: translateX(28px); }
.js .gx-stages:not(.is-in) .gx-st-rail { clip-path: inset(100% 0 0 0); }
.js .gx-stages:not(.is-in) .gx-ruler::after { transform: scaleX(0); }

@media (max-width: 1100px) {
  .gx-st-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .gx-st-left { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
  .gx-st-head { flex: 1 1 360px; }
  .gx-st-rail, .gx-st-right { min-height: 0; height: clamp(420px, 56vh, 520px); }
}
@media (max-width: 760px) {
  .gx-st-wrap { grid-template-columns: minmax(0, 1fr); }
  .gx-st-left { flex-direction: column; align-items: flex-start; }
  .gx-st-head { flex: none; }
  .gx-st-rail { height: clamp(320px, 56vh, 440px); }
  .gx-st-right { height: auto; }
  .js .gx-stages:not(.is-in) .gx-st-left, .js .gx-stages:not(.is-in) .gx-st-right { transform: translateY(24px); }
}
@media (prefers-reduced-motion: reduce) {
  .gx-st-item, .gx-st-item img, .gx-st, .gx-st-next, .gx-st-go i { transition: none; }
  .gx-st-swap.is-swap { animation: none; }
}

/* ==========================================================
   S5  BUILD RING
   Ten square photos stand on a ring (3D). It turns slowly by itself
   and also turns with scroll (--rot, set in gallery.js).
   ========================================================== */
.gx-reels { background: var(--alt-surface); border-top: 2px solid var(--gx-line); overflow: clip; }
.gx-rl-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--gx-gap); padding-block: var(--gx-pad); }
.gx-ring-stage {
  --tw: clamp(140px, 21vw, 300px);
  --r: calc(var(--tw) * 1.7);
  position: relative; width: 100%; height: var(--tw);
  perspective: 1500px; perspective-origin: 50% 50%;
}
.gx-ring {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateY(calc(var(--rot, 0) * 1deg));
}
.gx-ring-spin {
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
  transform-style: preserve-3d;
  animation: gx-spin 70s linear infinite;
}
.gx-ring-stage:hover .gx-ring-spin { animation-play-state: paused; }
.gx-ring-tile {
  position: absolute; top: 0; left: 50%;
  width: var(--tw); height: var(--tw); margin: 0 0 0 calc(var(--tw) / -2);
  background: var(--surface);
  transform: rotateY(calc(var(--k) * 36deg)) translateZ(var(--r));
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.gx-ring-tile img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@keyframes gx-spin { to { transform: rotateY(-360deg); } }

.gx-rl-band { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--gx-gap); }
.gx-reels .gx-h2 { font-size: clamp(34px, 5.4vw, 72px); }

@media (prefers-reduced-motion: reduce) {
  .gx-ring-spin { animation: none; }
}

/* ==========================================================
   S6  HOW WE WORK
   Left: tag, headline, line of text, photo with caption bar.
   Right: four ruled rows (icon, title + text, arrow button).
   Both columns share one height; the photo and rows stretch.
   ========================================================== */
.gx-process { border-top: 2px solid var(--gx-line); }
/* Pre-reveal slide-in offsets (translateX) must not widen the page */
.gx-process, .gx-stages { overflow-x: clip; }
.gx-pr-wrap {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: calc(var(--gx-gap) * 2.5);
  align-items: stretch;
  padding-block: var(--gx-pad);
}
.gx-pr-left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gx-gap); min-width: 0; }
.gx-pr-title, .gx-pr-lede { text-align: start; }
.gx-pr-title { font-size: clamp(28px, 3.4vw, 46px); }
.gx-pr-fig { position: relative; flex: 1; width: 100%; min-height: 280px; margin: 0; overflow: hidden; background: var(--surface); clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--gx-ease) .2s; }
.gx-pr-fig img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; transform: scale(1); transition: transform 1.8s var(--gx-ease) .2s; }
.gx-pr-plate {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-top: 2px solid var(--accent);
}
.gx-pr-plate-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--accent); color: var(--accent-text); }
.gx-pr-plate-ic svg { width: 22px; height: 22px; }
.gx-pr-plate-tx { display: grid; gap: 2px; font: 400 15px/1.45 var(--font-body); color: var(--text-muted); }
.gx-pr-plate-tx b { font: 700 18px/1.2 var(--font-head); color: var(--text); }

.gx-pr-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--gx-line); min-width: 0; }
.gx-pr-row {
  position: relative; flex: 1;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 52px; align-items: center;
  gap: var(--gx-gap) calc(var(--gx-gap) * 1.2);
  padding-block: var(--gx-gap);
  border-top: 2px solid var(--gx-line);
}
.gx-pr-row::before { content: ""; position: absolute; inset: -2px 0 auto 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--gx-ease); }
.gx-pr-row:hover::before, .gx-pr-row:focus-within::before { transform: scaleX(1); }
.gx-pr-ic { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--accent); color: var(--accent-text); transition: background-color .3s ease, color .3s ease; }
.gx-pr-ic svg { width: 26px; height: 26px; }
.gx-pr-row:hover .gx-pr-ic, .gx-pr-row:focus-within .gx-pr-ic { background: var(--btn-bg); color: var(--btn-text); }
.gx-pr-name { font: 700 clamp(20px, 1.9vw, 26px)/1.2 var(--font-head); color: var(--text); }
.gx-pr-desc { margin-top: 6px; font: 400 16px/1.55 var(--font-body); color: var(--text-muted); }
.gx-pr-go {
  display: grid; place-items: center; width: 52px; height: 52px;
  background: var(--btn-bg); color: var(--btn-text);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background-color .25s ease;
}
.gx-pr-go svg { width: 22px; height: 22px; transition: transform .3s var(--gx-ease); }
.gx-pr-go:hover, .gx-pr-go:focus-visible { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
.gx-pr-go:hover svg, .gx-pr-go:focus-visible svg { transform: translateX(4px); }
.gx-pr-go:focus-visible { outline-offset: 3px; }

/* one entrance, only when JS runs */
.gx-pr-row { transition: opacity .8s var(--gx-ease) calc(var(--i, 0) * .12s + .3s), transform .8s var(--gx-ease) calc(var(--i, 0) * .12s + .3s); }
.js .gx-process:not(.is-in) .gx-pr-row { opacity: 0; transform: translateX(28px); }
.js .gx-process:not(.is-in) .gx-pr-fig { clip-path: inset(0 100% 0 0); }
.js .gx-process:not(.is-in) .gx-pr-fig img { transform: scale(1.15); }

@media (max-width: 900px) {
  .gx-pr-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--gx-gap); }
  .gx-pr-fig { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .gx-pr-row { flex: none; }
}
@media (max-width: 560px) {
  .gx-pr-row { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .gx-pr-ic { width: 48px; height: 48px; }
  .gx-pr-go { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .gx-process:not(.is-in) .gx-pr-row { opacity: 1; transform: none; }
  .js .gx-process:not(.is-in) .gx-pr-fig { clip-path: inset(0 0 0 0); }
}

/* ==========================================================
   S7  CALL TO ACTION
   Always a dark band (site midnight / panel colours) with light text,
   so it reads the same in light and dark mode. Workshop photo sits
   behind on the right and fades into the band.
   ========================================================== */
.gx-cta {
  --cta-bg: #181a1b; --cta-fg: #f3f1ed; --cta-mute: #b9b4ac; --cta-acc: #e0783f; --cta-acc-h: #ec8f5b; --cta-line: rgba(185,180,172, .35);
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--cta-bg); color: var(--cta-fg);
  border-top: 2px solid var(--gx-line);
}
html[data-theme="dark"] .gx-cta { --cta-bg: #25292b; }
.gx-cta-bg {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -1;
  display: block; width: 62%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 66%;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 55%);
          mask-image: linear-gradient(90deg, transparent 0, #000000 55%);
  animation: gx-cta-drift 26s ease-in-out infinite alternate;
}
html[dir="rtl"] .gx-cta-bg { right: auto; left: 0; transform: scaleX(-1); animation: none; }
@keyframes gx-cta-drift { from { transform: scale(1) translateX(0); } to { transform: scale(1.08) translateX(-2%); } }
.gx-cta-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gx-gap); padding-block: var(--gx-pad); }
.gx-cta .gx-tag { color: var(--cta-fg); border-color: var(--cta-fg); }
.gx-cta .gx-tag::before, .gx-cta .gx-tag::after { background: var(--cta-acc); }
.gx-cta-title { max-width: 13em; font-size: clamp(38px, 6.2vw, 88px); line-height: 1.04; color: var(--cta-fg); text-align: start; }
.gx-cta .gx-cta-lede { max-width: 52ch; color: var(--cta-mute); text-align: start; }
.gx-cta-actions { justify-content: flex-start; }
.gx-cta .gx-btn { background: var(--cta-acc); color: #181a1b; }
.gx-cta .gx-btn:hover, .gx-cta .gx-btn:focus-visible { background: var(--cta-acc-h); color: #181a1b; }
.gx-cta .gx-link { color: var(--cta-fg); border-bottom-color: var(--cta-acc); }
.gx-cta .gx-link:hover, .gx-cta .gx-link:focus-visible { color: var(--cta-acc-h); }
.gx-cta :focus-visible { outline-color: var(--cta-acc-h); }

.gx-cta-list {
  position: relative; width: 100%; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gx-gap) calc(var(--gx-gap) * 1.5);
  padding-top: var(--gx-gap);
  border-top: 2px solid var(--cta-line);
}
.gx-cta-list::before { content: ""; position: absolute; inset: -2px 0 auto 0; height: 2px; background: var(--cta-acc); transform-origin: left center; transition: transform 1.4s var(--gx-ease) .5s; }
.gx-cta-item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gx-cta-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--cta-acc); color: var(--cta-acc); }
.gx-cta-ic svg { width: 22px; height: 22px; }
.gx-cta-tx { display: grid; gap: 2px; min-width: 0; font: 400 17px/1.35 var(--font-body); color: var(--cta-fg); overflow-wrap: anywhere; }
.gx-cta-tx a { color: var(--cta-fg); text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; }
.gx-cta-tx a:hover, .gx-cta-tx a:focus-visible { color: var(--cta-acc-h); border-bottom-color: var(--cta-acc-h); }
.gx-cta-lb { font: 700 15px/1.3 var(--font-sub); letter-spacing: .06em; text-transform: uppercase; color: var(--cta-acc); }

/* one entrance, only when JS runs */
.gx-cta-wrap > * { transition: opacity .8s var(--gx-ease) calc(var(--d, 0s)), transform .8s var(--gx-ease) calc(var(--d, 0s)); }
.gx-cta-tag { --d: .05s; } .gx-cta-title { --d: .15s; } .gx-cta-lede { --d: .3s; } .gx-cta-actions { --d: .4s; } .gx-cta-list { --d: .5s; }
.js .gx-cta:not(.is-in) .gx-cta-wrap > * { opacity: 0; transform: translateY(18px); }
.js .gx-cta:not(.is-in) .gx-cta-list::before { transform: scaleX(0); }
html[dir="rtl"] .gx-cta-list::before { transform-origin: right center; }

@media (max-width: 1024px) { .gx-cta-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gx-cta-bg { width: 80%; } }
@media (max-width: 640px) {
  .gx-cta-list { grid-template-columns: minmax(0, 1fr); }
  .gx-cta-bg { width: 100%; opacity: .32; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-cta-bg { animation: none; }
  .js .gx-cta:not(.is-in) .gx-cta-wrap > * { opacity: 1; transform: none; }
}

/* ---------- tablet / mobile ---------- */
@media (max-width: 640px) {
  .gx-actions { flex-direction: column; width: 100%; }
  .gx-btn { width: 100%; }
  .gx-ba { width: 100%; min-width: 0; aspect-ratio: 4 / 3; }
  .gx-ba-chip { top: 12px; padding: 5px 12px; }
  .gx-ba-chip--l { left: 12px; }
  .gx-ba-chip--r { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .gx *, .gx *::before, .gx *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================
   Gallery / Section 3: Browse by service (panel: copy | 2 x 2 tiles)
   One spacing step (--gxb-pad) = panel padding = gap between copy and tiles = gap between tiles.
   ========================================================== */
.gxb { --gxb-pad: clamp(24px, 3.6vw, 52px); padding-block: var(--gx-pad); background: var(--alt-surface); border-top: 2px solid var(--gx-line); }
.gxb__panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--gxb-pad); align-items: center; padding: var(--gxb-pad); overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; }
.gxb__panel::before { content: none; }
@keyframes gxbDrift { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, -2%, 0) scale(1.06); } }
.gxb__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gx-gap); min-width: 0; }
.page-main--gx .gxb__title { margin: 0; font: 700 clamp(30px, 3.6vw, 48px)/1.1 var(--font-head); letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.page-main--gx .gxb__lede { max-width: 44ch; font: 400 17px/1.6 var(--font-body); color: var(--text-muted); }
.gxb__btn { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 6px 6px 28px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-text); font: 700 16px/1.2 var(--font-sub); text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.gxb__btn i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--btn-text); color: var(--btn-bg); transition: transform .4s var(--gx-ease); }
.gxb__btn i svg { width: 20px; height: 20px; }
.gxb__btn:hover, .gxb__btn:focus-visible { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
.gxb__btn:hover i { transform: translateX(4px) rotate(-45deg); }
.gxb__btn:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; }
.gxb__photo { width: 100%; min-width: 0; aspect-ratio: 16 / 8; margin: 4px 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.gxb__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.gxb__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gxb-pad); min-width: 0; }
.gxb__card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; justify-content: center; gap: var(--gx-gap); aspect-ratio: 1 / 1; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: center; text-decoration: none; box-shadow: var(--shadow); transition: transform .4s var(--gx-ease), border-color .3s ease, box-shadow .4s ease; }
.gxb__ico { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--control-border); border-radius: 50%; color: var(--accent-text); transition: background-color .3s ease, color .3s ease, transform .5s var(--gx-ease); }
.gxb__ico svg { width: 24px; height: 24px; }
.gxb__lbl { font: 700 clamp(16px, 1.5vw, 19px)/1.25 var(--font-sub); }
.gxb__card:hover, .gxb__card:focus-visible { transform: translateY(-6px); border-color: var(--control-border); }
.gxb__card:hover .gxb__ico, .gxb__card:focus-visible .gxb__ico { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-text); transform: rotate(-12deg) scale(1.08); }
.gxb__card:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
html[dir="rtl"] .gxb__btn { padding: 6px 28px 6px 6px; }
html[dir="rtl"] .gxb__btn i svg { transform: scaleX(-1); }

/* entrance */
.gxb-js .gxb__panel { clip-path: inset(0 0 100% 0 round 18px); transition: clip-path 1s var(--gx-ease); }
.gxb-js.is-in .gxb__panel { clip-path: inset(0 0 0 0 round 18px); }
.gxb-js .gxb__copy > *, .gxb-js .gxb__card { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--gx-ease), transform .7s var(--gx-ease), border-color .3s ease, box-shadow .4s ease; }
.gxb-js .gxb__copy > :nth-child(1) { transition-delay: .35s; } .gxb-js .gxb__copy > :nth-child(2) { transition-delay: .45s; } .gxb-js .gxb__copy > :nth-child(3) { transition-delay: .55s; }
.gxb-js .gxb__card { transition-delay: calc(.45s + var(--k) * .12s), calc(.45s + var(--k) * .12s), 0s, 0s; }
.gxb-js.is-in .gxb__copy > *, .gxb-js.is-in .gxb__card { opacity: 1; transform: none; }
.gxb-js.is-in .gxb__card:hover, .gxb-js.is-in .gxb__card:focus-visible { transform: translateY(-6px); transition-delay: 0s; }

@media (max-width: 900px) {
  .gxb__panel { grid-template-columns: minmax(0, 1fr); }
  .gxb__lede { max-width: none; }
}
@media (max-width: 420px) {
  .gxb__card { min-height: 0; aspect-ratio: 1 / 1; gap: 8px; padding: 8px; }
  .gxb__ico { width: 36px; height: 36px; }
  .gxb__lbl { font-size: 14px; line-height: 1.15; }
}
@media (prefers-reduced-motion: reduce) {
  .gxb__panel::before { animation: none; }
  .gxb-js .gxb__panel, .gxb-js .gxb__copy > *, .gxb-js .gxb__card { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}


/* ===== Merged from service-rail.css ===== */
/* ==========================================================
   SILVARN - Home 2 / Section 2: Service Rail
   Pinned horizontal rail. Frame sticks under the navbar and vertical
   scroll slides one single rail of stations sideways. One spacing unit
   (--sr-gap) is used for every gap and the top / bottom padding.
   Uses theme tokens only, so light + dark both work.
   ========================================================== */
.sr {
  --sr-gap: clamp(14px, 2.4vh, 24px);
  --sr-pad: clamp(20px, 3.6vh, 36px);
  --sr-gutter: clamp(18px, 4.2vw, 64px);
  --sr-end: calc(var(--sr-gutter) + 64px);   /* keeps clear of the back-to-top button */
  --sr-w: clamp(280px, 40vw, 600px);          /* station width */
  --sr-intro-w: clamp(300px, 44vw, 660px);
  --sr-ink: var(--text);
  --sr-muted: var(--text-muted);
  --sr-hi: var(--accent-text);
  --sr-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --sr-line-soft: color-mix(in srgb, var(--accent) 24%, transparent);
  --sr-btn-bg: var(--btn-bg);
  --sr-btn-ink: var(--btn-text);
  position: relative;
  background:
    radial-gradient(ellipse at 18% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 46%),
    var(--bg);
  color: var(--sr-ink);
}

/* ---------- frame (pinned) ---------- */
.sr-frame {
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 520px;
  padding-block: var(--sr-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sr-gap);
  overflow: clip;
}
.sr--pinned { height: var(--sr-scroll-h, auto); }
.sr--pinned .sr-frame { position: sticky; top: var(--header-h); }

.sr-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;                  /* fallback: native swipe / scroll */
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.sr--pinned .sr-viewport { overflow: clip; }

/* ---------- rail: 3 shared rows so every panel lines up exactly ---------- */
.sr-track {
  direction: ltr;
  display: grid;
  grid-template-columns: var(--sr-intro-w) repeat(4, var(--sr-w));
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: var(--sr-gap);
  width: max-content;
  height: 100%;
  padding-inline: var(--sr-gutter);
  position: relative;
  will-change: transform;
}
.sr-panel {
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: var(--sr-gap);
  min-width: 0;
  scroll-snap-align: start;
  scroll-margin-inline-start: var(--sr-gutter);
}
html[dir="rtl"] .sr-panel { direction: rtl; }

/* ruler: number + line, connects the stations like a timeline */
.sr .sr-ruler {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-height: 24px;
  font: 700 14px/1.4 var(--font-sub);
  letter-spacing: .12em;
  color: var(--sr-hi);
  white-space: nowrap;
}
.sr-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--sr-hi);
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease;
}
.sr-ruler b {
  flex: 1 1 auto;
  height: 1px;
  background: var(--sr-line);
  transform-origin: left center;
}
.sr-panel.is-active .sr-dot {
  background: var(--sr-hi);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* media */
.sr-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--sr-line);
  background: var(--surface);
}
.sr-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translate3d(var(--sr-shift, 0px), 0, 0) scale(1.14);
  transition: filter .5s ease;
  filter: saturate(.82) brightness(.94);
}
.sr-panel.is-active .sr-media img { filter: none; }

/* caption */
.sr-caption { min-width: 0; }
.sr-caption h3 {
  font: 400 clamp(22px, 2.2vw, 32px)/1.2 var(--font-head);
  color: var(--sr-ink);
  margin: 0 0 8px;
}
.sr .sr-caption p {
  margin: 0;
  max-width: 46ch;
  font: 400 clamp(15px, 1.1vw, 17px)/1.65 var(--font-body);
  color: var(--sr-muted);
}

/* intro panel */
.sr-intro-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(16px, 2vh, 24px); min-height: 0; }
.sr-panel--intro h2 {
  font: 400 clamp(34px, min(6.6vw, 10.2vh), 108px)/1.06 var(--font-head);
  letter-spacing: -.025em;
  color: var(--sr-ink);
  margin: 0;
}
.sr-panel--intro h2 em { font-style: normal; color: var(--sr-hi); }
.sr-intro-labels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.sr-intro-labels span { padding: 7px 12px; border: 1px solid var(--sr-line); color: var(--sr-hi); font: 700 12px/1.3 var(--font-sub); letter-spacing: .08em; text-transform: uppercase;margin-top:25px; }

/* ---------- bottom bar: counter + progress rail + CTA ---------- */
.sr-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding-inline: var(--sr-gutter) var(--sr-end);
  min-height: 48px;
}
.sr-count { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 700 14px/1.4 var(--font-sub); letter-spacing: .1em; color: var(--sr-muted); }
.sr-count b { font: 400 clamp(26px, 2.4vw, 34px)/1 var(--font-head); color: var(--sr-hi); letter-spacing: 0; }
.sr-count em { font-style: normal; color: var(--sr-ink); text-transform: uppercase; width: 24ch; white-space: nowrap; }

.sr-rail { position: relative; height: 24px; display: flex; align-items: center; justify-content: space-between; }
.sr-rail::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--sr-line-soft); }
.sr-fill { position: absolute; inset-inline-start: 0; top: 50%; height: 2px; margin-top: -1px; width: 0; background: var(--sr-hi); }
.sr-tick {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.sr-tick::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--sr-line);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.sr-tick.is-done::before { border-color: var(--sr-hi); }
.sr-tick.is-current::before { background: var(--sr-hi); border-color: var(--sr-hi); transform: scale(1.25); }
.sr-tick:focus-visible { outline: 2px solid var(--sr-hi); outline-offset: 2px; border-radius: 50%; }

.sr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--sr-btn-bg);
  color: var(--sr-btn-ink);
  border: 1px solid var(--sr-btn-bg);
  font: 700 15px/1.2 var(--font-sub);
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.sr-cta span { font-size: 20px; line-height: 1; }
.sr-cta:hover { transform: translateY(-2px); background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-text); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.sr-cta:focus-visible { outline: 2px solid var(--sr-hi); outline-offset: 3px; }

/* fallback (reduced motion / short screens): bar keeps only the CTA */
.sr:not(.sr--pinned) .sr-count,
.sr:not(.sr--pinned) .sr-rail { display: none; }
.sr:not(.sr--pinned) .sr-bar { grid-template-columns: 1fr; justify-items: end; }


/* ---------- tablet / mobile ---------- */
@media (max-width: 760px) {
  .sr {
    --sr-w: 78vw;
    --sr-intro-w: 84vw;
    --sr-gutter: 22px;
  }
  .sr-track { column-gap: clamp(32px, 9vw, 40px); }
  .sr-panel:not(.sr-panel--intro) .sr-media,
  .sr-panel:not(.sr-panel--intro) .sr-caption { margin-inline: 8px; }
  .sr .sr-ruler { width: 100%; min-width: 0; overflow: hidden; }
  .sr .sr-ruler span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sr .sr-ruler b { min-width: 8px; }
  .sr-panel:not(.sr-panel--intro) .sr-caption { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .sr-panel:not(.sr-panel--intro) .sr-caption p { max-width: 100%; overflow-wrap: anywhere; }
  .sr .sr-caption .sr-chips { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
  .sr-panel--intro .sr-intro-body { justify-content: flex-start; padding-block-start: clamp(44px, 9vh, 64px); }
  .sr-panel--intro h2 { font-size: clamp(32px, min(11vw, 8.6vh), 52px); }
  .sr-caption h3 { font-size: 22px; }
  .sr-caption p { font-size: 15px; line-height: 1.55; }
  .sr-bar { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .sr-count { display: none; }
  .sr-rail { width: 100%; }
  .sr-cta { justify-self: end; padding: 12px 18px; }
  .sr-ruler { letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .sr *, .sr *::before, .sr *::after { animation: none !important; transition: none !important; }
}

.sr .sr-caption .sr-chips { margin-top: 10px; font: 700 14px/1.5 var(--font-sub); letter-spacing: .03em; color: var(--sr-hi); }


/* ===== Merged from status.css ===== */
/* 404 and coming-soon page details */
.sx-code { margin: 4px 0 -10px; color: color-mix(in srgb, var(--accent) 22%, transparent); font: 700 clamp(72px, 11vw, 140px)/.82 var(--font-head); letter-spacing: -.05em; }
.sx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.sx-btn2 { min-height: 48px; padding: 10px 18px; border: 1px solid var(--control-border); border-radius: var(--radius); background: transparent; color: var(--text); font: 700 15px/1.2 var(--font-sub); cursor: pointer; }
.sx-btn2:hover { background: var(--alt-surface); }
.sx-links { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.sx-links-k { margin: 0 0 12px; color: var(--text-muted); font: 700 13px/1.4 var(--font-sub); letter-spacing: .08em; text-transform: uppercase; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-chips a { display: inline-flex; min-height: 36px; align-items: center; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface); font: 600 13px/1.2 var(--font-sub); text-decoration: none; }
.sx-chips a:hover, .sx-chips a:focus-visible { border-color: var(--accent); color: var(--accent-text); }
.sx-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 24px 0; padding: 0; list-style: none; }
.sx-count li { display: grid; justify-items: center; gap: 4px; padding: 13px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--alt-surface); }
.sx-count b { color: var(--accent-text); font: 700 clamp(23px, 3vw, 34px)/1 var(--font-head); font-variant-numeric: tabular-nums; }
.sx-count span { color: var(--text-muted); font: 600 12px/1.2 var(--font-sub); text-transform: uppercase; letter-spacing: .06em; }
.sx-note { margin: 0 0 12px; color: var(--text-muted); font: 400 14px/1.5 var(--font-body); }
.sx-notify { display: grid; gap: 10px; }
.sx-notify-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.sx-notify-row .au-field { min-width: 0; }
.sx-notify-row .au-submit { width: auto; min-width: 112px; }
.sx-back { margin-top: 20px; }
.sx-count.is-open { border-color: var(--accent); }
@media (max-width: 520px) { .sx-count { gap: 6px; } .sx-count li { padding: 11px 4px; } .sx-count span { font-size: 10px; } .sx-notify-row { grid-template-columns: minmax(0, 1fr); } .sx-notify-row .au-submit { width: 100%; } .sx-actions > * { flex: 1 1 100%; text-align: center; } }
/* Simplified header for account and status pages */
.utility-page .nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
.utility-page .primary-nav,
.utility-page .menu-toggle { display: none !important; }


/* Keep login and signup field labels left aligned inside centered cards */
.account-page .au-form .au-field > label { align-self: flex-start; text-align: left; }