/* ═══════════════════════════════════════════════════════════════════════
   KESTREL & ROWE — Modern Legal Counsel
   Bold, graphic, sans-forward. Stone/bone base, near-black ink, a single
   confident rust/signal accent. No purple/violet/gold/blue, no cyberpunk,
   not full-dark (dark is used only for contrast bands).
═══════════════════════════════════════════════════════════════════════ */

:root {
  --stone:        #EDEAE2;
  --stone-2:      #E2DDD1;
  --paper:        #FAF8F3;
  --ink:          #15140F;
  --ink-2:        #38362C;
  --ink-3:        #63604F;
  --ink-4:        #96927E;
  --line:         rgba(21,20,15,0.13);
  --line-strong:  rgba(21,20,15,0.24);

  --signal:       #C1421C;
  --signal-2:     #9E3413;
  --signal-soft:  #F4E0D2;
  --moss:         #38452E;
  --moss-soft:    #E5E8DC;

  --dusk:         #15140F;
  --dusk-2:       #201E16;
  --dusk-line:    rgba(250,248,243,0.14);

  --grad-signal:  linear-gradient(135deg, var(--signal) 0%, var(--signal-2) 100%);

  --shadow-sm:  0 2px 10px rgba(21,20,15,0.07);
  --shadow-md:  0 14px 34px rgba(21,20,15,0.11);
  --shadow-lg:  0 30px 74px rgba(21,20,15,0.18);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 4px;

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); background: var(--stone); color: var(--ink);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ── Typography: big, geometric, all-caps labels, no italics ─────────── */
.display-huge { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; }
.display-3xl { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; }
.display-2xl { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; }
.display-xl  { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.08; letter-spacing: -0.015em; }
.display-lg  { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -0.01em; }
.display-md  { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; }
.body-lg { font-size: 1.14rem; color: var(--ink-3); line-height: 1.7; }
.body-md { font-size: 1rem; color: var(--ink-3); line-height: 1.75; }
.text-muted { color: var(--ink-3); }
.accent { color: var(--signal); font-style: normal; }

.label-caps {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 20px;
}
.label-caps::before { content: ''; width: 30px; height: 3px; background: var(--signal); }
.label-caps.on-dark { color: var(--paper); }

/* ── Sections ──────────────────────────────────────────────────────── */
section { position: relative; }
.section { padding: 128px 0; }
.section-sm { padding: 84px 0; }
.section-header { max-width: 660px; margin-bottom: 60px; }
.section-header.center { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; }
.section-dark { background: var(--dusk); color: var(--paper); }
.section-dark .body-md, .section-dark .body-lg { color: rgba(250,248,243,0.66); }
.section-alt { background: var(--stone-2); }
.rule { height: 3px; background: var(--ink); width: 60px; }
.rule-full { height: 1px; background: var(--line); }

/* ── Buttons: square-ish, confident, no pill shapes ───────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: var(--radius-lg); font-weight: 700; font-size: 0.9rem;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em;
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1), box-shadow 0.3s ease, background 0.25s ease, color 0.25s ease, border-color .25s ease;
  white-space: nowrap; position: relative;
}
.btn-lg { padding: 19px 38px; font-size: 0.96rem; }
.btn-sm { padding: 11px 20px; font-size: 0.78rem; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background: var(--signal); }
.btn-signal { background: var(--grad-signal); color: var(--paper); box-shadow: 0 14px 34px rgba(193,66,28,0.3); }
.btn-signal:hover { transform: translateY(-3px); }
.btn-ghost { border: 2px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost.on-dark { border-color: var(--paper); color: var(--paper); }
.btn-ghost.on-dark:hover { background: var(--paper); color: var(--ink); }
.btn-text { padding: 0; color: var(--signal); font-weight: 700; font-family: var(--font-display); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 8px; }
.btn-text svg { transition: transform 0.3s ease; }
.btn-text:hover svg { transform: translateX(4px); }

/* ── Navigation: dark floating pill with an expanding mega-menu panel —
   visual language ported from a 21st.dev dark-pill navbar reference, kept
   in plain CSS/JS since this is a static-HTML template, not React. Our
   own nav links/labels, not the reference's. Deliberately NOT
   transparent-until-scroll: a nav with no background pre-scroll goes
   invisible (dark hero images sit right behind it on every inner page)
   — a solid dark pill is visible against anything, always. ───────────── */
