/* Tracy Coffey + Her Inner Warrior — shared styles
   Layout, motion, and menu adapted from the FabrizioTech home page (the
   approved design reference). All colors come from themes.css (link it
   BEFORE this file). Fonts are set via the variables below and are easy to
   swap; colors all live in themes.css. */

:root{
  /* Headers/UI: Quicksand — rounded, elegant, thin geometric (self-hosted).
     Body: Thasadith. Swap these to change fonts sitewide; drop a licensed
     Quiche Sans @font-face into fonts.css and point --font-display at it. */
  --font-display:'Quicksand', system-ui, sans-serif;
  --font-body:'Thasadith', system-ui, sans-serif;
  --font-ui:'Quicksand', system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:90px}
body{font-family:var(--font-ui);font-weight:400;color:var(--tx);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
p,li,blockquote,.hero-p,.lead{font-family:var(--font-body);font-weight:400}
img{max-width:100%;display:block}

/* NAV / MENU */
nav{position:fixed;top:0;width:100%;z-index:100;background:var(--nav-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr)}
.ni{max-width:1200px;margin:0 auto;padding:1.4rem 2.5rem;display:flex;justify-content:space-between;align-items:center;gap:3rem}
.logo{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--cream);text-decoration:none;text-transform:uppercase;letter-spacing:0.28em;flex-shrink:0;margin-right:auto}
.logo span{color:var(--rose)}
.nl{display:flex;gap:1.9rem;list-style:none;align-items:center;flex-shrink:0}
.nl a{font-family:var(--font-ui);font-size:0.68rem;font-weight:400;color:var(--tx-d);text-decoration:none;text-transform:uppercase;letter-spacing:0.18em;transition:color 0.3s;white-space:nowrap}
.nl a:hover{color:var(--rose-l)}
.nc{color:var(--cream)!important;border:1px solid var(--rose);padding:0.55rem 1.6rem;transition:all 0.3s!important}
.nc:hover{border-color:var(--rose-l)}
.hb{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hb span{width:22px;height:1.5px;background:var(--tx-d);display:block;transition:transform 0.32s ease,opacity 0.2s ease}
.hb:has(+ .nl.open) span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hb:has(+ .nl.open) span:nth-child(2){opacity:0}
.hb:has(+ .nl.open) span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* HOME CARD (app rule 4: Home sits on a card, top-left of the menu) */
.home-card{display:inline-flex;align-items:center;gap:0.5rem;background:var(--bg-card);border:1px solid var(--bdr);border-radius:6px;padding:0.4rem 0.9rem!important;color:var(--cream)!important;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.home-card:hover{border-color:var(--rose-l);color:var(--rose-l)!important}

/* HERO */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg-parallax{position:absolute;inset:-6% 0;will-change:transform}
/* Subtle photo layer sits behind the translucent gradient wash. */
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:72% 30%;filter:saturate(.25)}
.hero-bg-inner{position:absolute;inset:0;
  background:
    radial-gradient(60% 55% at 22% 18%, var(--hero-glow), transparent 60%),
    radial-gradient(55% 55% at 88% 88%, var(--hero-glow-2), transparent 55%),
    linear-gradient(160deg, rgba(var(--bg-rgb),0.84), rgba(var(--bg-rgb),0.93) 60%);
}
.hc{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:9rem 2.5rem 5rem;width:100%;opacity:var(--hero-fade,1)}
.he{font-family:var(--font-ui);font-size:0.66rem;font-weight:500;text-transform:uppercase;letter-spacing:0.35em;color:var(--accent);margin-bottom:1.6rem}
.hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,6vw,5rem);line-height:1.08;letter-spacing:0.14em;color:var(--cream);text-transform:uppercase;margin-bottom:1.4rem}
.hero-p{font-size:1rem;color:var(--tx-d);max-width:560px;line-height:1.75}
.cta{display:inline-block;font-family:var(--font-ui);font-size:0.72rem;font-weight:500;text-transform:uppercase;letter-spacing:0.25em;color:var(--cta-tx);background:linear-gradient(135deg,var(--rose) 0%,var(--rose-g) 100%);padding:1.1rem 3rem;text-decoration:none;transition:all 0.4s;border:none;cursor:pointer}
.cta:hover{transform:translateY(-2px);box-shadow:0 15px 40px var(--glow-soft)}
.cta-o{background:none;border:1px solid var(--rose);color:var(--cream)}
.cta-o:hover{background:var(--rose);color:var(--cta-tx);box-shadow:none}
.cta.soon{opacity:0.6;pointer-events:none;box-shadow:none;transform:none;background:none;border:1px solid var(--bdr);color:var(--tx-d)}

