/* Ritual by Marko Zirdum — ekstenzije kose
   Light editorial rebuild (2026-09-16): cream base, full-bleed hero image, large photography.
   Brand: logo gold #C0A17C · site CTA gold #BC9355 · deep bronze #6E5730 · ink #0F0E0D
   Type:  Playfair Display (display) + Open Sans (body) — the client's own faces. */

:root{
  --cream:#FBF8F4;       /* page base */
  --cream-2:#F4EDE4;     /* alternating band, warm */
  --paper:#FFFFFF;
  --ink:#171310;         /* headings */
  --body:#3A3532;        /* 11+:1 on cream */
  --muted:#6B615A;       /* 5.6:1 on cream */
  --gold:#C0A17C;        /* logo gold — hairlines, rules */
  --gold-cta:#BC9355;    /* the site's own button gold — FILL only */
  --gold-text:#6E5730;   /* deep bronze, safe as small text on cream */
  --line:#E7DCCC;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Open Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --track-lockup:.42em;
  --maxw:1300px;
  --gut:clamp(20px,4vw,56px);
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* aspect-ratio only computes a height when height is auto; the HTML height attribute is a
   presentational hint that otherwise wins silently. */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;
  letter-spacing:-.005em;text-wrap:balance;line-height:1.12}
h1{font-size:clamp(2.2rem,1.45rem + 3.1vw,4.05rem)}
h2{font-size:clamp(1.85rem,1.25rem + 2.3vw,3.15rem)}
h3{font-size:clamp(1.14rem,1.04rem + .4vw,1.4rem);line-height:1.3}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,6vw + 40px,142px)}
/* Rhythm on this page comes from BLOCK SHAPE and full-bleed photography, never from
   alternating background fills — that is what Great Lengths, Rapunzel and Beauty Works all
   do, and stacking two tinted bands is what made the earlier build read as flat.
   The one tint left is on the form, so the colour change means "this is the ask". */
.section--flush{padding-bottom:0}          /* section ends on its own full-bleed photo row */
.section--hair{border-top:1px solid var(--line)}  /* hairline, not a fill, between text blocks */
.section--white{background:var(--paper)}   /* the two sections Maja asked for, never adjacent */

.eyebrow{
  font-size:13px;font-weight:600;letter-spacing:var(--track-lockup);
  text-transform:uppercase;color:var(--gold-text);margin:0 0 18px;
  text-indent:var(--track-lockup);
}
.lead{font-size:clamp(1.05rem,1rem + .26vw,1.22rem);color:var(--body);max-width:60ch}
.muted{color:var(--muted)}
.sec-head{margin:0 auto clamp(44px,4vw,72px);text-align:center}
/* No ch cap on the heading itself — it may use the full column and balance its lines.
   The reading measure belongs on the PARAGRAPH, which is what it is for. */
.sec-head h2{margin-inline:auto}
.sec-head .lead{max-width:68ch;margin:20px auto 0;text-align:center}
.rule{width:52px;height:1px;background:var(--gold);margin:0 0 26px}
.sec-head .rule{margin-inline:auto}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:58px;padding:0 38px;border:0;border-radius:var(--radius);
  background:var(--gold-cta);color:#1A1207;   /* ink on gold, ~6.8:1 */
  font-family:var(--sans);font-size:15px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background .18s ease,transform .18s ease;text-align:center;
}
.btn:hover{background:#A87F43}
.btn:active{transform:translateY(1px)}
.btn--wide{width:100%}

/* ── header ────────────────────────────────────────────────────────────── */
.topbar{background:transparent;padding:22px 0 0}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar__logo{width:190px;height:auto}
.topbar__cta{
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-text);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid var(--gold);
}
.topbar__cta:hover{color:var(--ink)}

