/* ==========================================================================
   Вектор Захисту — адвокатське бюро
   Implementation of the Claude Design canvas `Вектор Захисту.dc.html`.
   Markup is generated by build.js; this file owns every visual decision.
   ========================================================================== */

/* ── webfonts ───────────────────────────────────────────────────────────────
   Self-hosted rather than pulled from fonts.googleapis.com. The Google Fonts
   <link> was a render-blocking stylesheet on a third-party origin: the browser
   had to open two connections and finish a round trip before it could even
   discover the font files. These are the same two families as variable fonts,
   preloaded from the page head, so the text paints on the first connection.
   Only the subsets a Ukrainian page can actually need are shipped — greek and
   vietnamese are dropped — and unicode-range keeps the browser from
   downloading a subset the page never uses.
   Regenerate: fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300..700
   &family=Manrope:wght@200..700&display=swap
   ─────────────────────────────────────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  --gold:        #c9a44c;
  --gold-lt:     #d9b978;
  --gold-2:      #e2c489;
  --gold-3:      #e6c68a;
  --gold-soft:   #b9985a;
  --gold-pale:   #dfc188;

  --ink:         #04080e;
  --ink-2:       #060b13;

  --text:        #d6dce6;
  --text-hi:     #e4e9f1;
  --text-lo:     #c4cbd7;
  --muted:       #a4adbc;
  --muted-2:     #9aa3b2;
  --dim:         #79818f;
  --dim-2:       #8b93a2;

  --line:        rgba(201, 164, 76, 0.16);
  --line-soft:   rgba(201, 164, 76, 0.13);

  --serif:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:        'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Horizontal page gutter. --pad-wide is the desktop chrome (top bar, masthead,
     hero) which never drops below 40px; --pad is the content gutter. */
  --pad:         clamp(15px, 4.2vw, 80px);
  --pad-wide:    clamp(40px, 4.2vw, 80px);

  --grad-gold:   linear-gradient(135deg, #ecd191 0%, #c9a04d 55%, #a87e37 100%);
  --grad-gold-h: linear-gradient(135deg, #f6e2b3 0%, #d8ae58 55%, #b98d40 100%);
  --gg:          linear-gradient(172deg, #fbeecb, #e0bf7d 45%, #b9903f);
}

/* ── reset / base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  font-family: var(--sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; }
address { font-style: normal; }

a { color: #cfa855; text-decoration: none; }
a:hover { color: #eed49a; }
::selection { background: rgba(201, 164, 76, 0.3); }

:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--grad-gold);
  color: #0a1120;
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.skip:focus { left: 0; color: #0a1120; }

/* Anchor targets clear the sticky mobile header. */
section[id] { scroll-margin-top: 84px; }

/* ── page shell ─────────────────────────────────────────────────────────── */
.page {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background: linear-gradient(180deg, #070c14 0%, #080e18 24%, #060b13 62%, #04080e 100%);
  /* `clip` rather than `hidden`: it contains the decorative overflow without
     turning the page into a scroll container, so position:sticky still works. */
  overflow: clip;
}

.noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* ── responsive switch (the design's `breakpoint` prop) ─────────────────────
   The canvas renders two separate header/hero trees and picks one from a JS
   width prop. Here each tree keeps its natural display value and the media
   query simply hides the other one. */
@media (min-width: 1120px) { .m-only { display: none !important; } }
@media (max-width: 1119.98px) { .d-only { display: none !important; } }

/* ── shared atoms ───────────────────────────────────────────────────────── */
.gold { color: var(--gold); display: inline-flex; }
.gold-on-dark { color: #0a1120; display: inline-flex; }
.ico, .arw { flex: none; }

/* Gold gradient type — with a solid fallback where background-clip:text is
   unsupported, so headings never render invisible. */
.gold-text { color: var(--gold-3); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text {
    background-image: var(--gg);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.gold-text--hero { --gg: linear-gradient(172deg, #fbeecb 0%, #e2c283 30%, #c49a4a 62%, #9d7532 100%); }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--gold-soft);
}
.eyebrow--sm { font-size: 11.5px; letter-spacing: 0.24em; }

.eyebrow-row { display: flex; align-items: center; gap: 13px; }
.eyebrow-row--c { justify-content: center; gap: 10px; }
.eyebrow-line {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow-line--sm { width: 26px; }
.eyebrow-line--w { width: clamp(28px, 3.6vw, 46px); }
.eyebrow-line--r { background: linear-gradient(90deg, var(--gold), transparent); }

.rule-l { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 164, 76, 0.65)); }
.rule-r { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 164, 76, 0.65), transparent); }
.rule-flip { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 164, 76, 0.6), transparent); }

.diamond { width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); flex: none; }
.diamond--lg { width: 6px; height: 6px; }

.corner-tl, .corner-br {
  position: absolute;
  width: var(--c, 13px);
  height: var(--c, 13px);
  pointer-events: none;
}
.corner-tl { top: -1px; left: -1px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.corner-br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn-gold {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--grad-gold);
  padding: 18px 26px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #0a1120;
  white-space: nowrap;
}
.btn-gold:hover { background: var(--grad-gold-h); color: #0a1120; }

.btn-gold--nav   { flex: none; gap: 10px; padding: 15px clamp(18px, 1.6vw, 26px); font-size: 13px; box-shadow: 0 10px 26px -14px rgba(201, 164, 76, 0.75); }
.btn-gold--hero  { gap: 13px; padding: 18px 30px; box-shadow: 0 16px 34px -16px rgba(201, 164, 76, 0.8); }
.btn-gold--menu  { display: flex; margin-top: 16px; padding: 17px 20px; }
.btn-gold--mhero { display: flex; padding: 18px 22px; letter-spacing: 0.15em; box-shadow: 0 16px 34px -18px rgba(201, 164, 76, 0.85); }
.btn-gold--sm    { margin-top: clamp(24px, 2.2vw, 36px); gap: 11px; padding: 15px 26px; font-size: 12.5px; }
.btn-gold--bar   { gap: 10px; padding: 19px 10px; font-size: 13px; letter-spacing: 0.14em; }

.btn-tel {
  gap: 14px;
  padding: clamp(16px, 1.4vw, 22px) clamp(26px, 2.6vw, 40px);
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 28px);
  letter-spacing: 0.09em;
  box-shadow: 0 18px 40px -18px rgba(201, 164, 76, 0.85);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid rgba(201, 164, 76, 0.45);
  padding: 18px 26px;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--gold-pale);
}
.btn-ghost:hover { background: rgba(201, 164, 76, 0.1); border-color: var(--gold); color: var(--gold-pale); }
.btn-ghost--block { display: flex; padding: 17px 22px; letter-spacing: 0.15em; }
.btn-ghost--sm    { align-self: flex-start; gap: 10px; padding: 13px 20px; font-size: 12px; }
.btn-ghost--cta   { padding: clamp(16px, 1.4vw, 22px) clamp(22px, 2.2vw, 30px); letter-spacing: 0.15em; }

/* Gold sweep across the CTAs. */
.shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.62) 48%, rgba(255,255,255,0) 100%);
  animation: vzShine var(--sd, 3.4s) cubic-bezier(.35, 0, .25, 1) var(--sdl, 0s) infinite;
  pointer-events: none;
}
@keyframes vzShine {
  0%   { transform: translateX(-150%) skewX(-18deg); opacity: 0; }
  12%  { opacity: 1; }
  60%  { transform: translateX(260%) skewX(-18deg); opacity: 1; }
  62%  { opacity: 0; }
  100% { transform: translateX(260%) skewX(-18deg); opacity: 0; }
}