.nav {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 200; width: max-content; max-width: calc(100% - 32px);
  transition: all 0.4s cubic-bezier(.2,.8,.3,1);
}
.nav__bar {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: var(--ink); border-radius: 999px; padding: 9px 10px 9px 22px;
  box-shadow: 0 20px 46px rgba(21,20,15,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.nav.scrolled .nav__bar { padding: 7px 8px 7px 18px; box-shadow: 0 14px 34px rgba(21,20,15,0.34), inset 0 1px 0 rgba(255,255,255,0.06); }
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--paper); text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; }
.nav__mark { width: 34px; height: 34px; border-radius: 999px; background: var(--signal); display: flex; align-items: center; justify-content: center; color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; flex-shrink: 0; }
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__link {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: rgba(250,248,243,0.6); position: relative; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; transition: color 0.25s ease, background 0.25s ease;
}
.nav__link:hover, .nav__link.active { color: var(--paper); background: rgba(255,255,255,0.08); }
.nav__link--panel[aria-expanded="true"] { color: var(--paper); background: rgba(255,255,255,0.1); }
.nav__link-chevron { width: 12px; height: 12px; opacity: 0.7; transition: transform 0.3s ease; }
.nav__link--panel[aria-expanded="true"] .nav__link-chevron { transform: rotate(180deg); }
.nav__cta { display: flex; align-items: center; gap: 8px; }
.nav__cta .btn { border-radius: 999px; }
.nav__cta .btn-ghost { border-color: rgba(255,248,243,0.28); color: var(--paper); }
.nav__cta .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.nav__burger { display: none; flex-direction: column; gap: 5px; width: 22px; }
.nav__burger span { height: 2px; background: var(--paper); }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mega-menu panel + its concave "notch" corners, attaching visually to
   the underside of the pill bar. Lives OUTSIDE <nav data-section="header">
   as a sibling (same reason .nav__mobile does) so the cms-parser's field
   scan — which treats <nav> as an automatic section boundary and grabs
   any heading/paragraph/link text inside it — never sees this decorative
   preview content and tries to turn it into 12+ duplicate editable fields
   that already live on the Services page. Position (top) is set by JS to
   track the pill's actual rendered height, since that changes slightly
   between resting and .scrolled states. Height animates via JS too. */
.nav__panel-wrap { position: fixed; left: 50%; transform: translateX(-50%); z-index: 199; width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
.nav__notch { position: absolute; top: -1px; width: 22px; height: 22px; color: var(--ink); pointer-events: none; }
.nav__notch--left { left: 26px; }
.nav__notch--right { right: 26px; }
.nav__panel {
  margin-top: -1px; background: var(--ink); border-radius: 0 0 22px 22px; overflow: hidden;
  height: 0; opacity: 0; transition: height 0.4s cubic-bezier(.2,.8,.3,1), opacity 0.3s ease;
  box-shadow: 0 30px 60px rgba(21,20,15,0.3);
}
.nav__panel.is-open { opacity: 1; pointer-events: auto; }
.nav__panel-inner { padding: 22px 28px 28px; border-top: 1px solid rgba(255,255,255,0.08); }
.nav__panel-eyebrow { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(250,248,243,0.4); margin-bottom: 14px; }
.nav__panel-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nav__panel-card { display: block; padding: 14px 16px; border-radius: 12px; transition: background 0.25s ease; }
.nav__panel-card:hover { background: rgba(255,255,255,0.06); }
.nav__panel-card-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--paper); }
.nav__panel-card-desc { display: block; font-size: 0.78rem; color: rgba(250,248,243,0.48); margin-top: 4px; line-height: 1.5; }
.nav__panel-foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end; }

