/* ==========================================================================
   Marigold & Sage — shared stylesheet
   Boho / warm-earthy palette. Modern serif display (Fraunces) over a humanist
   sans. Structure lifted from the static-site-deploy block system; palette and
   type tuned for an independent hair studio (Tier 2: full motion).
   Fraunces is self-hosted (scripts/get_font.py) — a warm, organic modern serif
   that suits salons far better than the default Georgia. Zero external requests.
   ========================================================================== */

@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url("fonts/fraunces-500-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/fraunces-600.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/fraunces-700.woff2") format("woff2");
}
/* Body + label: Mulish, a clean humanist sans chosen to pair with Fraunces —
   contrast in category (sans under serif), agreement in mood (both warm). */
@font-face{
  font-family:"Mulish";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/mulish-400.woff2") format("woff2");
}
@font-face{
  font-family:"Mulish";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/mulish-600.woff2") format("woff2");
}
@font-face{
  font-family:"Mulish";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/mulish-700.woff2") format("woff2");
}

/* ---- tokens ---- */
:root{
  --content:660px; --wide:1180px; --pad:1.5rem;
  --space-s:1rem; --space-m:2rem; --space-l:4rem; --space-xl:6rem;
  --radius:2px;            /* editorial direction: near-square, refined */
  --radius-lg:2px;         /* images square too — editorial, not soft-boho */
  --measure:66ch; --header-h:70px;

  /* palette — contrast-verified with scripts/contrast.py */
  --brand-primary:#A8552F; /* terracotta: warm, handmade, artisanal */
  --brand-dark:#4A342A;    /* deep clay-brown */
  --ground:#FBF6EE;        /* warm cream, never pure grey */
  --tint:#EDE6D8;          /* oat / soft sand for alternating bands */
  --ink:#2C2621;           /* brown-black */
  --ink-dim:#6A5C50;       /* warm secondary */
  --accent:#7B8A5A;        /* sage — large / decorative use only on dark */

  --serif:"Fraunces",Georgia,"Iowan Old Style",Palatino,serif;
  --sans:"Mulish","Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
[id]{scroll-margin-top:calc(var(--header-h) + 1.25rem)}
html{overflow-x:clip}   /* never scroll sideways; clip won't break sticky like hidden can */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  line-height:1.7;-webkit-font-smoothing:antialiased;font-synthesis:none;font-kerning:normal;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-primary)}