/* SECTIONS (for future content pages) */
.sec{padding:6rem 2.5rem}
.si{max-width:1000px;margin:0 auto}
.se{font-family:var(--font-ui);font-size:0.65rem;font-weight:500;text-transform:uppercase;letter-spacing:0.35em;color:var(--accent);margin-bottom:1.2rem}
.st{font-family:var(--font-display);font-weight:300;text-transform:uppercase;letter-spacing:0.08em;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--cream);margin-bottom:1.5rem}
.divider{border:none;border-top:1px solid var(--bdr);margin:0}

/* FOOTER */
footer{border-top:1px solid var(--bdr);padding:3rem 2.5rem;text-align:center;background:var(--bg-up)}
footer .fbd{font-family:var(--font-display);font-size:1rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--cream);margin-bottom:0.6rem}
footer .fbd span{color:var(--rose)}
footer p{font-size:0.72rem;color:var(--tx-f)}
footer a{color:var(--tx-d);text-decoration:none;transition:color 0.3s}
footer a:hover{color:var(--rose-l)}

/* IMAGE CARDS (app rules 2 & 5: images live in contained cards, even rows) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.card{background:var(--bg-card);border:1px solid var(--bdr);border-radius:8px;overflow:hidden;transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease}
.card:hover{transform:translateY(-4px);border-color:var(--bdr-h);box-shadow:0 18px 42px var(--glow-medium)}
.card-img{aspect-ratio:3/2;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.card:hover .card-img img{transform:scale(1.045)}
.card-body{padding:1.4rem 1.5rem 1.6rem}
.card-body h3{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:0.1em;font-size:0.92rem;color:var(--cream);margin-bottom:0.5rem}
.card-body p{font-size:0.85rem;color:var(--tx-d);line-height:1.65}

/* SUBTLE IMAGE BAND (photo behind a translucent overlay; text stays legible) */
.imgband{position:relative;padding:7rem 2.5rem;text-align:center;overflow:hidden;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.imgband-photo{position:absolute;inset:0;background-size:cover;background-position:center 35%;z-index:0}
.imgband::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(var(--bg-rgb),0.80),rgba(var(--bg-rgb),0.88))}
.imgband .si{position:relative;z-index:2}

/* TWO-UP CARDS (demo landing: Client / Operations) */
.cards.two{grid-template-columns:repeat(2,1fr)}
.card-cta{display:inline-block;margin-top:1rem;font-family:var(--font-ui);font-size:0.68rem;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--rose-l);text-decoration:none}
.card-cta:hover{color:var(--cream)}

/* OPERATIONS DASHBOARD PREVIEW (styled mock, not a photo) */
.opsprev{width:100%;height:100%;background:linear-gradient(160deg,var(--bg-up),var(--bg-card));padding:1.1rem;display:flex;flex-direction:column;gap:0.55rem;justify-content:center}
.opsprev-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}
.opsprev-tile{background:var(--bg-card);border:1px solid var(--bdr);border-radius:6px;padding:0.55rem 0.6rem;text-align:left}
.opsprev-tile b{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:500;color:var(--rose-l);line-height:1}
.opsprev-tile span{font-size:0.5rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--tx-f)}
.opsprev-row{display:flex;align-items:center;gap:0.5rem;background:var(--bg-card);border:1px solid var(--bdr);border-radius:6px;padding:0.5rem 0.6rem;font-size:0.62rem;color:var(--tx-d)}
.opsprev-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.opsprev-row .tag{margin-left:auto;font-size:0.5rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-f)}

/* WHAT'S INSIDE (two columns) */
.splits{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:3rem}
.split h3{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:0.1em;font-size:0.95rem;color:var(--cream);margin-bottom:1.1rem}
.split ul{list-style:none}
.split li{position:relative;padding-left:1.3rem;margin-bottom:0.7rem;font-family:var(--font-body);font-size:0.88rem;color:var(--tx-d);line-height:1.5}
.split li::before{content:'—';position:absolute;left:0;color:var(--accent)}

/* REVEAL ON SCROLL */
.rv{opacity:0;transform:translateY(25px);transition:opacity 0.8s ease,transform 0.8s ease}
.rv.v{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:0.12s}
.rv.d2{transition-delay:0.24s}

