:root {
    /* ---- Nordic Forest palette (raw) ----
       Deep Pine #122B2A · Forest Moss #34564D · Sage Mist #A8B8A0
       Warm Stone #B8A58D · Linen #E8E1D5 · Snow #F7F5EF */
    --snow: #f7f5ef;
    --linen: #e8e1d5;
    --sage: #a8b8a0;
    --stone: #b8a58d;
    --moss: #34564d;
    --pine: #122b2a;

    /* ---- Roles (default arrangement: Nordic Moss) ---- */
    --bg-page: var(--linen);
    --bg-header: var(--linen);
    --header-border: var(--stone);
    --nav-ink: #4a625e;
    --ink: var(--pine);
    --ink-sub: #4a625e;
    --accent-ink: var(--moss);
    --rule: var(--stone);
    /* one constant width for every text column that sits beside an image */
    --text-col: 32rem;
    /* one constant width for every centered text block (lede + about-cols) */
    --text-wide: 42rem;

    /* ---- Spacing scale: one shared template for titles, paragraphs, sections ---- */
    --sp-para: 0.5rem;          /* paragraph rhythm */
    --sp-h3-above: 0.6rem;      /* space above a subtitle */
    --sp-h3-below: 0.25rem;     /* space below a subtitle */
    --sp-title: 0.4rem;         /* section title to rule */
    --sp-rule: 1.3rem;          /* rule to body text */
    --sp-btn: 1.4rem;           /* body text to button, everywhere */
    --sp-sec-top: 2.75rem;      /* section top padding */
    --sp-sec-bottom: 4rem;      /* section bottom padding (includes the wavy divider) */
    --sp-sec-top-lg: 3.25rem;   /* same, on big screens */
    --sp-sec-bottom-lg: 4.75rem;

    --hero-bg: var(--pine);
    --hero-ink: var(--snow);
    --hero-sub: #ded9cb;
    --hero-em: #c9d3bf;   /* sage accent for the italic in the headline */
    --figure-op: 0.34;

    --btn-border: var(--snow);
    --btn-ink: var(--snow);
    --btn-hover-bg: var(--snow);
    --btn-hover-ink: var(--pine);
    --cbtn-border: var(--snow);
    --cbtn-ink: var(--snow);
    --cbtn-hover-bg: var(--snow);
    --cbtn-hover-ink: var(--moss);

    --benefits-bg: var(--stone);
    --benefits-ink: var(--pine);
    --benefits-sub: #2c3e35;
    --card-bg: var(--linen);
    --card-ink: var(--pine);
    --card-sub: #4a625e;

    --sessions-bg: var(--snow);
    --sessions-ink: var(--pine);
    --sessions-sub: #4a625e;

    --contact-bg: var(--moss);
    --contact-ink: var(--snow);
    --contact-sub: #ded9cb;

    --footer-bg: var(--pine);
    --footer-ink: var(--snow);
    --footer-sub: #ded9cb;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  /* root font scales smoothly from phone (~16.5px) to 4K (~21px) */
  html {
    scroll-behavior: smooth;
    font-size: clamp(16.5px, 0.6vw + 11px, 21px);
  }
  body {
    overflow-x: clip;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    background: var(--bg-page);
    color: var(--ink);
    line-height: 1.5;
    text-align: center;
  }
  /* all titles share the serif voice, no exceptions */
  h1, h2, h3 {
    font-family: "Georgia", "Times New Roman", serif;
    font-weight: normal;
    letter-spacing: 0.02em;
  }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, .menu-toggle:focus-visible {
    outline: 2px solid var(--header-border);
    outline-offset: 3px;
  }

  /* ---------- Header ---------- */
  header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 2.5rem;
    background: var(--bg-header);
  }
  .logo {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    line-height: 1;
    color: var(--ink);
  }
  .logo .soma { font-weight: 700; color: var(--pine); }
  .logo .tica { font-weight: 400; color: var(--moss); }
  nav {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  nav a {
    font-size: 0.95rem;
    color: var(--nav-ink);
    letter-spacing: 0.05em;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, color 0.3s;
  }
  nav a:hover { color: var(--ink); border-bottom: 1px solid var(--ink); }
  /* middot separators between items, quiet stone so labels stay dominant */
  nav a + a::before {
    content: "\00B7";
    margin: 0 0.55rem;
    color: var(--stone);
  }

  /* hamburger button — hidden on desktop */
  .menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
  }
  .menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--nav-ink);
    margin: 6px 0;
    transition: transform 0.3s, opacity 0.3s;
  }
  .menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5rem 2rem calc(clamp(1.75rem, 4vw, 2.75rem) + 2rem);
    background: var(--hero-bg);
    color: var(--hero-ink);
    overflow: hidden;
  }
  .hero-figure {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    height: 190%;
    max-width: none;
    width: auto;
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 68%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 68%, transparent 100%);
    pointer-events: none;
    user-select: none;
  }
  .hero-divider {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    display: block;
    width: 100%;
    height: clamp(1.75rem, 4vw, 2.75rem);
    pointer-events: none;
  }

  .wavy { position: relative; }
  .wavy .section-divider {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    display: block;
    width: 100%;
    height: clamp(2rem, 4vw, 3rem);
    pointer-events: none;
  }
  /* ---------- Sub-pages: shared template for compact heroes, text sections, button rows ---------- */
  .hero-compact { min-height: 0; padding: 5rem 2rem calc(clamp(1.75rem, 4vw, 2.75rem) + 2rem); }
  .text-section .section-title { text-align: left; }
  .text-section .section-title + .rule { margin-left: 0; margin-right: auto; }
  .text-section .section-inner { text-align: left; }
  .text-section .about-cols > .btn { display: block; width: fit-content; margin: var(--sp-btn) auto 0; }
  .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-btn); }
  .btn-row .btn { margin-top: 0; }

  .hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.65rem;
    line-height: 2;
    color: var(--hero-sub);
    margin-bottom: 0.7rem;
    max-width: 36ch;
  }
  .hero h1 {
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.7rem);
    line-height: 1.15;
    max-width: 18ch;
  }
  .hero h1 em { font-style: italic; color: var(--hero-em); }
  .hero p {
    margin-top: 0.8rem;
    margin-bottom: 0;
    max-width: 42ch;
    color: var(--hero-sub);
    font-size: 0.92rem;
  }
  .btn {
    display: inline-block;
    margin-top: var(--sp-btn);
    padding: 0.9rem 2.6rem;
    border: 1px solid var(--btn-border);
    border-radius: 999px;
    color: var(--btn-ink);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: background 0.35s, color 0.35s;
  }
  .btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-ink); }
  .contact .btn { border-color: var(--cbtn-border); color: var(--cbtn-ink); }
  .hero .btn { margin-top: 1.2rem; padding: 0.6rem 1.9rem; font-size: 0.75rem; }
  .contact .btn:hover { background: var(--cbtn-hover-bg); color: var(--cbtn-hover-ink); }

  /* ---------- Sections ---------- */
  section { padding: var(--sp-sec-top) 2rem var(--sp-sec-bottom); }
  /* keep the sticky header from covering titles when jumping via the menu */
  section[id] { scroll-margin-top: 6rem; }
  .section-inner { max-width: min(64rem, 92%); margin: 0 auto; }
  .section-title {
    text-align: center;
    font-size: clamp(1.5rem, 1rem + 1.3vw, 2.1rem);
    margin-bottom: var(--sp-title);
  }
  .section-title + .rule {
    display: block;
    width: 56px; height: 4px;
    margin: 0 auto var(--sp-rule);
    background: var(--rule);
  }
  .lede { text-align: center; max-width: var(--text-wide); margin: 0 auto var(--sp-rule); color: var(--ink-sub); font-size: 0.92rem; }
  /* stacked lede paragraphs keep the site-wide paragraph rhythm */
  .lede + .lede { margin-top: calc(var(--sp-para) - var(--sp-rule)); }

  /* non-centered sections: titles share their text's alignment */
  #about .section-title,
  .about-me-text .section-title { text-align: left; }
  #about .section-title + .rule,
  .about-me-text .section-title + .rule { margin-left: 0; margin-right: auto; }

  /* About Me */
  #about-me { background: var(--snow); }
  .about-me-grid {
    display: block;
    max-width: 56rem;
    margin: 0 auto;
    text-align: left;
  }
  .about-me-photo {
    position: relative;
    width: min(13rem, 60vw);
    aspect-ratio: 3 / 4;
    /* "tv" cut-out: big soft rounded corners on a portrait rectangle */
    clip-path: inset(0 round 23%);
  }
  .about-me-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: grayscale(100%) contrast(1.12) brightness(1.07);
    /* soften the top-left corner into the band */
    -webkit-mask-image: radial-gradient(circle at 0 0, transparent 0%, rgba(0,0,0,0.85) 30%, #000 55%);
    mask-image: radial-gradient(circle at 0 0, transparent 0%, rgba(0,0,0,0.85) 30%, #000 55%);
  }
  /* linen duotone: hue tint + depth toward the linen scale */
  .about-me-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--snow);
    mix-blend-mode: multiply;
    opacity: 0.45;
  }
  .about-me-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--snow);
    mix-blend-mode: color;
  }
  .about-me-text { max-width: var(--text-col); }
  .about-me-text p {
    color: var(--pine);
    font-size: 0.92rem;
    text-align: left;
  }
  /* consistent paragraph rhythm across the site: every paragraph, everywhere */
  p { margin: 0 0 var(--sp-para); }
  p:last-child { margin-bottom: 0; }
  /* subtitles: one rule everywhere: serif, one size, tiny breath above/below */
  h3 {
    margin: var(--sp-h3-above) 0 var(--sp-h3-below);
    font-size: 1.3rem;
    line-height: 1.15;
  }
  @media (min-width: 620px) {
    .about-me-text { position: relative; padding-left: 15.5rem; max-width: none; }
    .about-me-photo {
      position: absolute;
      left: 0;
      top: 0.9rem;
      width: 13rem;
    }
  }

  /* About */

  /* What is CST? — photo blending into the band (side layout only: from 1000px up,
     where it fits beside the text; below that the sketch is hidden, never stacked) */
  #about { position: relative; }
  .about-photo {
    display: none;
    position: absolute; top: 0; right: 0;
    width: 46%; height: 100%;
    object-fit: cover; object-position: center; opacity: 0.9;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
    mask-image: linear-gradient(to right, transparent 0%, #000 42%);
    pointer-events: none;
  }
  #about .section-inner { position: relative; text-align: left; }
  #about .btn, #fascial .btn, .about-me-text .btn { display: block; width: fit-content; margin: var(--sp-btn) auto 0; }
  .btn-quiet {
    border-color: var(--moss);
    color: var(--moss);
  }
  .btn-quiet:hover { background: var(--moss); color: var(--snow); }
  .about-curve {
    position: absolute; display: none;
    top: calc(-1 * clamp(1.75rem, 4vw, 2.75rem)); right: 0;
    width: 38%; height: clamp(1.75rem, 4vw, 2.75rem);
    pointer-events: none;
  }
  @media (min-width: 1000px) {
    #about .section-inner {
      max-width: var(--text-col);
      margin-left: max(12%, calc((100% - 64rem) / 2 + 4rem));
      /* reserve the photo's right-hand 44% zone (+ section padding) so the
         text column shrinks instead of ever overlapping the sketch */
      margin-right: calc(44% + 2rem);
    }
    /* photo fills the right side, rising above the band to tuck under the wavy border;
       flush with the page edge (no bleed) so it never expands the page width */
    .about-photo {
      display: block;
      top: calc(-1 * clamp(1.75rem, 4vw, 2.75rem));
      height: calc(100% + clamp(1.75rem, 4vw, 2.75rem));
      width: 44%;
      right: 0;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
      mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
    }
    .about-curve { display: block; }
  }
  .about-cols {
    max-width: var(--text-wide);
    margin: 0 auto;
  }
  .about-cols h3 {
    color: var(--accent-ink);
    text-align: left;
  }
  .about-cols p { color: var(--ink-sub); font-size: 0.92rem; text-align: left; }

  /* Fascial unwinding */
  #fascial { background: var(--snow); }
  #fascial .about-cols p { color: var(--pine); }
  /* Pricing: stone band between the snow Sessions section and the linen CST section */
  #pricing { background: var(--stone); }
  #pricing .section-title + .rule { background: var(--pine); }

  /* Benefits */
  .benefits { background: var(--benefits-bg); color: var(--benefits-ink); }
  .benefits .lede { color: var(--benefits-sub); }
  .benefits .section-title + .rule { background: var(--benefits-ink); }
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 1fr;
    gap: 1.2rem;
    max-width: 56rem;
    margin: 0 auto;
  }
  @media (min-width: 900px) {
    .cards { grid-template-columns: repeat(3, 1fr); }
  }
  .card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 1.5rem 1.3rem;
    color: var(--card-ink);
    position: relative;
    overflow: hidden;
    background-image: url('assets/fig-wellcome-1686-stone.png');
    background-size: 170%;
    background-repeat: no-repeat;
  }
  .card h3, .card p { position: relative; z-index: 2; }
  .card::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card.d1 { background-position: 88% 6%; }
  .card.d1::after { background: linear-gradient(315deg, rgba(232,225,213,0.28) 22%, rgba(232,225,213,0.95) 38%, #e8e1d5 55%); }
  .card.d2 { background-position: 8% 94%; }
  .card.d2::after { background: linear-gradient(45deg, rgba(232,225,213,0.28) 22%, rgba(232,225,213,0.95) 38%, #e8e1d5 55%); }
  .card.d3 { background-position: 95% 45%; }
  .card.d3::after { background: linear-gradient(270deg, rgba(232,225,213,0.28) 22%, rgba(232,225,213,0.95) 38%, #e8e1d5 55%); }
  .card.d4 { background-position: 85% 85%; }
  .card.d4::after { background: linear-gradient(315deg, rgba(232,225,213,0.5) 22%, rgba(232,225,213,0.95) 38%, #e8e1d5 55%); }
  .card.d5 { background-position: 12% 6%; }
  .card.d5::after { background: linear-gradient(225deg, rgba(232,225,213,0.42) 22%, rgba(232,225,213,0.95) 38%, #e8e1d5 55%); }
  .card.d6 { background-position: 92% 92%; }
  .card.d6::after { background: linear-gradient(135deg, rgba(232,225,213,0.42) 22%, rgba(232,225,213,0.95) 38%, #e8e1d5 55%); }
  .card h3 { margin: 0 0 0.5rem; }
  .card p { color: var(--card-sub); font-size: 0.92rem; }

  /* Sessions */
  .sessions { position: relative; background: var(--sessions-bg); color: var(--sessions-ink); }
  /* the engraving lives inside the text column, anchored to the left edge of the
     centered text block itself (same 42rem box the ledes use), so it never juts
     left of the visible text page at any width */
  #sessions .section-inner { position: relative; }
  .sessions-clip {
    position: absolute;
    top: 0; bottom: 0;
    left: max(0px, calc(50% - var(--text-wide) / 2));
    width: 40%; overflow: hidden; pointer-events: none;
    /* soft entrance just below the wave of the previous section */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
  }
  .sessions .lede { color: var(--sessions-sub); }
  .sessions-photo {
    position: absolute; top: -50%; left: 0;
    height: 190%; width: auto; max-width: none;
    display: none; pointer-events: none; user-select: none;
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(to right, #000 28%, transparent 62%);
    mask-image: linear-gradient(to right, #000 28%, transparent 62%);
  }
  @media (min-width: 1000px) {
    .sessions-photo { display: block; }
  }
  /* Sessions: stacked info blocks, same text style as the section lede */
  .session-info { max-width: var(--text-wide); margin: 1.6rem auto 0; }
  .session-info h3 { color: var(--sessions-ink); }
  .session-info p { color: var(--sessions-sub); font-size: 0.92rem; }
  .session-row {
    text-align: center;
    margin: 0 auto 0.8rem;
  }
  .session-row .line { font-size: 1.1rem; color: var(--sessions-ink); }
  .session-row .price { color: var(--sessions-ink); }
  .session-row .dur { display: block; color: var(--sessions-sub); font-size: 0.85rem; margin-top: 0.15rem; }

  /* Contact */
  .contact { background: var(--contact-bg); color: var(--contact-ink); text-align: center; }
  .contact .lede { color: var(--contact-sub); margin-bottom: 0; }
  /* Contact: stacked info blocks under the button, same pattern as session-info */
  .contact-info { max-width: var(--text-wide); margin: var(--sp-btn) auto 0; }
  .contact-info h3 { color: var(--contact-ink); }
  .contact-info p { color: var(--contact-sub); font-size: 0.92rem; }

  footer {
    text-align: center;
    padding: 1.7rem;
    font-size: 0.85rem;
    color: var(--footer-sub);
    background: var(--footer-bg);
  }
  footer .logo { font-size: 1.2rem; display: inline-flex; margin-bottom: 0.55rem; color: var(--footer-ink); }
  footer .logo .tica { color: var(--linen); }
  footer .logo .soma { color: var(--snow); }
  footer .footer-tagline {
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.06em;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--hero-em);
    margin-bottom: 0.45rem;
  }
  footer .footer-year { font-size: 0.8rem; color: var(--footer-sub); margin-bottom: 0.4rem; }
  footer .footer-legal {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--sage);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-bottom: 0.55rem;
  }
  /* tagline breaks after the "&", which stays on the first line */
  .hero-kicker span, .footer-tagline span { white-space: nowrap; }
  footer .credits { font-size: 0.68rem; margin-top: 0.7rem; color: var(--footer-sub); }
  footer .credits a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }

  /* ---------- Big screens ---------- */
  @media (min-width: 1600px) {
    .section-inner { max-width: 76rem; }
    section { padding: var(--sp-sec-top-lg) 3rem var(--sp-sec-bottom-lg); }
  }

  /* ---------- Narrow viewports: hamburger menu ---------- */
  @media (max-width: 960px) {
    .menu-toggle { display: block; }
    header nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      background: var(--bg-header);
      padding: 0.4rem 1.5rem 1rem;
    }
    header nav.open { display: flex; }
    header nav a {
      margin: 0;
      padding: 0.8rem 0;
      border-bottom: 1px solid var(--stone);
      font-size: 1.05rem;
    }
    header nav a::before { content: none; }
    header nav a:last-child { border-bottom: none; }
  }
  /* short landscape phones */
  @media (max-height: 480px) {
    .hero { min-height: auto; padding: 5rem 2rem; }
  }