/* ==========================================================================
   Loxley Advisory — Design Tokens & Base Styles
   Modern "new money" aesthetic: white canvas, near-black type, spring-green
   accent, soft gradient mesh, geometric display type.
   ========================================================================== */

:root {
  /* Color tokens */
  --color-ink: #1a1714;
  --color-ink-soft: #28231e;
  --color-bg: #faf5ec;
  --color-bg-soft: #f2e9d8;
  --color-card: #fffdf8;
  --color-accent: #c9a96e;
  --color-accent-dark: #8b6914;
  --color-accent-soft: #e8d5a8;
  --color-violet: #7a5a35;
  --color-violet-soft: #ece2cc;
  --color-amber: #a9673f;
  --color-line: #e2d8c3;
  --color-line-strong: #cbbc9e;
  --color-muted: #6b6154;
  --color-muted-light: #9a8f7c;

  /* Type */
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-med: 350ms;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-ink);
}

a {
  color: inherit;
}

/* Focus visibility — never remove */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 3px;
}

/* ---------- Gradient mesh (hero motion placeholder) ---------- */
.mesh-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.3;
  will-change: transform;
  animation: meshDrift 18s var(--ease-out) infinite alternate;
}
.mesh-blob.b1 {
  width: 640px;
  height: 640px;
  top: -220px;
  left: -160px;
  background: var(--color-accent);
  animation-duration: 22s;
}
.mesh-blob.b2 {
  width: 520px;
  height: 520px;
  top: 40px;
  right: -180px;
  background: var(--color-violet);
  animation-duration: 26s;
  animation-delay: -4s;
}
.mesh-blob.b3 {
  width: 420px;
  height: 420px;
  bottom: -240px;
  left: 30%;
  background: var(--color-ink-soft);
  opacity: 0.18;
  animation-duration: 20s;
  animation-delay: -8s;
}
@keyframes meshDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(60px, 40px) scale(1.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-blob {
    animation: none;
  }
}

/* ---------- Duotone image treatment (placeholder photography) ---------- */
.duotone {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
}
.duotone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) sepia(0.15);
}
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(182, 146, 63, 0.5), rgba(26, 23, 20, 0.55));
  mix-blend-mode: multiply;
}
.duotone .duotone-tag {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(26, 23, 20, 0.4);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ---------- Hero video ---------- */
.hero-video-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.hero-video-section-short {
  min-height: 74vh;
  min-height: 74svh;
  padding-top: 7rem;
  padding-bottom: 2.5rem;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-ink);
}
.hero-video-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 23, 20, 0.78) 0%, rgba(26, 23, 20, 0.6) 45%, rgba(26, 23, 20, 0.24) 100%),
    linear-gradient(180deg, rgba(26, 23, 20, 0.36) 0%, rgba(26, 23, 20, 0.15) 45%, rgba(26, 23, 20, 0.48) 100%);
}
.hero-video-content {
  z-index: 10;
}
#stats,
.cue-target {
  scroll-margin-top: 5rem;
}

/* Marks the seam where a section hands off into a full bg-ink section
   below it — same bouncing chevron as .hero-scroll-cue, sitting just
   inside the top of the dark section so it reads against a single solid
   background rather than straddling two. Clicking it re-aligns that same
   section under the header (its own id, via .cue-target's scroll-margin),
   useful when the section is only partway into view. The host section
   needs position: relative for this to anchor correctly. */
.section-enter-cue {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.7);
  animation: heroScrollCue 1.8s ease-in-out infinite;
  transition: color var(--dur-fast) var(--ease-out);
}
.section-enter-cue:hover,
.section-enter-cue:focus-visible {
  color: #ffffff;
}
.section-enter-cue svg {
  width: 22px;
  height: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .section-enter-cue {
    animation: none;
  }
}
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.7);
  animation: heroScrollCue 1.8s ease-in-out infinite;
  transition: color var(--dur-fast) var(--ease-out);
}
.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
  color: #ffffff;
}
.hero-scroll-cue svg {
  width: 22px;
  height: 22px;
}
@keyframes heroScrollCue {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue {
    animation: none;
  }
}