/* RESPONSIVE */
@media(max-width:1024px){
  .nl{display:none}
  .hb{display:flex;order:3}
  .nl.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--nav-bg-o);padding:2rem 2.5rem;gap:1.5rem;border-top:1px solid var(--bdr-h);border-bottom:1px solid var(--bdr)}
}
@media(max-width:900px){
  .cards{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .cards.two{grid-template-columns:1fr}
  .splits{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:600px){
  .ni{padding:1.1rem 1.4rem;gap:1rem}
  .hc{padding:7rem 1.5rem 4rem}
  .sec{padding:4rem 1.5rem}
  .imgband{padding:4.5rem 1.5rem}
}

/* Motion off for users who ask for it */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hero-bg-parallax{transform:none!important}
  .hc{opacity:1!important}
}

/* ============================================================
   PAGE HEADER (content pages): compact band, no hero scroll.
   ============================================================ */
.ph{padding:8.5rem 2.5rem 3rem;border-bottom:1px solid var(--bdr);background:var(--bg-up)}
.ph .si{max-width:1000px}
.ph h1{font-family:var(--font-display);font-weight:300;text-transform:uppercase;letter-spacing:0.1em;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1;color:var(--cream);margin-bottom:0.8rem}
.ph p{font-size:1rem;color:var(--tx-d);max-width:640px;line-height:1.7}
.lead{font-size:1.02rem;color:var(--tx);max-width:640px;line-height:1.75;margin-bottom:1.2rem}
.sec p+p{margin-top:0.9rem}
.sec .si p{max-width:680px;color:var(--tx-d);line-height:1.75}
.sec.tight{padding:3.5rem 2.5rem}
.tbd{display:inline-block;font-family:var(--font-ui);font-size:0.6rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:var(--tx-f);border:1px dashed var(--bdr-h);padding:0.3rem 0.7rem;border-radius:3px}

/* ============================================================
   THIN ROWS (FabrizioTech index pattern). Every row is a link.
   ============================================================ */
.rows{border-top:1px solid var(--bdr);margin-top:2rem}
.row{display:grid;grid-template-columns:230px 1fr auto;align-items:baseline;gap:2.5rem;padding:1.2rem 1.25rem;border-bottom:1px solid var(--bdr);text-decoration:none;color:inherit;background:var(--bg-card);transition:padding 0.3s ease,background 0.3s ease}
.rows>.row:nth-child(even){background:var(--bg-up)}
.row:hover{background:var(--bg-card-h);padding-left:1.9rem}
.row-name{font-family:var(--font-ui);font-size:0.78rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:var(--cream)}
.row-desc{font-family:var(--font-body);font-size:0.9rem;color:var(--tx-d)}
.row-glyph{font-family:var(--font-ui);color:var(--accent);font-size:0.9rem;transition:transform 0.3s}
.row:hover .row-glyph{transform:translateX(5px)}

/* ============================================================
   FAQ (details rows) + simple two-column definition list
   ============================================================ */
.faq{border-top:1px solid var(--bdr);margin-top:2rem}
.faq details{border-bottom:1px solid var(--bdr);background:var(--bg-card)}
.faq details:nth-child(even){background:var(--bg-up)}
.faq summary{list-style:none;cursor:pointer;padding:1.2rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;font-family:var(--font-ui);font-size:0.78rem;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent);font-weight:400;font-size:1.1rem}
.faq details[open] summary::after{content:'\2212'}
.faq details p{padding:0 1.25rem 1.3rem;font-size:0.92rem;color:var(--tx-d);max-width:720px;line-height:1.7}
.dl{display:grid;grid-template-columns:200px 1fr;border-top:1px solid var(--bdr);margin-top:2rem}
.dl dt,.dl dd{padding:0.95rem 1.25rem;border-bottom:1px solid var(--bdr);font-size:0.9rem}
.dl dt{font-family:var(--font-ui);font-size:0.68rem;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--tx-d);background:var(--bg-up)}
.dl dd{color:var(--tx);background:var(--bg-card)}

/* ============================================================
   FORMS (public inquiry / application). Dropdowns, not button rows.
   ============================================================ */
.frm{max-width:640px;margin-top:2rem;display:grid;gap:1rem}
.frm label{display:grid;gap:0.4rem;font-family:var(--font-ui);font-size:0.64rem;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--tx-d)}
.frm input,.frm select,.frm textarea{font-family:var(--font-body);font-size:1rem;color:var(--tx);background:var(--bg-card);border:1px solid var(--bdr);border-radius:4px;padding:0.75rem 0.9rem;width:100%;transition:border-color 0.3s}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:none;border-color:var(--rose)}
.frm textarea{min-height:120px;resize:vertical}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.frm .cta{justify-self:start}
.frm-ok{display:none;margin-top:1.5rem;padding:1rem 1.25rem;border:1px solid var(--accent);font-family:var(--font-body);color:var(--tx)}
.frm-ok.show{display:block}

