/* ==========================================================================
   Gen Group — Stylesheet
   Tokens sourced verbatim from DESIGN.md. Layout/shape/motion synthesized
   from the five style references per DESIGN.md's merge instructions.
   ========================================================================== */

:root {
  /* Colors — brand kit, verbatim */
  --color-charcoal: #212120;
  --color-charcoal-2: #2A2A28;
  --color-charcoal-3: #323230;
  --color-gold: #C9A36A;
  --color-off-white: #F5F5F7;
  --color-silver: #B9BAC4;
  --color-ash: #6F707A;
  --color-ash-readable: #8A8B94;
  --gradient-gold: linear-gradient(105deg, #B5894C, #D9B575, #F4E3BD, #CBA05E);
  --color-gold-soft: rgba(201, 163, 106, 0.32);

  --border-hairline: rgba(245, 245, 247, 0.12);
  --border-hairline-strong: rgba(245, 245, 247, 0.3);

  /* Typography — display switched to Jost (geometric, Century Gothic-
     style) for headings/numbers per owner decision (v6); Unbounded is
     retained for the logo wordmark only, to stay in sync with the
     delivered PNG logo assets. */
  --font-display: 'Jost', ui-sans-serif, system-ui, sans-serif;
  --font-unbounded: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --font-manrope: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;
  --spacing-2xl: 96px;
  --section-gap: clamp(64px, 10vw, 112px);
  --card-padding: 32px;

  /* Radius — exactly two values in the whole system */
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-input: 12px;

  /* Layout */
  --page-max-width: 1200px;
  --page-pad: clamp(20px, 5vw, 64px);

  /* Motion (v25): three tiers instead of one. --duration-ui (0.6s) is for
     big, patient moves (lang thumb, nav background, skip-link). Hover
     color/border feedback rides --duration-quick and hover lifts ride
     --duration-lift so micro-interactions answer the cursor instead of
     trailing it. Same patient ease throughout — the rhythm is shared,
     only the distance differs. */
  --ease-patient: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-ui: 0.6s;
  --duration-lift: 0.45s;
  --duration-quick: 0.3s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* smooth in-page anchor travel (#our-work), never under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--color-charcoal);
  color: var(--color-silver);
  font-family: var(--font-manrope);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
/* kill the legacy 300ms tap delay on every interactive element */
a, button, input, label, select, textarea { touch-action: manipulation; }

::selection { background: var(--color-gold); color: var(--color-charcoal); }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 200;
  background: var(--color-gold); color: var(--color-charcoal);
  padding: 12px 20px; border-radius: var(--radius-input);
  font-family: var(--font-manrope); font-weight: 600; font-size: 14px;
  transition: top var(--duration-ui) var(--ease-patient);
}
.skip-link:focus { top: 16px; }

/* ---------- Language toggle plumbing ---------- */
html[data-lang="en"] .lang-el { display: none; }
html[data-lang="el"] .lang-en { display: none; }

/* Greek renders in Inter (v19) — Jost/Manrope have weak Greek coverage,
   so in Greek mode the display + body font vars swap to Inter, cascading
   to the whole tree. English (Jost/Manrope) and the Unbounded logo are
   unaffected. */
html[data-lang="el"] {
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-manrope: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.section { padding-block: var(--section-gap); }
.section-tight { padding-block: calc(var(--section-gap) * 0.55); }
main { display: block; }

/* Gold eyebrow with arc mark — adopted from the gengroup.html donor (v7) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  margin-bottom: var(--spacing-sm);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 10px;
  border: 1px solid var(--color-gold-soft);
  border-top: none;
  border-radius: 0 0 26px 26px;
  opacity: 0.7;
  flex-shrink: 0;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--color-off-white); font-weight: 600; }

.text-display {
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.text-heading-lg {
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.005em;
}
.text-heading {
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.75rem);
  line-height: 1.08;
}
.text-heading-sm {
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.15;
}

.lede {
  font-family: var(--font-manrope);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  color: var(--color-silver);
  max-width: 62ch;
}
.lede--center { margin-inline: auto; text-align: center; }

.gradient-text {
  background-image: var(--gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* (v28) background-clip:text only paints inside the element box, so at
     tight heading line-heights a final-line descender (the "g" in
     "Management") poked below the box and rendered unfilled. Extend the
     paint box past the descender and pull the layout back. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* Gold-gradient emphasis inside headings (donor's `em` pattern, v7) */
h1 em, h2 em, h3 em {
  font-style: normal;
  background-image: var(--gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  transition: background var(--duration-quick) var(--ease-patient),
              border-color var(--duration-quick) var(--ease-patient),
              transform var(--duration-lift) var(--ease-patient),
              opacity var(--duration-quick) var(--ease-patient);
  white-space: nowrap;
}
/* press feedback: buttons visibly answer the tap (v25) */
.btn:active { transform: translateY(0) scale(0.97); }
.btn[disabled] { cursor: default; }
.btn-primary {
  background: var(--color-gold);
  color: var(--color-charcoal);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: #DEC08A;
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--color-off-white);
  border-color: var(--border-hairline-strong);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: rgba(245, 245, 247, 0.85);
}
.btn-arrow { transition: transform var(--duration-quick) var(--ease-patient); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-sm { padding: 10px 24px; font-size: 14px; }

.link-inline {
  color: var(--color-off-white);
  text-decoration: underline;
  text-decoration-color: var(--border-hairline-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-quick) var(--ease-patient);
}
.link-inline:hover { text-decoration-color: var(--color-gold); }

/* ---------- Nav — glassmorphism floating pill (v12) ----------
   Adopted from a React/framer-motion glassmorphism-nav donor per the
   CLAUDE.md donor rule (aesthetic/structure only, tokens applied): the
   frosted-glass pill and the gold "lamp" glow over the active page. The
   donor's light/dark theme toggle is deliberately NOT adopted — this
   site is a single dark charcoal/gold identity. The site is multi-page
   (not a SPA), so the lamp marks the current page statically; no
   shared-layout spring is needed. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px clamp(14px, 4vw, 32px) 0;
  pointer-events: none; /* transparent gutter doesn't intercept clicks */
}
.nav-inner {
  pointer-events: auto;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: var(--radius-pill);
  background: rgba(33, 33, 32, 0.55);
  border: 1px solid var(--border-hairline);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: background var(--duration-ui) ease, border-color var(--duration-ui) ease;
}
.nav.is-scrolled .nav-inner {
  background: rgba(33, 33, 32, 0.72);
  border-color: var(--border-hairline-strong);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-unbounded);
  white-space: nowrap;
}
/* Real logo lockup (v15): transparent gold PNG building mark on the left +
   holographic GENGROUP wordmark (uniform size — no GEN/GROUP split) with
   the slogan underneath. Used in the nav and the footer (.logo--footer). */
.logo-img {
  height: 42px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.logo-lockup {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}
.logo-word {
  font-family: var(--font-unbounded);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  background-image: var(--gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px rgba(244, 228, 193, 0.35);
  filter: drop-shadow(0 0 10px rgba(201, 163, 106, 0.35));
}
.logo-slogan {
  font-family: var(--font-manrope);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-silver);
  margin-top: 4px;
}
/* Footer variant — a touch larger, with breathing room below */
.logo--footer { margin-bottom: 18px; }
.logo--footer .logo-img { height: 52px; }
.logo--footer .logo-word { font-size: 22px; }
.logo--footer .logo-slogan { font-size: 8px; letter-spacing: 0.28em; }

/* Nav logo (v16): mark only, oversized, styled as a home button — soft
   always-on gold glow, pill highlight + lift + brighter glow on hover. */
.nav .logo {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background var(--duration-quick) ease, border-color var(--duration-quick) ease;
}
.nav .logo-img {
  height: 48px;
  filter: drop-shadow(0 0 6px rgba(201, 163, 106, 0.18));
  transition: filter var(--duration-quick) ease, transform var(--duration-lift) var(--ease-patient);
}
.nav .logo:hover,
.nav .logo:focus-visible {
  background: rgba(201, 163, 106, 0.07);
  border-color: var(--color-gold-soft);
  outline: none;
}
.nav .logo:hover .logo-img,
.nav .logo:focus-visible .logo-img {
  filter: drop-shadow(0 0 13px rgba(201, 163, 106, 0.5));
  transform: scale(1.05);
}
.nav .logo:active .logo-img { transform: scale(0.98); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  position: relative;
  font-family: var(--font-manrope);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ash-readable);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  transition: color var(--duration-quick) var(--ease-patient), background var(--duration-quick) ease;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--color-off-white); }
.nav-link[aria-current="page"] {
  color: var(--color-off-white);
  background: rgba(201, 163, 106, 0.08);
}
/* the gold "lamp": a bar at the pill's top edge with layered glow,
   translated from the donor's stacked blurred blobs */
.nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 26px;
  height: 3px;
  transform: translateX(-50%);
  background: var(--color-gold);
  border-radius: 0 0 999px 999px;
  box-shadow:
    0 0 8px 1px rgba(201, 163, 106, 0.75),
    0 5px 16px 3px rgba(201, 163, 106, 0.35),
    0 9px 26px 7px rgba(201, 163, 106, 0.18);
  animation: lamp-in 0.6s var(--ease-patient) both;
}
@keyframes lamp-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link[aria-current="page"]::before { animation: none; }
}

