/* ─────────────────────────────────────
   Makeup Exquisite — page.css (FIXED)
   Inner pages: editorial hero, gallery, timeline, before/after, forms
───────────────────────────────────── */
 
/* ══ Editorial hero ══ */
.ed-hero { position:relative; height:100vh; min-height:37.5rem; overflow:hidden; border-radius:0 0 var(--r-lg) var(--r-lg); }
.ed-hero-parallax { position:absolute; inset:-10% 0; }
.ed-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center top; will-change:transform; }
.ed-hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 55%, transparent 100%); }
.ed-hero-title {
  position:absolute; bottom:4%; left:0; right:0; text-align:center;
  font-family:var(--f-head); font-style:italic; font-weight:300;
  font-size:clamp(10vw,12vw,14vw); letter-spacing:-.04em;
  color:rgba(255,255,255,.88); line-height:.9;
  pointer-events:none; z-index:2; white-space:nowrap;
}
.ed-hero-eyebrow {
  position:absolute; top:6.75rem; left:2.5rem;
  font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.6); z-index:2;
}
.ed-scroll-hint { position:absolute; bottom:2.5rem; right:2.5rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:2; }
.ed-scroll-hint-line { width:1px; height:3rem; background:rgba(255,255,255,.35); position:relative; overflow:hidden; }
.ed-scroll-hint-line::after { content:''; position:absolute; inset:0; background:white; animation:scrollLine 1.8s ease infinite; }
@keyframes scrollLine { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }
 
/* ══ Organic scatter gallery ══ */
.og-section { background:var(--c-white); padding:5vw 0 8vw; overflow:visible; }
.og-section .container { max-width:none; padding:0; overflow:visible; }
 
/* 20-column grid — explicit placement, zero overlap */
.og-scatter {
  display:grid;
  grid-template-columns:repeat(20, 1fr);
  grid-auto-rows:auto;
  gap:1.5rem;
  align-items:start;
}
.og-scatter .og-item:nth-child(1) { grid-column:1/10;  grid-row:1; aspect-ratio:3/4; }
.og-scatter .og-item:nth-child(2) { grid-column:13/20; grid-row:1; aspect-ratio:2/3; }
.og-scatter .og-item:nth-child(3) { grid-column:5/21;  grid-row:2; aspect-ratio:16/9; }
.og-scatter .og-item:nth-child(4) { grid-column:1/9;   grid-row:3; aspect-ratio:4/5; }
.og-scatter .og-item:nth-child(5) { grid-column:12/19; grid-row:3; aspect-ratio:2/3; }
.og-scatter .og-item:nth-child(6) { grid-column:8/15;  grid-row:4; aspect-ratio:4/5; }
 
.og-item { overflow:hidden; border-radius:var(--r-md); position:relative; opacity:0; transform:translateY(2rem); transition:opacity .8s ease, transform .8s ease; }
.og-item.in { opacity:1; transform:none; }
.og-item:hover { z-index:2; }
.og-item.in:nth-child(2){transition-delay:.10s;}
.og-item.in:nth-child(3){transition-delay:.20s;}
.og-item.in:nth-child(4){transition-delay:.08s;}
.og-item.in:nth-child(5){transition-delay:.18s;}
.og-item.in:nth-child(6){transition-delay:.28s;}
 
.og-item-inner {
  height:115%; margin-top:-7.5%;
  background-size:cover; background-position:center top;
  will-change:transform; transition:transform .12s linear;
}
.og-item:hover .og-item-inner { transform:scale(1.02); transition:transform .55s ease; }
 
.og-tall  { aspect-ratio:.60; }
.og-mid   { aspect-ratio:.82; }
.og-wide  { aspect-ratio:1.35; }
.og-sq    { aspect-ratio:.95; }
 
