/* ==========================================================================
   HWS by Danni — Homepage overrides
   Loaded by index.html only, AFTER styles.css.

   This file used to be a second, parallel stylesheet: index.html did not link
   styles.css at all, so home.css carried its own copy of the tokens, the
   header, the nav, the footer and the card components. Since index.html began
   linking styles.css, those copies were dead weight that still won the
   cascade — which meant a fix made in styles.css silently missed the
   homepage. That happened twice: the mobile nav panel's max-height, and the
   .btn-text.on-light colour.

   So everything that styles.css already provides has been removed. What is
   left is only what is genuinely homepage-only, plus a short list of
   deliberate overrides, each with the reason it exists. Nothing here should
   duplicate a shared rule: if a value matches styles.css, delete it from
   here rather than keeping the two in step by hand.
   ========================================================================== */

/* ---------- Hero (homepage-only markup) ---------- */
/* Top padding halved (120 -> 60): the gap between the header and the eyebrow
   was pushing the headline below the fold on a phone. */
.hero { padding: 60px 40px 140px; }
.hero .eyebrow { display: block; margin-bottom: 26px; }
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 3.7rem); line-height: 1.12; font-weight: 400; }
.hero .script { display: block; font-style: italic; color: var(--teal); font-weight: 400; font-size: 0.58em; margin: 14px 0 4px; }
.hero .tagline { color: var(--brand-muted); font-size: 1.02rem; margin: 22px 0 36px; max-width: 420px; }
.hero-checks { list-style: none; margin: 0 0 42px; padding: 0; display: grid; gap: 15px; }
.hero-checks li { display: flex; align-items: center; gap: 13px; font-size: 0.9rem; color: var(--brand-ivory); letter-spacing: 0.01em; }

/* ---------- Hero photo frame and its corner marks ---------- */
.frame {
  position: relative; aspect-ratio: 3/4; background: linear-gradient(155deg, #201F1D 0%, #131211 100%);
  overflow: hidden;
}
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }
.corner-mark { position: absolute; width: 20px; height: 20px; z-index: 2; }
.corner-mark.tl { top: 14px; left: 14px; border-top: 1px solid var(--gold-soft); border-left: 1px solid var(--gold-soft); }
.corner-mark.br { bottom: 14px; right: 14px; border-bottom: 1px solid var(--gold-soft); border-right: 1px solid var(--gold-soft); }

/* ---------- The drawn thread behind the hero ---------- */
.thread-svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 220px; z-index: 1; opacity: 0.55; }
.thread-path { fill: none; stroke: var(--gold); stroke-width: 0.6; opacity: 0.35; stroke-dasharray: 2200; stroke-dashoffset: 2200; transition: stroke-dashoffset 2.6s cubic-bezier(.2,.7,.2,1); }
.thread-svg.in-view .thread-path { stroke-dashoffset: 0; }

/* ---------- Compare grid: the light half needs the deep teal ---------- */
.plan.dark { background: var(--brand-ink); color: var(--brand-ivory); }
.plan.light { background: var(--section-alt); color: var(--text-main); }
.plan.light .btn-primary { background: var(--teal-deep); color: var(--brand-ivory); }
.plan.light .btn-primary:hover { background: var(--teal-lift); }
.plan.light .check-dot { border-color: var(--teal-deep); }

/* ---------- Transformations ---------- */
.transformations .section-head h2 { color: var(--brand-ivory); }
.trans-frame .ph-slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center; }
.trans-frame .ph-slot::before { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(198,154,84,0.32); transition: inset 0.6s ease, border-color 0.6s ease; }
.trans-frame .ph-icon { width: 30px; height: 30px; stroke: var(--gold-dim); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; position: relative; }
.trans-frame .ph-slot em { font-family: 'Fraunces', serif; font-style: italic; color: #706B61; font-size: 0.8rem; letter-spacing: 0.02em; position: relative; }

/* ---------- Pull quote (homepage-only section) ---------- */
.pullquote { background: var(--brand-ink); color: var(--brand-ivory); padding: 96px 40px; text-align: center; }
.pullquote .pq-inner { max-width: 820px; margin: 0 auto; }
.pullquote .pq-mark { font-family: 'Fraunces', serif; font-size: 3.4rem; line-height: 0.6; color: var(--teal); margin-bottom: 18px; }
.pullquote blockquote { margin: 0; font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.34; color: var(--brand-ivory); }
.pullquote .pq-attr { margin-top: 26px; font-family: 'Inter', sans-serif; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); }
.pullquote .pq-stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 3px; margin-bottom: 22px; }
.pullquote .pq-source { display: inline-block; margin-top: 20px; font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-muted); text-decoration: none; border-bottom: 1px solid rgba(167,158,146,0.4); padding-bottom: 2px; }
.pullquote .pq-source:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

/* ==========================================================================
   Deliberate overrides — each one is a value the homepage needs and the rest
   of the site does not. Verified by before/after render, not by eye.
   ========================================================================== */

/* The homepage lays its full-bleed sections out on a 40px gutter and a 110px
   vertical rhythm; the rest of the site uses 24px and 100px. Two designs, not
   drift -- changing it is a design decision about the homepage, not a cleanup.
   .pain and .transformations are homepage-only, so those are simply their
   definition. .why, .experience and .compare also appear on about.html,
   experience.html and services.html, and those copies keep the shared values;
   only the homepage's differ, on purpose. */
.hero, .pain, .why, .experience, .transformations { padding-left: 40px; padding-right: 40px; }
.pain { padding-top: 110px; padding-bottom: 90px; }
.why, .experience, .transformations { padding-top: 110px; padding-bottom: 110px; }
.compare { padding: 40px 40px 130px; }

/* .section-head  styles.css adds padding: 0 24px, cutting usable width from
                  560px to 512px, which wraps "Why women choose HWS by Danni"
                  onto two lines and splits the business name.
   h2             the homepage's slightly larger clamp, kept with it. */
.section-head { padding: 0; margin: 0 auto 64px; }
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.35rem); }

/* .exp-frame  styles.css crops the studio photography to 4/3.4. The homepage
               uses 4/5, which is what those images were framed for; the
               shared value cuts heads and feet.
   .exp-grid   22px gutter to match the taller frames. */
.exp-frame { aspect-ratio: 4/5; background: linear-gradient(160deg, var(--brand-ink), #221F1B); }
.exp-grid { gap: 22px; }