/* ---------- Hero shrink image (full-bleed → inset rectangle on scroll) ----------
   clip-path crops the box directly (GISI's technique) rather than scaling
   it, so no page background shows through around the shrunk image. Plain
   scroll-linked update, no position: sticky — never holds up scrolling. */
.hero-shrink-section {
  position: relative;
  background: var(--color-bg);
}
.hero-shrink-media {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  clip-path: inset(0px round 0px);
  will-change: clip-path;
}
.hero-shrink-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  .hero-shrink-media {
    height: auto;
    aspect-ratio: 16 / 10;
    clip-path: inset(20px round 14px) !important;
  }
}

/* ---------- Eyebrow / section label ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.eyebrow.on-ink {
  color: var(--color-accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.475rem 0.875rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-ink);
  color: #ffffff;
  border-color: var(--color-ink);
}
.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line-strong);
}
.btn-outline:hover {
  border-color: var(--color-ink);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  padding: 0.25rem 0;
  border: none;
  font-weight: 600;
  font-size: 1.05rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-ghost svg {
  transition: transform var(--dur-med) var(--ease-out);
}
.btn-ghost:hover svg {
  transform: translateX(4px);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: saturate(140%) blur(8px);
}
.wordmark {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}
.wordmark-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.wordmark-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0.2rem 0;
  background: var(--color-accent);
  transition: background-color var(--dur-med) var(--ease-out);
}
.wordmark-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--dur-med) var(--ease-out);
}
.wordmark-lg .wordmark-name {
  font-size: 1.75rem;
}
.wordmark-lg .wordmark-sub {
  font-size: 0.65rem;
}

/* Header sitting over a dark hero (video/dark imagery). Nav link text
   switches to the lighter gold for contrast against the video; everywhere
   else (once scrolled, and on every non-video-hero page) it's the dirty
   gold used for titles. The mobile menu icon also lightens over the
   video, since its bars (not text) would otherwise disappear against the
   dark footage. */
body.has-video-hero .site-header:not(.is-scrolled) .nav-link {
  color: var(--color-accent);
}
body.has-video-hero .site-header:not(.is-scrolled) .menu-btn span {
  background: #ffffff;
}

.nav-link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-accent-dark);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav-link:hover,
.nav-link.is-active {
  border-bottom-color: var(--color-accent-dark);
}

/* Mobile nav */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
}
.mobile-nav.is-open {
  max-height: 480px;
}
.menu-btn {
  width: 24px;
  height: 18px;
  position: relative;
}
.menu-btn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out);
}
.menu-btn span:nth-child(1) { top: 0; }
.menu-btn span:nth-child(2) { top: 8px; }
.menu-btn span:nth-child(3) { top: 16px; }
.menu-btn.is-open span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.menu-btn.is-open span:nth-child(2) { opacity: 0; }
.menu-btn.is-open span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* ---------- Cards (boxes) ----------
   Shared "box" treatment: soft rounded corners, hairline border, a faint
   resting shadow, a lift + deeper shadow on hover, and a gold accent bar
   that grows in from the left edge on hover. */
.pillar-card,
.pillar-card-dark,
.trust-card,
.callout,
.profile-block.on-ink {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(26, 23, 20, 0.05);
  transition: transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
.pillar-card::after,
.pillar-card-dark::after,
.trust-card::after,
.callout::after,
.profile-block.on-ink::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.pillar-card:hover,
.pillar-card-dark:hover,
.trust-card:hover,
.callout:hover,
.profile-block.on-ink:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26, 23, 20, 0.1);
}
.pillar-card:hover::after,
.pillar-card-dark:hover::after,
.trust-card:hover::after,
.callout:hover::after,
.profile-block.on-ink:hover::after {
  transform: scaleX(1);
}