/* ── desktop top bar ────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--pad-wide);
  height: clamp(38px, 2.6vw, 48px);
  background: var(--ink);
  border-bottom: 1px solid rgba(201, 164, 76, 0.12);
}
.topbar-side { display: flex; align-items: center; gap: 26px; }
.topbar-side + .topbar-side { gap: 22px; }
.topbar-t { font-size: 12px; font-weight: 300; letter-spacing: 0.2em; color: #7f889a; white-space: nowrap; }
.topbar-tel { font-size: 13.5px; letter-spacing: 0.14em; color: var(--gold-lt); white-space: nowrap; }
.divider-v { width: 1px; height: 11px; background: rgba(201, 164, 76, 0.25); flex: none; }

/* ── desktop masthead ───────────────────────────────────────────────────── */
.masthead {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 14px;
  column-gap: clamp(18px, 3vw, 60px);
  padding: clamp(20px, 1.4vw, 28px) var(--pad-wide);
  background: rgba(5, 9, 16, 0.94);
  border-bottom: 1px solid var(--line);
}
.masthead .brand { display: flex; align-items: center; gap: clamp(13px, 1vw, 18px); flex: 0 0 auto; min-width: 0; }
.masthead .brand img { width: clamp(56px, 4.6vw, 84px); height: auto; object-fit: contain; }
.masthead nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: clamp(14px, 2.4vw, 46px);
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.masthead nav a {
  font-size: 13.5px;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: #b7bfcc;
  padding-bottom: 7px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.masthead nav a:hover { color: #e5c98d; border-bottom-color: rgba(201, 164, 76, 0.5); }
.masthead nav a.is-active { font-weight: 500; color: #e5c98d; border-bottom-color: var(--gold); }

/* ── desktop hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 2;
  min-height: clamp(392px, 30.6vw, 560px);
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(201, 164, 76, 0.18);
}
.hero-media { position: absolute; right: 20.2%; top: 0; bottom: 5%; width: 33.6%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media span { position: absolute; }
.hero-fade-l { inset: 0; background: linear-gradient(90deg, #080e18 0%, rgba(8,14,24,0.6) 20%, rgba(8,14,24,0) 52%); }
.hero-fade-r { inset: 0; background: linear-gradient(270deg, #080e18 0%, rgba(8,14,24,0.25) 16%, rgba(8,14,24,0) 44%); }
.hero-fade-b { left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(0deg, #060b13, rgba(8,14,24,0)); }
.hero-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 44%;
  height: 100%;
  background: radial-gradient(44vw 300px at 8% 30%, rgba(201, 164, 76, 0.09), transparent 70%);
  pointer-events: none;
}
.hero-copy { position: relative; padding: clamp(44px, 4.2vw, 78px) 0 0 var(--pad-wide); width: 52%; }
.hero-title {
  margin: clamp(20px, 1.6vw, 28px) 0 0;
  font-family: var(--serif);
  font-size: clamp(56px, 5.15vw, 98px);
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1;
  text-shadow: 0 24px 60px rgba(201, 164, 76, 0.14);
}
.rule-row { display: flex; align-items: center; gap: 18px; margin-top: clamp(20px, 1.6vw, 28px); width: 90%; }
.rule-row--c { justify-content: center; gap: 12px; width: auto; margin-top: 14px; }
.rule-txt {
  font-size: clamp(16px, 1.3vw, 24px);
  font-weight: 300;
  letter-spacing: 0.16em;
  color: #eef1f6;
  white-space: nowrap;
}
.rule-txt--sm { font-size: 13px; letter-spacing: 0.14em; }
.hero-lede {
  margin: clamp(32px, 3vw, 54px) 0 0;
  font-size: clamp(16px, 1.15vw, 21px);
  font-weight: 200;
  line-height: 1.95;
  color: #c2c9d5;
  letter-spacing: 0.01em;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: clamp(26px, 2.6vw, 40px); }

.hero-card {
  position: absolute;
  right: var(--pad-wide);
  top: clamp(52px, 4vw, 74px);
  /* Floor raised from the canvas's 226px. The design was authored at 1920px,
     where 15vw = 288px and everything fits. Below ~1680px the canvas's 226px
     floor wrapped the phone number onto a second line and pushed the address
     to five lines; 252px is the measured width where both match the reference. */
  width: clamp(252px, 15vw, 288px);
  padding: clamp(24px, 1.7vw, 32px) clamp(22px, 1.6vw, 30px);
  background: linear-gradient(160deg, rgba(15, 25, 41, 0.96), rgba(6, 11, 19, 0.96));
  border: 1px solid rgba(201, 164, 76, 0.4);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.card-row { display: flex; align-items: center; gap: 14px; }
.card-row--top { align-items: flex-start; }
.card-txt { font-size: 13.5px; font-weight: 300; letter-spacing: 0.09em; line-height: 1.7; color: #e4e8f0; }
.card-sep { display: flex; align-items: center; gap: 10px; }
.card-sep .rule-l, .card-sep .rule-r {
  background: linear-gradient(90deg, transparent, rgba(201, 164, 76, 0.45), transparent);
}
.card-tel { font-size: 16.5px; font-weight: 400; letter-spacing: 0.06em; color: #e8cd92; }

/* ── mobile header ──────────────────────────────────────────────────────── */
.m-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(4, 8, 14, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201, 164, 76, 0.2);
}
.m-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; }
.m-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-brand img { width: 46px; height: auto; object-fit: contain; }
.m-acts { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(201, 164, 76, 0.4);
  color: var(--gold-lt);
}
.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgba(201, 164, 76, 0.16), rgba(201, 164, 76, 0.03));
  border: 1px solid rgba(201, 164, 76, 0.4);
  cursor: pointer;
  padding: 0;
}
.burger span { width: 20px; height: 1.5px; background: var(--gold-lt); transition: transform .22s ease, opacity .18s ease; }
.m-header[data-menu="true"] .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.m-header[data-menu="true"] .burger span:nth-child(2) { opacity: 0; }
.m-header[data-menu="true"] .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.m-nav {
  border-top: 1px solid var(--line);
  padding: 14px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #060b12;
}
.m-header[data-menu="false"] .m-nav { display: none; }
.m-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  font-size: 14.5px;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: #cfd5df;
  border-bottom: 1px solid rgba(201, 164, 76, 0.1);
}
.m-nav a .arw { color: #9a7f42; }
.m-nav a.btn-gold { border-bottom: 0; color: #0a1120; }

/* ── mobile hero ────────────────────────────────────────────────────────── */
.m-hero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(201, 164, 76, 0.18); }
.m-hero-media { position: relative; height: clamp(240px, 60vw, 340px); }
.m-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 28%; }
.m-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,8,14,0.5) 0%, rgba(6,11,19,0.35) 42%, rgba(6,11,19,0.92) 82%, #060b13 100%);
}
.m-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 50% 40%, rgba(201, 164, 76, 0.12), transparent 70%);
}
.m-hero-copy { position: relative; margin-top: -74px; padding: 0 18px 30px; text-align: center; }
.m-hero-title {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: clamp(38px, 11vw, 58px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.02;
}
.m-hero-lede { margin: 20px auto 0; max-width: 420px; font-size: 15.5px; font-weight: 200; line-height: 1.85; color: #c2c9d5; }
.m-hero-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.m-hero-card {
  margin-top: 26px;
  border: 1px solid rgba(201, 164, 76, 0.3);
  background: linear-gradient(160deg, rgba(15, 25, 41, 0.9), rgba(6, 11, 19, 0.9));
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.m-hero-card .card-row { gap: 13px; }
.m-card-txt { font-size: 13.5px; font-weight: 300; letter-spacing: 0.08em; color: #e4e8f0; }
.m-card-sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 164, 76, 0.4), transparent); }
.m-card-tel {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #e8cd92;
}

/* ── services ───────────────────────────────────────────────────────────── */
.services { position: relative; z-index: 2; padding: clamp(38px, 4vw, 80px) var(--pad) clamp(40px, 4.2vw, 84px); }
.sec-eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sec-eyebrow .eyebrow { text-align: center; }
.sec-title {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 56px);
  font-weight: 600;
  letter-spacing: 0.14em;
}
.sec-lede {
  margin: 18px auto clamp(28px, 2.8vw, 52px);
  max-width: clamp(320px, 50vw, 900px);
  text-align: center;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 200;
  line-height: 1.9;
  color: var(--muted);
  text-wrap: pretty;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr));
  gap: clamp(12px, 1.3vw, 26px);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(150px, 12.5vw, 226px);
  border: 1px solid rgba(201, 164, 76, 0.22);
  background: linear-gradient(165deg, rgba(14, 22, 37, 0.92), rgba(6, 11, 19, 0.92));
  padding: clamp(18px, 1.5vw, 30px) clamp(18px, 1.5vw, 30px) clamp(14px, 1.2vw, 24px);
  color: inherit;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover {
  border-color: rgba(201, 164, 76, 0.65);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.95);
  color: inherit;
}
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-num { font-family: var(--serif); font-size: 24px; font-weight: 500; color: rgba(201, 164, 76, 0.42); line-height: 1; }
.card-title { margin-top: 16px; font-size: clamp(13.5px, 0.95vw, 17px); font-weight: 500; letter-spacing: 0.09em; color: var(--gold-2); line-height: 1.5; }
.card-sum { margin-top: 10px; font-size: clamp(13px, 0.9vw, 16px); font-weight: 200; line-height: 1.8; color: #a9b2c1; }
.card-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.card-count { font-size: 11.5px; font-weight: 300; letter-spacing: 0.16em; color: var(--dim); }
.card-foot .arw { color: #a3874a; }

/* ── why us ─────────────────────────────────────────────────────────────── */
.why {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 2.4vw, 48px);
  border-top: 1px solid rgba(201, 164, 76, 0.18);
  background: linear-gradient(180deg, rgba(5, 10, 17, 0.92), rgba(3, 7, 12, 0.92));
  padding: clamp(30px, 2.6vw, 52px) var(--pad);
}
.why-head { flex: 0 1 clamp(280px, 26vw, 400px); }
.why-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 1.95vw, 36px);
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.2;
  color: #e0be80;
}
.why-rule { display: flex; align-items: center; gap: 9px; margin-top: 13px; width: 140px; }
.why-grid {
  flex: 1 1 min(100%, 560px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(20px, 2.4vw, 48px);
}
.adv { display: flex; align-items: flex-start; gap: 14px; }
.adv-ico {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 164, 76, 0.28);
  background: linear-gradient(145deg, rgba(201, 164, 76, 0.13), rgba(201, 164, 76, 0.02));
  color: var(--gold);
}
.adv-t { font-size: clamp(13.5px, 0.95vw, 17px); font-weight: 500; letter-spacing: 0.11em; color: var(--gold-2); }
.adv-x { margin-top: 9px; font-size: clamp(14px, 1vw, 18px); font-weight: 200; line-height: 1.8; color: #b6bec9; }

/* ── about ──────────────────────────────────────────────────────────────── */
.about {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(40px, 4.2vw, 84px) var(--pad);
}
.about-head { max-width: clamp(320px, 64vw, 1040px); }
.about h2 {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: clamp(27px, 2.5vw, 46px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.18;
  text-wrap: pretty;
}
.about-lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15.5px, 1.1vw, 20px);
  font-weight: 300;
  line-height: 1.85;
  color: #c8cfdb;
  text-wrap: pretty;
}
.about-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(18px, 2.2vw, 44px);
  margin-top: clamp(24px, 2.6vw, 46px);
}
.about-body p {
  margin: 0;
  font-size: clamp(14.5px, 1vw, 17px);
  font-weight: 200;
  line-height: 1.95;
  color: var(--muted);
  text-wrap: pretty;
}
.about-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(14px, 1.6vw, 30px);
  margin: clamp(26px, 2.8vw, 50px) 0 0;
  padding-top: clamp(22px, 2.2vw, 36px);
  border-top: 1px solid var(--line);
}
.about-fact dt {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.about-fact dd {
  margin: 10px 0 0;
  font-size: clamp(14px, 0.95vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  color: #b9c1ce;
}

/* ── team ───────────────────────────────────────────────────────────────── */
.team {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(40px, 4.2vw, 84px) var(--pad);
}
.team-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 2vw, 34px);
}
.team-head h2 {
  margin: 14px 0 0;
  max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 56px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-wrap: pretty;
}
.team-head p {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.02vw, 18px);
  font-weight: 200;
  line-height: 1.85;
  color: var(--muted-2);
  text-wrap: pretty;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(12px, 1.7vw, 30px);
  margin-top: clamp(28px, 2.8vw, 50px);
}
.member { margin: 0; }
.member-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(201, 164, 76, 0.26);
  overflow: hidden;
}
.member-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.94);
}
.member-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 11, 19, 0) 48%, rgba(4, 8, 14, 0.75) 100%);
  pointer-events: none;
}
.member-role { margin-top: 15px; font-size: 12px; font-weight: 400; letter-spacing: 0.2em; color: var(--gold-soft); }
.member-name {
  margin-top: 9px;
  font-family: var(--serif);
  font-size: clamp(21px, 1.6vw, 28px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: #f2e7cf;
  text-wrap: pretty;
}

/* ── creed ──────────────────────────────────────────────────────────────── */
.creed {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  padding: clamp(36px, 3.6vw, 70px) var(--pad);
  text-align: center;
  overflow: hidden;
}
.creed-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 50%, rgba(201, 164, 76, 0.08), transparent 72%);
  pointer-events: none;
}
.creed-rule {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 22px;
  max-width: 200px;
}
.creed p {
  position: relative;
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--serif);
  font-size: clamp(27px, 2.8vw, 52px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.18;
  text-wrap: balance;
}
/* The 24ch cap exists to shape the wrap on narrow screens. On desktop there is
   room for the whole line, and the phrase reads better unbroken. */
