:root {
  --bg: #0d0d0d;
  --bg-raised: #161616;
  --bg-card: #1a1a1a;
  --accent: #c9a84c;
  --accent-dim: #9c8138;
  --text: #edeae2;
  --text-muted: #9b968a;
  --border: #2a2a2a;
  --accent-hover: #e0c06a;
  --on-accent: #0d0d0d;
  --header-bg: rgba(13, 13, 13, 0.85);
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --max: 1180px;
  --radius: 12px;
  --radius-sm: 8px;
  --accent-soft: rgba(201, 168, 76, 0.12);
  --grid-line: rgba(237, 234, 226, 0.05);
  --shadow-menu: 0 14px 34px rgba(0, 0, 0, 0.28);
  --gutter: clamp(20px, 5vw, 32px);
}
/* never allow sideways scroll; clip (not hidden) so the sticky header keeps working */
html,
body {
  overflow-x: clip;
}
/* light theme (toggled via [data-theme="light"] on <html>) */
html[data-theme="light"] {
  --bg: #f4f1ea;
  --bg-raised: #eae6dc;
  --bg-card: #ffffff;
  --accent: #7d5f16;
  --accent-dim: #b89a4e;
  --accent-hover: #735713;
  --on-accent: #ffffff;
  --text: #1b1a16;
  --text-muted: #5c584e;
  --border: #dbd6c9;
  --header-bg: rgba(244, 241, 234, 0.85);
  --accent-soft: rgba(125, 95, 22, 0.1);
  --grid-line: rgba(27, 26, 22, 0.06);
  --shadow-menu: 0 14px 34px rgba(27, 26, 22, 0.16);
}
body {
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  /* responsive gutter: 20px floor on small phones up to 32px, and never less
     than the device safe-area (notches / rounded corners in landscape) */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
section {
  padding: 96px 0;
}
@media (max-width: 640px) {
  section {
    padding: 72px 0;
  }
}
.muted {
  color: var(--text-muted);
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 12px;
  margin-top: -2px;
}

/* nav */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 20px;
}
.nav .logo {
  margin-right: auto;
}
.theme-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  flex: none;
}
.theme-toggle:hover {
  color: var(--accent);
}
.nav-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex: none;
}
@media (max-width: 640px) {
  .nav {
    gap: 12px;
  }
  .logo-type {
    display: none;
  }
  .logo-mark {
    width: 34px;
    height: 34px;
  }
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  color: var(--text);
}
.logo-mark {
  color: var(--accent);
  flex: none;
  width: 42px;
  height: 42px;
}
.logo-type span {
  color: var(--accent);
}
.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.nav-links a:not(.nav-cta) {
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after {
  transform: scaleX(1);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}
.nav-cta {
  border: 1px solid var(--accent);
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  color: var(--accent) !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover {
  background: var(--accent);
  color: var(--on-accent) !important;
}
/* Studio dropdown */
.nav-drop {
  position: relative;
}
.nav-drop-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-drop-btn:hover,
.nav-drop-btn.active {
  color: var(--text);
}
.nav-drop-btn .caret {
  font-size: 0.7em;
  transition: transform 0.15s;
}
.nav-drop.open .caret {
  transform: rotate(180deg);
}
.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 170px;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  box-shadow: var(--shadow-menu);
}
.nav-drop-menu::before {
  /* invisible hover bridge over the gap */
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-drop.open .nav-drop-menu {
  display: block;
}
.nav-drop-menu a {
  display: block;
  padding: 8px 14px;
  border-radius: 6px;
  white-space: nowrap;
}
.nav-drop-menu a:hover {
  background: var(--accent-soft);
}
.burger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.6rem;
  cursor: pointer;
}
@media (max-width: 840px) {
  .burger {
    display: block;
  }
  .nav-sep {
    display: none;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    padding: 24px;
    border-bottom: 1px solid var(--border);
    gap: 20px;
  }
  .nav-links.open {
    display: flex;
  }
  /* flatten the dropdown inside the mobile menu */
  .nav-drop-btn {
    display: none;
  }
  .nav-drop-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: static;
    transform: none;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    min-width: 0;
    text-align: center;
  }
  .nav-drop-menu::before {
    display: none;
  }
  /* keep the flattened submenu a flex column even when JS toggles .open —
     matches the desktop open-rule specificity but wins by later source order,
     so gap:20px is never dropped and the items can't jump on tap */
  .nav-drop.open .nav-drop-menu {
    display: flex;
  }
  /* comfortable 44px tap targets for the mobile menu */
  .nav-links a,
  .nav-drop-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
  }
  .burger {
    min-width: 44px;
    min-height: 44px;
  }
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* comfortable tap target */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
.btn-gold {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-gold:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  transform: translateY(-2px);
}
.btn-ghost {
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}
.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 2rem;
}
/* mobile: center interactive rows (buttons, CTAs, portfolio filters) so nothing
   sits awkwardly bunched at the left edge */
@media (max-width: 640px) {
  .btn-row {
    justify-content: center;
  }
}

/* hero — flat editorial split: copy left, framed image carousel right */
.hero {
  position: relative;
  padding: 104px 0 88px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero::before {
  /* faint engineering grid behind the whole hero */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
/* diagonal accent slab — carries the text zone, render breathes on the right.
   Layering inside .hero (bottom -> top): base bg -> ::before grid ->
   ::after slab -> .wrap (copy + image, z-index:1). ::after is a sibling of the
   grid pseudo in the same paint bucket, so tree order puts the slab ABOVE the
   grid; .wrap at z-index:1 keeps copy + image ABOVE the slab. No negative
   z-index, nothing fights the .wrap stacking context. */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8%;
  width: 54%; /* diagonal edge lands ~48% — inside the gutter, clear of the image */
  z-index: 0;
  transform: skewX(-7deg); /* shallow editorial lean */
  pointer-events: none;
  /* fill is barely there so the engineering grid still reads THROUGH the gold */
  background: linear-gradient(90deg, transparent 42%, var(--accent-soft) 100%);
  /* the one confident line — a real hairline stays crisp at any width and
     recolours per theme via the token (no baked-in gradient stop = no banding) */
  border-right: 1px solid var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::after {
    animation: heroSlabIn 0.6s ease-out both;
  }
  @keyframes heroSlabIn {
    from {
      opacity: 0;
      transform: skewX(-7deg) translateX(-14px);
    }
    to {
      opacity: 1;
      transform: skewX(-7deg) translateX(0);
    }
  }
}
.hero .wrap {
  position: relative;
  z-index: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
}
.hero-media {
  position: relative;
}
.hero-bg {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: url("../assets/img/hero/hero_mrhrj1xr6as.webp") center/cover
    no-repeat #101010;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero-slide.active {
  opacity: 1;
}
.hero p.sub {
  max-width: 520px;
  margin-top: 1.4rem;
  font-size: 1.12rem;
  color: var(--text-muted);
}
.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  gap: 10px;
  justify-content: center;
}
@media (max-width: 900px) {
  .hero {
    padding: 64px 0 60px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* stacked layout: drop the diagonal so it can never cross the headline or
     sub-text; the eyebrow's gold tick carries the accent on small screens */
  .hero::after {
    display: none;
  }
}
.hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(237, 234, 226, 0.35);
  transition:
    background 0.2s,
    transform 0.2s;
}
.hero-dots button.active {
  background: var(--accent);
  transform: scale(1.25);
}

/* cards & grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 840px) {
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 32px;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.card:hover::before {
  transform: scaleX(1);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-dim);
}
.card h3 {
  color: var(--text);
}
/* service cards with a CTA link get the same "keyline label" footer as the
   project cards — centred uppercase label flanked by hairline rules */
.card:has(.link) {
  display: flex;
  flex-direction: column;
}
.card .link {
  margin: 1.6rem -32px -34px; /* break out of the .card 34/32 padding to span it */
  margin-top: auto; /* pin the footer to the card bottom, aligned across the row */
  padding: 15px 32px;
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.card .link .cl-rule {
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background: var(--border);
  transition: background 0.18s ease, width 0.28s ease;
}
.card:hover .link {
  background: var(--accent-soft);
}
.card:hover .link .cl-rule {
  background: var(--accent);
  width: 40px;
}
@media (prefers-reduced-motion: reduce) {
  .card .link .cl-rule {
    transition: background 0.18s ease;
  }
  .card:hover .link .cl-rule {
    width: 28px;
  }
}

/* differentiator strip */
.strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 40px 0;
}
.strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.strip .wrap > div:not(:first-child) {
  border-left: 1px solid var(--border);
}
.strip b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin-bottom: 0.3rem;
  color: var(--accent);
}
.strip span {
  font-size: 0.88rem;
  color: var(--text-muted);
}
@media (max-width: 840px) {
  .strip .wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .strip .wrap > div:nth-child(odd) {
    border-left: none;
  }
}

/* portfolio
   Card thumbnails sit in a 1:1 (square) box and are shown in full
   (object-fit:contain), so nothing is cropped; non-square images get a little
   background padding. Square thumbnails (ideal 1200x1200) fill edge-to-edge.
   Hero images: 16:9 (ideal 2400x1350). Project-page images: any ratio,
   ~1600px long edge. All WebP. */
.filter-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.6rem 0 0.6rem;
}
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 0.4rem;
}
.filters button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filters button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.filters button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
/* compact mobile filter dropdowns (built by JS, shown only ≤640px) */
.filters-mobile {
  display: none;
}
.fm-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fm-field > span {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fm-field select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 0 40px 0 16px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.fm-field select:focus {
  outline: none;
  border-color: var(--accent);
}
/* gold chevron caret drawn over the select's right edge (theme-aware) */
.fm-field::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 19px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  pointer-events: none;
}
/* ≤640px: swap the chip rows for the compact dropdowns. This block MUST come
   after the base .filters / .filters-mobile rules above, because media queries
   add no specificity — a later base rule would otherwise win and undo the swap. */
@media (max-width: 640px) {
  .filter-label,
  .filters {
    display: none;
  }
  .filters-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 1.6rem 0 0.4rem;
  }
}
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .pgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .pgrid {
    grid-template-columns: 1fr;
  }
}
.pcard {
  position: relative; /* anchor for the stretched card link */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}
.pcard:hover {
  border-color: var(--accent-dim);
}
.pcard .thumb {
  aspect-ratio: 1/1;
  background: var(--bg-raised);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.pcard:hover .thumb img {
  transform: scale(1.04);
}
/* tag banner — centred gold-tint strip directly under the image */
.pcard-banner {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
}
.pcard .body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* "View project" footer — a divider-topped, full-width clickable zone */
/* "Keyline label" footer: a centred uppercase micro-label flanked by hairline
   rules that turn gold and extend on hover — a technical dimension-label motif */
.pcard .card-link {
  margin: 18px -22px -22px; /* break out of the body padding to span the card */
  margin-top: auto; /* pin to the bottom so all cards' footers align */
  padding: 14px 22px;
  min-height: 44px; /* tap target */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.pcard .card-link .cl-rule {
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background: var(--border);
  transition: background 0.18s ease, width 0.28s ease;
}
.pcard:hover .card-link {
  background: var(--accent-soft);
}
.pcard:hover .card-link .cl-rule {
  background: var(--accent);
  width: 40px;
}
@media (prefers-reduced-motion: reduce) {
  .pcard .card-link .cl-rule {
    transition: background 0.18s ease;
  }
  .pcard:hover .card-link .cl-rule {
    width: 28px; /* colour only, no extend */
  }
}
/* stretched link: makes the WHOLE card clickable while keeping the anchor
   as the accessible target */
.pcard .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid transparent;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 0.8rem;
}
.pcard p {
  font-size: 0.93rem;
  color: var(--text-muted);
}
.pcard h3 {
  font-size: 1.08rem;
}
.ph-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: repeating-linear-gradient(
    45deg,
    #161616,
    #161616 12px,
    #1a1a1a 12px,
    #1a1a1a 24px
  );
}

/* tiers */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .tiers {
    grid-template-columns: 1fr;
  }
}
.tier {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 34px;
  display: flex;
  flex-direction: column;
}
.tier.feature {
  border: 1px solid var(--accent);
}
.tier .tag {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.tier .price {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 700;
  margin: 0.6rem 0 1.2rem;
}
.tier .price small {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  display: block;
  letter-spacing: 0;
}
.tier ul {
  list-style: none;
  margin: 0 0 1.4rem;
}
.tier li {
  padding: 6px 0 6px 22px;
  position: relative;
  font-size: 0.93rem;
  color: var(--text-muted);
}
.tier li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.tier .btn {
  margin-top: auto;
  text-align: center;
}
.tier h4 {
  font-family: var(--font-display);
  font-size: 0.92rem;
  margin: 0.6rem 0 0.3rem;
  color: var(--text);
}

/* process */
.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
}
.step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.step:last-child {
  border-bottom: none;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}
.step p {
  color: var(--text-muted);
  font-size: 0.97rem;
  margin-top: 0.3rem;
}

/* forms */
form {
  display: grid;
  gap: 18px;
  max-width: 680px;
}
label {
  font-size: 0.88rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
input,
select,
textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* project page */
.proj-hero {
  /* vertical only — must NOT reset the .wrap left/right gutter (a `padding`
     shorthand here would zero it and make project pages lose the site margin) */
  padding-top: 70px;
  padding-bottom: 30px;
}
.proj-imgs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 2.2rem 0;
}
.proj-imgs img {
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
}
.proj-imgs figcaption {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 8px;
}
@media (max-width: 760px) {
  .proj-imgs {
    grid-template-columns: 1fr;
  }
}
.proj-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 2.5rem;
}
@media (max-width: 760px) {
  .proj-meta {
    grid-template-columns: 1fr;
  }
}
.proj-meta ul {
  list-style: none;
}
.proj-meta li {
  padding: 5px 0 5px 22px;
  position: relative;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.proj-meta li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.callout {
  background: var(--bg-raised);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 22px 26px;
  margin: 2rem 0;
  color: var(--text-muted);
}

/* cta banner + footer */
.cta-banner {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
footer {
  padding: 52px 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
footer nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
footer a {
  color: var(--text-muted);
}
footer a:hover {
  color: var(--accent);
}
.note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* about — founder block */
.founder {
  display: grid;
  /* bio left, photo right — the bio column shares the same left edge and measure
     as the studio-intro text above it, giving the page one continuous reading spine */
  grid-template-columns: 1fr 300px;
  gap: 44px;
  align-items: start;
  margin-top: 1.4rem;
}
.founder figure {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.founder .bio {
  grid-column: 1;
  grid-row: 1;
}
@media (max-width: 760px) {
  .founder {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  /* stack in DOM order on phones: portrait first, then bio */
  .founder figure,
  .founder .bio {
    grid-column: auto;
    grid-row: auto;
  }
}
.founder .photo {
  aspect-ratio: 3/4;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  background: repeating-linear-gradient(
    45deg,
    #161616,
    #161616 12px,
    #1a1a1a 12px,
    #1a1a1a 24px
  );
}
/* once a real photo is in, drop the placeholder padding/stripes/border so the
   image sits flush with only its own rounded corners (no black frame) */
.founder .photo:has(img) {
  padding: 0;
  border: none;
  background: none;
}
.founder .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.founder figcaption {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}
.founder .bio p {
  color: var(--text-muted);
}
.founder .bio p + p {
  margin-top: 1.4rem;
}

/* interaction + motion polish */
.pcard,
.tier {
  transition:
    border-color 0.15s ease,
    transform 0.25s ease;
}
.pcard:hover {
  transform: translateY(-4px);
}
.tier:hover {
  transform: translateY(-4px);
  border-color: var(--accent-dim);
}
.tier.feature:hover {
  border-color: var(--accent);
}
.card {
  transition:
    border-color 0.15s ease,
    transform 0.25s ease;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.7s ease,
      transform 0.7s ease;
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* ---- project image carousel ---- */
/* carousel: a centred band; the previous/next slides peek in on each side.
   Adjust --carousel-max (band width) and --carousel-slide (active-slide width,
   so 80% leaves ~10% of each neighbour showing). */
.carousel {
  position: relative;
  overflow: hidden;
  margin: 2.4rem auto;
  max-width: var(--carousel-max, 1200px);
  --carousel-slide: 50%;
}
.carousel-track {
  display: flex;
  /* top-align, not center: a caption that wraps to two lines makes its figure
     taller, and centering would ride that slide's image upward relative to its
     neighbours. Pinning to the top keeps every image on the same line no matter
     how long the caption is. */
  align-items: flex-start;
  transition: transform 0.4s ease;
}
.carousel-track figure {
  flex: 0 0 var(--carousel-slide);
  margin: 0;
  padding: 0 8px;
  text-align: center;
}
.carousel-track img {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-raised);
}
.carousel-track figcaption {
  font-size: 0.85rem;
  color: var(--text-muted);
  /* extra bottom clearance keeps the overlaid dots out of the caption text */
  padding: 10px 16px 34px;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(13, 13, 13, 0.5);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.carousel-btn.prev {
  left: 12px;
}
.carousel-btn.next {
  right: 12px;
}
.carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  opacity: 0.45;
  cursor: pointer;
  padding: 0;
}
.carousel-dots button.active {
  opacity: 1;
  background: var(--accent);
}

/* ---- 3D model / turntable viewer ---- */
.proj-viewer {
  position: relative;
  margin: 2.2rem 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-raised);
  aspect-ratio: 16/10;
}
.proj-viewer model-viewer,
.turntable {
  width: 100%;
  height: 100%;
}
.turntable {
  cursor: grab;
  touch-action: pan-y;
}
.turntable:active {
  cursor: grabbing;
}
.turntable img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.viewer-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-card);
}
.viewer-fallback .vf-badge {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  padding: 4px 11px;
  font-size: 0.78rem;
}
.viewer-hint {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--header-bg);
  padding: 3px 9px;
  border-radius: 3px;
  pointer-events: none;
}
.viewer-fallback.tt-fallback {
  display: block;
  padding: 0;
  background: var(--bg-raised);
}
.viewer-cap {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}
@media (max-width: 760px) {
  .proj-viewer {
    aspect-ratio: 4/3;
  }
}

/* insights + articles */
.article {
  max-width: 730px;
}
.article .meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0.5rem 0 2.2rem;
}
.article h2 {
  margin-top: 2.4rem;
  font-size: 1.45rem;
}
.article p {
  margin-bottom: 1.1rem;
  line-height: 1.7;
}
.article p strong {
  color: var(--text);
}
.article ul {
  list-style: none;
  margin: 0.2rem 0 1.4rem;
}
.article ul li {
  padding: 6px 0 6px 22px;
  position: relative;
  color: var(--text-muted);
}
.article ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 2.4rem;
}
@media (max-width: 760px) {
  .insight-grid {
    grid-template-columns: 1fr;
  }
}
.insight-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition:
    border-color 0.15s ease,
    transform 0.25s ease;
}
.insight-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-4px);
}
.insight-card .meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
  letter-spacing: 0.04em;
}
.insight-card h3 {
  font-size: 1.18rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.insight-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}

/* ---- featured projects carousel (home) ---- */
.fcar {
  position: relative;
}
.fcar-viewport {
  overflow: hidden;
}
.fcar-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s ease;
}
.fcar .pcard {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
}
@media (max-width: 900px) {
  .fcar .pcard {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}
@media (max-width: 600px) {
  .fcar .pcard {
    flex: 0 0 100%;
  }
}
.fcar-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.fcar-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fcar-btn.prev {
  left: -14px;
}
.fcar-btn.next {
  right: -14px;
}
.fcar-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.fcar-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.fcar-dots button.active {
  background: var(--accent);
}

/* ---- unified media modules (project pages) ---- */
.media-mod {
  margin: 1.8rem 0;
}
.media-mod.media-sm {
  max-width: 420px;
}
.media-mod.media-md {
  max-width: 760px;
}
.media-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 0.7rem;
  max-width: 760px;
}

/* ---- a11y & controls (audit Q1-Q9) ---- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 18px;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}
.carousel-pause {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.55rem;
  line-height: 1;
  cursor: pointer;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.carousel-pause:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.turntable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.media-mod.media-center {
  margin-left: auto;
  margin-right: auto;
}
.media-mod.media-right {
  margin-left: auto;
}

/* ---- per-module display controls (media modules) ---- */
.media-mod .proj-imgs {
  grid-template-columns: repeat(var(--mod-cols, 2), 1fr);
}
@media (max-width: 760px) {
  .media-mod .proj-imgs {
    grid-template-columns: 1fr;
  }
}
.media-mod .proj-imgs img {
  aspect-ratio: var(--mod-ratio, auto);
  object-fit: var(--mod-fit, cover);
  max-height: var(--mod-maxh, none);
  border-radius: var(--mod-radius, 6px);
}
.media-mod .carousel {
  --carousel-slide: var(--mod-slide, 50%);
}
.media-mod .carousel-track img {
  max-height: var(--mod-maxh, 60vh);
  aspect-ratio: var(--mod-ratio, auto);
  object-fit: var(--mod-fit, cover);
  border-radius: var(--mod-radius, 6px);
}
.media-mod.media-ratio .carousel-track img,
.media-mod.media-ratio .proj-imgs img {
  width: 100%;
}
.media-mod .proj-viewer {
  aspect-ratio: var(--mod-ratio, 16/10);
  border-radius: var(--mod-radius, 6px);
  max-height: var(--mod-maxh, none);
}
.media-mod.media-noframe .proj-viewer,
.media-mod.media-noframe .proj-imgs img,
.media-mod.media-noframe .carousel-track img {
  border: none;
  background: transparent;
}
/* comparison module: render vs. real stone — always 2-up (even on phones), full square, labeled */
.media-mod.media-compare .proj-imgs {
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 2.5vw, 16px);
  align-items: start;
}
.media-mod.media-compare .proj-imgs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #000;
  border-radius: clamp(8px, 2vw, 14px);
  max-height: none;
}
.media-mod.media-compare figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}
/* media module: optional centred captions + description */
.media-text-center .media-desc,
.media-text-center figcaption,
.media-text-center .viewer-cap {
  text-align: center;
}

/* ---- partners (About page cards + home page strip) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 24px;
  margin-top: 2rem;
}
.partner-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.partner-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-dim);
}
.partner-card h3 {
  color: var(--text);
  margin: 0;
}
.partner-logo {
  height: 56px;
  display: flex;
  align-items: center;
}
.partner-logo img {
  max-height: 100%;
  max-width: 180px;
  width: auto;
  height: auto;
}
/* logos that need a light backing (dark or opaque artwork) */
.partner-logo.plate {
  align-self: flex-start;
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  height: 64px;
}
.partner-since {
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.partner-card .muted {
  margin: 0;
}
.partner-links {
  margin-top: auto;
  padding-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.partner-links .link {
  font-size: 0.92rem;
}
/* home page partner strip: equal tiles, one row of five on desktop */
.partner-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 2rem;
}
.partner-chip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  text-decoration: none;
  text-align: center;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.partner-chip:hover,
.partner-chip:focus-visible {
  border-color: var(--accent-dim);
  color: var(--text);
  transform: translateY(-2px);
}
.partner-chip-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 4px;
}
.partner-chip-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partner-chip span:last-child {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .partner-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* odd last tile sits centred under the pairs */
  .partner-chip:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
@media (max-width: 760px) {
  .partner-card {
    padding: 24px;
  }
}

.media-mod.media-compare .media-desc {
  text-align: center;
  font-weight: 500;
  opacity: .85;
  margin-top: 12px;
}
@media (prefers-reduced-motion: no-preference) {
  .media-mod.media-compare .proj-imgs img { transition: transform .3s ease; }
  .media-mod.media-compare figure:hover img { transform: scale(1.02); }
}
.media-mod.media-bleed {
  /* expand past the content column via negative margins (no 100vw, which ignores
     the scrollbar/padding and causes horizontal overflow on mobile). Capped at
     1700px wide and centred on wide screens — below ~1700px it stays full-bleed.
     850px = half of the 1700px cap. */
  margin-left: calc(50% - min(50vw, 850px));
  margin-right: calc(50% - min(50vw, 850px));
}

/* ---- language toggle (ENG · SLO · GER sliding switch) ---- */
.lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: none;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.lang-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 36px;
  border-radius: 999px;
  background: var(--accent);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.lang-opt {
  position: relative;
  z-index: 1;
  width: 36px;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
  color: var(--text-muted);
  font: 600 0.63rem/1 var(--font-display);
  letter-spacing: 0.08em;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  touch-action: manipulation;
}
.lang-opt:focus:not(:focus-visible) { outline: none; }
.lang-opt.active {
  color: var(--on-accent);
}
.lang-opt:hover:not(.active) {
  color: var(--text);
}
.lang-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 999px;
}
/* no-flash: hide content until the stored language is applied (set pre-paint) */
body {
  transition: opacity 0.18s ease;
}
html[data-i18n-pending] body {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .lang-thumb { transition: none; }
  body { transition: none; }
}
@media (max-width: 640px) {
  .lang-opt { width: 32px; font-size: 0.58rem; }
  .lang-thumb { width: 32px; }
}

/* ---- quote form status + legal pages (2026-09-23) ---- */
.form-status {
  margin-top: 0.4rem;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.95rem;
}
.form-status.is-ok {
  border-color: var(--accent);
  color: var(--text);
}
.form-status.is-error {
  border-color: #c0392b;
  color: var(--text);
}
button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: progress;
}
.legal-doc a {
  color: var(--accent);
}