/* ==========================================================
   ISHVAANA — Main layout & components
   ========================================================== */

/* ---------- Scroll progress bar ---------- */
/* A thin gold line, fixed to the very top edge, filled left-to-right
   as the page scrolls (see initScrollProgress in main.js) — inspired
   by the reference site's .pd-progress. Above .site-header's z-index
   so it stays visible over the header once it gets its own scrolled
   backdrop. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--gold);
  z-index: 70;
  pointer-events: none;
}

/* ---------- Site header / nav ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  color: var(--ivory);
  mix-blend-mode: normal;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), padding 0.4s var(--ease), box-shadow .4s var(--ease);
}

/* The hero's own "India · US · Worldwide" line, moved up here for
   mobile only (see the hero's own copy at max-width:900px below,
   where it's hidden) — "By Haritha Manne" joins the logo itself
   instead (see .brand-mark__by). Hidden by default; width:100% makes
   it wrap to its own row under the logo/toggle row once shown, since
   .site-header above allows wrapping. Size/color echo the hero's own
   #introduction .house__geo (see further down) at a scale that fits a
   compact header line instead of a big standalone heading. */
.site-header__meta {
  display: none;
}

@media (max-width: 900px) {
  .site-header__meta {
    display: block;
    width: 100%;
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 0.52rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(196, 165, 116, 0.55);
  }
}

.site-header.is-scrolled {
  background: rgba(20, 16, 15, 0.86);
  backdrop-filter: blur(10px);
  padding-block: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

.site-header--solid {
  position: static;
  background: var(--onyx);
  color: var(--ivory);
}

.brand-mark {
  /* The actual "ISHVAANA" wordmark, traced from the catalogue's own
     cover (Requirements Brief/Ishvaana-Catalogue1-1.pdf) rather than
     approximated in a system font — its lettering turned out to be
     close to, but not quite, Cormorant Garamond. Extracted as solid
     gold on transparent, so it sits equally well over a photo or the
     header's dark scrolled backdrop (both are always dark — see
     .site-header's color, always ivory). */
  display: flex;
  align-items: center;
}
.brand-mark img { height: 0.58rem; width: auto; display: block; }

/* Joins the logo on mobile only (see .brand-mark__by below) — hidden
   here by default since the hero's own by-line already shows it on
   wider screens. */
.brand-mark__by {
  display: none;
}

@media (max-width: 900px) {
  /* Logo reads a little bigger on its own next to text, rather than
     dwarfed by it — up from the header's base 0.58rem. */
  .brand-mark img { height: 0.8rem; }
  .brand-mark { gap: 10px; }
  .brand-mark__by {
    display: block;
    font-family: var(--font-body);
    /* Matched to the logo's own height above, so neither reads bigger
       than the other. */
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Same color as the hero's own .house__by (#introduction .house__by)
       — unchanged from there, just relocated. */
    color: rgba(232, 220, 196, 0.8);
  }
  /* Gold "|" between the logo and the by-line, matching the by-line's
     own font-size/baseline rather than the logo's so it doesn't tower
     over the text. */
  .brand-mark__by::before {
    content: "|";
    display: inline-block;
    margin-right: 10px;
    color: var(--gold);
  }
}

.nav__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Dimmed gold at rest, full gold on hover/focus — rather than the
   plain ivory the nav used before. */
.nav__links a {
  color: var(--gold-dim);
  transition: color 0.3s var(--ease);
}
.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--gold-light);
}

.nav__row { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-right: -10px;
}