@media (min-width: 1120px) {
  .creed p { max-width: none; white-space: nowrap; }
}

/* ── practice-area blocks ───────────────────────────────────────────────── */
/* The tonal alternation between sections is too subtle to register, so the
   seam does the work: a hairline that brightens toward the centre. */
.block { position: relative; z-index: 2; overflow: hidden; }
.block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201, 164, 76, 0.05) 0%,
    rgba(201, 164, 76, 0.34) 50%,
    rgba(201, 164, 76, 0.05) 100%);
  pointer-events: none;
}

/* row detail control — shared by every variant.
   Rows short enough to read in place carry no control at all; the ones that do
   keep their tail in the DOM but hidden, and the button opens it in a dialog. */
.lead { color: var(--text-hi); }
.row-text .tail { display: none; color: var(--dim-2); }
.row-more {
  margin-left: 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(201, 164, 76, 0.45);
  padding: 4px 2px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
  cursor: pointer;
  white-space: nowrap;
  min-height: 30px;
}
.row-more:hover { color: #e5c98d; border-bottom-color: var(--gold); }
/* Without JS the button can open nothing, so show the full text instead. */
.no-js .row-text .tail { display: inline; }
.no-js .row-text .ell,
.no-js .row-more { display: none; }

/* ── detail dialog ──────────────────────────────────────────────────────── */
.detail {
  width: min(680px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--text);
}
.detail::backdrop {
  background: rgba(2, 5, 10, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
/* The panel is the frame: it holds the border, the corner marks and the close
   button. Scrolling happens on the inner wrapper so none of those get clipped
   or scroll out of reach on a long entry. */
.detail-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(84vh, 760px);
  background: linear-gradient(160deg, rgba(15, 25, 41, 0.98), rgba(6, 11, 19, 0.99));
  border: 1px solid rgba(201, 164, 76, 0.4);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.95);
}
.detail-panel:focus { outline: none; }
.detail-scroll {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(26px, 3.4vw, 44px) clamp(20px, 3vw, 46px) clamp(24px, 3vw, 40px);
}
.detail-close {
  position: absolute;
  top: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(201, 164, 76, 0.28);
  color: var(--gold-lt);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.detail-close:hover { background: rgba(201, 164, 76, 0.12); border-color: var(--gold); }
/* Sits above the scrolling text, so it needs its own ground. */
.detail-close { background: rgba(8, 14, 24, 0.92); z-index: 1; }
.detail-kicker {
  display: block;
  padding-right: 52px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--gold-soft);
}
.detail-title {
  margin: 14px 0 0;
  padding-right: 52px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-wrap: pretty;
}
.detail-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: clamp(18px, 2vw, 26px) 0;
  max-width: 180px;
}
.detail-text {
  margin: 0;
  font-size: clamp(15.5px, 1.05vw, 19px);
  font-weight: 200;
  line-height: 1.9;
  color: var(--text-lo);
  text-wrap: pretty;
}
.btn-gold--detail {
  align-self: flex-start;
  margin-top: clamp(24px, 2.6vw, 36px);
  padding: 15px 26px;
  font-size: 12.5px;
}
/* The dialog is in the top layer, so the page behind it must not scroll. */
html.dialog-open, html.dialog-open body { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .detail[open] .detail-panel { animation: detailIn .22s cubic-bezier(.2, .7, .3, 1); }
  @keyframes detailIn {
    from { opacity: 0; transform: translateY(10px) scale(.99); }
    to   { opacity: 1; transform: none; }
  }
}

