:root{
    --paper: #FAF9F6;
    --stone: #F1EEE6;
    --navy: #0A1F33;
    --navy-2: #15304A;
    --ink: #1C242C;
    --text-mid: #5B6570;
    --text-dim: #98A0A8;
    --line: #DEDAD0;
    --line-dark: rgba(250,249,246,0.16);
    --sage: #4B6B57;
    --ease: cubic-bezier(.19,1,.22,1);

    --serif: 'Newsreader', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
  }
  a{ color:inherit; }
  img{ display:block; max-width:100%; }
  ::selection{ background: var(--navy); color: var(--paper); }

  .wrap{ max-width: 1240px; margin:0 auto; padding: 0 56px; position:relative; }
  @media (max-width: 860px){ .wrap{ padding: 0 24px; } }

  a:focus-visible, button:focus-visible{ outline: 2px solid var(--sage); outline-offset: 3px; }

  /* ================= Reduced motion master switch ================= */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
    .split-line span, .wipe, .r{ transform:none !important; clip-path:none !important; opacity:1 !important; }
  }

  /* ================= Grain overlay ================= */
  .grain{
    position:fixed; inset:-60px; z-index: 9998; pointer-events:none;
    opacity: 0.035; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
  }

  /* ================= Custom cursor ================= */
  html.has-cursor, html.has-cursor *{ cursor:none !important; }
  .cursor-dot{
    position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
    background: var(--navy); pointer-events:none; z-index:9999;
    transition: opacity 0.25s ease, background-color 0.3s ease;
  }
  .cursor-dot.on-dark{ background: var(--paper); }
  body.cursor-hover .cursor-dot{ opacity:0; }
  .cursor-ring{ position:fixed; top:0; left:0; width:0; height:0; pointer-events:none; z-index:9999; }
  .cursor-ring-inner{
    position:absolute; top:0; left:0; width:34px; height:34px; margin-left:-17px; margin-top:-17px;
    border:1px solid var(--navy); border-radius:50%;
    transition: transform 0.4s var(--ease), opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  }
  .cursor-ring.on-dark .cursor-ring-inner{ border-color: var(--paper); }
  .cursor-ring.is-active .cursor-ring-inner{ transform: scale(1.7); background: rgba(10,31,51,0.05); }
  .cursor-ring.on-dark.is-active .cursor-ring-inner{ background: rgba(250,249,246,0.1); }
  .cursor-ring.is-view .cursor-ring-inner{ transform: scale(2.9); background: var(--navy); border-color: var(--navy); }
  .cursor-label{
    position:absolute; top:0; left:0; transform: translate(-50%,-50%);
    font-family: var(--mono); font-size: 9px; letter-spacing:0.14em; color: var(--paper);
    opacity:0; transition: opacity 0.3s ease; white-space:nowrap; pointer-events:none;
  }
  .cursor-ring.is-view .cursor-label{ opacity:1; }

  /* ================= Row preview (services) ================= */
  .row-preview{
    position:fixed; top:0; left:0; width:230px; height:290px; z-index:60;
    pointer-events:none; opacity:0; transform: translate(-9999px,-9999px) scale(0.94);
    transition: opacity 0.4s ease;
  }
  .row-preview.is-active{ opacity:1; }
  .row-preview .duotone{ width:100%; height:100%; }

  /* ================= Side rail ================= */
  .siderail{
    position: fixed; left: 22px; top: 50%; transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--text-dim); z-index: 40; pointer-events:none;
  }
  @media (max-width: 1180px){ .siderail{ display:none; } }

  /* ================= Split-line text reveal ================= */
  .split-line{ display:block; overflow:hidden; }
  .split-line span{ display:block; will-change: transform; }

  /* Hero: autoplay on load */
  .hero-title .split-line span{
    transform: translateY(115%);
    animation: lineUp 1.05s var(--ease) forwards;
  }
  .hero-title .split-line:nth-child(1) span{ animation-delay: 0.15s; }
  .hero-title .split-line:nth-child(2) span{ animation-delay: 0.30s; }
  .hero-title .split-line:nth-child(3) span{ animation-delay: 0.45s; }
  @keyframes lineUp{ to{ transform: translateY(0); } }

  /* Section titles: scroll-triggered */
  .section-title .split-line span{
    transform: translateY(112%);
    transition: transform 0.85s var(--ease);
  }
  .section-head.on .section-title .split-line span{ transform: translateY(0); }

  /* ================= r/on fade system ================= */
  .r{ opacity:0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .r.on{ opacity:1; transform: translateY(0); }
  .r-1{ transition-delay:0.06s; } .r-2{ transition-delay:0.13s; } .r-3{ transition-delay:0.20s; }
  .r-4{ transition-delay:0.27s; } .r-5{ transition-delay:0.34s; } .r-6{ transition-delay:0.41s; }

  .wipe{ clip-path: inset(0 100% 0 0); transition: clip-path 1.15s var(--ease); }
  .wipe.on{ clip-path: inset(0 0% 0 0); }

  /* ================= Header ================= */
  header.site{
    position: sticky; top:0; z-index: 100;
    background: rgba(250,249,246,0.9); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  header.site .wrap{ height: 88px; display:flex; align-items:center; justify-content:space-between; }
  .brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
  .brand .mark-icon{ flex-shrink:0; }
  .brand .name{ font-size: 14px; font-weight: 500; color: var(--navy); line-height:1.3; }
  .brand .name small{
    display:block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-dim); margin-top:2px; font-weight:400;
  }
  nav.primary{ display:flex; }
  nav.primary a:not(:last-child){ margin-right: 38px; }
  nav.primary a{
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration:none; color: var(--text-mid); position:relative; padding-bottom: 4px;
  }
  nav.primary a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--navy);
    transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
  }
  nav.primary a:hover{ color: var(--navy); }
  nav.primary a:hover::after{ transform: scaleX(1); }
  @media (max-width: 940px){ nav.primary{ display:none; } }
  .hdr-cta{
    display:inline-flex; align-items:center; gap:9px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration:none; color: var(--navy); padding-bottom: 3px; border-bottom: 1px solid var(--navy);
  }
  .hdr-cta svg{ width:12px; height:12px; transition: transform 0.3s var(--ease); }
  .hdr-cta:hover svg{ transform: translateX(4px); }

  /* ================= NEW HOMEPAGE (v2 — Creative Director rebuild) ================= */

  /* --- Hero v2: no photography, typographic + ambient line motif --- */
  .hero-v2{
    padding: 160px 0 140px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }
  .hero-v2-ambient{
    position:absolute; top:50%; right:-8%; transform:translateY(-50%);
    width: 640px; height: 640px; opacity: 0.5; pointer-events:none;
  }
  @media (max-width: 980px){ .hero-v2-ambient{ width: 420px; height:420px; right:-20%; opacity:0.35; } }
  .hero-v2-content{ max-width: 760px; position:relative; z-index:1; }
  .hero-v2 .eyebrow{ margin-bottom: 30px; }
  h1.hero-v2-title{
    font-family: var(--serif); font-weight: 500; font-optical-sizing: auto;
    font-size: clamp(38px, 5.6vw, 70px); line-height: 1.08; letter-spacing: -0.02em;
    color: var(--navy); max-width: 14ch;
  }
  .hero-v2-sub{
    margin-top: 32px; max-width: 46ch; font-size: 18px; line-height: 1.7;
    color: var(--text-mid); font-weight: 300;
  }
  .hero-v2-actions{ margin-top: 46px; display:flex; gap: 18px; flex-wrap:wrap; align-items:center; }
  .btn-solid{
    display:inline-flex; align-items:center; gap:10px;
    background: var(--navy); color: var(--paper); border: 1px solid var(--navy);
    padding: 15px 28px; font-family: var(--sans); font-size: 14px; font-weight: 500;
    text-decoration:none; letter-spacing: 0.01em; transition: background 0.3s ease;
  }
  .btn-solid:hover{ background: var(--navy-2); }
  .btn-outline-v2{
    display:inline-flex; align-items:center; gap:10px;
    background: transparent; color: var(--navy); border: 1px solid var(--line);
    padding: 15px 28px; font-family: var(--sans); font-size: 14px; font-weight: 500;
    text-decoration:none; letter-spacing: 0.01em; transition: border-color 0.3s ease, background 0.3s ease;
  }
  .btn-outline-v2:hover{ border-color: var(--navy); background: rgba(10,31,51,0.02); }

  /* --- Shared: compact section head for content-dense sections --- */
  .shead-v2{ max-width: 620px; margin-bottom: 64px; }
  .shead-v2 h2{
    font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.22; color: var(--navy); letter-spacing: -0.015em;
  }
  .shead-v2 p{ margin-top: 18px; font-size: 16px; color: var(--text-mid); line-height: 1.7; font-weight: 300; }

  /* --- Icon system: all built from the brand's node-and-line motif --- */
  .hcp-icon{ width: 40px; height: 40px; }
  .hcp-icon circle{ fill: var(--navy); }
  .hcp-icon .accent{ fill: var(--sage); }
  .hcp-icon path, .hcp-icon line{ stroke: var(--navy); fill:none; }

  /* --- Problem section: 3 icon items in a row --- */
  .problem-row{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
    border-top: 1px solid var(--line); padding-top: 56px;
  }
  @media (max-width: 780px){ .problem-row{ grid-template-columns: 1fr; gap: 40px; } }
  .problem-item{ text-align:left; }
  .problem-item .hcp-icon{ margin-bottom: 22px; }
  .problem-item h3{ font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--navy); }

  /* --- Why HCP: 3 cards, no imagery --- */
  .why-hcp-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
  }
  @media (max-width: 780px){ .why-hcp-grid{ grid-template-columns: 1fr; } }
  .why-hcp-cell{ background: var(--paper); padding: 44px 38px; }
  .why-hcp-cell h3{ font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy); margin-bottom: 16px; }
  .why-hcp-cell p{ font-size: 14.5px; color: var(--text-mid); line-height: 1.75; font-weight: 300; }

  /* --- Who we work with: 6 icon cards --- */
  .audience-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
  }
  @media (max-width: 860px){ .audience-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .audience-grid{ grid-template-columns: 1fr; } }
  .audience-cell{
    background: var(--stone); padding: 40px 30px; display:flex; flex-direction:column; align-items:flex-start; gap: 20px;
    transition: background 0.3s ease;
  }
  .audience-cell:hover{ background: var(--paper); }
  .audience-cell h3{ font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--navy); }

  /* --- Partnership Framework: animated horizontal timeline --- */
  .framework-section{ overflow:hidden; }
  .framework-timeline{ position:relative; padding: 40px 0 8px; }
  .framework-svg{ width:100%; height:auto; display:block; margin-bottom: -8px; }
  .framework-steps{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  @media (max-width: 860px){ .framework-steps{ grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }
  @media (max-width: 560px){ .framework-steps{ grid-template-columns: 1fr; } }
  .framework-step{ text-align:left; opacity: 0.3; transition: opacity 0.6s ease; }
  .framework-step.is-active{ opacity: 1; }
  .framework-step .num{ font-family: var(--mono); font-size: 11px; color: var(--sage); letter-spacing:0.08em; margin-bottom: 10px; }
  .framework-step h3{ font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--navy); }

  /* --- Geography / Corridor v2: dedicated, larger, bolder --- */
  .geo-section{ background: var(--navy); color: var(--paper); }
  .geo-section .shead-v2 h2{ color: var(--paper); }
  .geo-section .shead-v2 p{ color: rgba(250,249,246,0.62); }
  .geo-map-v2{ margin-top: 24px; }
  .geo-svg{ width:100%; height:auto; display:block; }
  .geo-labels{ display:flex; justify-content: space-between; margin-top: 28px; gap: 12px; flex-wrap:wrap; }
  .geo-label-group{ text-align:left; }
  .geo-label-group .region-tag{
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform:uppercase;
    color: #8FB0A0; margin-bottom: 8px; display:block;
  }
  .geo-label-group .cities{ font-family: var(--serif); font-size: 19px; color: var(--paper); }
  @media (max-width: 620px){ .geo-labels{ flex-direction:column; gap: 22px; } }

  /* --- Difference statement: strongest section --- */
  .difference-section{ text-align:left; }
  .difference-statement{
    font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 5vw, 56px);
    line-height: 1.18; color: var(--navy); letter-spacing: -0.02em; max-width: 16ch;
  }
  .difference-statement em{ font-style: italic; font-weight: 400; color: var(--sage); }
  .difference-body{ margin-top: 40px; display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start; }
  @media (max-width: 780px){ .difference-body{ grid-template-columns: 1fr; gap: 32px; } }
  .difference-list p{ font-size: 15px; color: var(--text-mid); line-height: 1.8; margin-bottom: 10px; font-weight: 300; }
  .difference-list strong{ color: var(--navy); font-weight: 500; }
  .difference-close p{ font-size: 16.5px; color: var(--ink); line-height: 1.8; font-weight: 400; }

  /* --- Final CTA --- */
  .final-cta{ text-align:left; background: var(--stone); }
  .final-cta h2{
    font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4vw, 46px);
    color: var(--navy); letter-spacing: -0.02em; max-width: 16ch; line-height: 1.2;
  }
  .final-cta-actions{ margin-top: 40px; }

  /* ================= Simple page intro (subpages) ================= */
  .page-hero{ padding: 108px 0 76px; border-bottom: 1px solid var(--line); }
  .page-hero .hero-title{ max-width: 20ch; }
  .page-hero .hero-sub{ animation-delay: 0.5s; }
  .closing .page-hero{ border-bottom: 1px solid var(--line-dark); }
  .closing .page-hero .hero-title{ color: var(--paper); }

  /* ================= Hero ================= */
  .hero{ padding: 108px 0 0; }
  .hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items:start; }
  @media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; gap: 36px; } }

  .hero-copy{ padding-bottom: 64px; padding-top: 18px; }
  .hero-eyebrow{
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform:uppercase;
    color: var(--sage); margin-bottom: 32px; display:flex; align-items:center; gap:14px;
    opacity:0; animation: fadeIn 0.7s ease forwards; animation-delay: 0.05s;
  }
  @keyframes fadeIn{ to{ opacity:1; } }
  .hero-eyebrow .rule{ width:36px; height:1px; background: var(--sage); }
  h1.hero-title{
    font-family: var(--serif); font-optical-sizing: auto; font-weight: 500;
    font-size: clamp(40px, 5.6vw, 78px); line-height: 1.05; letter-spacing: -0.02em;
    color: var(--navy); max-width: 12ch;
  }
  h1.hero-title em{ font-style: italic; font-weight: 400; color: var(--sage); }
  .hero-sub{
    margin-top: 34px; max-width: 44ch; font-size: 17px; line-height: 1.7; color: var(--text-mid); font-weight: 300;
    opacity:0; animation: fadeUp 0.9s var(--ease) forwards; animation-delay: 0.7s;
  }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
  .hero-actions{
    margin-top: 46px; display:flex; gap: 40px; align-items:center; flex-wrap:wrap;
    opacity:0; animation: fadeUp 0.9s var(--ease) forwards; animation-delay: 0.85s;
  }
  .link-arrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform:uppercase;
    text-decoration:none; color: var(--navy); padding-bottom: 4px; border-bottom: 1px solid var(--navy);
  }
  .link-arrow svg{ width:13px; height:13px; transition: transform 0.3s var(--ease); }
  .link-arrow:hover svg{ transform: translateX(5px); }
  .link-arrow.quiet{ border-bottom-color: var(--line); color: var(--text-mid); }
  .link-arrow.quiet:hover{ border-bottom-color: var(--text-mid); }

  .hero-media{ position:relative; margin-top: 40px; }
  @media (min-width: 981px){ .hero-media{ margin-top: 76px; } }
  .duotone{ position:relative; overflow:hidden; background: var(--stone); }
  .duotone img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.1) brightness(0.98); }
  .duotone::after{ content:""; position:absolute; inset:0; background: var(--navy); mix-blend-mode:color; opacity:0.86; }
  .hero-media .duotone{
    aspect-ratio: 3/4;
    clip-path: inset(0 100% 0 0);
    animation: wipeIn 1.3s var(--ease) forwards;
    animation-delay: 0.35s;
  }
  @keyframes wipeIn{ to{ clip-path: inset(0 0% 0 0); } }

  /* ================= Trusted-by strip ================= */
  .trusted-strip{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; }
  .trusted-strip p{
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(16px, 1.9vw, 20px); line-height: 1.6; color: var(--text-mid);
    max-width: 62ch;
  }
  .trusted-strip .tag{
    display:block; font-family: var(--mono); font-style: normal; font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); margin-bottom: 14px;
  }

  /* ================= Our Focus panels ================= */
  .focus-section{ padding: 120px 0 128px; }
  .focus-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 52px;
    border-top: 1px solid var(--line); padding-top: 52px; margin-top: 8px;
  }
  @media (max-width: 980px){ .focus-grid{ grid-template-columns: repeat(2, 1fr); gap: 44px 36px; } }
  @media (max-width: 620px){ .focus-grid{ grid-template-columns: 1fr; gap: 40px; } }
  .focus-panel h3{
    font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 1.7vw, 26px);
    color: var(--navy); line-height: 1.3; margin-bottom: 16px; letter-spacing: -0.01em;
  }
  .focus-panel p{ font-size: 14px; color: var(--text-mid); line-height: 1.75; font-weight: 300; max-width: 32ch; }

  /* ================= Corridor route visual ================= */
  .corridor-map{ margin-bottom: 64px; }
  .corridor-svg{ width: 100%; height: auto; display:block; }
  #corridorPath{ stroke-dasharray: 1; stroke-dashoffset: 0; }
  .corridor-labels{ display:flex; justify-content: space-between; margin-top: 18px; gap: 16px; }
  .corridor-label h4{ font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--navy); }
  @media (max-width: 620px){
    .corridor-labels{ flex-direction:column; gap: 14px; }
    .corridor-label{ text-align:left !important; }
  }

  /* ================= Figures ledger ================= */
  /* ================= Section shell ================= */
  section{ padding: 128px 0; }
  section.on-stone{ background: var(--stone); }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 32px; margin-bottom: 72px; flex-wrap:wrap; }
  .eyebrow{
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform:uppercase;
    color: var(--sage); margin-bottom: 20px; display:flex; align-items:center; gap:12px;
  }
  .eyebrow .count{ color: var(--text-dim); }
  h2.section-title{
    font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 46px);
    letter-spacing: -0.015em; line-height: 1.16; color: var(--navy); max-width: 15ch;
  }
  .section-intro{ max-width: 380px; font-size: 14.5px; color: var(--text-mid); line-height: 1.75; padding-bottom: 4px; }

  /* ================= About ================= */
  .about-grid{ display:grid; grid-template-columns: 0.82fr 1.18fr; gap: 88px; align-items:start; }
  @media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; gap: 48px; } }
  .about-media{ position:sticky; top: 120px; }
  .about-media .duotone{ aspect-ratio: 4/5; }
  .about-copy p{ font-size: 18px; line-height: 1.75; color: var(--text-mid); margin-bottom: 26px; font-weight: 300; }
  .about-copy p strong{ color: var(--navy); font-weight: 500; }
  .about-copy p.lede{ font-family: var(--serif); font-size: 25px; line-height: 1.5; color: var(--navy); font-weight: 400; }

  .why-list{ margin-top: 20px; border-top: 1px solid var(--line); }
  .why-row{ display:grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
  @media (max-width: 640px){ .why-row{ grid-template-columns: 1fr; gap:6px; } }
  .why-row h4{ font-size: 14.5px; font-weight: 500; color: var(--navy); }
  .why-row p{ font-size: 14px; color: var(--text-mid); line-height: 1.65; font-weight:300; }

  /* ================= Regions ================= */
  .region-grid{ display:grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
  @media (max-width: 980px){
    .region-grid{ grid-template-columns: repeat(2, 1fr); }
    .region-grid .region-col:nth-child(3), .region-grid .region-col:nth-child(4){ border-top: 1px solid var(--line); padding-top: 40px; }
    .region-grid .region-col:nth-child(even){ border-left: 1px solid var(--line); padding-left: 40px; }
    .region-grid .region-col:nth-child(odd){ border-left: none; padding-left: 0; }
  }
  @media (max-width: 620px){
    .region-grid{ grid-template-columns: 1fr; }
    .region-grid .region-col{ border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--line); padding-top: 40px; }
    .region-grid .region-col:first-child{ border-top: none; padding-top: 44px; }
  }
  .region-col{ position:relative; padding: 44px 40px 4px 0; border-left: 1px solid var(--line); }
  .region-col:first-child{ border-left: none; padding-left: 0; }
  .region-col h3{ font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--navy); margin-bottom: 8px; }
  .region-col .cities{ font-size: 13px; color: var(--sage); margin-bottom: 18px; letter-spacing: 0.01em; }
  .region-col p{ font-size: 14px; color: var(--text-mid); line-height: 1.7; font-weight: 300; max-width: 30ch; }

  /* ================= Services index ================= */
  .service-index{ border-top: 1px solid var(--line); }
  .service-row{
    display:grid; grid-template-columns: 1fr 340px 28px; align-items: center; gap: 28px;
    padding: 34px 4px; border-bottom: 1px solid var(--line); text-decoration:none; color: inherit;
    transition: padding 0.35s var(--ease), background-color 0.35s ease;
  }
  .service-row:hover{ padding-left: 18px; padding-right: 18px; background: var(--stone); }
  @media (max-width: 860px){
    .service-row{ grid-template-columns: 1fr 26px; }
    .service-row .service-desc{ display:none; }
  }
  .service-row h3{ font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2.4vw, 26px); color: var(--navy); }
  .service-row .service-desc{ font-size: 13.5px; color: var(--text-mid); line-height: 1.6; font-weight: 300; }
  .service-row .arrow{ width:20px; height:20px; opacity:0; transform: translateX(-8px); transition: all 0.35s var(--ease); }
  .service-row:hover .arrow{ opacity:1; transform: translateX(0); }
  .service-row .arrow svg{ width:100%; height:100%; stroke: var(--navy); }

  /* ================= Approach ================= */
  .approach-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  @media (max-width: 780px){ .approach-grid{ grid-template-columns: 1fr; } }
  .approach-cell{ background: var(--stone); padding: 44px 40px; }
  .approach-cell .step-num{ font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-bottom: 24px; }
  .approach-cell h3{ font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy); margin-bottom: 14px; }
  .approach-cell p{ font-size: 14px; color: var(--text-mid); line-height: 1.75; font-weight: 300; }

  /* ================= Closing / Contact (dark) ================= */
  .closing{ background: var(--navy); color: var(--paper); }
  .closing .eyebrow{ color: #8FB0A0; }
  .closing .section-title{ color: var(--paper); }
  .closing .section-intro{ color: rgba(250,249,246,0.62); }
  .contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 88px; }
  @media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; gap: 52px; } }
  .contact-detail{ padding: 22px 0; border-bottom: 1px solid var(--line-dark); }
  .contact-detail:first-child{ padding-top:0; }
  .contact-detail .label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform:uppercase; color: rgba(250,249,246,0.5); margin-bottom: 10px; }
  .contact-detail .value{ font-family: var(--serif); font-size: 21px; font-weight: 400; }
  .contact-detail a.value{ text-decoration:none; border-bottom: 1px solid transparent; }
  .contact-detail a.value:hover{ border-bottom-color: var(--paper); }
  form.contact-form{ display:flex; flex-direction:column; gap: 26px; }
  .field label{ display:block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform:uppercase; color: rgba(250,249,246,0.5); margin-bottom: 10px; }
  .field input, .field textarea{
    width:100%; background: transparent; border:none; border-bottom: 1px solid var(--line-dark);
    padding: 12px 2px; font-family: var(--sans); font-size: 15px; color: var(--paper); resize:vertical;
  }
  .field input::placeholder, .field textarea::placeholder{ color: rgba(250,249,246,0.3); }
  .field input:focus, .field textarea:focus{ outline:none; border-bottom-color: var(--paper); }
  .field textarea{ min-height: 92px; }
  .form-submit{
    margin-top: 6px; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
    background: transparent; color: var(--paper); border: 1px solid var(--paper);
    padding: 15px 28px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform:uppercase;
    cursor:pointer; transition: background 0.3s ease, color 0.3s ease;
  }
  .form-submit:hover{ background: var(--paper); color: var(--navy); }
  .form-note{ font-size: 12px; color: rgba(250,249,246,0.45); margin-top: 4px; }

  /* ================= Footer ================= */
  footer.site{ background: var(--paper); padding: 40px 0; border-top: 1px solid var(--line); }
  .footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
  .footer-inner .fbrand{ font-family: var(--serif); font-size: 14.5px; color: var(--navy); }
  .footer-meta{ font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.03em; }
  .footer-meta a{ color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--line); }
  .footer-meta a:hover{ color: var(--navy); border-bottom-color: var(--navy); }