/* ============================================================
   IMAGE + COPY (image alternates with copy, always in a card)
   ============================================================ */
.ic{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:2.5rem}
.ic .card-img{border:1px solid var(--bdr);border-radius:8px;overflow:hidden;background:var(--bg-card);aspect-ratio:4/3}
.ic .card-img.portrait{aspect-ratio:1/1;max-width:400px;width:100%;margin-inline:auto;border-radius:22px}
.ic .card-img.portrait img{object-position:50% 30%}
.ic.flip .card-img{order:2}
.ic h3{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:0.1em;font-size:0.95rem;color:var(--cream);margin-bottom:0.8rem}

@media(max-width:900px){
  .row{grid-template-columns:1fr auto;gap:0.35rem 1rem;padding:1rem 0.75rem}
  .row-desc{grid-column:1/-1;font-size:0.85rem}
  .row:hover{padding-left:1.2rem}
  .dl{grid-template-columns:1fr}
  .dl dt{border-bottom:none;padding-bottom:0.3rem}
  .ic{grid-template-columns:1fr;gap:1.5rem}
  .ic.flip .card-img{order:0}
  .frm .two{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ph{padding:6.5rem 1.5rem 2.2rem}
  .sec.tight{padding:2.5rem 1.5rem}
}
.nl a.on{color:var(--cream)}

/* Hero CTA pair: wraps cleanly, stacks on phones */
.hero-ctas{display:flex;flex-wrap:wrap;gap:0.75rem}
.dl dd a{color:var(--rose-l);text-decoration:underline;text-underline-offset:3px}
.soon-tag{display:inline-block;margin-left:0.4rem;padding:0.15rem 0.45rem;border:1px solid var(--bdr-h);border-radius:999px;font-size:0.55rem;letter-spacing:0.12em;color:var(--accent);vertical-align:middle}
.back-link{display:inline-block;margin-bottom:1rem;font-family:var(--font-ui);font-size:0.66rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--rose-l);text-decoration:none}
.back-link::before{content:"\2190";margin-right:0.5rem}
.back-link:hover{color:var(--cream)}
.btn-note{display:block;margin-top:0.6rem;font-family:var(--font-ui);font-size:0.62rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--accent)}
/* Home: three stacked buttons that fade in one after another on page open */
.home-btns{display:flex;flex-direction:column;align-items:stretch;gap:0.85rem;width:100%;max-width:340px}
.home-btns .cta{text-align:center;padding-left:1.5rem;padding-right:1.5rem;opacity:0;animation:homeBtnIn 0.9s ease forwards}
.home-btns .cta:not(.cta-o){border:1px solid transparent}
.home-btns .cta:nth-child(1){animation-delay:0.5s}
.home-btns .cta:nth-child(2){animation-delay:0.85s}
.home-btns .cta:nth-child(3){animation-delay:1.2s}
.home-btns .btn-note{text-align:center;margin-top:-0.3rem;opacity:0;animation:homeBtnIn 0.9s ease 1.5s forwards}
@keyframes homeBtnIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.home-btns .cta,.home-btns .btn-note{opacity:1;animation:none}}
@media(max-width:600px){.hero-ctas{flex-direction:column;align-items:flex-start}.hero-ctas .cta{width:100%;max-width:320px;text-align:center}}
/* Seven-link brand navs need a little less air on mid-size desktops */
.ni{max-width:1280px}
@media(max-width:1500px){.nl{gap:1.3rem}.nl a{letter-spacing:0.14em}}


/* ============================================================
   CALM MOTION (Mel, 2026-10-27): elegant, quiet, never bouncy.
   Active tab, page-to-page fade, soft reveals. All off under
   prefers-reduced-motion.
   ============================================================ */

/* Active tab: the tab for the page you are on sits on a soft card with a
   gold hairline. Home is no longer always on a card; it gets one when active. */