/* Closing row for every block: a quiet route into contact, and a full stop so
   fourteen sections do not read as one uninterrupted column of text. */
.block-foot {
  display: flex;
  /* Sits under the content on the reading edge, not pinned to the far right —
     the eye finishes the grid on the left and the action is waiting there.
     Needs a clear gap: any tighter and it reads as another grid cell. */
  margin-top: clamp(46px, 5.2vw, 92px);
}
/* Variant E is centred on desktop, so its control follows the axis. */
@media (min-width: 1120px) { .v-e .block-foot { justify-content: center; } }

/* .btn-gold--sm carries its own top margin for variant A; .block-foot owns the
   spacing here. */
/* Roomier than the shared --sm modifiers: this one stands alone at the end of
   a section rather than tucked inside a panel, so it needs the presence. */
.block-cta {
  margin-top: 0;
  gap: 13px;
  padding: 17px 32px;
  font-size: 12.5px;
  transition: gap .2s, background .25s, border-color .2s, color .2s;
}
.block-cta:hover { gap: 19px; }
.block-cta .arw { color: currentColor; }

/* Section anchor icon — the practice-area mark now opens D, E and G too,
   not just block 01. */
.e-icon { display: flex; justify-content: center; margin-bottom: 18px; }
/* In variant A the icon row is followed by an h3 that brings its own space;
   in D and G the head sits flush underneath, so it needs the gap here. */