/* ── hero: text panel + full-bleed image column ────────────────────────── */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;
  /* Height is driven by WIDTH so the box matches the photo's own 1672:941 (1.78) ratio.
     A vh-based height made the box 2.05-2.28 wide-to-tall, and object-fit:cover then cut
     96-238px off the top and bottom (180px at 1512, 238px at 1920) — the letterbox look.
     Below ~1690px this crops nothing at all; past that the cap takes over. */
  min-height:max(560px, min(calc(100vw / 1.78), 950px));
  padding-block:clamp(48px,5vw,88px)}
.hero__bg{position:absolute;inset:0;z-index:-2;display:block}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 42%}
/* The photo's own left third is near-cream, but a tall viewport crops the sides, so a scrim
   guarantees the headline's contrast whatever the crop does. Measured, not eyeballed. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(251,248,244,.94) 0%, rgba(251,248,244,.88) 26%,
    rgba(251,248,244,.55) 44%, rgba(251,248,244,0) 62%);
}
/* Full-width grid: the LEFT padding aligns the copy to the same optical column as
   .wrap, while the image column simply runs out to the viewport edge. Doing it this way
   (rather than a negative margin on the figure) means no 100vw/scrollbar arithmetic and
   nothing to re-tune per breakpoint. */
.hero__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.hero__copy{max-width:min(52ch,57%)}
/* .hero__copy already bounds this column; a second ch cap only forced early wraps */
.hero__sub{
  margin-top:26px;max-width:50ch;color:var(--muted);text-wrap:balance;
  font-size:clamp(1.06rem,1rem + .32vw,1.26rem);line-height:1.6;
}
.hero__cta{margin-top:38px}
/* The image runs to the right edge of the viewport and past the top/bottom of the copy —
   that full bleed is what makes it read as photography rather than a boxed thumbnail. */


/* ── before / after ────────────────────────────────────────────────────── */
/* Runs edge to edge: this pair is the page's only real proof, so it gets the full
   viewport rather than a boxed thumbnail inside the text column. */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,.8vw,12px)}
.ba figure{margin:0}
.ba img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0}
.ba figcaption{
  margin-top:16px;font-size:13px;font-weight:600;letter-spacing:var(--track-lockup);
  text-transform:uppercase;color:var(--gold-text);text-align:center;
  text-indent:var(--track-lockup);
}

/* ── objection cards ───────────────────────────────────────────────────── */
.faq2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,3.4vw,62px) clamp(40px,5vw,104px)}
.qa{margin:0}
.qa h3{margin:0 0 12px;color:var(--ink);font-size:clamp(1.14rem,1.02rem + .42vw,1.42rem)}
.qa p{margin:0;font-size:16px;color:var(--muted);line-height:1.7}

/* ── two results + price ───────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.2vw,32px)}
.tier{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(32px,2.6vw,50px);
  box-shadow:0 1px 2px rgba(23,19,16,.03),0 10px 30px rgba(23,19,16,.045);
}
.tier__name{font-family:var(--serif);font-size:clamp(1.35rem,1.2rem + .55vw,1.72rem);
  color:var(--ink);margin:0 0 8px}
.tier__price{font-size:15px;font-weight:600;color:var(--gold-text);margin:0 0 22px}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tier li{position:relative;padding-left:22px;font-size:15.5px;color:var(--muted);line-height:1.58}
.tier li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:1px;background:var(--gold)}
.tiers__note{max-width:62ch;margin:32px auto 0;text-align:center;font-size:15px;color:var(--muted)}

/* ── process: video + steps ────────────────────────────────────────────── */
.proc{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(34px,4.5vw,76px);align-items:center}
.proc__vid{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:#EDE4D8;
  max-width:470px}
.proc__vid video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
/* The poster is a real <img>: with preload="none" the poster frame is not reliably decoded,
   and preload="metadata" would pull the whole file because CF Pages ignores Range requests. */
.proc__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;transition:opacity .45s ease}
.proc__vid.is-playing .proc__poster{opacity:0;pointer-events:none}
/* Step blocks are grid, never flex: the number spans both rows so title and paragraph
   stack instead of squeezing into three columns at 390px. */