.nl{gap:0.55rem}
.nl > li > a:not(.nc){position:relative;padding:0.45rem 0.95rem;border:1px solid transparent;border-radius:6px;transition:color .5s ease,background-color .5s ease,border-color .5s ease,box-shadow .5s ease}
.nl a.home-card:not(.on){background:none;border-color:transparent;box-shadow:none;color:var(--tx-d)!important}
.nl a.home-card:not(.on):hover{color:var(--rose-l)!important}
.nl > li > a.on:not(.nc){color:var(--cream)!important;background:var(--bg-card);border-color:var(--bdr);box-shadow:0 4px 18px rgba(var(--rose-rgb),0.10);view-transition-name:nav-on}
.nl > li > a.on:not(.nc)::after{content:'';position:absolute;left:0.95rem;right:0.95rem;bottom:0.28rem;height:1px;background:var(--rose);transform-origin:center;animation:tabLine 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
.nl a.nc.on{background:var(--rose);color:var(--cta-tx);border-color:var(--rose)}
@keyframes tabLine{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.8}}

/* Page to page: the content fades out and the next page fades in while the
   menu stays still and the highlight glides to the new tab. */
@view-transition{navigation:auto}
body > nav{view-transition-name:site-nav}
::view-transition-old(root){animation:vtOut .4s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vtIn .8s cubic-bezier(.2,.6,.2,1) both}
::view-transition-group(nav-on){animation-duration:.65s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* Softer reveals: a slow rise out of a light blur. */
.rv{transform:translateY(14px);filter:blur(3px);transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.2,.6,.2,1),filter 1.1s cubic-bezier(.2,.6,.2,1)}
.rv.v{filter:none}

/* List items arrive one after another. */
.splits.rv li{opacity:0;transform:translateY(8px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.6,.2,1)}
.splits.rv.v li{opacity:1;transform:none}
.splits.rv.v li:nth-child(1){transition-delay:.25s}
.splits.rv.v li:nth-child(2){transition-delay:.35s}
.splits.rv.v li:nth-child(3){transition-delay:.45s}
.splits.rv.v li:nth-child(4){transition-delay:.55s}
.splits.rv.v li:nth-child(5){transition-delay:.65s}
.splits.rv.v li:nth-child(6){transition-delay:.75s}
.splits.rv.v li:nth-child(n+7){transition-delay:.85s}

/* Photos settle gently into place. */
.ic.rv .card-img img{transform:scale(1.06);transition:transform 2.8s cubic-bezier(.2,.6,.2,1)}
.ic.rv.v .card-img img{transform:scale(1)}

/* A short gold line draws in under each section label. */
.se::after{content:'';display:block;width:0;height:1px;margin-top:0.75rem;background:var(--rose);opacity:.55;transition:width 1.4s cubic-bezier(.2,.7,.2,1) .35s}
.se.v::after{width:2.4rem}

/* Page header: a faint, slow drift of warm light. */
.ph{position:relative;overflow:hidden}
.ph::before{content:'';position:absolute;inset:-40%;pointer-events:none;background:radial-gradient(38% 48% at 30% 40%,rgba(var(--rose-rgb),0.10),transparent 70%),radial-gradient(34% 44% at 74% 62%,rgba(var(--accent-rgb),0.06),transparent 70%);animation:phDrift 26s ease-in-out infinite alternate}
.ph .si{position:relative;z-index:1}
@keyframes phDrift{from{transform:translate3d(-4%,-2%,0)}to{transform:translate3d(4%,3%,0)}}

@media(prefers-reduced-motion:reduce){
  .rv{filter:none}
  .splits.rv li{opacity:1;transform:none;transition:none}
  .ic.rv .card-img img{transform:none;transition:none}
  .se::after{width:2.4rem;transition:none}
  .ph::before{animation:none}
  .nl > li > a.on:not(.nc)::after{animation:none;opacity:.8}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Phone menu: solid background so the page does not show through. */
@media(max-width:1024px){.nl.open{background:var(--bg);box-shadow:0 18px 40px rgba(0,0,0,0.08)}}

/* Home: Tracy's photo in a small circle with her quote, beside the buttons */
.home-row{display:flex;align-items:center;gap:3.5rem;flex-wrap:wrap}
.home-quote{display:flex;align-items:center;gap:1.6rem;max-width:520px;margin:0;opacity:0;animation:homeBtnIn 1.2s ease 1.7s forwards}
.home-quote img{flex:none;width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:50% 32%;border:1px solid var(--rose);padding:5px;background:rgba(var(--bg-rgb),0.6);box-shadow:0 10px 30px rgba(var(--rose-rgb),0.16)}
.home-quote blockquote{margin:0}
.home-quote p{font-family:var(--font-body);font-style:italic;font-size:0.95rem;line-height:1.7;color:var(--tx)}
.home-quote figcaption{margin-top:0.7rem;font-family:var(--font-ui);font-size:0.62rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--accent)}
@media(max-width:900px){.home-row{gap:2.2rem}.home-quote{max-width:none}}
@media(max-width:600px){.home-quote{flex-direction:column;align-items:flex-start;gap:1rem}.home-quote img{width:104px;height:104px}}
@media(prefers-reduced-motion:reduce){.home-quote{opacity:1;animation:none}}

