/* ═══════════════════════════════════════════
       DESIGN TOKENS
    ═══════════════════════════════════════════ */
    :root {
      --bg:       #F2EFE9;
      --bg-2:     #EDE9E0;
      --bg-3:     #E6E1D8;
      --black:    #0f0f0f;
      --grey:     #5C564E;  /* darkened from brand #7A7570 → WCAG AA (~6:1) for body text on off-white */
      --grey-soft:#7A7570;  /* original brand warm-grey, retained for hairlines/decorative use */
      --lgrey:    #B0AA9F;
      --gold:     #C4973A;
      --gold-dim: rgba(196,151,58,0.18);
      --navy:     #0A1628;
      --navy-mid: #122038;
      --white:    #F9F7F3;

      /* V1 typography (per user preference): Cormorant display + Space Mono labels/body,
         Arvo wordmark. Self-hosted via css/fonts.css. */
      --serif:   'Cormorant', 'Palatino Linotype', Georgia, serif;  /* display & headings */
      --brand:   'Arvo', 'Rockwell', Georgia, serif;                /* logo wordmark */
      --mono:    'Space Mono', 'Courier New', monospace;            /* labels & body */

      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ═══════════════════════════════════════════
       RESET
    ═══════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      background: var(--bg);
      color: var(--black);
      overflow-x: hidden;
      cursor: none;
      -webkit-font-smoothing: antialiased;
    }
    a { text-decoration: none; color: inherit; }

    /* ═══════════════════════════════════════════
       CUSTOM CURSOR
    ═══════════════════════════════════════════ */
    #c-dot {
      width: 6px; height: 6px;
      background: var(--black);
      border-radius: 50%;
      position: fixed; z-index: 9999;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: transform 0.15s, background 0.2s, width 0.2s, height 0.2s;
      will-change: left, top;
    }
    #c-ring {
      width: 28px; height: 28px;
      border: 1px solid rgba(15,15,15,0.4);
      border-radius: 50%;
      position: fixed; z-index: 9998;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: border-color 0.25s, width 0.25s, height 0.25s;
      will-change: left, top;
    }
    .cursor-hover #c-dot  { width: 10px; height: 10px; background: var(--gold); }
    .cursor-hover #c-ring { width: 44px; height: 44px; border-color: var(--gold); }
    .cursor-dark  #c-dot  { background: var(--white); }
    .cursor-dark  #c-ring { border-color: rgba(249,247,243,0.35); }

    /* ═══════════════════════════════════════════
       NAVIGATION
    ═══════════════════════════════════════════ */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      padding: 30px 52px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: padding 0.4s var(--ease-out),
                  background 0.4s,
                  backdrop-filter 0.4s,
                  border-color 0.4s;
      border-bottom: 1px solid transparent;
    }
    #nav.is-scrolled {
      padding: 18px 52px;
      background: rgba(242, 239, 233, 0.92);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border-bottom-color: rgba(15,15,15,0.07);
    }
    .nav-logo {
      display: flex; align-items: center; gap: 11px;
    }
    .nav-wordmark {
      font-family: var(--brand);
      font-size: 21px;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--black);
    }
    .nav-items {
      display: flex; gap: 40px; list-style: none;
      align-items: center;
    }
    .nav-items > li { position: relative; }
    .nav-items > li > a {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--grey);
      transition: color 0.2s;
      position: relative;
      display: block;
      padding-bottom: 4px;
    }
    .nav-items > li > a::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0; right: 0;
      height: 1px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s var(--ease-out);
    }
    .nav-items > li > a:hover { color: var(--black); }
    .nav-items > li > a:hover::after { transform: scaleX(1); }

    /* Dropdown */
    .nav-has-drop > a::before {
      content: '';
      position: absolute;
      bottom: -20px; left: -20px; right: -20px;
      height: 20px;
    }
    .nav-drop {
      display: block;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: calc(100% + 22px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      background: var(--bg);
      border: 1px solid rgba(15,15,15,0.1);
      list-style: none;
      padding: 10px 0;
      min-width: 210px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.09);
      transition: opacity 0.2s, transform 0.2s var(--ease-out), visibility 0.2s;
    }
    .nav-has-drop:hover .nav-drop {
      visibility: visible;
      opacity: 1;
      pointer-events: all;
      transform: translateX(-50%) translateY(0);
    }
    .nav-drop::before {
      content: '';
      position: absolute;
      top: -6px; left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 10px; height: 10px;
      background: var(--bg);
      border-left: 1px solid rgba(15,15,15,0.1);
      border-top: 1px solid rgba(15,15,15,0.1);
    }
    .nav-drop li a {
      display: block;
      padding: 10px 22px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--grey);
      white-space: nowrap;
      transition: color 0.2s, padding-left 0.2s;
    }
    .nav-drop li a:hover {
      color: var(--black);
      padding-left: 28px;
    }
    .nav-drop li + li {
      border-top: 1px solid rgba(15,15,15,0.05);
    }

    /* ═══════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════ */
    #hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 130px 52px 90px;
      overflow: hidden;
      background-color: var(--bg);
      background-image:
        repeating-linear-gradient(
          135deg,
          rgba(15,15,15,0.032) 0,
          rgba(15,15,15,0.032) 1px,
          transparent 1px,
          transparent 68px
        );
    }
    .hero-ghost {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(700px, 80vw);
      height: min(700px, 80vw);
      opacity: 0.03;
      pointer-events: none;
    }
    .hero-mark {
      margin-bottom: 22px;
      opacity: 0;
      animation: aFadeUp 0.5s var(--ease-out) forwards 0.2s;
    }
    .mark-rect {
      fill: none;
      stroke: var(--black);
      stroke-width: 2.5;
      stroke-dasharray: 344;
      stroke-dashoffset: 344;
      animation: aDrawBorder 0.65s var(--ease-out) forwards 0.45s;
    }
    .mark-poly {
      fill: var(--black);
      opacity: 0;
      animation: aFillIn 0.3s ease forwards 1.15s;
    }
    .hero-name {
      font-family: var(--brand);
      font-size: clamp(64px, 14vw, 160px);
      font-weight: 400;
      letter-spacing: -0.025em;
      line-height: 1;
      color: var(--black);
      opacity: 0;
      animation: aFadeUp 0.75s var(--ease-out) forwards 1.25s;
      margin-bottom: 36px;
    }
    .hero-rule {
      width: 36px; height: 1px;
      background: var(--gold);
      margin: 0 auto 30px;
      opacity: 0;
      animation: aFadeIn 0.5s ease forwards 1.85s;
    }
    .hero-hl {
      font-family: var(--serif);
      font-size: clamp(26px, 4vw, 52px);
      font-weight: 300;
      font-style: italic;
      line-height: 1.2;
      color: var(--black);
      max-width: 680px;
      opacity: 0;
      animation: aFadeUp 0.65s var(--ease-out) forwards 2.05s;
      margin-bottom: 18px;
    }
    .hero-sub {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--lgrey);
      opacity: 0;
      animation: aFadeIn 0.6s ease forwards 2.35s;
      margin-bottom: 52px;
    }
    .hero-cta {
      opacity: 0;
      animation: aFadeIn 0.6s ease forwards 2.55s;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--black);
      border: 1px solid var(--black);
      padding: 16px 32px;
      transition: background 0.25s, color 0.25s;
    }
    .btn:hover { background: var(--black); color: var(--bg); }
    .btn-arrow { transition: transform 0.22s var(--ease-out); }
    .btn:hover .btn-arrow { transform: translateX(5px); }
    .hero-strip {
      position: absolute;
      bottom: 36px; left: 0; right: 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0 52px;
      opacity: 0;
      animation: aFadeIn 0.6s ease forwards 2.8s;
      pointer-events: none;
    }
    .hero-strip-text {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--lgrey);
    }
    .scroll-cue {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      pointer-events: all;
    }
    .scroll-cue-bar {
      width: 1px; height: 40px;
      background: linear-gradient(to bottom, transparent, var(--lgrey));
      animation: aScrollPulse 2.2s ease-in-out infinite 3.2s;
    }
    @keyframes aScrollPulse {
      0%,100% { opacity: 0.3; transform: scaleY(0.7); transform-origin: top; }
      50%      { opacity: 1;   transform: scaleY(1);   }
    }

    /* ═══════════════════════════════════════════
       KEYFRAMES
    ═══════════════════════════════════════════ */
    @keyframes aDrawBorder { to { stroke-dashoffset: 0; } }
    @keyframes aFillIn     { to { opacity: 1; } }
    @keyframes aFadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes aFadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* ═══════════════════════════════════════════
       SCROLL REVEAL
    ═══════════════════════════════════════════ */
    .rv {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
    }
    .rv.on { opacity: 1; transform: none; }
    .rv-d1 { transition-delay: 0.1s; }
    .rv-d2 { transition-delay: 0.2s; }
    .rv-d3 { transition-delay: 0.3s; }
    .rv-d4 { transition-delay: 0.4s; }

    /* ═══════════════════════════════════════════
       LAYOUT HELPERS
    ═══════════════════════════════════════════ */
    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 52px;
    }
    .sec-label {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--lgrey);
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 64px;
    }
    .sec-label::after {
      content: '';
      display: block;
      width: 64px; height: 1px;
      background: var(--lgrey);
      opacity: 0.5;
    }
    .sec-head {
      font-family: var(--serif);
      font-size: clamp(38px, 5.5vw, 66px);
      font-weight: 300;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }

    /* ═══════════════════════════════════════════
       ABOUT  (01)
    ═══════════════════════════════════════════ */
    #about {
      padding: 150px 0 130px;
    }
    .about-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 90px;
      align-items: start;
      margin-top: 8px;
    }
    .about-tag {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--lgrey);
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .about-tag::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); opacity: 0.6; flex-shrink: 0; }
    .about-quote {
      font-family: var(--serif);
      font-size: clamp(22px, 2.8vw, 38px);
      font-weight: 300;
      font-style: italic;
      line-height: 1.4;
      color: var(--black);
      padding-left: 28px;
      border-left: 2px solid var(--gold);
      margin-top: 0;
      margin-bottom: 44px;
    }
    .about-divs { display: flex; flex-direction: column; border-top: 1px solid rgba(15,15,15,0.08); }
    .about-drow {
      display: flex; align-items: center; gap: 20px;
      padding: 14px 0; border-bottom: 1px solid rgba(15,15,15,0.06);
    }
    .about-dnum { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--gold); flex-shrink: 0; }
    .about-dname { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--black); flex: 1; }
    .about-dtag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lgrey); }
    .about-text p {
      font-family: var(--mono);
      font-size: 14px;
      line-height: 2.1;
      color: var(--grey);
      margin-bottom: 20px;
    }
    .about-text p em { color: var(--black); font-style: italic; }
    .about-text p:last-of-type { margin-bottom: 40px; }

    .about-deco {
      margin-top: 40px;
      padding-top: 32px;
      border-top: 1px solid rgba(15,15,15,0.08);
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .about-deco-rule {
      display: block;
      height: 1px;
      background: var(--gold);
    }
    .about-deco-rule:nth-child(1) { width: 112px; }
    .about-deco-rule:nth-child(2) { width: 52px;  opacity: 0.4; }
    .about-deco-rule:nth-child(3) { width: 148px; opacity: 0.18; }

    /* ═══════════════════════════════════════════
       SERVICES  (02)
    ═══════════════════════════════════════════ */
    #services {
      padding: 130px 0;
      background: var(--bg-2);
    }
    .svc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      margin-top: 64px;
    }
    .svc {
      background: var(--bg);
      padding: 56px 48px 50px;
      position: relative;
      overflow: hidden;
      transition: background 0.3s;
    }
    .svc::before {
      content: '';
      position: absolute;
      bottom: 0; left: 48px; right: 48px;
      height: 1px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.45s var(--ease-out);
    }
    .svc:hover { background: #FAFAF6; }
    .svc:hover::before { transform: scaleX(1); }
    .svc-n {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.15em;
      color: var(--lgrey);
      display: block;
      margin-bottom: 36px;
    }
    .svc-title {
      font-family: var(--serif);
      font-size: 34px;
      font-weight: 400;
      color: var(--black);
      margin-bottom: 20px;
      transition: transform 0.3s var(--ease-out), letter-spacing 0.3s;
    }
    .svc:hover .svc-title {
      transform: translateX(7px);
      letter-spacing: 0.01em;
    }
    .svc-desc {
      font-family: var(--mono);
      font-size: 13px;
      line-height: 2;
      color: var(--grey);
      max-width: 420px;
      margin-bottom: 28px;
    }
    .svc-list {
      list-style: none;
      margin-top: 24px;
      border-top: 1px solid rgba(15,15,15,0.08);
      padding-top: 24px;
    }
    .svc-list li {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      color: var(--lgrey);
      padding: 6px 0;
      display: flex;
      align-items: center;
      gap: 10px;
      text-transform: uppercase;
    }
    .svc-list li::before {
      content: '';
      width: 14px; height: 1px;
      background: var(--gold);
      flex-shrink: 0;
    }
    .svc-ico {
      position: absolute;
      top: 48px; right: 48px;
      font-family: var(--mono);
      font-size: 20px;
      color: var(--lgrey);
      opacity: 0;
      transform: translate(6px, -6px);
      transition: opacity 0.3s, transform 0.35s var(--ease-out);
    }
    .svc:hover .svc-ico { opacity: 1; transform: translate(0, 0); }

    /* ═══════════════════════════════════════════
       APPROACH  (03) — dark
    ═══════════════════════════════════════════ */
    #approach {
      padding: 150px 0;
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }
    .approach-ghost {
      position: absolute;
      bottom: -120px;
      right: -80px;
      width: min(600px, 60vw);
      height: min(600px, 60vw);
      opacity: 0.04;
      pointer-events: none;
    }
    #approach .sec-label  { color: rgba(255,255,255,0.22); }
    #approach .sec-label::after { background: rgba(255,255,255,0.12); }
    #approach .sec-head   { color: var(--white); margin-bottom: 80px; }

    .approach-rule {
      width: 36px; height: 1px;
      background: var(--gold);
      margin-bottom: 28px;
    }

    .pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }
    .pillar {
      padding: 48px 42px;
      border: 1px solid rgba(255,255,255,0.065);
      transition: border-color 0.3s, background 0.3s;
    }
    .pillar:hover {
      border-color: rgba(196,151,58,0.35);
      background: rgba(255,255,255,0.02);
    }
    .pillar-glyph {
      font-family: var(--serif);
      font-size: 46px;
      font-weight: 300;
      color: var(--gold);
      display: block;
      margin-bottom: 16px;
      line-height: 1;
    }
    .pillar-title {
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 14px;
    }
    .pillar-desc {
      font-family: var(--mono);
      font-size: 12px;
      line-height: 2;
      color: rgba(255,255,255,0.42);
    }

    /* ═══════════════════════════════════════════
       MARQUEE BAND
    ═══════════════════════════════════════════ */
    .marquee-band {
      background: var(--gold);
      overflow: hidden;
      padding: 15px 0;
      white-space: nowrap;
    }
    .marquee-track {
      display: inline-flex;
      animation: aMarquee 28s linear infinite;
    }
    .marquee-item {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(15,15,15,0.55);
      padding: 0 36px;
    }
    .marquee-dot {
      display: inline-block;
      width: 3px; height: 3px;
      background: rgba(15,15,15,0.35);
      border-radius: 50%;
      vertical-align: middle;
    }
    @keyframes aMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ═══════════════════════════════════════════
       TEAM  (04)
    ═══════════════════════════════════════════ */
    #team {
      padding: 150px 0 130px;
      background: var(--bg);
    }
    .team-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2px;
      margin-top: 64px;
      max-width: 820px;
    }
    .team-card {
      background: var(--bg-2);
      padding: 0;
      overflow: hidden;
      transition: background 0.3s;
    }
    .team-card:hover { background: var(--bg-3); }
    .team-avatar {
      width: 100%;
      aspect-ratio: 4/3;
      background: var(--bg-3);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .team-avatar-inner {
      width: 64px; height: 64px;
      border: 1.5px solid rgba(15,15,15,0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .team-avatar-initials {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 300;
      color: var(--lgrey);
    }
    .team-info {
      padding: 28px 30px 32px;
    }
    .team-name {
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 400;
      color: var(--black);
      margin-bottom: 4px;
    }
    .team-role {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 16px;
    }
    .team-bio {
      font-family: var(--mono);
      font-size: 12px;
      line-height: 2;
      color: var(--grey);
    }
    .team-location {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--lgrey);
      margin-top: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .team-location::before {
      content: '';
      width: 10px; height: 1px;
      background: var(--lgrey);
    }

    /* ═══════════════════════════════════════════
       QUOTE BLOCK
    ═══════════════════════════════════════════ */
    #feature-quote {
      padding: 130px 0;
      background: var(--bg-2);
    }
    .fq-inner {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
      padding: 0 52px;
    }
    .fq-rule { width: 36px; height: 1px; background: var(--gold); margin: 0 auto 36px; }
    .fq-text {
      font-family: var(--serif);
      font-size: clamp(26px, 3.8vw, 50px);
      font-weight: 300;
      font-style: italic;
      line-height: 1.35;
      color: var(--black);
      margin-bottom: 36px;
    }
    .fq-rule-b { width: 36px; height: 1px; background: var(--gold); margin: 0 auto 28px; }
    .fq-source {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--lgrey);
    }

    /* ═══════════════════════════════════════════
       CONTACT  (05)
    ═══════════════════════════════════════════ */
    #contact {
      padding: 150px 0 140px;
    }
    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 90px;
      margin-top: 64px;
      align-items: start;
    }
    .contact-left h3 {
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 400;
      color: var(--black);
      margin-bottom: 12px;
    }
    .contact-intro {
      font-family: var(--mono);
      font-size: 13px;
      line-height: 2;
      color: var(--grey);
      margin-bottom: 44px;
    }
    .contact-detail {
      font-family: var(--mono);
      font-size: 13px;
      line-height: 2.4;
      color: var(--grey);
    }
    .contact-detail strong {
      display: block;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--lgrey);
      margin-top: 18px;
      margin-bottom: 2px;
      font-weight: 400;
    }
    .contact-detail a {
      color: var(--black);
      border-bottom: 1px solid var(--gold);
      padding-bottom: 1px;
      transition: color 0.2s;
    }
    .contact-detail a:hover { color: var(--grey); }

    /* Form */
    .fg { margin-bottom: 24px; }
    .fl {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--lgrey);
      display: block;
      margin-bottom: 10px;
    }
    .fi {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(15,15,15,0.18);
      padding: 8px 0 14px;
      font-family: var(--mono);
      font-size: 14px;
      color: var(--black);
      outline: none;
      transition: border-color 0.25s;
      -webkit-appearance: none;
      border-radius: 0;
    }
    .fi::placeholder { color: var(--lgrey); }
    .fi:focus { border-bottom-color: var(--gold); }
    textarea.fi { resize: none; height: 100px; }
    .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .f-submit {
      margin-top: 36px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--bg);
      background: var(--black);
      border: none;
      padding: 18px 38px;
      cursor: none;
      transition: background 0.25s;
    }
    .f-submit:hover { background: var(--navy); }
    .f-submit-arrow { transition: transform 0.2s var(--ease-out); }
    .f-submit:hover .f-submit-arrow { transform: translateX(5px); }

    /* ═══════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════ */
    footer {
      background: var(--navy);
      padding: 68px 0 36px;
    }
    .ft {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 52px;
    }
    .ft-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding-bottom: 52px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      margin-bottom: 36px;
    }
    .ft-logo {
      display: flex; align-items: center; gap: 11px;
      margin-bottom: 14px;
    }
    .ft-brandname {
      font-family: var(--brand);
      font-size: 14px;
      color: var(--white);
    }
    .ft-tagline {
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
    }
    .ft-nav { display: flex; gap: 72px; }
    .ft-col h4 {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
      margin-bottom: 18px;
      font-weight: 400;
    }
    .ft-col a {
      display: block;
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 12px;
      transition: color 0.2s;
    }
    .ft-col a:hover { color: var(--white); }
    .ft-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .ft-copy {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.18);
    }
    .ft-legal { display: flex; gap: 28px; }
    .ft-legal a {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.18);
      transition: color 0.2s;
    }
    .ft-legal a:hover { color: rgba(255,255,255,0.45); }

    /* ═══════════════════════════════════════════
       SERVICE MODAL
    ═══════════════════════════════════════════ */
    .svc { cursor: pointer; }
    .svc-modal-overlay {
      position: fixed; inset: 0; z-index: 500;
      pointer-events: none; visibility: hidden;
    }
    .svc-modal-overlay.open { pointer-events: all; visibility: visible; }
    .svc-modal-backdrop {
      position: absolute; inset: 0;
      background: rgba(10,22,40,0.75);
      opacity: 0;
      transition: opacity 0.4s var(--ease-out);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .svc-modal-overlay.open .svc-modal-backdrop { opacity: 1; }
    .svc-modal-panel {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(860px, 94vw);
      background: var(--bg);
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform 0.5s var(--ease-out);
    }
    .svc-modal-overlay.open .svc-modal-panel { transform: translateX(0); }
    .svc-modal-close {
      position: sticky; top: 0; z-index: 10;
      float: right;
      width: 48px; height: 48px;
      background: var(--black); color: var(--bg);
      border: none; font-size: 20px; line-height: 1;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s;
    }
    .svc-modal-close:hover { background: var(--navy); }
    .svc-modal-photos {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 2px; height: 260px; overflow: hidden;
    }
    .svc-modal-photo { overflow: hidden; }
    .svc-modal-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      filter: sepia(18%) saturate(0.82) brightness(0.97);
      transition: transform 0.6s var(--ease-out), filter 0.4s;
    }
    .svc-modal-photo:hover img { transform: scale(1.05); filter: sepia(8%) saturate(0.95) brightness(1); }
    .svc-modal-body { padding: 52px 60px 80px; }
    .svc-modal-tag {
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--lgrey);
      display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
    }
    .svc-modal-tag::after { content: ''; width: 48px; height: 1px; background: var(--lgrey); opacity: 0.5; }
    .svc-modal-heading {
      font-family: var(--serif); font-size: clamp(38px,5vw,56px); font-weight: 300;
      color: var(--black); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 48px;
    }
    .svc-modal-rows { display: flex; flex-direction: column; }
    .svc-modal-row {
      display: flex; gap: 36px; padding: 28px 0;
      border-bottom: 1px solid rgba(15,15,15,0.08); align-items: flex-start;
    }
    .svc-modal-row:first-child { border-top: 1px solid rgba(15,15,15,0.08); }
    .svc-modal-num {
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
      color: var(--gold); flex-shrink: 0; padding-top: 7px; width: 18px;
    }
    .svc-modal-row-title {
      font-family: var(--serif); font-size: 26px; font-weight: 400;
      color: var(--black); line-height: 1.1; margin-bottom: 7px;
    }
    .svc-modal-row-desc {
      font-family: var(--mono); font-size: 13px; line-height: 2; color: var(--grey);
    }
    .svc-modal-divider { width: 100%; height: 1px; background: rgba(15,15,15,0.08); margin: 48px 0; }
    .svc-modal-sub {
      font-family: var(--serif); font-size: 32px; font-weight: 300;
      color: var(--black); margin-bottom: 32px;
    }
    .svc-modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
    .svc-modal-col-label {
      font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 6px; display: block;
    }
    .svc-modal-col-title {
      font-family: var(--serif); font-size: 24px; font-weight: 400;
      color: var(--black); margin-bottom: 4px;
    }
    .svc-modal-col-sub {
      font-family: var(--mono); font-size: 11px; color: var(--lgrey);
      font-style: italic; padding-bottom: 14px;
      border-bottom: 1px solid rgba(15,15,15,0.08); margin-bottom: 4px;
    }
    .svc-modal-col-list { list-style: none; }
    .svc-modal-col-item {
      font-family: var(--mono); font-size: 12px; color: var(--grey);
      padding: 8px 0; border-bottom: 1px solid rgba(15,15,15,0.05);
      display: flex; align-items: center; gap: 12px; line-height: 1.6;
    }
    .svc-modal-col-item::before { content: ''; width: 8px; height: 1px; background: var(--gold); flex-shrink: 0; }

    /* ═══════════════════════════════════════════
       OUR ADVANTAGE
    ═══════════════════════════════════════════ */
    #advantage { padding: 120px 0; background: var(--bg); }
    .adv-grid {
      display: grid; grid-template-columns: repeat(4,1fr);
      border-left: 1px solid rgba(15,15,15,0.08);
      margin-top: 64px;
    }
    .adv-card {
      padding: 0 44px 0 36px;
      border-right: 1px solid rgba(15,15,15,0.08);
    }
    .adv-num {
      font-family: var(--serif); font-size: 72px; font-weight: 300;
      color: var(--gold); opacity: 0.28; line-height: 1;
      display: block; margin-bottom: 24px;
    }
    .adv-rule { width: 28px; height: 1px; background: var(--gold); margin-bottom: 20px; }
    .adv-lbl {
      font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--lgrey); display: block; margin-bottom: 10px;
    }
    .adv-ttl {
      font-family: var(--serif); font-size: 26px; font-weight: 400;
      color: var(--black); line-height: 1.2; margin-bottom: 14px;
    }
    .adv-txt { font-family: var(--mono); font-size: 12px; line-height: 2; color: var(--grey); }

    /* ═══════════════════════════════════════════
       TEAM — photos + bullets
    ═══════════════════════════════════════════ */
    .team-photo { width: 100%; aspect-ratio: 3/4; overflow: hidden; }
    .team-photo img {
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
      display: block; transition: transform 0.6s var(--ease-out);
      filter: grayscale(12%);
    }
    .team-card:hover .team-photo img { transform: scale(1.04); filter: grayscale(0%); }
    .team-edu {
      font-family: var(--mono); font-size: 11px; line-height: 1.9;
      color: var(--lgrey); margin-bottom: 16px;
    }
    .team-bullets { list-style: none; border-top: 1px solid rgba(15,15,15,0.08); padding-top: 14px; }
    .team-bullet {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 8px 0; border-bottom: 1px solid rgba(15,15,15,0.05);
      font-family: var(--mono); font-size: 11px; line-height: 1.75; color: var(--grey);
    }
    .team-bullet::before { content: '—'; color: var(--gold); opacity: 0.7; flex-shrink: 0; font-size: 10px; margin-top: 3px; }

    /* ═══════════════════════════════════════════
       CONTACT — two emails
    ═══════════════════════════════════════════ */
    .contact-email-row { margin-bottom: 2px; }
    .contact-email-name {
      font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--lgrey); display: block; margin-bottom: 2px;
    }

    /* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */
    @media (max-width: 900px) {
      #nav, #nav.is-scrolled { padding: 22px 28px; }
      .nav-items { display: none; }
      .wrap { padding: 0 28px; }
      #hero { padding: 110px 28px 80px; }
      .hero-strip { padding: 0 28px; }
      .about-layout, .contact-layout { grid-template-columns: 1fr; gap: 48px; }
      .about-quote { margin-top: 0; }
      .svc-grid { grid-template-columns: 1fr; }
      .pillars { grid-template-columns: 1fr; }
      .adv-grid { grid-template-columns: 1fr 1fr; }
      .adv-card { padding: 0 28px 40px; border-right: none; border-bottom: 1px solid rgba(15,15,15,0.08); }
      .team-grid { grid-template-columns: 1fr; }
      .svc-modal-photos { grid-template-columns: 1fr 1fr; }
      .svc-modal-body { padding: 36px 28px 60px; }
      .svc-modal-cols { grid-template-columns: 1fr; }
.f-row { grid-template-columns: 1fr; gap: 0; }
      .ft-top { flex-direction: column; gap: 36px; }
      .ft-nav { gap: 36px; }
      .ft { padding: 0 28px; }
      .fq-inner { padding: 0 28px; }
    }

    /* ═══════════════════════════════════════════
       READABILITY (tuned for large / high-DPI displays)
       V1's Space Mono body & labels ran small (11–14px) and felt
       cramped below the hero on big screens. Bump body copy,
       loosen leading, and enlarge section labels — Cormorant
       display headings keep their natural light weight.
    ═══════════════════════════════════════════ */
    html { font-size: 17px; }                 /* base up from 16px */

    .about-text p        { font-size: 16px; line-height: 1.95; }
    .svc-desc            { font-size: 15px; line-height: 1.95; }
    .pillar-desc         { font-size: 14.5px; line-height: 2; }
    .adv-txt             { font-size: 14px; line-height: 1.95; }
    .team-edu            { font-size: 12.5px; line-height: 2; }
    .team-bullet         { font-size: 13px; line-height: 1.8; }
    .svc-modal-row-desc  { font-size: 14.5px; line-height: 1.95; }
    .contact-intro       { font-size: 15px; line-height: 1.9; }
    .svc-list li         { font-size: 13px; }
    .fi, .fl             { font-size: 14px; }
    .contact-detail      { font-size: 14px; }

    /* Section labels & small caps — a touch larger so they read on big screens */
    .sec-label, .about-dtag, .adv-lbl,
    .svc-modal-tag, .svc-modal-col-label { font-size: 12px; }
    .hero-sub            { font-size: 15px; }

    /* Cap the long-form reading measure so lines aren't over-wide on 5K */
    .about-text p, .svc-desc, .pillar-desc, .adv-txt,
    .contact-intro, .svc-modal-row-desc { max-width: 62ch; }

    /* ═══════════════════════════════════════════
       ACCESSIBILITY
    ═══════════════════════════════════════════ */
    /* Skip link */
    .skip-link {
      position: absolute; left: -9999px; top: 0; z-index: 1000;
      background: var(--navy); color: var(--white);
      font-family: var(--mono); font-size: 13px; padding: 12px 18px;
    }
    .skip-link:focus { left: 12px; top: 12px; }

    /* Visible keyboard focus (gold ring) — paired with custom cursor */
    a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
    input:focus-visible, textarea:focus-visible, .svc:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      border-radius: 2px;
    }
    /* Ensure picture fills the portrait frame */
    .team-photo picture { display: block; width: 100%; height: 100%; }

    /* ═══════════════════════════════════════════
       MOBILE NAVIGATION
    ═══════════════════════════════════════════ */
    .nav-toggle {
      display: none;
      width: 44px; height: 44px;
      background: none; border: none; cursor: pointer;
      flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px;
      padding: 0;
    }
    .nav-toggle-bar {
      display: block; width: 24px; height: 1.5px; background: var(--black);
      transition: transform 0.3s var(--ease-out), opacity 0.2s, width 0.3s;
    }
    .nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); width: 24px; }
    .nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 24px; }
    .cursor-dark .nav-toggle-bar { background: var(--black); }

    @media (max-width: 900px) {
      .nav-toggle { display: flex; }
      /* Slide-down panel replacing the hidden inline list */
      .nav-items {
        display: flex !important;
        position: fixed; inset: 0 0 auto 0; top: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        padding: 96px 28px 36px;
        background: rgba(242, 239, 233, 0.98);
        backdrop-filter: blur(20px) saturate(1.4);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        border-bottom: 1px solid rgba(15,15,15,0.08);
        transform: translateY(-100%);
        opacity: 0; visibility: hidden;
        transition: transform 0.45s var(--ease-out), opacity 0.3s, visibility 0.3s;
      }
      .nav-open .nav-items { transform: translateY(0); opacity: 1; visibility: visible; }
      .nav-items > li { width: 100%; border-bottom: 1px solid rgba(15,15,15,0.07); }
      .nav-items > li > a {
        display: block; width: 100%;
        padding: 18px 0; font-size: 13px; min-height: 44px;
      }
      /* Show service sub-links inline on mobile */
      .nav-drop {
        position: static; opacity: 1; visibility: visible; transform: none;
        background: none; box-shadow: none; padding: 0 0 12px 16px; pointer-events: auto;
      }
      .nav-drop a { padding: 8px 0; }
    }

    /* ═══════════════════════════════════════════
       FINER MOBILE TUNING
    ═══════════════════════════════════════════ */
    @media (max-width: 560px) {
      .adv-grid { grid-template-columns: 1fr; }
      .adv-card { border-bottom: 1px solid rgba(15,15,15,0.08); }
      /* Hide the absolutely-positioned hero city/scroll strip on mobile —
         it stacked and overlapped the CTA at narrow widths. */
      .hero-strip { display: none; }
      .svc-modal-photos { grid-template-columns: 1fr; height: auto; }
      .svc-modal-photo { height: 200px; }
      .marquee-item { font-size: 24px; }
    }

    /* Generous tap targets for primary CTAs / form controls on touch */
    @media (hover: none), (pointer: coarse) {
      .btn, .f-submit, .contact-detail a, .ft-col a { min-height: 44px; }
    }

    /* ═══════════════════════════════════════════
       REDUCED MOTION & TOUCH — restore native cursor,
       disable decorative animation, force content visible
    ═══════════════════════════════════════════ */
    @media (hover: none), (pointer: coarse) {
      body { cursor: auto; }
      #c-dot, #c-ring { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
      body { cursor: auto !important; }
      #c-dot, #c-ring { display: none !important; }
      .rv { opacity: 1 !important; transform: none !important; }
      .marquee-track { animation: none !important; }
    }

    /* ═══════════════════════════════════════════
       ENQUIRY FORM — submission status
    ═══════════════════════════════════════════ */
    .f-status {
      margin-top: 16px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      line-height: 1.5;
      min-height: 1em;
    }
    .f-status[data-state="ok"]    { color: var(--gold); }
    .f-status[data-state="error"] { color: #b4451f; }
    .f-submit[disabled] { opacity: 0.55; cursor: progress; }