:root {
        color-scheme: light dark;
        --paper: #f0f1ea;
        --paper-2: #e3e6dc;
        --ink: #102019;
        --muted: #526158;
        --line: #bbc3b9;
        --moss: #286047;
        --moss-dark: #173c2c;
        --cedar: #b6482d;
        --white: #fbfcf7;
        --shadow: rgba(14, 31, 23, 0.14);
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --paper: #111814;
          --paper-2: #1b251f;
          --ink: #edf2ea;
          --muted: #aebbb1;
          --line: #3c4940;
          --moss: #77b892;
          --moss-dark: #b5dcc2;
          --cedar: #ef825f;
          --white: #17201b;
          --shadow: rgba(0, 0, 0, 0.34);
        }
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        min-width: 320px;
        background: var(--paper);
        color: var(--ink);
        font-family: "IBM Plex Sans", sans-serif;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
      }

      a { color: inherit; }
      button, a { -webkit-tap-highlight-color: transparent; }
      ::selection { background: var(--cedar); color: #fff; }

      .page {
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
      }

      .utility {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 26px;
        border-bottom: 1px solid var(--line);
      }

      .utility a {
        font-size: 0.86rem;
        font-weight: 600;
        text-decoration: none;
      }
      .utility a:hover, .utility a:focus-visible { color: var(--cedar); }

      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(230px, 0.36fr);
        gap: 5vw;
        min-height: 620px;
        padding: clamp(74px, 11vw, 138px) 0 clamp(72px, 10vw, 124px);
        align-items: end;
      }

      .hero-copy { max-width: 820px; }
      .hero h1 {
        margin: 0;
        max-width: 790px;
        font-family: "IBM Plex Serif", serif;
        font-size: clamp(3.35rem, 7.7vw, 7.4rem);
        font-weight: 500;
        letter-spacing: -0.055em;
        line-height: 0.91;
        text-wrap: balance;
      }

      .hero h1 em {
        color: var(--cedar);
        font-weight: 500;
      }

      .hero-aside {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 8px 0 6px 28px;
        border-left: 1px solid var(--line);
      }

      .hero-aside p {
        margin: 0;
        max-width: 310px;
        color: var(--muted);
        font-size: clamp(1rem, 1.4vw, 1.14rem);
      }

      .location {
        display: flex;
        gap: 10px;
        align-items: center;
        color: var(--moss-dark);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .location::before {
        content: "";
        width: 24px;
        height: 2px;
        background: var(--cedar);
      }

      .cta {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: fit-content;
        min-width: 228px;
        margin-top: 34px;
        padding: 14px 17px;
        background: var(--ink);
        color: var(--paper);
        text-decoration: none;
        font-weight: 600;
        border: 1px solid var(--ink);
        box-shadow: 0 8px 20px transparent;
        transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
      }
      .cta::after { content: "↗"; font-size: 1.18rem; }
      .cta:hover, .cta:focus-visible {
        background: var(--cedar);
        border-color: var(--cedar);
        color: #fff;
        box-shadow: 0 8px 20px var(--shadow);
      }

      .statement {
        position: relative;
        overflow: hidden;
        background: var(--moss-dark);
        color: #f5f7f2;
      }
      @media (prefers-color-scheme: dark) {
        .statement { background: #243b2e; }
      }
      .statement::after {
        content: "";
        position: absolute;
        right: -12vw;
        top: -42%;
        width: 43vw;
        height: 43vw;
        min-width: 420px;
        min-height: 420px;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 50%;
        box-shadow: 0 0 0 58px rgba(255,255,255,0.025), 0 0 0 116px rgba(255,255,255,0.018);
      }
      .statement-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 0.42fr 1fr;
        gap: 6vw;
        padding: clamp(72px, 10vw, 120px) 0;
      }
      .section-index {
        margin: 4px 0 0;
        color: #c7d8cc;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.11em;
        text-transform: uppercase;
      }
      .statement blockquote {
        margin: 0;
        max-width: 800px;
        font-family: "IBM Plex Serif", serif;
        font-size: clamp(2rem, 4.2vw, 4.25rem);
        line-height: 1.08;
        letter-spacing: -0.035em;
        text-wrap: balance;
      }

      .capabilities { padding: clamp(80px, 10vw, 126px) 0; }
      .section-head {
        display: grid;
        grid-template-columns: 0.42fr 1fr;
        gap: 6vw;
        margin-bottom: 54px;
      }
      .section-head h2 {
        margin: 0;
        max-width: 650px;
        font-family: "IBM Plex Serif", serif;
        font-size: clamp(2.1rem, 4.4vw, 4.2rem);
        font-weight: 500;
        line-height: 1;
        letter-spacing: -0.04em;
      }
      .dark-index { color: var(--moss-dark); }

      .service-list { border-top: 1px solid var(--line); }
      .service {
        display: grid;
        grid-template-columns: 0.18fr 0.38fr 1fr;
        gap: 28px;
        padding: 33px 0 36px;
        border-bottom: 1px solid var(--line);
      }
      .service-number { color: var(--cedar); font-weight: 600; }
      .service h3 {
        margin: 0;
        font-size: clamp(1.15rem, 1.8vw, 1.45rem);
        font-weight: 600;
        line-height: 1.25;
      }
      .service p {
        margin: 0;
        max-width: 610px;
        color: var(--muted);
        font-size: 1rem;
      }

      .approach {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
        min-height: 560px;
        background: var(--paper-2);
      }
      .approach-copy {
        padding: clamp(70px, 8vw, 108px) max(24px, calc((100vw - 1180px) / 2));
        padding-right: clamp(36px, 8vw, 110px);
      }
      .approach h2 {
        margin: 24px 0 30px;
        max-width: 650px;
        font-family: "IBM Plex Serif", serif;
        font-size: clamp(2.45rem, 5vw, 5.3rem);
        font-weight: 500;
        line-height: 0.98;
        letter-spacing: -0.045em;
      }
      .approach-copy > p {
        max-width: 640px;
        margin: 0;
        color: var(--muted);
        font-size: 1.07rem;
      }
      .approach-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin-top: 48px;
      }
      .approach-steps p {
        margin: 0;
        padding-top: 14px;
        border-top: 2px solid var(--moss);
        color: var(--ink);
        font-size: 0.88rem;
        font-weight: 600;
      }
      .approach-steps span { display: block; margin-bottom: 8px; color: var(--cedar); }

      .signal {
        position: relative;
        overflow: hidden;
        display: grid;
        place-items: center;
        min-height: 460px;
        background: var(--cedar);
      }
      .signal::before,
      .signal::after {
        content: "";
        position: absolute;
        width: 52%;
        aspect-ratio: 1;
        border: 2px solid rgba(255,255,255,.82);
        border-radius: 50%;
      }
      .signal::before { transform: translate(-22%, -5%); }
      .signal::after { transform: translate(22%, 5%); }
      .signal-mark {
        position: relative;
        z-index: 2;
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 14px rgba(255,255,255,.18);
      }

      .contact { padding: clamp(80px, 11vw, 132px) 0 46px; }
      .contact-grid {
        display: grid;
        grid-template-columns: 0.42fr 1fr;
        gap: 6vw;
      }
      .contact h2 {
        margin: 0;
        max-width: 820px;
        font-family: "IBM Plex Serif", serif;
        font-size: clamp(2.7rem, 6.5vw, 6.8rem);
        font-weight: 500;
        line-height: 0.94;
        letter-spacing: -0.05em;
      }
      .contact p {
        max-width: 600px;
        margin: 26px 0 0;
        color: var(--muted);
        font-size: 1.05rem;
      }
      .email-link {
        display: inline-block;
        margin-top: 42px;
        color: var(--ink);
        font-size: clamp(1rem, 2vw, 1.35rem);
        font-weight: 600;
        text-underline-offset: 7px;
        text-decoration-color: var(--cedar);
        text-decoration-thickness: 2px;
      }
      .email-link:hover, .email-link:focus-visible { color: var(--cedar); }

      footer {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        margin-top: 100px;
        padding-top: 28px;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 0.78rem;
      }
      footer p { margin: 0; }

      :focus-visible { outline: 3px solid var(--cedar); outline-offset: 4px; }

      @media (max-width: 820px) {
        .page { width: min(100% - 32px, 680px); }
        .utility { min-height: 60px; gap: 18px; }
        .utility a { font-size: 0.8rem; }
        .hero {
          grid-template-columns: 1fr;
          min-height: auto;
          padding: 72px 0 76px;
        }
        .hero h1 { max-width: 640px; }
        .hero-aside {
          gap: 36px;
          padding: 24px 0 0;
          border-left: 0;
          border-top: 1px solid var(--line);
        }
        .statement-inner,
        .section-head,
        .contact-grid { grid-template-columns: 1fr; gap: 26px; }
        .service { grid-template-columns: 48px 0.55fr 1fr; }
        .approach { grid-template-columns: 1fr; }
        .approach-copy { padding: 72px 24px; }
        .signal { min-height: 340px; }
        .signal::before, .signal::after { width: 42%; min-width: 220px; }
      }

      @media (max-width: 560px) {
        .page { width: calc(100% - 30px); }
        .utility { justify-content: space-between; gap: 10px; }
        .hero { padding-top: 62px; }
        .hero h1 { font-size: clamp(3.05rem, 16vw, 4.5rem); }
        .hero-aside p { font-size: 1rem; }
        .cta { width: 100%; min-width: 0; }
        .statement::after { right: -86%; top: -15%; }
        .service {
          grid-template-columns: 42px 1fr;
          gap: 12px 16px;
          padding: 28px 0 30px;
        }
        .service p { grid-column: 2; }
        .approach-steps { grid-template-columns: 1fr; gap: 24px; }
        .signal { min-height: 280px; }
        .contact h2 { font-size: clamp(2.75rem, 15vw, 4.2rem); }
        .email-link { overflow-wrap: anywhere; line-height: 1.5; }
        footer { flex-direction: column; margin-top: 74px; }
      }

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