.pillar-card {
  border: 1px solid var(--color-line);
  background: var(--color-card);
  padding: 1.125rem 0.875rem;
}
.pillar-card:hover {
  border-color: var(--color-line-strong);
}
.pillar-index {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-accent-dark);
  letter-spacing: 0.02em;
}

/* ---------- Stats ---------- */
.stat-icon {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  color: var(--color-accent-dark);
}
.stat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.stat-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--color-ink);
}
.stat-label {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: var(--color-muted);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ---------- Mono tag ---------- */
.mono-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-accent-dark);
  text-transform: uppercase;
}
.mono-tag.on-ink {
  color: var(--color-accent);
}

/* ---------- Tabs (GISI-inspired feature switcher) ---------- */
.tab-btn {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-muted);
  background: transparent;
  border: none;
  text-align: left;
  padding: 0.55rem 0;
  border-top: 1px solid var(--color-line);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tab-btn:hover {
  color: var(--color-ink);
}
.tab-btn.is-active {
  color: var(--color-ink);
}
.tab-btn .tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-line-strong);
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tab-btn.is-active .tab-dot {
  background: var(--color-accent);
}
.tab-panel {
  display: none;
}
.tab-panel.is-active {
  display: block;
}

/* ---------- Trust / testimonial card ---------- */
.trust-card {
  border: 1px solid var(--color-line);
  background: var(--color-card);
  padding: 1.125rem 1rem;
}
.trust-card:hover {
  border-color: var(--color-line-strong);
}
.trust-quote {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-ink);
}
.trust-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  flex-shrink: 0;
  background: var(--color-bg-soft);
}
.trust-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 767px) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Line-clip heading reveal (GISI-style two-line headline) ----------
   Each line sits in an overflow-hidden row and slides up from behind its
   own mask; the second line follows the first with a short delay. Pair
   with [data-reveal] on the heading so is-visible is toggled by the same
   observer, and the outer heading fade/rise layers with the inner slide. */
.line-reveal-row {
  display: block;
  overflow: hidden;
}
.line-reveal-inner {
  display: block;
  transform: translateY(115%);
  transition: transform 650ms var(--ease-out);
}
.line-reveal.is-visible .line-reveal-row:nth-child(2) .line-reveal-inner {
  transition-delay: 140ms;
}
.line-reveal.is-visible .line-reveal-inner {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .line-reveal-inner {
    transition: none;
    transform: none;
  }
}

/* ---------- Pull quote ---------- */
.pull-quote {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.35;
  color: #ffffff;
}

/* ---------- Form ---------- */
.form-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: var(--color-bg-soft);
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
  padding: 0.425rem 0.5rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-accent-dark);
  outline: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-muted-light);
}

/* ---------- Contact form (sleek underline style, dark background) ---------- */
.cf-field {
  border-bottom: 1px solid rgba(226, 216, 195, 0.22);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cf-field:focus-within {
  border-color: var(--color-accent);
}
.cf-field input,
.cf-field textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 1.1rem 0;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: #ffffff;
  outline: none;
  resize: none;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.cf-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: none;
  border: none;
  border-bottom: 1px solid #ffffff;
  padding-bottom: 0.25rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cf-submit span {
  transition: transform var(--dur-fast) var(--ease-out);
}
.cf-submit:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.cf-submit:hover span {
  transform: translateX(3px);
}

/* ---------- Same sleek underline form, light background variant ---------- */
.cf-field-light {
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cf-field-light:focus-within {
  border-color: var(--color-accent-dark);
}
.cf-field-light input,
.cf-field-light textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 1.1rem 0;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--color-ink);
  outline: none;
  resize: none;
}
.cf-field-light input::placeholder,
.cf-field-light textarea::placeholder {
  color: var(--color-muted-light);
}
.cf-submit-light {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 0.25rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cf-submit-light span {
  transition: transform var(--dur-fast) var(--ease-out);
}
.cf-submit-light:hover {
  color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
.cf-submit-light:hover span {
  transform: translateX(3px);
}

/* ---------- Callout ---------- */
.callout {
  border-left: 3px solid var(--color-accent-dark);
  background: var(--color-bg-soft);
  border-radius: 0 12px 12px 0;
  padding: 0.75rem 0.875rem;
}
.callout-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-accent-dark);
  margin-bottom: 0.25rem;
}
.callout p {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.75;
}
.callout.on-ink {
  background: var(--color-ink-soft);
  border-left-color: var(--color-accent);
}
.callout.on-ink .callout-label {
  color: var(--color-accent);
}
.callout.on-ink p {
  color: #fff;
}