.nav__mobile { position: fixed; inset: 0; z-index: 190; background: var(--stone); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 32px; transform: translateY(-100%); transition: transform 0.45s cubic-bezier(.2,.8,.3,1); opacity: 0; }
.nav__mobile.open { transform: translateY(0); opacity: 1; }
.nav__mobile a { font-family: var(--font-display); font-size: 2rem; font-weight: 700; text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid var(--line); }

.scroll-progress, .post-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--signal); z-index: 300; width: 0%; }

/* ── Reveal ────────────────────────────────────────────────────────── */
[data-reveal] { opacity: 0; }
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ── Scroll-choreography hero: 4 scattered image quadrants that assemble
   into a tidy grid as the user scrolls (no pinning — scrubbed over a
   tall wrapper, same safe mechanism as a simple parallax). ─────────── */
.chor-hero { padding: 172px 0 0; text-align: center; overflow: hidden; }
.chor-hero__intro { max-width: 820px; margin: 0 auto; padding: 0 32px; }
.chor-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 36px; }
.chor-stage { position: relative; height: 640px; max-width: 1100px; margin: 90px auto 0; }
.chor-quad { position: absolute; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); will-change: transform; }
.chor-quad img { width: 100%; height: 100%; object-fit: cover; }
.chor-quad--1 { width: 44%; height: 300px; top: 0; left: 4%; transform: translate(-40px,-30px) rotate(-6deg) scale(0.92); z-index: 3; }
.chor-quad--2 { width: 30%; height: 220px; top: 30px; right: 6%; transform: translate(50px,-50px) rotate(8deg) scale(0.88); z-index: 2; }
.chor-quad--3 { width: 30%; height: 240px; bottom: 20px; left: 8%; transform: translate(-60px,60px) rotate(9deg) scale(0.88); z-index: 2; }
.chor-quad--4 { width: 44%; height: 300px; bottom: 0; right: 4%; transform: translate(40px,40px) rotate(-7deg) scale(0.92); z-index: 3; }
.chor-badge {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); border-radius: var(--radius-lg);
  padding: 16px 26px; box-shadow: var(--shadow-md); text-align: center; z-index: 4;
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}

/* ── Cards (generic) ───────────────────────────────────────────────── */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); transition: transform 0.4s cubic-bezier(.2,.8,.3,1), box-shadow 0.4s ease, border-color 0.4s ease; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* Cursor-spotlight + liquid-glass shared across card components.
   Two pseudo-layers per card: ::before carries the frosted-glass backdrop
   (blur/saturate + subtle SVG turbulence refraction, ported from the
   21st.dev "liquid glass" component into plain CSS since this is a
   static-HTML template, not a React/Tailwind project), ::after carries
   the existing cursor-spotlight glow. Real content sits in its own
   stacking context above both so text/images stay crisp. ─────────────── */
.value-card, .team-card, .blog-card, .office-card, .result-card, .stack-card {
  position: relative; isolation: isolate; overflow: hidden;
}
.value-card::before, .team-card::before, .blog-card::before, .office-card::before, .result-card::before, .stack-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08) 40%, transparent 70%);
  backdrop-filter: blur(2px) saturate(160%); -webkit-backdrop-filter: blur(2px) saturate(160%);
  filter: url(#glass-distortion);
  box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,0.6), inset -1px -1px 1px rgba(255,255,255,0.25);
  opacity: 0.55; transition: opacity 0.4s ease;
}
.value-card:hover::before, .team-card:hover::before, .blog-card:hover::before, .office-card:hover::before, .result-card:hover::before, .stack-card:hover::before { opacity: 0.85; }
.value-card::after, .team-card::after, .blog-card::after, .office-card::after, .result-card::after, .stack-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(193,66,28,0.10), transparent 62%);
}
.value-card.spotlight-active::after, .team-card.spotlight-active::after, .blog-card.spotlight-active::after,
.office-card.spotlight-active::after, .result-card.spotlight-active::after, .stack-card.spotlight-active::after { opacity: 1; }
.value-card > *, .team-card > *, .blog-card > *, .office-card > *, .result-card > *, .stack-card > * { position: relative; z-index: 2; }