/* ---- width / flow system ---- */
.flow{display:grid;grid-template-columns:[full-start] minmax(var(--pad),1fr) [wide-start] minmax(0,calc((var(--wide) - var(--content))/2)) [content-start] min(var(--content),100% - (var(--pad)*2)) [content-end] minmax(0,calc((var(--wide) - var(--content))/2)) [wide-end] minmax(var(--pad),1fr) [full-end]}
.flow>*{grid-column:content}
.flow>.alignwide{grid-column:wide}
.flow>.alignfull{grid-column:full}
.band{padding-block:var(--space-xl)}
.band--tint{background:var(--tint)}
.band--dark{background:var(--brand-dark);color:#fff}
.band--dark .eyebrow{color:#E8C9AE}
.band--dark a{color:#fff}

.cover{position:relative;display:grid;align-items:center;min-height:var(--cover-h,66vh);
  padding-block:var(--space-xl);background-size:cover;background-position:center;isolation:isolate}
.cover::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cover-overlay,rgba(0,0,0,.5))}
.cover>*{position:relative}
.cover,.cover h1,.cover h2,.cover p{color:#fff}
.cover .eyebrow{color:#F1D9C4}

/* ---- typography ---- */
h1,h2,h3{font-family:var(--serif);line-height:1.14;text-wrap:balance;margin:0 0 var(--space-s);font-weight:700;letter-spacing:-.005em}
h1{font-size:clamp(2.3rem,5.6vw,3.7rem)}
h2{font-size:clamp(1.75rem,3.8vw,2.5rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.45rem)}
p{margin:0 0 var(--space-s);max-width:var(--measure)}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--ink-dim)}
.cover .lede{color:#F3EAdf}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  font-weight:700;margin-bottom:.7rem;color:var(--brand-primary)}
.section-head{text-align:center;margin-bottom:var(--space-l)}
.section-head p{margin-inline:auto}
.script{font-family:var(--serif);font-style:italic;font-weight:400}

/* ---- buttons ---- */
.buttons{display:flex;gap:var(--space-s);flex-wrap:wrap}
.buttons--center{justify-content:center}
.btn{display:inline-block;padding:.85rem 1.8rem;border-radius:var(--radius);font-weight:700;
  font-family:var(--sans);font-size:.98rem;text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.btn--primary{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.btn--primary:hover{background:#8f4526;border-color:#8f4526}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--light{background:#fff;border-color:#fff;color:var(--brand-dark)}
.btn--light:hover{background:#F3EADF;border-color:#F3EADF}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--brand-primary);outline-offset:3px}

/* ---- header ---- */
header{background:rgba(251,246,238,.94);backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid rgba(74,52,42,.12);position:sticky;top:0;z-index:20}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--pad);max-width:var(--wide);margin:0 auto;transition:padding .28s ease}
header[data-shrink-header].shrunk .bar{padding-block:.5rem}
header a{color:var(--ink);text-decoration:none;font-weight:600}
.brand{font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;color:var(--brand-dark)!important}
.brand .amp{color:var(--brand-primary)}
nav{display:flex;gap:1.4rem;align-items:center}
nav .navlink{font-size:.95rem}
nav .navlink[aria-current="page"]{color:var(--brand-primary)}
@media(max-width:720px){nav .hide-sm{display:none}}

/* ---- cards / columns / media-text ---- */
.columns{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.media-text{display:grid;gap:var(--space-l);align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.media-text>img{width:100%;height:auto;border-radius:var(--radius-lg)}
@media(min-width:760px){.media-text--flip>:first-child{order:2}}
@media(max-width:860px){.media-text{grid-template-columns:1fr;gap:var(--space-m)}}
.card{padding:var(--space-m);border-radius:var(--radius);background:#fff;
  border:1px solid rgba(74,52,42,.1)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--ink-dim)}
.card p:last-child{margin-bottom:0}
.step-num{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  font-family:var(--serif);font-weight:700;font-size:1.1rem;margin-bottom:var(--space-s);
  background:var(--brand-primary);color:#fff}

/* ---- price / service list ---- */
.pricelist{list-style:none;padding:0;margin:0;display:grid;gap:0}
.pricelist li{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid rgba(74,52,42,.14)}
.pricelist li:last-child{border-bottom:0}
.pricelist .svc{font-family:var(--serif);font-size:1.2rem;font-weight:700}
.pricelist .svc small{display:block;font-family:var(--sans);font-weight:400;font-size:.9rem;
  color:var(--ink-dim);margin-top:.15rem;max-width:46ch}
.pricelist .amt{white-space:nowrap;font-weight:700;color:var(--brand-primary);font-size:1.05rem}

/* ---- gallery ---- */
.gallery{display:grid;gap:var(--space-s);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--radius)}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s var(--motion-ease,ease)}
.gallery figure:hover img{transform:scale(1.05)}

/* ---- testimonial ---- */
.quote{max-width:40ch;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1.35;margin:0 0 var(--space-s);text-wrap:balance}
.quote cite{font-style:normal;font-weight:700;color:var(--ink-dim);font-size:.95rem}

/* ---- badges / trust row ---- */
.badges{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:center;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;
  color:var(--ink-dim);font-weight:700}
.badges span{display:inline-flex;align-items:center;gap:.45rem}

/* ---- booking form ---- */
.formcard{background:#fff;border:1px solid rgba(74,52,42,.12);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,4vw,2.6rem)}
.field{margin-bottom:1.2rem}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:1rem;
  color:var(--ink);background:var(--ground);border:1px solid rgba(74,52,42,.25);
  border-radius:var(--radius);padding:.8rem .9rem}
.field textarea{min-height:6.5rem;resize:vertical}
.field-row{display:grid;gap:1.2rem;grid-template-columns:1fr 1fr}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.formnote{color:var(--ink-dim);font-size:.88rem;margin-top:.4rem}

/* ---- footer ---- */
footer{background:var(--brand-dark);color:#F3EADF;padding-block:var(--space-l)}
footer a{color:#fff}
footer .cols{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
footer h3{color:#fff;font-size:1.15rem}
footer .fine{opacity:.75;font-size:.85rem;margin-top:var(--space-m)}

/* ---- sample-site marker (this is a demo, not a real business) ---- */
.samplebar{background:var(--brand-dark);color:#F3EADF;text-align:center;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;padding:.5rem 1rem}
.samplebar b{color:#fff}

/* mobile sticky call/book bar */
.mobilecta{display:none}
@media(max-width:720px){
  .mobilecta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;gap:0;
    box-shadow:0 -2px 14px rgba(0,0,0,.18)}
  .mobilecta a{flex:1;text-align:center;padding:.95rem;font-weight:700;text-decoration:none;font-size:.95rem}
  .mobilecta .call{background:#fff;color:var(--brand-dark)}
  .mobilecta .book{background:var(--brand-primary);color:#fff}
  main{padding-bottom:3.6rem}
}


/* ============================================================
   Editorial direction (Direction C) — type-led hero, no overlay,
   hairline rules instead of heavy colour bands, squared shape.
   ============================================================ */
.hero-ed{max-width:var(--wide);margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--pad) clamp(2rem,5vw,3.5rem)}
.hero-ed .meta{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:.74rem;color:var(--brand-primary);margin:0 0 1.4rem}
.hero-ed h1{font-size:clamp(2.9rem,8vw,6rem);line-height:1.02;letter-spacing:-.02em;
  max-width:15ch;margin:0 0 1.3rem}
.hero-ed .lede{max-width:46ch;margin-bottom:2rem}
.hero-ed .actions{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
/* editorial button: squared, uppercase, confident single action */
.btn--ed{text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;padding:1rem 2rem}
.btn-link{font-weight:700;text-decoration:none;color:var(--brand-primary);
  text-transform:uppercase;letter-spacing:.1em;font-size:.82rem}
.btn-link:hover{color:var(--brand-dark)}
/* hairline rule between editorial sections, replacing colour bands */
.rule{border:0;border-top:1px solid rgba(74,52,42,.18);margin:0;max-width:var(--wide);
  margin-inline:auto}
/* full-bleed image band that follows the type hero */
.imgband{margin:0}
.imgband img{width:100%;height:clamp(300px,52vh,560px);object-fit:cover;display:block}
/* editorial pull-quote — replaces the heavy dark testimonial band */
.pullquote{max-width:var(--wide);margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--pad);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.pullquote .mark{font-family:var(--serif);font-size:5rem;line-height:.7;color:var(--brand-primary);opacity:.5}
.pullquote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.3;margin:0 0 1rem;max-width:24ch;text-wrap:balance}
.pullquote cite{font-style:normal;font-weight:700;color:var(--ink-dim);font-size:.95rem;
  font-family:var(--sans)}
@media(max-width:640px){.pullquote{grid-template-columns:1fr}.pullquote .mark{display:none}}
/* editorial header: static, contained, thin rule, brand centred is optional */
header.head-ed{position:static;background:var(--ground);backdrop-filter:none;
  border-bottom:1px solid rgba(74,52,42,.18)}

/* ---- minimal top bar + slide-out left drawer (hidden, pops out) ---- */
.topbar{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:1rem 1.4rem;background:var(--ground);border-bottom:1px solid rgba(74,52,42,.12)}
.topbar .brand{font-size:1.3rem}
.navtoggle{display:inline-flex;align-items:center;gap:.55rem;background:transparent;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink);padding:.4rem .1rem}
.navtoggle svg{display:block}
.drawer-scrim{position:fixed;inset:0;background:rgba(28,20,14,.5);z-index:30;opacity:0;pointer-events:none;
  transition:opacity .3s ease}
.drawer-scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;inset:0 auto 0 0;width:min(330px,84vw);z-index:40;background:var(--tint);
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.16,.8,.3,1);
  display:flex;flex-direction:column;padding:1.7rem;box-shadow:6px 0 40px rgba(0,0,0,.16);will-change:transform}
.drawer.open{transform:translateX(0)}
.drawerhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.drawerhead .brand{font-size:1.2rem;font-family:var(--serif);font-weight:700;color:var(--brand-dark)}
.drawerhead .brand .amp{color:var(--brand-primary)}
.navclose{background:transparent;border:0;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--ink);padding:.1rem .35rem}
.drawer nav{display:flex;flex-direction:column;gap:.1rem}
.drawer nav a{font-family:var(--serif);font-size:1.55rem;color:var(--ink);text-decoration:none;padding:.55rem 0;
  border-bottom:1px solid rgba(74,52,42,.1)}
.drawer nav a:hover,.drawer nav a[aria-current="page"]{color:var(--brand-primary)}
.drawer-cta{margin-top:auto}
.navtoggle:focus-visible,.navclose:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.drawer,.drawer-scrim{transition:none}}
/* no-JS fallback: show the links inline so the nav is never trapped */
html:not(.js) .navtoggle,html:not(.js) .drawer-scrim,html:not(.js) .drawerhead{display:none}
html:not(.js) .drawer{position:static;transform:none;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:1rem;width:auto;box-shadow:none;background:transparent;padding:.6rem 1.4rem 1rem}
html:not(.js) .drawer nav{flex-direction:row;gap:1.2rem}
html:not(.js) .drawer nav a{font-size:1rem;border:0;padding:0}

/* ===== motion (from static-site-deploy assets/motion.css) ===== */
/* ===========================================================================
   Motion, using the WordPress vocabulary.

   Elementor and Enfold between them define what small-business clients mean
   by "animations". Their taxonomy:

     Entrance animations  fadeInUp, slideInLeft, zoomIn ...  (animate.css names)
     Scrolling effects    vertical scroll (parallax), transparency, blur,
                          rotate, scale, horizontal scroll
     Mouse effects        3D tilt, mouse track            (desktop only)
     Sticky header        shrink on scroll

   This reproduces the ones worth having without the theme. Pair with
   motion.js, which adds `.in` when an element scrolls into view.

   IMPORTANT: read references/motion.md before applying any of this. Whether a
   site should animate at all depends on the customer's state of mind when they
   arrive, and for some categories the correct amount of motion is none.
   ========================================================================= */

:root{
  --motion-dur: .7s;
  --motion-ease: cubic-bezier(.16,.8,.3,1);   /* decelerate; feels arriving, not launched */
  --motion-stagger: 110ms;
  --motion-distance: 26px;
}

/* --- entrance animations -------------------------------------------------
   Elementor's "Entrance Animation". Element starts displaced and transparent,
   motion.js adds .in when it scrolls into view.
   Usage: <div data-reveal="fade-up">
   ------------------------------------------------------------------------ */
[data-reveal]{
  opacity: 0;
  transition: opacity var(--motion-dur) var(--motion-ease),
              transform var(--motion-dur) var(--motion-ease),
              filter    var(--motion-dur) var(--motion-ease);
}
[data-reveal="fade"]       { transform: none; }
[data-reveal="fade-up"]    { transform: translateY(var(--motion-distance)); }
[data-reveal="fade-down"]  { transform: translateY(calc(var(--motion-distance) * -1)); }
[data-reveal="slide-left"] { transform: translateX(calc(var(--motion-distance) * 1.6)); }
[data-reveal="slide-right"]{ transform: translateX(calc(var(--motion-distance) * -1.6)); }
[data-reveal="zoom-in"]    { transform: scale(.93); }
[data-reveal="zoom-out"]   { transform: scale(1.07); }
[data-reveal="blur"]       { filter: blur(9px); }

[data-reveal].in{ opacity: 1; transform: none; filter: none; }

/* --- stagger --------------------------------------------------------------
   Enfold's av-animation-delay-container. Children arrive in sequence so a row
   assembles instead of popping. Set --i per child (0,1,2...).
   Past about five items the tail feels slow: drop the stagger or shorten it.
   ------------------------------------------------------------------------ */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * var(--motion-stagger)); }

/* --- sticky header shrink -------------------------------------------------
   Enfold's data-av_shrink_factor. motion.js toggles .shrunk past a threshold.
   ------------------------------------------------------------------------ */
[data-shrink-header]{ transition: padding .28s ease, background-color .28s ease; }
[data-shrink-header] .bar{ transition: padding .28s ease; }

/* --- parallax -------------------------------------------------------------
   Elementor's "Vertical Scroll". motion.js sets the transform.
   will-change promotes it to its own layer so scrolling stays smooth.
   ------------------------------------------------------------------------ */
[data-parallax]{ will-change: transform; }

/* --- marquee --------------------------------------------------------------
   Pure CSS, no JS. Duplicate the list contents so -50% loops seamlessly.
   ------------------------------------------------------------------------ */
.marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee > *{
  display: flex;
  gap: 3rem;
  width: max-content;
  list-style: none;
  margin: 0; padding: 0;
  animation: marquee-x var(--marquee-dur, 30s) linear infinite;
}
.marquee:hover > *{ animation-play-state: paused; }
@keyframes marquee-x{ to { transform: translateX(-50%); } }

/* --- hover micro-interactions ---------------------------------------------
   The cheapest motion with the best return: it responds to intent rather than
   playing at the visitor.
   ------------------------------------------------------------------------ */
[data-lift]{ transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
[data-lift]:hover{ transform: translateY(-4px); }

/* 3D tilt (Elementor "Mouse Effects"). Desktop only — motion.js skips touch. */
[data-tilt]{ transition: transform .18s ease; transform-style: preserve-3d; }

/* ===========================================================================
   Reduced motion.

   Elementor and Enfold both honor this, and so must we. Vestibular disorders
   make large motion genuinely nauseating, and the OS setting is how someone
   tells you to stop. Content must still be VISIBLE — the failure mode to avoid
   is disabling the transition while leaving opacity:0, which hides the page.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-parallax]{ transform: none !important; }
  .marquee > *{ animation: none !important; }
}

/* Safety net: if JavaScript fails or is blocked, content must not stay
   invisible. .js is added to <html> by motion.js the moment it runs, so
   without JS the opacity:0 rule above never applies. */
html:not(.js) [data-reveal]{ opacity: 1; transform: none; filter: none; }