@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Karla:wght@400;500;600;700&display=swap");

@layer tokens {
  :root {
    --color-bg: #fbf6ef;
    --color-bg-alt: #f0e5d6;
    --color-text: #3a2f2a;
    --color-text-muted: #74665d;
    --color-heading: #2b211d;
    --color-primary: #8b4e3a;
    --color-accent: #d8b26e;
    --color-line: rgba(139, 78, 58, 0.18);
    --color-link: var(--color-primary);

    --color-sage: #6f7f58;
    --color-sage-deep: #4f5f3e;
    --color-sage-soft: color-mix(in srgb, var(--color-sage) 16%, transparent);
    --color-clay-soft: color-mix(in srgb, var(--color-primary) 12%, white);
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 82%, black);
    --color-primary-subtle: color-mix(in srgb, var(--color-primary) 10%, white);
    --color-primary-border: color-mix(in srgb, var(--color-primary) 22%, transparent);
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 24%, white);
    --color-bg-dark: #2b211d;
    --color-bg-wash: #fffaf3;

    --font-body: "Karla", system-ui, sans-serif;
    --font-heading: "Cormorant Garamond", Georgia, serif;
    --font-size-base: 1rem;
    --line-height-body: 1.72;
    --line-height-heading: 1.05;

    --space-xs: clamp(0.45rem, 0.7vw, 0.65rem);
    --space-sm: clamp(0.85rem, 1vw, 1.1rem);
    --space-md: clamp(1.25rem, 1.9vw, 1.8rem);
    --space-lg: clamp(2.2rem, 4vw, 3.7rem);
    --space-xl: clamp(4rem, 8vw, 7rem);
    --space-2xl: clamp(5.5rem, 11vw, 9.5rem);

    --radius-sm: 0.65rem;
    --radius-md: 1.15rem;
    --radius-lg: 2rem;
    --radius-full: 9999px;

    --shadow-sm: 0 10px 28px rgba(58, 47, 42, 0.08);
    --shadow-md: 0 20px 55px rgba(58, 47, 42, 0.12);
    --shadow-lg: 0 30px 90px rgba(58, 47, 42, 0.18);

    --container-max-width: 1180px;
    --container-padding: clamp(0.5rem, 1rem, 1rem)
  }
}

@layer theme {
  html {
    overflow-x: clip;
    scroll-behavior: smooth;
    background: var(--color-bg);
  }

  body {
    overflow-x: clip;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
    background:
      radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 24rem),
      radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--color-sage) 13%, transparent), transparent 22rem),
      var(--color-bg);
    text-rendering: optimizeLegibility;
  }

  main {
    min-height: 60vh;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: var(--line-height-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: clamp(2.45rem, 5vw, 2.6rem);
  }

  h3 {
    font-size: clamp(1.55rem, 2.8vw, 1.7rem);
  }

  p {
  }

  a {
    color: var(--color-link);
    text-decoration: none;
    text-underline-offset: 0.18em;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);

    &:hover {
      color: var(--color-primary-hover);
    }
  }

  ::selection {
    color: var(--color-bg-wash);
    background: var(--color-primary);
  }

  :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-accent) 64%, white);
    outline-offset: 4px;
  }

  .section,
  .page-section {
    padding-block: var(--space-xl);
  }

  .section-alt,
  .section-sand {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--color-bg-alt) 88%, white), var(--color-bg-alt));
  }

  .section-dark {
    color: color-mix(in srgb, var(--color-bg) 86%, white);
    background:
      radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 24rem),
      var(--color-bg-dark);

    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
      color: var(--color-bg-wash);
    }

    & a {
      color: var(--color-accent);

      &:hover {
        color: color-mix(in srgb, var(--color-accent) 70%, white);
      }
    }
  }

  .section-header {
    max-width: 780px;
    margin: 0 auto var(--space-lg);
    text-align: center;

    & h1,
    & h2 {
      margin-bottom: var(--space-sm);
    }
  }

  .section-subheading,
  .lead,
  .page-lead {
    font-size: clamp(1.08rem, 2vw, 1.35rem);
    line-height: 1.75;
    color: var(--color-text-muted);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: var(--space-sm);
    font-family: var(--font-body);
    font-size: clamp(0.68rem, 1vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-primary);

    &::before {
      content: "";
      display: inline-block;
      width: 2.3rem;
      height: 1px;
      background: currentColor;
    }
  }

  .button-primary,
  .button-secondary,
  .button-quiet,
  .nav-cta,
  .hero-cta,
  .form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.9rem;
    padding: 0.82rem 1.35rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
  }

  .button-primary,
  .hero-cta,
  .form-submit {
    border: 1px solid var(--color-primary);
    color: var(--color-bg-wash);
    background: var(--color-primary);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--color-primary) 24%, transparent);

    &:hover {
      color: var(--color-bg-wash);
      background: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
      transform: translateY(-2px);
    }
  }

  .button-secondary,
  .button-quiet {
    color: var(--color-primary);
    border: 1px solid var(--color-primary-border);
    background: color-mix(in srgb, var(--color-bg) 72%, transparent);

    &:hover {
      color: var(--color-heading);
      border-color: var(--color-primary);
      background: var(--color-primary-subtle);
      transform: translateY(-2px);
    }
  }

  .disclaimer-note,
  .payment-note,
  .updates-note {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-bg-wash) 78%, transparent);
        margin-top: var(--space-md);
  }
}

