/* ── Homepage hero ────────────────────────────────────────────────────────────
   The two-panel hero from belleindex_sliced_assets.zip: a black intro on the
   left, the ivory composer on the right.

   Namespace `hp-`. Two exceptions, both deliberate:
     • `.bx-thumb*` inside the photo panel are behavioural hooks the uploader
       in index.php is written against — they keep their names, restyled here.
     • `.bx-sel*` is what assets/js/hero-select.js builds when it replaces a
       native option list. Same reason.

   ── Geometry, so it can be reasoned about rather than nudged ──
   Every number below was read off reference_full.png, which is 1:1 with a
   1402px-wide viewport. In those coordinates:

     hero band          y 111 → 598      487 tall
     left panel         x  43 → 677      634 wide  (dark card 426 + pro 61)
     right panel        x 709 → 1360     651 wide
     right card inner   x 735 → 1341     606 wide  (fields 364 · gap 30 · photos 212)
     field row          58 tall, 15 apart          → four rows = 277
     CTA                46 tall pill
     chips              34 tall

   Height is the whole point of this revision: the reference fits the entire
   homepage into ~1100px. Anything added here has to come out of something
   else, or the hero stops fitting one screen. */

.hp {
  --hp-ink:      #11110f;   /* panel black */
  --hp-paper:    #fffdfa;   /* right card */
  --hp-ivory:    #f8f6f1;
  --hp-field:    #fdfcf9;
  --hp-line:     #e8e2d7;   /* subtle warm border */
  --hp-gold:     #c9a24a;   /* champagne — never a bright yellow */
  --hp-gold-lit: #e0c477;
  --hp-grey:     #77736b;
  --hp-radius:   22px;
  --hp-shadow:   0 8px 30px rgba(20,18,12,.06);
}

/* ═══ Layout ═══ */
.hp {
  display: grid;
  /* minmax(0, 1fr), not 1fr. A bare `1fr` is minmax(AUTO, 1fr), so a column
     never shrinks below its content's minimum — and the composer's minimum is
     wide. Between the stacking breakpoint and the point where --page-max takes
     over, that let the right card take 588px of a 1028px row and squeeze the
     photograph panel down to 440, which wrapped "Connect with top pros" onto
     three lines. Both halves now genuinely share the row. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
}

/* ═══ Left panel ═══
   An ivory card holding the black stage, with the line for professionals
   sitting on the ivory beneath it. The stage is pulled out over the card's
   own border so the black runs flush to three edges, exactly as it does in
   the reference. */
.hp-intro {
  display: flex; flex-direction: column;
  background: var(--hp-paper);
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-shadow);
}
.hp-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  margin: -1px -1px 0;
  padding: 26px 0;
  border: 1px solid rgba(201,162,74,.42);
  border-radius: var(--hp-radius);
  color: #fff;
  background:
    radial-gradient(58% 46% at 78% 30%, #22242a 0%, rgba(34,36,42,0) 68%),
    radial-gradient(46% 40% at 12% 88%, #1b1d21 0%, rgba(27,29,33,0) 62%),
    var(--hp-ink);
}
/* ── The backdrop ──
   The panel used to be drawn: a marble gradient, a very large gold ellipse and
   an SVG of brushes in a vessel. It is a photograph now, and each photograph is
   a whole composition — dark ground, gold sweep, sparkle, still life — so all
   of that drawing is gone rather than sitting underneath. The layers stack and
   crossfade; the carousel script in index.php owns which one is `.is-on`. */
.hp-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: cover; background-position: center right;
  opacity: 0; transition: opacity 1.1s ease;
}
.hp-bg.is-on { opacity: 1; }

/* The guarantee, not the mood. The copy is white and the photographs are hand
   picked later; this keeps the headline readable over whichever one arrives.
   It is finished before 66% of the panel so it never dulls the still life. */
.hp-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(9,9,8,.42) 0%, rgba(9,9,8,.2) 42%, rgba(9,9,8,0) 66%);
}