/* ── Stacking cards (practice areas): pure CSS position:sticky deck —
   deliberately NOT combined with any GSAP pin, avoiding the sticky/pin
   conflict class of bug entirely. Each card sticks at an increasing top
   offset so the previous card's edge stays visible as a "peek" behind
   the next one sliding over it. ──────────────────────────────────────── */
.stack-list { display: flex; flex-direction: column; gap: 0; }
.stack-card {
  position: sticky; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 52px 56px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 0.55fr 1fr 0.9fr; gap: 44px; align-items: center;
  margin-bottom: 24px;
}
.stack-card:nth-child(1) { top: 100px; }
.stack-card:nth-child(2) { top: 122px; }
.stack-card:nth-child(3) { top: 144px; }
.stack-card:nth-child(4) { top: 166px; }
.stack-card:nth-child(5) { top: 188px; }
.stack-card:nth-child(6) { top: 210px; }
.stack-card__num { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; color: var(--signal-soft); -webkit-text-stroke: 1.5px var(--signal); line-height: 1; }
.stack-card__title { font-size: 1.5rem; margin-bottom: 12px; }
.stack-card__text { color: var(--ink-3); font-size: 0.98rem; line-height: 1.65; }
.stack-card__media { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; }
.stack-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── Elegant split-panel carousel (testimonials): cross-fading quote +
   portrait with Ken-Burns zoom, auto-advancing, pure CSS transitions. ─ */
.elegant-carousel { display: grid; grid-template-columns: 1.1fr 0.9fr; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--ink); min-height: 460px; }
.elegant-carousel__panel { position: relative; padding: 64px; display: flex; flex-direction: column; justify-content: center; }
.elegant-carousel__slide { position: absolute; inset: 0; padding: 64px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transition: opacity 0.7s ease; }
.elegant-carousel__slide.is-active { position: relative; opacity: 1; }
.elegant-carousel__quote { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.5; color: var(--paper); }
.elegant-carousel__author { margin-top: 30px; }
.elegant-carousel__name { font-family: var(--font-display); font-weight: 700; color: var(--paper); font-size: 1rem; text-transform: uppercase; }
.elegant-carousel__role { color: rgba(250,248,243,0.55); font-size: 0.86rem; margin-top: 3px; }
.elegant-carousel__media { position: relative; overflow: hidden; }
.elegant-carousel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 0.9s ease; }
.elegant-carousel__img.is-active { opacity: 1; animation: kenburns 9s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.08) translate(0,0); } to { transform: scale(1.16) translate(-1.5%, -1%); } }
.elegant-carousel__dots { position: absolute; left: 64px; bottom: 40px; display: flex; gap: 10px; z-index: 3; }
.elegant-carousel__dot { width: 28px; height: 3px; background: rgba(250,248,243,0.3); cursor: pointer; transition: background 0.3s ease; }
.elegant-carousel__dot.is-active { background: var(--signal); }

/* ── Stroke marquee (press/trust) ─────────────────────────────────── */
.stroke-marquee { overflow: hidden; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stroke-marquee__track { display: flex; gap: 70px; width: max-content; animation: marquee 28s linear infinite; }
.stroke-marquee__item { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.2rem); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--ink); letter-spacing: -0.01em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Native scroll-snap horizontal gallery (results/case studies) — no
   JS hijacking, no pinning, just standard overflow-x scrolling, so it's
   inherently robust across browsers and touch devices. ──────────────── */
.snap-gallery { overflow-x: auto; scroll-snap-type: x mandatory; display: flex; gap: 24px; padding: 8px 32px 28px; scrollbar-width: thin; }
.snap-gallery::-webkit-scrollbar { height: 6px; }
.snap-gallery::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.result-card { scroll-snap-align: start; flex-shrink: 0; width: min(78vw, 420px); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.result-card__media { aspect-ratio: 4/3; overflow: hidden; }
.result-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.result-card:hover .result-card__media img { transform: scale(1.06); }
.result-card__body { padding: 28px; }
.result-card__tag { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--signal); margin-bottom: 10px; }
.result-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.35; }