@media (max-width: 860px) {
  .site-header {
    /* On mobile the header is its own solid bar above the hero, not a
       transparent overlay floating on top of it. Sticky (rather than
       fixed) reserves its own space in the page flow — pushing the
       hero, and everything else, down below it — while still staying
       pinned to the top of the screen as the page scrolls. */
    position: sticky;
    background: var(--onyx);
  }

  .nav__links { position: fixed; inset: 0; top: 0; background: var(--onyx); color: var(--ivory);
    flex-direction: column; justify-content: center; align-items: center; gap: 32px;
    font-size: 0.8rem;
    /* Opacity/visibility instead of a transform-slide: animating a
       transform on a position:fixed full-screen element at the same
       moment the page underneath it scrolls is a well-known trigger
       for mobile browsers (Safari and Chrome both) to leave it
       visually stuck. Opacity avoids that class of bug entirely, and
       visibility ensures the closed menu isn't sitting there
       interactive/clickable even though invisible. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0s;
  }
  .nav__row .btn { display: none; }
  .nav__toggle { display: inline-flex; z-index: 70; }
}

/* ---------- The House (intro + vision) ----------
   Image + text, same grid pattern as .founder and .consultation
   below — text on the left here (markup order), media on the right,
   so the three image sections alternate text/media, media/text,
   text/media down the page instead of repeating the same side twice
   in a row. Media's share is wider than .founder's/.consultation's
   (1.15fr vs ~0.9fr) since Introduction's rotating photos are meant
   to read larger than the other two sections' single images. */
.house__grid {
  /* Positioned so .house__piece-group's mobile overlay (see its own
     comment) has this as its containing block: a plain property that
     doesn't affect desktop layout at all. */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

/* Text column stretches to the row's full height (set by the taller
   rotator image) so its heading stack — h1 through .house__piece-
   group, all in normal flow — can center itself vertically via
   flex. */
.house__intro {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Experimental: right-align the whole headline stack, not just
     .house__piece (which was already right-aligned on its own). */
  text-align: right;
  /* Nudges the already-centered (and already-raised, via the ::after
     spacer below) stack down by 15% of this column's own height —
     a percentage, so it scales with whatever that height is, rather
     than a fixed px offset tuned for one viewport. */
  transform: translateY(15%);
}
/* An invisible flex item after the real content, counted in
   justify-content's centering along with h1..house__closing — since
   that centers the combined (content + spacer) block, it nudges the
   visible headline stack up by half the spacer's height without
   moving .house__piece-group (a separate, absolutely-positioned
   sibling unaffected by this in-flow spacer). */
.house__intro::after {
  content: "";
  height: 150px;
}

/* Wraps h1 through .house__closing only — NOT .house__piece-group,
   which is a flex-sibling of this wrapper, so a transform here (a
   purely visual nudge; it doesn't reflow siblings) moves just the
   headline stack without touching the divider/caption's position. */
.house__heading {
  transform: translateY(-7%);
}

@media (max-width: 900px) {
  /* This gap is the desktop column-gutter between text/image — on
     mobile's single column it instead becomes a row-gap above the
     photo, which is now the first visible thing here (the text
     column above it is empty, its lines all moved elsewhere — see
     .house__heading's own mobile rules). The 40-100px desktop value
     reads as a big dead gap in that context, so it's cut way down. */
  .house__grid { grid-template-columns: 1fr; gap: 12px; }
}

.house__media {
  position: sticky;
  top: 110px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  /* Matches #introduction's own background exactly (the text column
     on the left) — every cutout rotator photo is filled to this same
     shade, so the photo's own background, this box's background and
     the section's background are one continuous color with no
     visible seam at any edge or crossfade. */
  background: var(--onyx-deep);
}
.house__media picture { position: absolute; inset: 0; display: block; }
.house__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  /* No order override needed — media is already second in the markup
     (after the text column), so it naturally falls after it once the
     grid collapses to a single column: copy first, photo second.
     Full-bleed: .house__grid IS .container (same element — see the
     markup), so its own padding-inline (var(--gutter)) is what insets
     the photo from the viewport edge. Canceling it with an equal
     negative margin here pulls the photo out flush to both edges,
     without affecting the heading/caption text, which stays padded
     normally. Square corners instead of the desktop 2px radius — a
     rounded corner sitting exactly on the viewport edge just reads as
     a rendering glitch, not a design choice. */
  .house__media {
    position: relative;
    top: auto;
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
  }
}

/* By-line / geography — a small identifying stack beneath the
   headline, inspired by the reference site's landing panel (name +
   region above its own tagline line). */
/* 4.5px left margin lines these up with the headline's own visible
   start — the h1's margin-left (an optical nudge for its tracked
   uppercase type) shifts it slightly right of the plain box edge
   these two would otherwise share. */
.house__by {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 22px 0 8px 4.5px;
}
.house__geo {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0 0 32px 4.5px;
  /* Dimmed via color, not element opacity — .house__geo also carries
     .reveal, whose own opacity transition (0 → 1 on scroll) would
     otherwise fight a plain opacity:0.8 here and win once revealed. */
}

/* Sequential reveal of the headline stack, each line after the last
   (the .reveal/.is-visible fade itself is the shared main.js/
   IntersectionObserver mechanism — this just staggers when each
   line's own transition starts), echoing the reference site's
   landing panel revealing its lines one at a time rather than all
   at once. .house__divider and .house__piece don't carry .reveal at
   all (see .house__piece-group below) — they're pinned to the
   bottom of a tall sticky image, which can easily sit below the
   fold on load while the image's own top (and this headline stack)
   is already visible; an independent scroll-triggered fade there
   would then lag noticeably behind the photo instead of landing
   with it. */
#introduction .house__by { transition-delay: 0.15s; }
#introduction .house__geo { transition-delay: 0.3s; }
#introduction .house__closing { transition-delay: 0.45s; }

.house__closing {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.11rem, 0.85vw + 0.89rem, 1.45rem);
  color: var(--wine);
  margin: 8px 0 0;
}

/* Divider + piece caption: on wide screens this is a plain in-flow
   block, right-aligned, right after .house__closing — just another
   member of .house__intro's own centered flex stack. */
.house__piece-group {
  width: 100%;
}
/* The mobile-only duplicate nested in the photo itself (see index.html
   and the mobile rule further down) — hidden here so it doesn't also
   render in-flow inside .house__media on wider screens. */
.house__piece-group--overlay {
  display: none;
}

@media (max-width: 900px) {
  /* The 15% translateY above is sized against the column's own
     (image-matched) height, which no longer applies once this is
     plain stacked block flow with an auto height — drop it here.
     Same reasoning for .house__heading's own -7% nudge below it. */
  .house__intro { display: block; transform: none; }
  .house__heading { transform: none; }
  /* "Ishvaana" joins the logo and "India · US · Worldwide" moves into
     its own header line instead (see .brand-mark__by/.site-header__meta
     and the header's own markup in index.html). The tagline
     (.house__closing) also leaves — see .house__closing-mobile further
     down, a separate mobile-only duplicate that sits after the photo
     instead of here. */
  .house__heading h1,
  .house__heading .house__by,
  .house__heading .house__geo,
  .house__heading .house__closing {
    display: none;
  }
  /* The desktop piece-group (in-flow, text column) is replaced below
     by .house__piece-group--overlay, a duplicate nested directly in
     the photo itself rather than reordered here — see that rule for
     why. */
  .house__intro > .house__piece-group {
    display: none;
  }
}

/* Mobile-only duplicate of .house__closing, as a plain sibling after
   the photo (see its own markup note in index.html) — simplest way to
   get the tagline below the photo without disturbing
   .house__piece-group--overlay's own anchor to the photo (see that
   rule below), which .house__closing's original position doesn't
   affect either way. Hidden on wider screens, where the original
   .house__closing (inside .house__heading) is the one shown. */
.house__closing-mobile {
  display: none;
}

@media (max-width: 900px) {
  .house__closing-mobile {
    display: block;
    text-align: center;
    font-family: var(--font-quote);
    font-style: italic;
    font-size: clamp(1.11rem, 0.85vw + 0.89rem, 1.45rem);
    line-height: 1.55;
    color: rgba(243, 236, 220, 0.95);
    margin: 24px 0 0;
  }

  /* Mobile-only duplicate of .house__piece-group, nested directly in
     .house__media (see index.html) rather than reordered from its
     desktop position in .house__intro — that keeps its anchor here
     simple and robust (.house__media has its own position:relative
     for mobile above) regardless of whatever else moves around it in
     flow, like .house__closing-mobile now sitting after the photo. On
     the single-column mobile layout this overlays the photo's own
     bottom-right corner, rather than following the headline in normal
     flow. A text-shadow keeps the text legible over whatever part of
     the photo ends up behind it. */
  .house__piece-group--overlay {
    display: block;
    position: absolute;
    z-index: 2;
    width: auto;
    /* Indented 9% further left from the photo's flush right edge — a
       percentage of .house__media's own width (its containing block). */
    right: 9%;
    /* Moved down ~2% from the plain 20px inset — the 2% is a
       percentage of .house__media's own height (this element's
       containing block), consistent with how the horizontal 9%
       indent above resolves against its width. */
    bottom: calc(20px - 2%);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  }
}

/* Thin rule separating the tagline's centered group from the piece
   details below it. */
.house__divider {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 132px 0 28px auto;
}

@media (max-width: 900px) {
  /* The big top gap above only made sense directly under the
     tagline in normal flow — as an overlay on the photo instead,
     it would just push the whole caption down off the bottom edge.
     The bottom gap (to the piece name/details below) is halved here
     too, mobile-only. */
  .house__divider { margin-top: 0; margin-bottom: 14px; }
}

/* Rotator caption: name + gold/stone details of whichever piece is
   currently on screen, stacked one line per detail, right below the
   divider. Content itself is swapped by assets/js/intro-rotator.js
   in sync with the slide change — see that file for why the fade
   there is a quick in-place swap rather than a slower reveal-style
   crossfade. */
.house__piece {
  text-align: right;
}
.house__piece-name {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px 4.5px;
}
.house__piece-line {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 4px 4.5px;
}
.house__piece-line:last-child {
  margin-bottom: 0;
}

/* The House also carries the page's opening/hero moment, so it gets
   a dark (onyx) treatment instead of its usual light background —
   the classes above are reused as-is, just recolored here. */
#introduction {
  background: var(--onyx-deep);
  color: var(--ivory);
  /* The header floats over this section rather than pushing it down,
     so .section's own top padding is the entire visible gap between
     the nav row and the headline/image below it — trimmed to 75% of
     the shared value here only. Bottom padding is cut to 50% of the
     shared default separately. */
  padding-top: clamp(48px, 7.5vw, 105px);
  padding-bottom: clamp(32px, 5vw, 70px);
}