.nav-right { display: flex; align-items: center; gap: 20px; }

/* Sliding language toggle (v13) — segmented pill with a gold thumb that
   slides to the active language. Drives off the existing setLang JS
   (which toggles aria-pressed on every [data-lang-btn]); CSS :has()
   positions the thumb, so nav + mobile + footer toggles slide in sync
   with no JS change. Shared here across the nav (.lang-toggle/.lang-btn)
   and footer (.footer-lang/.lang-pill) instances. */
.lang-toggle, .footer-lang {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline);
  background: rgba(245, 245, 247, 0.04);
  font-family: var(--font-manrope);
  font-weight: 600;
}
.lang-toggle::before, .footer-lang::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  transition: transform var(--duration-ui) var(--ease-patient);
  z-index: 0;
}
.lang-toggle:has([data-lang-btn="el"][aria-pressed="true"])::before,
.footer-lang:has([data-lang-btn="el"][aria-pressed="true"])::before {
  transform: translateX(100%);
}
/* (v25) segments widened 38→44px + an invisible vertical hit extension,
   so each language button clears the 44×44 touch minimum without
   changing the pill's visual weight. */
.lang-btn, .lang-pill {
  position: relative;
  z-index: 1;
  width: 44px;
  padding: 8px 0;
  text-align: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-ash-readable);
  font-family: var(--font-manrope);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  transition: color var(--duration-quick) ease;
}
.lang-btn::after, .lang-pill::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}
.lang-btn[aria-pressed="true"], .lang-pill[aria-pressed="true"] { color: var(--color-charcoal); }
.lang-btn:hover, .lang-pill:hover { color: var(--color-off-white); }
.lang-btn[aria-pressed="true"]:hover, .lang-pill[aria-pressed="true"]:hover { color: var(--color-charcoal); }
@media (prefers-reduced-motion: reduce) {
  .lang-toggle::before, .footer-lang::before { transition: none; }
}

/* (v25) burger sized to the 44×44 touch minimum (was ~38×32) */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--color-off-white);
  border-radius: 2px;
  transition: transform var(--duration-ui) var(--ease-patient), opacity var(--duration-ui) ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* (v25) the panel no longer snaps in via display toggling — it fades and
   settles from just above its resting spot. Hidden state is carried by
   visibility (delayed on the way out so the exit can play), and the
   desktop media query keeps it display:none entirely. */
.nav-mobile-panel {
  display: none;
  pointer-events: auto;
  position: absolute;
  top: 82px;
  left: clamp(14px, 4vw, 32px);
  right: clamp(14px, 4vw, 32px);
  background: rgba(33, 33, 32, 0.85);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.35s var(--ease-patient),
              visibility 0s linear 0.25s;
}
.nav-mobile-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-patient);
}
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-panel { transition: none; }
}
.nav-mobile-panel .nav-link { font-size: 18px; padding: 10px 0; display: block; color: var(--color-off-white); }
.nav-mobile-panel .nav-cta { margin-top: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-md); }

/* ---------- Hero glow ---------- */
.hero { position: relative; padding-top: calc(76px + var(--section-gap)); overflow: hidden; }
.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 720px;
  background: radial-gradient(circle, rgba(201, 163, 106, 0.28) 0%, rgba(201, 163, 106, 0.08) 45%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: glow-drift 46s var(--ease-patient) infinite alternate;
}
.hero > .container { position: relative; z-index: 1; }
@keyframes glow-drift {
  0%   { transform: translate(-4%, -2%) scale(1); }
  100% { transform: translate(6%, 4%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
}

.hero-eyebrow { margin-bottom: var(--spacing-md); }
.hero h1.tagline { max-width: 16ch; }
.hero h1:not(.tagline) { max-width: 20ch; }
.hero .lede { margin-top: var(--spacing-lg); }
.hero-actions { margin-top: var(--spacing-lg); display: flex; gap: var(--spacing-md); flex-wrap: wrap; }

/* ---------- Stat tiles ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
}
.stat-tile {
  background: var(--color-charcoal-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}

.stat-grid--featured { grid-template-columns: repeat(2, 1fr); }
.stat-grid--featured .stat-tile:first-child { grid-column: 1 / -1; }
.stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  color: var(--color-off-white);
  /* gold-gradient numbers — donor's stat treatment (v7) */
  background-image: var(--gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat-detail {
  font-family: var(--font-manrope);
  font-size: 14px;
  color: var(--color-silver);
  margin-top: var(--spacing-sm);
  line-height: 1.55;
}
.stat-label {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-silver);
  margin-top: var(--spacing-sm);
  display: block;
}

/* ---------- Section heading block (centered) ---------- */
.section-heading {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--spacing-xl);
}

/* ---------- Light inversion section ---------- */
/* Light sections carry the Era Veneziana plaster photo (owner-chosen
   light tone). No boxes and no overlay (v22): text is set in dark
   charcoal so it reads directly on the plaster. */
.section-light {
  background-color: #c9b89c; /* warm tan fallback while the JPG loads */
  /* (v25) faint light scrim over the plaster so the dark-charcoal text
     keeps its contrast on the texture's darker patches (handoff §6.7) */
  background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
                    url("../img/veneziana.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-light .eyebrow { color: var(--color-charcoal); }
.section-light h1, .section-light h2, .section-light h3 { color: var(--color-charcoal); }
.section-light p, .section-light .lede { color: var(--color-charcoal); }
.section-light .btn-ghost { color: var(--color-charcoal); border-color: rgba(33, 33, 32, 0.35); }
.section-light .btn-ghost:hover, .section-light .btn-ghost:focus-visible { border-color: rgba(33, 33, 32, 0.85); }
.section-light .closing-cta { text-align: center; }

/* ---------- Panels / service cards ---------- */
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.panel {
  background: var(--color-charcoal-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
}
/* panels carry h2 since the v25 heading-order fix (was h3) */
.panel h2, .panel h3 { margin-bottom: var(--spacing-sm); }
.panel p { flex-grow: 1; }
.panel .btn { margin-top: var(--spacing-lg); align-self: flex-start; }

.panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-ash-readable);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-off-white);
  margin-bottom: var(--spacing-md);
}

/* ---------- Bullet list ---------- */
.check-list { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
.check-list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-manrope);
  font-size: 16px;
  color: var(--color-silver);
  line-height: 1.55;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--color-gold);
}
.check-list strong { color: var(--color-off-white); font-weight: 600; }