/* ── Value / team / blog / office cards ───────────────────────────── */
.value-card { padding: 40px 36px; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--line); }
.value-card__num { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; color: var(--signal); margin-bottom: 18px; }
.value-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; margin-bottom: 12px; }

.team-card { text-align: left; }
.team-card__img-wrap { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/5; margin-bottom: 20px; }
.team-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.team-card:hover .team-card__img-wrap img { transform: scale(1.06); }
.team-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; }
.team-card__role { color: var(--signal); font-size: 0.84rem; font-weight: 700; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.02em; }
.team-card__bio { color: var(--ink-3); font-size: 0.9rem; margin-top: 10px; line-height: 1.6; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.blog-card { border-radius: var(--radius-md); overflow: hidden; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.blog-card__img-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.blog-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.blog-card:hover .blog-card__img-wrap img { transform: scale(1.07); }
.blog-card__cat { position: absolute; top: 16px; left: 16px; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; border-radius: var(--radius-lg); }
.blog-card__body { padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card__meta { display: flex; gap: 10px; font-size: 0.78rem; color: var(--ink-4); }
.blog-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; line-height: 1.3; }
.blog-card__title a:hover { color: var(--signal); }
.blog-card__excerpt { color: var(--ink-3); font-size: 0.9rem; line-height: 1.6; flex: 1; }
.blog-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 4px; text-align: left; }
.faq-btn h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; }
.faq-icon { width: 32px; height: 32px; border-radius: var(--radius-lg); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; position: relative; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--ink); border-radius: 1px; transition: transform 0.3s ease; }
.faq-icon::before { width: 12px; height: 2px; }
.faq-icon::after { width: 2px; height: 12px; }
.faq-item.open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item.open .faq-icon { background: var(--signal); border-color: var(--signal); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: var(--paper); }
.faq-answer { height: 0; overflow: hidden; transition: height 0.35s cubic-bezier(.2,.8,.3,1); }
.faq-answer p { padding: 0 4px 28px; color: var(--ink-3); font-size: 0.95rem; line-height: 1.7; max-width: 660px; }

/* ── Stats band ────────────────────────────────────────────────────── */
.stats-band { background: var(--dusk); padding: 96px 0; color: var(--paper); position: relative; overflow: hidden; }
.stats-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; position: relative; z-index: 2; }
.stat-item { text-align: left; border-left: 3px solid var(--signal); padding-left: 20px; }
.stat-item__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 3.6vw, 3.4rem); color: var(--paper); }
.stat-item__label { font-size: 0.86rem; color: rgba(250,248,243,0.6); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Split layout ──────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 84px; align-items: center; }
.split.reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius-md); width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split__tag { position: absolute; bottom: -24px; left: -24px; background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-md); }
.split__tag-num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.split__tag-label { font-size: 0.76rem; color: rgba(250,248,243,0.6); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.split__list { display: flex; flex-direction: column; gap: 16px; margin: 28px 0 32px; }
.split__list-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.96rem; color: var(--ink-2); }
.split__list-icon { width: 24px; height: 24px; border-radius: var(--radius-lg); background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

/* ── Page hero (inner pages) ───────────────────────────────────────── */
.page-hero { min-height: 58vh; display: flex; align-items: flex-end; padding: 190px 0 90px; position: relative; overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,20,15,0.5) 0%, rgba(21,20,15,0.8) 100%); }
.page-hero .container { position: relative; z-index: 2; color: var(--paper); }
.page-hero .label-caps { color: var(--signal-soft); }
.page-hero .label-caps::before { background: var(--signal-soft); }
.page-hero .body-lg { color: rgba(250,248,243,0.8); max-width: 620px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: rgba(250,248,243,0.6); margin-top: 22px; }
.breadcrumb a:hover { color: var(--paper); }

