/* Ellie's Hair & Beauty — brand: blush ivory + terracotta rust, drawn from the logo linework */

:root {
  --ivory: #faf5f0;
  --blush: #f1e2d8;
  --blush-soft: #f7ebe3;
  --rust: #9c5c47;
  --rust-dark: #7c4636;
  --rust-deep: #5c3327;
  --ink: #3a2e28;
  --ink-soft: #6b5850;
  --gold: #b6926a;
  --line: rgba(156, 92, 71, 0.18);
  --shadow: 0 20px 50px -25px rgba(92, 51, 39, 0.35);

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--rust-deep);
  margin: 0 0 0.4em;
  letter-spacing: 0.01em;
  line-height: 1.12;
}

h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 500; line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 500; }
h3 { font-size: 1.4rem; }

p { color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--rust);
  font-weight: 500;
  display: inline-block;
  margin-bottom: 0.9em;
}

.lede {
  font-size: 1.15rem;
  max-width: 640px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid transparent;
  /* The transparent border + a gradient background is a trap: the gradient is
     sized to the padding box but painted out to the border box, so that 1px
     strip gets the next repeat tile — a dark rust line down the right and bottom
     edges. Size the gradient to the border box and never tile it. */
  background-origin: border-box;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color .2s ease;
}

.btn-instagram {
  /* background-image, NOT the `background` shorthand — the shorthand resets the
     background-origin/repeat set on .btn and the dark rust edge line comes back. */
  background-image: linear-gradient(135deg, #9c5c47, #c17a56 45%, #d9a066);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(156, 92, 71, 0.55);
}
.btn-instagram:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(156, 92, 71, 0.6); }

.btn-outline {
  background: transparent;
  color: var(--rust-deep);
  border-color: var(--rust);
}
.btn-outline:hover { background: var(--rust); color: #fff; }

.btn-ghost {
  background: var(--blush);
  color: var(--rust-deep);
}
.btn-ghost:hover { background: var(--rust); color: #fff; }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Splash ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
}

.splash-brand {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* The mark is what flies into the header, so it carries the will-change. */
.splash-mark {
  position: relative;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  will-change: transform;
}

.mark-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--rust);
  overflow: visible;
}
.ring-path { stroke-linecap: round; }
.spark { fill: var(--gold); }

.splash-logo {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 122px;
  height: 122px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 24px 60px -20px rgba(92, 51, 39, 0.45);
}

.splash-word {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--rust-deep);
  line-height: 1.1;
  white-space: nowrap;
}
.splash-word small {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}

@media (max-width: 480px) {
  .splash-brand { gap: 14px; }
  .splash-mark { width: 92px; height: 92px; }
  .splash-logo { left: 9px; top: 9px; width: 74px; height: 74px; }
  .splash-word { font-size: 1.7rem; }
  .splash-word small { font-size: 0.6rem; letter-spacing: 0.16em; }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 245, 240, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  grid-column: 1;
}

.brand img {
  height: 46px;
  width: 46px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 16px -6px rgba(92, 51, 39, 0.4);
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--rust-deep);
  line-height: 1.1;
  white-space: nowrap;
}
.brand-word small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-column: 2;
}
.nav-links a {
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.nav-links a.active,
.nav-links a:hover { color: var(--rust); }

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--rust);
  border-radius: 2px;
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  grid-column: 3;
}

.nav-actions .btn-outline {
  padding: 14px 26px;
  font-size: 0.88rem;
}

.nav-links .short { display: none; }
.vp-short { display: none; }

@media (max-width: 860px) {
  .nav-row { grid-template-columns: 1fr; gap: 10px; }
  .brand { justify-content: center; }
  .brand-word { font-size: 1.5rem; }
  .nav-links { grid-column: 1; justify-content: center; gap: 26px; font-size: 0.8rem; }
  .nav-links li { flex: 0 0 auto; }
  .nav-links a { font-size: 0.8rem; }
  .nav-links .full { display: none; }
  .nav-links .short { display: inline; }
  .nav-links li.nav-contact { display: none; }
  .nav-actions { display: none; }
  .vp-full { display: none; }
  .vp-short { display: inline; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 44px 0 50px;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 82% 8%, var(--blush) 0%, transparent 60%),
    radial-gradient(50% 45% at 5% 95%, var(--blush-soft) 0%, transparent 65%);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero-copy .stars { color: var(--gold); letter-spacing: 4px; font-size: 0.9rem; margin-bottom: 18px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

.hero-meta {
  margin-top: 46px;
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}
.hero-meta div { font-size: 0.85rem; color: var(--ink-soft); }
.hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--rust-deep);
  font-weight: 600;
}

