/*
    STILLWATER SKIN: warm terracotta and clay over cream, with deep espresso text, set on the
    shared demo system in ../assets/base.css. Only the palette, fonts, weights and radius live
    here; every structure and component comes from base.css. AA-checked pairings.
  */
  :root{
    --brand:#6f3b22;         /* clay brown: headings, links, header actions        */
    --brand-deep:#4a2413;    /* deep clay: final CTA band + footer ground          */
    --brand-soft:#f1e3d6;    /* soft clay wash: the second tinted band (insurance) */
    --accent:#b0562b;        /* terracotta: buttons, eyebrows, rules               */
    --accent-deep:#6f3b22;   /* deeper terracotta (= clay) for button hovers       */
    --accent-soft:#f6e7dc;   /* terracotta wash: the AEO + magnet bands            */
    --paper:#fdfaf6;         /* warm cream white                                   */
    --paper-2:#f6efe6;       /* deeper cream for alternating sections              */
    --ink:#33241c;           /* deep espresso text                                 */
    --muted:#6f5f54;         /* espresso-grey secondary text                       */
    --line:#e8ddd0;
    --font-display:"Lora",Georgia,"Times New Roman",serif;
    --font-text:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --wt-head:500; --wt-h1:600;  /* Lora reads calmer at 500/600 than the clinic default 600/700 */
    --radius:16px; --radius-sm:10px;
  }

  /* ===========================================================================
     SKIN-LEVEL ADDITIONS: two bespoke components base.css does not carry, kept
     from Stillwater's own design so the demo keeps its character. Nothing here
     touches base.css; it all uses base.css tokens and its spacing scale.
     =========================================================================== */

  /* Session menu: the price-forward centrepiece. A framed card of session lengths,
     dotted leaders and prices, paired with a short intro in a two-column row. */
  .sessions-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-7);align-items:start;margin-top:var(--space-5)}
  .menu-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:var(--space-5)}
  .menu-title{font-family:var(--font-text);font-size:var(--step--1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-3)}
  .menu{list-style:none}
  .menu li{padding:var(--space-4) 0;border-top:1px solid var(--line)}
  .menu li:first-child{border-top:0;padding-top:0}
  .menu .row{display:flex;align-items:baseline;gap:var(--space-3)}
  .menu h3{font-size:var(--step-1);white-space:nowrap;margin:0}
  .menu .pop{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
  .menu .dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px);min-width:24px}
  .menu .price{font-family:var(--font-display);font-size:var(--step-1);font-weight:var(--wt-h1);color:var(--brand);white-space:nowrap}
  .menu li p{color:var(--muted);font-size:var(--step--1);margin-top:2px;max-width:none}
  .menu-card .btn{width:100%;margin-top:var(--space-5)}
  .menu-offer{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
  .menu-offer strong{display:block;font-family:var(--font-display);font-weight:var(--wt-h1);font-size:var(--step-0);color:var(--brand)}
  .menu-offer ul{list-style:none;margin-top:var(--space-2)}
  .menu-offer li{font-size:var(--step--1);color:var(--muted);padding:2px 0;position:relative;padding-left:16px}
  .menu-offer li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:2px;background:var(--accent)}
  .menu-card .seasonal{margin-top:var(--space-3);font-size:var(--step--1);font-weight:700;color:var(--brand);max-width:none}
  .menu-card .foot{margin-top:var(--space-4);font-size:var(--step--1);color:var(--muted);max-width:none}

  /* About: one framed photo with an offset accent border, beside the clinic story,
     with a plain stats row beneath. */
  .about-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-7);align-items:center;margin-top:var(--space-5)}
  .frame{position:relative;margin:0}
  .frame img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
  .frame::after{content:"";position:absolute;inset:0;transform:translate(12px,12px);border:2px solid var(--accent);border-radius:var(--radius);z-index:0}
  .frame figcaption{margin-top:var(--space-4);font-size:var(--step--1);color:var(--muted);border-left:2px solid var(--accent);padding-left:var(--space-3)}
  .frame figcaption strong{display:block;font-family:var(--font-display);color:var(--brand);font-size:var(--step-0);font-weight:var(--wt-head)}
  .about-copy p+p{margin-top:var(--space-4)}
  .about-stats{display:flex;flex-wrap:wrap;margin-top:var(--space-6);border-top:1px solid var(--line);padding-top:var(--space-5)}
  .about-stats>div{flex:1 1 160px;padding:0 var(--space-5)}
  .about-stats>div:first-child{padding-left:0}
  .about-stats>div+div{border-left:1px solid var(--line)}
  .about-stats strong{display:block;font-family:var(--font-display);font-size:var(--step-3);font-weight:var(--wt-head);color:var(--brand);line-height:1.1}
  .about-stats span{color:var(--muted);font-size:var(--step--1)}

  /* Bespoke components collapse on the same breakpoints base.css uses. */
  @media(max-width:960px){
    .sessions-grid,.about-cols{grid-template-columns:1fr;gap:var(--space-6)}
  }
  @media(max-width:640px){
    .about-stats>div{flex:1 1 100%;padding:var(--space-3) 0}
    .about-stats>div+div{border-left:0;border-top:1px solid var(--line)}
  }

  /* ===========================================================================
     SUBPAGE CONVERSION ADDITIONS (2026-07-16): two small rules the subpages need
     that neither base.css nor the homepage skin above carries. Tokens only, no
     new colours or components. FLAGGED in the conversion report.
     =========================================================================== */

  /* 1. Compact-hero action row on the service pages: the Book button beside the
        phone link. base.css only scopes .cta-row inside .hero / .final. */
  .page-hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-5)}

  /* 2. Keep a section eyebrow tight to the h2 it labels inside a service-page
        .article-body (base.css gives .article-body h2 a large top margin, which
        would otherwise strand the eyebrow above it). */
  .article-body .eyebrow{margin-top:var(--space-7)}
  .article-body>.eyebrow:first-child{margin-top:0}
  .article-body .eyebrow+h2{margin-top:0}