.og-c1{background-color:#c07888;} .og-c2{background-color:#a87080;}
.og-c3{background-color:#d09098;} .og-c4{background-color:#b87888;}
.og-c5{background-color:#cc8898;} .og-c6{background-color:#e0a0b0;}
 
/* ══ Pull quote ══ */
.ed-pullquote {
  background:var(--c-pink-light); padding:5.5em 2.5rem; text-align:center;
  border-top:1px solid rgba(249,120,163,.15); border-bottom:1px solid rgba(249,120,163,.15);
}
.ed-pullquote-text {
  font-family:var(--f-head); font-style:italic; font-weight:300;
  font-size:clamp(1.625rem,3.8vw,3.25rem); letter-spacing:-.03em;
  color:var(--c-black); line-height:1.22; max-width:51.25rem; margin:0 auto 1rem;
}
.ed-pullquote-text::before { content:'\201C'; color:var(--c-pink); }
.ed-pullquote-text::after  { content:'\201D'; color:var(--c-pink); }
.ed-pullquote-attr { font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--c-grey-mid); }
.ed-pullquote-link { display:block; text-decoration:none; cursor:pointer; transition:opacity .25s; }
.ed-pullquote-link:hover { opacity:.75; }
 
/* ══ Ed intro ══ */
.ed-intro { background:var(--c-white); }
.ed-intro-grid  { display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:65vh; }
.ed-intro-image { background-size:cover; background-position:center top; height:100%; border-radius:var(--r-md); overflow:hidden; }
.ed-intro-text  { padding:4.5rem 4rem; display:flex; flex-direction:column; justify-content:center; gap:1.5rem; align-items:flex-start; }
.ed-intro-text h2,
.ed-intro-text p { max-width:27.5rem; }
 
/* ══ Includes ══ */
.ed-includes { background:var(--c-off-white); }
.ed-includes-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.ed-includes-list { list-style:none; display:flex; flex-direction:column; }
.ed-includes-item { display:flex; align-items:baseline; gap:1rem; padding:1.125rem 0; border-bottom:1px solid var(--c-grey); font-size:.9375rem; color:var(--c-grey-dark); }
.ed-includes-item:first-child { border-top:1px solid var(--c-grey); }
.ed-includes-num { font-size:.65rem; font-weight:500; letter-spacing:.1em; color:var(--c-pink); min-width:1.5rem; }
 
/* ══ About timeline — sticky scroll ══ */
.tl-sticky-section { background:var(--c-pink-light); position:relative; }
.tl-sticky-wrap { height:500vh; position:relative; }
.tl-sticky { position:sticky; top:0; height:100vh; overflow:hidden; }
.tl-progress { position:absolute; top:0; left:0; right:0; height:2px; background:rgba(249,120,163,.15); z-index:10; }
.tl-progress-bar { height:100%; background:var(--c-pink); width:0%; transition:width .1s linear; }
.tl-step {
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  opacity:0; transform:translateY(1.5rem); pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
}
.tl-step.active { opacity:1; transform:none; pointer-events:all; }
.tl-step.past   { opacity:0; transform:translateY(-1.5rem); }
.tl-step-left   { padding:0 5% 0 8%; display:flex; flex-direction:column; gap:1.5rem; justify-content:center; }
.tl-ghost-year {
  font-family:var(--f-head); font-style:italic; font-weight:300;
  font-size:20vw; letter-spacing:-.08em;
  color:transparent; -webkit-text-stroke:1px rgba(249,120,163,.15);
  line-height:1; position:absolute; left:5%; bottom:-10%; pointer-events:none; z-index:0;
}
.tl-year-label  { font-family:var(--f-head); font-style:italic; font-weight:300; font-size:clamp(3rem,6vw,7rem); letter-spacing:-.05em; color:var(--c-pink); line-height:1; position:relative; z-index:1; }
.tl-step-content { position:relative; z-index:1; display:flex; flex-direction:column; gap:.75rem; }
.tl-step-num    { font-size:.65rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(249,120,163,.6); }
.tl-step-title  { font-family:var(--f-head); font-weight:300; font-size:clamp(1.5rem,2.5vw,2.25rem); letter-spacing:-.03em; }
.tl-step-body   { font-size:.9375rem; line-height:1.75; color:var(--c-grey-dark); max-width:26.25rem; }
.tl-step-right  { height:100%; position:relative; overflow:hidden; }
.tl-step-img    { position:absolute; inset:0; background-size:cover; background-position:center top; }
.tl-step-img-overlay { position:absolute; inset:0; background:rgba(0,0,0,.08); }
.tl-nav { position:absolute; bottom:2.5rem; left:8%; z-index:10; display:flex; gap:1rem; align-items:center; }
.tl-nav-dot { width:1.75rem; height:1px; background:rgba(249,120,163,.25); border:none; cursor:pointer; transition:background .3s, width .3s; }
.tl-nav-dot.active { background:var(--c-pink); width:3rem; }
.tl-counter { position:absolute; bottom:2.5rem; right:8%; z-index:10; font-family:var(--f-head); font-style:italic; font-size:1.125rem; color:rgba(249,120,163,.5); }
 
/* ══ Before/After ══ */
.before-after-wrap { position:relative; overflow:hidden; border-radius:var(--r-md); user-select:none; aspect-ratio:4/3; }
.ba-img    { position:absolute; inset:0; background-size:cover; background-position:center top; }
.ba-after  { clip-path:inset(0 50% 0 0); }
.ba-divider { position:absolute; top:0; bottom:0; width:2px; background:white; left:50%; transform:translateX(-50%); pointer-events:none; z-index:10; }
.ba-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2.75rem; height:2.75rem; border-radius:50%; background:white; border:2px solid rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:11; box-shadow:0 4px 16px rgba(0,0,0,.2); }
.ba-handle-arrows { font-size:.875rem; color:var(--c-grey-dark); letter-spacing:-4px; }
.ba-label { position:absolute; bottom:1rem; font-size:.65rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:white; background:rgba(0,0,0,.3); backdrop-filter:blur(4px); padding:.25rem .625rem; border-radius:100px; }
.ba-label.ba-before-label { left:1rem; }
.ba-label.ba-after-label  { right:1rem; }
.ba-input { position:absolute; inset:0; opacity:0; cursor:ew-resize; width:100%; height:100%; z-index:20; }
 
/* ══ CTA strips ══ */
.ed-cta { background:var(--c-pink-light); border-bottom:1px solid rgba(249,120,163,.2); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:0 16px 48px rgba(249,120,163,.14); position:relative; z-index:1; }
.ed-cta-inner      { display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; }
.page-cta-strip    { background:var(--c-pink-light); border-bottom:1px solid rgba(249,120,163,.2); box-shadow:0 16px 48px rgba(249,120,163,.14); }
.page-cta-inner    { display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; }
 
/* ══ Contact form ══ */
.contact-split  { display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; min-height:calc(100vh - 10rem); }
.contact-form-wrap { display:flex; flex-direction:column; gap:0; }
.contact-right  { display:flex; flex-direction:column; gap:0; }
.contact-right-img { width:100%; aspect-ratio:3/4; background-size:cover; background-position:center top; border-radius:var(--r-md); margin-bottom:2rem; overflow:hidden; }
.contact-info-stack { display:flex; flex-direction:column; gap:.75rem; }
.contact-info-row   { display:flex; flex-direction:column; }
.contact-info-label { font-size:.65rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--c-grey-mid); margin-bottom:.2rem; }
.contact-info-value { font-size:.9375rem; color:var(--c-black); text-decoration:none; }
a.contact-info-value:hover { color:var(--c-pink); }
.form-group    { margin-bottom:1.5rem; }
.form-label    { display:block; font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--c-grey-dark); margin-bottom:.5rem; }
.form-input,
.form-textarea,
.form-select   { width:100%; padding:.8rem 1rem; border:1px solid var(--c-grey); border-radius:0; font-family:var(--f-body); font-size:.9375rem; color:var(--c-black); background:var(--c-white); appearance:none; transition:border-color .2s ease; }
.form-input:focus,
.form-textarea:focus,
.form-select:focus { outline:none; border-color:var(--c-pink); }
.form-textarea { min-height:8.75rem; resize:vertical; }
.form-msg         { padding:.875rem 1.25rem; font-size:.875rem; margin-bottom:1.5rem; display:none; border-radius:var(--r-sm); }
.form-msg.success { background:#f0fdf4; color:#166534; border-left:3px solid #16a34a; display:block; }
.form-msg.error   { background:#fff1f2; color:#9f1239; border-left:3px solid var(--c-red); display:block; }
 
/* ══ Full-width contact page ══ */
.contact-page-section  { min-height:calc(100vh - 4.5rem); display:flex; align-items:stretch; }
.contact-split-clean   { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; align-items:stretch; }
.contact-form-side     { padding:6rem 5% 4rem; display:flex; flex-direction:column; justify-content:center; background:var(--c-white); }
.contact-image-side    { position:relative; overflow:hidden; }
.contact-hero-img      { position:absolute; inset:0; background-size:cover; background-position:50% 10%; }
.contact-img-overlay   { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 55%); }
.contact-img-caption   { position:absolute; bottom:3rem; left:2.5rem; right:2.5rem; }
.contact-img-quote     { font-family:var(--f-head); font-style:italic; font-weight:300; font-size:clamp(1.75rem,3vw,3rem); letter-spacing:-.03em; color:white; line-height:1.1; }
 
/* Before/after grid */
.ba-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:768px) {
  .ba-grid { grid-template-columns:1fr; gap:2rem; }
  .ba-grid .before-after-wrap { aspect-ratio:3/4; }
}