/* ---------- Row list (awards, briefings) ---------- */
.row-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 1rem;
}
.row-list-item:last-child {
  border-bottom: none;
}
.row-list-item .rl-tag {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-accent-dark);
  flex-shrink: 0;
  width: 90px;
}
.row-list-item .rl-desc {
  flex: 1;
  color: var(--color-ink);
}
.row-list-item .rl-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Award carousel ---------- */
.award-carousel-wrap {
  position: relative;
  padding-bottom: 0.5rem;
}
.award-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0 1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.award-carousel::-webkit-scrollbar {
  display: none;
}
.award-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-card);
}
.award-card img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  margin-bottom: 0.25rem;
}
.award-card .ac-tag {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-accent-dark);
}
.award-card .ac-desc {
  color: var(--color-ink);
  line-height: 1.4;
}
.award-card .ac-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted-light);
}
/* Controls sit in their own row below the carousel: prev arrow, dots,
   next arrow, flanking each other at every viewport width. */
.award-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.award-carousel-arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-muted-light);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.award-carousel-arrow:hover {
  color: var(--color-ink);
  background: var(--color-bg);
}
.award-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.award-carousel-arrow:disabled:hover {
  color: var(--color-muted-light);
  background: transparent;
}
.award-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.award-dots button {
  position: relative;
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--color-line-strong);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.award-dots button::after {
  /* Enlarges the tappable area without changing the dot's visual size.
     Kept modest (not the full 44px WCAG target) so neighboring dots'
     hit areas don't swallow each other given how close they sit. */
  content: "";
  position: absolute;
  inset: -7px;
}
.award-dots button.is-active {
  width: 18px;
  background: var(--color-accent-dark);
}

/* ---------- Dark card (ink background variant of pillar-card) ---------- */
.pillar-card-dark {
  border: 1px solid rgba(226, 216, 195, 0.15);
  background: var(--color-ink-soft);
  padding: 1.125rem 0.875rem;
}
.pillar-card-dark .card-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-accent-soft);
  margin-bottom: 0.3rem;
}
.pillar-card-dark p {
  font-size: 0.95rem;
  color: var(--color-line);
  line-height: 1.75;
}

/* ---------- Profile block (cross-border client segments) ---------- */
.profile-block {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-line);
}
.profile-block:last-child {
  border-bottom: none;
}
.profile-block h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.98rem;
  color: var(--color-accent-dark);
  margin-bottom: 0.3rem;
}
.profile-block p {
  font-size: 1.32rem;
  color: var(--color-muted);
  max-width: 42rem;
}
.profile-block.on-ink {
  background: var(--color-ink);
  border: 1px solid rgba(226, 216, 195, 0.15);
  padding: 6rem 3rem;
  border-bottom: none;
  text-align: center;
}
.profile-block.on-ink h3 {
  color: var(--color-accent);
}
.profile-block.on-ink p {
  color: var(--color-line);
  margin-inline: auto;
}

/* ---------- Empty state ---------- */
.empty-state {
  background: var(--color-bg-soft);
  border-radius: 16px;
  padding: 1rem 0.875rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-muted-light);
  font-size: 1.05rem;
}