/* ---------- Method steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.step {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--spacing-md);
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-ash-readable);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-off-white);
  margin-bottom: var(--spacing-md);
}
.step-title {
  font-family: var(--font-manrope);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-off-white);
  margin-bottom: var(--spacing-xs);
}
.step-desc {
  font-family: var(--font-manrope);
  font-size: 14px;
  color: var(--color-silver);
  line-height: 1.55;
}

/* ---------- Statement panel (Remote by Design, etc.) ---------- */
.statement-panel {
  background: var(--color-charcoal-2);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-hairline);
  padding: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}
.statement-panel p:not(.eyebrow) { font-size: 17px; color: var(--color-silver); }
.statement-panel h2 { margin-bottom: var(--spacing-md); }

/* ---------- Big single stat (Design page: 25+ years) ---------- */
.big-stat {
  display: flex;
  align-items: center; /* v14: center 25+ vertically with the paragraph */
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  background: var(--color-charcoal-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}
.big-stat .stat-number { font-size: clamp(3rem, 7vw, 5rem); }
.big-stat p { max-width: 46ch; color: var(--color-silver); }

/* ---------- Cross-sell callout ----------
   Upgraded from a muted italic footnote to a dark callout card (v11,
   owner: "make it a bit more visible") — same dark-on-light inversion
   as the Experience big-stat card. */
.cross-sell {
  margin-top: var(--spacing-2xl);
  background: var(--color-charcoal-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-manrope);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-silver);
}

/* ---------- Closing CTA ---------- */
.closing-cta { margin-top: var(--spacing-xl); }

/* ---------- Portfolio (merged into interior-exterior-design.html, v8) ---------- */
#our-work { scroll-margin-top: 96px; }
.portfolio-subhead { margin-top: var(--spacing-xl); }
.portfolio-subhead + .portfolio-grid { margin-top: var(--spacing-md); }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.portfolio-card:first-child { grid-column: span 2; }
.portfolio-card {
  border-radius: var(--radius-card);
  border: 1px dashed var(--border-hairline-strong);
  background: var(--color-charcoal-2);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  gap: var(--spacing-sm);
}
.portfolio-card .icon { width: 36px; height: 36px; color: var(--color-ash-readable); opacity: 0.7; }
.portfolio-card .placeholder-text {
  font-family: var(--font-manrope);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-silver);
  max-width: 30ch;
}

/* ---------- Forms ---------- */
form { margin-top: var(--spacing-xl); max-width: 640px; }
.field { display: flex; flex-direction: column; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); }
.field label {
  font-family: var(--font-manrope);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-off-white);
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
  background: var(--color-charcoal-2);
  /* (v29) warmer resting border — a quiet gold instead of ash */
  border: 1px solid rgba(201, 163, 106, 0.32);
  border-radius: var(--radius-input);
  padding: 14px 16px;
  font-size: 16px;
  color: var(--color-off-white);
  outline: none;
  transition: border-color var(--duration-quick) ease;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
/* (v26) focus flips to the gold accent — the whole field answers:
   border and label light up together (see .field:focus-within below) */
.field input:focus, .field textarea:focus { border-color: var(--color-gold); }
.field:focus-within > label { color: var(--color-gold); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-ash-readable); }

.service-options { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.service-option { position: relative; }
.service-option input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.service-option label {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline-strong);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-off-white);
  transition: background var(--duration-quick) var(--ease-patient),
              border-color var(--duration-quick) var(--ease-patient),
              color var(--duration-quick) var(--ease-patient),
              padding var(--duration-quick) var(--ease-patient);
  cursor: pointer;
}
.service-option input:checked + label {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-charcoal);
  font-weight: 600;
}
.service-option input:focus-visible + label { outline: 2px solid var(--color-off-white); outline-offset: 2px; }

.form-success {
  display: none;
  background: var(--color-charcoal-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  max-width: 640px;
}
.form-success.is-visible { display: block; }
.form-success[hidden] { display: none; }
form.is-hidden { display: none; }

/* (v25) real-submit states: while the fetch is in flight the submit
   button swaps its label for a spinner + "Sending…", and a failed
   delivery surfaces an inline error card (the form stays intact so
   nothing typed is lost). */
.form-error {
  background: var(--color-charcoal-3);
  border: 1px solid var(--border-hairline-strong);
  border-radius: var(--radius-card);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-top: var(--spacing-md);
  max-width: 640px;
  font-family: var(--font-manrope);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-silver);
  outline: none;
}
.form-error[hidden] { display: none; }
.form-error a {
  color: var(--color-gold);
  text-decoration: underline;
  text-decoration-color: var(--color-gold-soft);
  text-underline-offset: 3px;
}
.form-error a:hover { text-decoration-color: var(--color-gold); }
.btn-label-idle, .btn-label-busy { display: inline-flex; align-items: center; gap: 8px; }
form .btn-label-busy { display: none; }
form.is-sending .btn-label-idle { display: none; }
form.is-sending .btn-label-busy { display: inline-flex; }
form.is-sending [type="submit"] { opacity: 0.75; }
.btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(33, 33, 32, 0.3);
  border-top-color: var(--color-charcoal);
  animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; }
}

.contact-details {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-gold-soft); /* (v29) gold rule */
  display: flex;
  gap: var(--spacing-2xl);
  flex-wrap: wrap;
}
.contact-detail-group .eyebrow { margin-bottom: var(--spacing-xs); }
.contact-detail-group a {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-off-white);
  margin-bottom: 4px;
  transition: color var(--duration-quick) ease;
}
.contact-detail-group a:hover { color: var(--color-gold); }

/* ---------- Footer ----------
   Adopted wholesale from the gengroup.html donor (v7, owner-directed:
   "font, transparency, colours, everything"): floating rounded panel,
   gold-glow wordmark, dashed social slots, pill language toggle. Two
   documented exceptions to system rules ride along by owner order —
   the large panel radius and the wordmark's drop-shadow glow. */
.footer {
  margin: clamp(14px, 2vw, 26px) clamp(12px, 2vw, 26px) 0;
  background: var(--color-charcoal-2);
  border: 1px solid var(--border-hairline);
  border-bottom: none;
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  padding: clamp(56px, 7vw, 90px) 0 0;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
}
/* (v25) dead selectors from the pre-v15 wordmark era removed:
   .footer-logo-block / .footer-wordmark / .fw-* / .footer-tagline /
   .logo-gen / .logo-group / .hero-flank — none appear in markup since
   the real-logo lockup (v15) and the hero flank removal (v14). */