/* Begin: calendar placeholder until Tracy's calendar is connected */
.cal{position:relative;max-width:560px;border:1px solid var(--bdr);border-radius:14px;background:var(--bg-card);padding:1.4rem 1.4rem 1.6rem;overflow:hidden}
.cal-head{text-align:center;margin-bottom:1rem;font-family:var(--font-display);font-size:1rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--cream)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0.35rem;text-align:center}
.cal-grid b{font-family:var(--font-ui);font-weight:500;font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--tx-d);padding-bottom:0.4rem}
.cal-grid span{font-family:var(--font-ui);font-size:0.8rem;color:var(--tx-d);padding:0.6rem 0;border-radius:8px;border:1px solid var(--bdr)}
.cal-soon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-rgb),0.55);backdrop-filter:blur(2px)}
.cal-soon span{font-family:var(--font-ui);font-size:0.7rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--cream);background:var(--bg-card);border:1px solid var(--rose);border-radius:999px;padding:0.7rem 1.6rem}
@media(max-width:600px){.cal{padding:1rem}.cal-grid span{padding:0.45rem 0;font-size:0.72rem}}

/* Softer, rounded boxes (Mel, 2026-10-27): buttons, tables, FAQ, forms, cards */
.cta{border-radius:10px}
.nc{border-radius:8px}
.cta-o:hover,.cta-o:focus-visible,.cta-o:active{background:linear-gradient(135deg,var(--rose) 0%,var(--rose-g) 100%);color:var(--cta-tx);border-color:var(--rose)}
.dl{border:1px solid var(--bdr);border-radius:12px;overflow:hidden}
.dl > :nth-last-child(-n+2){border-bottom:none}
.faq{border:1px solid var(--bdr);border-radius:12px;overflow:hidden}
.faq details:last-child{border-bottom:none}
.frm input,.frm select,.frm textarea{border-radius:8px}
.card,.ic .card-img{border-radius:12px}
.ic .card-img.portrait{border-radius:22px}
.tbd{border-radius:999px}

/* Weekly therapy pointer (Headway) on Home and Meet Tracy */
.weekly-note{margin-top:2.4rem;max-width:620px;font-family:var(--font-body);font-size:0.86rem;line-height:1.6;color:var(--tx-d)}
.weekly-note a,.sec .si p a,.faq details p a{color:var(--rose-l);text-decoration:underline;text-underline-offset:3px}

/* Home opener (Mel, 2026-10-27): centered, elegant serif headline */
.hc-center{text-align:center}
.hc-center .he{margin-bottom:1.8rem}
.hero h1.hero-open{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;text-transform:none;letter-spacing:0.01em;font-size:clamp(3rem,7.5vw,6rem);line-height:1.02;margin-bottom:1rem;animation:openIn 1.6s cubic-bezier(.2,.6,.2,1) both}
.hero h1.hero-open em{font-style:italic;font-weight:400;color:var(--rose)}
.hero-name{font-family:var(--font-ui);font-size:0.74rem;font-weight:500;letter-spacing:0.38em;text-transform:uppercase;color:var(--cream);margin-bottom:1.6rem}
.hero-rule{display:block;width:3.2rem;height:1px;margin:0 auto 1.6rem;background:var(--rose);opacity:.7}
.hc-center .hero-p{margin:0 auto 2.6rem;max-width:600px;font-size:1.05rem}
.hc-center .home-row{justify-content:center;text-align:left}
.hc-center .weekly-note{margin-left:auto;margin-right:auto;text-align:center}
@keyframes openIn{from{opacity:0;letter-spacing:0.08em}to{opacity:1;letter-spacing:0.01em}}
@media(prefers-reduced-motion:reduce){.hero h1.hero-open{animation:none}}
@media(max-width:600px){.hc-center .home-quote{align-items:center;text-align:center}}

/* Home: inclusive welcome line under the hero description */
.hc-center .hero-p:has(+ .hero-welcome){margin-bottom:1.1rem}
.hero-welcome{display:flex;align-items:center;justify-content:center;gap:0.7rem;max-width:760px;margin:0 auto 2.4rem;font-family:var(--font-body);font-style:italic;font-size:0.95rem;line-height:1.6;color:var(--rose-l);text-align:center}
.hero-welcome::before,.hero-welcome::after{content:"";flex:none;width:5px;height:5px;border:1px solid var(--rose);transform:rotate(45deg)}
@media(max-width:600px){.hero-welcome{font-size:0.9rem;gap:0.5rem}.hero-welcome::before,.hero-welcome::after{display:none}}

