:root {
      --bg-primary: #FDE7B3;
      --text-accent: #A72703;
      --text-sub-raw: #FFC50F;
      /* Enhanced dark-gold variant specifically calibrated for WCAG AA typography contrast safety on light ochre paper */
      --text-sub-readable: #B28300; 
      --surface-card: #FFFFFF;
      --font-serif: "Port Lligat Slab", serif;
      --font-sans: "Nunito", sans-serif;
      --border-dotted: 2px dotted #A72703;
      --transition-editorial: all 0.6s cubic-bezier(0.25, 1, 0.3, 1);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--bg-primary);
      color: var(--text-accent);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      /* Warm clinical paper texture simulation */
      background-image: radial-gradient(rgba(167, 39, 3, 0.02) 1px, transparent 0);
      background-size: 24px 24px;
    }

    main {
  padding-top: 120px; /* adjust based on header height */
}
    /* Hierarchy Constraints */
    h1, h2, h3, h4, .port-lligat-slab-regular {
      font-family: var(--font-serif);
      font-weight: 400;
      line-height: 1.15;
    }

    p, .nunito {
      font-family: var(--font-sans);
      font-weight: 400;
      line-height: 1.7;
    }

    .dotted-divider {
      border: none;
      border-top: var(--border-dotted);
      width: 100%;
      margin: 1.5rem 0;
      opacity: 0.5;
    }

    /* Multipage Stage Switching Management */
    .app-stage {
      display: none;
      opacity: 0;
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .app-stage.active-stage {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    /* Soft Glow Animation Systems */
    .clinical-hover-glow {
      transition: var(--transition-editorial);
    }
    .clinical-hover-glow:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(167, 39, 3, 0.12);
    }

    /* ==========================================================================
       2. ASYMMETRIC HEADER SYSTEM (INTEGRATED BEHAVIOR)
       ========================================================================== */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      z-index: 1000;
      background-color: var(--bg-primary);
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    }

    header.header-hidden {
      transform: translateY(-100%);
    }

    .header-layout-wrapper {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      width: 100%;
    }

    /* Left Navigation Framework */
    .header-left-panel {
        height: 100px;
      padding: 2.5rem 4rem 1rem 4rem;
    }

    .left-panel-top {
      display: flex;
      height: 100px;
      justify-content: space-between;
      align-items: flex-start;
    }

