/* Foi Hair Factory — design tokens, reset, typography, buttons.
   v2: calm neutral base with one saturated accent, hairline borders and a
   single radius scale (modern premium beauty, per the design research). */
:root{
  /* Neutrals — warm, faintly rosy so the brand still reads through. */
  --paper:#fbf7f5;
  --white:#ffffff;
  --blush:#f6e8ec;
  --ink:#1f1416;
  --ink-soft:#4a3a3e;
  --muted:#76666a;
  --line:rgba(31,20,22,.10);
  --line-strong:rgba(31,20,22,.18);

  /* Brand — used sparingly: CTAs, highlights, one feature block per page. */
  --gold:#c8102e;          /* primary accent (crimson) */
  --gold-dark:#a50d26;
  --wine:#e23f73;
  --wine-light:#f7789f;
  --gold-light:#f2a8c4;
  --deep:#3a0d16;          /* the one dark block + footer */
  --deep-soft:#55111c;

  /* Legacy aliases so older markup keeps rendering. */
  --ivory:var(--paper);

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --radius-pill:999px;
  --shadow-soft:0 1px 2px rgba(31,20,22,.04), 0 8px 24px rgba(31,20,22,.06);
  --shadow-lift:0 2px 4px rgba(31,20,22,.05), 0 18px 40px rgba(31,20,22,.10);
  --max:1240px;
  --gutter:clamp(16px, 4vw, 32px);
  --section-y:clamp(64px, 9vw, 128px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; }
p{ margin:0; }

h1,h2,h3,h4{
  font-family:"Fraunces",Georgia,serif;
  margin:0;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1 em, h2 em{ font-style:italic; color:var(--gold); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* The hidden attribute must win over component display rules
   (.photo-gallery is display:block, so `hidden` alone would not apply). */
[hidden]{ display:none !important; }

/* ===== Buttons — pill everywhere, one height, 48px tap target ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 26px;
  border-radius:var(--radius-pill);
  font-family:inherit;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-solid{ background:var(--gold); color:var(--white); }
.btn-solid:hover{ background:var(--gold-dark); }
.btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.6); }
.btn-outline:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn-outline-ink{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-outline-ink:hover{ border-color:var(--ink); }
.btn-ink{ background:var(--ink); color:var(--white); }
.btn-ink:hover{ background:#000; }

/* Arrow link — quiet secondary action. */
.link-arrow{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; font-size:.95rem; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--line-strong); padding-bottom:2px;
  transition:border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow::after{ content:"\2192"; }
.link-arrow:hover{ border-color:var(--ink); gap:10px; }

/* ===== Section furniture ===== */
.eyebrow{
  display:inline-block;
  margin-bottom:14px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
}
.section{ padding:var(--section-y) 0; }
.section-head{ margin-bottom:clamp(32px,4vw,48px); max-width:640px; }
.section-head h1,
.section-head h2{ font-size:clamp(2rem,4.2vw,3.1rem); }
.section-head p{ margin-top:16px; color:var(--muted); font-size:1.05rem; max-width:56ch; }
.section-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,48px);
}
.section-head-row .section-head{ margin-bottom:0; }

/* Section surfaces: a calm neutral base. Exactly one .on-deep (or legacy
   .on-ink / .on-wine) block per page carries the brand colour. */
.on-ivory,.on-paper{ background:var(--paper); color:var(--ink); }
.on-white{ background:var(--white); color:var(--ink); }
.on-blush,.on-gold-light{ background:var(--blush); color:var(--ink); }
.on-ink,.on-deep{ background:var(--deep); color:#f6e8ec; }
.on-wine{ background:var(--deep); color:#f6e8ec; }

.on-ink .eyebrow,.on-deep .eyebrow,.on-wine .eyebrow{ color:var(--gold-light); }
/* Scoped to the section's own headings, NOT headings inside white cards —
   the old blanket rule turned card titles white-on-white. */
.on-ink > .wrap > .section-head h1, .on-ink > .wrap > .section-head h2,
.on-deep > .wrap > .section-head h1, .on-deep > .wrap > .section-head h2,
.on-wine > .wrap > .section-head h1, .on-wine > .wrap > .section-head h2,
.on-ink .cta-banner h2, .on-deep .cta-banner h2, .on-wine .cta-banner h2{ color:var(--white); }
.on-ink .section-head p,.on-deep .section-head p,.on-wine .section-head p,
.on-wine .cta-banner p,.on-ink .cta-banner p{ color:rgba(246,232,236,.78); }

/* ===== Scroll reveal (enhancement only — content is visible without JS) ===== */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media print{ .js .reveal{ opacity:1 !important; transform:none !important; } }