/* Program-name eyebrow above page headers */
.ph-eyebrow{font-family:var(--font-ui);font-size:0.64rem;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);margin-bottom:0.9rem}
.ph .back-link + .ph-eyebrow{margin-top:0.2rem}

/* Couples Intensives: large "See the Space" feature button */
.space-btn{position:relative;display:block;margin-top:2rem;padding:2.6rem 5.5rem 2.6rem 2.6rem;border:1px solid var(--rose);border-radius:14px;text-decoration:none;color:var(--cream);background:linear-gradient(120deg,rgba(var(--rose-rgb),0.10),rgba(var(--rose-rgb),0.02) 60%),var(--bg-card);overflow:hidden;transition:transform .4s,box-shadow .4s,background .4s}
.space-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(var(--rose-rgb),0.18) 50%,transparent 70%);transform:translateX(-100%);transition:transform 1s ease}
.space-btn:hover{transform:translateY(-3px);box-shadow:0 18px 44px var(--glow-soft)}
.space-btn:hover::after{transform:translateX(100%)}
.space-k{display:block;font-family:var(--font-ui);font-size:0.62rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);margin-bottom:0.6rem}
.space-t{display:block;font-family:var(--font-serif);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;color:var(--cream)}
.space-s{display:block;margin-top:0.6rem;font-family:var(--font-body);font-size:1rem;color:var(--tx-d)}
.space-arrow{position:absolute;right:2.2rem;top:50%;translate:0 -50%;width:3.2rem;height:3.2rem;border:1px solid var(--rose);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--rose-l);transition:background .4s,color .4s}
.space-btn:hover .space-arrow{background:var(--rose);color:var(--cta-tx)}
@media(max-width:600px){.space-btn{padding:1.8rem 1.5rem 4.6rem}.space-arrow{top:auto;bottom:1.2rem;right:auto;left:1.5rem;translate:none;width:2.6rem;height:2.6rem}}
@media(prefers-reduced-motion:reduce){.space-btn,.space-btn::after{transition:none}.space-btn:hover{transform:none}}

/* Book page: intensive options + note */
.book-opts{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.book-opt{display:block;padding:1.6rem 1.6rem 1.7rem;border:1px solid var(--bdr);border-radius:12px;background:var(--bg-card);text-decoration:none;transition:border-color .3s,transform .3s}
.book-opt:hover{border-color:var(--rose);transform:translateY(-2px)}
.book-k{display:block;font-family:var(--font-ui);font-size:0.6rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--accent);margin-bottom:0.6rem}
.book-t{display:block;font-family:var(--font-serif);font-size:1.6rem;line-height:1.15;color:var(--cream)}
.book-s{display:block;margin-top:0.5rem;font-family:var(--font-body);font-size:0.92rem;color:var(--tx-d)}
.book-note{margin-top:1.4rem;font-size:0.92rem;color:var(--tx-d)}
.book-note a{color:var(--rose-l);text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.book-opts{grid-template-columns:1fr}}
@media(max-width:600px){.cal-soon span{font-size:0.58rem;letter-spacing:0.18em;padding:0.6rem 1rem;text-align:center;max-width:85%}}

/* Seven menu tabs: tighten spacing on narrower desktops so the theme toggle stays visible */
@media(min-width:1025px) and (max-width:1320px){.ni{gap:1.2rem;padding-left:1.8rem;padding-right:1.8rem}.nl{gap:0.2rem}.nl a{letter-spacing:0.12em;font-size:0.64rem}.nl > li > a:not(.nc){padding:0.45rem 0.6rem}.nl > li > a.on:not(.nc)::after{left:0.6rem;right:0.6rem}}