.steps{display:grid;gap:clamp(28px,2.4vw,40px)}
.steps__head{margin-bottom:clamp(2px,.6vw,8px)}
.steps__head h2{max-width:none}
.steps__head .rule{margin-bottom:22px}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;row-gap:6px;align-items:start}
.step__n{
  grid-row:1 / span 2;
  font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--gold-text);
  width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:var(--paper);
}
.step h3{margin:0;padding-top:12px}
.step p{margin:0;font-size:15.5px;line-height:1.66}

/* ── salon ─────────────────────────────────────────────────────────────── */
.salon{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,.8vw,12px)}
.salon figure{margin:0}
.salon img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0}
.locs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);
  margin:clamp(52px,5vw,78px) auto 0;
  padding-bottom:clamp(72px,6vw + 40px,142px)}
.loc{text-align:center}
.loc__city{
  font-size:13px;font-weight:600;letter-spacing:var(--track-lockup);text-transform:uppercase;
  color:var(--gold-text);margin:0 0 10px;text-indent:var(--track-lockup);
}
.loc__addr{font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin:0 0 6px;line-height:1.35}
.loc a{color:var(--muted);text-decoration:none;font-size:15px;
  display:inline-flex;align-items:center;min-height:44px}
.loc a:hover{color:var(--gold-text)}

/* ── form ──────────────────────────────────────────────────────────────── */
.formsec{background:var(--cream-2)}
.formsec__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,4.5vw,80px);align-items:start}
.formsec h2{max-width:none}
.formsec .lead{margin-top:22px;color:var(--muted)}
.formsec__points{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.formsec__points li{position:relative;padding-left:24px;font-size:15.5px;color:var(--muted);line-height:1.58}
.formsec__points li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:1px;background:var(--gold)}

.card-form{
  background:var(--paper);border-radius:var(--radius);
  padding:clamp(28px,2.6vw,46px);
  border-top:3px solid var(--gold-cta);
  box-shadow:0 1px 2px rgba(23,19,16,.04),0 12px 34px rgba(23,19,16,.055);
}
.card-form__title{font-family:var(--serif);font-size:1.4rem;color:var(--ink);margin:0 0 24px;line-height:1.3}
/* WIZARD — `.fstep` is given a `display`, which OVERRIDES the UA stylesheet's
   `[hidden]{display:none}`. Without the rule below every step renders at once while
   `el.hidden === true` and every other check still passes. Verify with
   getComputedStyle(el).display, never with el.hidden. */
.fstep{display:grid;gap:12px}
.fstep[hidden]{display:none}
.fstep__q{font-family:var(--serif);font-size:clamp(1.16rem,1.06rem + .4vw,1.4rem);
  color:var(--ink);margin:0 0 6px;line-height:1.3}