.v-d > .a-icon-row,
.v-g > .a-icon-row { margin-bottom: clamp(18px, 1.8vw, 30px); }

/* variant A — panel + numbered list. The canvas used it for block 01 only;
   that block now uses the same matrix layout as the rest, so these rules are
   unused. Kept so the layout can be switched back from build.js alone. */
.v-a {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(28px, 4vw, 76px);
  padding: clamp(40px, 4.2vw, 84px) var(--pad);
}
.a-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(260px, 24vw, 440px);
  border: 1px solid rgba(201, 164, 76, 0.26);
  background-color: #03070c;
  background-image: repeating-linear-gradient(0deg, rgba(201, 164, 76, 0.11) 0 1px, transparent 1px 34px);
  padding: clamp(22px, 2.2vw, 38px);
  overflow: hidden;
}
.a-ghost {
  position: absolute;
  right: clamp(12px, 1.4vw, 26px);
  bottom: clamp(-6px, -0.3vw, 0px);
  font-family: var(--serif);
  font-size: clamp(96px, 12vw, 210px);
  font-weight: 600;
  line-height: 0.74;
  letter-spacing: -0.02em;
  color: rgba(201, 164, 76, 0.09);
}
.a-panel-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(201, 164, 76, 0.22);
  padding-bottom: clamp(14px, 1.2vw, 20px);
}
.a-panel-kicker { font-size: 12px; font-weight: 400; letter-spacing: 0.24em; color: var(--gold-lt); }
.a-panel-count  { font-size: 12.5px; font-weight: 300; letter-spacing: 0.16em; color: var(--dim); }
.a-panel-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.1vw, 18px);
  margin-top: auto;
  padding-top: clamp(22px, 2vw, 34px);
}
.a-line {
  font-family: var(--serif);
  font-size: clamp(21px, 1.7vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  color: rgba(230, 198, 138, 0.9);
}
.a-icon-row { display: flex; align-items: center; gap: 14px; }
.a-icon-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 164, 76, 0.55), transparent); }
.a-body h3 {
  margin: clamp(18px, 1.6vw, 28px) 0 0;
  font-family: var(--serif);
  font-size: clamp(28px, 2.7vw, 50px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.14;
  text-wrap: pretty;
}
.a-sum {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 200;
  line-height: 1.9;
  color: #a0a9b8;
  text-wrap: pretty;
}
.a-rows { margin-top: clamp(24px, 2.4vw, 40px); }
.a-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  border-top: 1px solid rgba(201, 164, 76, 0.14);
  padding: clamp(14px, 1.2vw, 20px) 0;
}
.a-row-n { font-family: var(--serif); font-size: clamp(17px, 1.3vw, 23px); font-weight: 500; color: rgba(201, 164, 76, 0.75); line-height: 1.5; }
.a-row-t { font-size: clamp(15px, 1.02vw, 18px); font-weight: 200; line-height: 1.85; color: var(--text-lo); text-wrap: pretty; }