/* ── CTA band ──────────────────────────────────────────────────────── */
.cta-band { background: var(--dusk); padding: 136px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: var(--paper); max-width: 800px; margin: 0 auto 22px; }
.cta-band p { color: rgba(250,248,243,0.68); max-width: 560px; margin: 0 auto 40px; }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ── Glow card: animated gradient-outline frame for a single hero-weight
   card (e.g. the featured post on the Insights page). ────────────────── */
.glow-card {
  position: relative; background: var(--paper); box-shadow: var(--shadow-lg);
}
.glow-card::before {
  content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--glow-angle, 0deg), var(--signal), var(--signal-soft), var(--moss), var(--signal));
  animation: glow-rotate 7s linear infinite;
  opacity: 0.85;
}
@keyframes glow-rotate { to { --glow-angle: 360deg; } }
@property --glow-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.dot-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(250,248,243,0.14) 1.5px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);
}

/* ── Contact form ──────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.contact-form { display: flex; flex-direction: column; }
.contact-info-list { display: flex; flex-direction: column; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 9px; color: var(--ink-2); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 15px 18px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong);
  background: var(--paper); font-size: 0.95rem; color: var(--ink); transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); }
.form-field textarea { resize: vertical; min-height: 130px; }
.contact-info-item { display: flex; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.contact-info-icon { width: 50px; height: 50px; border-radius: var(--radius-sm); background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.office-card { padding: 32px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--paper); }
.office-card__city { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; margin-bottom: 6px; }

/* ── Article / blog-post body ──────────────────────────────────────── */
.author-box, .post-author-box { display: flex; gap: 20px; align-items: center; padding: 32px; border-radius: var(--radius-md); background: var(--stone-2); margin-top: 60px; }
.author-box img, .post-author-box img { width: 66px; height: 66px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.post-author-box h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.post-author-box p { color: var(--ink-3); font-size: 0.92rem; line-height: 1.6; }
.share-row, .post-share { display: flex; align-items: center; gap: 16px; margin: 40px 0; }
.post-share { justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--line); }
.post-share > span { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-3); }
.share-btn, .post-share__icons a { width: 42px; height: 42px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.share-btn:hover, .post-share__icons a:hover { border-color: var(--signal); color: var(--signal); }
.post-share__icons { display: flex; gap: 10px; }
.tag-pill { display: inline-flex; padding: 8px 16px; border-radius: var(--radius-lg); background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Article body (blog-post.html <article class="article-body">) ──── */
.article-body { max-width: 100%; }
.article-body p { color: var(--ink-2); font-size: 1.08rem; line-height: 1.85; margin-bottom: 26px; }
.article-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; margin: 52px 0 20px; }
.article-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 36px 0 16px; }
.article-body blockquote { border-left: 4px solid var(--signal); padding: 6px 0 6px 28px; margin: 40px 0; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--ink-2); }
.article-body ul { margin: 0 0 26px; padding-left: 4px; }
.article-body ul li { position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; }
.article-body ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--signal); }
.article-body figure { margin: 44px 0; }
.article-body figure img { border-radius: var(--radius-sm); width: 100%; }
.article-body figcaption { font-size: 0.85rem; color: var(--ink-4); margin-top: 12px; text-align: center; }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer { background: var(--dusk-2); color: var(--paper); padding: 96px 0 34px; position: relative; overflow: hidden; }
.footer__watermark {
  position: relative; z-index: 0; margin-top: 40px; text-align: center;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 11vw, 8.5rem); line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(250,248,243,0.16);
  white-space: nowrap; overflow: hidden; user-select: none; pointer-events: none;
}
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 60px; }
.footer__brand p { color: rgba(250,248,243,0.6); font-size: 0.92rem; margin-top: 18px; max-width: 300px; }
.footer__col h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 20px; color: var(--paper); }
.footer__link { display: block; color: rgba(250,248,243,0.62); font-size: 0.9rem; padding: 6px 0; transition: color 0.2s ease; }
.footer__link:hover { color: var(--signal-soft); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid var(--dusk-line); font-size: 0.82rem; color: rgba(250,248,243,0.5); flex-wrap: wrap; gap: 16px; }
.footer__socials { display: flex; gap: 12px; }
.footer__social { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--dusk-line); display: flex; align-items: center; justify-content: center; color: var(--paper); transition: all 0.3s ease; }
.footer__social:hover { background: var(--signal); border-color: var(--signal); }