/* Page headers with a photo: image on the right, fading into the page colour behind the text */
.ph.ph-photo{padding-top:10.5rem;padding-bottom:5rem;background:var(--bg-up)}
.ph.ph-photo::after{content:"";position:absolute;top:0;bottom:0;right:0;left:36%;z-index:0;background:var(--ph-img) var(--ph-pos,50% 50%)/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.ph.ph-photo::before{z-index:0}
@media(max-width:700px){.ph.ph-photo{padding-top:13rem;padding-bottom:2.6rem}
  .ph.ph-photo::after{left:0;bottom:auto;height:15rem;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}}

/* See the Space button: autumn path photo behind */
.space-btn[style*="--space-img"]{background:linear-gradient(90deg,rgba(var(--bg-rgb),0.96) 0%,rgba(var(--bg-rgb),0.82) 45%,rgba(var(--bg-rgb),0.2) 100%),var(--space-img) 50% 55%/cover no-repeat;min-height:15rem;display:flex;flex-direction:column;justify-content:center}
@media(max-width:600px){.space-btn[style*="--space-img"]{background:linear-gradient(180deg,rgba(var(--bg-rgb),0.25) 0%,rgba(var(--bg-rgb),0.9) 55%),var(--space-img) 50% 40%/cover no-repeat;padding-top:9rem}}

/* Kintsugi feature (Infidelity and Betrayal page): bowl art + copy */
.kin{display:grid;grid-template-columns:1.05fr 1fr;gap:3.5rem;align-items:center}
.kin-art{margin:0;padding:2rem 1.5rem 1.4rem;border:1px solid var(--bdr);border-radius:14px;background:radial-gradient(70% 70% at 50% 40%,rgba(var(--rose-rgb),0.10),transparent 70%),var(--bg-card)}
.kin-art svg{display:block;width:100%;height:auto}
.kin-art{--kin:0}
.kin-art svg{transform:rotate(calc((var(--kin) - 0.5) * 5deg)) translateY(calc((0.5 - var(--kin)) * 14px));transition:transform .25s linear}
.kin-seams path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--kin));transition:stroke-dashoffset .2s linear}
.kin-seams{filter:drop-shadow(0 0 calc(var(--kin) * 6px) rgba(var(--rose-rgb),0.55))}
.kin-chip{opacity:clamp(0, calc((var(--kin) - 0.75) * 4), 1);transition:opacity .2s linear}
.kin-intro svg,.kin-intro .kin-seams path,.kin-intro .kin-chip{transition-duration:2.2s;transition-timing-function:cubic-bezier(.4,.1,.2,1)}
@media(max-width:800px){.kin{grid-template-columns:1fr;gap:2rem}}
@media(prefers-reduced-motion:reduce){.kin-art{--kin:1!important}.kin-art svg,.kin-seams path{transition:none}.kin-art svg{transform:none}}
.ph.ph-photo h1,.ph.ph-photo p{max-width:540px}
@media(max-width:700px){.ph.ph-photo h1,.ph.ph-photo p{max-width:none}}

/* Home: cinematic banner. Full-colour sunset photo under a deep warm shade;
   light text in both themes (colour tokens re-scoped to this section). */
.hero.hero-cinema{min-height:100vh;--cream:#F7EFDB;--tx:#F0E8D5;--tx-d:#E4DAC4;--accent:#E6D29C;--rose:#D9B25E;--rose-g:#E9C97A;--rose-l:#EDCD82;--rose-rgb:217,178,94;--bg-rgb:28,22,14;--cta-tx:#1F1A12;--glow-soft:rgba(217,178,94,0.35)}
.hero-cinema .hero-photo{filter:none;background-position:50% 62%;transform:scale(1.04);animation:cineDrift 30s ease-in-out infinite alternate}
.hero-cinema .hero-bg-inner{background:
  radial-gradient(60% 45% at 50% 62%,rgba(255,190,90,0.10),transparent 70%),
  linear-gradient(180deg,rgba(20,15,9,0.62) 0%,rgba(20,15,9,0.42) 40%,rgba(20,15,9,0.58) 72%,rgba(20,15,9,0.86) 100%)}
.hero-cinema .home-quote img{background:rgba(255,255,255,0.08)}
.hero-cinema .cta-o{background:rgba(20,15,9,0.25);backdrop-filter:blur(3px)}
.hero-cinema h1.hero-open{text-shadow:0 2px 30px rgba(0,0,0,0.35)}
@keyframes cineDrift{from{transform:scale(1.04) translate3d(-1%,0,0)}to{transform:scale(1.1) translate3d(1%,-1%,0)}}
@media(max-width:700px){.hero-cinema .hero-photo{background-position:50% 50%}}
@media(prefers-reduced-motion:reduce){.hero-cinema .hero-photo{animation:none}}

/* Wide framed photo band */
.photo-band{border-radius:14px;overflow:hidden;border:1px solid var(--bdr);aspect-ratio:21/9}
.photo-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 30%}
@media(max-width:600px){.photo-band{aspect-ratio:4/3}}