@layer components {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-block: 0.75rem;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-line) 40%, transparent);
    backdrop-filter: blur(14px);
    transition: padding var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);

    &.is-scrolled {
      padding-block: 0.35rem;
      background: color-mix(in srgb, var(--color-bg) 96%, transparent);
      border-color: var(--color-line);
      box-shadow: var(--shadow-sm);
    }

    & .container,
    & .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-md);
    }
  }

  .brand-link,
  .site-logo,
  .header-logo {
    display: inline-flex;
    gap: 0;
    color: var(--color-heading);
    flex-direction: column;
    align-items: flex-start;


    
    &:hover {
      color: var(--color-heading);
    }
  }

  .brand-mark,
  .logo-img,
  .site-logo img {
    width: clamp(4.2rem, 8vw, 6.8rem);
    height: auto;
    object-fit: contain;
    transition: width var(--transition-base), transform var(--transition-base);

    .site-header.is-scrolled & {
      width: clamp(4.5rem, 6vw, 5.2rem);
    }
  }

  .brand-text,
  .site-logo {
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 2.5vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.95;
  }

  .brand-subtitle,
  .site-tagline {
    display: block;
    margin-top: 0.28rem;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .site-nav,
  .header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .nav-links,
  .mobile-nav-links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-link,
  .nav-links a,
  .mobile-nav-links a {
    display: block;
    padding: 0.6rem 0.72rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text);

    &:hover,
    &.is-active,
    &.active,
    &[aria-current="page"] {
      color: var(--color-primary);
      background: var(--color-primary-subtle);
    }
  }

  .nav-cta {
    color: var(--color-bg-wash);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    white-space: nowrap;

    &:hover {
      color: var(--color-bg-wash);
      background: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
      transform: translateY(-2px);
    }
  }

  .nav-toggle,
  .mobile-toggle,
  .nav-close,
  .mobile-nav-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    color: var(--color-heading);
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    cursor: pointer;
  }

  .nav-toggle {
    flex-direction: column;
    gap: 0.28rem;
  }

  .nav-toggle-bar {
    display: block;
    width: 1.15rem;
    height: 2px;
    border-radius: var(--radius-full);
    background: currentColor;
    transition: transform var(--transition-base), opacity var(--transition-base);
  }

  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-md);
    background:
      radial-gradient(circle at 90% 4%, var(--color-accent-soft), transparent 18rem),
      var(--color-bg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-base), visibility var(--transition-base);

    &.is-open {
      transform: translateX(0);
      visibility: visible;
    }
  }

  @media (max-width: 991px) {
    .site-header .site-nav,
    .header-nav {
      position: fixed;
      inset: 0;
      z-index: 1001;
      display: none;
      width: 100vw;
      min-height: 100vh;
      min-height: 100dvh;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: var(--space-md);
      padding: var(--space-lg) var(--container-padding);
      background: var(--color-bg);
      visibility: hidden;
      opacity: 0;
      transition: opacity var(--transition-base), visibility var(--transition-base);

      &.is-open {
        display: flex;
        visibility: visible;
        opacity: 1;
      }
    }

    .nav-toggle,
    .mobile-toggle,
    .nav-close,
    .mobile-nav-close {
      display: inline-flex;
    }

    .nav-close {
      align-self: flex-end;
      font-size: 1.75rem;
    }

    .nav-links,
    .mobile-nav-links {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      width: 100%;
    }

    .nav-link,
    .nav-links a,
    .mobile-nav-links a {
      padding: 1rem 0;
      border-radius: 0;
      border-bottom: 1px solid var(--color-line);
      font-size: 0.9rem;
    }

    .nav-cta {
      width: 100%;
    }
  }

  .site-footer {
    padding-block: var(--space-lg) var(--space-lg);
    color: color-mix(in srgb, var(--color-bg) 78%, white);
    background:
      radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--color-primary) 34%, transparent), transparent 22rem),
      radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--color-sage) 18%, transparent), transparent 20rem),
      var(--color-bg-dark);

    & a {
      color: color-mix(in srgb, var(--color-bg) 82%, white);

      &:hover {
        color: var(--color-accent);
      }
    }

    & h4 {
      margin-bottom: var(--space-sm);
      font-family: var(--font-body);
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-accent);
    }

    & ul {
      display: grid;
      gap: 0.55rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    & address {
      font-style: normal;
    }
  }

  .footer-disclaimer {
    max-width: 860px;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 13%, transparent);

    & p {
      max-width: 760px;
      margin: 0;
      color: color-mix(in srgb, var(--color-bg) 62%, white);
      font-size: 0.92rem;
      line-height: 1.6;
    }
  }

  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .footer-brand p {
    margin-top: var(--space-sm);
    color: color-mix(in srgb, var(--color-bg) 66%, white);
  }

  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;

    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.65rem;
      height: 2.65rem;
      border: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
      border-radius: var(--radius-full);
      background: color-mix(in srgb, var(--color-bg) 8%, transparent);

      &:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
        transform: translateY(-2px);
      }
    }
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--color-bg) 13%, transparent);
    color: color-mix(in srgb, var(--color-bg) 55%, white);
    font-size: 0.92rem;
  }

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

    .footer-brand {
      grid-column: 1 / -1;
    }
  }

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

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

  .hero,
  .hero-section {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-lg) var(--space-xl);
    background:
      linear-gradient(115deg, color-mix(in srgb, var(--color-bg) 82%, white), color-mix(in srgb, var(--color-bg-alt) 54%, white)),
      var(--color-bg);

    &::before {
      content: "";
      position: absolute;
      inset: auto -8rem -14rem auto;
      width: 34rem;
      height: 34rem;
      border-radius: 50%;
      background: color-mix(in srgb, var(--color-primary) 10%, transparent);
      pointer-events: none;
    }
  }

  .hero-inner,
  .hero .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    align-items: center;
    gap: var(--space-xl);
  }

  .hero-content {
    max-width: 720px;
  }

  .hero-program,
  .program-line {
    display: block;
    margin-bottom: var(--space-xs);
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-sage-deep);
  }

  .hero-title {
    margin-bottom: var(--space-md);
    font-size: clamp(3rem, 9.5vw, 3.5rem);
  }

  .hero-body,
  .hero-lede {
    margin-bottom: var(--space-md);
    font-size: clamp(1.1rem, 2vw, 1.34rem);
    color: var(--color-text-muted);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
  }

  .hero-location {
    margin-top: var(--space-md);
    font-size: 0.95rem;
    color: var(--color-text-muted);
  }

  .hero-media,
  .hero-image {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: 1.2rem -1.2rem -1.2rem 1.2rem;
      z-index: 0;
      border: 1px solid var(--color-primary-border);
      border-radius: var(--radius-lg);
    }

    & img {
      position: relative;
      z-index: 1;
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }
  }

  @media (max-width: 840px) {
    .hero-inner,
    .hero .container {
      grid-template-columns: 1fr;
    }

    .hero-media,
    .hero-image {
      max-width: 560px;
    }
  }

  .split-section,
  .story-section,
  .about-section {
    padding-block: var(--space-xl);
  }

  .split-inner,
  .story-inner,
  .about-grid,
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
    gap: var(--space-xl);
    align-items: center;
  }

  .split-reverse .split-inner,
  .story-section.is-reverse .story-inner {
    direction: rtl;

    & > * {
      direction: ltr;
    }
  }

  .split-media img,
  .story-media img,
  .about-media img,
  .gallery-feature img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
        aspect-ratio: 5 / 4;
    object-fit: cover;
  }

  .split-content h2,
  .story-content h2,
  .about-content h2 {
    margin-bottom: var(--space-md);
  }

  .story-inner-single {
    grid-template-columns: minmax(0, 850px);
    align-items: start;
  }

  .split-body,
  .story-body,
  .rich-text {
    color: var(--color-text-muted);

    & p + p,
    & p + ul,
    & ul + p {
      margin-top: 1em;
    }
  }

  .story-lead {
    margin-bottom: var(--space-md);
    font-size: clamp(1.08rem, 2vw, 1.32rem);
    line-height: 1.75;
    color: var(--color-text-muted);
  }

  .story-note {
    margin-top: var(--space-md);
    padding-left: var(--space-sm);
    border-left: 2px solid var(--color-accent);
    color: var(--color-text-muted);
    font-weight: 700;
  }

  .story-caption {
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
    font-size: 0.92rem;
  }

  .story-content .button-primary {
    margin-top: var(--space-md);
  }

  @media (max-width: 780px) {
    .split-inner,
    .story-inner,
    .about-grid,
    .contact-grid {
      grid-template-columns: 1fr;
    }

    .split-reverse .split-inner,
    .story-section.is-reverse .story-inner {
      direction: ltr;
    }
  }

  .offerings-section,
  .services-section {
    padding-block: var(--space-xl);
  }

  .offerings-grid,
  .services-grid,
  .preview-card-grid,
  .updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .offering-card,
  .service-card,
  .preview-card,
  .update-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--color-bg-wash) 86%, transparent), color-mix(in srgb, var(--color-bg-alt) 62%, white));
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--color-sage-soft), transparent 45%);
      opacity: 0;
      transition: opacity var(--transition-base);
    }

    & > * {
      position: relative;
    }

    &:hover,
    &.is-active {
      transform: translateY(-4px);
      border-color: var(--color-primary-border);
      box-shadow: var(--shadow-md);

      &::before {
        opacity: 1;
      }
    }
  }

  .offering-card:first-child,
  .service-card:first-child {
    grid-column: span 2;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 12%, white), var(--color-bg-wash));

    @media (max-width: 680px) {
      grid-column: span 1;
    }
  }

  .offering-meta,
  .service-meta,
  .price-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: var(--space-sm);
    padding: 0.34rem 0.78rem;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-subtle);
  }

  .offerings-service-area {
    margin-inline: auto;
    color: var(--color-text-muted);
  }

  .offering-card {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
  }

  .offering-card-header,
  .offering-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
  }

  .offering-number {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--color-sage-deep);
    background: color-mix(in srgb, var(--color-bg-wash) 72%, transparent);
  }

  .offering-card-footer {
    margin-top: auto;
    padding-top: var(--space-xs);
  }

  .deposit-note {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    font-weight: 700;
  }

  .offering-best {
    padding-left: var(--space-sm);
    border-left: 2px solid var(--color-accent);
    color: var(--color-text-muted);

    & span {
      display: block;
      margin-bottom: 0.2rem;
      color: var(--color-primary);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
  }

  .offering-title,
  .service-title,
  .preview-title,
  .update-title {
    margin-bottom: var(--space-xs);
  }

  .offering-description,
  .service-description,
  .preview-summary,
  .update-description {
    color: var(--color-text-muted);
  }

  .offering-link,
  .service-link,
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: var(--space-sm);
    font-weight: 700;
  }

  .testimonials-section {
    position: relative;
    padding-block: var(--space-xl);
  }

  .testimonial-list,
  .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-md);
  }

  .testimonial-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md) var(--space-md);
    background:
      radial-gradient(circle at 92% 0%, var(--color-accent-soft), transparent 9rem),
      color-mix(in srgb, var(--color-bg-wash) 86%, transparent);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);

    &:hover,
    &.is-active {
      transform: translateY(-4px);
      border-color: var(--color-primary-border);
      box-shadow: var(--shadow-md);
    }
  }

  .testimonial-mark {
    position: absolute;
    inset: -0.25rem var(--space-md) auto auto;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 10vw, 8rem);
    line-height: 1;
    color: color-mix(in srgb, var(--color-primary) 18%, transparent);
    pointer-events: none;
  }

  .testimonial-quote {
    position: relative;
    margin: 0;
  }

  .testimonial-quote p,
  blockquote p {
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 2.8vw, 2.2rem);
    line-height: 1.2;
    color: var(--color-heading);
  }

  .testimonial-author,
  .testimonial-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-line);
    color: var(--color-text-muted);
  }

  .testimonial-name,
  .testimonial-author cite {
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .testimonial-role {
    color: var(--color-text-muted);
    font-size: 0.92rem;
  }

  .gallery-section {
    padding-block: var(--space-xl);
  }

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-sm);
  }

  .gallery-item {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);

    & a {
      display: block;
      color: inherit;
    }

    & img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      transition: transform var(--transition-slow), filter var(--transition-slow);
    }

    & figcaption,
    & .gallery-caption {
      position: absolute;
      inset: auto var(--space-sm) var(--space-sm) var(--space-sm);
      padding: 0.5rem 0.75rem;
      border: 1px solid color-mix(in srgb, var(--color-bg-wash) 24%, transparent);
      border-radius: var(--radius-full);
      color: var(--color-bg-wash);
      background: color-mix(in srgb, var(--color-bg-dark) 72%, transparent);
      backdrop-filter: blur(8px);
      font-size: 0.84rem;
      font-weight: 700;
    }

    &:hover,
    &:focus-within,
    &.is-active {
      transform: translateY(-3px);
      border-color: var(--color-primary-border);
      box-shadow: var(--shadow-md);

      & img {
        transform: scale(1.05);
        filter: saturate(1.05) contrast(1.03);
      }
    }
  }

  .yg-lightbox {
    background:
      radial-gradient(circle at 20% 8%, color-mix(in srgb, var(--color-primary) 26%, transparent), transparent 22rem),
      color-mix(in srgb, var(--color-bg-dark) 92%, black);
  }

  .yg-lightbox-img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  .yg-lightbox-btn {
    color: var(--color-bg-wash);
    border-radius: var(--radius-full);
    transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);

    &:hover {
      color: var(--color-accent);
      background: color-mix(in srgb, var(--color-bg-wash) 10%, transparent);
    }
  }

  .yg-lightbox-caption {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .contact-form {
    position: relative;
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(circle at 100% 0%, var(--color-accent-soft), transparent 12rem),
      var(--color-bg-wash);
    box-shadow: var(--shadow-md);
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .form-field-full,
  .form-note,
  .form-submit {
    grid-column: 1 / -1;
  }

  .form-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
  }

  .form-field {
    display: grid;
    gap: 0.45rem;

    & label {
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-primary);
    }

    & input,
    & textarea,
    & select {
      width: 100%;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-md);
      padding: 0.95rem 1rem;
      color: var(--color-text);
      background: color-mix(in srgb, var(--color-bg) 78%, white);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);

      &:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
        background: var(--color-bg-wash);
      }
    }

    & textarea {
      min-height: 10rem;
      resize: vertical;
    }
  }

  .form-submit {
    width: 100%;
    border: 1px solid var(--color-primary);
  }

  .honeypot,
  .hidden-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .contact-card,
  .contact-details {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    background: var(--color-primary-subtle);

    & ul {
      display: grid;
      gap: 0.65rem;
      list-style: none;
      padding: 0;
      margin: var(--space-sm) 0 0;
    }
  }

  .updates-section {
    padding-block: var(--space-xl);
    background:
      radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 18rem),
      linear-gradient(135deg, var(--color-sage-soft), transparent),
      var(--color-bg-alt);
  }

  .updates-section .section-header {
    margin-bottom: var(--space-md);
  }

  .update-card {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
  }

  .update-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
  }

  .update-icon {
    display: inline-grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: var(--radius-full);
    color: var(--color-bg-wash);
    background: var(--color-sage-deep);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-sage) 24%, transparent);
  }

  .update-meta,
  .update-date {
    display: inline-flex;
    width: fit-content;
    border-radius: var(--radius-full);
    padding: 0.32rem 0.76rem;
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .update-date {
    color: var(--color-sage-deep);
    background: color-mix(in srgb, var(--color-sage) 12%, white);
  }

  .update-location {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-text-muted);
    font-weight: 700;
  }

  .updates-note {
    max-width: 780px;
    margin: var(--space-md) auto 0;
  }

  .success-panel,
  .privacy-panel,
  .page-panel {
    max-width: 860px;
    margin-inline: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    background: var(--color-bg-wash);
    box-shadow: var(--shadow-sm);
  }

  .accordion-item {
    border-top: 1px solid var(--color-line);

    &:last-child {
      border-bottom: 1px solid var(--color-line);
    }
  }

  .accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md) 0;
    border: 0;
    color: var(--color-heading);
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;

    &:hover {
      color: var(--color-primary);
    }
  }

  .accordion-icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 50% auto auto 0;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: translateY(-50%);
      transition: transform var(--transition-base);
    }

    &::after {
      transform: translateY(-50%) rotate(90deg);
    }
  }

  .accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);

    & > * {
      overflow: hidden;
    }
  }

  .accordion-item.is-open {
    & .accordion-panel {
      grid-template-rows: 1fr;
    }

    & .accordion-icon::after {
      transform: translateY(-50%) rotate(0deg);
    }
  }

  .accordion-content {
    padding: 0 0 var(--space-md);
    color: var(--color-text-muted);
  }

  @media (max-width: 640px) {
    .button-primary,
    .button-secondary,
    .button-quiet,
    .hero-cta,
    .form-submit {
      width: 100%;
    }

    .contact-form,
    .success-panel,
    .privacy-panel,
    .page-panel {
      padding: var(--space-md);
    }

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

    .carousel-btn {
      position: static;
      margin-top: var(--space-md);
      transform: none;
    }
  }
}