@media (max-width: 900px) {
  /* The text column above the photo is now empty on mobile (its lines
     all moved into the header or below the photo — see .house__heading's
     own mobile rules), so the desktop-tuned 48-105px top padding above
     just reads as a big dead gap before the photo. Cut further here. */
  #introduction { padding-top: clamp(16px, 4vw, 32px); }
}

/* About and Consultation run tighter than the shared .section default —
   half the top/bottom padding, top and bottom both. */
#about,
#consultation {
  padding-block: clamp(32px, 5vw, 70px);
}
/* The headline is the ISHVAANA wordmark itself here, not a sentence —
   tracked gold caps, matching the reference site's own .landing-mark
   font-size/letter-spacing/color exactly (Sample Websites/Website 1/
   index.html), rather than the plain ivory sentence-case treatment
   h1 gets elsewhere (there is nowhere else on the page a second h1
   could pick this up by accident). The whole headline stack below —
   .house__by through .house__closing — is matched the same way, to
   that reference's .landing-by/.landing-geo/.landing-line. */
#introduction h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 3.8vw, 2.75rem);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  margin-left: 0.08em;
  /* letter-spacing adds trailing space after the last character too,
     which right-align then renders as a gap before the true right
     edge — pull it back in by that same amount so "ISHVAANA" lines
     up flush with the rest of the right-aligned column below it. */
  margin-right: -0.38em;
  color: #C4A574;
}
#introduction .house__by {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  margin-right: -0.28em;
  color: rgba(232, 220, 196, 0.8);
}
#introduction .house__geo {
  font-size: 0.52rem;
  letter-spacing: 0.34em;
  margin-right: -0.34em;
  color: rgba(196, 165, 116, 0.55);
}
#introduction .house__closing {
  font-size: clamp(1.05rem, 2.1vw, 1.38rem);
  line-height: 1.55;
  color: rgba(243, 236, 220, 0.95);
}
#introduction .house__piece-name { color: var(--ivory); }
#introduction .house__piece-line { color: rgba(222, 203, 160, 0.75); }

