/* Self-hosted fonts (latin + latin-ext for macrons) */
    @font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/caveat-600-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
    @font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/caveat-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
    @font-face{font-family:'Merriweather';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/merriweather-700-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
    @font-face{font-family:'Merriweather';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/merriweather-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
    @font-face{font-family:'Merriweather';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/merriweather-900-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
    @font-face{font-family:'Merriweather';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/merriweather-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
    @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sourcesans-400-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
        @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sourcesans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
        @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sourcesans-600-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
        @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sourcesans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
        @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/sourcesans-700-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
        @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/sourcesans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

    :root{
      --cream:#F8F3E9;
      --ink:#3A2F25;
      --panel: rgba(58, 47, 37, 0.04);
      --tile-max: 420px;
      --accent: rgba(0, 183, 176, 1);
      --nav-h: 90px;
      --logo-teal: #00B7B0;
      --logo-ocean: #2369A3;
      --logo-mint: #77D6D1;
      --logo-navy: #1F4F7F;
      --section-pad-x: clamp(18px, 3vw, 34px);
      --section-inner-max: 1400px;
      /* ~680px at MacBook Pro 14" (1512px) and below; grows on larger screens */
      --hero-block-max: clamp(680px, 45vw, 960px);
      /* Single fluid body-text size used across all sections (≈16px → 18px) */
      --body: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
      --body-line: 1.6;
      /* Body copy colour — ink at 90% opacity, used across all sections */
      --body-color: rgba(58, 47, 37, 0.9);
    }

    html{
      scroll-padding-top: var(--nav-h);
      scroll-behavior: smooth;
    }

    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto; }
    }
    html,body{min-height:100%;}
    body{
      margin:0;
      padding-top: var(--nav-h);
      background:#FFFFFF;
      color:var(--ink);
      font-family: "Source Sans Pro", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

    h1, h2, h3{
      font-family: "Merriweather", Georgia, "Times New Roman", Times, serif;
    }

    .site-nav{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20;
      box-sizing: border-box;
      padding: 0 clamp(28px, 5vw, 80px);
      background: #FFFFFF;
      border-bottom: 1px solid rgba(58, 47, 37, 0.08);
      box-shadow: 0 4px 16px rgba(58, 47, 37, 0.07);
    }

    .site-nav__inner{
      position: relative;
      max-width: none;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: var(--nav-h);
      padding: 10px 0;
      transition: min-height 220ms ease, padding 220ms ease;
    }

    .site-nav.is-scrolled .site-nav__inner{
      min-height: 62px;
      padding-top: 6px;
      padding-bottom: 6px;
    }

    .site-nav__brand{
      display: inline-flex;
      align-items: center;
      justify-self: start;
      text-decoration: none;
      white-space: nowrap;
      transition: opacity 180ms ease;
    }

    .site-nav__brand:hover{
      opacity: 0.82;
    }

    .site-nav__brand img{
      display: block;
      height: 50px;
      width: auto;
      transition: height 220ms ease;
    }

    .site-nav.is-scrolled .site-nav__brand img{
      height: 38px;
    }

    .site-nav__links{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(4px, 0.6vw, 10px);
    }

    .site-nav__link{
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--ink);
      text-decoration: none;
      border: 1px solid transparent;
      transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .site-nav__link:hover{
      color: #FFFFFF;
      background: var(--logo-teal);
      border-color: rgba(0, 183, 176, 0.35);
    }

    .site-nav__link:focus-visible{
      outline: 2px solid rgba(0, 183, 176, 0.45);
      outline-offset: 2px;
    }

    .site-nav__cta{
      justify-self: end;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      padding: 15px 38px;
      border-radius: 22px;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #FFFFFF;
      background: var(--logo-teal);
      text-decoration: none;
      border: 1px solid rgba(0, 183, 176, 0.4);
      box-shadow: 0 4px 12px rgba(0, 183, 176, 0.28);
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, padding 220ms ease, font-size 220ms ease;
    }

    .site-nav.is-scrolled .site-nav__cta{
      padding: 10px 26px;
      font-size: 0.9rem;
    }

    .site-nav__cta:hover{
      transform: scale(1.06);
      background: #00a39d;
      box-shadow: 0 7px 18px rgba(0, 183, 176, 0.38);
    }

    .site-nav__cta:focus-visible{
      outline: 2px solid rgba(0, 183, 176, 0.5);
      outline-offset: 2px;
    }

    @media (max-width: 640px){
      .site-nav__links{
        display: none;
      }
    }

    .hero{
      min-height: calc(100vh - var(--nav-h));
      box-sizing:border-box;
      display:flex;
      align-items:stretch;
      background: #FFFFFF;
      position: relative;
      overflow: hidden;
    }

    .hero-inner{
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }

    .hero-copy{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(48px, 8vh, 88px) clamp(24px, 3.5vw, 56px) clamp(48px, 8vh, 88px);
      background: #FFFFFF;
    }

    .hero-heading{
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 2.4vh, 28px);
    }

    .hero-eyebrow{
      margin: 0;
      line-height: 1;
    }

    .hero-eyebrow__stars{
      color: #F4B400;
      letter-spacing: 5px;
      font-size: 1.2rem;
    }

    .hero-copy__inner{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      text-align: left;
      gap: clamp(20px, 3vh, 30px);
      width: 100%;
      max-width: var(--hero-block-max);
      box-sizing: border-box;
    }

    .hero-title{
      margin: 0;
      font-family: "Merriweather", Georgia, "Times New Roman", Times, serif;
      font-weight: 900;
      font-size: clamp(1.9rem, 3.2vw, 2.9rem);
      line-height: 1.22;
      letter-spacing: -0.011em;
      color: var(--ink);
    }

    .hero-title .hero-strong{
      font-weight: 900;
    }

    .hero-title .hero-em{
      letter-spacing: 0.03em;
      background-image: linear-gradient(transparent 22%, rgba(0, 183, 176, 0.45) 22%, rgba(0, 183, 176, 0.45) 90%, transparent 90%);
      padding: 0 0.08em;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      /* Keep "easygoing classes" (and its highlight) together on one line */
      white-space: nowrap;
    }

    .hero-sub{
      margin: 0;
      max-width: 44ch;
      color: var(--body-color);
      font-weight: 600;
      font-size: clamp(1.05rem, 1.3vw, 1.2rem);
      line-height: var(--body-line);
    }

    .hero-cta{
      display: inline-flex;
      align-items: center;
      padding: 14px 32px;
      border-radius: 22px;
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #FFFFFF;
      background: var(--logo-teal);
      text-decoration: none;
      border: 1px solid rgba(0, 183, 176, 0.4);
      box-shadow: 0 6px 16px rgba(0, 183, 176, 0.3);
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    .hero-cta:hover{
      transform: scale(1.05);
      background: #00a39d;
      box-shadow: 0 9px 22px rgba(0, 183, 176, 0.4);
    }

    .hero-cta:focus-visible{
      outline: 2px solid rgba(0, 183, 176, 0.5);
      outline-offset: 2px;
    }

    .hero-media{
      position: relative;
      background: var(--logo-mint);
      overflow: hidden;
    }

    .hero-photo{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    @media (max-width: 900px){
      .hero{
        min-height: auto;
      }
      .hero-inner{
        grid-template-columns: 1fr;
      }
      .hero-copy{
        order: 2;
        padding: clamp(40px, 7vh, 72px) clamp(20px, 6vw, 40px) clamp(36px, 6vh, 56px);
      }
      .hero-media{
        order: 1;
        min-height: 52vh;
      }
    }


    .content{
      padding: clamp(42px, 7vh, 78px) var(--section-pad-x);
      background: #FFFFFF;
      color: var(--ink);
      display: block;
      box-sizing: border-box;
      overflow: hidden;
    }

    .gallery-section{
      position: relative;
    }

    /* Let background motifs paint past the section box (paired with expanded SVG viewBox in JS). */
    .content.gallery-section{
      overflow: visible;
    }

    .gallery-bg-pattern{
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      overflow: visible;
    }

    .content-inner{
      position: relative;
      z-index: 1;
      width: min(var(--section-inner-max), 100%);
      min-height: 0;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-auto-rows: clamp(156px, 21.6vw, 233px);
      gap: clamp(12px, 1.8vw, 20px);
    }

    .gallery-card{
      position: relative;
      margin: 0;
      border-radius: 36px;
      overflow: hidden;
      background: #F6F6F6;
      border: 1px solid rgba(58, 47, 37, 0.10);
      box-shadow: 0 16px 36px rgba(58, 47, 37, 0.08);
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }

    .gallery-card:nth-child(1){
      grid-column: 1 / span 2;
      grid-row: 1 / span 3;
    }

    .gallery-card:nth-child(2){
      grid-column: 3 / span 2;
      grid-row: 1 / span 2;
    }

    .gallery-card:nth-child(3){
      grid-column: 5 / span 2;
      grid-row: 1 / span 3;
    }

    .gallery-card:nth-child(4){
      grid-column: 1 / span 2;
      grid-row: 4 / span 2;
    }

    .gallery-card:nth-child(5){
      grid-column: 3 / span 2;
      grid-row: 3 / span 3;
    }

    .gallery-card:nth-child(6){
      grid-column: 5 / span 2;
      grid-row: 4 / span 2;
    }

    .gallery-card:hover{
      transform: translateY(-2px);
      border-color: rgba(58, 47, 37, 0.18);
      box-shadow: 0 14px 30px rgba(58, 47, 37, 0.12);
    }

    .gallery-image{
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      transition: transform 260ms ease;
    }

    .gallery-tile{
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      margin: 0;
      padding: 0;
      border: 0;
      background: #F2F2F2;
      box-sizing: border-box;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: grayscale(100%);
      transition: filter 260ms ease;
    }

    .gallery-tile:hover,
    .gallery-tile:focus-visible{
      filter: grayscale(0%);
    }

    .content-inner p{
      margin: 0;
      line-height: 1.6;
      color: rgba(58, 47, 37, 0.82);
      font-size: clamp(0.96rem, 1.2vw, 1.02rem);
    }

    .gallery-grid{
      margin-top: clamp(8px, 1.4vh, 14px);
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(16px, 2.8vh, 28px);
      /* Keep the gallery within the viewport-height section. */
      flex: 1;
      height: 100%;
      align-content: start;
      justify-items: center;
      overflow: hidden;
      min-height: 0;
    }

    .gallery-item{
      background: #FFFFFF;
      border: 1px solid rgba(58, 47, 37, 0.10);
      border-radius: 30px;
      padding: 10px 12px 14px;
      text-align:left;
      justify-self: center;
      transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
      width: 100%;
      max-width: var(--tile-max);
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    @keyframes galleryIn{
      from{
        opacity: 0;
        transform: translateY(18px);
      }
      to{
        opacity: 1;
        transform: translateY(0);
      }
    }

    .gallery-item.is-visible{
      animation: galleryIn 650ms ease both;
    }

    @media (prefers-reduced-motion: reduce){
      .hero{
        animation: none;
      }
      .gallery-item{
        transition: none;
      }
      .gallery-item.is-visible{
        animation: none;
      }
      .about-carousel-slide{
        transition: none;
      }
    }

    .gallery-square{
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 28px;
      max-height: 34vh;
      margin: 0 auto;
      background: #FFFFFF;
      border: 1px solid rgba(58, 47, 37, 0.10);
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
      will-change: transform;
    }

    .gallery-item h3{
      margin: 12px auto 5px;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight: 600;
      font-size: 18px;
      color: var(--ink);
      width: 100%;
      max-width: var(--tile-max);
    }

    .gallery-item p{
      margin: 0 auto;
      line-height: 1.55;
      color: rgba(58, 47, 37, 0.78);
      font-size: 14.5px;
      width: 100%;
      max-width: var(--tile-max);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .gallery-item:hover{
      border-color: rgba(58, 47, 37, 0.18);
      box-shadow: 0 18px 40px rgba(58, 47, 37, 0.10);
      transform: translateY(-2px);
    }

    .gallery-item:hover .gallery-square{
      transform: translateY(-7px) scale(1.02);
      border-color: rgba(58, 47, 37, 0.22);
      box-shadow: 0 16px 34px rgba(58, 47, 37, 0.14);
    }

    .gallery-item:focus-visible{
      outline: 3px solid rgba(58, 47, 37, 0.22);
      outline-offset: 2px;
    }

    @media (max-width: 760px){
      .content{
        padding: clamp(34px, 6vh, 56px) clamp(14px, 3vw, 20px);
      }
      .content-inner{
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: clamp(141px, 27vw, 195px);
      }
      .gallery-card:nth-child(1){
        grid-column: 1 / span 2;
        grid-row: 1 / span 3;
      }
      .gallery-card:nth-child(2){
        grid-column: 3 / span 2;
        grid-row: 1 / span 2;
      }
      .gallery-card:nth-child(3){
        grid-column: 1 / span 4;
        grid-row: 4 / span 2;
      }
      .gallery-card:nth-child(4){
        grid-column: 1 / span 2;
        grid-row: 6 / span 2;
      }
      .gallery-card:nth-child(5){
        grid-column: 3 / span 2;
        grid-row: 6 / span 2;
      }
      .gallery-card:nth-child(6){
        grid-column: 1 / span 4;
        grid-row: 8 / span 1;
      }
    }

    @media (max-width: 480px){
      .content{
        padding: 26px 12px 34px;
      }
      .content-inner{
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 14px;
        min-height: auto;
      }
      .gallery-card{
        grid-column: auto !important;
        grid-row: auto !important;
        border-radius: 32px;
        aspect-ratio: 1 / 1;
      }

      .about-image-box{
        border-radius: 32px;
      }

      .services-grid{
        grid-template-columns: 1fr;
      }
    }

    h1{
      margin: 0;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight: 600;
      letter-spacing: 0.02em;
      font-size: clamp(2.2rem, 5vw, 4rem);
      line-height: 1.08;
      display:block;

      background:transparent !important;
      box-shadow:none !important;

      /* Soft, spread-out shadow under the text glyphs. */
      text-shadow:
        0px 18px 84px rgba(0, 0, 0, 0.11),
        0px 8px 48px rgba(0, 0, 0, 0.07);
    }

    h2{
      font-size: 55px;
      padding-top: 0px;
      padding-bottom: 0px;
    }

    .about{
      padding: clamp(40px, 7vh, 80px) var(--section-pad-x) clamp(46px, 7vh, 86px);
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%), var(--logo-teal);
      box-sizing: border-box;
      border-top: 1px solid rgba(255, 255, 255, 0.28);
      border-bottom: 1px solid rgba(255, 255, 255, 0.28);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .about-inner{
      width: min(var(--section-inner-max), 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: clamp(42px, 6vw, 87px);
      align-items: center;
      align-content: center;
      justify-items: stretch;
      background: #FFFFFF;
      border-radius: 36px;
      border: 1px solid rgba(58, 47, 37, 0.10);
      box-shadow: 0 16px 36px rgba(58, 47, 37, 0.08);
      padding: clamp(28px, 4vw, 42px);
      box-sizing: border-box;
    }

    .about-copy{
      min-width: 0;
      align-self: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .about-divider{
      position: relative;
      width: 22px;
      height: clamp(120px, 22vh, 220px);
      margin-block: auto;
      align-self: center;
      justify-self: center;
      opacity: 0.58;
      pointer-events: none;
    }

    .about-divider::before{
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 183, 176, 0.32) 0 7px,
        rgba(0, 183, 176, 0) 7px 13px
      );
      border-radius: 999px;
    }

    .about-divider::after{
      content: none;
    }

    .about-copy h2{
      margin: 0 0 16px;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight: 600;
      font-size: 50px;
      color: var(--logo-teal);
      letter-spacing: 0.02em;
    }

    .about-copy p{
      margin: 0 0 1rem;
      line-height: 1.65;
      color: rgba(58, 47, 37, 0.82);
      font-size: clamp(1rem, 1.08vw, 1.07rem);
    }

    .about-copy p:last-child{
      margin-bottom: 0;
    }

    .about-art{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(110px, 1fr));
      gap: clamp(14px, 2vw, 20px);
      align-self: stretch;
      min-height: clamp(300px, 42vh, 430px);
    }

    .about-image-box{
      min-width: 0;
      align-self: center;
      justify-self: center;
      width: min(100%, 645px);
      max-width: 100%;
      margin: 0;
      box-sizing: border-box;
      aspect-ratio: 1 / 1;
      height: auto;
      border-radius: 36px;
      overflow: hidden;
      box-shadow: 0 14px 30px rgba(58, 47, 37, 0.16);
      background: rgba(255, 255, 255, 0.9);
    }

    .about-carousel{
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .about-carousel-track{
      position: relative;
      height: 100%;
    }

    .about-carousel-slide{
      position: absolute;
      inset: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
      transform: translateX(100%);
      transition: transform 850ms ease;
      will-change: transform;
      z-index: 1;
    }

    .about-carousel-slide.is-active{
      transform: translateX(0);
      z-index: 2;
    }

    .about-carousel-slide.is-exit{
      transform: translateX(-100%);
      z-index: 1;
    }

    .about-carousel-slide img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .about-shape{
      position: relative;
      --stitch: rgba(31, 79, 127, 0.78);
      background: rgba(255, 255, 255, 0.98);
      border-radius: 32px;
      box-shadow: 0 14px 30px rgba(58, 47, 37, 0.10);
      overflow: hidden;
      transform: translateZ(0);
    }

    .about-shape::after{
      content: "";
      position: absolute;
      inset: 10px;
      border: 2px dashed var(--stitch);
      border-radius: 22px;
      pointer-events: none;
    }

    .about-shape--rect-tall{
      grid-column: 1;
      grid-row: 1 / span 2;
      --stitch: rgba(31, 79, 127, 0.75);
    }

    .about-shape--rect{
      grid-column: 2;
      grid-row: 1;
      --stitch: rgba(0, 183, 176, 0.75);
    }

    .about-shape--diamond{
      grid-column: 2;
      grid-row: 2;
      border-radius: 30px;
      transform: rotate(45deg);
      --stitch: rgba(35, 105, 163, 0.75);
    }

    .about-shape--diamond::after{
      inset: 12px;
      border-radius: 20px;
    }

    .about-shape--circle{
      grid-column: 3;
      grid-row: 1;
      border-radius: 999px;
      --stitch: rgba(119, 214, 209, 0.88);
    }

    .about-shape--circle::after{
      border-radius: 999px;
    }


    .about-shape--star{
      grid-column: 2;
      grid-row: 1;
      clip-path: polygon(
        50% 2%,
        61% 35%,
        96% 35%,
        67% 56%,
        78% 90%,
        50% 69%,
        22% 90%,
        33% 56%,
        4% 35%,
        39% 35%
      );
      border-radius: 18px;
      --stitch: rgba(35, 105, 163, 0.78);
    }

    .about-shape--star::after{
      inset: 14px;
      clip-path: polygon(
        50% 4%,
        60% 34%,
        92% 34%,
        65% 54%,
        75% 86%,
        50% 66%,
        25% 86%,
        35% 54%,
        8% 34%,
        40% 34%
      );
      border: 2px dashed var(--stitch);
      border-radius: 0;
    }

    .services{
      padding: clamp(42px, 7vh, 78px) var(--section-pad-x);
      background: var(--logo-teal);
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .services-inner{
      width: min(var(--section-inner-max), 100%);
      margin: 0 auto;
      text-align: left;
    }

    .services-layout{
      display: grid;
      grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(28px, 4vw, 58px);
      align-items: center;
    }

    .services-content{
      width: min(860px, 100%);
      margin-left: 0;
      justify-self: end;
    }

    .services-art-panel{
      max-width: 540px;
      width: 100%;
      position: relative;
    }

    .services-art-panel .about-shape--star{
      grid-column: 2;
      grid-row: 1;
      clip-path: none;
      border-radius: 999px;
      --stitch: rgba(35, 105, 163, 0.78);
    }

    .services-art-panel .about-shape--star::after{
      inset: 10px;
      clip-path: none;
      border: 2px dashed var(--stitch);
      border-radius: 999px;
    }

    .services-art-panel .about-shape--diamond::after{
      inset: 10px;
    }

    .services-art-panel.services-shape-stitch-on .about-shape::after{
      opacity: 0;
      visibility: hidden;
    }

    .services-shape-trail{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      overflow: visible;
    }

    .services-shape-trail .services-shape-trail-guide{
      fill: none;
      stroke: none;
    }

    .services-shape-trail .services-shape-trail-stitch{
      fill: none;
      stroke-width: 1.2px;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 9 11;
      filter: drop-shadow(0 0.5px 2px rgba(31, 79, 127, 0.12));
    }

    .about-shape--rect-tall .services-shape-trail-stitch{
      stroke: rgba(31, 79, 127, 0.88);
    }

    .about-shape--diamond .services-shape-trail-stitch{
      stroke: rgba(35, 105, 163, 0.88);
    }

    .services-art-panel .about-shape--star .services-shape-trail-stitch{
      stroke: rgba(35, 105, 163, 0.88);
    }

    .services-inner{
      position: relative;
      z-index: 1;
    }

    .services h2{
      margin: 0 0 10px;
      width: 100%;
      text-align: left;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight: 600;
      font-size: 50px;
      color: #FFFFFF;
      letter-spacing: 0.02em;
    }

    .services-intro{
      margin: 0;
      width: 100%;
      height: 32px;
      padding-bottom: 63px;
      text-align: left;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.92);
      font-size: clamp(1rem, 1.2vw, 1.06rem);
    }

    .services-grid{
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(12px, 1.8vw, 18px);
      max-width: 860px;
    }

    .service-card{
      background: #FFFFFF;
      border: 1px solid rgba(58, 47, 37, 0.10);
      border-radius: 30px;
      padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.4vw, 28px);
      transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
      text-align: left;
    }

    .service-card h3{
      margin: 0 0 8px;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight: 600;
      color: var(--ink);
      font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    }

    .service-card p{
      margin: 0;
      color: rgba(58, 47, 37, 0.78);
      line-height: 1.55;
      font-size: clamp(0.95rem, 1.1vw, 1rem);
    }

    .service-card:hover{
      border-color: rgba(58, 47, 37, 0.18);
      box-shadow: 0 16px 34px rgba(58, 47, 37, 0.10);
      transform: translateY(-2px);
    }

    /* Same as gallery: motifs may extend past the section via expanded SVG viewBox in JS. */
    .contact{
      position: relative;
      padding: clamp(42px, 7vh, 78px) var(--section-pad-x);
      background: #FFFFFF;
      box-sizing: border-box;
      overflow: visible;
    }

    .contact-bg-pattern{
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      overflow: visible;
    }

    .contact-inner{
      position: relative;
      z-index: 1;
      width: min(var(--section-inner-max), 100%);
      margin: 0 auto;
    }

    .contact-card{
      background: #FFFFFF;
      border-radius: 36px;
      border: 1px solid rgba(58, 47, 37, 0.10);
      box-shadow: 0 16px 36px rgba(58, 47, 37, 0.08);
      padding: clamp(28px, 4vw, 42px);
      box-sizing: border-box;
      display: grid;
      grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(28px, 4vw, 58px);
      align-items: center;
    }

    .contact-copy{
      padding-top: clamp(2px, 0.5vh, 8px);
    }

    .contact h1{
      margin: 0 0 clamp(32px, 4.5vh, 48px);
      font-family: "Merriweather", Georgia, "Times New Roman", Times, serif;
      font-weight: 800;
      font-size: clamp(1.9rem, 3.2vw, 2.9rem);
      color: var(--ink);
      line-height: 1.22;
    }

    .contact-intro{
      margin: 0;
      max-width: 38rem;
      line-height: 1.65;
      color: rgba(58, 47, 37, 0.82);
      font-size: clamp(1rem, 1.08vw, 1.07rem);
    }

    .contact-direct{
      margin-top: clamp(22px, 3.5vw, 30px);
      padding-top: clamp(20px, 3vw, 26px);
      border-top: 1px solid rgba(58, 47, 37, 0.10);
      max-width: 38rem;
    }

    .contact-direct__lead{
      margin: 0 0 14px;
      font-size: clamp(0.94rem, 1vw, 1.02rem);
      line-height: 1.55;
      color: rgba(58, 47, 37, 0.72);
    }

    .contact-direct__list{
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .contact-direct__row{
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      margin: 0 -12px;
      border-radius: 28px;
      text-decoration: none;
      color: inherit;
      transition: background 180ms ease, box-shadow 180ms ease;
    }

    .contact-direct__row:hover{
      background: rgba(0, 183, 176, 0.06);
      box-shadow: 0 0 0 1px rgba(0, 183, 176, 0.12);
    }

    .contact-direct__row:focus-visible{
      outline: 2px solid rgba(0, 183, 176, 0.45);
      outline-offset: 2px;
    }

    /* Match .site-nav__link:hover: teal fill, pill shape, white glyph strokes */
    .contact-direct__icon{
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(0, 183, 176, 0.35);
      background: var(--logo-teal);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 180ms ease, border-color 180ms ease;
    }

    .contact-direct__row:hover .contact-direct__icon{
      background: var(--logo-ocean);
      border-color: rgba(35, 105, 163, 0.5);
    }

    .contact-direct__icon svg{
      width: 20px;
      height: 20px;
    }

    .contact-direct__icon path,
    .contact-direct__icon rect,
    .contact-direct__icon line{
      fill: none;
      stroke: #FFFFFF;
      stroke-width: 1.65;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .contact-direct__body{
      display: grid;
      gap: 2px;
      min-width: 0;
      text-align: left;
    }

    .contact-direct__kind{
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(58, 47, 37, 0.48);
    }

    .contact-direct__value{
      font-size: clamp(1rem, 1.05vw, 1.06rem);
      font-weight: 600;
      color: var(--ink);
      letter-spacing: 0.01em;
      overflow-wrap: anywhere;
    }

    .contact-direct__row:hover .contact-direct__value{
      color: var(--logo-ocean);
    }

    .contact-form-panel{
      width: min(860px, 100%);
      max-width: 860px;
      justify-self: end;
      box-sizing: border-box;
    }

    .contact-form{
      display: grid;
      gap: clamp(14px, 2vw, 18px);
      margin: 0;
      width: 100%;
    }

    .contact-form label{
      display: grid;
      gap: 8px;
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--ink);
      width: 100%;
      text-align: left;
    }

    .contact-form input,
    .contact-form textarea{
      width: 100%;
      border: 1px solid rgba(58, 47, 37, 0.14);
      border-radius: 22px;
      padding: 14px 16px;
      font: inherit;
      font-weight: 400;
      color: var(--ink);
      background: rgba(58, 47, 37, 0.02);
      box-sizing: border-box;
      transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    .contact-form textarea{
      resize: vertical;
      min-height: 148px;
    }

    .contact-form input:hover,
    .contact-form textarea:hover{
      border-color: rgba(58, 47, 37, 0.22);
    }

    .contact-form input:focus-visible,
    .contact-form textarea:focus-visible{
      outline: none;
      border-color: rgba(0, 183, 176, 0.55);
      background: #FFFFFF;
      box-shadow: 0 0 0 3px rgba(0, 183, 176, 0.14);
    }

    .contact-form button{
      justify-self: start;
      margin-top: 4px;
      border: 1px solid rgba(0, 183, 176, 0.35);
      border-radius: 999px;
      padding: 12px 22px;
      font: inherit;
      font-weight: 600;
      color: #FFFFFF;
      background: var(--logo-teal);
      cursor: pointer;
      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .contact-form button:hover{
      transform: translateY(-1px);
      background: var(--logo-ocean);
      border-color: rgba(35, 105, 163, 0.5);
      box-shadow: 0 10px 24px rgba(35, 105, 163, 0.18);
    }

    .contact-form button:focus-visible{
      outline: 2px solid rgba(0, 183, 176, 0.5);
      outline-offset: 2px;
    }

    @media (max-width: 900px){
      .about{
        min-height: auto;
      }
      .about-inner{
        grid-template-columns: 1fr;
      }
      .about-divider{
        width: 100%;
        min-height: 26px;
      }
      .about-divider::before{
        left: 8%;
        right: 8%;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
        background-image: repeating-linear-gradient(
          to right,
          rgba(0, 183, 176, 0.32) 0 7px,
          rgba(0, 183, 176, 0) 7px 13px
        );
      }
      .about-art{
        max-width: 540px;
        margin: 8px auto 0;
        min-height: 280px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(96px, 1fr));
      }
      .about-shape--rect-tall{
        grid-column: 1;
        grid-row: 1 / span 2;
      }
      .about-shape--rect{
        grid-column: 2;
        grid-row: 1;
      }
      .about-shape--diamond{
        grid-column: 2;
        grid-row: 2;
      }
      .about-shape--circle{
        grid-column: 1;
        grid-row: 3;
      }
      .about-shape--star{
        grid-column: 1;
        grid-row: 2;
      }
      .about-image-box{
        max-width: min(540px, 100%);
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        margin: 8px auto 0;
      }
      .services-grid{
        max-width: 100%;
      }
      .services-layout{
        display: block;
      }
      .services-art-panel{
        display: none;
      }
      .contact-card{
        grid-template-columns: 1fr;
      }
      .contact-form-panel{
        justify-self: stretch;
        width: 100%;
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
      }
    }

    /* About card: shrink text + image */
    .about-copy h2{
      font-size: 40px;
    }

    .about-copy p{
      font-size: clamp(0.95rem, 0.95vw, 1.02rem);
    }

    .about-image-box{
      width: min(100%, 520px);
    }

    .about-inner{
      gap: clamp(24px, 4vw, 48px);
    }

    /* ===== Reviews (Google-card layout) ===== */
    .reviews{
      position: relative;
      background: var(--logo-mint);
      padding: clamp(72px, 10vh, 124px) var(--section-pad-x);
      box-sizing: border-box;
      overflow: hidden;
    }

    /* white arching shapes that make the top + bottom edges feel concave */
    .reviews-edge{
      position: absolute;
      left: 0;
      width: 100%;
      height: clamp(40px, 5vw, 72px);
      z-index: 0;
      display: block;
      pointer-events: none;
      fill: #FFFFFF;
    }

    .reviews-edge--top{ top: 0; }
    .reviews-edge--bottom{ bottom: 0; }

    .reviews-edge__dash{
      fill: none;
      stroke: #FFFFFF;
      stroke-width: 2;
      stroke-dasharray: 18 16;
      stroke-linecap: round;
    }

    .reviews-inner{
      position: relative;
      z-index: 1;
      max-width: 1300px;
      margin: 0 auto;
      box-sizing: border-box;
    }

    .reviews-list{
      position: relative;
      z-index: 1;
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(16px, 1.8vw, 28px);
      align-items: stretch;
    }

    .review{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      height: 100%;
      box-sizing: border-box;
      background: #FFFFFF;
      padding: clamp(16px, 1.2vw, 22px);
      border-radius: 18px;
      box-shadow: 0 0 24px rgba(31, 79, 127, 0.14);
    }

    .review-head{
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .review-google{
      display: inline-flex;
      align-items: center;
      gap: 9px;
      flex: 0 0 auto;
    }

    .review-google svg{
      display: block;
      width: 20px;
      height: 20px;
    }

    .review-stars{
      color: #F4B400;
      letter-spacing: 2px;
      font-size: 1rem;
    }

    .review-text{
      margin: 0;
      color: var(--body-color);
      line-height: var(--body-line);
      font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .review.is-expanded .review-text{
      display: block;
      overflow: visible;
    }

    .review-more{
      margin: 10px 0 0;
      padding: 0;
      border: 0;
      background: none;
      color: var(--logo-teal);
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    .review-more:hover{
      text-decoration: underline;
    }

    .review-person{
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
      padding-top: 18px;
    }

    .review-avatar{
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--logo-teal);
      color: #FFFFFF;
      font-weight: 700;
      font-size: 1.05rem;
    }

    .review-person__meta{
      display: flex;
      flex-direction: column;
      line-height: 1.25;
    }

    .review-author{
      font-weight: 700;
      color: var(--ink);
      font-size: 0.98rem;
    }

    .review-source{
      color: rgba(58, 47, 37, 0.72);
      font-size: 0.85rem;
    }

    @media (max-width: 980px){
      .reviews-list{ grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 540px){
      .reviews-list{ grid-template-columns: 1fr; }
    }

    /* ===== Process (3-step) ===== */
    .process{
      position: relative;
      background: #FFFFFF;
      color: var(--ink);
      padding: clamp(96px, 12vh, 160px) var(--section-pad-x) clamp(72px, 10vh, 128px);
      overflow: hidden;
    }

    .process-inner{
      position: relative;
      z-index: 1;
      max-width: var(--section-inner-max);
      margin: 0 auto;
    }

    .process-title{
      margin: 0 auto clamp(72px, 11vh, 120px);
      max-width: 24ch;
      text-align: center;
      color: var(--ink);
      font-weight: 800;
      font-size: clamp(1.9rem, 3.2vw, 2.9rem);
      line-height: 1.22;
    }

    .process-title{
      max-width: none;
    }

    /* ===== Process — map layout ===== */
    .process-map{ position: relative; }

    .process-arrow{
      position: absolute;
      z-index: 0;
      top: clamp(64px, 8vw, 108px);
      width: clamp(70px, 9vw, 140px);
      height: auto;
      color: var(--logo-teal);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .process-arrow--1{ left: 33.3%; }
    .process-arrow--2{ left: 66.6%; }

    .process-arrow__line{
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-dasharray: 6 9;
      stroke-linecap: round;
    }

    .process-arrow__head{
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .process-steps{
      position: relative;
      z-index: 1;
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(32px, 4vw, 64px);
      align-items: start;
    }

    .process-step{
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* Descending zigzag — middle step sits lower */
    .process-step:nth-child(2){ margin-top: clamp(70px, 12vh, 150px); }

    .process-node{
      position: relative;
      display: inline-flex;
      flex: 0 0 auto;
    }

    .process-node__ring{
      width: clamp(164px, 18vw, 236px);
      aspect-ratio: 1 / 1;
      border: 3px solid var(--logo-teal);
      border-radius: 50%;
      background: #FFFFFF;
      padding: clamp(5px, 0.7vw, 9px);
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 26px rgba(0, 183, 176, 0.18);
    }

    .process-node__ring img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }

    .process-node__num{
      position: absolute;
      top: clamp(2px, 1vw, 8px);
      right: clamp(2px, 1vw, 8px);
      width: clamp(32px, 3.4vw, 40px);
      height: clamp(32px, 3.4vw, 40px);
      border-radius: 50%;
      background: var(--logo-teal);
      color: #FFFFFF;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: clamp(0.9rem, 1.1vw, 1.05rem);
      box-shadow: 0 2px 8px rgba(0, 183, 176, 0.3);
    }

    .process-step__copy{ max-width: 38ch; margin-top: clamp(30px, 4.5vh, 52px); }

    .process-step__title{
      margin: 0 0 clamp(10px, 1.4vh, 14px);
      color: var(--ink);
      font-weight: 700;
      font-size: clamp(1.1rem, 1.3vw, 1.28rem);
      line-height: 1.3;
    }

    .process-step__text{
      margin: 0;
      max-width: 38ch;
      color: var(--body-color);
      font-size: var(--body);
      line-height: var(--body-line);
    }

    @media (max-width: 760px){
      .process-steps{ grid-template-columns: 1fr; gap: 40px; }
      .process-step:nth-child(2){ margin-top: 0; }
      .process-arrow{ display: none; }
    }

    /* ===== Features (alternating rows) ===== */
    .features{
      background: #FFFFFF;
      padding: clamp(72px, 11vh, 148px) var(--section-pad-x) clamp(96px, 15vh, 192px);
    }

    .feature-row{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: center;
      column-gap: clamp(32px, 6vw, 96px);
      max-width: var(--section-inner-max);
      margin: 0 auto;
    }

    .feature-row + .feature-row{
      margin-top: clamp(48px, 9vh, 120px);
    }

    /* Reverse row: image on the right, copy on the left */
    .feature-row--reverse .feature-media{ order: 2; }
    .feature-row--reverse .feature-copy{ order: 1; justify-content: flex-end; }

    .feature-media{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    .feature-frame{
      position: relative;
      display: block;
      width: 100%;
      max-width: clamp(320px, 42vw, 520px);
      aspect-ratio: 1 / 1;
    }

    .feature-frame img{
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 34px;
      overflow: hidden;
      box-shadow: 0 18px 44px rgba(58, 47, 37, 0.18);
    }

    /* offset dashed rounded-square behind the image (left + top peek out) */
    .feature-dash{
      position: absolute;
      top: -20.8px;
      left: -20.8px;
      width: 100%;
      height: 100%;
      overflow: visible;
      z-index: 0;
      pointer-events: none;
    }

    /* offset the dashed frame to the top-right instead (per-element) */
    .feature-media--offset-right .feature-dash{
      left: 20.8px;
    }

    .feature-dash rect{
      x: 1.5px;
      y: 1.5px;
      width: calc(100% - 3px);
      height: calc(100% - 3px);
      fill: none;
      stroke: rgba(0, 183, 176, 0.95);
      stroke-width: 2.2;
      stroke-dasharray: 12 14;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .feature-copy{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: clamp(8px, 2vw, 24px) 0;
    }

    .feature-copy__inner{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 34rem;
    }

    .feature-mark{
      display: block;
      width: clamp(44px, 4vw, 58px);
      height: auto;
      margin: 0 0 clamp(14px, 2vh, 22px);
      color: var(--logo-teal);
    }

    /* Sewing machine — mirrored to face right, slightly larger */
    .feature-mark--machine{
      width: clamp(54px, 4.8vw, 70px);
      transform: scaleX(-1);
    }

    .feature-title{
      margin: 0 0 14px;
      font-weight: 800;
      font-size: clamp(1.9rem, 3.2vw, 2.9rem);
      line-height: 1.22;
      color: var(--ink);
    }

    .feature-text{
      margin: 0 0 24px;
      color: var(--body-color);
      font-size: var(--body);
      line-height: var(--body-line);
    }

    @media (max-width: 880px){
      .feature-row{
        grid-template-columns: 1fr;
        row-gap: clamp(22px, 5vw, 38px);
        justify-items: center;
      }
      /* Stack with the image on top, regardless of row direction */
      .feature-row--reverse .feature-media{ order: 0; }
      .feature-row--reverse .feature-copy{ order: 0; justify-content: center; }
      .feature-row + .feature-row{ margin-top: clamp(48px, 9vw, 80px); }
      .feature-copy{ justify-content: center; }
      .feature-copy__inner{ align-items: center; text-align: center; }
      .feature-frame{ max-width: clamp(280px, 72vw, 440px); }
    }

    /* ===== Value + arch project row ===== */
    .value{
      position: relative;
      background: #FFFFFF;
      padding: clamp(156px, 17vh, 208px) 0 clamp(44px, 6vh, 80px);
      overflow: hidden;
    }

    .value-topedge{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      display: block;
      pointer-events: none;
      z-index: 0;
    }

    .value-topedge__fill{
      fill: var(--logo-mint);
    }

    .value-topedge__fill2{
      fill: var(--logo-navy);
    }

    .value-topedge__dash{
      stroke: #FFFFFF;
      stroke-width: 2;
      stroke-dasharray: 18 16;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .value-head{
      position: relative;
      z-index: 1;
      max-width: 940px;
      margin: 0 auto;
      padding: 0 var(--section-pad-x) clamp(30px, 4.5vh, 52px);
      text-align: center;
    }

    .value-mark{
      display: block;
      width: clamp(52px, 5vw, 68px);
      height: auto;
      margin: 0 auto clamp(20px, 3vh, 34px);
      color: var(--logo-teal);
    }

    .value-title{
      margin: 0 auto 18px;
      max-width: none;
      font-weight: 800;
      font-size: clamp(1.9rem, 3.2vw, 2.9rem);
      line-height: 1.22;
      color: var(--ink);
    }

    .value-lead{
      margin: 0 auto 14px;
      max-width: 92ch;
      color: var(--body-color);
      font-size: var(--body);
      line-height: var(--body-line);
    }

    .value-lead:last-child{
      margin-bottom: 0;
    }

    .value-underline{
      color: inherit;
      font-weight: inherit;
      text-decoration: none;
    }

    .arch-row{
      list-style: none;
      margin: clamp(32px, 5vh, 60px) auto clamp(16px, 3vh, 36px);
      max-width: var(--section-inner-max);
      padding: 0 var(--section-pad-x);
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(22px, 3.2vw, 48px);
      align-items: end;
    }

    .arch-card{
      display: flex;
      flex-direction: column;
      border-radius: 28px;
      overflow: hidden;
      background: #FFFFFF;
      box-shadow: 0 10px 26px rgba(58, 47, 37, 0.12);
    }

    .arch-card__media{
      position: relative;
      aspect-ratio: 8 / 9;
      overflow: hidden;
      background: #FFFFFF;
    }

    .arch-card__media img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .arch-card__label{
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 8px;
      background: #FFFFFF;
      font-family: "Caveat", cursive;
      font-weight: 600;
      font-size: clamp(1.2rem, 1.7vw, 1.7rem);
      line-height: 1;
    }

    .arch-card__text{
      color: var(--ink);
      transform: rotate(-2.5deg);
      padding-bottom: 7px;
      background-image: repeating-linear-gradient(to right, var(--logo-teal) 0 8px, transparent 8px 14px);
      background-repeat: no-repeat;
      background-position: left 100%;
      background-size: 100% 2px;
    }

    .value-cta{
      position: relative;
      z-index: 1;
      margin-top: clamp(56px, 7.5vh, 96px);
      text-align: center;
    }

    .value-arch{
      position: absolute;
      top: clamp(14px, 3vh, 34px);
      right: clamp(10px, 3vw, 56px);
      width: clamp(90px, 11vw, 150px);
      height: auto;
      color: rgba(58, 47, 37, 0.18);
      z-index: 0;
    }

    @media (max-width: 900px){
      .arch-row{
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(14px, 3vw, 24px);
      }
    }

    /* ===== FAQ ===== */
    .faq{
      position: relative;
      background: #FFFFFF;
      padding: clamp(48px, 8vh, 96px) var(--section-pad-x) clamp(220px, 30vh, 320px);
      overflow: hidden;
    }

    .faq-inner{
      position: relative;
      z-index: 1;
      max-width: 820px;
      margin: 0 auto;
    }

    .faq-botedge{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      display: block;
      pointer-events: none;
      z-index: 0;
    }

    .faq-botedge__fill{ fill: var(--logo-mint); }
    .faq-botedge__fill2{ fill: var(--logo-navy); }

    .faq-botedge__dash{
      stroke: #FFFFFF;
      stroke-width: 2;
      stroke-dasharray: 18 16;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .faq-title{
      margin: 0 0 clamp(44px, 7vh, 72px);
      text-align: center;
      font-weight: 800;
      font-size: clamp(1.9rem, 3.2vw, 2.9rem);
      line-height: 1.22;
      color: var(--ink);
    }

    .faq-list{
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .faq-item{
      border: 1px solid rgba(58, 47, 37, 0.14);
      border-radius: 28px;
      background: #FFFFFF;
    }

    .faq-q{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      list-style: none;
      cursor: pointer;
      padding: clamp(15px, 2vh, 22px) clamp(18px, 2.5vw, 26px);
      font-family: "Merriweather", Georgia, "Times New Roman", Times, serif;
      font-weight: 700;
      font-size: clamp(1rem, 1.4vw, 1.18rem);
      color: var(--ink);
    }

    .faq-q::-webkit-details-marker{ display: none; }

    .faq-icon{
      position: relative;
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
    }

    .faq-icon::before,
    .faq-icon::after{
      content: "";
      position: absolute;
      background: var(--logo-teal);
      border-radius: 2px;
    }

    .faq-icon::before{
      top: 8px;
      left: 0;
      width: 18px;
      height: 2.5px;
    }

    .faq-icon::after{
      left: 8px;
      top: 0;
      width: 2.5px;
      height: 18px;
      transition: transform 200ms ease;
    }

    .faq-item[open] .faq-icon::after{
      transform: scaleY(0);
    }

    .faq-a{
      padding: 0 clamp(18px, 2.5vw, 26px) clamp(18px, 2.5vh, 24px);
      color: var(--body-color);
      line-height: var(--body-line);
      font-size: var(--body);
    }

    /* ===== Footer ===== */
    .site-footer{
      position: relative;
      background: var(--logo-navy);
      color: #FFFFFF;
    }

    .site-footer__inner{
      max-width: var(--section-inner-max);
      margin: 0 auto;
      padding: clamp(56px, 8vh, 96px) var(--section-pad-x) clamp(40px, 6vh, 64px);
      display: grid;
      grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
      align-items: start;
      gap: clamp(36px, 5vw, 80px);
    }

    .site-footer__brand img{
      height: 50px;
      width: auto;
      filter: brightness(0) invert(1);
    }

    .site-footer__tagline{
      margin: 18px 0 0;
      max-width: 36ch;
      color: rgba(255, 255, 255, 0.75);
      font-size: var(--body);
      line-height: var(--body-line);
    }

    .site-footer__col-title{
      margin: 0 0 18px;
      color: rgba(255, 255, 255, 0.72);
      font-family: "Source Sans Pro", system-ui, sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .site-footer__nav{
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    .site-footer__nav a{
      position: relative;
      width: fit-content;
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      font-size: var(--body);
      transition: color 160ms ease;
    }

    .site-footer__nav a::after{
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 100%;
      height: 2px;
      background: var(--logo-mint);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 200ms ease;
    }

    .site-footer__nav a:hover{
      color: #FFFFFF;
    }

    .site-footer__nav a:hover::after{
      transform: scaleX(1);
    }

    .site-footer__bar{
      border-top: 1px solid rgba(255, 255, 255, 0.14);
      padding: 20px var(--section-pad-x);
      max-width: var(--section-inner-max);
      margin: 0 auto;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px 28px;
      flex-wrap: wrap;
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.82rem;
    }

    @media (max-width: 760px){
      .site-footer__inner{
        grid-template-columns: 1fr;
        gap: clamp(32px, 6vh, 44px);
      }
    }

    /* ===== Resources page ===== */
    .resources{
      background: #FFFFFF;
      padding: clamp(56px, 9vh, 112px) var(--section-pad-x) clamp(72px, 11vh, 140px);
    }

    .resources-head{
      max-width: 760px;
      margin: 0 auto clamp(40px, 6vh, 72px);
      text-align: center;
    }

    .resources-title{
      margin: 0 0 clamp(14px, 2vh, 22px);
      font-family: "Merriweather", Georgia, "Times New Roman", Times, serif;
      font-weight: 900;
      font-size: clamp(1.9rem, 3.2vw, 2.9rem);
      line-height: 1.22;
      letter-spacing: -0.011em;
      color: var(--ink);
    }

    .resources-intro{
      margin: 0 auto;
      max-width: 60ch;
      color: var(--body-color);
      font-size: clamp(1rem, 1.2vw, 1.12rem);
      line-height: var(--body-line);
    }

    .resources-grid{
      list-style: none;
      margin: 0 auto;
      padding: 0;
      max-width: var(--section-inner-max);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px, 3vw, 40px);
    }

    .resource-card{
      display: flex;
      background: #FFFFFF;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(58, 47, 37, 0.08);
      box-shadow: 0 12px 30px rgba(58, 47, 37, 0.08);
      transition: transform 200ms ease, box-shadow 200ms ease;
    }

    .resource-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 20px 44px rgba(58, 47, 37, 0.14);
    }

    .resource-card__link{
      display: flex;
      flex-direction: column;
      width: 100%;
      text-decoration: none;
      color: inherit;
    }

    .resource-card__media{
      position: relative;
      aspect-ratio: 3 / 2;
      overflow: hidden;
      background: var(--logo-mint);
    }

    .resource-card__media img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 300ms ease;
    }

    .resource-card:hover .resource-card__media img{
      transform: scale(1.05);
    }

    .resource-card__body{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1;
      padding: clamp(20px, 2.2vw, 28px);
    }

    .resource-card__tag{
      margin-bottom: 12px;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(0, 183, 176, 0.12);
      color: #008f89;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .resource-card__title{
      margin: 0 0 10px;
      font-weight: 800;
      font-size: clamp(1.2rem, 1.5vw, 1.4rem);
      line-height: 1.25;
      color: var(--ink);
    }

    .resource-card__excerpt{
      margin: 0 0 18px;
      color: var(--body-color);
      font-size: var(--body);
      line-height: var(--body-line);
    }

    .resource-card__more{
      margin-top: auto;
      color: var(--logo-teal);
      font-weight: 700;
      font-size: 0.92rem;
    }

    .resource-card__more::after{
      content: " →";
      transition: margin-left 180ms ease;
    }

    .resource-card:hover .resource-card__more::after{
      margin-left: 4px;
    }

    @media (max-width: 900px){
      .resources-grid{ grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 560px){
      .resources-grid{ grid-template-columns: 1fr; }
    }

    /* ===== Resource post (article) ===== */
    .post{
      background: #FFFFFF;
      padding: clamp(40px, 6vh, 72px) var(--section-pad-x) clamp(64px, 10vh, 120px);
    }

    .post-head{
      max-width: 760px;
      margin: 0 auto;
    }

    .post-back{
      display: inline-block;
      margin-bottom: clamp(20px, 3vh, 32px);
      color: var(--logo-teal);
      font-weight: 700;
      font-size: 0.92rem;
      text-decoration: none;
    }

    .post-back:hover{ text-decoration: underline; }

    .post-tag{
      display: inline-block;
      margin-bottom: 14px;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(0, 183, 176, 0.12);
      color: #008f89;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .post-title{
      margin: 0;
      font-family: "Merriweather", Georgia, "Times New Roman", Times, serif;
      font-weight: 900;
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.22;
      letter-spacing: -0.011em;
      color: var(--ink);
    }

    .post-hero{
      max-width: 1000px;
      margin: clamp(28px, 4.5vh, 52px) auto;
    }

    .post-hero img{
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 24px;
      box-shadow: 0 16px 40px rgba(58, 47, 37, 0.14);
    }

    .post-body{
      max-width: 720px;
      margin: 0 auto;
    }

    .post-section{
      margin-bottom: clamp(22px, 3.5vh, 36px);
    }

    .post-section__title{
      margin: 0 0 12px;
      font-weight: 800;
      font-size: clamp(1.4rem, 2.2vw, 1.8rem);
      line-height: 1.25;
      color: var(--ink);
    }

    .post-section__text{
      margin: 0 0 14px;
      color: var(--body-color);
      font-size: clamp(1.02rem, 1.2vw, 1.14rem);
      line-height: 1.75;
    }

    .post-section__text:last-child{ margin-bottom: 0; }

    .post-cta{
      margin-top: clamp(40px, 6vh, 64px);
      padding: clamp(28px, 4vw, 44px);
      border-radius: 24px;
      background: var(--logo-mint);
      text-align: center;
    }

    .post-cta__lead{
      margin: 0 0 18px;
      font-family: "Merriweather", Georgia, serif;
      font-weight: 700;
      font-size: clamp(1.15rem, 1.8vw, 1.5rem);
      color: var(--ink);
    }

    .post-cta__btn{
      display: inline-flex;
      align-items: center;
      padding: 14px 34px;
      border-radius: 22px;
      background: var(--logo-navy);
      color: #FFFFFF;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.02em;
      box-shadow: 0 8px 20px rgba(31, 79, 127, 0.25);
      transition: transform 180ms ease, background 180ms ease;
    }

    .post-cta__btn:hover{
      transform: scale(1.04);
      background: #173f66;
    }

    @media (max-width: 560px){
      .site-footer__bar{
        justify-content: center;
        text-align: center;
      }
    }

    /* ===== Separator band (diagonal) ===== */
    .separator{
      position: relative;
      background: #FFFFFF;
      height: clamp(135px, 18vh, 210px);
      overflow: hidden;
    }

    .separator-band{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .separator-band__fill{
      fill: var(--logo-mint);
    }

    .separator-band__dash{
      stroke: #FFFFFF;
      stroke-width: 2;
      stroke-dasharray: 18 16;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .separator-btn{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(-1.5deg);
      z-index: 1;
      display: inline-flex;
      align-items: center;
      padding: 13px 34px;
      border-radius: 20px;
      background: var(--logo-navy);
      color: #FFFFFF;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.02em;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      transition: transform 180ms ease, background 180ms ease;
    }

    .separator-btn:hover{
      background: #173f66;
      transform: translate(-50%, -50%) rotate(-1.5deg) scale(1.04);
    }

    .separator-btn:focus-visible{
      outline: 2px solid #FFFFFF;
      outline-offset: 2px;
    }

    /* Flipped band (top-left → bottom-right): tilt the button the other way */
    .separator--flip .separator-btn{
      transform: translate(-50%, -50%) rotate(1.5deg);
    }

    .separator--flip .separator-btn:hover{
      transform: translate(-50%, -50%) rotate(1.5deg) scale(1.04);
    }

    /* Unify CTA button sizing — same size + slightly larger text (excludes nav) */
    .hero-cta,
    .separator-btn{
      font-size: 1rem;
      padding: 15px 38px;
      border-radius: 22px;
    }

    /* Banner CTA — handwritten (Caveat) white text, no underline */
    .separator-btn{
      font-family: "Caveat", cursive;
      font-weight: 600;
      font-size: 1.55rem;
      letter-spacing: 0.01em;
      color: #FFFFFF;
    }

    /* White right-arrow that slides in on hover for all CTAs */
    .site-nav__cta::after,
    .hero-cta::after,
    .separator-btn::after{
      content: "→";
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
      max-width: 0;
      margin-left: 0;
      opacity: 0;
      transform: translateX(-6px);
      color: #FFFFFF;
      font-family: "Source Sans Pro", system-ui, sans-serif;
      font-weight: 700;
      line-height: 1;
      transition: max-width 220ms ease, margin-left 220ms ease, opacity 220ms ease, transform 220ms ease;
    }

    .site-nav__cta:hover::after,
    .hero-cta:hover::after,
    .separator-btn:hover::after{
      max-width: 1.4em;
      margin-left: 8px;
      opacity: 1;
      transform: translateX(0);
    }

    @media (prefers-reduced-motion: reduce){
      .site-nav__cta::after,
      .hero-cta::after,
      .separator-btn::after{
        transition: none;
      }
    }

    /* ===== Contact ===== */
    .contact{
      position: relative;
      background: var(--logo-mint);
      padding: clamp(56px, 8vh, 100px) var(--section-pad-x) clamp(112px, 16vh, 200px);
      box-sizing: border-box;
      overflow: hidden;
    }

    .contact-inner{
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
    }

    .contact-dash{
      position: absolute;
      left: 0;
      bottom: clamp(12px, 2vh, 24px);
      z-index: 0;
      width: 100%;
      height: 4px;
      display: block;
      pointer-events: none;
    }

    .contact-dash line{
      stroke: #FFFFFF;
      stroke-width: 2;
      stroke-dasharray: 18 16;
      stroke-linecap: round;
    }

    .contact-card{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(28px, 5vw, 72px);
      align-items: center;
      background: #FFFFFF;
      border-radius: 28px;
      padding: clamp(28px, 4vw, 56px);
      box-shadow: 0 30px 70px rgba(31, 79, 127, 0.28);
    }

    .contact-title{
      margin: 0 0 12px;
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.05;
      color: var(--ink);
    }

    .contact-points{
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .contact-points li{
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--body-color);
      font-size: var(--body);
      font-weight: 600;
    }

    .contact-tick{
      flex: 0 0 auto;
      width: 26px;
      height: 26px;
      padding: 4px;
      box-sizing: border-box;
      border: 2px solid var(--logo-teal);
      border-radius: 50%;
      color: var(--logo-teal);
    }

    .contact-form-heading{
      width: fit-content;
      margin: 0 auto clamp(36px, 5.5vh, 56px);
      font-family: "Caveat", cursive;
      font-size: clamp(1.7rem, 2.8vw, 2.3rem);
      color: var(--ink);
      transform: rotate(-1.5deg);
      padding-bottom: 6px;
      background-image: repeating-linear-gradient(to right, var(--logo-teal) 0 16px, transparent 16px 23px);
      background-repeat: no-repeat;
      background-position: left 100%;
      background-size: 100% 3px;
    }

    .contact-form{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .contact-form__row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .contact-form input,
    .contact-form textarea{
      width: 100%;
      box-sizing: border-box;
      font: inherit;
      font-size: var(--body);
      color: var(--ink);
      background: #F4F3F1;
      border: 1px solid rgba(58, 47, 37, 0.12);
      border-radius: 14px;
      padding: 14px 16px;
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .contact-form textarea{
      resize: vertical;
      min-height: 120px;
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder{
      color: rgba(58, 47, 37, 0.5);
    }

    .contact-form input:focus,
    .contact-form textarea:focus{
      outline: none;
      border-color: var(--logo-teal);
      box-shadow: 0 0 0 3px rgba(0, 183, 176, 0.22);
    }

    .contact-submit{
      margin-top: 4px;
      width: 100%;
      padding: 15px 24px;
      border: 0;
      border-radius: 16px;
      background: var(--logo-navy);
      color: #FFFFFF;
      font: inherit;
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(31, 79, 127, 0.3);
      transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .contact-submit:hover{
      transform: scale(1.02);
      background: #173f66;
      box-shadow: 0 10px 22px rgba(31, 79, 127, 0.4);
    }

    @media (max-width: 760px){
      .contact-card{ grid-template-columns: 1fr; }
    }

    @media (max-width: 560px){
      .contact-form__row{ grid-template-columns: 1fr; }
    }

    /* ===== Mobile refinements (phones) ===== */
    @media (max-width: 640px){
      /* Slimmer fixed nav — body padding, scroll offset, and hero height all
         follow this var automatically */
      :root{
        --nav-h: 68px;
      }

      .site-nav__brand img{
        height: 38px;
      }

      .site-nav.is-scrolled .site-nav__brand img{
        height: 34px;
      }

      .site-nav__cta{
        padding: 11px 22px;
        font-size: 0.88rem;
      }

      /* Trim the desktop-scale vertical rhythm down to phone proportions */
      .value{
        padding-top: clamp(140px, 20vh, 180px);
      }

      .reviews{
        padding-top: 56px;
        padding-bottom: 56px;
      }

      .process{
        padding-top: 56px;
        padding-bottom: 56px;
      }

      .process-title{
        margin-bottom: 44px;
      }

      .features{
        padding-top: 56px;
        padding-bottom: 72px;
      }

      .faq{
        padding-bottom: clamp(150px, 20vh, 190px);
      }

      .contact{
        padding-top: 48px;
        padding-bottom: 88px;
      }

      .contact-card{
        padding: 26px 20px;
      }

      .post-hero img{
        border-radius: 16px;
      }
    }

    /* ===== Thank-you page ===== */
    .thanks{
      background: #FFFFFF;
      padding: clamp(72px, 14vh, 160px) var(--section-pad-x) clamp(80px, 16vh, 180px);
    }

    .thanks-inner{
      max-width: 620px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .thanks-tick{
      width: clamp(60px, 8vw, 84px);
      height: auto;
      margin-bottom: clamp(20px, 3vh, 30px);
      color: var(--logo-teal);
    }

    .thanks-title{
      margin: 0 0 16px;
      font-weight: 800;
      font-size: clamp(1.9rem, 3.4vw, 2.8rem);
      line-height: 1.22;
      color: var(--ink);
    }

    .thanks-text{
      margin: 0 0 clamp(28px, 4vh, 40px);
      max-width: 48ch;
      color: var(--body-color);
      font-size: clamp(1.02rem, 1.2vw, 1.14rem);
      line-height: 1.7;
    }

    .thanks-btn{
      display: inline-flex;
      align-items: center;
      padding: 14px 34px;
      border-radius: 22px;
      background: var(--logo-navy);
      color: #FFFFFF;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.02em;
      box-shadow: 0 8px 20px rgba(31, 79, 127, 0.25);
      transition: transform 180ms ease, background 180ms ease;
    }

    .thanks-btn:hover{
      transform: scale(1.04);
      background: #173f66;
    }

    /* All CTA buttons are pill-shaped */
    .site-nav__cta,
    .hero-cta,
    .separator-btn,
    .post-cta__btn,
    .contact-submit,
    .thanks-btn{
      border-radius: 999px;
    }