/* variant D — headline row + step grid */
.v-d { padding: clamp(40px, 4.2vw, 84px) var(--pad); }
.d-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(16px, 2vw, 34px); }
.d-num { font-family: var(--serif); font-size: clamp(44px, 4.4vw, 84px); font-weight: 600; line-height: 0.9; color: rgba(201, 164, 76, 0.28); }
.d-head h3 {
  margin: 0;
  flex: 1 1 min(100%, 420px);
  font-family: var(--serif);
  font-size: clamp(28px, 2.7vw, 50px);
  font-weight: 600;
  line-height: 1.12;
  color: #f2e7cf;
  text-wrap: pretty;
}
.d-count { font-size: 12.5px; font-weight: 300; letter-spacing: 0.2em; color: var(--dim); }
.d-sum { margin: clamp(16px, 1.4vw, 24px) 0 0; max-width: 62ch; font-size: clamp(15px, 1.05vw, 19px); font-weight: 200; line-height: 1.9; color: #a0a9b8; }
/* Headline figure — the 1 000 000 / 15 000 000 callouts (variants D and G). */
.figure-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(10px, 1.2vw, 20px);
  margin-top: clamp(20px, 1.8vw, 32px);
  border-top: 1px solid rgba(201, 164, 76, 0.22);
  padding-top: clamp(18px, 1.6vw, 28px);
}
.figure {
  font-family: var(--serif);
  font-size: clamp(34px, 3.4vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--gold-3);
}
.figure-note { font-size: 12.5px; font-weight: 300; letter-spacing: 0.18em; color: var(--dim); }

.d-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(18px, 1.8vw, 32px);
  margin-top: clamp(28px, 2.8vw, 50px);
  border-top: 1px solid rgba(201, 164, 76, 0.22);
  padding-top: clamp(24px, 2.2vw, 38px);
}
.d-step { position: relative; padding-top: 32px; }
/* Enlarged from 12px: next to an 84px block number the original marker
   disappeared. The inner dot keeps it from reading as an empty box. */
.d-step-mark {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 17px;
  height: 17px;
  border: 1px solid var(--gold);
  background: transparent;
  transform: rotate(45deg) translateY(-50%);
}
.d-step-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: rgba(201, 164, 76, 0.55);
}
.d-step-t { font-family: var(--serif); font-size: clamp(17px, 1.3vw, 23px); font-weight: 500; color: var(--gold-lt); }
.d-step-x { display: block; margin-top: 10px; font-size: clamp(15px, 1.02vw, 18px); font-weight: 200; line-height: 1.85; color: var(--text-lo); text-wrap: pretty; }

/* variant E — centred lede + card grid */
.v-e { padding: clamp(44px, 4.6vw, 92px) var(--pad); text-align: center; }
.v-e h3 {
  margin: 16px auto 0;
  max-width: 24ch;
  font-family: var(--serif);
  font-size: clamp(28px, 2.7vw, 50px);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}
.e-sum {
  margin: clamp(16px, 1.4vw, 26px) auto 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.1vw, 20px);
  font-weight: 200;
  line-height: 1.9;
  color: #b0b8c4;
  text-wrap: pretty;
}
.e-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: clamp(26px, 2.4vw, 42px) auto;
  max-width: 220px;
}
.e-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 1.6vw, 28px);
  text-align: left;
}
.e-cell {
  border: 1px solid rgba(201, 164, 76, 0.2);
  background: linear-gradient(165deg, rgba(14, 22, 37, 0.6), rgba(6, 11, 19, 0.6));
  padding: clamp(20px, 1.8vw, 30px);
  /* .card and .g-cell both react to the pointer; these did not. */
  transition: border-color .25s, background .25s;
}
.e-cell:hover {
  border-color: rgba(201, 164, 76, 0.45);
  background: linear-gradient(165deg, rgba(18, 28, 46, 0.75), rgba(8, 14, 24, 0.75));
}
.e-n { font-family: var(--serif); font-size: clamp(17px, 1.3vw, 23px); font-weight: 500; color: rgba(201, 164, 76, 0.8); }
.e-x { display: block; margin-top: 12px; font-size: clamp(15px, 1.02vw, 18px); font-weight: 200; line-height: 1.85; color: var(--text-lo); text-wrap: pretty; }

