:root {
      --cream: #f7f1e7;
      --paper: #fffaf2;
      --ink: #2f3328;
      --olive: #4d5c3d;
      --olive-deep: #34402b;
      --sage: #a7b195;
      --warm: #b8865b;
      --line: #d9cebc;
      --muted: #67695f;
      --serif: Georgia, "Times New Roman", serif;
      --sans: Arial, Helvetica, sans-serif;
      --shadow: 0 24px 60px rgba(82, 68, 49, .13);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--cream);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.65;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    h1, h2, h3 { margin: 0; text-wrap: balance; }
    h1, h2 {
      font-family: var(--serif);
      font-weight: 400;
      letter-spacing: -.035em;
      line-height: 1.04;
    }
    h1 { max-width: 760px; font-size: clamp(3.5rem, 5vw, 4.5rem); }
    h2 { font-size: clamp(2.75rem, 3.333333vw, 3rem); }
    p { margin-top: 0; }
    [id] { scroll-margin-top: 24px; }

    .site-header {
      width: min(1380px, calc(100% - 64px));
      min-height: 92px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      border-bottom: 1px solid var(--line);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      line-height: 1.1;
      flex: 0 0 auto;
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--olive);
      border-radius: 50%;
      font-family: var(--serif);
    }
    .brand-mark svg { width: 83.333333%; height: 83.333333%; display: block; }
    .brand strong {
      display: block;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 500;
    }
    .brand small {
      display: block;
      margin-top: 5px;
      color: #777565;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .main-nav {
      display: flex;
      align-items: center;
      gap: clamp(18px, 3vw, 42px);
      font-size: 14px;
    }
    .main-nav a, .header-cta { transition: color .2s ease, border-color .2s ease; }
    .main-nav a:hover, .header-cta:hover { color: var(--warm); }
    .header-cta {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 9px 0 7px;
      border-bottom: 1px solid var(--ink);
      font-size: 14px;
      white-space: nowrap;
    }
    .arrow { font-size: 19px; line-height: 1; }
    .mobile-menu { display: none; position: relative; }

    .hero {
      width: min(1380px, calc(100% - 64px));
      min-height: 720px;
      margin: 0 auto;
      padding: 76px 0 68px;
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: clamp(48px, 7vw, 108px);
      align-items: center;
    }
    .hero-copy { position: relative; z-index: 1; }
    .eyebrow {
      margin: 0 0 22px;
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--olive);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 18px;
      height: 1px;
      background: currentColor;
    }
    .hero-lead {
      max-width: 680px;
      margin: 30px 0 0;
      color: #5e6156;
      font-size: clamp(18px, 1.5vw, 21px);
      line-height: 1.7;
    }
    .hero-actions {
      margin-top: 38px;
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
    }
    .button {
      min-height: 52px;
      padding: 14px 23px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary {
      background: var(--olive);
      color: var(--paper);
      box-shadow: 0 12px 28px rgba(55, 66, 44, .16);
    }
    .button-primary:hover { background: var(--olive-deep); }
    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
      font-size: 15px;
    }
    .hero-note {
      margin-top: 44px;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #6b6e61;
      font-family: var(--serif);
      font-size: 16px;
      font-style: italic;
    }
    .hero-note .leaf {
      width: 24px;
      height: 24px;
      display: inline-flex;
      flex: 0 0 auto;
      color: var(--olive);
    }
    .hero-note .leaf svg { display: block; width: 100%; height: 100%; }
    .hero-visual { position: relative; min-width: 0; }
    .hero-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      transform: translate(-24px, -24px);
      border: 1px solid rgba(77, 92, 61, .25);
      border-radius: 49% 49% 18px 18px;
    }
    .photo-frame {
      position: relative;
      aspect-ratio: 5 / 5.7;
      overflow: hidden;
      border-radius: 49% 49% 18px 18px;
      box-shadow: var(--shadow);
      background: #e6d6c2;
    }
    .photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 51% center;
    }
    .floating-card {
      position: absolute;
      right: -26px;
      bottom: 32px;
      padding: 18px 22px;
      background: rgba(255, 250, 242, .94);
      border: 1px solid rgba(217, 206, 188, .9);
      box-shadow: 0 18px 44px rgba(77, 61, 42, .14);
      backdrop-filter: blur(10px);
    }
    .floating-card span, .floating-card strong { display: block; }
    .floating-card span {
      color: #777565;
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .floating-card strong {
      margin-top: 6px;
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.35;
    }

    .signal-strip {
      min-height: 64px;
      padding: 18px 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(16px, 3vw, 44px);
      background: var(--olive);
      color: var(--cream);
      font-family: var(--serif);
      font-size: 17px;
      font-style: italic;
    }
    .dot { color: #bdc7ae; font-size: 14px; }

    .section {
      width: min(1240px, calc(100% - 64px));
      margin: 0 auto;
      padding: 126px 0;
    }
    .problem-section {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 100px;
      align-items: start;
    }
    .lead-paragraph {
      margin: 0;
      color: #4f5348;
      font-family: var(--serif);
      font-size: clamp(21px, 2.3vw, 30px);
      line-height: 1.5;
    }
    .check-list {
      margin: 36px 0 0;
      padding: 0;
      list-style: none;
    }
    .check-list li {
      padding: 14px 0;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      border-bottom: 1px solid var(--line);
      color: #65675d;
    }
    .check-icon {
      width: 20px;
      height: 20px;
      margin-top: 3px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid var(--sage);
      border-radius: 50%;
      color: var(--olive);
      font-size: 12px;
    }

    .approach-section {
      width: 100%;
      max-width: none;
      padding: 120px max(32px, calc((100vw - 1240px) / 2));
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(70px, 10vw, 150px);
      align-items: center;
      background: var(--olive-deep);
      color: #f9f3e9;
    }
    .eyebrow-light { color: #c6d0b8; }
    .approach-copy > p:not(.eyebrow) {
      max-width: 580px;
      margin: 28px 0 0;
      color: #d8ddcf;
      font-size: 17px;
    }
    .checks-card {
      position: relative;
      padding: clamp(28px, 4vw, 54px);
      background: var(--paper);
      color: var(--ink);
      filter: drop-shadow(24px 24px 0 rgba(181, 151, 112, .2));
    }
    .checks-card::before, .checks-card::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 5px;
      background: radial-gradient(circle at 5px 0, transparent 4.5px, var(--paper) 5px) repeat-x;
      background-size: 10px 5px;
    }
    .checks-card::before { top: -4.5px; transform: rotate(0deg); }
    .checks-card::after { bottom: -4.5px; transform: rotate(180deg); }
    .check-row {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 20px;
    }
    .check-number {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--warm);
      font-family: var(--serif);
    }
    .check-row small, .check-row strong { display: block; }
    .check-row small {
      color: #8a877d;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .check-row strong {
      margin-top: 4px;
      font-family: var(--serif);
      font-size: clamp(23px, 2.4vw, 32px);
      font-weight: 400;
    }
    .check-row p { margin: 10px 0 0; color: #6b6d63; font-size: 15px; }
    .check-divider {
      height: 70px;
      margin: 10px 0 12px 22px;
      position: relative;
      border-left: 1px dashed #c7b9a5;
    }
    .check-divider span {
      position: absolute;
      left: -13px;
      top: 22px;
      width: 25px;
      height: 25px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--paper);
      color: var(--warm);
    }
    .emotional .check-number {
      background: var(--olive);
      border-color: var(--olive);
      color: var(--paper);
    }

    .services-section { padding-bottom: 150px; }
    .services-heading {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 80px;
      align-items: end;
    }
    .services-heading > p {
      max-width: 500px;
      margin: 0 0 6px;
      color: var(--muted);
      font-size: 17px;
    }
    .services-grid {
      margin-top: 68px;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 18px;
    }
    .service-card {
      min-height: 292px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      background: rgba(255, 250, 242, .55);
      transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    }
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(3) { grid-column: span 2; }
    .service-card:nth-child(4),
    .service-card:nth-child(5) { grid-column: span 3; }
    .service-card:hover {
      transform: translateY(-5px);
      background: var(--paper);
      box-shadow: 0 22px 48px rgba(83, 72, 56, .08);
    }
    .service-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--olive);
    }
    .service-top span { color: #9b8f7f; font-size: 12px; letter-spacing: .1em; }
    .service-symbol {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border: 1px solid var(--sage);
      border-radius: 50%;
      font-family: var(--serif);
      font-size: 19px;
    }
    .service-card h3 {
      margin-top: auto;
      font-family: var(--serif);
      font-size: 25px;
      font-weight: 400;
      line-height: 1.15;
    }
    .service-card p { margin: 14px 0 0; color: #707168; font-size: 15px; line-height: 1.6; }

    .examples-section {
      width: 100%;
      max-width: none;
      padding-left: max(32px, calc((100vw - 1240px) / 2));
      padding-right: max(32px, calc((100vw - 1240px) / 2));
      background: #e9e0d2;
    }
    .examples-list { margin-top: 70px; border-top: 1px solid #cbbda9; }
    .example-row {
      padding: 36px 0;
      display: grid;
      grid-template-columns: 60px 1.1fr .9fr;
      gap: 34px;
      border-bottom: 1px solid #cbbda9;
    }
    .example-index { color: #9b8b75; font-family: var(--serif); }
    .example-label {
      margin: 0 0 10px;
      color: var(--olive);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .example-row h3 {
      max-width: 650px;
      font-family: var(--serif);
      font-size: clamp(23px, 2.6vw, 34px);
      font-weight: 400;
      line-height: 1.28;
    }
    .example-text { margin: 0; color: #66675f; }

    .about-section {
      position: relative;
      display: grid;
      grid-template-columns: .16fr 1.08fr .76fr;
      gap: clamp(30px, 6vw, 86px);
      align-items: start;
    }
    .about-mark {
      margin-top: -26px;
      color: #c0ad92;
      font-family: var(--serif);
      font-size: 132px;
      line-height: 1;
    }
    .about-copy > p:not(.eyebrow) {
      max-width: 650px;
      margin: 25px 0 0;
      color: #62655a;
      font-size: 17px;
    }
    .principles-card {
      margin-top: 52px;
      padding: 30px;
      border-left: 2px solid var(--olive);
      background: var(--paper);
    }
    .principles-card > p {
      margin: 0 0 18px;
      color: #78786f;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .principles-card ul { margin: 0; padding: 0; list-style: none; }
    .principles-card li {
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      font-family: var(--serif);
      font-size: 18px;
    }
    .principles-card li:last-child { border-bottom: 0; }
    .principles-card li span {
      display: inline-block;
      width: 36px;
      color: var(--warm);
      font-family: var(--sans);
      font-size: 11px;
    }

    .final-cta {
      position: relative;
      overflow: hidden;
      padding: 110px 32px;
      text-align: center;
      background: var(--olive);
      color: var(--paper);
    }
    .final-cta::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 420px;
      right: -90px;
      top: -150px;
      border: 1px solid rgba(240, 245, 233, .18);
      border-radius: 100% 0 100% 0;
      transform: rotate(18deg);
    }
    .final-cta .eyebrow { justify-content: center; }
    .final-cta h2 { max-width: 850px; margin: 0 auto; }
    .final-cta > p:not(.eyebrow) {
      max-width: 610px;
      margin: 25px auto 0;
      color: #dfe5d7;
      font-size: 17px;
    }
    .button-light { margin-top: 34px; background: var(--paper); color: var(--olive-deep); }
    .button-light:hover { background: #ede3d4; }

    footer {
      width: min(1380px, calc(100% - 64px));
      min-height: 126px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      color: #6e7065;
      font-size: 13px;
    }
    footer > p { margin: 0; text-align: center; }
    footer > a:last-child { color: var(--olive); font-weight: 700; }

    @media (max-width: 980px) {
      .main-nav { display: none; }
      .mobile-menu { display: block; }
      .mobile-menu summary {
        cursor: pointer;
        list-style: none;
        padding: 9px 0;
        border-bottom: 1px solid var(--ink);
        font-size: 14px;
      }
      .mobile-menu summary::-webkit-details-marker { display: none; }
      .mobile-menu nav {
        position: absolute;
        z-index: 5;
        top: 45px;
        right: 0;
        width: 190px;
        padding: 12px;
        display: grid;
        background: var(--paper);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }
      .mobile-menu nav a { padding: 10px 12px; }
      .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 54px; }
      .hero-copy { max-width: 780px; }
      .hero-visual { max-width: 720px; }
      .photo-frame { aspect-ratio: 5 / 4; border-radius: 220px 220px 18px 18px; }
      .hero-visual::before { border-radius: 220px 220px 18px 18px; }
      .problem-section, .services-heading { grid-template-columns: 1fr; gap: 45px; }
      .approach-section { grid-template-columns: 1fr; }
      .service-card:nth-child(n) { grid-column: span 3; }
      .about-section { grid-template-columns: 70px 1fr; }
      .principles-card { grid-column: 2; margin-top: 0; }
    }

    @media (max-width: 680px) {
      .site-header, .hero, .section, footer { width: min(100% - 36px, 1240px); }
      .site-header { min-height: 78px; }
      .header-cta { display: none; }
      .brand small { display: none; }
      .brand strong { font-size: 15px; }
      .brand-mark { width: 36px; height: 36px; }
      .hero { padding: 52px 0 42px; gap: 48px; }
      h1 { font-size: 2.625rem; }
      h2 { font-size: 2.125rem; }
      .hero-lead { font-size: 17px; }
      .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
      .hero-note { margin-top: 34px; }
      .photo-frame { aspect-ratio: 4 / 4.8; border-radius: 48% 48% 14px 14px; }
      .hero-visual::before { border-radius: 48% 48% 14px 14px; transform: translate(-12px, -12px); }
      .floating-card { right: -6px; bottom: 18px; max-width: 220px; }
      .signal-strip { justify-content: flex-start; overflow: hidden; white-space: nowrap; }
      .section { padding-top: 82px; padding-bottom: 82px; }
      .approach-section, .examples-section {
        width: 100%;
        padding-left: 18px;
        padding-right: 18px;
      }
      .checks-card { filter: drop-shadow(12px 12px 0 rgba(181, 151, 112, .2)); }
      .check-row { grid-template-columns: 44px 1fr; gap: 12px; }
      .services-grid { grid-template-columns: 1fr; margin-top: 48px; }
      .service-card:nth-child(n) { grid-column: auto; min-height: 250px; }
      .example-row { grid-template-columns: 40px 1fr; gap: 18px; }
      .example-text { grid-column: 2; }
      .about-section { grid-template-columns: 1fr; }
      .about-mark { display: none; }
      .principles-card { grid-column: auto; }
      .final-cta { padding: 84px 18px; }
      footer { padding: 28px 0; flex-direction: column; text-align: center; }
    }

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