.footer-blurb { font-size: 13.5px; color: var(--color-ash-readable); max-width: 280px; }
.footer-social { display: flex; gap: 10px; margin-top: 26px; }
.footer-social button {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--border-hairline-strong);
  background: none;
  color: var(--color-ash-readable);
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, transform 0.3s;
}
.footer-social button:hover { border-color: var(--color-gold); color: var(--color-gold); transform: translateY(-3px); }
.footer-heading {
  font-family: var(--font-manrope);
  font-size: 10.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-ash-readable);
  font-weight: 700;
  margin-bottom: 20px;
}
.footer-list { display: flex; flex-direction: column; gap: 11px; }
.footer-list a, .footer-list li {
  font-family: var(--font-manrope);
  font-size: 14px;
  color: var(--color-silver);
}
.footer-list a { transition: color 0.3s, padding-left 0.3s; }
.footer-list a:hover { color: var(--color-gold); padding-left: 6px; }
.footer-bottom {
  border-top: 1px solid var(--border-hairline);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ash-readable);
}
/* .footer-lang / .lang-pill styled by the shared sliding-toggle block
   in the Nav section (v13) — no separate footer rules needed. */

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links, .nav-right .btn { display: none; }
  .nav-right .lang-toggle { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile-panel { display: block; }

  .stat-grid, .panel-grid, .portfolio-grid { grid-template-columns: 1fr; }
  /* (v25) the four process steps hold a 2×2 on tablet instead of
     collapsing straight to a single tall column */
  .steps { grid-template-columns: 1fr 1fr; }
  .portfolio-card:first-child { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .contact-details { gap: var(--spacing-lg); }
  .big-stat { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
}

@media (max-width: 640px) {
  /* (v25) tiles/panels breathe on phones with less internal padding */
  :root { --card-padding: 24px; }
  .panel, .statement-panel, .big-stat { padding: var(--spacing-lg); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home hero — animated treatment (ported from a React/Tailwind donor
   component per CLAUDE.md: structure + motion kept, all color/type/shadow
   values replaced with DESIGN.md tokens, demo copy replaced with COPY.md)
   ========================================================================== */

.hero-serenity {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 76px;
  display: flex;
  align-items: center;
}
.hero-serenity .hero-content { width: 100%; }

/* Mesh-gradient background canvas (vanilla WebGL, see main.js). Painted
   by JS only when WebGL is available and reduced-motion is off; until
   then it stays transparent and .hero-glow underneath is the fallback. */
.hero-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-patient);
}
.hero.has-mesh .hero-mesh { opacity: 1; }
.hero.has-mesh .hero-glow { display: none; }

.hero-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-hairline-strong);
  opacity: 0;
  z-index: 0;
  animation: hero-corner-in 1s var(--ease-patient) forwards;
  animation-delay: 2.6s;
}
.hero-corner-tl { top: 24px; left: 24px; }
.hero-corner-tr { top: 24px; right: 24px; }
.hero-corner-bl { bottom: 24px; left: 24px; }
.hero-corner-br { bottom: 24px; right: 24px; }
@keyframes hero-corner-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 0.4; transform: scale(1); }
}

/* (v18) Cursor glow removed per owner request — only the click ripple
   and scroll-progress bar remain of the ambient effects. */

.hero-content { position: relative; z-index: 1; }