/* The copy column stops at 70% of the panel. In the photographs the still life
   is anchored bottom-right and nothing of it reaches above 68% until below the
   feature row, so the headline, the lede and the icons have the whole left of
   the frame. The one full-width block is the free-to-post strip, and it stops
   earlier still — see `.hp-perkbox`. */
.hp-inner { position: relative; z-index: 3; padding: 0 30% 0 46px; }

.hp-h1 {
  margin: 0 0 13px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(29px, 2.9vw, 40px); line-height: 1.04; letter-spacing: -.01em;
  color: #fff;
}
.hp-h1 em {
  font-style: italic; font-weight: 600;
  background: linear-gradient(96deg, #e8cf94, #c9a24a 58%, #dcbf7f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Two things this ornament needs, and it needs both.
   `display: inline-block` — Tailwind's preflight sets `svg { display: block }`
   for every SVG on the site, which put this one on a line of its own under the
   headline, left-aligned, and added its height to the panel. It has to be told
   otherwise, and so does its twin on the composer's heading.
   `position: relative` rather than `vertical-align` — a raised baseline grows
   the line box; offsetting a positioned element costs no height at all. */
.hp-h1-spark, .hp-h2-spark {
  display: inline-block; vertical-align: baseline;
  position: relative; color: var(--hp-gold);
}
.hp-h1-spark { width: .34em; height: .34em; margin-left: .26em; top: -.42em; }
/* Translated headlines arrive as a single text run, so the accent cannot sit
   on a chosen word — it sweeps the line instead. See the note in the include. */
.hp-h1--flow {
  background: linear-gradient(102deg, #fff 0%, #fff 42%, #e8cf94 74%, #c9a24a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[dir="rtl"] .hp-h1--flow { background-image: linear-gradient(258deg, #fff 0%, #fff 42%, #e8cf94 74%, #c9a24a 100%); }

.hp-lede {
  margin: 0 0 22px;
  font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.86);
}

/* ── The four reassurances ── */
.hp-feats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0 0 20px; padding: 0; list-style: none; text-align: center;
}
.hp-feat { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.hp-feat-ico {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid rgba(201,162,74,.55); border-radius: 50%;
  color: var(--hp-gold-lit);
}
.hp-feat-ico svg { width: 20px; height: 20px; }
.hp-feat-t { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.9); }

/* ── Free-to-post strip ── */
/* The one block in the copy column wide enough to reach the photograph. It is
   also the lowest, which is exactly where the still life sits, so it stops
   short of the column's own right edge instead of running to it. */
.hp-perkbox {
  max-width: 330px;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px 9px 9px;
  border: 1px solid rgba(201,162,74,.26); border-radius: 15px;
  /* A real card, not a tint. At 3% white the strip vanished into the still life
     behind it and took its chevron with it — the only affordance saying the
     thing is a link. */
  background: rgba(16,15,13,.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  text-decoration: none;
  transition: background .16s, border-color .16s;
}
.hp-perkbox:hover { background: rgba(24,22,19,.74); border-color: rgba(201,162,74,.5); }
.hp-perkbox-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(201,162,74,.13); color: var(--hp-gold-lit);
}
.hp-perkbox-ico svg { width: 20px; height: 20px; }
/* 13px, not 14: the strip's first line ends on a bullet and has to hold
   "It's free to post • Receive offers •" whole. A hair wider and the bullet
   wraps to a line of its own, which looks like a typo. */
.hp-perkbox-t { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.94); }
.hp-perkbox-t i { font-style: normal; color: var(--hp-gold); padding: 0 3px; }
.hp-perkbox-chev { flex: 0 0 auto; width: 15px; height: 15px; color: var(--hp-gold); transition: transform .16s; }
.hp-perkbox:hover .hp-perkbox-chev { transform: translateX(3px); }

/* ── The line for professionals, on the ivory ── */
.hp-pro {
  flex: 0 0 auto; margin: 0; padding: 17px 20px 16px;
  text-align: center; font-size: 14.5px; color: #3a3833;
}
.hp-pro a {
  color: var(--hp-gold); font-weight: 600; text-decoration: none;
  margin-left: 8px; white-space: nowrap;
}
.hp-pro a span { display: inline-block; transition: transform .16s; }
.hp-pro a:hover span { transform: translateX(4px); }

/* ═══ Right panel — the composer ═══ */
.hp-card {
  display: flex; flex-direction: column;
  padding: 24px 24px 20px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: var(--hp-paper);
  box-shadow: var(--hp-shadow);
}

.hp-head { margin-bottom: 15px; }
.hp-h2 {
  margin: 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 2.3vw, 32px); line-height: 1.06; letter-spacing: -.012em;
  color: var(--navy);
}
.hp-h2-spark { width: .40em; height: .40em; margin-left: .34em; top: -.34em; }