.opt{
  display:block;width:100%;text-align:left;
  min-height:58px;padding:14px 20px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  font-family:var(--sans);font-size:16px;color:var(--ink);cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.opt:hover{border-color:var(--gold-cta);background:#FDFAF6}
.opt--on{border-color:var(--gold-cta);background:rgba(188,147,85,.12)}
.fbar{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.fbar__track{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.fbar__fill{display:block;height:100%;width:33.33%;background:var(--gold-cta);
  transition:width .3s cubic-bezier(.22,.61,.36,1)}
.fbar__count{font-size:13px;font-weight:600;color:var(--gold-text);letter-spacing:.04em}
.fback{
  margin-top:18px;background:none;border:0;padding:10px 0;min-height:44px;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;
}
.fback:hover{color:var(--gold-text)}
.fback[hidden]{display:none}
.field em{font-style:normal;font-weight:400;color:var(--muted)}

.field{display:block;margin-bottom:18px}
.field > span{display:block;font-size:13px;font-weight:600;color:var(--body);margin-bottom:8px}
.field input,.field select{
  width:100%;min-height:54px;padding:0 16px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;   /* 16px: iOS zooms the page below this */
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field select{
  appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236E5730' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--gold-cta);box-shadow:0 0 0 3px rgba(188,147,85,.18);
}
.field input::placeholder{color:#A79C93}

.consent{display:flex;gap:12px;align-items:flex-start;margin:24px 0 22px;padding:10px;
  margin-inline:-10px;border-radius:var(--radius);transition:background .2s ease}
.consent input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--gold-cta);cursor:pointer}
.consent span{font-size:13.5px;line-height:1.5;color:var(--muted)}
.consent a{color:var(--gold-text);text-decoration:underline;text-underline-offset:2px}
.consent--err{background:rgba(190,58,48,.07);animation:nudge .32s ease}
.consent--err span{color:#8E2F27}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.msg{margin-top:14px;font-size:14.5px;line-height:1.5;min-height:1px}
.msg.ok{color:#2E6B43}
.msg.err{color:#8E2F27}
.form-foot{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.5}

/* ── footer ────────────────────────────────────────────────────────────── */
.foot{background:var(--cream);padding:clamp(48px,4vw,68px) 0 44px;border-top:1px solid var(--line)}
.foot__in{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot__logo{width:160px;opacity:.95}
.foot__col{font-size:14.5px;color:var(--muted);line-height:1.8}
.foot__col a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot__col a:hover{color:var(--gold-text)}
.foot__legal{margin-top:34px;font-size:13px;color:#8A8078;line-height:1.7}
.foot__slogan{font-size:13px;letter-spacing:var(--track-lockup);text-transform:uppercase;
  color:var(--gold-text);margin-top:14px;text-indent:var(--track-lockup)}

/* ── sticky mobile CTA ─────────────────────────────────────────────────── */
.sticky{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(251,248,244,.96);backdrop-filter:blur(8px);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);
}

/* ── reveal (progressive enhancement) ──────────────────────────────────────
   Never default main content to opacity:0 — OG scrapers, no-JS and a11y tools do not run
   IntersectionObserver and would get an empty page. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.in{opacity:1;transform:none;transition:none}
}

/* ── tablet ────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .faq2{grid-template-columns:1fr 1fr;gap:34px 44px}
  /* flex column, not block: `order` is what puts the photo BELOW the copy, and order
     only applies to flex/grid children. */
  .hero{min-height:0;padding-block:0;display:flex;flex-direction:column}
  .hero__in{order:1}
  .hero__bg{position:static;order:2;width:100%}
  .hero__bg img{aspect-ratio:1100/754;height:auto}
  .hero::before{display:none}   /* no scrim needed once the photo is a band, not a backdrop */
  .hero__in{padding-block:clamp(30px,5vw,48px) clamp(26px,4vw,40px)}
  .hero__copy{max-width:none}
  .hero h1,.hero__sub{max-width:none}
  .proc{grid-template-columns:1fr;gap:38px}
  .proc__vid{max-width:460px;margin-inline:auto}
  .formsec__in{grid-template-columns:1fr;gap:38px}
  .formsec h2{max-width:none}
  .locs{grid-template-columns:repeat(3,1fr);gap:20px}
}

/* ── phone ─────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  body{font-size:16px;padding-bottom:80px}
  .faq2{grid-template-columns:1fr;gap:30px}
  .tiers{grid-template-columns:1fr}
  .salon{grid-template-columns:1fr}
  .salon figure:nth-child(3){display:none}
  .locs{grid-template-columns:1fr;gap:28px}
  .ba{grid-template-columns:1fr;gap:4px}
  .topbar__logo{width:158px}
  /* The sticky bar below carries the CTA on phones, so the hero one is redundant.
     Scoped to the SAME breakpoint the sticky bar appears at — hiding it any wider would
     leave a range with no visible CTA at all. */
  .hero__cta{display:none}
  .foot__in{flex-direction:column;gap:24px}
  .sticky{display:block}
}