/* Curry Mile — city-neutral homepage (Option B)
   Loaded by index.html only. Everything is namespaced hp- because the base
   sheet already owns .dishes, .dish, .split, .cap, .ph, .head and .t for the
   city pages, and reusing them silently inherits their layout.

   The governing idea: geography stops being architecture and becomes content.
   Every city reference on this page lives inside ONE component (.areas). Adding
   a city is a line of text; losing one leaves no hole in the layout. */

/* ---------- hero ---------- */
.hp-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hp-hero .bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.66) saturate(.92) contrast(1.02);
  transform:scale(1.06);animation:drift 30s var(--ease) infinite alternate;
}
@keyframes drift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1%,0)}}
@media (prefers-reduced-motion:reduce){.hp-hero .bg{animation:none}}
.hp-hero .grade{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(18,18,17,.9) 0%,rgba(18,18,17,.55) 46%,rgba(18,18,17,.28) 100%),
    linear-gradient(to top,rgba(18,18,17,.94) 0%,rgba(18,18,17,.4) 42%,rgba(18,18,17,.22) 70%,rgba(18,18,17,.68) 100%);
}
.hp-hero .container{position:relative;z-index:2;padding-bottom:clamp(64px,9vw,120px);padding-top:180px}
.hp-hero h1{
  font-size:clamp(46px,7.4vw,104px);line-height:1.02;letter-spacing:-.01em;
  color:var(--warm-white);max-width:15ch;
}
.hp-hero h1 em{font-style:normal;color:var(--gold)}
.hp-hero .hp-sub{
  margin-top:26px;font-size:clamp(17px,1.7vw,21px);color:var(--warm-white);
  opacity:.9;max-width:46ch;line-height:1.6;
}
.hp-hero .hp-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* ---------- proof strip (no geography) ---------- */
.hp-proof{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--charcoal-2)}
.hp-proof .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hp-proof .hp-p{padding:34px 26px;border-left:1px solid var(--hair-soft)}
.hp-proof .hp-p:first-child{border-left:0}
.hp-proof .hp-fig{font-family:var(--display);font-size:clamp(26px,3vw,38px);color:var(--gold);line-height:1}
.hp-proof .hp-lab{margin-top:9px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- signature dishes ---------- */
.hp-sigs{padding:clamp(72px,9vw,124px) 0}
.hp-sigs .hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);margin-top:52px}
.hp-sig{display:block;position:relative;overflow:hidden;background:var(--charcoal-2)}
.hp-sig .hp-ph{display:block;aspect-ratio:4/5;overflow:hidden}
.hp-sig .hp-ph img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(.84) saturate(.95) contrast(1.02);
  transition:transform 1.2s var(--ease),filter .8s var(--ease);
}
.hp-sig:hover .hp-ph img{transform:scale(1.05);filter:brightness(.92) saturate(1) contrast(1.03)}
.hp-sig .hp-cap{padding:22px 24px 26px;border-top:1px solid var(--hair-soft)}
.hp-sig .hp-nm{display:block;font-size:19px;letter-spacing:.02em;color:var(--warm-white)}
.hp-sig .hp-ds{display:block;margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- order routes ---------- */
.hp-routes{padding:clamp(72px,9vw,124px) 0;border-top:1px solid var(--hair)}
.route-list{margin-top:48px;border-top:1px solid var(--hair-soft)}
.hp-route{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 4px;border-bottom:1px solid var(--hair-soft);
  transition:padding-left .5s var(--ease),border-color .5s var(--ease);
}
.hp-route:hover{padding-left:16px;border-bottom-color:var(--gold-dim)}
.hp-route .hp-who{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.hp-route .hp-nm{font-size:clamp(19px,2.2vw,26px);letter-spacing:.04em;color:var(--warm-white);text-transform:uppercase}
.hp-route:hover .hp-nm{color:var(--gold)}
.hp-route .hp-note{font-size:14px;color:var(--muted)}
.hp-route .hp-go{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.hp-route:hover .hp-go{color:var(--gold)}
.hp-route.direct{border-left:2px solid var(--gold);padding-left:22px;background:rgba(200,167,91,.045)}
.hp-route.direct:hover{padding-left:30px}
.hp-route .hp-flag{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-dim);padding:4px 9px;
}

/* ---------- editorial split ---------- */
.hp-proper{padding:clamp(72px,9vw,124px) 0;border-top:1px solid var(--hair);background:var(--charcoal-2)}
.hp-proper .hp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:stretch}
.hp-proper .hp-ph{display:block;overflow:hidden}
.hp-proper .hp-ph{display:block;overflow:hidden;height:100%}
.hp-proper .hp-ph img{display:block;width:100%;height:100%;min-height:100%;object-fit:cover;filter:brightness(.83) saturate(.94) contrast(1.02)}
.hp-proper p{font-size:16.5px;line-height:1.78;color:var(--muted);margin-top:20px;max-width:52ch}
.hp-proper .hp-pull{
  font-family:var(--display);font-size:clamp(22px,2.6vw,30px);line-height:1.4;
  color:var(--warm-white);margin-top:28px;padding-left:22px;border-left:1px solid var(--gold-dim);
}

/* ---------- delivery areas — the ONLY place a city is named ---------- */
.hp-areas{padding:clamp(64px,8vw,104px) 0;border-top:1px solid var(--hair)}
.hp-areas .hp-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.area-row{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;
}
.hp-area{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 22px;border:1px solid var(--hair);
  font-size:14.5px;letter-spacing:.03em;color:var(--warm-white);
  transition:border-color .5s var(--ease),color .5s var(--ease);
}
.hp-area:hover{border-color:var(--gold-dim);color:var(--gold)}
.hp-area .hp-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.hp-area.soon{color:var(--muted-2)}
.hp-area.soon .hp-dot{background:var(--muted-2)}
.hp-area.soon .hp-when{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.hp-areas .hp-note{margin-top:26px;font-size:14.5px;color:var(--muted-2);max-width:60ch;line-height:1.7}

/* ---------- journal ---------- */
.hp-jrnl{padding:clamp(72px,9vw,124px) 0;border-top:1px solid var(--hair)}
.hp-jrnl .hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,42px);margin-top:48px}
.hp-jrnl a{display:block}
.hp-jrnl .hp-ph{display:block;overflow:hidden;aspect-ratio:16/10}
.hp-jrnl .hp-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.94);transition:transform 1.2s var(--ease)}
.hp-jrnl a:hover .hp-ph img{transform:scale(1.05)}
.hp-jrnl .hp-t{display:block;margin-top:18px;font-size:17.5px;line-height:1.42;color:var(--warm-white)}
.hp-jrnl a:hover .hp-t{color:var(--gold)}
.hp-jrnl .hp-k{display:block;margin-top:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- closing ---------- */
.hp-closing{position:relative;padding:clamp(90px,11vw,150px) 0;text-align:center;overflow:hidden;border-top:1px solid var(--hair)}
.hp-closing .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.52) saturate(.9) contrast(.94)}
.hp-closing .grade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,18,17,.78),rgba(18,18,17,.9))}
.hp-closing .container{position:relative;z-index:2}
.hp-closing h2{font-size:clamp(30px,4.4vw,58px);color:var(--warm-white)}
.hp-closing p{margin:20px auto 0;font-size:17px;color:var(--muted);max-width:46ch;line-height:1.7}
.hp-closing .hp-acts{display:flex;justify-content:center;gap:14px;margin-top:38px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hp-sigs .hp-grid,.hp-jrnl .hp-grid{grid-template-columns:1fr 1fr}
  .hp-proof .container{grid-template-columns:1fr 1fr}
  .hp-proof .hp-p:nth-child(3){border-left:0}
  .hp-proof .hp-p:nth-child(n+3){border-top:1px solid var(--hair-soft)}
  .hp-proper .hp-split{grid-template-columns:1fr}
  .hp-proper .hp-ph img{aspect-ratio:16/10}
}
@media (max-width:640px){
  .hp-sigs .hp-grid,.hp-jrnl .hp-grid{grid-template-columns:1fr}
  .hp-proof .container{grid-template-columns:1fr}
  .hp-proof .hp-p{border-left:0;border-top:1px solid var(--hair-soft)}
  .hp-proof .hp-p:first-child{border-top:0}
  .hp-route{flex-direction:column;align-items:flex-start;gap:10px}
  .hp-hero .container{padding-top:140px}
}


/* ── Light bands on the homepage (2026-08-27) ────────────────────────────────
   The page was charcoal end to end, which read as one long black slab. Adding
   .hp-inv to a section flips it to the warm-white ground so the page breathes:

       hero  DARK -> proof  LIGHT -> signatures LIGHT -> order DARK
             -> story LIGHT -> journal LIGHT -> closing DARK

   Every colour below is measured against #F6F2EA and passes AA; the muted
   greys in the base sheet were built for a charcoal ground and go illegible
   on light, so each one is restated rather than inherited.                   */

.hp-inv{background:#F6F2EA;border-top:1px solid rgba(26,24,21,.12);border-bottom:0}
.hp-inv .eyebrow{color:#755A18}                       /*  5.82:1 */
.hp-inv h2,
.hp-inv .hp-pull{color:#1A1815}                       /* 15.87:1 */
.hp-inv p,
.hp-inv .hp-ds,
.hp-inv .hp-note{color:#3F3A33}                       /* 10.09:1 */
.hp-inv .hp-fig{color:#755A18}                        /*  5.82:1 */
.hp-inv .hp-lab,
.hp-inv .hp-k{color:#5E584E}                          /*  6.31:1 */
.hp-inv .hp-nm,
.hp-inv .hp-t{color:#171512}                          /* 16.32:1 */
.hp-inv a:hover .hp-t,
.hp-inv .hp-sig:hover .hp-nm{color:#755A18}           /*  5.82:1 */

/* structure: rules and plates were drawn in light-on-dark alpha */
.hp-inv .hp-p{border-left-color:rgba(26,24,21,.12)}
.hp-inv .hp-sig{background:#FFFDF9}
.hp-inv .hp-cap{border-top-color:rgba(26,24,21,.10)}
.hp-inv .hp-pull{border-left-color:rgba(117,90,24,.42)}

/* photography: the cinematic grade is built for a dark ground — on the light
   bands it reads as muddy, so the images come up to near-natural */
.hp-inv .hp-ph img{filter:brightness(.98) saturate(1) contrast(1.01)}
.hp-inv .hp-sig:hover .hp-ph img{filter:brightness(1.03) saturate(1.04) contrast(1)}

@media (max-width:1000px){
  .hp-inv .hp-p:nth-child(n+3){border-top-color:rgba(26,24,21,.12)}
}
@media (max-width:640px){
  .hp-inv .hp-p{border-top-color:rgba(26,24,21,.12)}
}


/* ── Story split: image height follows the text (2026-08-27) ─────────────────
   The image carried a fixed 5/6 aspect ratio while the text column was
   whatever the copy came to — 648px against 447px, centred, leaving a 100px
   dead band above and below the text. Stretching both columns and letting the
   image crop to fill means the two sides always end level, whatever the copy
   length becomes when the real words arrive.                                 */
.hp-proper .hp-split > *{min-width:0}
@media (max-width:1000px){
  .hp-proper .hp-split{align-items:start}
  .hp-proper .hp-ph{height:auto}
  .hp-proper .hp-ph img{height:auto;min-height:0;aspect-ratio:16/10}
}


/* ── How to order — redesigned 2026-08-27 ────────────────────────────────────
   Direct gets a panel; the platforms get a quiet row beneath it. Names are
   set in type rather than shown as logos, per the agreed direction.         */

.hp-order{display:grid;grid-template-columns:1.05fr 1.35fr;gap:clamp(24px,3vw,48px);margin-top:52px;align-items:stretch}

/* ---- primary: order direct ---- */
.hp-direct{
  display:flex;flex-direction:column;
  padding:clamp(28px,3vw,42px);
  background:linear-gradient(160deg,rgba(200,167,91,.10),rgba(200,167,91,.03) 62%);
  border:1px solid var(--gold-dim);
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.hp-direct:hover{border-color:var(--gold);transform:translate3d(0,-4px,0);box-shadow:0 28px 60px -34px rgba(0,0,0,.8)}
.hp-d-tag{
  align-self:flex-start;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--charcoal);background:var(--gold);padding:5px 10px;font-weight:600;
}
.hp-d-name{display:block;margin-top:22px;font-family:var(--display);font-size:clamp(26px,3vw,36px);color:var(--warm-white);letter-spacing:.01em}
.hp-d-offer{display:block;margin-top:16px;font-size:clamp(24px,2.6vw,32px);color:var(--gold);font-weight:500;line-height:1.1}
.hp-d-offer span{display:block;font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-top:7px}
.hp-d-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--hair);flex:1}
.hp-d-list li{
  position:relative;padding:13px 0 13px 22px;font-size:15.5px;color:var(--muted);
  border-bottom:1px solid var(--hair-soft);line-height:1.5;
}
.hp-d-list li::before{content:"";position:absolute;left:0;top:20px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.hp-d-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:28px;
  font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;
}
.hp-d-cta em{font-style:normal;transition:transform .45s var(--ease)}
.hp-direct:hover .hp-d-cta em{transform:translateX(7px)}

/* ---- secondary: the platforms ---- */
.hp-apps{display:flex;flex-direction:column}
.hp-apps-h{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);padding-bottom:16px;border-bottom:1px solid var(--hair)}
.hp-apps-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;flex:1}
.hp-app{
  display:flex;flex-direction:column;justify-content:center;gap:9px;
  padding:26px 24px;border-bottom:1px solid var(--hair-soft);
  transition:background-color .45s var(--ease),padding-left .45s var(--ease);
}
.hp-app:nth-child(odd){border-right:1px solid var(--hair-soft)}
.hp-app:hover{background:rgba(242,238,231,.035);padding-left:32px}
.hp-app-n{font-size:clamp(17px,1.9vw,21px);letter-spacing:.05em;text-transform:uppercase;color:var(--warm-white)}
.hp-app:hover .hp-app-n{color:var(--gold)}
.hp-app-r{font-size:13px;color:var(--muted-2);letter-spacing:.04em}
.hp-app-go{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);display:inline-flex;gap:8px;align-items:center}
.hp-app:hover .hp-app-go{color:var(--gold)}
.hp-app-go em{font-style:normal;transition:transform .45s var(--ease)}
.hp-app:hover .hp-app-go em{transform:translateX(6px)}
.hp-apps-note{margin-top:18px;font-size:13px;color:var(--muted-2);line-height:1.6}

@media (max-width:900px){
  .hp-order{grid-template-columns:1fr}
  .hp-apps-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hp-apps-grid{grid-template-columns:1fr}
  .hp-app:nth-child(odd){border-right:0}
}


/* rating star in the familiar review yellow, so it reads as a rating at a
   glance rather than as more brand gold */
.hp-star{font-style:normal;color:#F5C518;font-size:1.05em;line-height:1;margin-left:1px}
.hp-app:hover .hp-star{color:#F5C518}


/* ── Card titles were inheriting the 300 body weight (2026-08-27) ────────────
   .hp-nm and .hp-t never declared a font-weight, so every card title on the
   homepage rendered at the body's 300 — thin and small next to the menu page,
   where names are 21px/700. Brought into line: the dish names lead, the
   journal titles sit a step below them.                                     */

.hp-sig .hp-nm{font-size:24px;font-weight:700;letter-spacing:.004em;line-height:1.24}
.hp-sig .hp-ds{font-size:15.5px;font-weight:400;margin-top:10px;line-height:1.62}
.hp-sig .hp-cap{padding:24px 26px 28px}

.hp-jrnl .hp-t{font-size:19px;font-weight:600;line-height:1.36;margin-top:20px}
.hp-jrnl .hp-k{font-weight:600}

@media (max-width:1000px){ .hp-sig .hp-nm{font-size:22px} }
@media (max-width:640px){ .hp-sig .hp-nm{font-size:21px} .hp-jrnl .hp-t{font-size:18px} }


/* ── Direct panel: app download (2026-08-27) ─────────────────────────────────
   Curry Mile Direct IS the app, so downloading it is the primary action and
   web ordering is the fallback — the same order of priority the current live
   site uses. Solid gold gives it the weight the outlined links do not have. */
.hp-d-actions{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.hp-d-app{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;background:var(--gold);color:var(--charcoal);
  font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--gold);
  transition:background-color .45s var(--ease),color .45s var(--ease),transform .45s var(--ease);
}
.hp-direct:hover .hp-d-app{transform:translate3d(0,-2px,0);background:#D9BC75;border-color:#D9BC75}
.hp-d-cta{margin-top:0;font-size:11.5px;color:var(--muted-2);letter-spacing:.2em;font-weight:500;justify-content:center}
.hp-direct:hover .hp-d-cta{color:var(--gold)}


/* ── App store buttons (2026-08-27) ──────────────────────────────────────────
   ⚠ These are TYPE-SET STAND-INS, not the official badges. Apple and Google
   both supply their own badge artwork with mandatory sizing and clear-space
   rules, and we do not have those files — the same reason the delivery
   platforms are set in type rather than shown as logos. Drop the official
   SVGs in here before this goes anywhere near a customer.                   */
.hp-stores{display:flex;gap:12px;flex-wrap:wrap}
.hp-store{
  flex:1 1 0;min-width:150px;
  display:flex;flex-direction:column;justify-content:center;
  padding:12px 18px;border:1px solid var(--hair);
  background:rgba(242,238,231,.05);
  transition:border-color .45s var(--ease),background-color .45s var(--ease),transform .45s var(--ease);
}
.hp-store i{font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);line-height:1}
.hp-store b{display:block;margin-top:5px;font-size:16px;font-weight:600;letter-spacing:.02em;color:var(--warm-white);line-height:1.15}
.hp-direct:hover .hp-store{border-color:var(--gold-dim);background:rgba(200,167,91,.08)}
.hp-store:hover{transform:translate3d(0,-2px,0);border-color:var(--gold)}

/* ── Reviews ──────────────────────────────────────────────────────────────── */
.hp-revs{padding:clamp(72px,9vw,120px) 0}
.hp-rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:48px}
.hp-rev{
  margin:0;padding:30px 30px 28px;background:#FFFDF9;
  border:1px solid rgba(26,24,21,.10);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.hp-rev:hover{transform:translate3d(0,-4px,0);box-shadow:0 24px 50px -30px rgba(26,24,21,.35)}
.hp-rev-stars{color:#F5C518;font-size:15px;letter-spacing:.12em;line-height:1}
.hp-rev blockquote{margin:16px 0 0;font-size:16px;line-height:1.68;color:#3F3A33;flex:1}
.hp-rev figcaption{
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(26,24,21,.10);
  font-size:14.5px;font-weight:600;color:#171512;
}
.hp-rev figcaption span{display:block;margin-top:5px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#5E584E}
.hp-rev-note{margin-top:26px;font-size:13px;color:#5E584E;line-height:1.6}

@media (max-width:1000px){ .hp-rev-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .hp-rev-grid{grid-template-columns:1fr} .hp-stores{flex-direction:column} }


/* ── .hp-cap was an INLINE span (2026-08-27) ─────────────────────────────────
   Same trap the card components in this codebase already carry: a <span>
   wrapper keeps display:inline, so its 52px of vertical padding and its 1px
   top border painted but contributed nothing to the card's height. The
   caption therefore finished 26px below the card's own bottom edge and was
   clipped by overflow:hidden. Any span used as a container needs this.       */
.hp-sig .hp-cap{display:block}
.hp-d-top{display:block}


/* ── Trust bar with icons (2026-08-27) ───────────────────────────────────────
   Icon left, claim and qualifier stacked right — the pattern from the client's
   current site. The icons are drawn as inline strokes in the brand gold so
   they inherit the palette and stay crisp at any size.

   The reference used a Union Jack for the British Indian item; the agreed
   direction rules those out, so that slot uses the steaming-bowl mark, which
   echoes the logo instead.                                                   */
.hp-proof .container{align-items:stretch}
.hp-proof .hp-p{display:flex;align-items:center;gap:16px;padding:30px 26px}
.hp-ico{flex:0 0 auto;width:34px;height:34px;color:var(--gold);display:block}
.hp-ico svg{width:100%;height:100%;display:block}
.hp-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.hp-txt b{font-size:17px;font-weight:700;letter-spacing:.005em;line-height:1.2;color:var(--warm-white)}
.hp-txt i{font-style:normal;font-size:13.5px;line-height:1.35;color:var(--muted)}

/* on the light band the gold must darken to stay legible, and the text flips */
.hp-inv .hp-ico{color:#7A5F14}
.hp-inv .hp-txt b{color:#171512}
.hp-inv .hp-txt i{color:#4F4A42}

@media (max-width:1000px){ .hp-proof .hp-p{padding:24px 20px} .hp-txt b{font-size:16px} }
@media (max-width:640px){ .hp-ico{width:30px;height:30px} }


/* ── Directional reveals (2026-08-27) ────────────────────────────────────────
   Paired with the DIRS map in motion.js. Transform + opacity only, one easing
   for the whole system so nothing feels out of step, and the distances stay
   short — 44px, not half a screen — so it reads as arrival, not as a slide
   show. Disabled wholesale under reduced motion.                            */
.sl{opacity:0;transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);will-change:transform,opacity}
.sl-l{transform:translate3d(-44px,0,0)}
.sl-r{transform:translate3d(44px,0,0)}
.sl-u{transform:translate3d(0,40px,0)}
.sl-d{transform:translate3d(0,-40px,0)}
.sl-in{opacity:1;transform:translate3d(0,0,0)}

@media (max-width:700px){
  /* sideways travel gets cramped on a phone; everything simply rises */
  .sl-l,.sl-r{transform:translate3d(0,32px,0)}
}
@media (prefers-reduced-motion:reduce){
  .sl,.sl-l,.sl-r,.sl-u,.sl-d{opacity:1 !important;transform:none !important;transition:none !important;transition-delay:0s !important}
}


/* the pull quote was inheriting the 300 body weight like the card titles did */
.hp-pull{font-weight:700;letter-spacing:-.004em;line-height:1.32}


/* ── Official store badges (2026-08-27) ──────────────────────────────────────
   Apple's SVG and Google's PNG, unmodified as their guidelines require. The
   panel is an <a> itself, so these are nested links — the store anchors stop
   the click bubbling up to it in markup order, and sit above it in z-order. */
.hp-stores{align-items:center;gap:6px}
.hp-store{
  flex:0 0 auto;min-width:0;padding:0;border:0;background:transparent;
  display:inline-flex;align-items:center;position:relative;z-index:2;
}
.hp-direct:hover .hp-store{border:0;background:transparent}
.hp-store:hover{transform:translate3d(0,-2px,0);border:0}
.hp-store img{width:auto;display:block}
.hp-store:first-child img{height:44px}
.hp-store-play img{height:58px;margin-left:-9px}   /* absorb Google's padding */


/* ── "How to order" panel: was invalid nesting (2026-08-27) ──────────────────
   .hp-direct used to be an <a> wrapping the two store <a> badges. Nested
   anchors are not parseable — the browser closed the outer link early, which
   split the panel apart and threw the badges across the section. The panel is
   a <div> now and only its own children are links.                          */
.hp-direct{cursor:default}
.hp-direct .hp-d-cta{
  cursor:pointer;align-self:flex-start;
  border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease);
}
.hp-direct .hp-d-cta:hover{color:var(--gold);border-bottom-color:var(--gold-dim)}
.hp-stores{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hp-store{flex:0 0 auto}
.hp-d-actions{display:flex;flex-direction:column;gap:14px;margin-top:26px;align-items:flex-start}


/* ── Hero steam (2026-08-28) ─────────────────────────────────────────────────
   The original build already carries a tuned five-wisp system in style.css
   (.steam span:nth-child(n) + @keyframes steam-rise). Adding the five spans to
   the hero was all that was needed — my own duplicate wisp rules were removed
   so there is one definition, not two competing ones.

   Only the container is repositioned here: the original was placed for the old
   city-gateway hero, and the dish now sits right of centre. */
.hp-hero .steam{
  position:absolute;z-index:1;pointer-events:none;
  left:46%;width:44%;top:4%;height:56%;
}
.hp-hero .grade{z-index:2}
.hp-hero .container{z-index:3}
@media (max-width:860px){
  .hp-hero .steam{left:20%;width:66%;top:8%;height:40%}
}

}


/* the delivery chips sit on the LIGHT band while the page itself is dark, so
   the same token problem runs the other way — warm white on cream */
.hp-inv .hp-area{color:#171512;border-color:rgba(26,24,21,.22)}
.hp-inv .hp-area:hover{color:#7A5F14;border-color:rgba(122,95,20,.45)}
.hp-inv .hp-area .hp-dot{background:#7A5F14}
.hp-inv .hp-area.soon{color:#5E584E}
.hp-inv .hp-area.soon .hp-dot{background:#8A8275}
.hp-inv .hp-area.soon .hp-when{color:#5E584E}

/* the base chip kept losing the cascade while its .soon sibling won, so both
   are pinned at the section's own specificity */
.hp-areas.hp-inv .area-row .hp-area{color:#171512;border-color:rgba(26,24,21,.22)}
.hp-areas.hp-inv .area-row .hp-area .hp-dot{background:#7A5F14}
.hp-areas.hp-inv .area-row .hp-area.soon{color:#5E584E}
.hp-areas.hp-inv .area-row .hp-area.soon .hp-dot{background:#8A8275}


/* ---------- hero: larger type + a masked line rise (2026-08-28) ---------
   Type goes up roughly 25% at the top of the range. The animation is the
   classic editorial one: each headline line sits inside its own overflow
   mask and travels up from behind it, so the words are revealed rather than
   faded in. The eyebrow, the paragraph and the buttons follow on a short
   stagger. Transform and opacity only — nothing here can cause a reflow.
   prefers-reduced-motion leaves every line in its resting position. */
.hp-hero h1{
  font-size:clamp(52px,8.6vw,128px) !important;
  line-height:.98 !important;letter-spacing:-.02em !important;
  max-width:16ch !important;
}
.hp-hero .hp-sub{
  font-size:clamp(18px,2vw,25px) !important;margin-top:30px !important;
  max-width:44ch !important;line-height:1.55 !important;
}
.hp-hero .eyebrow{font-size:13px;letter-spacing:.42em}
.hp-hero .hp-acts{margin-top:46px}

/* the mask */
.hp-h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hp-h1 .ln > span{display:block;transform:translateY(115%);opacity:0;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .9s ease}
.hp-h1.in .ln > span{transform:translateY(0);opacity:1}
.hp-h1.in .ln:nth-child(1) > span{transition-delay:.10s}
.hp-h1.in .ln:nth-child(2) > span{transition-delay:.26s}

/* the gold word settles a beat after the line it sits on */
.hp-h1 .ln em{display:inline-block;transform:translateY(6%);opacity:.001;
  transition:transform 1s cubic-bezier(.16,1,.3,1) .34s,opacity .7s ease .34s}
.hp-h1.in .ln em{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  .hp-h1 .ln > span,.hp-h1 .ln em{transform:none !important;opacity:1 !important;
    transition:none !important}
}