/* Fields beside the photo panel — 364 / 212 in the reference. More of it goes
   to the photo column here than the reference's 1.72:1, because the site column
   is narrower and the photo copy was wrapping to three lines.

   minmax(0, …) on both, for the same reason as `.hp` above: a bare `1.55fr` is
   minmax(AUTO, 1.55fr), and the fields column's content minimum is wider than
   its share — so it took 360 of 467 and left the photo box 155 instead of 182,
   which is what pushed "Show them the look you want" onto three lines. */
.hp-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hp-fields { display: flex; flex-direction: column; gap: 12px; }

/* ── Fields ──
   Label inside the field above the value, plain icon to its left, action at
   the right. No icon tile: the reference sets these bare. */
.hp-f { margin: 0; }
.hp-v {
  position: relative;
  /* wrap, so the Date field's picker can take a full-width line of its own
     beneath the label and value rather than squeezing into the value column */
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  min-height: 58px; padding: 8px 14px 8px 18px;
  background: var(--hp-field);
  border: 1px solid var(--hp-line); border-radius: 15px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.hp-v:hover { background: #fff; border-color: #ded4bf; }
.hp-v:focus-within { background: #fff; border-color: var(--hp-gold); box-shadow: 0 0 0 3px rgba(201,162,74,.14); }
.hp-v.is-picked { border-color: rgba(201,162,74,.55); background: #fffdf7; }

.hp-ico { flex: 0 0 auto; display: grid; place-items: center; color: #17181a; }
.hp-ico svg { width: 22px; height: 22px; }

.hp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hp-l {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #5f5b54;
}
.hp-l em { font-style: normal; font-weight: 600; letter-spacing: .09em; color: #8d887f; }
/* The photo panel's label is a heading for the whole box, not part of a field,
   and it is the longest of the five — it gets a tighter track so it stays on
   one line in the narrower column. */
.hp-l--own { display: block; margin-bottom: 9px; letter-spacing: .09em; }

.hp-i {
  width: 100%; margin: 0; padding: 0; border: 0; background: none;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: #151515;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.hp-i:focus, .hp-i:focus-visible { outline: none; }
.hp-i::placeholder { color: #a5a096; font-weight: 400; }
input.hp-i { cursor: text; }
select.hp-i option { background: #fff; color: var(--text); }

/* ── The calendar and the clock ──
   Revealed inside the Date field by its "Pick a date & time" option. Both are
   native controls, so most of what is here is just making them look like the
   rest of the card; the picker indicator is the platform's own button. */
/* `min-width: 0` on all three, and it is load-bearing. As a flex item this row
   gets min-width:auto, which resolves to its own min-content width — and its
   content is two NATIVE inputs whose intrinsic minimums (a date field wants
   ~146px for "MM/DD/YYYY" plus its calendar button) add up to 259px against a
   236px field. The automatic minimum wins over flex-basis, so the row grew past
   the field's padding and the time input hung outside the gold border. */
.hp-when { flex: 0 0 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1px; }
.hp-when[hidden] { display: none; }
/* Side by side while both fit, stacked when they do not. The basis is what
   decides that: below ~200px of field the two would be squeezed narrow enough
   to clip "10:00 AM", and a wrapped pair reads better than a truncated one. */
.hp-when-f { flex: 1 1 96px; min-width: 0; }
.hp-when-f:first-child { flex-grow: 1.3; }   /* a date is wider than a time */
.hp-when-i {
  width: 100%; min-width: 0; padding: 7px 9px; margin: 0;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: #151515;
  background: #fff; border: 1px solid var(--hp-line); border-radius: 10px;
  transition: border-color .14s, box-shadow .14s;
}
.hp-when-i:focus, .hp-when-i:focus-visible {
  outline: none; border-color: var(--hp-gold); box-shadow: 0 0 0 3px rgba(201,162,74,.14);
}
.hp-when-i::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; transition: opacity .14s; }
.hp-when-i::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* The time is a <select>, so it needs its own chevron — and a narrower right
   inset than the date's calendar button, which is what buys the room the
   "AM"/"PM" needs at the tightest two-column width. */
.hp-when-sel {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2a27' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 11px 11px;
}
.hp-when-sel option { background: #fff; color: var(--text); }

/* ── The custom price ──
   One box rather than two, so it takes the whole line. The "$" is a sibling
   rather than a placeholder or a background image: it has to stay put while
   the number is typed, and it has to move out of the way of a long one, which
   only works if it takes real width in the flow. */
.hp-when--money .hp-money { flex: 1 1 100%; min-width: 0; display: flex; align-items: stretch; }
.hp-money-pre {
  display: flex; align-items: center; padding: 0 2px 0 10px;
  border: 1px solid var(--hp-line); border-right: 0; border-radius: 10px 0 0 10px;
  background: #fff; color: var(--hp-grey); font-size: 14px; font-weight: 600;
  transition: border-color .14s;
}
.hp-money-i { border-radius: 0 10px 10px 0; padding-left: 4px; }
.hp-money-i:focus, .hp-money-i:focus-visible { box-shadow: 0 3px 0 0 rgba(201,162,74,.14); }
/* The pair reads as one control, so the focus ring has to land on both. */
.hp-money:focus-within .hp-money-pre { border-color: var(--hp-gold); }
.hp-money:focus-within { border-radius: 10px; box-shadow: 0 0 0 3px rgba(201,162,74,.14); }
.hp-money:focus-within .hp-money-i { box-shadow: none; }
/* A spinner beside a price is noise — the field takes any number typed. */
.hp-money-i::-webkit-outer-spin-button,
.hp-money-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hp-money-i { -moz-appearance: textfield; appearance: textfield; }

.hp-chev { flex: 0 0 auto; width: 17px; height: 17px; color: #2b2a27; transition: color .14s, transform .14s; }
.hp-v:hover .hp-chev { color: var(--hp-gold); transform: translateX(1px); }

.hp-locate {
  flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 1px solid var(--hp-line);
  border-radius: 50%; background: #fff; color: #17181a; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(20,18,12,.06);
  transition: background .14s, color .14s, border-color .14s;
}
.hp-locate svg { width: 19px; height: 19px; }
.hp-locate:hover { background: #fdfaf2; color: var(--hp-gold); border-color: var(--hp-gold-lit); }
/* The shared autocomplete widget unfolds a drag-the-pin map and a long accuracy
   note, both sized for the /request-service wizard. Not here. */
.hp-card .geo-pin, .hp-card .geo-acc { display: none !important; }

/* ── Photos ── */
.hp-photos {
  display: flex; flex-direction: column;
  padding: 14px; border: 1px solid var(--hp-line); border-radius: 15px;
  background: var(--hp-field);
}
.hp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hp-drop {
  flex: 1; display: flex; flex-direction: column; gap: 12px; cursor: pointer;
  padding: 13px; border: 1px dashed #ddd2b8; border-radius: 13px; background: #fff;
  transition: border-color .15s, background .15s;
}
.hp-drop:hover { background: #fdfaf2; border-color: var(--hp-gold-lit); }
.hp-file:focus-visible + .hp-drop { outline: 2px solid var(--hp-gold); outline-offset: 2px; }
.hp-drop-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hp-drop-copy { display: flex; flex-direction: column; gap: 5px; }
.hp-drop-copy b { font-size: 14px; font-weight: 650; line-height: 1.34; color: #151515; }
.hp-drop-copy i { font-style: normal; font-size: 12.5px; line-height: 1.42; color: var(--hp-grey); }
.hp-count {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 999px;
  background: #f4f1ea; color: #6f6a62; font-size: 12.5px; font-weight: 600;
}
.hp-msg { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--hp-grey); }
.hp-msg:empty { display: none; }
.hp-msg.is-bad { color: #a02020; }

/* The uploader's own hooks, restyled. `#heroThumbs` holds only tiles — the
   copy and the counter are siblings, because render() empties the strip. */
.hp-thumbs { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hp-thumbs .bx-thumb {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
  background-size: cover; background-position: center;
}
.hp-thumbs .bx-thumb-add {
  order: -1;                      /* the plus tile stays leftmost */
  display: grid; place-items: center; border: 0;
  background: #15161a; color: #fff;
  transition: transform .13s;
}
.hp-drop:hover .bx-thumb-add { transform: scale(1.05); }
.hp-thumbs .bx-thumb-has { position: relative; border: 1px solid var(--hp-line); }
.hp-thumbs .bx-thumb-has.is-pending { opacity: .6; }
.hp-thumbs .bx-thumb-x {
  position: absolute; top: -5px; right: -5px; width: 19px; height: 19px;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #15161a; color: #fff; font-size: 12px; line-height: 1;
  display: grid; place-items: center;
}
.hp-thumbs .bx-thumb-x:hover { background: #a02020; }

/* ── Action ── */
.hp-go {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; margin-top: 18px; min-height: 46px; padding: 12px 20px;
  border: 1px solid rgba(201,162,74,.85); border-radius: 999px;
  background: linear-gradient(180deg, #1d1e21, #0b0c0d);
  color: var(--hp-gold-lit); font-family: var(--sans);
  font-size: 14.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(17,17,15,.7);
  transition: box-shadow .18s, border-color .18s, transform .07s;
}
.hp-go:hover { box-shadow: 0 14px 32px -14px rgba(17,17,15,.78); border-color: var(--hp-gold-lit); }
.hp-go:active { transform: scale(.99); }
.hp-go-arrow { flex: 0 0 auto; width: 18px; height: 18px; transition: transform .18s; }
.hp-go:hover .hp-go-arrow { transform: translateX(4px); }

.hp-perks {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.hp-perks li {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 6px 8px; border-radius: 11px;
  background: #f5f2ec; color: #2a2823;
  font-size: 13.5px; font-weight: 500;
}
.hp-perks svg { flex: 0 0 auto; width: 15px; height: 15px; color: #17181a; }

/* ── The scripted option list ──
   assets/js/hero-select.js replaces only the OPTION LIST; the native one is
   drawn by the OS and cannot be styled. Pointer devices only — phones keep
   their own picker. */
/* `position: static` is the point: it hands the list's containing block up to
   .hp-v, so the menu spans the whole field instead of the text column. */
.hp-v .bx-sel { position: static; width: 100%; min-width: 0; }
.hp-v .bx-sel-btn {
  width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: #151515;
  text-align: left;
}
.hp-v .bx-sel-btn:focus { outline: none; }
.hp-v .bx-sel-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--hp-line); border-radius: 15px;
  box-shadow: 0 22px 46px -20px rgba(20,18,12,.4), 0 2px 6px rgba(20,18,12,.06);
  /* Sized so even the longest list, opened from the lowest field, still ends
     inside the page rather than off the bottom of it. */
  max-height: 232px; overflow-y: auto;
}
.hp-v .bx-sel-list[hidden] { display: none; }
.hp-v .bx-sel-o {
  padding: 10px 13px; border-radius: 11px; cursor: pointer;
  font-size: 14.5px; color: #45443f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-v .bx-sel-o:hover, .hp-v .bx-sel-o.is-active { background: #faf6ec; color: var(--navy); }
.hp-v .bx-sel-o[aria-selected="true"] { font-weight: 600; color: var(--hp-gold); }
.hp-v .bx-sel-o[aria-selected="true"]::after { content: " ✓"; }

/* An open list must clear the fields below it. Each `.hp-f` is its own stacking
   context, so raising the list alone is not enough — the field it belongs to
   has to come forward too. This is what put the old menu behind the next row. */
.hp-f:has(.bx-sel-list:not([hidden])) { position: relative; z-index: 30; }
.hp-card:has(.bx-sel-list:not([hidden])) { overflow: visible; }

/* ═══ The arrival ═══
   Each piece of the hero fades up in turn — headline, lede, the four
   reassurances one after another, the composer's rows a beat behind.

   EVERY RULE IS SCOPED TO `.is-arriving`, AND THAT CLASS IS ADDED BY SCRIPT.
   That is not decoration, it is the failure mode. The obvious way to write
   this is `animation: … both` on the elements themselves, so the from-state
   (opacity 0) applies during each delay and the stagger reads. But then the
   content is invisible until the animation runs — and a browser does not run
   animations in a background tab. Open the site in a new tab without looking
   at it and the entire hero is blank, indefinitely. Print styles, webviews
   that suspend rAF and screenshot services fail the same way.

   So: visible is the default, and the animation is opt-in. No script, no
   animation, content shows. Hidden tab, the script waits until the tab is
   actually looked at and only then starts the sequence. See the note beside
   the class in index.php. */
@keyframes hpRise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.hp.is-arriving .hp-h1,   .hp.is-arriving .hp-lede,  .hp.is-arriving .hp-feat,
.hp.is-arriving .hp-perkbox, .hp.is-arriving .hp-pro, .hp.is-arriving .hp-head,
.hp.is-arriving .hp-f,    .hp.is-arriving .hp-photos,
.hp.is-arriving .hp-go,   .hp.is-arriving .hp-perks {
  animation: hpRise .55s cubic-bezier(.22, .61, .36, 1) both;
}

/* Left panel, top to bottom. */
.hp.is-arriving .hp-h1    { animation-delay: .06s; }
.hp.is-arriving .hp-lede  { animation-delay: .14s; }
.hp.is-arriving .hp-feat:nth-child(1) { animation-delay: .22s; }
.hp.is-arriving .hp-feat:nth-child(2) { animation-delay: .28s; }
.hp.is-arriving .hp-feat:nth-child(3) { animation-delay: .34s; }
.hp.is-arriving .hp-feat:nth-child(4) { animation-delay: .40s; }
.hp.is-arriving .hp-perkbox { animation-delay: .48s; }
.hp.is-arriving .hp-pro     { animation-delay: .56s; }

/* The composer, so the two panels do not race each other. */
.hp.is-arriving .hp-head { animation-delay: .12s; }
.hp.is-arriving .hp-f:nth-child(1) { animation-delay: .20s; }
.hp.is-arriving .hp-f:nth-child(2) { animation-delay: .26s; }
.hp.is-arriving .hp-f:nth-child(3) { animation-delay: .32s; }
.hp.is-arriving .hp-f:nth-child(4) { animation-delay: .38s; }
.hp.is-arriving .hp-photos { animation-delay: .34s; }
.hp.is-arriving .hp-go     { animation-delay: .46s; }
.hp.is-arriving .hp-perks  { animation-delay: .54s; }

/* Someone who has asked their system for less motion gets the page, not the
   performance. The script checks this too; this is the belt to its braces. */
@media (prefers-reduced-motion: reduce) {
  .hp.is-arriving .hp-h1,   .hp.is-arriving .hp-lede,  .hp.is-arriving .hp-feat,
  .hp.is-arriving .hp-perkbox, .hp.is-arriving .hp-pro, .hp.is-arriving .hp-head,
  .hp.is-arriving .hp-f,    .hp.is-arriving .hp-photos,
  .hp.is-arriving .hp-go,   .hp.is-arriving .hp-perks { animation: none; }
  .hp-bg { transition: none; }
}

/* ═══ Responsive ═══ */

/* 1160, because that is where the layout stops being fixed: --page-max caps
   the column at 1120, so every viewport above ~1160 gets the same 527px panels
   and the same measurements this file was tuned against. Below it the panels
   shrink with the window, the copy needs the whole frame, and the still life is
   pushed most of the way out of it — with the scrim turned up to carry the
   contrast the empty ground used to. */
@media (max-width: 1160px) {
  .hp { gap: 20px; }
  .hp-inner { padding: 0 26px; }
  .hp-bg { background-position: 78% center; }
  .hp-scrim { background: linear-gradient(100deg, rgba(9,9,8,.78) 0%, rgba(9,9,8,.6) 46%, rgba(9,9,8,.2) 82%); }
  .hp-perkbox { max-width: none; }
  .hp-feat-t br { display: none; }
}

/* The composer keeps its two columns well below the point where the dark panel
   needs the whole frame: at 1000px the fields still get ~250 and the photo box
   ~150, which is enough for both. Stacking them at 1160 with the rest cost
   200px of page height for the sake of a 10px narrower card. */
@media (max-width: 1000px) {
  .hp-grid { grid-template-columns: 1fr; gap: 16px; }
  .hp-photos { flex-direction: column; }
  .hp-drop { flex-direction: row; align-items: center; gap: 14px; }
  .hp-drop-copy { flex: 1; }
}

/* Side by side stops working once each panel is narrower than its content. */
@media (max-width: 880px) {
  .hp { grid-template-columns: 1fr; gap: 16px; }
  .hp-intro, .hp-card { max-width: 620px; margin: 0 auto; width: 100%; }
  .hp-stage { padding: 30px 0; }
  /* Stacked, the panel is wide and short, so `cover` scales the photograph to
     the width and crops its HEIGHT. Anchor low: the empty sky at the top is
     what should go, not the still life at the foot. */
  .hp-bg { background-position: center 84%; }
}

@media (max-width: 560px) {
  /* Narrower than it is tall, so now the crop is horizontal. Anchor left and
     let the still life fall out of frame rather than showing half a bottle
     behind the headline — what is left is the dark ground and the gold sweep,
     which is the part the copy needs. */
  .hp-bg { background-position: 12% center; }
  .hp-inner { padding: 0 18px; }
  .hp-h1 { font-size: 30px; }
  .hp-lede { font-size: 14.5px; margin-bottom: 20px; }
  .hp-feats { grid-template-columns: repeat(2, 1fr); gap: 16px 4px; margin-bottom: 18px; }
  .hp-feat-ico { width: 44px; height: 44px; }
  .hp-feat-ico svg { width: 19px; height: 19px; }
  .hp-perkbox-t { font-size: 13.5px; }
  .hp-card { padding: 20px 16px 18px; }
  .hp-v { padding-left: 14px; gap: 12px; }
  .hp-i, .hp-v .bx-sel-btn { font-size: 16px; }
  .hp-go { letter-spacing: .16em; font-size: 13.5px; gap: 12px; }
  .hp-perks li { font-size: 12px; gap: 6px; padding: 6px 4px; }
  .hp-perks svg { width: 14px; height: 14px; }
}