:root {
      --cream: #f4efe7;
      --paper: #fffdf9;
      --ink: #293432;
      --muted: #68726e;
      --sage: #7c9389;
      --sage-dark: #506b63;
      --sage-pale: #dfe9e4;
      --sand: #d8c7b6;
      --clay: #b88d79;
      --line: rgba(41, 52, 50, 0.14);
      --shadow: 0 28px 75px rgba(42, 53, 50, 0.11);
      --radius: 24px;
      --max: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "DM Sans", sans-serif;
      line-height: 1.75;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .container {
      width: min(calc(100% - 42px), var(--max));
      margin: 0 auto;
    }

    .eyebrow {
      margin: 0 0 16px;
      color: var(--sage-dark);
      font-size: 0.83rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    h1, h2, h3 {
      margin-top: 0;
      font-family: "Italiana", serif;
      font-weight: 400;
      line-height: 1.04;
    }

    h1 {
      max-width: 700px;
      margin-bottom: 26px;
      font-size: clamp(4rem, 8vw, 7.4rem);
      letter-spacing: -0.05em;
    }

    h2 {
      margin-bottom: 24px;
      font-size: clamp(3rem, 5vw, 5.2rem);
      letter-spacing: -0.04em;
    }

    h3 {
      margin-bottom: 10px;
      font-size: 1.65rem;
      letter-spacing: -0.02em;
    }

    p {
      margin-top: 0;
    }

    .lead {
      max-width: 690px;
      color: var(--muted);
      font-size: clamp(1.04rem, 1.6vw, 1.18rem);
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

    .button {
      display: inline-flex;
      min-height: 51px;
      align-items: center;
      justify-content: center;
      padding: 0 21px;
      border-radius: 999px;
      font-size: 0.88rem;
      font-weight: 600;
      transition: transform 180ms ease, background 180ms ease, color 180ms ease;
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .button-primary {
      color: white;
      border: 1px solid var(--sage-dark);
      background: var(--sage-dark);
      box-shadow: 0 12px 28px rgba(80, 107, 99, 0.17);
    }

    .button-secondary {
      color: var(--sage-dark);
      border: 1px solid rgba(80, 107, 99, 0.35);
      background: rgba(255, 253, 249, 0.48);
    }

    .button-secondary:hover {
      color: white;
      background: var(--sage-dark);
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--line);
      font-size: 0.88rem;
      font-weight: 600;
    }

    .site-header {
      position: absolute;
      z-index: 10;
      top: 0;
      width: 100%;
      padding: 24px 0;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .brand {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }

    .brand-name {
     /* font-family: "Cormorant Garamond"; */
      font-family: "Parisienne", cursive;
     /* font-size: clamp(1.9rem, 3vw, 2.8rem); */
     font-size: 2rem;
      white-space: nowrap;
    }

    .brand-title {
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 26px;
      color: var(--ink);
      font-size: 1.2rem;
    }

  /*  .brand-first {
  font-family: "Parisienne", cursive;
  font-size: 2rem;
  color: var(--ink);
  align-content: center;
}

.brand-last {
  font-family: "Parisienne", cursive;
  font-size: 1.7rem;
  font-weight: 500;
  margin-top: 2px;
}

.brand-title {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
} */



    .hero {
      position: relative;
      min-height: 930px;
      overflow: hidden;
      padding: 170px 0 90px; 
      background:
        linear-gradient(90deg, rgba(244,239,231,.96) 0%, rgba(244,239,231,.86) 42%, rgba(244,239,231,.24) 78%, rgba(244,239,231,.08) 100%),
        radial-gradient(circle at 76% 22%, rgba(208,232,224,.55), transparent 25%),
      url("media/hero_background_1.png");
      background-position: 60% center;
    }


    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 720px;
    }

    .hero h1 span {
      display: block;
      color: var(--sage-dark);
      font-family: "Parisienne", cursive;
      font-size: .78em;
      letter-spacing: 0;
      transform: translateX(4px);
    }

    .hero-copy {
      max-width: 625px;
      color: var(--muted);
      font-size: clamp(1.05rem, 1.55vw, 1.18rem);
    }

    .hero-note {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 24px;
      color: var(--muted);
      font-size: 0.82rem;
    }

    .hero-note::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #7d9a76;
      box-shadow: 0 0 0 5px rgba(125,154,118,.13);
    }

    .contact-ribbon {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--paper);
    }

    .contact-ribbon-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 0;
    }

    .contact-ribbon p {
      margin: 0;
      color: var(--muted);
      font-size: 0.88rem;
    }

    .contact-links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      font-size: 0.86rem;
      font-weight: 600;
    }

    section {
      padding: 115px 0;
    }

    .intro-section {
      background:
        radial-gradient(circle at 92% 10%, rgba(205,224,217,.26), transparent 27%),
        var(--cream);
    }

    .intro-grid {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: 96px;
      align-items: center;
    }

    .portrait-panel {
      position: relative;
      width: min(100%, 390px);
      padding: 20px;
      border: 1px solid var(--line);
      background: rgba(255,253,249,.66);
      box-shadow: var(--shadow);
    }

.portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

    .portrait-caption {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-top: 14px;
      color: var(--muted);
      font-size: .68rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .intro-quote {
      margin-bottom: 22px;
      font-family: "Italiana", serif;
      font-size: 1.5rem;
      line-height: 1.46;
    }

    .body-copy {
      color: var(--muted);
    }

    .signature {
      margin-top: 28px;
      color: var(--sage-dark);
      font-family: "Parisienne", cursive;
      font-size: 1.95rem;
      line-height: 1.25;
    }

    .recognition-section {
      background: var(--paper);
    }

    .recognition-grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 90px;
      align-items: start;
    }

    .sticky {
      position: sticky;
      top: 40px;
    }

    .recognition-list {
      border-top: 1px solid var(--line);
    }

    .recognition-item {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 18px;
      padding: 27px 0;
      border-bottom: 1px solid var(--line);
    }

    .recognition-number {
      color: var(--sage-dark);
      font-family: "Italiana", serif;
      font-size: 1.1rem;
    }

    .recognition-item p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .mid-cta {
      padding: 0;
      background: var(--paper);
      margin-bottom: 60px;
    }

    .mid-cta-panel {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 40px;
      align-items: center;
      padding: 42px 48px;
      border-radius: var(--radius);
      background: var(--sage-pale);
    }

    .mid-cta-panel p {
      margin: 0;
      font-family: "Italiana", serif;
      font-size: clamp(1.65rem, 2.8vw, 2.45rem);
      line-height: 1.25;
    }

    .mid-cta-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 12px;
    }

    .approach-section {
      color: white;
      background: var(--ink);
    }

    .approach-section .eyebrow,
    .approach-section .lead {
      color: rgba(255,255,255,.7);
    }

    .approach-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 82px;
      align-items: start;
    }

    .approach-cards {
      display: grid;
      gap: 16px;
    }

    .approach-card {
      padding: 26px 0;
      border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .approach-card h3 {
      color: white;
    }

    .approach-card p {
      margin-bottom: 0;
      color: rgba(255,255,255,.7);
    }

    .methods {
      margin-top: 34px;
      color: rgba(255,255,255,.56);
      font-size: .82rem;
      letter-spacing: .05em;
    }

    .areas-section {
      background: var(--cream);
    }

    .areas-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: end;
    }

    .area-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
    }

    .area-card {
      min-height: 215px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,253,249,.6);
    }

    .area-card p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: .92rem;
    }

    .process-section {
      background: var(--paper);
    }

    .process-grid {
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 90px;
      align-items: start;
    }

    .details {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .detail {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--paper);
    }

    .detail strong {
      display: block;
      margin-bottom: 7px;
      font-family: "Italiana", serif;
      font-size: 1.35rem;
      font-weight: 400;
    }

    .detail span {
      color: var(--muted);
      font-size: .9rem;
    }

    .insurance-note {
      margin-top: 20px;
      color: var(--muted);
      font-size: .85rem;
    }

    .final-cta {
      padding-top: 45px;
      background: var(--paper);
    }

    .final-panel {
      position: relative;
      overflow: hidden;
      padding: 82px 68px;
      border-radius: var(--radius);
      color: white;
      background: var(--sage-dark);
    }

    .final-panel::after {
      content: "";
      position: absolute;
      right: -130px;
      bottom: -170px;
      width: 430px;
      height: 430px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 50%;
    }

    .final-panel .eyebrow,
    .final-panel .lead {
      color: rgba(255,255,255,.76);
    }

    .final-panel .button-primary {
      color: var(--sage-dark);
      border-color: white;
      background: white;
    }

    .final-panel .button-secondary {
      color: white;
      border-color: rgba(255,255,255,.6);
      background: transparent;
    }

    .final-panel .button-secondary:hover {
      color: var(--sage-dark);
      background: white;
    }

    footer {
      padding: 38px 0;
      border-top: 1px solid var(--line);
      background: var(--paper);
    }

    .footer-grid {
      display: flex;
      justify-content: space-between;
      gap: 25px;
      color: var(--muted);
      font-size: .8rem;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    @media (min-width: 1300px) {
      .nav-container {
         width: calc(100% - 100px);
         max-width: 1600px;
       }
    }
  

    @media (max-width: 950px) {
      .nav-links a:not(.nav-cta) {
        display: none;
      }

      .intro-grid,
      .recognition-grid,
      .approach-grid,
      .areas-header,
      .process-grid {
        grid-template-columns: 1fr;
        gap: 55px;
      }

      .sticky {
        position: static;
      }

      .area-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .mid-cta-panel {
        grid-template-columns: 1fr;
      }

      .mid-cta-actions {
        justify-content: flex-start;
      }
     main {
    text-align: center;
    }

    .button-row,
    .contact-links {
    justify-content: center;
    }

   .hero-content, .contact-ribbon, .contact-links {
      text-align: center;
      margin: 0 auto;
    }
    .hero-note {
      justify-content: center;
    }
    .button-row, .mid-cta-actions {
      justify-content: center;
    }
    .portrait-panel {
    margin: 0 auto;
  }
    .recognition-item {
    display: block !important;
    text-align: center;
  }

  .recognition-number {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
    text-align: center;
  }

  .recognition-item > div:last-child {
    width: 100%;
    text-align: center;
  }
    .area-card {
    min-height: 0;
    padding: 34px 24px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
  }
  .detail {
    min-height: unset;
    padding: 24px 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 86%;
    margin: 0 auto;
    min-height: unset;
    padding: 24px 20px;
  }

  .detail strong {
    margin-bottom: 4px;
  }
    .final-panel::after {
    display: none;
  }
  .footer-grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }


    }

    @media (max-width: 650px) {
      .container {
        width: min(calc(100% - 28px), var(--max));
      }

      .site-header {
        padding: 18px 0;
      }

      .brand-name {
        font-size: 1.65rem;
      }

      .brand-title {
        font-size: .54rem;
      }

      .nav-cta {
        padding: 10px 13px;
        font-size: .76rem;
      }

      .hero {
        min-height: 820px;
        padding-top: 130px;
      }

      section {
        padding: 82px 0;
      }

      .portrait-panel {
        width: 100%;
        max-width: 340px;
        padding: 14px;
      }

      .recognition-item {
        grid-template-columns: 34px 1fr;
      }

      .mid-cta-panel {
        padding: 34px 24px;
      }

      .area-grid,
      .details {
        grid-template-columns: 1fr;
      }

      .final-panel {
        padding: 58px 24px;
      }

      .footer-grid {
        flex-direction: column;
      }
    }