/* ══ Responsive ══ */
@media(max-width:1200px) {
  .tl-step       { grid-template-columns:1fr; }
  .tl-step-right { display:none; }
  .tl-step-left  { padding:0 8%; }
}
 
@media(max-width:1024px) {
  .ed-intro-grid { grid-template-columns:1fr; }
  .ed-intro-image { height:50vh; border-radius:var(--r-md) var(--r-md) 0 0; }
  .ed-intro-text  { padding:3.5rem 2.5rem; }
  .ed-includes-grid { grid-template-columns:1fr; gap:3rem; }
  .contact-split  { grid-template-columns:1fr; }
  /* og-scatter — single column stack on tablet and below */
  .og-scatter {
    grid-template-columns:1fr;
    padding:0 4vw;
  }
  .og-scatter .og-item {
    grid-column:1 !important; grid-row:auto !important;
    width:100% !important; max-width:100% !important;
    margin:0 !important; padding:0 !important;
  }
}
 
@media(max-width:900px) {
  .ed-hero { height:85vh; }
  .tl-sticky-wrap { height:300vh; }
  /* contact-split-clean stays 2-col at tablet — goes single below 768px */
  .contact-image-side { height:50vmax; }
}
 
@media(max-width:768px) {
  .ed-hero-eyebrow   { top:6.25rem; left:1.5rem; }
  .ed-scroll-hint    { display:none; }
  .ed-intro-text     { padding:3rem 1.5rem; }
  .ed-pullquote      { padding:4rem 1.5rem; }
  .ed-cta-inner,
  .page-cta-inner    { flex-direction:column; align-items:flex-start; }
  /* Additional og-scatter fine-tuning at mobile */
  ..og-scatter > * { margin:0; }
  /* Booking page — image on top, form below */
  .contact-split-clean { grid-template-columns:1fr; min-height:auto; }
  .contact-image-side  { height: 70vh; order:-1; }
  .contact-form-side   { padding:3.5rem 5% 4rem; justify-content:flex-start; }
}
 
/* Form states */
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color:var(--c-pink); }
.form-input:user-invalid, .form-textarea:user-invalid, .form-select:user-invalid { border-color:var(--c-red); }
.form-input:user-valid:not(:placeholder-shown), .form-select:user-valid { border-color:rgba(22,163,74,.45); }