/* Introduction's crossfade image carousel — sits inside .house__media
   exactly where a single <picture> would normally go (same sticky/
   aspect-ratio box, untouched); each slide stacks absolutely and
   crossfades via opacity. Starts on whichever slide carries .is-on in
   the markup (server-rendered, so there's no flash-of-nothing before
   JS runs) — see assets/js/intro-rotator.js. */
.house__media .rotator {
  position: absolute;
  inset: 0;
}
.rotator__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s var(--ease);
}
.rotator__slide.is-on { opacity: 1; }
/* Sits on top of the photo (last in DOM order, no z-index needed) and
   catches every pointer interaction instead of the <img> underneath.
   This is what actually stops Safari's Live Text/"Visual Look Up" —
   it only runs its OCR-and-popup analysis on whatever element is
   directly hovered/pressed, so once that's this empty div instead of
   the image, there's no image content for it to scan. (The false
   "phone number" it was finding wasn't a watermark — the photos were
   checked and have none — it's Live Text misreading the jewelry's own
   gold filigree/engraving as digit shapes, a known false-positive
   mode on busy decorative textures.) Same device-free trick is used
   on .founder__media/.consultation__media below. */
.rotator__shield {
  position: absolute;
  inset: 0;
}
.rotator__slide img {
  /* contain, not cover — the source photos mix square and portrait
     crops, and the brief is for every photo to show in full as it
     rotates through this one fixed frame, not to fill it edge to
     edge at the cost of cropping some of them. */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Per-photo framing tweaks, picking up where object-fit: contain
   leaves off. Most of these source photos are square, which contain
   letterboxes top/bottom inside this 4:5 frame (there's no slack
   left/right — width is the matched axis) — so translateY has room
   to shift the photo within that letterboxed band before it starts
   cropping real content, and scale() zooms in from there, cropping
   in from whichever edge is already flush. Percentages for
   translateY always resolve against the image's own unscaled box,
   so "move down by X%" means the same X% of this frame's height
   whether or not a scale() is also present. */
.rotator__slide:nth-child(2) img { transform: scale(1.2) translateY(5%); }
.rotator__slide:nth-child(3) img { transform: scale(1.1) translateY(10%); }
.rotator__slide:nth-child(4) img { transform: scale(1.2) translateY(5%); }
.rotator__slide:nth-child(5) img { transform: scale(1.69); }
.rotator__slide:nth-child(6) img { transform: scale(1.32) translateY(5%); }
.rotator__slide:nth-child(7) img { transform: scale(1.15) translateY(10%); }
.rotator__slide:nth-child(8) img { transform: scale(1.44) translateY(-5%); }
.rotator__slide:nth-child(9) img { transform: scale(1.15); }
.rotator__slide:nth-child(10) img { transform: scale(1.2) translateY(5%); }
.rotator__slide:nth-child(11) img { transform: scale(1.5); }
.rotator__slide:nth-child(12) img { transform: scale(1.2); }
.rotator__slide:nth-child(13) img { transform: scale(1.38); }

@media (max-width: 900px) {
  /* Image 1 is the one lifestyle photo (the others are product cutouts
     recomposited square-ish to match this 4:5 frame) — its own 2:3
     ratio is narrower than the frame, so object-fit: contain fits it
     to the frame's height and leaves empty space on both sides rather
     than filling the width. scale(1.2) would be the exact factor to
     fill the width completely (1200/1800 ÷ 4/5 = 5/6, and 1 ÷ 5/6 =
     1.2), but that read as too zoomed-in; scale(1.1) is a deliberately
     lighter crop that still leaves a slim margin on each side. Mobile-
     only since that's where this was actually spotted; images 2-12
     (not 13) also move up 5% further from their existing position
     here, per the same request. */
  .rotator__slide:nth-child(1) img { transform: scale(1.1); }
  .rotator__slide:nth-child(2) img { transform: scale(1.2); }
  .rotator__slide:nth-child(3) img { transform: scale(1.1) translateY(5%); }
  .rotator__slide:nth-child(4) img { transform: scale(1.2); }
  .rotator__slide:nth-child(5) img { transform: scale(1.69) translateY(-5%); }
  .rotator__slide:nth-child(6) img { transform: scale(1.32) translateY(-4%); }
  .rotator__slide:nth-child(7) img { transform: scale(1.15); }
  .rotator__slide:nth-child(8) img { transform: scale(1.44) translateY(-10%); }
  .rotator__slide:nth-child(9) img { transform: scale(1.15) translateY(-5%); }
  .rotator__slide:nth-child(10) img { transform: scale(1.2); }
  .rotator__slide:nth-child(11) img { transform: scale(1.5) translateY(-5%); }
  .rotator__slide:nth-child(12) img { transform: scale(1.2) translateY(-5%); }
}

@media (prefers-reduced-motion: reduce) {
  .rotator__slide { transition: none; }
}

/* ---------- The Founder ---------- */
/* A bit more breathing room above this section specifically (not
   sitewide) — one deliberate pause before the founder narrative
   begins, rather than a general padding increase. */
#founder {
  padding-top: clamp(96px, 14vw, 180px);
}

