:root {
    --cream: #0F1B2D;
    --cream-deep: #1A2940;
    --ink: #F4EBD4;
    --ink-soft: #D4C5A3;
    --ink-muted: #8B7F68;
    --accent: #C9A961;
    --accent-soft: #E0C587;
    --rule: #2A3A55;
    --rule-soft: #1F2D45;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 1.55;
    overflow-x: hidden;
    background-image:
      radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse at bottom left, rgba(244, 235, 212, 0.02) 0%, transparent 50%);
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    z-index: 1;
  }

  /* ============ NAV ============ */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 27, 45, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--rule);
  }

  .mark {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--ink);
  }

  .mark-logo {
    height: 40px;
    width: auto;
    display: block;
  }

  .mark-name {
    font-family: 'Instrument Serif', serif;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ink);
  }

  .mark-name em { font-style: italic; color: var(--accent); }

  .nav-links {
    display: flex;
    gap: 2.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
  }

  .nav-links a:hover { color: var(--accent); }

  .nav-cta {
    background: var(--ink);
    color: var(--cream) !important;
    padding: 0.6rem 1.1rem;
    font-size: 0.72rem;
    transition: background 0.2s;
  }

  .nav-cta:hover { background: var(--accent); color: var(--cream) !important; }

  .nav-call {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent) !important;
    border: 1px solid var(--rule);
    padding: 0.55rem 0.95rem;
    font-size: 0.72rem;
    transition: all 0.2s;
  }

  .nav-call:hover {
    border-color: var(--accent);
    background: rgba(201, 169, 97, 0.1);
  }

  .nav-call-icon { font-size: 0.9rem; line-height: 1; }

  /* ============ SECTION STRUCTURE ============ */
  section {
    position: relative;
    z-index: 2;
    padding: 6rem clamp(1.5rem, 4vw, 5rem);
    max-width: 1280px;
    margin: 0 auto;
  }

  .section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.5rem;
  }

  .section-label::before {
    content: "——— ";
    color: var(--rule);
  }

  h1, h2, h3 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    margin-bottom: 2rem;
  }

  h2 .italic { font-style: italic; color: var(--accent); }

  h3 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  p { color: var(--ink-soft); }

  /* ============ HERO ============ */
  .hero {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  .hero h1 {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(2.7rem, 6vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    margin-bottom: 2.5rem;
  }

  .hero h1 .italic { font-style: italic; color: var(--accent); }
  .hero h1 .amp { font-style: italic; font-weight: 300; color: var(--ink-soft); }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 5rem;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--rule);
  }

  .lead {
    font-family: 'Instrument Serif', serif;
    font-size: 1.5rem;
    line-height: 1.4;
    max-width: 38ch;
    color: var(--ink);
  }

  .lead em { color: var(--accent); }

  .detail-block {}

  .detail-row {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.9rem;
  }

  .detail-row:first-child { border-top: 1px solid var(--rule); }

  .detail-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.67rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    width: 100px;
    flex-shrink: 0;
    padding-top: 0.25rem;
  }

  .detail-value { color: var(--ink); line-height: 1.5; }
  .detail-value strong { font-weight: 500; color: var(--accent); }

  .cta-row {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
    flex-wrap: wrap;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    background: var(--ink);
    color: var(--cream);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid var(--ink);
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--accent);
    transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
  }

  .btn > * { position: relative; z-index: 1; }
  .btn { z-index: 1; }

  .btn:hover {
    border-color: var(--accent);
    letter-spacing: 0.13em;
  }

  .btn:hover::after { left: 0; }

  .btn-ghost { background: transparent; color: var(--ink); }
  .btn-ghost::after { background: var(--ink); }
  .btn-ghost:hover { color: var(--cream); border-color: var(--ink); }

  /* ============ BIO ============ */
  .bio-grid {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 4.5rem;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
  }

  .bio-sidebar {
    position: sticky;
    top: 6rem;
  }

  .portrait-frame {
    position: relative;
    margin-bottom: 2.5rem;
    overflow: hidden;
    background: var(--cream-deep);
    aspect-ratio: 4 / 5;
    border-radius: 4px;
  }

  .portrait-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 16%;
    transform: scale(1.16);
    transform-origin: center 16%;
    filter: saturate(0.92) contrast(1.02);
    transition: filter 0.4s ease, transform 0.5s ease;
  }

  .portrait-frame:hover img {
    filter: saturate(1) contrast(1.05);
    transform: scale(1.2);
  }

  .portrait-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 60%,
      rgba(26, 23, 20, 0.08) 100%
    );
    pointer-events: none;
  }

  .portrait-caption {
    margin-top: 1rem;
    margin-bottom: 2rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .portrait-caption::before {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--accent);
  }

  .credentials {
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
  }

  .cred-item {
    margin-bottom: 1.5rem;
  }

  .cred-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.35rem;
  }

  .cred-value {
    font-family: 'Instrument Serif', serif;
    font-size: 1.15rem;
    color: var(--ink);
    line-height: 1.3;
  }

  .cred-value .sub {
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.82rem;
    color: var(--ink-muted);
    display: block;
    margin-top: 0.15rem;
    letter-spacing: 0.02em;
  }

  .bio-content p {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    max-width: 36rem;
    text-align: justify;
    hyphens: auto;
  }

  .bio-content .lead-p {
    font-family: 'Instrument Serif', serif;
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 2.5rem;
  }

  .bio-content .lead-p em { color: var(--accent); }

  .pull-quote {
    margin: 2.5rem 0;
    padding: 2rem 0 2rem 2rem;
    border-left: 3px solid var(--accent);
    font-family: 'Instrument Serif', serif;
    font-size: 1.35rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--ink);
    position: relative;
  }

  .pull-quote::before {
    content: "\201C";
    position: absolute;
    left: 1rem;
    top: -0.5rem;
    font-size: 3.5rem;
    color: var(--accent);
    opacity: 0.25;
    font-style: normal;
    line-height: 1;
  }

  .pull-quote cite {
    display: block;
    margin-top: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-style: normal;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  /* ============ PRACTICE AREAS ============ */
  .practice-intro {
    max-width: 70ch;
    font-family: 'Instrument Serif', serif;
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--ink);
    margin-bottom: 4rem;
  }

  .practice-intro em { color: var(--accent); }

  .practice-family {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    padding: 3rem 0;
    border-top: 1px solid var(--rule);
  }

  .practice-family:last-child { border-bottom: 1px solid var(--rule); }

  .family-header {
    position: sticky;
    top: 6rem;
    align-self: start;
  }

  .family-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin-bottom: 0.75rem;
  }

  .family-header h3 {
    font-size: 2.25rem;
    line-height: 1.05;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
  }

  .family-header h3 .italic { font-style: italic; color: var(--accent); }

  .family-intro {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 32ch;
  }

  .sub-practice-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2.5rem;
  }

  .sub-practice {
    padding-left: 1.25rem;
    position: relative;
  }

  .sub-practice::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
  }

  .sub-practice h4 {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--ink);
    margin-bottom: 0.45rem;
    letter-spacing: -0.005em;
    line-height: 1.3;
  }

  .sub-practice p {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-muted);
  }

  /* ============ HERO BACKDROP - FULL BLEED PHOTO ============ */
  .hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    will-change: opacity, transform;
  }

  /* The photographic background layer */
  .hero-backdrop .photo {
    position: absolute;
    inset: 0;
    background-image: url('/assets/hero-bridge.jpg');
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    /* Desaturate slightly and shift cooler to blend with navy palette */
    filter: saturate(0.75) contrast(1.05) brightness(0.85);
  }

  /* Heavy navy overlay that preserves photo visibility */
  .hero-backdrop .overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        180deg,
        rgba(15, 27, 45, 0.85) 0%,
        rgba(15, 27, 45, 0.65) 30%,
        rgba(15, 27, 45, 0.55) 60%,
        rgba(15, 27, 45, 0.85) 90%,
        rgba(15, 27, 45, 1) 100%
      );
  }

  /* Brass warm tint — pulls the image into your palette */
  .hero-backdrop .warmth {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 70% 70%, rgba(201, 169, 97, 0.15) 0%, transparent 70%),
      radial-gradient(ellipse 60% 50% at 20% 30%, rgba(201, 169, 97, 0.08) 0%, transparent 65%);
    mix-blend-mode: overlay;
  }

  /* Hero content sits above backdrop */
  .hero > *:not(.hero-backdrop) {
    position: relative;
    z-index: 2;
  }

  /* Dramatic text shadow for legibility on photograph */
  .hero h1 {
    text-shadow: 0 4px 40px rgba(15, 27, 45, 0.9), 0 2px 12px rgba(15, 27, 45, 0.7);
  }

  .hero .lead {
    text-shadow: 0 2px 20px rgba(15, 27, 45, 0.85);
  }

  .hero .section-label {
    text-shadow: 0 2px 10px rgba(15, 27, 45, 0.7);
  }

  .hero .detail-value {
    text-shadow: 0 1px 8px rgba(15, 27, 45, 0.7);
  }

  @media (max-width: 900px) {
    .hero { min-height: 85vh; }
    .hero-backdrop .photo {
      background-position: center center;
    }
  }

  /* ============ PRACTICE AREAS - BENTO GRID ============ */
  .practice-intro {
    max-width: 70ch;
    font-family: 'Instrument Serif', serif;
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--ink);
    margin-bottom: 4rem;
  }

  .practice-intro em { color: var(--accent); }

  .bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    perspective: 1200px;
    margin-top: 3rem;
  }

  .bento .card {
    grid-column: span 4;
    position: relative;
    display: flex; flex-direction: column;
    padding: 2rem 1.9rem 1.8rem;
    min-height: 230px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background:
      linear-gradient(160deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 55%),
      rgba(26, 41, 64, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    cursor: pointer;
    transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0) scale(1);
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.45s, box-shadow 0.45s, background 0.45s;
  }
  .bento .card.lg { grid-column: span 6; min-height: 300px; }
  .bento .card.sm { grid-column: span 3; }

  /* entrance: hidden only once JS adds .pre, so no-JS users still see content */
  .bento .card.pre { opacity: 0; }
  .bento .card.in { animation: bentoIn 0.85s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: var(--d, 0s); }
  @keyframes bentoIn {
    from { opacity: 0; transform: translateY(36px); filter: blur(10px); }
    to   { opacity: 1; transform: none; filter: none; }
  }

  /* gold hairline — shimmers while hovered/open */
  .bento .card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 35%, var(--accent-soft) 50%, var(--accent) 65%, transparent 100%);
    background-size: 220% 100%;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.55s ease;
  }
  /* cursor-tracking gold glow */
  .bento .card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(520px circle at var(--mx,50%) var(--my,0%), rgba(201,169,97,0.22), transparent 62%);
    transition: opacity 0.4s ease;
  }
  .bento .card:hover, .bento .card.open {
    border-color: rgba(201,169,97,0.6);
    box-shadow: 0 34px 80px -30px rgba(0,0,0,0.8), 0 0 40px -18px rgba(201,169,97,0.35), 0 0 0 1px rgba(201,169,97,0.14) inset;
    background:
      linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 55%),
      rgba(26, 41, 64, 0.65);
  }
  .bento .card:hover { transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-10px) scale(1.015); }
  .bento .card:hover::before, .bento .card.open::before {
    transform: scaleX(1);
    animation: bentoShimmer 2.2s linear infinite;
  }
  .bento .card:hover::after, .bento .card.open::after { opacity: 1; }
  @keyframes bentoShimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }

  .bento .card.open {
    grid-column: 1 / -1;
    cursor: default;
    transform: none;
  }
  .bento .card.open .card-cta { color: var(--accent); }
  .bento .card.open .card-cta .arrow { transform: rotate(90deg); }

  .bento .card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.4rem; }
  .bento .card-icon {
    width: 46px; height: 46px; color: var(--accent);
    display: grid; place-items: center;
    border: 1px solid var(--rule); border-radius: 10px;
    background: rgba(201,169,97,0.05);
    transition: color 0.4s, border-color 0.4s, background 0.4s, transform 0.45s cubic-bezier(.3,1.6,.4,1);
  }
  .bento .card-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .bento .card:hover .card-icon, .bento .card.open .card-icon {
    color: var(--accent-soft); border-color: rgba(201,169,97,0.55);
    background: rgba(201,169,97,0.14);
    transform: translateY(-3px) scale(1.07) rotate(-3deg);
    box-shadow: 0 8px 22px -10px rgba(201,169,97,0.45);
  }
  .bento .card-index { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ink-muted); padding-top: 0.35rem; transition: color 0.4s; }
  .bento .card:hover .card-index, .bento .card.open .card-index { color: var(--accent); }

  .bento .card-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.55rem; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 0.7rem; }
  .bento .card.lg .card-title, .bento .card.open .card-title { font-size: 1.95rem; }
  .bento .card-title .italic { font-style: italic; color: var(--accent); }
  .bento .card-desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; margin-bottom: 1.2rem; }
  .bento .card.lg .card-desc, .bento .card.open .card-desc { font-size: 1rem; max-width: 720px; }

  .bento .card-cta {
    margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-muted); transition: color 0.4s, gap 0.4s;
    user-select: none;
  }
  .bento .card-cta .arrow { transition: transform 0.4s; }
  .bento .card:hover .card-cta { color: var(--accent); gap: 0.8rem; }
  .bento .card:hover .card-cta .arrow { transform: translateX(5px); }

  /* sub-practices: animatable 0fr -> 1fr reveal */
  .bento .sub-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.65s cubic-bezier(.25,.8,.25,1); }
  .bento .sub-inner { overflow: hidden; }
  .bento .card.open .sub-wrap { grid-template-rows: 1fr; }
  .bento .sub-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.5rem 2rem;
    margin-top: 1.8rem; padding-top: 1.8rem;
    border-top: 1px solid var(--rule);
  }
  .bento .sub-item { position: relative; padding-left: 1.1rem; opacity: 0; transform: translateY(14px); }
  .bento .card.open .sub-item { animation: bentoSubIn 0.55s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(0.18s + var(--i) * 0.05s); }
  @keyframes bentoSubIn { to { opacity: 1; transform: none; } }
  .bento .sub-item::before {
    content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.2rem; width: 1px;
    background: linear-gradient(180deg, var(--accent), transparent);
    opacity: 0.55; transition: opacity 0.3s;
  }
  .bento .sub-item:hover::before { opacity: 1; }
  .bento .sub-item h4 { font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.35rem; letter-spacing: 0.01em; }
  .bento .sub-item p { color: var(--ink-soft); font-size: 0.84rem; line-height: 1.5; }

  @media (max-width: 900px) {
    .bento .card, .bento .card.lg, .bento .card.sm { grid-column: span 6; }
    .bento .card.open { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .bento .card, .bento .card.lg, .bento .card.sm, .bento .card.open { grid-column: span 12; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bento .card, .bento .card-icon, .bento .card-cta, .bento .sub-wrap { transition: none; }
    .bento .card:hover { transform: none; }
    .bento .card.in { animation: none; }
    .bento .card:hover::before, .bento .card.open::before { animation: none; }
    .bento .card.open .sub-item { animation: none; opacity: 1; transform: none; }
  }

    /* ============ SCROLL REVEAL ============ */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
  }

  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
  .reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; }
  .reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; }
  .reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.33s; }
  .reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; }
  .reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.47s; }
  .reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.54s; }
  .reveal-stagger.visible > *:nth-child(9) { transition-delay: 0.60s; }
  .reveal-stagger.visible > *:nth-child(10) { transition-delay: 0.66s; }
  .reveal-stagger.visible > *:nth-child(11) { transition-delay: 0.72s; }
  .reveal-stagger.visible > *:nth-child(12) { transition-delay: 0.78s; }

  /* ============ STAT COUNTER ============ */
  .stat-number .counter {
    display: inline-block;
    min-width: 1ch;
  }

  /* ============ INDUSTRIES ============ */
  .industries-section {
    background: var(--cream-deep);
    margin: 0;
    max-width: 100%;
    padding: 6rem clamp(1.5rem, 4vw, 5rem);
  }

  .industries-inner {
    max-width: 1280px;
    margin: 0 auto;
  }

  .industries-intro {
    font-family: 'Instrument Serif', serif;
    font-size: 1.3rem;
    line-height: 1.45;
    max-width: 65ch;
    margin-bottom: 4rem;
    color: var(--ink);
  }

  .industries-intro em { color: var(--accent); }

  .sector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
    perspective: 1200px;
  }
  .sector {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.7rem 1.6rem 1.55rem;
    min-height: 158px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background:
      linear-gradient(160deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 55%),
      rgba(15, 27, 45, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.45s, box-shadow 0.45s, background 0.45s;
  }
  .sector::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 35%, var(--accent-soft) 50%, var(--accent) 65%, transparent 100%);
    background-size: 220% 100%;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.55s ease;
  }
  .sector::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(201,169,97,0.18), transparent 62%);
    transition: opacity 0.4s ease;
  }
  .sector:hover {
    transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px);
    border-color: rgba(201,169,97,0.55);
    box-shadow: 0 26px 60px -26px rgba(0,0,0,0.75), 0 0 30px -16px rgba(201,169,97,0.3), 0 0 0 1px rgba(201,169,97,0.12) inset;
    background:
      linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%),
      rgba(15, 27, 45, 0.62);
  }
  .sector:hover::before { transform: scaleX(1); animation: bentoShimmer 2.2s linear infinite; }
  .sector:hover::after { opacity: 1; }

  .sector-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.1rem; }
  .sector-icon {
    width: 40px; height: 40px; color: var(--accent);
    display: grid; place-items: center;
    border: 1px solid var(--rule); border-radius: 9px;
    background: rgba(201,169,97,0.05);
    transition: color 0.4s, border-color 0.4s, background 0.4s, transform 0.45s cubic-bezier(.3,1.6,.4,1);
  }
  .sector-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .sector:hover .sector-icon {
    color: var(--accent-soft); border-color: rgba(201,169,97,0.5);
    background: rgba(201,169,97,0.12);
    transform: translateY(-2px) scale(1.06) rotate(-3deg);
    box-shadow: 0 7px 18px -9px rgba(201,169,97,0.4);
  }
  .sector-num { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.16em; color: var(--ink-muted); padding-top: 0.3rem; transition: color 0.4s; }
  .sector:hover .sector-num { color: var(--accent); }

  .sector h4 { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.24rem; color: var(--ink); line-height: 1.22; margin-bottom: 0.5rem; letter-spacing: 0.005em; }
  .sector p { color: var(--ink-soft); font-size: 0.86rem; line-height: 1.45; }

  /* Show 8 by default; reveal the rest via the toggle */
  .sector-grid.collapsed .sector:nth-child(n+9) { display: none; }

  .sector-toggle-wrap { display: flex; justify-content: center; margin-top: 2.5rem; }
  .sector-toggle {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); background: none; border: 1px solid var(--rule); border-radius: 999px;
    padding: 0.7rem 1.4rem; cursor: pointer;
    transition: border-color 0.3s, background 0.3s, gap 0.3s;
    will-change: transform;
  }
  .sector-toggle:hover { border-color: var(--accent); background: rgba(201,169,97,0.08); gap: 0.9rem; }
  .sector-toggle .it-arrow { transition: transform 0.35s; }
  .sector-toggle[aria-expanded="true"] .it-arrow { transform: rotate(180deg); }

  /* entrance */
  .sector.pre { opacity: 0; }
  .sector.in { animation: sectorIn 0.8s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i) * 0.06s); }
  @keyframes sectorIn {
    from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: none; }
  }

  /* ===== shared 21st.dev-style effects ===== */

  /* BORDER BEAM — gold light traveling the card border (sectors + practice bento) */
  @property --bb { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  .beam {
    position: absolute; inset: 0; border-radius: 14px; padding: 1.5px;
    background: conic-gradient(from var(--bb),
      transparent 0%, transparent 72%,
      rgba(201,169,97,0.4) 82%, var(--accent-soft) 90%, rgba(201,169,97,0.4) 96%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0; transition: opacity 0.45s ease;
    pointer-events: none;
  }
  .sector:hover .beam, .bento .card:hover .beam, .bento .card.open .beam {
    opacity: 1; animation: beamSpin 2.6s linear infinite;
  }
  @keyframes beamSpin { to { --bb: 360deg; } }

  /* TEXT SHIMMER on the industries section label */
  .industries-section .section-label .lbl {
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #FFF3D6 50%, var(--accent) 62%, var(--accent) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: textSheen 5.5s ease-in-out infinite;
  }
  @keyframes textSheen { 0% { background-position: 115% 0; } 55% { background-position: -35% 0; } 100% { background-position: -35% 0; } }

  /* GOLD PARTICLE FIELD behind the industries grid */
  .gold-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

  @media (max-width: 1024px) { .sector-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 760px)  { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px)  { .sector-grid { grid-template-columns: 1fr; } }

  @media (prefers-reduced-motion: reduce) {
    .sector, .sector-icon, .sector-toggle { transition: none; }
    .sector:hover { transform: none; }
    .sector:hover::before { animation: none; }
    .sector.in { animation: none; }
    .sector:hover .beam, .bento .card:hover .beam, .bento .card.open .beam { animation: none; opacity: 0.6; }
    .industries-section .section-label .lbl { animation: none; }
    .gold-field { display: none; }
  }

    /* ============ DEAL SHEET ============ */
  .deal-sheet {
    background: var(--cream-deep);
    margin: 0;
    max-width: 100%;
    padding: 6rem clamp(1.5rem, 4vw, 5rem);
  }

  .deal-sheet-inner {
    max-width: 1280px;
    margin: 0 auto;
  }

  .deal-headline-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    gap: 2rem;
  }

  .stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
    padding: 2.5rem 0;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }

  .stat {}

  .stat-number {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(2.75rem, 5vw, 4rem);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
  }

  .stat-number .accent { color: var(--accent); font-style: italic; }

  .stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 0.75rem;
  }

  .deal-list {
    list-style: none;
  }

  .deal-item {
    display: grid;
    grid-template-columns: 100px 1fr 180px;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
    transition: all 0.3s ease;
    position: relative;
  }

  .deal-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(201, 169, 97, 0.06) 0%, transparent 100%);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .deal-item:hover::before { width: 100%; }
  .deal-item:hover { padding-left: 1rem; }
  .deal-item:hover .deal-year { color: var(--accent); letter-spacing: 0.15em; }

  .deal-year {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .deal-desc {
    font-family: 'Instrument Serif', serif;
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--ink);
  }

  .deal-desc .role {
    display: block;
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.82rem;
    color: var(--ink-muted);
    margin-top: 0.35rem;
    font-style: normal;
  }

  .deal-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-align: right;
  }

  .deal-disclaimer {
    margin-top: 2.5rem;
    font-size: 0.78rem;
    color: var(--ink-muted);
    font-style: italic;
    max-width: 70ch;
    line-height: 1.6;
  }

  /* ============ INSIGHTS ============ */
  .insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
  }

  .insight-card {
    border-top: 1px solid var(--rule);
    padding-top: 1.75rem;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
  }

  .insight-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .insight-card:hover { transform: translateY(-6px); }
  .insight-card:hover::before { width: 50%; }
  .insight-card:hover .insight-title { color: var(--accent); }
  .insight-card:hover .insight-date { color: var(--ink-soft); }

  .insight-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
  }

  .insight-category {
    color: var(--accent);
    margin-right: 0.75rem;
  }

  .insight-title {
    font-family: 'Instrument Serif', serif;
    font-size: 1.4rem;
    line-height: 1.25;
    margin-bottom: 1rem;
    transition: color 0.2s;
  }

  .insight-excerpt {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  /* ============ CONTACT ============ */
  .contact {
    background: #FFFFFF;
    color: #1A2940;
    margin: 0;
    max-width: 100%;
    padding: 7rem clamp(1.5rem, 4vw, 5rem);
  }

  .contact-inner {
    max-width: 1280px;
    margin: 0 auto;
  }

  .contact .section-label { color: #9A7B30; }
  .contact .section-label::before { color: #CFC8B6; }

  .contact h2 {
    color: #0F1B2D;
    max-width: 20ch;
    margin-bottom: 3rem;
  }

  .contact h2 .italic { color: #9A7B30; }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 5rem;
    margin-top: 3rem;
  }

  .contact-info {
    border-top: 1px solid #E0D9C8;
    padding-top: 2rem;
  }

  .contact-method {
    margin-bottom: 2.5rem;
  }

  .contact-method .cred-label { color: #9A7B30; }
  .contact-method a {
    font-family: 'Instrument Serif', serif;
    font-size: 1.35rem;
    color: #0F1B2D;
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.3;
    display: block;
  }

  .contact-method a:hover { color: #B0883A; }
  .contact-method .sub {
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.82rem;
    color: #5A6473;
    margin-top: 0.35rem;
  }

  /* Form */
  form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 0.5rem;
    display: block;
  }

  input, textarea, select {
    width: 100%;
    padding: 0.9rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #CFC8B6;
    color: #1A2940;
    font-family: 'Inter Tight', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s;
  }

  input:focus, textarea:focus, select:focus {
    outline: none;
    border-bottom-color: #9A7B30;
  }

  textarea { resize: vertical; min-height: 100px; font-family: 'Inter Tight', sans-serif; }

  select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A2940' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }

  select option { background: #fff; color: #1A2940; }

  .form-btn {
    background: #C9A961;
    color: #0F1B2D;
    border: 1px solid #C9A961;
    padding: 1rem 1.75rem;
    margin-top: 1rem;
    align-self: flex-start;
    cursor: pointer;
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.25s;
  }

  .form-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--cream);
    letter-spacing: 0.13em;
  }

  /* ============ FOOTER ============ */
  footer {
    position: relative; z-index: 2;
    background: #FFFFFF;
    color: #1A2940;
    padding: 3rem;
    border-top: 1px solid #E7E0CF;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  footer a { color: #1A2940; }

  .footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }

  .footer-mid { text-align: center; }
  .footer-right { text-align: right; }

  .footer-right a {
    color: #1A2940;
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-right a:hover { color: var(--accent); }

  .disclaimer {
    max-width: 1280px;
    margin: 2.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid #E7E0CF;
    font-size: 0.68rem;
    line-height: 1.7;
    letter-spacing: 0.03em;
    text-transform: none;
    color: #5A6473;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 900px) {
    nav { padding: 1rem 1.25rem; gap: 0.6rem; }
    .nav-links { display: flex; gap: 0.6rem; align-items: center; }
    .nav-links a:not(.nav-call):not(.nav-cta) { display: none; }
    .nav-call { padding: 0.5rem 0.7rem; font-size: 0.7rem; }
    .nav-cta { padding: 0.5rem 0.8rem; }
    .mark-logo { height: 32px; }
    .mark-name { font-size: 1.15rem; }

    section { padding: 3.5rem 1.25rem; }
    .deal-sheet, .contact { padding: 3.5rem 1.25rem; }

    .hero-grid, .bio-grid, .contact-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .bio-sidebar { position: static; }

    .practice-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .practice-family {
      grid-template-columns: 1fr;
      gap: 1.5rem;
      padding: 2rem 0;
    }

    .family-header { position: static; }
    .family-header h3 { font-size: 1.6rem; }
    .family-intro { max-width: 100%; }

    .sub-practice-list {
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }

    .industries-section { padding: 3.5rem 1.25rem; }
    .industries-intro { font-size: 1.05rem; margin-bottom: 2rem; }

    .practice-intro { font-size: 1.05rem; margin-bottom: 2rem; }

    .pull-quote {
      font-size: 1.1rem;
      padding: 1.5rem 0 1.5rem 1.25rem;
      margin: 1.75rem 0;
    }

    .pull-quote::before {
      font-size: 2.5rem;
      left: 0.5rem;
    }

    .stats-row {
      grid-template-columns: 1fr;
      gap: 1.5rem;
      padding: 1.75rem 0;
    }

    .insights-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .deal-item {
      grid-template-columns: 1fr;
      gap: 0.4rem;
    }

    .deal-meta { text-align: left; }

    .form-row { grid-template-columns: 1fr; }

    .footer-inner {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 1rem;
    }
    .footer-mid, .footer-right { text-align: center; }

    .hero h1 { font-size: 3rem; }
    .lead { font-size: 1.15rem; }
    .cta-row { flex-direction: column; align-items: stretch; }
    .btn { justify-content: center; width: 100%; }

    .deal-headline-row { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 460px) {
    .mark-name { display: none; }
    .nav-call { font-size: 0.66rem; padding: 0.45rem 0.55rem; }
  }

  /* ============================================================
     HERO — "Aurum/Aurora" rebuild: centered Bloom composition,
     arched portrait portal, two-canvas gold motion. Overrides the
     older .hero rules above (appended last = wins the cascade).
     ============================================================ */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(3.5rem, 8vh, 7rem) 1.5rem clamp(3rem, 6vh, 5rem);
    background: #0F1B2D;
    color: #F4EBD4;
    text-align: center;
  }

  .hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background: radial-gradient(120% 90% at 50% -10%, #1A2940 0%, #0F1B2D 46%, #070E1A 100%);
  }

  .hero-aurora, .hero-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .hero-aurora { z-index: 1; opacity: 0.92; }
  .hero-fx { z-index: 2; mix-blend-mode: screen; }

  .hero-grain {
    position: absolute;
    inset: -50%;
    z-index: 3;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
    animation: grainShift 7s steps(6) infinite;
  }
  @keyframes grainShift {
    0% { transform: translate(0, 0); } 16% { transform: translate(-3%, 2%); }
    33% { transform: translate(2%, -3%); } 50% { transform: translate(-2%, 1%); }
    66% { transform: translate(3%, 2%); } 83% { transform: translate(-1%, -2%); }
    100% { transform: translate(0, 0); }
  }

  .hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    background:
      radial-gradient(58% 50% at 50% 52%, rgba(7,14,26,0.55) 0%, rgba(7,14,26,0) 62%),
      radial-gradient(140% 120% at 50% 40%, rgba(7,14,26,0) 38%, rgba(7,14,26,0.55) 100%);
  }

  .hero-col {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: clamp(560px, 62vw, 780px);
    margin-inline: auto;
  }

  .hero-kicker {
    margin: 0 0 clamp(1.6rem, 3.4vh, 2.4rem);
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.58rem, 1.3vw, 0.7rem);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #C9A961;
    font-weight: 500;
  }

  .hero-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.9rem, 2vw, 1.5rem);
    margin: 0 auto clamp(2rem, 4.4vh, 3rem);
  }
  .hero-mark {
    height: clamp(66px, 9vw, 108px);
    width: auto;
    display: block;
    filter: drop-shadow(0 6px 22px rgba(7,14,26,0.5));
  }
  .hero-wordmark { display: flex; flex-direction: column; align-items: stretch; }
  .hero-firm {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.1rem, 5.2vw, 3.6rem);
    line-height: 0.96;
    letter-spacing: 0.015em;
    color: #F4EBD4;
    text-align: left;
  }
  .hero-tagline {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(201,169,97,0.45);
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.58rem, 1.1vw, 0.72rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #C9A961;
    text-align: center;
  }

  /* ---- arched portrait portal ---- */
  .hero-portal {
    position: relative;
    margin: 0 0 clamp(2rem, 4.4vh, 3rem);
    width: clamp(220px, 30vw, 320px);
    aspect-ratio: 7 / 9;
    border-radius: 50% 50% 8px 8px / 38% 38% 4px 4px;
  }
  .portal-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    display: block;
    border-radius: inherit;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,0.6) 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,0.6) 82%, transparent 100%);
  }
  .portal-frame {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid #C9A961;
    box-shadow: inset 0 0 0 1px rgba(224,197,135,0.18), inset 0 -40px 60px -30px rgba(15,27,45,0.9);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
    pointer-events: none;
  }
  .portal-glow {
    position: absolute;
    inset: -16% -18% -10%;
    border-radius: inherit;
    background: radial-gradient(60% 55% at 50% 28%, rgba(201,169,97,0.30), rgba(201,169,97,0) 70%);
    filter: blur(22px);
    opacity: 0.85;
    pointer-events: none;
  }

  .hero-title {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height: 1.02;
    letter-spacing: -0.012em;
    color: #F4EBD4;
    text-wrap: balance;
  }
  .hero-title em { font-style: italic; color: #E0C587; }

  .hero-rule {
    display: block;
    width: 54px;
    height: 1px;
    margin: clamp(1.4rem, 3vh, 1.9rem) auto;
    background: linear-gradient(90deg, transparent, #C9A961, transparent);
  }

  .hero-lead {
    margin: 0 auto clamp(2.2rem, 4.6vh, 2.9rem);
    max-width: 56ch;
    font-size: clamp(1.02rem, 1.55vw, 1.2rem);
    line-height: 1.6;
    color: #D4C5A3;
    font-weight: 300;
  }

  .hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
  }
  .hero-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 1.02rem 2.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: #E0C587;
    text-decoration: none;
    background: rgba(201,169,97,0.04);
    border: 1px solid #C9A961;
    border-radius: 2px;
    cursor: pointer;
    overflow: visible;
    transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
  }
  .hero-cta .btn::after { content: none; }
  .hero-cta .btn .btn-arrow { transition: transform 0.45s ease; }
  .hero-cta .btn:hover, .hero-cta .btn:focus-visible {
    background: rgba(201,169,97,0.11);
    border-color: #E0C587;
    color: #F4EBD4;
    box-shadow: 0 0 0 1px rgba(201,169,97,0.5), 0 12px 38px rgba(201,169,97,0.16);
    outline: none;
    letter-spacing: 0.16em;
  }
  .hero-cta .btn:hover .btn-arrow, .hero-cta .btn:focus-visible .btn-arrow { transform: translateX(4px); }

  .hero-phone {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: #8B7F68;
    text-decoration: none;
    transition: color 0.35s ease;
  }
  .hero-phone:hover, .hero-phone:focus-visible { color: #C9A961; outline: none; }

  .hero-meta {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 1.1rem 3rem;
    width: 100%;
    max-width: 700px;
    margin: clamp(2.6rem, 5vh, 3.4rem) auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid #2A3A55;
  }
  .hero-meta .hero-meta-item { display: flex; flex-direction: column; gap: 0.4rem; text-align: center; }
  .hero-meta dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8B7F68;
  }
  .hero-meta dd { margin: 0; font-size: 0.84rem; letter-spacing: 0.01em; color: #D4C5A3; }

  @media (max-width: 900px) {
    .hero-col { max-width: 560px; }
    .hero-portal { width: clamp(200px, 50vw, 260px); }
    .hero-lead { max-width: 48ch; }
  }
  @media (max-width: 560px) {
    .hero-lockup { flex-direction: column; gap: 0.7rem; }
    .hero-firm { text-align: center; }
    .hero-kicker { letter-spacing: 0.18em; font-size: 0.56rem; }
    .hero-meta { grid-template-columns: 1fr; gap: 1.3rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-grain { animation: none; }
  }

  /* ============================================================
     HERO — EDITORIAL SPLIT (final). Overrides the centered rules
     above. Content left over a cinematic video; full-color
     portrait flush to the right edge.
     ============================================================ */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr minmax(340px, 40vw);
    align-items: stretch;
    padding: 0;
    text-align: left;
    background: #0F1B2D url("/assets/hero-poster.jpg") center 28% / cover no-repeat;
  }
  .hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) brightness(0.7);
  }
  .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(95deg, rgba(7,14,26,0.97) 0%, rgba(10,18,32,0.9) 40%, rgba(15,27,45,0.55) 68%, rgba(15,27,45,0.22) 100%),
      radial-gradient(120% 100% at 0% 50%, rgba(7,14,26,0.5), transparent 60%);
  }
  .hero-content {
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 690px;
    padding: clamp(5rem, 10vh, 8rem) clamp(1.75rem, 4vw, 4rem) clamp(3rem, 6vh, 5rem) clamp(2rem, 6vw, 6rem);
  }
  .hero-portrait {
    position: relative;
    z-index: 2;
    align-self: stretch;
    overflow: hidden;
  }
  .hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 16%;
    display: block;
  }
  .hero-portrait::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, #0F1B2D, transparent);
  }
  .hero-portrait::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 1px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(201,169,97,0.55), transparent);
  }

  .hero-lockup {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.8rem, 1.6vw, 1.3rem);
    margin: 0 0 clamp(2rem, 5vh, 3rem);
  }
  .hero-mark { height: clamp(58px, 7vw, 88px); width: auto; display: block; filter: drop-shadow(0 6px 22px rgba(7,14,26,0.5)); }
  .hero-wordmark { display: flex; flex-direction: column; align-items: stretch; }
  .hero-firm {
    font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
    font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 0.96;
    letter-spacing: 0.015em; color: #F4EBD4; text-align: left;
  }
  .hero-tagline {
    margin-top: 0.35rem; padding-top: 0.35rem;
    border-top: 1px solid rgba(201,169,97,0.45);
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.54rem, 0.9vw, 0.66rem); letter-spacing: 0.3em;
    text-transform: uppercase; color: #C9A961; text-align: left;
  }

  .hero-title {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
    font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.0;
    letter-spacing: -0.015em; color: #F4EBD4; text-shadow: 0 2px 30px rgba(7,14,26,0.6);
  }
  .hero-title em { font-style: italic; color: #E0C587; }

  .hero-lead {
    margin: clamp(1.5rem, 3vh, 2rem) 0 clamp(2rem, 4vh, 2.6rem);
    max-width: 52ch;
    font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
    color: #D4C5A3; font-weight: 300;
  }

  .hero-cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
  .hero-cta .btn {
    display: inline-flex; align-items: center; gap: 0.7em;
    padding: 1rem 2.2rem; font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
    color: #0F1B2D; text-decoration: none; background: #C9A961;
    border: 1px solid #C9A961; border-radius: 2px; cursor: pointer; overflow: visible;
    transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
  }
  .hero-cta .btn::after { content: none; }
  .hero-cta .btn .btn-arrow { transition: transform 0.35s ease; }
  .hero-cta .btn:hover, .hero-cta .btn:focus-visible {
    background: #E0C587; border-color: #E0C587; color: #0F1B2D;
    box-shadow: 0 14px 38px rgba(201,169,97,0.28); outline: none; letter-spacing: 0.16em;
  }
  .hero-cta .btn:hover .btn-arrow { transform: translateX(4px); }
  .hero-phone {
    font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.1em;
    color: #D4C5A3; text-decoration: none; transition: color 0.3s ease;
  }
  .hero-phone:hover, .hero-phone:focus-visible { color: #C9A961; outline: none; }

  .hero-meta {
    display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; justify-content: flex-start;
    width: auto; max-width: none;
    margin: clamp(2.4rem, 5vh, 3.2rem) 0 0; padding-top: 1.6rem;
    border-top: 1px solid #2A3A55;
  }
  .hero-meta .hero-meta-item { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
  .hero-meta dt { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: #8B7F68; }
  .hero-meta dd { margin: 0; font-size: 0.86rem; letter-spacing: 0.01em; color: #D4C5A3; }

  @media (max-width: 880px) {
    .hero { grid-template-columns: 1fr; }
    .hero-portrait { display: none; }
    .hero-content { max-width: 660px; margin: 0 auto; padding-top: clamp(4.5rem, 12vh, 7rem); text-align: center; }
    .hero-lockup { justify-content: center; flex-direction: row; }
    .hero-firm, .hero-tagline { text-align: center; }
    .hero-lead { margin-left: auto; margin-right: auto; }
    .hero-cta { justify-content: center; }
    .hero-meta { justify-content: center; }
    .hero-scrim { background: linear-gradient(180deg, rgba(7,14,26,0.82) 0%, rgba(15,27,45,0.92) 100%); }
  }
  @media (max-width: 460px) {
    .hero-lockup { flex-direction: column; gap: 0.7rem; }
    .hero-cta { flex-direction: column; align-items: center; gap: 1rem; }
    .hero-cta .btn { width: 100%; justify-content: center; }
  }

  /* ============================================================
     HERO — RESTORED to the original bridge photo + flowing gold
     light. Re-establishes .hero / .hero-backdrop / .lightflow and
     overrides the split/aurum blocks above (appended last = wins).
     ============================================================ */
  .hero {
    position: relative;
    isolation: isolate;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
    grid-template-columns: none;
    text-align: left;
    padding: clamp(6.5rem, 13vh, 9.5rem) clamp(1.5rem, 4vw, 5rem) 4rem;
    background: #0F1B2D;
    max-width: 100%;
  }
  .hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background: none;
  }
  .hero-backdrop .photo {
    position: absolute;
    inset: 0;
    background-image: url('/assets/hero-bridge.jpg');
    background-size: cover;
    background-position: center 38%;
    background-repeat: no-repeat;
    filter: none;
  }
  .hero-backdrop .overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 78% 66% at 80% 26%, rgba(7,14,26,0.82) 0%, rgba(7,14,26,0.40) 42%, transparent 72%),
      linear-gradient(180deg, rgba(7,14,26,0.30) 0%, transparent 30%, transparent 58%, rgba(15,27,45,0.88) 100%);
  }
  .hero-backdrop .warmth {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 70% 70%, rgba(201,169,97,0.15) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 20% 30%, rgba(201,169,97,0.08) 0%, transparent 65%);
    mix-blend-mode: overlay;
  }
  .hero-backdrop .lightflow {
    position: absolute;
    inset: -30%;
    pointer-events: none;
    mix-blend-mode: screen;
    background-image:
      linear-gradient(115deg, transparent 42%, rgba(201,169,97,0.26) 50%, transparent 58%),
      linear-gradient(115deg, transparent 26%, rgba(224,197,135,0.18) 34%, transparent 42%),
      radial-gradient(ellipse 45% 38% at 28% 38%, rgba(201,169,97,0.36), transparent 70%),
      radial-gradient(ellipse 40% 34% at 76% 66%, rgba(224,197,135,0.26), transparent 72%);
    background-size: 220% 220%, 220% 220%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: lightflow 20s ease-in-out infinite alternate;
    will-change: background-position;
  }
  @keyframes lightflow {
    0%   { background-position: 0% 0%, 100% 100%, 0% 0%, 100% 100%; }
    100% { background-position: 100% 100%, 0% 0%, 30% 25%, 70% 40%; }
  }
  .hero > *:not(.hero-backdrop) { position: relative; z-index: 2; }

  /* hero copy pushed to the RIGHT within a centered max-width */
  .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
  }
  .hero-copy { width: 100%; max-width: 720px; }
  @media (max-width: 900px) {
    .hero-content { justify-content: center; }
    .hero-copy { max-width: 100%; }
  }



  /* ===== AREAS WE SERVE section ===== */
  .areas-section{ background:#0F1B2D; margin:0; max-width:100%; padding:6rem clamp(1.5rem,4vw,5rem); position:relative; z-index:2; }
  .areas-inner{ max-width:1280px; margin:0 auto; }
  .areas-intro{ font-family:'Instrument Serif',serif; font-size:1.3rem; line-height:1.45; max-width:68ch; margin-bottom:3.5rem; color:#F4EBD4; }
  .areas-intro em{ color:#C9A961; }
  .areas-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
  .area-card{ position:relative; overflow:hidden; background:#1A2940; border:1px solid #2A3A55; padding:1.75rem 1.5rem 1.6rem; transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease; }
  .area-card--wide{ grid-column:span 2; }
  .area-card::before{ content:""; position:absolute; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,#C9A961,#E0C587); transition:width .45s cubic-bezier(.22,1,.36,1); }
  .area-card::after{ content:""; position:absolute; top:-50%; right:-40%; width:90%; height:100%; background:radial-gradient(circle,rgba(201,169,97,.10) 0%,transparent 60%); opacity:0; transition:opacity .5s ease; pointer-events:none; }
  .area-card:hover{ transform:translateY(-4px); border-color:#C9A961; box-shadow:0 16px 32px -16px rgba(0,0,0,.45); }
  .area-card:hover::before{ width:100%; }
  .area-card:hover::after{ opacity:1; }
  .area-pin{ display:block; width:22px; height:22px; margin-bottom:1rem; position:relative; transition:transform .35s ease; }
  .area-pin::before{ content:""; position:absolute; left:3px; top:0; width:14px; height:14px; border:1.5px solid #C9A961; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
  .area-pin::after{ content:""; position:absolute; left:8px; top:5px; width:4px; height:4px; border-radius:50%; background:#C9A961; }
  .area-card:hover .area-pin{ transform:translateY(-2px); }
  .area-name{ font-family:'Instrument Serif',serif; font-weight:400; font-size:1.35rem; line-height:1.15; letter-spacing:-.015em; color:#F4EBD4; margin:0 0 .5rem; }
  .area-card:hover .area-name{ color:#E0C587; }
  .area-desc{ font-family:'Inter Tight',sans-serif; font-size:.8rem; line-height:1.5; color:#8B7F68; margin:0; }
  .areas-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:3rem; padding-top:2rem; border-top:1px solid #2A3A55; }
  .areas-cta-note{ font-family:'Instrument Serif',serif; font-style:italic; font-size:1.05rem; color:#D4C5A3; margin:0 1rem 0 0; flex:1 1 240px; }
  @media (max-width:1100px){ .areas-grid{ grid-template-columns:repeat(2,1fr); } .area-card--wide{ grid-column:span 2; } }
  @media (max-width:900px){ .areas-section{ padding:3.5rem 1.25rem; } .areas-intro{ font-size:1.05rem; margin-bottom:2.5rem; } }
  @media (max-width:560px){ .areas-grid{ grid-template-columns:1fr; } .area-card--wide{ grid-column:span 1; } }
  @media (prefers-reduced-motion:reduce){ .area-card,.area-card::before,.area-pin{ transition:none !important; } }

  /* Credential bar (moved out of the old right-hand column) */
  .hero-credbar {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 1.5rem 4rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
  }
  .hero-cred { display: flex; flex-direction: column; gap: 0.4rem; }
  .hero-cred-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 1px 8px rgba(15, 27, 45, 0.7);
  }
  .hero-cred-value {
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.4;
    max-width: 36ch;
    text-shadow: 0 1px 10px rgba(15, 27, 45, 0.85);
  }
  @media (max-width: 760px) {
    .hero-credbar { grid-template-columns: 1fr; gap: 1.25rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-backdrop .lightflow { animation: none; }
  }

  /* ============ HERO V4 — GOLD GRID + ROTATING COUNSEL + GLASS MARQUEE (appended last; overrides legacy hero blocks) ============ */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .hero .hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background: url('/assets/hero-bridge.jpg') center 75% / cover no-repeat;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(0deg, black 0%, black 30%, transparent 85%);
            mask-image: linear-gradient(0deg, black 0%, black 30%, transparent 85%);
  }
  .hero #goldGrid { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

  .hero .hero-inner {
    position: relative; z-index: 2;
    text-align: center; max-width: 920px;
    padding: clamp(3.5rem, 8vh, 6rem) clamp(1.5rem, 4vw, 3rem) 0;
    display: flex; flex-direction: column; align-items: center;
  }

  @keyframes heroFadeSlideIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .hero .fade-in { animation: heroFadeSlideIn 0.85s ease-out both; }
  .hero .d1 { animation-delay: 0.1s; } .hero .d2 { animation-delay: 0.25s; }
  .hero .d3 { animation-delay: 0.45s; } .hero .d4 { animation-delay: 0.65s; }
  .hero .d5 { animation-delay: 0.85s; }

  .hero .hbadge {
    display: inline-flex; align-items: center; gap: 0.65rem;
    border: 1px solid rgba(244,235,212,0.14); background: rgba(244,235,212,0.05);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 999px; padding: 0.6rem 1.35rem; overflow: hidden; position: relative;
    font-family: 'JetBrains Mono', monospace; font-size: 0.74rem;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
    margin-bottom: 2.2rem;
  }
  .hero .hbadge::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(224,197,135,0.25), transparent);
    animation: heroShine 4.5s ease-in-out infinite;
  }
  @keyframes heroShine { 0% { left: -50%; } 55%, 100% { left: 120%; } }
  .hero .hdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

  .hero h1 {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: clamp(3.4rem, 8vw, 6.4rem);
    letter-spacing: -0.025em; line-height: 0.98;
    margin-bottom: 1.4rem; text-wrap: balance;
    max-width: none; text-shadow: none;
  }
  .hero h1 .grad {
    font-style: italic;
    background: linear-gradient(120deg, var(--ink) 0%, var(--accent-soft) 50%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  .hero .rotline {
    font-family: 'Instrument Serif', serif; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    color: var(--ink-soft); margin-bottom: 2.2rem;
    display: flex; align-items: baseline; gap: 0.55rem; justify-content: center;
  }
  .hero .rotbox {
    display: inline-block; position: relative; overflow: hidden;
    height: 1.25em; text-align: left;
    /* width set by JS to the widest word so nothing clips */
  }
  .hero .rotword {
    position: absolute; left: 0; top: 0; white-space: nowrap;
    font-style: italic; color: var(--accent);
    transform: translateY(110%); opacity: 0;
    transition: transform 0.55s cubic-bezier(.2,.8,.2,1), opacity 0.4s;
  }
  .hero .rotword.on { transform: translateY(0); opacity: 1; }
  .hero .rotword.off { transform: translateY(-110%); opacity: 0; }

  .hero .hlead { color: var(--ink-soft); font-size: 1rem; max-width: 60ch; margin: 0 auto 2.6rem; }

  .hero .hcta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .hero .hbtn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    border-radius: 999px; padding: 1.05rem 1.9rem;
    font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
    text-decoration: none; transition: transform 0.25s, background 0.25s, border-color 0.25s;
  }
  .hero .hbtn-solid { background: var(--ink); color: var(--cream); }
  .hero .hbtn-solid:hover { background: var(--accent); transform: scale(1.02); }
  .hero .hbtn-solid .arr { transition: transform 0.25s; }
  .hero .hbtn-solid:hover .arr { transform: translateX(4px); }
  .hero .hbtn-glass {
    color: var(--ink); border: 1px solid rgba(244,235,212,0.14); background: rgba(244,235,212,0.05);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .hero .hbtn-glass:hover { background: rgba(244,235,212,0.12); border-color: rgba(201,169,97,0.5); }

  .hero .hmeta {
    margin-top: 3rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
  }
  .hero .hmeta .gold { color: var(--accent); }

  .hero .hmarquee-wrap {
    position: relative; z-index: 2;
    width: 100%; max-width: 1100px;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    margin: 2.6rem auto clamp(3rem, 8vh, 5rem);
  }
  .hero .hmarquee-card {
    position: relative; overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(244,235,212,0.12);
    background: rgba(244,235,212,0.045);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
    padding: 1.4rem 0 1.5rem;
  }
  .hero .hmarquee-card h3 {
    font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 0.62rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
    text-align: center; margin-bottom: 1rem;
  }
  .hero .hm-view {
    display: flex; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 16%, black 84%, transparent);
            mask-image: linear-gradient(to right, transparent, black 16%, black 84%, transparent);
  }
  .hero .hm-track { display: flex; gap: 2.6rem; white-space: nowrap; width: max-content; padding-left: 1rem; animation: heroMarquee 38s linear infinite; }
  .hero .hmarquee-card:hover .hm-track { animation-play-state: paused; }
  @keyframes heroMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .hero .hm-item {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: 'Instrument Serif', serif; font-size: 1.05rem; color: var(--ink);
    opacity: 0.6; transition: opacity 0.3s;
  }
  .hero .hm-item:hover { opacity: 1; }
  .hero .hm-item .tick { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; }

  @media (max-width: 768px) {
    .hero .rotline { flex-direction: column; align-items: center; gap: 0.15rem; }
    .hero .rotbox { text-align: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero .fade-in { animation: none; }
    .hero .hbadge::after { animation: none; }
    .hero #goldGrid { display: none; }
    .hero .hm-track { animation: none; }
    .hero .rotword { transition: none; }
  }

  /* ============ BY THE NUMBERS (Experience, Quantified) ============ */
  .bn { padding: 6rem 1.5rem; display: flex; flex-direction: column; align-items: center; }
  .bn-header { max-width: 60rem; margin: 0 auto 2.4rem; text-align: center; }
  .bn-header .bn-lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); display: inline-block; margin-bottom: 0.9rem; }
  .bn-header h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.05; color: var(--ink); letter-spacing: -0.01em; }
  .bn-header h2 .italic { font-style: italic; background: linear-gradient(100deg, var(--accent-soft), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .bn-stage { position: relative; width: 100%; max-width: 66rem; margin: 0 auto; padding: 3rem 2.5rem; isolation: isolate; }
  .bn-aura-halo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 52% at 50% 48%, rgba(201,169,97,0.42), rgba(201,169,97,0.13) 45%, transparent 72%); filter: blur(48px); animation: bnAuraPulse 6.5s ease-in-out infinite; }
  .bn-aura-orbit { position: absolute; inset: 0; z-index: 0; pointer-events: none; animation: bnAuraSpin 11s linear infinite; }
  .bn-aura-orbit::before { content: ""; position: absolute; top: 2%; left: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(224,197,135,0.85), rgba(201,169,97,0.25) 45%, transparent 70%); filter: blur(34px); }
  .bn-spark { position: absolute; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 9px 2px rgba(224,197,135,0.7); pointer-events: none; opacity: 0; animation: bnSparkFloat 7s ease-in-out infinite; }
  @keyframes bnAuraPulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
  @keyframes bnAuraSpin { to { transform: rotate(360deg); } }
  @keyframes bnSparkFloat { 0% { opacity: 0; transform: translateY(10px) scale(0.6); } 20% { opacity: 0.9; } 50% { opacity: 0.5; transform: translateY(-10px) scale(1); } 80% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-24px) scale(0.6); } }
  .bn-card { position: relative; z-index: 2; max-width: 64rem; margin: 0 auto; width: 100%; border: 4px solid var(--rule); border-radius: 30px; padding: 0.9rem; background: linear-gradient(180deg, #1c2c45 0%, #14233a 100%); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(201,169,97,0.08); }
  .bn-screen { overflow: hidden; border-radius: 20px; background: radial-gradient(120% 120% at 50% 0%, rgba(201,169,97,0.10) 0%, transparent 55%), linear-gradient(160deg, #0e1a2c 0%, #0b1626 100%); border: 1px solid var(--rule-soft); padding: 2.4rem; }
  .bn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; width: 100%; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 16px; overflow: hidden; }
  .bn-stat { background: linear-gradient(160deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 60%), #0e1a2c; padding: 2.6rem 1.8rem; text-align: center; position: relative; }
  .bn-num { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; background: linear-gradient(100deg, var(--accent-soft), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; }
  .bn-lab { font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.7rem; }
  @media (max-width: 768px) { .bn-card { padding: 0.5rem; border-width: 3px; border-radius: 22px; } .bn-screen { padding: 1.2rem; } .bn-stat { padding: 1.8rem 0.8rem; } .bn-lab { font-size: 0.66rem; } }
  @media (prefers-reduced-motion: reduce) { .bn-aura-halo, .bn-aura-orbit, .bn-spark { animation: none; } .bn-spark { opacity: 0; } }

  /* ============ YDNAV (multi-page header: live wordmark, white-on-scroll, gold->navy) ============ */
  .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:#C9A961; color:#0F1B2D; padding:.6rem 1rem; font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.1em; }
  .skip-link:focus{ left:1rem; top:1rem; }
  .ydnav{ position:sticky; top:0; z-index:100; background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--nav-border); box-shadow:var(--nav-shadow); transition:background .45s ease, border-color .45s ease, box-shadow .45s ease;
    --nav-bg:rgba(15,27,45,.6); --nav-border:rgba(42,58,85,.55); --nav-shadow:none; --nav-name:#F4EBD4; --nav-link:#D4C5A3; --nav-link-hover:#C9A961; --nav-accent:#C9A961; --nav-call-border:#2A3A55; --nav-cta-bg:#C9A961; --nav-cta-fg:#0F1B2D; --nav-cta-bg-hover:#E0C587; }
  .ydnav.is-scrolled{ --nav-bg:#FFFFFF; --nav-border:#E7E0CF; --nav-shadow:0 10px 34px -20px rgba(15,27,45,.4); --nav-name:#0F1B2D; --nav-link:#1A2940; --nav-link-hover:#C9A961; --nav-accent:#0F1B2D; --nav-call-border:#CFC8B6; --nav-cta-bg:#0F1B2D; --nav-cta-fg:#F4EBD4; --nav-cta-bg-hover:#1A2940; }
  .ydnav__inner{ max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); padding:.9rem clamp(1.25rem,3vw,3rem); }
  .ydnav__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; text-decoration:none; margin-right:auto; position:relative; left:-.6rem; top:.5rem; }
  .ydnav__name{ font-family:'Instrument Serif',serif; font-weight:400; font-size:1.85rem; line-height:1; letter-spacing:.005em; color:var(--nav-name); transition:color .45s ease; white-space:nowrap; }
  .ydnav__sub{ font-family:'JetBrains Mono',monospace; font-size:.54rem; letter-spacing:.32em; text-transform:uppercase; color:var(--nav-accent); transition:color .45s ease; }
  .ydnav__list{ list-style:none; display:flex; align-items:center; gap:clamp(1rem,1.8vw,1.9rem); margin:0; padding:0; }
  .ydnav__item{ position:relative; }
  .ydnav__link{ display:inline-flex; align-items:center; gap:.4rem; color:var(--nav-link); text-decoration:none; font-family:'Inter Tight',sans-serif; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; padding:1.1rem 0; transition:color .3s ease; }
  .ydnav__link:hover,.ydnav__link:focus-visible{ color:var(--nav-link-hover); }
  .ydnav__link::after{ content:""; position:absolute; left:0; bottom:.7rem; height:1px; width:0; background:var(--nav-link-hover); transition:width .3s ease; }
  .ydnav__item:not(.ydnav__item--mega) .ydnav__link:hover::after,.ydnav__item:not(.ydnav__item--mega) .ydnav__link:focus-visible::after{ width:100%; }
  .ydnav__chev{ width:.5rem; height:.5rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .3s ease; opacity:.8; }
  .ydnav__item--mega:hover .ydnav__chev,.ydnav__item--mega:focus-within .ydnav__chev,.ydnav__item--mega.is-tap-open .ydnav__chev{ transform:rotate(225deg) translateY(-1px); }
  .ydnav__util{ display:flex; align-items:center; gap:1rem; padding-left:clamp(.5rem,1.5vw,1.5rem); }
  .ydnav__call{ display:inline-flex; align-items:center; gap:.45rem; color:var(--nav-accent); text-decoration:none; border:1px solid var(--nav-call-border); padding:.55rem .9rem; font-family:'Inter Tight',sans-serif; font-size:.72rem; letter-spacing:.04em; white-space:nowrap; transition:border-color .3s ease, background .3s ease, color .45s ease; }
  .ydnav__call:hover,.ydnav__call:focus-visible{ border-color:var(--nav-link-hover); color:var(--nav-link-hover); }
  .ydnav__call-icon{ font-size:.9rem; line-height:1; }
  .ydnav__cta{ background:var(--nav-cta-bg); color:var(--nav-cta-fg)!important; text-decoration:none; padding:.6rem 1.15rem; font-family:'Inter Tight',sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; white-space:nowrap; transition:background .35s ease, color .45s ease; }
  .ydnav__cta:hover,.ydnav__cta:focus-visible{ background:var(--nav-cta-bg-hover); }
  .ydmega{ position:absolute; top:100%; left:0; z-index:120; background:linear-gradient(180deg,#1A2940 0%,#0F1B2D 100%); border:1px solid #2A3A55; border-top:2px solid #C9A961; box-shadow:0 26px 50px -22px rgba(0,0,0,.85); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; padding:1.5rem 1.6rem 1.2rem; width:min(640px,92vw); }
  .ydmega::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
  .ydnav__item--mega:hover .ydmega,.ydnav__item--mega:focus-within .ydmega,.ydnav__item--mega.is-tap-open .ydmega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s; }
  .ydmega__cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.2rem; }
  .ydmega__cols--3{ grid-template-columns:repeat(3,1fr); gap:1.2rem 1.8rem; }
  .ydmega--narrow{ width:min(300px,92vw); }
  .ydmega__cols--1{ grid-template-columns:1fr; gap:1.1rem; }
  .ydmega__fam{ display:block; font-family:'Instrument Serif',serif; font-size:1.18rem; line-height:1.1; color:#F4EBD4; text-decoration:none; margin:0 0 .2rem; transition:color .2s ease; }
  .ydmega__fam:hover{ color:#C9A961; }
  .ydmega__famsub{ display:block; font-family:'JetBrains Mono',monospace; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:#8B7F68; margin-bottom:.7rem; padding-bottom:.6rem; border-bottom:1px solid #2A3A55; }
  .ydmega__col ul{ list-style:none; margin:0; padding:0; }
  .ydmega__col a.sub{ display:block; color:#D4C5A3; text-decoration:none; font-family:'Inter Tight',sans-serif; font-size:.82rem; line-height:1.3; padding:.34rem 0; border-left:2px solid transparent; transition:color .2s ease, padding-left .2s ease, border-color .2s ease; }
  .ydmega__col a.sub:hover{ color:#F4EBD4; border-left-color:#C9A961; padding-left:.6rem; }
  .ydmega__all{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid #2A3A55; width:100%; color:#C9A961; text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; transition:gap .25s ease; }
  .ydmega__all:hover{ gap:.9rem; color:#E0C587; }
  .ydnav__burger{ display:none; width:42px; height:36px; background:transparent; border:1px solid var(--nav-call-border); cursor:pointer; padding:0; position:relative; }
  .ydnav__burger span{ position:absolute; left:9px; right:9px; height:1.5px; background:var(--nav-name); transition:transform .3s ease, opacity .2s ease, background .45s ease; }
  .ydnav__burger span:nth-child(1){ top:11px; } .ydnav__burger span:nth-child(2){ top:17px; } .ydnav__burger span:nth-child(3){ top:23px; }
  .ydnav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .ydnav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .ydnav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .ydnav__mobile{ display:none; border-top:1px solid var(--nav-border); background:#0B1626; padding:.5rem clamp(1.25rem,4vw,2rem) 1.5rem; }
  .ydnav__mobile.is-open{ display:block; }
  .ydm__list{ list-style:none; margin:0; padding:0; }
  .ydm__list>li{ border-bottom:1px solid rgba(42,58,85,.6); }
  .ydm__link,.ydm__toggle{ display:flex; width:100%; align-items:center; justify-content:space-between; background:transparent; border:0; cursor:pointer; text-align:left; color:#F4EBD4; text-decoration:none; font-family:'Inter Tight',sans-serif; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; padding:1rem .25rem; }
  .ydm__panel{ display:none; padding:0 0 .75rem .5rem; }
  .ydm__panel.is-open{ display:block; }
  .ydm__panel a{ display:block; color:#D4C5A3; text-decoration:none; font-family:'Inter Tight',sans-serif; font-size:.85rem; padding:.45rem 0 .45rem .75rem; border-left:2px solid transparent; }
  .ydm__panel a:hover{ color:#F4EBD4; border-left-color:#C9A961; }
  .ydm__plus{ position:relative; width:14px; height:14px; flex:none; }
  .ydm__plus::before,.ydm__plus::after{ content:""; position:absolute; background:#C9A961; transition:transform .3s ease; }
  .ydm__plus::before{ top:6px; left:0; width:14px; height:1.5px; }
  .ydm__plus::after{ left:6px; top:0; width:1.5px; height:14px; }
  .ydm__toggle[aria-expanded="true"] .ydm__plus::after{ transform:scaleY(0); }
  .ydm__actions{ display:flex; flex-direction:column; gap:.75rem; margin-top:1.25rem; }
  .ydm__actions .ydnav__call,.ydm__actions .ydnav__cta{ justify-content:center; text-align:center; padding:.85rem 1rem; }
  @media (max-width:920px){ .ydnav nav[aria-label="Primary"], .ydnav__util{ display:none; } .ydnav__burger{ display:block; } .ydnav__brand{ left:0; top:0; } .ydnav__name{ font-size:1.5rem; } }
  @media (prefers-reduced-motion:reduce){ .ydnav,.ydnav__link::after,.ydnav__chev,.ydmega{ transition:none !important; } }

  /* ============ interior page hero + section helpers (multi-page) ============ */
  .page-hero{ position:relative; padding:clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,4vw,3rem) clamp(2.75rem,5vw,4rem); text-align:center; background:radial-gradient(120% 95% at 50% -10%, rgba(201,169,97,.12), transparent 60%); overflow:hidden; }
  .page-hero-inner{ max-width:900px; margin:0 auto; position:relative; z-index:2; }
  .page-hero .ph-label{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
  .page-hero h1{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.04; margin:1rem 0 0; color:var(--ink); letter-spacing:-.01em; }
  .page-hero h1 .italic{ font-style:italic; background:linear-gradient(100deg,var(--accent-soft),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .page-hero .ph-lead{ color:var(--ink-soft); font-size:clamp(1rem,1.6vw,1.2rem); max-width:700px; margin:1.4rem auto 0; line-height:1.65; }
  .page-hero .ph-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
  .page-wrap{ max-width:1280px; margin:0 auto; padding:clamp(3rem,6vw,5rem) clamp(1.25rem,4vw,3rem); }
  /* closing CTA band reused across interior pages */
  .endcta{ text-align:center; padding:clamp(3.5rem,7vw,6rem) 1.5rem; border-top:1px solid var(--rule); background:linear-gradient(180deg,#0b1626,#0e1a2c); }
  .endcta h2{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(1.9rem,4vw,3rem); color:var(--ink); }
  .endcta h2 .italic{ font-style:italic; background:linear-gradient(100deg,var(--accent-soft),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .endcta p{ color:var(--ink-soft); max-width:560px; margin:1rem auto 0; }
  .endcta .ph-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }

  /* neutralize the legacy element-level nav{} styling on the header's inner <nav> (fixes navy block on the white bar) */
  .ydnav nav{ position:static; top:auto; z-index:auto; background:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; border:0; box-shadow:none; padding:0; }

  /* large centered mono label above a bento (no dashes) */
  .bento-label{ font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); text-align:center; font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.1; margin:0 0 2rem; }
  .bento-label::before{ content:none; }

  /* ============ interior content wrapper + pillars + why + cross (shared) ============ */
  .cwrap{ position:relative; z-index:2; padding:clamp(3.5rem,7vw,5.5rem) clamp(1.5rem,4vw,5rem); max-width:1280px; margin:0 auto; }
  .cwrap > .section-label{ }
  .cwrap h2{ font-family:'Instrument Serif',serif; font-weight:400; letter-spacing:-.02em; line-height:1.05; font-size:clamp(2.1rem,4.5vw,3.4rem); margin-bottom:1.4rem; }
  .cwrap h2 .italic{ font-style:italic; color:var(--accent); }

  .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
  .pillar{ position:relative; display:flex; flex-direction:column; padding:2rem 1.9rem 1.8rem; border:1px solid var(--rule); border-radius:14px; background:linear-gradient(160deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 55%), rgba(26,41,64,0.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .45s, box-shadow .45s; }
  .pillar::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent 0%, var(--accent) 35%, var(--accent-soft) 50%, var(--accent) 65%, transparent 100%); background-size:220% 100%; transform:scaleX(0); transform-origin:left; transition:transform .55s ease; }
  .pillar::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(201,169,97,0.16), transparent 62%); transition:opacity .4s ease; }
  .pillar:hover{ transform:translateY(-7px); border-color:rgba(201,169,97,0.55); box-shadow:0 26px 60px -26px rgba(0,0,0,0.75), 0 0 30px -16px rgba(201,169,97,0.3); }
  .pillar:hover::before{ transform:scaleX(1); animation:shimmer 2.2s linear infinite; }
  .pillar:hover::after{ opacity:1; }
  @keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-20% 0; } }
  .pillar-icon{ width:46px; height:46px; color:var(--accent); display:grid; place-items:center; border:1px solid var(--rule); border-radius:10px; background:rgba(201,169,97,0.05); margin-bottom:1.3rem; transition:all .4s; }
  .pillar-icon svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
  .pillar:hover .pillar-icon{ color:var(--accent-soft); border-color:rgba(201,169,97,0.5); background:rgba(201,169,97,0.12); }
  .pillar h3{ font-family:'Instrument Serif',serif; font-weight:400; font-size:1.7rem; line-height:1.12; margin-bottom:.6rem; }
  .pillar h3 .italic{ font-style:italic; color:var(--accent); }
  .pillar > p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:1.3rem; }
  .pillar ul{ list-style:none; margin-top:auto; padding:0; }
  .pillar li{ position:relative; padding:.42rem 0 .42rem 1.2rem; color:var(--ink-soft); font-size:.86rem; border-top:1px solid var(--rule); }
  .pillar li::before{ content:"—"; position:absolute; left:0; color:var(--accent); font-family:'JetBrains Mono',monospace; font-size:.7rem; top:.55rem; }
  .pillar li strong{ color:var(--ink); font-weight:500; }
  .pillar .pillar-link{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem; color:var(--accent); text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; transition:gap .25s ease, color .25s; }
  .pillar .pillar-link:hover{ gap:.9rem; color:var(--accent-soft); }

  .why-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:start; }
  .why-copy p{ color:var(--ink-soft); margin-bottom:1.1rem; }
  .why-copy em{ color:var(--ink); font-style:italic; }
  .why-stats{ display:grid; gap:1rem; }
  .wstat{ border:1px solid var(--rule); border-radius:14px; padding:1.3rem 1.5rem; background:rgba(26,41,64,0.45); display:flex; align-items:baseline; gap:1rem; }
  .wstat .v{ font-family:'Instrument Serif',serif; font-size:1.8rem; color:var(--ink); white-space:nowrap; }
  .wstat .v .it{ font-style:italic; color:var(--accent); }
  .wstat .k{ font-size:.8rem; color:var(--ink-muted); }

  .cross{ border:1px solid rgba(201,169,97,0.35); border-radius:18px; background:linear-gradient(160deg, rgba(201,169,97,0.08), rgba(26,41,64,0.5)); padding:2.2rem; display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
  .cross h3{ font-family:'Instrument Serif',serif; font-weight:400; font-size:1.6rem; margin-bottom:.4rem; }
  .cross h3 .italic{ font-style:italic; color:var(--accent); }
  .cross p{ color:var(--ink-soft); font-size:.92rem; max-width:56ch; }
  @media (max-width:980px){ .pillars{ grid-template-columns:1fr; } .why-grid{ grid-template-columns:1fr; } }

  /* ===== "who we serve" simple audience grid ===== */
  .serve-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); border-radius:14px; overflow:hidden; }
  .serve{ background:linear-gradient(160deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 60%), #0e1a2c; padding:1.6rem 1.5rem; transition:background .35s; }
  .serve:hover{ background:linear-gradient(160deg, rgba(201,169,97,0.08), rgba(255,255,255,0) 60%), #0e1a2c; }
  .serve h4{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink); margin-bottom:.3rem; letter-spacing:.005em; }
  .serve p{ color:var(--ink-soft); font-size:.84rem; line-height:1.45; }
  @media (max-width:760px){ .serve-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .serve-grid{ grid-template-columns:1fr; } }

  /* ===== reusable glass marquee scroller ===== */
  .marquee-band{ position:relative; z-index:2; max-width:1280px; margin:0 auto; padding:0 clamp(1.5rem,4vw,5rem) clamp(2rem,5vw,3.5rem); }
  .marquee-card{ position:relative; overflow:hidden; border:1px solid var(--rule); border-radius:16px; background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(26,41,64,0.5)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:1.15rem 0; }
  .marquee-card::before,.marquee-card::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
  .marquee-card::before{ left:0; background:linear-gradient(90deg, var(--cream), transparent); }
  .marquee-card::after{ right:0; background:linear-gradient(270deg, var(--cream), transparent); }
  .marquee-track{ display:flex; gap:2.6rem; white-space:nowrap; width:max-content; padding-left:1.5rem; animation:ydMarquee 42s linear infinite; }
  .marquee-card:hover .marquee-track{ animation-play-state:paused; }
  .marquee-item{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Instrument Serif',serif; font-size:1.2rem; color:var(--ink-soft); opacity:.85; transition:opacity .3s, color .3s; }
  .marquee-item:hover{ opacity:1; color:var(--ink); }
  .marquee-item .tick{ color:var(--accent); font-family:'JetBrains Mono',monospace; font-size:.7rem; }
  @keyframes ydMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; flex-wrap:wrap; white-space:normal; width:auto; } }