.logo-png {
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

.logo-png img {
  height: 248px;   /* adjust as needed */
  width: auto;
    margin-top: -5rem;

  display: block;
}
    .navigation-links {
      display: flex;
      flex-direction: column;
      margin-right: 20rem;
    }

    .navigation-links a {
      font-family: var(--font-sans);
      font-weight: 700;
      color: var(--text-accent);
      text-decoration: none;
      cursor: pointer;
      font-size: 1.05rem;
      transition: opacity 0.3s ease;
      text-align: left;
    }

    .navigation-links a:hover, .navigation-links a.active-node {
      opacity: 0.6;
    }

  .left-panel-dotted-line {
  border: none;
  border-top: var(--border-dotted);
  width: 60%;
  margin: 0;
}
.left-panel-dotted-line {
  margin-left: -4rem;
}

    /* Right Navigation Framework */
    .header-right-panel {
      padding: 2.5rem 4rem 1rem 4rem;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
    }

    .contact-callout {
      font-family: var(--font-sans);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-accent);
      text-decoration: none;
      cursor: pointer;
      border-bottom: 2px solid var(--text-accent);
      padding-bottom: 4px;
      transition: opacity 0.3s ease;
    }

    .contact-callout:hover {
      opacity: 0.6;
    }

    /* Responsive Mobile Hamburger Trigger */
    .hamburger-button {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      z-index: 1100;
    }

    .hamburger-button span {
      display: block;
      width: 26px;
      height: 2px;
      background-color: var(--text-accent);
    }

    .mobile-fullscreen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: var(--bg-primary);
      z-index: 1050;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      transform: translateY(-100%);
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    }

    .mobile-fullscreen-overlay.is-visible {
      transform: translateY(0);
    }

    .mobile-fullscreen-overlay a {
      font-family: var(--font-serif);
      font-size: 2.5rem;
      color: var(--text-accent);
      text-decoration: none;
    }

    /* ==========================================================================
       3. ASYMMETRIC HERO ARCHITECTURE
       ========================================================================== */
    .hero-split-canvas {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      min-height: 100vh;
      width: 100%;
    }

    .hero-left-bottom-story {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .hero-left-bottom-story h1 {
      font-size: 4.8rem;
      color: var(--text-accent);
      margin-bottom: 2rem;
    }

    .hero-left-bottom-story p {
      font-size: 1.3rem;
      color: var(--text-sub-readable);
      max-width: 520px;
      font-weight: 600;
    }

    .hero-right-image-canvas {
      position: relative;
      background-image: url('https://static.wixstatic.com/media/c837a6_af199f177def4a93a5ead1a96d50f55d~mv2.jpg/v1/fill/w_1230,h_1083,fp_0.38_0.41,q_85,usm_0.66_1.00_0.01,enc_auto/beauty%20salon_Image%20Upscale%20_%20Real-ESRGAN_2026-04-19_08-54-55.jpg');
      background-size: cover;
      background-position: center;
      width: 150vh;
      height: 100vh;
    }

    /* Floating White Card Layout Matrix */
    .hero-floating-white-card {
      position: absolute;
      bottom: 4rem;
      left: -6rem;
      background-color: var(--surface-card);
      padding: 2.5rem;
      width: 440px;
      display: flex;
      gap: 1.5rem;
      align-items: center;
      box-shadow: 0 25px 50px rgba(167, 39, 3, 0.08);
      border-radius: 2px;
    }

    .hero-floating-white-card .floating-left-img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 50%;
    }

    .hero-floating-white-card .floating-right-prose {
      font-size: 0.95rem;
      color: var(--text-accent);
      line-height: 1.6;
    }

    /* ==========================================================================
       4. SECTION 1 — ALLERGY OVERVIEW GRID (EDITORIAL MEDICAL INDEX)
       ========================================================================== */
    .overview-index-section {
      padding: 12rem 4rem;
    }

    .overview-header-block {
      margin-bottom: 6rem;
    }

    .overview-header-block h2 {
      font-size: 4rem;
      color: var(--text-accent);
      margin-bottom: 1.5rem;
    }

    .overview-header-block p {
      font-size: 1.25rem;
      color: var(--text-sub-readable);
      max-width: 600px;
    }

    .medical-editorial-index {
      width: 100%;
    }

    .index-row {
      display: grid;
      grid-template-columns: 0.6fr 1.4fr 2fr 1fr;
      padding: 2.5rem 0;
      align-items: start;
    }

    .index-row .index-num {
      font-family: var(--font-serif);
      font-size: 2.2rem;
      color: var(--text-accent);
      opacity: 0.7;
    }

    .index-row h3 {
      font-size: 2.4rem;
      color: var(--text-accent);
    }

    .index-row p {
      color: var(--text-sub-readable);
      font-size: 1.1rem;
      padding-right: 4rem;
    }

    .index-row .index-small-note {
      font-family: var(--font-sans);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-accent);
      font-weight: 800;
      text-align: right;
    }

    /* ==========================================================================
       5. SECTION 2 — CLINIC STORY + IMAGE FLOW (KINETIC SLIDE EFFECT)
       ========================================================================== */
    .clinic-story-flow-section {
      padding: 10rem 4rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: start;
    }

    .story-left-stack {
      display: flex;
      flex-direction: column;
      gap: 4.5rem;
    }

    /* Scroll Engine Left-to-Right Target Bounds */
    .editorial-white-card {
      background-color: var(--surface-card);
      padding: 4rem;
      box-shadow: 0 15px 40px rgba(167, 39, 3, 0.04);
      border-radius: 2px;
      opacity: 0;
      transform: translateX(-60px);
      transition: opacity 0.8s cubic-bezier(0.25, 1, 0.3, 1), transform 0.8s cubic-bezier(0.25, 1, 0.3, 1);
    }

    .editorial-white-card.card-visible {
      opacity: 1;
      transform: translateX(0);
    }

    .editorial-white-card h3 {
      font-size: 2.6rem;
      color: var(--text-accent);
      margin-bottom: 1.5rem;
    }

    .editorial-white-card p {
      color: var(--text-sub-readable);
      font-size: 1.1rem;
    }

    .story-right-parallax-vault {
      position: sticky;
      top: 200px;
      width: 100%;
      height: 75vh;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(167, 39, 3, 0.06);
    }

    .story-parallax-img {
      width: 100%;
      height: 130%;
      object-fit: cover;
      position: absolute;
      top: -15%;
      will-change: transform;
    }

    /* ==========================================================================
       6. SECTION 3 — TREATMENT INSIGHT METRICS
       ========================================================================== */
    .treatment-insight-section {
      padding: 12rem 4rem;
      text-align: center;
    }

    .treatment-insight-section h2 {
      font-size: 4.6rem;
      color: var(--text-accent);
      margin-bottom: 0.5rem;
    }

    .treatment-insight-section .section-quote-line {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 1.6rem;
      color: var(--text-sub-readable);
      display: block;
      margin-bottom: 4.5rem;
    }

    .treatment-insight-section .center-body-prose {
      font-size: 1.55rem;
      color: var(--text-accent);
      max-width: 900px;
      margin: 0 auto 8rem auto;
      line-height: 1.8;
    }

    .insight-image-matrix {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3.5rem;
      text-align: left;
    }

    .matrix-card-node {
      display: flex;
      flex-direction: column;
    }

    .matrix-card-node .matrix-img-wrapper {
      overflow: hidden;
      margin-bottom: 1.8rem;
      border-radius: 2px;
      height: 460px;
    }

    .matrix-card-node .matrix-img-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
    }

    .matrix-card-node:hover .matrix-img-wrapper img {
      transform: scale(1.03);
    }

    /* Out-of-box Typography Positioning Alignment */
    .matrix-meta-box h4 {
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 1.1rem;
      color: var(--text-accent);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.4rem;
    }

    .matrix-meta-box .matrix-card-quote {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      color: var(--text-sub-readable);
      display: block;
      margin-bottom: 1rem;
    }

    .matrix-meta-box p {
      font-size: 1.05rem;
      color: var(--text-accent);
    }

    /* ==========================================================================
       7. SECTION 4 — VISUAL MEDICAL STRIP
       ========================================================================== */
    .visual-medical-strip-wrapper {
      width: 100%;
      height: 10vh;
      overflow: hidden;
      position: relative;
    }

    .strip-parallax-background {
      width: 100%;
      height: 100%;
      background-image: url('https://static.wixstatic.com/media/c837a6_ee698c1710d74b4c942ef4539089ed0c~mv2.png/v1/fill/w_813,h_60,al_c,lg_1,q_85,enc_avif,quality_auto/Rectangle%2013.png');
      background-repeat: repeat-x;
      background-size: cover;
      background-position: center;
      will-change: transform;
    }

    /* ==========================================================================
       8. SECTION 5 — CONTACT PREVIEW & UNIVERSAL FOOTER
       ========================================================================== */
    .footer-preview-center-zone {
      padding: 10rem 4rem 6rem 4rem;
      text-align: center;
    }

    .footer-centered-logo {
      font-family: var(--font-serif);
      font-size: 4.5rem;
      color: var(--text-accent);
      text-decoration: none;
      display: inline-block;
      margin-bottom: 2rem;
      cursor: pointer;
    }

    .footer-preview-center-zone p {
      max-width: 620px;
      margin: 0 auto 2.5rem auto;
      color: var(--text-sub-readable);
      font-size: 1.15rem;
    }

    .footer-preview-links-wrapper {
      display: flex;
      gap: 3rem;
      justify-content: center;
    }

    footer {
      background-color: var(--bg-primary);
      border-top: var(--border-dotted);
      padding: 6rem 4rem 3.5rem 4rem;
    }

    .footer-structural-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.5fr;
      gap: 5rem;
      margin-bottom: 6rem;
    }

    .footer-column h5 {
      font-family: var(--font-sans);
      font-weight: 800;
      text-transform: uppercase;
      font-size: 0.95rem;
      letter-spacing: 0.1em;
      color: var(--text-accent);
      margin-bottom: 1.5rem;
    }

    .footer-navigation-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .footer-navigation-list a {
      color: var(--text-sub-readable);
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .footer-navigation-list a:hover {
      color: var(--text-accent);
    }

    .footer-base-legal-row {
      border-top: 1px solid rgba(167, 39, 3, 0.15);
      padding-top: 3rem;
      display: flex;
      justify-content: space-between;
      font-size: 0.95rem;
      color: var(--text-sub-readable);
    }

    /* ==========================================================================
       9. MULTIPAGE INTERIOR ARCHITECTURE (ABOUT, RELIEF, SERVICES, CONTACT)
       ========================================================================== */
    .interior-editorial-container {
      max-width: 940px;
      margin: 0 auto;
      padding: 15rem 4rem 10rem 4rem;
    }

    .interior-editorial-container h1 {
      font-size: 4.6rem;
      color: var(--text-accent);
      margin-bottom: 1.5rem;
    }

    .interior-meta-stamp {
      font-family: var(--font-serif);
      font-size: 1.2rem;
      color: var(--text-sub-readable);
      display: block;
      margin-bottom: 4rem;
    }

    .prose-editorial-block h2 {
      font-size: 2.5rem;
      color: var(--text-accent);
      margin: 3.5rem 0 1.2rem 0;
    }

    .prose-editorial-block p {
      font-size: 1.18rem;
      color: #8C2102; /* High-contrast editorial color variance for readability comfort */
      margin-bottom: 2rem;
    }

    /* Form UI Alignment Blueprint */
    .clinical-intake-form {
      display: flex;
      flex-direction: column;
      gap: 3rem;
      margin-top: 4rem;
    }

    .form-row-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
    }

    .form-field-group {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .form-field-group label {
      font-size: 0.8rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .form-field-group input, .form-field-group textarea {
      background: transparent;
      border: none;
      border-bottom: 2px solid var(--text-accent);
      padding: 0.8rem 0;
      font-size: 1.2rem;
      color: var(--text-accent);
      outline: none;
      font-family: var(--font-sans);
    }

    .form-field-group textarea {
      min-height: 120px;
      resize: none;
    }

    .submit-button-node {
      align-self: flex-start;
      background-color: var(--text-accent);
      color: var(--bg-primary);
      border: none;
      font-family: var(--font-sans);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 1.2rem 3rem;
      cursor: pointer;
      border-radius: 2px;
      transition: var(--transition-editorial);
    }

    .submit-button-node:hover {
      opacity: 0.8;
    }

    /* ==========================================================================
       10. RESPONSIVE BREAKPOINT ORCHESTRATION
       ========================================================================== */
    @media (max-width: 1024px) {
      .hero-split-canvas, .clinic-story-flow-section {
        grid-template-columns: 1fr;
      }
      .hero-floating-white-card {
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        margin-top: 2.5rem;
      }
      .story-right-parallax-vault {
        position: relative;
        top: 0;
        height: 450px;
        margin-top: 3rem;
      }
      .index-row {
        grid-template-columns: 0.5fr 1.5fr;
        gap: 1.5rem;
      }
      .index-row .index-small-note {
        text-align: left;
        grid-column: 2;
      }
      .insight-image-matrix, .footer-structural-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
      }
    }

    @media (max-width: 768px) {
      header .header-layout-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 2rem;
        border-bottom: var(--border-dotted);
      }
      header .header-left-panel, header .header-right-panel {
        padding: 0;
        border: none;
      }
      header .header-left-panel .navigation-links, header .header-right-panel .contact-callout {
        display: none;
      }
      .left-panel-dotted-line {
        display: none;
      }
      .hamburger-button {
        display: flex;
      }
      .hero-left-bottom-story h1 {
        font-size: 3.2rem;
      }
      .interior-editorial-container h1 {
        font-size: 3.2rem;
      }
      .form-row-split {
        grid-template-columns: 1fr;
      }
    }