/* ── Newsletter ────────────────────────────────────────────────────── */
.newsletter { padding: 96px 0; }
.newsletter__inner { background: var(--ink); color: var(--paper); border-radius: var(--radius-md); padding: 56px 60px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.newsletter__inner p { color: rgba(250,248,243,0.65); margin-top: 8px; max-width: 420px; }
.newsletter__form { display: flex; gap: 12px; flex: 1; min-width: 300px; max-width: 440px; }
.newsletter__form input { flex: 1; padding: 15px 20px; border-radius: var(--radius-sm); border: 2px solid rgba(250,248,243,0.2); background: transparent; color: var(--paper); font-size: 0.92rem; }
.newsletter__form input::placeholder { color: rgba(250,248,243,0.5); }
.newsletter__form input:focus { outline: none; border-color: var(--signal); }

/* ── Service detail modal ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(21,20,15,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--paper); border-radius: var(--radius-md); max-width: 860px; width: 100%; max-height: 86vh; overflow-y: auto;
  display: grid; grid-template-columns: 0.85fr 1fr; box-shadow: var(--shadow-lg); position: relative;
  transform: translateY(24px) scale(0.97); opacity: 0; transition: transform 0.4s cubic-bezier(.2,.8,.3,1), opacity 0.4s ease;
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal__media { min-height: 220px; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: 48px 44px; }
.modal__body h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 26px 0 14px; }
.modal__body p { color: var(--ink-3); font-size: 1rem; line-height: 1.7; }
.modal__list li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.modal__list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.modal__close {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease; z-index: 2;
}
.modal__close:hover { background: var(--signal); transform: rotate(90deg); }
body.modal-open { overflow: hidden; }

.magnetic { display: inline-block; }
.blog-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
.filter-btn { padding: 11px 22px; border-radius: var(--radius-lg); border: 2px solid var(--line-strong); font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-3); transition: all 0.3s ease; }
.filter-btn.active, .filter-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stats-band__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .stack-card { grid-template-columns: 0.6fr 1fr; }
  .stack-card__media { display: none; }
  .elegant-carousel { grid-template-columns: 1fr; }
  .elegant-carousel__media { min-height: 260px; }
  .blog-grid, .office-grid { grid-template-columns: repeat(2, 1fr); }
  .modal { grid-template-columns: 1fr; }
  .modal__media { min-height: 180px; }
}
@media (max-width: 860px) {
  .nav { top: 12px; width: calc(100% - 24px); max-width: none; }
  .nav__bar { padding: 8px 8px 8px 20px; }
  .nav__links, .nav__panel-wrap, .nav__cta .btn-sm.btn-ghost { display: none; }
  .nav__burger { display: flex; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1 !important; }
  .split__tag { position: static; margin-top: -40px; margin-left: 20px; width: fit-content; }
  .section { padding: 84px 0; }
  .newsletter__inner { flex-direction: column; text-align: center; padding: 44px 32px; }
  .chor-stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 60px; }
  .chor-quad { position: static; width: 100% !important; height: 180px !important; transform: none !important; }
  .stack-card { grid-template-columns: 1fr; text-align: left; }
  .stack-card__num { font-size: 2.2rem; }
  .blog-grid, .office-grid { grid-template-columns: 1fr; }
  .glow-card[data-field="featured"] { grid-template-columns: 1fr !important; }
  .service-modal-trigger { margin-left: 0 !important; display: block; margin-top: 10px !important; }
  .modal__body { padding: 36px 26px; }
}
@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .form-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .cta-band { padding: 90px 0; }
  .chor-stage { grid-template-columns: 1fr; }
  .nav__logo span { display: none; }
  .post-share { flex-direction: column; align-items: flex-start; gap: 14px; }
}