.founder {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; }
}

/* Same Safari Live Text shield as .rotator__shield above — last in
   DOM order, sits on top of the photo, catches hover/press so there's
   no image pixels under the pointer for Safari to OCR. Shared by both
   .founder__media and .consultation__media below. */
.img-shield {
  position: absolute;
  inset: 0;
}

.founder__media {
  position: sticky;
  top: 110px;
  /* Matches the portrait's own 1000x1500 proportions (2:3), not the
     site's usual 4:5 — that mismatch was forcing object-fit:cover to
     crop the top/bottom off her photo to fill the box. Matching the
     frame to the photo means the full image shows, full width. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 2px;
  /* Matches .section--wine's own background exactly — contain is a
     safety net in case a future photo doesn't share this exact
     ratio; if it doesn't, the letterboxed band disappears into this
     rather than reading as a visible frame (same approach as
     Introduction's rotator against --onyx). */
  background: var(--wine);
}
.founder__media picture { position: absolute; inset: 0; display: block; }
.founder__media img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 900px) {
  /* Sticky only makes sense beside the longer text column on wide
     screens (see the same treatment on .consultation__media). This
     block must sit after the base rule — equal specificity, source
     order wins. Media is first in the markup (it's the left column
     on desktop) — on mobile the copy should read before the portrait,
     so order it after the text column here. */
  .founder__media { position: relative; top: auto; order: 1; }
}