.word-reveal {
  display: inline-block;
  opacity: 0;
  animation: hero-word-appear 0.8s ease-out forwards;
  animation-delay: var(--reveal-delay, 0s);
}
@keyframes hero-word-appear {
  0% { opacity: 0; transform: translateY(24px) scale(0.92); filter: blur(6px); }
  60% { opacity: 0.85; filter: blur(1px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Animating opacity/transform/filter promotes each word to its own
   compositor layer, which breaks a parent's background-clip:text
   gradient (it can only clip within a single paint layer). Give each
   word its own gradient fill directly so the reveal animation and the
   gold gradient heading text work together. */
.gradient-text .word-reveal {
  background-image: var(--gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-content h1 .word-reveal { transition: filter var(--duration-quick) var(--ease-patient); }
.hero-content h1 .word-reveal:hover { filter: brightness(1.25); }

.hero-reveal-lede {
  opacity: 0;
  animation: hero-lede-appear 1s ease-out forwards;
  animation-delay: 0.9s;
}
@keyframes hero-lede-appear {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gold highlight for a word/phrase inside an off-white heading (v18):
   About page H1 "One team, every layer of your property." The heading's
   entrance is handled by the scroll-reveal system, so no animation here. */
.word-gold {
  background-image: var(--gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.ripple-effect {
  position: fixed;
  width: 6px;
  height: 6px;
  background: rgba(201, 163, 106, 0.55);
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 200;
  animation: hero-ripple 0.8s ease-out forwards;
}
@keyframes hero-ripple {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

@media (max-width: 640px) {
  .hero-corner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-corner,
  .word-reveal, .hero-reveal-lede {
    animation: none !important;
    opacity: 1 !important;
  }
  .ripple-effect { display: none !important; }
  .scroll-cue svg, .cta-orb, .cta-ring, .method-num::after { animation: none !important; }
  /* mesh canvas is never initialized under reduced motion (see main.js);
     the static .hero-glow fallback remains */
}

/* ==========================================================================
   Inner Pages Composition Pass (v4) — extends the Ciridae structural
   patterns already approved on index.html (full-viewport hero, centered
   section headings, one light tonal break per page) to the inner pages.
   Structure only: zero color/font/token changes, per DESIGN.md.
   ========================================================================== */

/* Full-viewport inner-page hero — same vertical composition as the home
   hero (headline + lede flex-centered in the viewport), without the home
   page's animated donor treatment. */
.hero--page {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 76px;
  display: flex;
  align-items: center;
}
.hero--page > .container { width: 100%; }

/* Content following a centered .section-heading block: match the
   heading-to-content rhythm index.html established (64px + 64px), and
   keep short bullet lists visually centered under the centered heading. */
.section-heading + .stat-grid { margin-top: var(--spacing-xl); }
.section-heading + .check-list { max-width: 44rem; margin-inline: auto; }

/* Contact page — centered composition without the full-viewport
   treatment: the form is the site's primary action and stays near
   the fold. */
.hero--contact .section-heading { margin-bottom: 0; }
/* .hero h1:not(.tagline) carries max-width: 20ch — recenter the box
   itself inside the centered heading block */
.hero--contact .section-heading h1 { margin-inline: auto; }
.hero--contact form,
.hero--contact .form-success { margin-inline: auto; }
.hero--contact .contact-details { justify-content: center; text-align: center; }

/* Light-section variants for surfaces that only ever sat on dark
   sections before the light break reached the inner pages. Same
   tonal-stack logic, inverted: charcoal tints on off-white, hairlines
   darkened. Still zero box-shadow. */
/* (v20) On the plaster texture the inner panels become crisp dark
   charcoal panels with light text, floating on the warm bronze. */
/* (v22) No boxes on light sections — statement-panel + big-stat go
   transparent, all text dark charcoal for readability on the plaster. */
.section-light .statement-panel,
.section-light .big-stat {
  background: transparent;
  border-color: transparent;
  padding-inline: 0;
}
.section-light .statement-panel p:not(.eyebrow),
.section-light .big-stat p { color: var(--color-charcoal); }
.section-light .stat-number {
  background-image: none;
  color: var(--color-charcoal);
  -webkit-text-fill-color: var(--color-charcoal);
}
/* (v24) Experience 25+ sits to the LEFT of its paragraph — uses the base
   .big-stat row layout (25+ then paragraph), which the mobile media query
   still stacks. No flex override here beyond the v22 transparency. */
/* inline links on the plaster: dark, but clearly a link */
.section-light .link-inline {
  color: var(--color-charcoal);
  text-decoration-color: rgba(33, 33, 32, 0.75);
  font-weight: 600;
}
.section-light .link-inline:hover { text-decoration-color: var(--color-charcoal); }
/* (v23) cross-sell keeps its dark callout card on light sections so its
   link stays clearly visible — gold on charcoal. */
.section-light .cross-sell {
  background: var(--color-charcoal-3);
  border: 1px solid var(--border-hairline-strong);
  border-radius: var(--radius-card);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-silver);
}
.section-light .cross-sell .link-inline {
  color: var(--color-gold);
  text-decoration-color: var(--color-gold-soft);
}
.section-light .cross-sell .link-inline:hover { text-decoration-color: var(--color-gold); }

/* (v23) Hover lift on every content box — subtle raise + gold border,
   matching the service cards, so all boxes feel interactive.
   (v25) retimed to the lift/quick tiers so the raise answers the cursor. */
.stat-tile, .panel, .portfolio-card, .cross-sell {
  transition: transform var(--duration-lift) var(--ease-patient), border-color var(--duration-quick) ease;
}
.stat-tile:hover, .panel:hover, .portfolio-card:hover, .cross-sell:hover {
  transform: translateY(-6px);
  border-color: var(--color-gold-soft);
}

/* ==========================================================================
   Donor Adoption Pass (v7) — services cards, CTA, scroll cue
   Structure/motion from the pre-rebrand gengroup.html prototype, restyled
   with DESIGN.md tokens (16px card radius kept per the two-radii rule; no
   box-shadow; donor's blue orb tint translated to gold).
   ========================================================================== */

/* Four service cards, 2x2 */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.service-card {
  position: relative;
  display: block;
  background: var(--color-charcoal-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 40px 38px;
  overflow: hidden;
  transition: transform var(--duration-lift) var(--ease-patient), border-color var(--duration-quick) ease;
}
.service-card::before {
  content: "";
  position: absolute;
  top: -60%; left: 50%;
  width: 130%; height: 120%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 163, 106, 0.06), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.service-card:hover { transform: translateY(-7px); border-color: var(--color-gold-soft); }
.service-card:hover::before { opacity: 1; }
.service-ico {
  width: 58px; height: 58px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  transition: transform var(--duration-lift) var(--ease-patient), border-color var(--duration-quick) ease;
}
.service-card:hover .service-ico { transform: rotate(-10deg) scale(1.06); border-color: var(--color-gold); }
.service-ico svg {
  stroke: var(--color-off-white);
  color: var(--color-off-white);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.service-card h3 { font-size: 19px; margin-bottom: 12px; letter-spacing: 0.01em; }
.service-card p { font-size: 14.5px; color: var(--color-silver); line-height: 1.6; }
.service-chip {
  position: absolute;
  top: 30px; right: 30px;
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid rgba(201, 163, 106, 0.22);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

/* Closing CTA — "Own a space that could earn more?" */
.cta-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(80px, 11vw, 150px);
}
.cta-orb {
  position: absolute;
  left: 50%; top: 50%;
  width: 640px; height: 640px;
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(201, 163, 106, 0.07), transparent 70%);
  pointer-events: none;
  animation: cta-breathe 16s ease-in-out infinite;
}
@keyframes cta-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}
.cta-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 380px; height: 380px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline);
  transform: translate(-50%, -50%);
  animation: cta-spin 90s linear infinite;
  pointer-events: none;
}
.cta-ring::before {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
}
@keyframes cta-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cta-inner { position: relative; z-index: 1; }
.cta-lead {
  font-family: var(--font-manrope);
  font-size: 16px;
  color: var(--color-ash-readable);
  max-width: 48ch;
  margin: 22px auto 40px;
}
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--spacing-sm); }

/* Hero scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1;
  font-family: var(--font-manrope);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-ash-readable);
}
.scroll-cue svg { color: var(--color-gold); animation: cue-bob 4.5s ease-in-out infinite; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (max-width: 760px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home Page Content Pass (v6) — Method section
   "Three moves. One curve upward." — three numbered steps on a drawn gold
   curve, ported from the pre-rebrand gengroup.html prototype's Method
   section per owner request. Brand tokens only; curve is decorative SVG.
   ========================================================================== */

.method-heading { max-width: 40rem; }
/* (v7) .method-eyebrow/.method-arc retired — the global .eyebrow now
   carries the gold arc mark itself */

.method-track { position: relative; margin-top: var(--spacing-xl); }
.method-curve {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 130px;
  pointer-events: none;
}
.method-curve path {
  fill: none;
  stroke: var(--color-gold);
  stroke-opacity: 0.5;
  stroke-width: 1;
}
.method-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}
.method-step--dip { margin-top: 56px; }

.method-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline-strong);
  background: var(--color-charcoal);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-off-white);
  margin-bottom: var(--spacing-md);
}
/* dashed gold ring, slowly orbiting (donor: 60s cycle) */
.method-num::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: var(--radius-pill);
  border: 1px dashed rgba(201, 163, 106, 0.3);
  animation: ring-spin 60s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
.method-title {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  background-image: var(--gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--spacing-xs);
}
.method-desc {
  font-family: var(--font-manrope);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-silver);
  max-width: 34ch;
}

@media (max-width: 980px) {
  .method-curve { display: none; }
  .method-steps { grid-template-columns: 1fr; }
  .method-step--dip { margin-top: 0; }
}

/* ==========================================================================
   Page Gilding Pass (v9) — Interior & Exterior Design
   (v25) This block previously duplicated the v22 .section-light .big-stat
   transparency/dark-text rules verbatim — the duplicates were removed
   (the v22 cluster in the Inner Pages section is the single source now).
   Only the big-stat link tint, unique to this block, remains.
   ========================================================================== */

.section-light .big-stat .link-inline {
  color: var(--color-charcoal);
  text-decoration-color: rgba(33, 33, 32, 0.4);
}
.section-light .big-stat .link-inline:hover { text-decoration-color: var(--color-charcoal); }

/* ==========================================================================
   Scroll Reveal Pass (v10) — framer-motion-style entrances, vanilla.
   .rv is added by JS only (no-JS visitors never see hidden content) and
   both classes are removed after the entrance finishes, so component
   hover transitions (cards, tiles) return to their own timing. The
   method-curve draw is gated on html.has-reveal for the same reason.
   ========================================================================== */

/* The transition lives on the .in state only: hiding is instant (no
   fade-out when JS tags already-rendered elements), only the entrance
   animates. Transitions use the after-change style, so this is the
   state that must carry it. */
/* (v25) entrance tightened: shorter travel + duration so scrolled-to
   sections settle before the eye moves on; stagger delays are also
   capped in main.js. */
.rv {
  opacity: 0;
  transform: translateY(22px);
}
.rv.in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s ease var(--rv-delay, 0s),
              transform 0.7s var(--ease-patient) var(--rv-delay, 0s);
}

/* Method curve draws in on scroll (donor: gengroup.html flowpath) */
html.has-reveal .method-curve path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 3.2s cubic-bezier(0.5, 0, 0.2, 1) 0.3s;
}
html.has-reveal .method-curve path.in { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   PM Page Pass (v11) — quad stat grid + cross-sell link emphasis
   ========================================================================== */

.stat-grid--quad { grid-template-columns: repeat(4, 1fr); }
.stat-grid--quad .stat-number { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
@media (max-width: 980px) {
  .stat-grid--quad { grid-template-columns: 1fr 1fr; }
}

.cross-sell .link-inline {
  color: var(--color-gold);
  font-weight: 600;
  text-decoration-color: var(--color-gold-soft);
}
.cross-sell .link-inline:hover { text-decoration-color: var(--color-gold); }

/* ==========================================================================
   Portfolio Carousel (v14) — one project per view, swipe left/right.
   Native scroll-snap for touch/trackpad; prev/next buttons + dots for
   click. Slides are 100% wide so one project shows at a time.
   ========================================================================== */
.carousel { position: relative; margin-top: var(--spacing-xl); }
.carousel-viewport { overflow: hidden; border-radius: var(--radius-card); }
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: center;
}
.carousel-slide .portfolio-card {
  position: relative;
  width: 100%;
  min-height: 400px;
}
.portfolio-chip {
  position: absolute;
  top: 24px; left: 24px;
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid rgba(201, 163, 106, 0.22);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline-strong);
  background: rgba(33, 33, 32, 0.6);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: var(--color-off-white);
  cursor: pointer;
  transition: border-color var(--duration-quick) ease, color var(--duration-quick) ease, opacity var(--duration-quick) ease;
}
.carousel-btn:hover { border-color: var(--color-gold); color: var(--color-gold); }
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }
.carousel-btn[disabled] { opacity: 0.25; pointer-events: none; }
/* (v25) each dot keeps its 8px visual but now sits inside a 28×44 hit
   box (was 8×8), so the pager is honestly tappable. The dot itself is
   drawn by ::before, centered in the button. */
.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xs);
}
.carousel-dots button {
  position: relative;
  width: 28px; height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.carousel-dots button::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background: var(--border-hairline-strong);
  transition: background var(--duration-quick) ease, transform var(--duration-quick) ease;
}
.carousel-dots button[aria-current="true"]::before {
  background: var(--color-gold);
  transform: translate(-50%, -50%) scale(1.35);
}
@media (max-width: 640px) {
  /* arrows stay at the 44px touch minimum; the card pads inward so the
     overlaid arrows never sit on top of the caption text */
  .carousel-btn { width: 44px; height: 44px; }
  .carousel-slide .portfolio-card { min-height: 320px; padding-inline: 60px; }
}

/* ==========================================================================
   Ambient Life (v18) — only the gold scroll-progress hairline remains;
   the v17 cursor glow, magnetic buttons, and button shine sweep were
   removed per owner request. Click ripple is created by JS (main.js).
   ========================================================================== */

/* Gold scroll-progress hairline (created by JS) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--gradient-gold);
  z-index: 200;
  pointer-events: none;
}

/* ==========================================================================
   Contact Form Redesign (v26) — split two-column card
   The form (and its success/error states) now live inside one charcoal-2
   card with a gold gradient hairline along its top edge and a faint gold
   corner bloom — the page's single "look here" object. First/Last name
   and Email/Location pair up on desktop rows and stack on phones.
   Required fields carry a gold asterisk; the selected service pill draws
   a check mark. Still zero box-shadow.
   ========================================================================== */

.contact-card {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  margin-top: var(--spacing-xl);
  /* (v29) second faint bloom in the lower-left corner, layered under
     the ::after top-right one — the card sits in warm light */
  background-image: radial-gradient(420px at 0% 100%, rgba(201, 163, 106, 0.05), transparent 70%);
  background-color: var(--color-charcoal-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: clamp(24px, 5vw, 48px);
  overflow: hidden;
}
/* (v29) drafting corner brackets — small gold L-marks, opposite corners */
.card-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(201, 163, 106, 0.55);
  pointer-events: none;
}
.card-corner-tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.card-corner-br { bottom: 14px; right: 14px; border-left: none; border-top: none; }
/* gold gradient hairline across the card's top edge */
.contact-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-gold);
}
/* faint gold bloom in the top-right corner (same radial family as the
   service-card hover glow — ambient, not elevation) */
.contact-card::after {
  content: "";
  position: absolute;
  top: -180px; right: -180px;
  width: 380px; height: 380px;
  border-radius: var(--radius-pill);
  background: radial-gradient(closest-side, rgba(201, 163, 106, 0.09), transparent 70%);
  pointer-events: none;
}
.contact-card form {
  position: relative;
  z-index: 1;
  margin-top: 0;
  max-width: none;
}

/* name/email rows: two columns on desktop, stacked on phones */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-md);
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* gold asterisk on required labels */
.req { color: var(--color-gold); margin-left: 3px; }

/* (v29, owner-directed) the pill outline hugs its text at rest — no
   reserved check slot. Selecting one grows the pill and the check
   sweeps in with it. */
.service-option label .opt-check {
  flex-shrink: 0;
  width: 0;
  height: 14px;
  margin-right: 0;
  opacity: 0;
  transform: scale(0.4);
  transition: width var(--duration-quick) var(--ease-patient),
              margin-right var(--duration-quick) var(--ease-patient),
              opacity var(--duration-quick) ease,
              transform var(--duration-quick) var(--ease-patient);
}
.service-option input:checked + label .opt-check {
  width: 14px;
  margin-right: 7px;
  opacity: 1;
  transform: scale(1);
}
.service-option input:checked + label { padding: 12px 26px; }
.service-option label:hover { border-color: var(--color-gold-soft); }

/* the send button spans the card — one unmistakable action */
.contact-card [type="submit"] {
  width: 100%;
  justify-content: center;
  margin-top: var(--spacing-xs);
}

/* success/error ride inside the card */
.contact-card .form-error { max-width: none; }
.contact-card .form-success {
  max-width: none;
  margin-top: 0;
  background: transparent;
  border: none;
  padding: var(--spacing-sm) 0;
  text-align: center;
}

/* ==========================================================================
   Mobile dropdown fixes (v26)
   ========================================================================== */

/* 1) The active-page "lamp" sits ABOVE its link in the desktop pill; in
   the stacked dropdown that read wrong — on phones it becomes a short
   vertical gold bar hugging the panel's left edge beside the link. */
.nav-mobile-panel .nav-link[aria-current="page"]::before {
  top: 50%;
  left: calc(-1 * var(--spacing-lg));
  width: 3px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 0 999px 999px 0;
  box-shadow:
    0 0 8px 1px rgba(201, 163, 106, 0.75),
    5px 0 16px 3px rgba(201, 163, 106, 0.35),
    9px 0 26px 7px rgba(201, 163, 106, 0.18);
  animation: lamp-in-side 0.6s var(--ease-patient) both;
}
@keyframes lamp-in-side {
  from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* 2) The EN/ΕΛ toggle: .nav-cta's column layout stretched the pill track
   full-width while its two 44px buttons hugged the left — so the 50%-wide
   thumb covered half the track but BOTH labels sat in its first half.
   In the dropdown the toggle is now an honest full-width segmented
   control: the buttons flex to half the track each, matching the thumb. */
.nav-mobile-panel .lang-toggle { width: 100%; }
.nav-mobile-panel .lang-btn { flex: 1; width: auto; }

/* ==========================================================================
   Blueprint Hero — Interior & Exterior Design (v27)
   The designhero.png reference (gold wireframe house in darkness)
   recreated as a hand-drawn SVG so it can live: every line draws itself
   on load (framer-motion pathLength language, vanilla dashoffset), the
   whole drawing warps in perspective as you scroll away and leans
   toward the cursor (js), and a drafting crosshair follows the mouse.
   Gold-as-light only — glows are the lamp precedent, not elevation.
   ========================================================================== */

.hero--design { perspective: 1100px; }
.hero--design > .container { position: relative; z-index: 2; }

.hero-wire-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-wire {
  position: absolute;
  right: -4%;
  bottom: -2%;
  width: min(76vw, 1040px);
  height: auto;
}
.hero-wire path {
  stroke: var(--color-gold);
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hero-wire .w-faint  { opacity: .13; stroke-width: 1; }
.hero-wire .w-line   { opacity: .3;  stroke-width: 1; }
.hero-wire .w-strong { opacity: .55; stroke-width: 1.4; }
.hero-wire .w-lit    { stroke: url(#wireGold); stroke-width: 2.4; opacity: .95; }
.hero-wire .w-glow   { stroke: var(--color-gold); stroke-width: 8; opacity: .15; filter: blur(5px); }

/* the building constructs itself: staggered line-draw on load, then the
   lit edges breathe slowly like interior light. (v28) the lit/glow rules
   re-declare animation-delay — the multi-animation shorthand was
   silently resetting the --d stagger, so lit edges drew at 0s. */
@media (prefers-reduced-motion: no-preference) {
  .hero-wire path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: wire-draw 1.5s var(--ease-patient) both;
    animation-delay: var(--d, 0s);
  }
  .hero-wire .w-lit {
    animation: wire-draw 1.5s var(--ease-patient) both,
               wire-breathe 9s ease-in-out infinite;
    animation-delay: var(--d, 0s), 4s;
  }
  .hero-wire .w-glow {
    animation: wire-draw 1.5s var(--ease-patient) both,
               wire-breathe-soft 9s ease-in-out infinite;
    animation-delay: var(--d, 0s), 4s;
  }
}
@keyframes wire-draw { to { stroke-dashoffset: 0; } }
@keyframes wire-breathe { 0%, 100% { opacity: .95; } 50% { opacity: .62; } }
@keyframes wire-breathe-soft { 0%, 100% { opacity: .15; } 50% { opacity: .08; } }

/* ---- control-board vocabulary (v28, PM hero) — filled marks that fade
   in (fill-in) and gold bars that grow from their left edge (bar-grow),
   alongside the stroke-drawn grid/lines above ---- */
.hero-wire .w-fill  { fill: var(--color-gold); stroke: none; opacity: .78; }
.hero-wire .w-dim   { fill: var(--color-gold); stroke: none; opacity: .32; }
.hero-wire .w-box   { fill: none; stroke: var(--color-gold); stroke-width: 1; opacity: .45; }
.hero-wire .w-frame { fill: rgba(201, 163, 106, 0.06); stroke: var(--color-gold); stroke-width: 1; opacity: .8; }
.hero-wire .w-halo  { fill: var(--color-gold); stroke: none; opacity: .08; filter: blur(18px); }
.hero-wire .w-bar   { fill: url(#wireGold); stroke: none; opacity: .92; }
.hero-wire .w-bar-glow { fill: var(--color-gold); stroke: none; opacity: .16; filter: blur(7px); }
@media (prefers-reduced-motion: no-preference) {
  .hero-wire .w-fill,
  .hero-wire .w-dim,
  .hero-wire .w-box,
  .hero-wire .w-frame,
  .hero-wire .w-halo {
    animation: wire-fill-in 0.9s ease both;
    animation-delay: var(--d, 0s);
  }
  .hero-wire .w-bar,
  .hero-wire .w-bar-glow {
    transform-box: fill-box;
    transform-origin: left center;
    animation: wire-bar-grow 1.3s var(--ease-patient) both,
               wire-breathe 9s ease-in-out infinite;
    animation-delay: var(--d, 0s), 4s;
  }
  .hero-wire .w-bar-glow {
    animation: wire-bar-grow 1.3s var(--ease-patient) both,
               wire-breathe-soft 9s ease-in-out infinite;
    animation-delay: var(--d, 0s), 4s;
  }
}
@keyframes wire-fill-in { from { opacity: 0; } }
@keyframes wire-bar-grow { from { transform: scaleX(0); opacity: 0; } }

/* the grid scene fades out toward the text column.
   (v29, owner: "the golden bars are too bright") — the whole board is
   dimmed via parent opacity so even the breathing bars stay soft. */
.hero-wire--grid {
  opacity: 0.75;
  mask-image: linear-gradient(to left, #000 55%, transparent 96%);
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 96%);
}
.hero-wire--grid .w-bar-glow { opacity: 0.12; }

/* drafting crosshair — two hairlines + a gold point riding the cursor
   (fine pointers only; the glow dot is gold-as-light, lamp precedent) */
.hero-cross {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-cross.is-live { opacity: 1; }
.hero-cross-x {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, rgba(201, 163, 106, 0.26) 30%,
    rgba(201, 163, 106, 0.26) 70%, transparent);
}
.hero-cross-y {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(201, 163, 106, 0.26) 30%,
    rgba(201, 163, 106, 0.26) 70%, transparent);
}
.hero-cross-dot {
  position: absolute;
  top: -3px; left: -3px;
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  box-shadow: 0 0 14px 3px rgba(201, 163, 106, 0.55);
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero-cross { display: none; }
}

/* phones: the wireframe dims to a backdrop behind the stacked text */
@media (max-width: 980px) {
  .hero-wire {
    width: 150%;
    right: -46%;
    bottom: 0;
    opacity: .55;
  }
}

/* perspective tilt-in reveal (v27) — sections on the design page rise
   with a slight rotateX so the page itself feels drafted in 3D. Rides
   the v10 reveal system; the class is added by js alongside .rv. */
.rv.rv--tilt {
  transform: perspective(1000px) rotateX(9deg) translateY(30px);
  transform-origin: 50% 85%;
}
.rv--tilt.in {
  transform: perspective(1000px) rotateX(0deg) translateY(0);
}

/* ==========================================================================
   Clarity & Play Pass (v31) — service paths in the home hero, icon
   feature tiles on the PM page, building-type tags on the design panels,
   and an honest "coming soon" empty state for the portfolio carousel.
   Tokens/motion tiers only; icons follow the site's 1.5-stroke line
   language; everything rides the existing reveal + hover vocabulary.
   ========================================================================== */

/* Home hero: the two service entry buttons reveal after the lede */
.hero-reveal-actions {
  opacity: 0;
  animation: hero-lede-appear 1s ease-out forwards;
  animation-delay: 1.2s;
}
/* Greek labels are long — let hero buttons wrap on narrow screens */
.hero-actions .btn { white-space: normal; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .hero-reveal-actions { animation: none !important; opacity: 1 !important; }
}

/* PM "What We Handle" — 2×2 icon tiles (was a plain check-list) */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.feature-tile {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--color-charcoal-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  transition: transform var(--duration-lift) var(--ease-patient),
              border-color var(--duration-quick) ease;
}
.feature-tile:hover {
  transform: translateY(-6px);
  border-color: var(--color-gold-soft);
}
.feature-tile .service-ico {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  margin-bottom: 0;
}
.feature-tile:hover .service-ico {
  transform: rotate(-10deg) scale(1.06);
  border-color: var(--color-gold);
}
.feature-tile p {
  font-family: var(--font-manrope);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-silver);
}
@media (max-width: 760px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* Design page panels — building-type tags (gold icon + label pills) */
.panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
}
.panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline);
  font-family: var(--font-manrope);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-off-white);
  transition: border-color var(--duration-quick) ease;
}
.panel-tag svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.panel:hover .panel-tag { border-color: var(--color-gold-soft); }

/* Portfolio empty state — drafting corners reuse .card-corner (v29);
   the dashed border + gold corner brackets read as a surveyed plot
   awaiting its photo, not a broken card. */
.portfolio-card .card-corner { opacity: 0.7; }

/* ==========================================================================
   Booking-Platform Vibe Pass (v32) — PM page only
   The v28 abstract ops grid read as "generic dashboard"; the hero board
   is recomposed from booking vocabulary (listing card, calendar of
   booked nights, guest chat, rating stars) using the same w-* classes,
   so all v27/v28 draw/breathe machinery applies unchanged. The trust
   stats echo it with small gold platform icons.
   ========================================================================== */

.stat-ico {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-gold);
  margin-bottom: var(--spacing-sm);
  min-height: 22px;
}
.stat-ico svg { display: block; }

/* ==========================================================================
   Privacy + SEO Pass (v33) — legal page prose, footer privacy link,
   PM platform chips. All absolute URLs across the site assume the
   production domain https://gengroup.gr — if the final domain differs,
   find-and-replace it in the 6 pages + sitemap.xml + robots.txt.
   ========================================================================== */

.legal-section {
  padding-top: calc(96px + var(--spacing-2xl));
  padding-bottom: var(--section-gap);
}
.legal { max-width: 800px; }
.legal h1 { margin-bottom: var(--spacing-sm); }
.legal-updated {
  font-family: var(--font-manrope);
  font-size: 14px;
  color: var(--color-ash-readable);
  margin-bottom: var(--spacing-xl);
}
.legal h2 { margin: var(--spacing-xl) 0 var(--spacing-sm); }
.legal p {
  color: var(--color-silver);
  line-height: 1.7;
  max-width: 72ch;
}
.legal a {
  color: var(--color-gold);
  text-decoration: underline;
  text-decoration-color: var(--color-gold-soft);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-quick) ease;
}
.legal a:hover { text-decoration-color: var(--color-gold); }

.footer-legal-link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--duration-quick) ease,
              text-decoration-color var(--duration-quick) ease;
}
.footer-legal-link:hover {
  color: var(--color-gold);
  text-decoration-color: var(--color-gold-soft);
}

/* PM hero: the platforms, named — quiet gold chips under the lede */
.platform-strip { margin-top: var(--spacing-md); }
.platform-strip .panel-tag {
  border-color: var(--color-gold-soft);
  color: var(--color-off-white);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Welcoming Contact Pass (v34) — the response-time promise and the
   privacy microline move to the moment of decision: a quiet reassure
   strip under the send button (inside the form, so it hides with it on
   success). Plus a FormSubmit _autoresponse so the visitor's inbox gets
   a bilingual confirmation the moment they submit.
   ========================================================================== */

.form-reassure {
  margin-top: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs) var(--spacing-lg);
  font-family: var(--font-manrope);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ash-readable);
}
.reassure-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.reassure-item svg {
  width: 15px;
  height: 15px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.form-reassure a {
  color: var(--color-silver);
  text-decoration: underline;
  text-decoration-color: var(--color-gold-soft);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-quick) ease, color var(--duration-quick) ease;
}
.form-reassure a:hover { color: var(--color-gold); text-decoration-color: var(--color-gold); }

/* ==========================================================================
   Phone Fit Pass (v36) — mobile bugs & space miss-outs (owner report).
   Measured at 375×812: inner-page heroes carried 370–430px of empty
   viewport (100svh centering ~400px of content); 1fr stat columns went
   uneven when a long number stretched one side; index's 3rd stat tile
   orphaned in the 2-col grid; footer-bottom stacked ragged-left.
   ========================================================================== */

@media (max-width: 640px) {
  /* Inner-page heroes: content-sized instead of full-viewport — the
     text starts where the visitor looks, no dead dark screen. The home
     hero keeps its full-viewport landing moment (scroll cue intact). */
  .hero--page {
    min-height: 0;
    padding-top: calc(76px + var(--spacing-xl));
    padding-bottom: var(--spacing-xl);
  }
  /* the drawn boards (PM grid / design wireframe) keep a little stage
     below the text so the art reads as a scene, not a texture */
  .hero--design { padding-bottom: 140px; }

  /* Equal stat columns no matter how long the number is */
  .stat-grid,
  .stat-grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* An odd tile count: the last tile spans the row instead of
     orphaning beside an empty cell. (Not the featured grid — its
     first tile is the full-width one.) */
  .stat-grid:not(.stat-grid--featured) .stat-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Footer bottom: a centered stack instead of a ragged wrap */
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
}

/* Short phones (e.g. 375×667): the scroll cue collided with the hero
   service buttons (Greek labels are tallest). No room for a cue there —
   the next section already peeks over the fold. */
@media (max-width: 640px) and (max-height: 720px) {
  .scroll-cue { display: none; }
}

/* ==========================================================================
   Hero Atmosphere + Menu Polish Pass (v37) — owner phone report:
   dropdown active-state looked broken (translucent pill around a
   wrapped 2-line label + lamp glow smearing outside the panel), and
   hero texture missing on the phone (iOS Reduce Motion / WebGL loss
   silently kills the mesh, leaving flat charcoal).
   ========================================================================== */

/* 1) Mobile dropdown active state: the side bar alone marks the current
   page — the desktop pill background read as a glitch around wrapped
   labels. Lamp pulled inside the panel, glow tightened. */
.nav-mobile-panel .nav-link[aria-current="page"] {
  background: none;
  border-radius: 0;
}
.nav-mobile-panel .nav-link[aria-current="page"]::before {
  left: -22px;
  box-shadow:
    0 0 6px 1px rgba(201, 163, 106, 0.55),
    3px 0 10px 2px rgba(201, 163, 106, 0.22);
}

/* 2) Hero atmosphere that cannot fail: a static layer on every hero —
   a warm gold wash from the top-left over a charcoal-2 → charcoal
   tonal ramp (tokens only). It sits under the mesh (which covers it
   when WebGL runs) and IS the texture when the mesh never starts
   (prefers-reduced-motion, WebGL unavailable, JS off). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(201, 163, 106, 0.13), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(201, 163, 106, 0.05), transparent 60%),
    linear-gradient(165deg, var(--color-charcoal-2) 0%, var(--color-charcoal) 60%);
}

/* 3) The drawn boards were nearly invisible on phones (.55) — give
   them real presence; text keeps its own stacking layer above. */
@media (max-width: 980px) {
  .hero-wire { opacity: 0.7; }
}