/* ---------- Segment checkboxes ---------- */
.segment-check {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.95rem;
  color: var(--color-muted);
}
.segment-check input[type="checkbox"] {
  width: auto;
  accent-color: var(--color-accent-dark);
}

/* ---------- Form (on-ink variant) ---------- */
.form-field.on-ink label {
  color: var(--color-accent);
}
.form-field.on-ink input,
.form-field.on-ink textarea,
.form-field.on-ink select {
  background: var(--color-ink-soft);
  border-color: rgba(226, 216, 195, 0.25);
  color: #ffffff;
}
.form-field.on-ink input::placeholder,
.form-field.on-ink textarea::placeholder {
  color: var(--color-muted-light);
}

/* ---------- Misc ---------- */
.container-xl {
  max-width: 1200px;
  margin-inline: auto;
}
.section-py {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

/* ---------- Business card lightbox ---------- */
.card-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.card-lightbox[hidden] {
  display: none;
}
.card-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 23, 20, 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.card-lightbox-inner {
  position: relative;
  z-index: 1;
  width: min(94vw, 760px);
  transform: scale(0.85);
  opacity: 0;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.card-lightbox.is-open .card-lightbox-backdrop {
  opacity: 1;
}
.card-lightbox.is-open .card-lightbox-inner {
  transform: scale(1);
  opacity: 1;
}
.card-lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(26, 23, 20, 0.35);
}
.card-lightbox-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.card-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .card-lightbox-backdrop,
  .card-lightbox-inner {
    transition: none;
  }
}
/* ---------- Insight Note card (PDF thumbnail + download) ---------- */
.insight-note-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-card);
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.insight-note-thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(26, 23, 20, 0.14);
}
.insight-note-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.insight-note-date {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-muted-light);
  text-align: left;
}
.insight-note-title {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-ink);
  text-align: left;
}

/* ---------- Estate architecture tabs (on-ink) ---------- */
/* A single bar divided into three separate segments — each tab owns its
   own bottom border, and the grid gap between columns is the "small gap"
   that breaks the bar into three parts rather than one continuous line. */
.ea-tabs-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4.5rem;
}
@media (max-width: 640px) {
  .ea-tabs-nav {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}
.ea-tab-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1.3;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-align: left;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ea-tab-btn:hover {
  color: #fff;
}
.ea-tab-btn.is-active {
  color: #fff;
  border-bottom-color: var(--color-accent);
}
/* All three panels are stacked in the same grid cell so the container's
   height is always the tallest of the three (the structures panel), and
   switching tabs never resizes the black area — inactive panels stay in
   the layout (contributing to height) but are visually/interactively
   hidden via opacity + inert rather than being removed with display:none. */
.ea-tabs-content {
  display: grid;
}
.ea-tab-panel {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.ea-tab-panel.is-active {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 640px) {
  .ea-tabs-content {
    display: block;
  }
  .ea-tab-panel {
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .ea-tab-panel.is-active {
    display: block;
  }
}

/* ---------- Structures accordion (with swapping image) ---------- */
.structure-accordion {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .structure-accordion {
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}
.structure-accordion-list {
  display: flex;
  flex-direction: column;
}
.structure-accordion-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.1rem 0;
  cursor: pointer;
  text-align: left;
}
.structure-accordion-list .structure-accordion-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.structure-accordion-tag {
  display: block;
  margin-bottom: 0.3rem;
}
.structure-accordion-item .sa-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--dur-fast) var(--ease-out);
}
.structure-accordion-item:hover .sa-title {
  color: #fff;
}
.structure-accordion-item.is-active .sa-title {
  color: #fff;
}
.structure-accordion-item .sa-desc {
  display: block;
  max-height: 0;
  overflow: hidden;
  color: #fff;
  font-size: 1.32rem;
  line-height: 1.6;
  transition: max-height var(--dur-med) var(--ease-out), margin-top var(--dur-med) var(--ease-out);
}
.structure-accordion-item.is-active .sa-desc {
  max-height: 16rem;
  margin-top: 0.6rem;
}
.structure-accordion-media img {
  transition: opacity var(--dur-fast) var(--ease-out);
}
@media (max-width: 767px) {
  .structure-accordion-media {
    order: -1;
  }
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  border-top: 1px solid var(--color-line);
}
.faq-item {
  border-bottom: 1px solid var(--color-line);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question h3 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--color-ink);
}
.faq-question-icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-accent-dark);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] .faq-question-icon {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 0 1.6rem;
  max-width: none;
}
.faq-answer p {
  color: var(--color-muted);
  font-size: 1.32rem;
  line-height: 1.7;
}