/* variant G — bordered matrix */
.v-g { padding: clamp(40px, 4.2vw, 84px) var(--pad); }
.g-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.g-head h3 {
  margin: 14px 0 0;
  max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(28px, 2.7vw, 50px);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: pretty;
}
.g-head .eyebrow { letter-spacing: 0.24em; font-size: 12px; }
.g-sum { max-width: 40ch; margin: 0; font-size: clamp(15px, 1.02vw, 18px); font-weight: 200; line-height: 1.85; color: var(--muted-2); }
.g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: clamp(26px, 2.4vw, 44px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
/* auto-fit left ragged holes in the closing row — block 13 ended with one
   cell and four gaps. build.js picks the column count with the smallest
   remainder and hands the last cell the leftovers. */
@media (min-width: 1120px) {
  .g-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .g-cell { grid-column: span var(--span, 1); }
}
.g-cell {
  position: relative;
  background: #070d16;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 2vw, 34px) clamp(20px, 1.8vw, 30px);
  transition: background .25s;
}
.g-cell:hover { background: #0e1725; }
.g-n {
  position: absolute;
  top: clamp(14px, 1.2vw, 20px);
  right: clamp(16px, 1.4vw, 24px);
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 30px);
  font-weight: 500;
  color: rgba(201, 164, 76, 0.32);
}
.g-x { display: block; margin-top: clamp(22px, 2vw, 34px); font-size: clamp(15px, 1.02vw, 18px); font-weight: 200; line-height: 1.85; color: var(--text-lo); text-wrap: pretty; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
/* Native <details>: the answers sit in the HTML whether or not they are open,
   the keyboard and screen-reader behaviour is the platform's, and no JavaScript
   is involved — so the text is there for a crawler that never runs a script. */
.faq--off { display: none; }
.faq {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(40px, 4.2vw, 84px) var(--pad) clamp(44px, 4.4vw, 88px);
}
.faq-head { max-width: clamp(320px, 64vw, 1040px); }
.faq h2 {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: clamp(27px, 2.5vw, 46px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.18;
  text-wrap: pretty;
}
.faq-lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 200;
  line-height: 1.9;
  color: var(--muted);
  text-wrap: pretty;
}
.faq-list {
  max-width: 1080px;
  margin-top: clamp(24px, 2.6vw, 46px);
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(15px, 1.5vw, 24px) 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 4px; }
.faq-q {
  font-family: var(--serif);
  font-size: clamp(17px, 1.3vw, 24px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: #ecd9ab;
  text-wrap: pretty;
}
.faq-item summary:hover .faq-q { color: var(--gold-2); }
.faq-mark { position: relative; flex: none; width: 15px; height: 15px; }
.faq-mark::before,
.faq-mark::after { content: ''; position: absolute; background: var(--gold); }
.faq-mark::before { left: 0; right: 0; top: 7px; height: 1px; }
.faq-mark::after { top: 0; bottom: 0; left: 7px; width: 1px; }
.faq-item[open] .faq-mark::after { transform: scaleY(0); }
.faq-a { max-width: 86ch; padding: 0 0 clamp(18px, 1.7vw, 26px); }
.faq-a p {
  margin: 0;
  font-size: clamp(14.5px, 1vw, 17px);
  font-weight: 200;
  line-height: 1.95;
  color: var(--muted);
  text-wrap: pretty;
}
.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.faq-link:hover { color: var(--gold-3); }
.faq-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: clamp(24px, 2.4vw, 40px);
}
.faq-foot-t { font-size: clamp(14px, 1vw, 17px); font-weight: 200; color: var(--muted); }

/* ── contacts ───────────────────────────────────────────────────────────── */
.cta {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(201, 164, 76, 0.2);
  padding: clamp(46px, 4.8vw, 96px) var(--pad) clamp(48px, 5vw, 100px);
  text-align: center;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 260px at 50% 0%, rgba(201, 164, 76, 0.1), transparent 72%);
  pointer-events: none;
}
.cta-in { position: relative; }
.cta h2 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(31px, 3.15vw, 60px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-wrap: pretty;
}
.cta p {
  margin: 20px auto 0;
  max-width: clamp(320px, 44vw, 800px);
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 200;
  line-height: 1.9;
  color: var(--muted);
  text-wrap: pretty;
}
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(26px, 2.8vw, 40px);
}


/* Name, address, phone next to the call to action — the three fields local
   search cross-checks against a Google Business Profile. */
.cta-nap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr));
  gap: clamp(18px, 2.2vw, 40px);
  max-width: 1080px;
  margin: clamp(32px, 3.2vw, 56px) auto 0;
  padding-top: clamp(26px, 2.6vw, 44px);
  border-top: 1px solid rgba(201, 164, 76, 0.16);
  text-align: left;
}
.cta-nap-item { display: flex; align-items: flex-start; gap: 12px; }
.cta-nap-item > .gold { flex: none; margin-top: 2px; }
.cta-nap-k {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.cta-nap-v {
  display: block;
  margin-top: 8px;
  font-size: clamp(13.5px, 0.95vw, 15.5px);
  font-weight: 300;
  line-height: 1.75;
  color: #b9c1ce;
}
.cta-nap-map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--gold-2);
}
.cta-nap-map:hover { color: var(--gold-3); }
.cta-nap-tel { font-size: 15.5px; color: #e8cd92; }

.btn-ghost--cta { gap: 12px; }

/* ── reviews ────────────────────────────────────────────────────────────── */
.reviews {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  padding: clamp(46px, 4.8vw, 96px) var(--pad);
  text-align: center;
}
.reviews h2 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(31px, 3.15vw, 60px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-wrap: pretty;
}
.reviews-lede {
  margin: 18px auto 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 200;
  line-height: 1.9;
  color: var(--muted);
}
.shorts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 28px);
  max-width: 1180px;
  margin: clamp(28px, 3vw, 52px) auto 0;
}
/* Cards read like the channel's own Shorts grid: the cover, rounded, and
   nothing on top of it but a gold play mark. The covers are designed images,
   so they are shown as-is. */