.hero-media-wrap {
  position: relative;
}

.hero-media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4/3.6;
  box-shadow: var(--shadow);
  background: var(--blush);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.hero-badge {
  position: absolute;
  bottom: -26px;
  left: -26px;
  z-index: 2;
  background: var(--ivory);
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
}
.hero-badge .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #34c98a;
  box-shadow: 0 0 0 4px rgba(52, 201, 138, 0.18);
}
.hero-badge span { font-size: 0.85rem; color: var(--ink); }

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 5/4; }
  .hero-badge { left: 12px; bottom: -20px; }
  .hero-ig-cta { display: none; }
}

/* Full-bleed background hero — the photo genuinely fills the section behind the
   copy. A blurred clone (masked to the left) plus a colour scrim fade the left
   side out so the text stays legible, while the right side of the photo stays
   sharp and fully visible. Sized compactly so it all fits one screen on load. */

.hero-full {
  padding: 0;
  /* Fill the screen below the 82px sticky header on a typical laptop, but cap it
     so it doesn't become a scroll chore on a tall desktop monitor. svh so mobile
     browser chrome doesn't push the CTAs below the fold. */
  min-height: min(calc(100svh - 82px), 820px);
  display: flex;
  align-items: center;
  background: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img,
.hero-bg-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-bg-blur {
  filter: blur(34px);
  transform: scale(1.08);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 26%, transparent 56%);
  mask-image: linear-gradient(to right, black 0%, black 26%, transparent 56%);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--ivory) 0%,
    rgba(250, 245, 240, 0.92) 16%,
    rgba(250, 245, 240, 0.6) 31%,
    rgba(250, 245, 240, 0.18) 48%,
    transparent 64%
  );
}

.hero-full .container {
  position: relative;
  z-index: 1;
  display: block;
  max-width: none;
  width: 100%;
  margin: 0;
  padding-top: 40px;
  padding-bottom: 48px;
  padding-left: clamp(24px, 6vw, 100px);
  padding-right: 24px;
}

.hero-full h1 { max-width: 480px; }
.hero-full .lede { max-width: 440px; line-height: 1.45; margin-top: 0.4em; }
.hero-full .hero-cta { margin-top: 20px; }
.hero-full .hero-meta { margin-top: 20px; }

.hero-badge-full {
  position: absolute;
  left: auto;
  right: 40px;
  bottom: 20px;
  z-index: 1;
}

@media (max-width: 860px) {
  .hero-full { min-height: 460px; flex-direction: column; align-items: stretch; }
  .hero-scrim {
    background: linear-gradient(
      to bottom,
      var(--ivory) 0%,
      rgba(250, 245, 240, 0.97) 65%,
      rgba(250, 245, 240, 0.9) 85%,
      rgba(250, 245, 240, 0.78) 100%
    );
  }
  .hero-bg-blur {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 92%);
    mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 92%);
  }
  .hero-full .container { padding-top: 32px; padding-bottom: 32px; }
  .hero-full h1, .hero-full .lede { max-width: 100%; }
  .hero-badge-full { position: static; margin: 24px 0 0; }
}

/* ---------- Sticky mobile Instagram bar ---------- */

.sticky-ig {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(250, 245, 240, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.sticky-ig .btn { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  .sticky-ig { display: block; }
  body { padding-bottom: 78px; }
}

/* ---------- Horizontal reel ---------- */

.reel {
  background: var(--blush-soft);
  overflow: hidden;
  /* Cancel the base `section { padding: 88px 0 }` — .reel-pin supplies its own
     block padding, and stacking the two left a dead band under the photos. */
  padding: 0;
}

/* Not pinned any more — sized to its content so the section no longer leaves a
   screen-tall band of empty cream above and below the photo strip. */
.reel-pin {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 96px clamp(24px, 6vw, 100px);
}

.reel-heading {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Cancel .reel-pin's block padding so the panel spans the full pinned height
     and images never peek above/below it as the track scrubs underneath. */
  margin: -96px 0 -96px calc(-1 * clamp(24px, 6vw, 100px));
  padding: 96px 56px 96px clamp(24px, 6vw, 100px);
  background: linear-gradient(
    to right,
    var(--blush-soft) 0,
    var(--blush-soft) calc(100% - 56px),
    transparent 100%
  );
}
.reel-heading > * { max-width: 260px; }
.reel-heading p { margin-top: 10px; font-size: 0.92rem; }

.reel-track {
  display: flex;
  gap: 24px;
  flex: 0 0 auto;
  will-change: transform;
}

.reel-track figure {
  margin: 0;
  flex-shrink: 0;
  width: 300px;
  height: 400px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.reel-track img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .reel-pin {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 56px 24px;
  }
  .reel-heading {
    align-self: auto;
    margin: 0;
    padding: 0;
    background: none;
  }
  .reel-heading > * { max-width: 100%; }
  .reel-track {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    width: 100%;
    transform: none !important;
  }
  .reel-track figure { width: 220px; height: 290px; scroll-snap-align: start; }
}

/* ---------- Sections ---------- */

section { padding: 88px 0; }
.section-tight { padding: 64px 0; }
.section-blush { background: var(--blush-soft); }

.section-head {
  max-width: 640px;
  margin: 0 auto 54px;
  text-align: center;
}
.section-head.left { margin: 0 0 46px; text-align: left; }

/* ---------- Services ---------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.service-card .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blush);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--rust);
}

/* Override the SVGs' own width/height attrs — 22px was too small for the
   detail in these marks to read inside the 44px disc. */
.service-card .icon svg { width: 26px; height: 26px; }

.service-card p { font-size: 0.92rem; margin-bottom: 0; }

/* Pricing lists */

.price-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 34px 34px 12px;
  margin-bottom: 28px;
  box-shadow: var(--shadow);
}
.price-block h3 {
  font-size: 1.55rem;
  color: var(--rust-deep);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
}
.price-row:last-child { border-bottom: none; }
.price-row .name { font-size: 0.98rem; color: var(--ink); }
.price-row .amount {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--rust);
  white-space: nowrap;
}
.price-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 14px 0 20px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 28px;
}
@media (max-width: 760px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ---------- Gallery ---------- */

.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}
.filter-btn {
  border: 1px solid var(--line);
  background: #fff;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: var(--ink-soft);
  transition: 0.2s;
}
.filter-btn.active, .filter-btn:hover {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}

.gallery-grid {
  columns: 4 280px;
  column-gap: 18px;
}
.gallery-grid figure {
  margin: 0 0 18px;
  break-inside: avoid;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px -16px rgba(92, 51, 39, 0.35);
  position: relative;
}
.gallery-grid img { width: 100%; display: block; transition: transform 0.4s ease; }
.gallery-grid figure:hover img { transform: scale(1.04); }

@media (max-width: 620px) { .gallery-grid { columns: 2 160px; column-gap: 12px; } .gallery-grid figure { margin-bottom: 12px; border-radius: 14px; } }

/* ---------- Testimonials ---------- */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-card {
  background: #fff;
  border-radius: 22px;
  padding: 30px;
  border: 1px solid var(--line);
}
.quote-card .stars { color: var(--gold); margin-bottom: 14px; letter-spacing: 3px; }
.quote-card p { font-style: italic; color: var(--ink); }
.quote-card .who { margin-top: 16px; font-size: 0.85rem; color: var(--rust); font-weight: 500; font-style: normal; }

/* ---------- CTA banner ---------- */

.cta-band {
  background: linear-gradient(135deg, var(--rust-deep), var(--rust) 60%, var(--gold));
  color: #fff;
  border-radius: 32px;
  padding: 64px 48px;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 520px; margin: 0 auto 30px; }
.cta-band .btn-instagram { background: #fff; color: var(--rust-deep); box-shadow: none; }
.cta-band .btn-instagram:hover { background: var(--ivory); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--rust-deep);
  color: rgba(255,255,255,0.8);
  padding: 64px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }

.site-footer h4 {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.site-footer p { color: rgba(255,255,255,0.72); }
.site-footer a { text-decoration: none; color: rgba(255,255,255,0.8); }
.site-footer a:hover { color: #fff; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { height: 46px; width: 46px; border-radius: 50%; }
.footer-brand span { font-family: var(--font-display); font-size: 1.3rem; color: #fff; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }
.footer-bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}

/* ---------- Misc / utility ---------- */

.tag {
  display: inline-block;
  background: var(--blush);
  color: var(--rust-deep);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 36px; } }

.img-round {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.list-check { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 14px; }
.list-check li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-size: 0.98rem; }
.list-check svg { flex-shrink: 0; margin-top: 3px; color: var(--rust); width: 18px; height: 18px; }

.map-wrap {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.map-wrap iframe { width: 100%; height: 380px; border: 0; display: block; filter: sepia(12%) saturate(85%); }

.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--shadow);
}

.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
@media (max-width: 860px) { .step-grid { grid-template-columns: 1fr; } }
.step {
  text-align: center;
  padding: 10px;
}
.step .num {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--rust);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 auto 16px;
}