/* ---------- Article table of contents (brief / insight-note pages) ---------- */
.article-body h2 {
  scroll-margin-top: 6.5rem;
}
.toc-aside {
  position: sticky;
  top: 7.5rem;
  align-self: flex-start;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
}
.toc-nav-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-muted-light);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.toc-list {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-line);
}
.toc-link {
  display: block;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.55rem 0 0.55rem 1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.toc-link:hover {
  color: var(--color-ink);
}
.toc-link.is-active {
  color: var(--color-accent-dark);
  border-left-color: var(--color-accent-dark);
  font-weight: 600;
}

/* ---------- Client segment tabs (GISI-style: tab bar switches a
   single image + description panel, one segment visible at a time) ---------- */
.segment-tabs-heading {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.75rem;
  border-bottom: 1px solid var(--color-line-strong);
  margin-bottom: 2.5rem;
}
.segment-tab {
  position: relative;
  flex: 1 1 160px;
  padding: 0 1.5rem 1rem 0;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.25;
  text-align: left;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.segment-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.segment-tab:hover {
  color: var(--color-ink);
}
.segment-tab[aria-selected="true"] {
  color: var(--color-ink);
}
.segment-tab[aria-selected="true"]::after {
  transform: scaleX(1);
}
.segment-tab-panel {
  display: none;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.segment-tab-panel.is-active {
  display: grid;
}
.segment-tab-image {
  aspect-ratio: 1.4 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-line);
}
.segment-tab-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.segment-tab-desc {
  font-size: 1.32rem;
  line-height: 1.6;
  color: var(--color-muted);
}
@media (max-width: 767px) {
  .segment-tab-panel.is-active {
    display: flex;
    flex-direction: column;
  }
}

/* ---------- Cross-border connecting arrow ----------
   Draws itself in once (down, then right) when scrolled into view via the
   shared [data-reveal]/is-visible observer, then stays put — no looping.
   Position and shape (elbow vs. straight-down) are computed in main.js
   from the actual rendered gap between the two paragraphs it connects,
   so it stays hidden (rather than flashing in the wrong spot) until that
   first measurement lands. */
.crossborder-arrow {
  visibility: hidden;
}
@media (max-width: 639px) {
  /* Below phone width the two paragraphs it connects sit right on top of
     each other with almost no gap — a connecting arrow reads as visual
     noise at that point rather than a useful pointer, so it's dropped. */
  .crossborder-arrow {
    display: none;
  }
}
.crossborder-arrow-path {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  transition: stroke-dashoffset 900ms var(--ease-out);
}
.crossborder-arrow-head {
  opacity: 0;
  transition: opacity 250ms var(--ease-out) 700ms;
}
[data-reveal].is-visible .crossborder-arrow-path {
  stroke-dashoffset: 0;
}
[data-reveal].is-visible .crossborder-arrow-head {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .crossborder-arrow-path {
    stroke-dashoffset: 0;
    transition: none;
  }
  .crossborder-arrow-head {
    opacity: 1;
    transition: none;
  }
}