.short {
  position: relative;
  /* YouTube's own Shorts grid crops covers to 2:3, not the full 9:16. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  background: var(--ink-2);
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.95);
}
.short-link, .short-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; color: inherit; }
.short-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.short-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 14, 0.25);
  opacity: 0;
  transition: opacity .3s ease;
}
.short-link:hover img { transform: scale(1.04); }
.short-link:hover::after, .short-link:focus-visible::after { opacity: 1; }
.short-link:focus-visible { outline-offset: -3px; }
.short-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #0a1120;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8);
  transition: transform .25s ease, background .25s ease;
}
.short-play svg { margin-left: 3px; }
.short-link:hover .short-play, .short-link:focus-visible .short-play { transform: scale(1.08); background: var(--grad-gold-h); }
/* The empty slot is a finished card, not a hole: the mark, a rule, and a route
   to the channel where the next video will appear. */
.short--soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  background:
    radial-gradient(120% 60% at 50% 38%, rgba(201, 164, 76, 0.14), transparent 70%),
    linear-gradient(180deg, #0b1320, var(--ink));
  color: inherit;
  text-align: center;
}
.short--soon:hover { color: inherit; }
.short-soon-mark { width: clamp(52px, 4.4vw, 76px); height: auto; opacity: 0.9; }
.short-soon-rule { display: flex; align-items: center; gap: 8px; width: 70%; margin-top: 22px; }
.short-soon-t { margin-top: 18px; font-family: var(--serif); font-size: clamp(20px, 1.6vw, 28px); font-weight: 600; color: var(--gold-3); }
.short-soon-x { margin-top: 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); }
.reviews-foot { display: flex; justify-content: center; margin-top: clamp(26px, 2.6vw, 40px); }
/* Four across holds down to tablet width; two columns only on phones, where
   four would shrink each video below a readable size. */
@media (max-width: 719.98px) {
  .shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .short { border-radius: 12px; }
  .short-play { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
}

/* ── floating messengers ────────────────────────────────────────────────── */
.float-msg {
  position: fixed;
  right: clamp(14px, 1.6vw, 28px);
  bottom: clamp(14px, 1.6vw, 28px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.85);
  transition: transform .2s ease;
}
.float-btn:hover { color: #fff; transform: translateY(-2px); }
.float-btn--tg { background: #229ed9; }
.float-btn--wa { background: #25d366; }

/* ── mobile sticky bar ──────────────────────────────────────────────────── */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(201, 164, 76, 0.35);
  box-shadow: 0 -20px 44px -22px rgba(0, 0, 0, 0.95);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bar-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink);
  padding: 19px 10px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--gold-pale);
}
.mobile-bar-spacer { height: calc(78px + env(safe-area-inset-bottom, 0px)); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: var(--ink);
  padding: clamp(32px, 3.2vw, 62px) var(--pad) clamp(24px, 2vw, 40px);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 3.4vw, 68px);
  align-items: start;
}
.foot-brand { display: flex; align-items: center; gap: 13px; }
.foot-brand img { width: 54px; height: auto; object-fit: contain; flex: none; }
.foot-name { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: 0.09em; color: var(--gold-lt); line-height: 1; }
.foot-tag { margin-top: 8px; font-size: 11px; font-weight: 300; letter-spacing: 0.14em; color: #9d8452; } /* 5.6:1 on --ink; #8b7448 measured 4.48 and failed WCAG AA */
.foot-h { font-size: 11.5px; font-weight: 400; letter-spacing: 0.2em; color: var(--gold-soft); }
.foot-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 9px 28px;
  margin-top: 16px;
}
.foot-links a { font-size: 13px; font-weight: 300; letter-spacing: 0.06em; color: #a7b0be; }
.foot-links a:hover { color: var(--gold-2); }
.foot-contacts { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.foot-contacts div { font-size: 13px; font-weight: 300; letter-spacing: 0.06em; line-height: 1.7; color: #a7b0be; }
.foot-tel { font-size: 16.5px; font-weight: 400; letter-spacing: 0.06em; color: #e8cd92; }
.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(26px, 2.6vw, 34px);
  padding-top: 20px;
  border-top: 1px solid rgba(201, 164, 76, 0.12);
}
/* Keep the last line clear of the floating messenger buttons. */
.foot-bottom { padding-right: calc(54px + clamp(14px, 1.6vw, 28px)); }
.foot-bottom span { font-size: 13px; font-weight: 300; letter-spacing: 0.1em; color: #949dab; }
.foot-contacts .foot-hours { font-size: 12.5px; color: #8f98a6; }
.foot-more { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 16px; }
.foot-more a { font-size: 13px; font-weight: 300; letter-spacing: 0.06em; color: #a7b0be; }
.foot-more a:hover { color: var(--gold-2); }
.foot-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.foot-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 164, 76, 0.3);
  color: var(--gold-lt);
  transition: background .2s ease, border-color .2s ease;
}
.foot-social a:hover { background: rgba(201, 164, 76, 0.1); border-color: var(--gold); color: var(--gold-pale); }

/* ── mobile overrides (below the design's 1120px breakpoint) ────────────── */
@media (max-width: 1119.98px) {
  /* The design flips these headings from centred to flush-left on mobile. */
  .sec-eyebrow { justify-content: flex-start; }
  .sec-eyebrow .eyebrow { text-align: left; }
  .sec-title { text-align: left; }
  .sec-lede { margin-left: 0; margin-right: 0; text-align: left; }

  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The partner line is too long to fit between the rules on a phone: it
     wrapped and left the rules hanging off its first line. */
  .m-hero .eyebrow { text-align: center; }
  /* Clear the sticky call bar. */
  .float-msg { right: 14px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .float-btn { width: 48px; height: 48px; }

  .v-a { grid-template-columns: 1fr; }

  .v-e { text-align: left; }
  .v-e h3 { margin-left: 0; margin-right: 0; }
  .e-sum { margin-left: 0; margin-right: 0; }
  .e-rule { margin-left: 0; margin-right: 0; }

  /* Without JS the burger cannot open anything — show the links instead. */
  .no-js .burger { display: none; }
  .no-js .m-header[data-menu="false"] .m-nav { display: flex; }
}

@media (max-width: 480px) {
  .m-hero .eyebrow-line { display: none; }
  .m-hero .eyebrow { letter-spacing: 0.16em; }
}

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shine { animation: none !important; opacity: 0 !important; }
  .card, .g-cell, .burger span, .short, .short-link img, .short-play, .float-btn { transition: none !important; }
  .short:hover { transform: none; }
  .card:hover { transform: none; }
}