.founder__eyebrow { color: var(--gold-light); }

@media (max-width: 900px) {
  /* "About" / "Haritha Manne" / the divider under them, centered on
     mobile only — the paragraph text after stays left-aligned. */
  .founder__eyebrow,
  .founder h2 {
    text-align: center;
  }
  .founder .divider {
    margin-inline: auto;
  }
}

/* Matches .step p's size in Consultation below, rather than the
   site-wide default plain-paragraph size .lede and these otherwise
   share with every other section. */
.founder p { font-size: 0.95rem; }

.founder__quote {
  margin-top: 34px;
  padding-left: 24px;
  border-left: 2px solid var(--gold);
  color: var(--ivory-deep);
}

.founder__cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* ---------- Consultation ---------- */
.consultation {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

@media (max-width: 900px) {
  .consultation { grid-template-columns: 1fr; }
}

.consultation__media {
  position: sticky;
  top: 110px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
}
.consultation__media picture { position: absolute; inset: 0; display: block; }

@media (max-width: 900px) {
  /* Sticky only makes sense beside the long step list on wide
     screens; on a single-column mobile layout it can visually
     "stick" oddly (and has been observed to confuse some browsers'
     lazy-image-loading heuristics), so switch it off here. This
     block must come after the base .consultation__media rule
     above (same specificity — source order decides the winner).
     No order override needed — media is already second in the
     markup (after the text column), so it naturally reads after it
     once the grid collapses to a single column. */
  .consultation__media { position: relative; top: auto; }
}
.consultation__media img { width: 100%; height: 100%; object-fit: cover; }

.consultation__eyebrow { color: var(--wine); }

.consultation__intro { max-width: 46ch; }

@media (max-width: 900px) {
  /* Same treatment as .founder__eyebrow/h2/.divider in About — see
     those for why (the paragraph text after stays left-aligned). */
  .consultation__eyebrow,
  .consultation h2 {
    text-align: center;
  }
  .consultation > .reveal > .divider {
    margin-inline: auto;
  }
  .consultation__intro,
  .consultation__shipping {
    text-align: center;
  }
}

.consultation__shipping {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--wine);
  margin: 26px 0 44px;
}

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding-block: 22px;
  border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
}

.step h4 { margin: 0 0 4px; font-size: 1.2rem; }
.step p { margin: 0; color: var(--charcoal); opacity: 0.85; font-size: 0.95rem; }

/* Closing "Get in touch" panel, folded into the end of Consultation
   rather than its own section — a wine inset card, echoing the same
   wine accent used for About. */
.consultation__cta {
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(32px, 5vw, 48px);
  background: var(--wine);
  color: var(--ivory);
  text-align: center;
  border-radius: 2px;
}
.consultation__cta .eyebrow { color: var(--gold-light); }
.consultation__cta h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2.1rem);
  margin: 10px 0 14px;
}
.consultation__cta p {
  max-width: 44ch;
  margin: 0 auto 26px;
  color: var(--ivory-deep);
}
.consultation__cta .consultation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--onyx);
  color: var(--ivory-deep);
  padding-block: 48px;
  border-top: 1px solid var(--line-on-dark);
}
.site-footer__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Same traced wordmark image as the header (see .brand-mark) — a
   touch smaller here, beside the tagline rather than the nav. */
.site-footer__wordmark img { height: 16px; width: auto; display: block; }
.site-footer__tagline { font-family: var(--font-quote); font-style: italic; font-size: 0.95rem; color: var(--gold-light); }
.site-footer__meta { font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.75; }
.site-footer__instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ivory-deep);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.site-footer__instagram:hover,
.site-footer__instagram:focus-visible { color: var(--gold-light); }
.site-footer__instagram[hidden] { display: none; }
.site-footer__bottom { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-on-dark);
  font-size: 0.75rem; opacity: 0.6; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }