/* Promo Tech site layer: the CI (Brand/Promo-Tech-CI.md) on top of the Taste system.
   Fonts are self-hosted (Poppins for everything, Lora italic for the one editorial accent). */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/lora-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/lora-latin-500-italic.woff2") format("woff2"); }

:root {
  /* CI: Warm White ground, Midnight ink, Electric teal action with a Midnight label, Slate for body text */
  --p-bg: #f8f6f0; --p-surface: #efece3; --p-ink: #0a0f23; --p-muted: #4a5266;
  --p-accent: #00b4a0; --p-accent-ink: #0a0f23; --p-action: #00b4a0; --p-action-ink: #0a0f23;
  --p-inv-bg: #0a0f23; --p-inv-surface: #171c30; --p-inv-ink: #f8f6f0; --p-inv-muted: #c0c8d7;
  --p-inv-accent: #00b4a0; --p-inv-accent-ink: #0a0f23; --p-inv-action: #00b4a0; --p-inv-action-ink: #0a0f23;
  --font-display: "Poppins", system-ui, sans-serif;
  --font-text: "Poppins", system-ui, sans-serif;
  --font-accent: "Lora", Georgia, serif;
  --display-weight: 600;
  --display-tracking: -0.028em;
  --display-tracking-xl: -0.036em;
  --pt-amber: #ffa52d; --pt-slate: #2a3448; --pt-chrome: #c0c8d7; --pt-teal-deep: #0f757c;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* the editorial accent of the CI: Lora italic, one phrase a section at most */
.serif { font-family: var(--font-accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }

/* ---------- logo ---------- */
.nav__logo.pt-logo, .pt-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--p-ink); }
.pt-logo svg.pt-mark { width: 34px; height: 28px; flex: none; }
.pt-logo .pt-word { font: 700 19px/1 var(--font-display); letter-spacing: 0.01em; white-space: nowrap; }
.pt-logo .pt-word b { font-weight: 700; color: var(--pt-teal-deep); }
.ground-inverse .pt-logo, .footer--dark .pt-logo { color: #fff; }
.ground-inverse .pt-logo .pt-word b, .footer--dark .pt-logo .pt-word b { color: var(--p-accent); }

/* ---------- headings: the CI sets display in Poppins at 600 ---------- */
h1, h2 { font-weight: 600; }
h3 { font-weight: 500; }

/* ---------- product tiles: Amrod shoots on white, so the frame is white ---------- */
.tile--product .tile__media { background: #fff; aspect-ratio: 1 / 1; }
.tile--product .tile__media > img { object-fit: contain; padding: 6%; }
.tile--product .tile__code { font: 500 13px/1.2 var(--font-text); color: var(--muted); letter-spacing: 0.02em; }
.tile--product .tile__price { font-weight: 500; }
.tile--product .tile__price small { font-weight: 400; color: var(--muted); font-size: 13px; }
.tile--cat .tile__media { background: #fff; }
.tile--cat .tile__media > img { object-fit: contain; padding: 4%; }
.tile--cat .tile__head h3 { font-size: 18px; }
.tile__sub { color: var(--muted); font-size: 15px; margin-top: calc(-1 * var(--s-3)); }

/* ---------- inner pages: content sets the height (catalogue lists run long) ---------- */
main > section.section--auto { height: auto !important; min-height: 0 !important; }
.page-head { padding-top: calc(var(--nav) + var(--s-8)); padding-bottom: var(--s-8); }
.page-head h1 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04; letter-spacing: var(--display-tracking-xl); max-width: 18ch; }
.page-head .t-lead { margin-top: var(--s-5); max-width: 56ch; color: var(--ink); }
.page-head--dark { background: var(--p-inv-bg); color: var(--p-inv-ink); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --line: rgb(255 255 255 / .16); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: var(--s-5); }
.crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .6; }
.block { padding: var(--s-9) 0; }
.block--tight { padding: var(--s-7) 0 var(--s-9); }
.block--surface { background: var(--p-surface); }
.block--dark { background: var(--p-inv-bg); color: var(--p-inv-ink); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --line: rgb(255 255 255 / .16); }
.block h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: var(--display-tracking); }
.prose { max-width: 62ch; display: grid; gap: var(--s-4); }
.prose p, .prose li { font-size: 17px; line-height: 1.7; }
.prose h2 { margin-top: var(--s-6); font-size: 28px; }
.prose ul { padding-left: 1.2em; display: grid; gap: var(--s-2); }

/* ---------- catalogue toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: end; justify-content: space-between; margin-bottom: var(--s-7); }
.toolbar .field { margin: 0; min-width: 240px; flex: 1 1 280px; max-width: 420px; }
.toolbar select { height: 48px; padding: 0 40px 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%230a0f23' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; font: 400 16px var(--font-text); color: var(--ink); }
.toolbar__count { color: var(--muted); font-size: 15px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--ink); font-size: 15px; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out); }
.chip:hover { border-color: var(--ink); }
.chip:active { transform: scale(0.97); }
.chip[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--gutter); }
@media (max-width: 1023px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) 12px; } }
.product-grid [hidden] { display: none !important; }
.empty-note { padding: var(--s-8) 0; color: var(--muted); }

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8) var(--gutter); align-items: start; }
@media (max-width: 899px) { .pdp { grid-template-columns: 1fr; } }
.pdp__media { background: #fff; border-radius: var(--r-lg); aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; }
.pdp__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.pdp__info { display: grid; gap: var(--s-5); position: sticky; top: calc(var(--nav) + var(--s-6)); }
@media (max-width: 899px) { .pdp__info { position: static; } }
.pdp__info h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: var(--display-tracking); }
.pdp__code { font-size: 14px; color: var(--muted); letter-spacing: .02em; }
.pdp__price { font: 600 34px/1 var(--font-display); letter-spacing: -0.02em; }
.pdp__price small { display: block; margin-top: var(--s-2); font: 400 14px/1.4 var(--font-text); color: var(--muted); letter-spacing: 0; }
.pdp__facts { border-top: 1px solid var(--line); }
.pdp__facts > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.pdp__facts dt { color: var(--muted); }
.pdp__facts dd { margin: 0; text-align: right; }
.qty-row { display: flex; gap: var(--s-3); align-items: end; flex-wrap: wrap; }
.qty-row .field { margin: 0; width: 140px; }
.btn--wa { background: #1fa855; color: #fff; }

/* ---------- the quote stepper: one question at a time (Emil: ease-out, under 300ms, direction-aware) ---------- */
.qform { position: relative; background: var(--p-inv-bg); color: var(--p-inv-ink); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 48px);
  --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --line: rgb(255 255 255 / .16); --line-strong: rgb(255 255 255 / .34); --bg: var(--p-inv-bg); --action: var(--p-action); --action-ink: var(--p-action-ink); }
.qform__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); min-height: 44px; }
.qform__count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qform__bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgb(255 255 255 / .08); border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
.qform__bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--p-accent), var(--pt-amber)); transform-origin: 0 50%; transform: scaleX(var(--q, .14)); transition: transform 320ms var(--ease-out); }
.qform__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 4px; margin-left: -4px; border: 0; background: none; color: var(--muted); font: 500 15px var(--font-text); cursor: pointer; border-radius: var(--r-sm); transition: color 160ms ease, transform 160ms var(--ease-out); }
.qform__back:hover { color: #fff; }
.qform__back:active { transform: scale(0.97); }
.qform__back[hidden] { display: inline-flex; visibility: hidden; }
.qstep { border: 0; margin: 0; padding: 0; min-width: 0; }
.qstep + .qstep { margin-top: var(--s-8); }
.qstep legend, .qstep > .qstep__q { display: block; padding: 0; font: 600 clamp(22px, 2vw, 28px)/1.2 var(--font-display); letter-spacing: -0.02em; color: #fff; margin-bottom: var(--s-2); }
.qstep__hint { color: var(--muted); font-size: 15px; margin-bottom: var(--s-5); }
.qopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qopts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .qopts, .qopts--3 { grid-template-columns: 1fr; } }
.qopt { position: relative; display: block; }
.qopt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qopt span { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--line-strong); font-size: 16px; color: #fff; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out); }
.qopt span::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.qopt input[type="radio"] + span::before { border-radius: 50%; }
.qopt input:checked + span { border-color: var(--p-accent); background: rgb(0 180 160 / .12); }
.qopt input:checked + span::before { background: var(--p-accent); border-color: var(--p-accent); box-shadow: inset 0 0 0 3px var(--p-inv-bg); }
.qopt input:focus-visible + span { outline: 2px solid var(--p-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .qopt:hover span { border-color: rgb(255 255 255 / .6); } }
.qopt:active span { transform: scale(0.98); }
.qform .field label { color: var(--muted); }
.qform .field input, .qform .field textarea { background: rgb(255 255 255 / .04); color: #fff; border-color: var(--line-strong); }
.qform .field textarea { min-height: 120px; padding-top: 12px; resize: vertical; width: 100%; font: 400 16px/1.5 var(--font-text); border-radius: var(--r-sm); border: 1px solid var(--line-strong); padding: 12px 14px; }
.qform .field input:focus, .qform .field textarea:focus { border-color: var(--p-accent); outline: none; box-shadow: 0 0 0 3px rgb(0 180 160 / .25); }
.qrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 520px) { .qrow { grid-template-columns: 1fr; } }
.qform__nav { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-7); flex-wrap: wrap; }
.qform__kbd { font-size: 13px; color: var(--muted); }
.qform__kbd kbd { font: 500 12px var(--font-text); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-strong); }
.qform .field__error { color: #ffb3a7; }
.qform .form__status { color: var(--muted); }
.qform__summary { display: grid; gap: 8px; margin: var(--s-5) 0 0; padding: var(--s-5); border-radius: var(--r-md); background: rgb(255 255 255 / .05); font-size: 15px; }
.qform__summary div { display: flex; justify-content: space-between; gap: var(--s-4); }
.qform__summary dt { color: var(--muted); } .qform__summary dd { margin: 0; text-align: right; }
/* stepping: only the current step shows once the script runs; without it the whole form shows */
.qform.is-step .qstep { display: none; }
.qform.is-step .qstep.is-current { display: block; }
.qform.is-step .qstep + .qstep { margin-top: 0; }
.qform.is-step .qstep.is-current { animation: q-in-next 260ms var(--ease-out) both; }
.qform.is-step[data-dir="back"] .qstep.is-current { animation-name: q-in-back; }
@keyframes q-in-next { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes q-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.qform__done { display: none; }
.qform.is-done .qform__done { display: block; animation: q-in-next 260ms var(--ease-out) both; }
.qform.is-done .qstep, .qform.is-done .qform__nav, .qform.is-done .qform__top { display: none !important; }
@media (prefers-reduced-motion: reduce) { .qform.is-step .qstep.is-current, .qform.is-done .qform__done { animation: q-fade 160ms ease both; } .qform__bar > i { transition: none; } }
@keyframes q-fade { from { opacity: 0; } to { opacity: 1; } }

/* the quote section: the words left, the form right */
.quote-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8) var(--gutter); align-items: start; }
@media (max-width: 1023px) { .quote-split { grid-template-columns: 1fr; } }
.quote-split__aside { display: grid; gap: var(--s-5); align-content: start; }
.contact-lines { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.contact-lines a { color: var(--ink); text-decoration: none; font-size: 17px; }
.contact-lines a:hover { text-decoration: underline; }
.contact-lines span { display: block; font-size: 13px; color: var(--muted); }

/* the CI's colour bars on the closing ground (business card: Electric left bar, Amber base) */
footer.closing { position: relative; }
footer.closing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--pt-amber); }

/* homepage tiles: Amrod frames on white */
#range .tile__media { aspect-ratio: 1 / 1; }
#range .tile__more { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-5); margin-top: var(--s-7); }

/* branding cards: the photo panel (one card recipe) */
.ph-card { display: grid; gap: var(--s-4); text-decoration: none; color: inherit; }
.ph-card__media { border-radius: var(--r-lg); overflow: clip; aspect-ratio: var(--ratio-c, 4 / 3); background: var(--surface); }
.ph-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
@media (hover: hover) and (pointer: fine) { a.ph-card:hover .ph-card__media > img { transform: scale(1.03); } }
.ph-card h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.ph-card p { color: var(--ink); max-width: 46ch; }

/* the trio composition (gifting): span-5 4:5, span-4 1:1, span-3 4:3, tops level */
.trio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.trio > :nth-child(1) { grid-column: span 5; --ratio-c: 1 / 1; }
.trio > :nth-child(2) { grid-column: span 4; --ratio-c: 4 / 5; }
.trio > :nth-child(3) { grid-column: span 3; --ratio-c: 3 / 4; }
@media (max-width: 1023px) { .trio > :nth-child(1) { grid-column: span 12; --ratio-c: 16 / 9; } .trio > :nth-child(2), .trio > :nth-child(3) { grid-column: span 6; --ratio-c: 4 / 3; } }
@media (max-width: 639px) { .trio > * { grid-column: 1 / -1 !important; } }

/* split: words left, the photograph right */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7) var(--gutter); align-items: start; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } }
.split__photo { border-radius: var(--r-lg); overflow: clip; aspect-ratio: 4 / 3; }
.split__photo > img { width: 100%; height: 100%; object-fit: cover; }
.ticks { display: grid; gap: 0; margin-top: var(--s-6); border-top: 1px solid var(--line); }
.ticks li { list-style: none; display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.ticks li b { font: 600 15px/1.6 var(--font-display); color: var(--pt-teal-deep); font-variant-numeric: tabular-nums; }
.block--dark .ticks li b, .ground-inverse .ticks li b { color: var(--pt-amber); }
.ticks li strong { display: block; font-weight: 500; }
.ticks li span { color: var(--muted); font-size: 15px; }

/* methods table on the branding page */
.methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--gutter); }
@media (max-width: 899px) { .methods { grid-template-columns: 1fr; } }
.methods dl { margin: var(--s-3) 0 0; font-size: 15px; display: grid; gap: 4px; }
.methods dt { color: var(--muted); display: inline; } .methods dd { display: inline; margin: 0; }

/* ---------- fixes from the gate ---------- */
/* the focus ring: Midnight on the light ground (teal on warm white is under 3:1), teal on the dark grounds */
:focus-visible { outline-color: var(--p-ink); }
.qform :focus-visible, .page-head--dark :focus-visible, .block--dark :focus-visible, .hero--photo[data-tone="dark"] :focus-visible { outline-color: var(--p-accent); }
/* a phone stacks the photo hero: the words sit on the page ground, so they take the ink again */
@media (max-width: 1023px) {
  .hero--photo[data-box="none"][data-tone="dark"] { --ink: var(--p-ink); --muted: var(--p-muted); color: var(--p-ink);
    --line: color-mix(in oklab, var(--p-ink) 11%, transparent); --line-strong: color-mix(in oklab, var(--p-ink) 20%, transparent); }
  .hero--photo[data-tone="dark"] :focus-visible { outline-color: var(--p-ink); }
}
@media (max-width: 639px) { .hero--photo { --photo: 34svh; } }
/* the trio's three frames share one height so the row ends on one line */
.trio .ph-card__media { aspect-ratio: auto; height: clamp(300px, 34vw, 470px); }
@media (max-width: 1023px) { .trio .ph-card__media { height: auto; aspect-ratio: var(--ratio-c); } }
/* small phones: the logo and the bar fit at 320 */
@media (max-width: 400px) { .pt-logo .pt-word { font-size: 16px; } .pt-logo svg.pt-mark { width: 28px; height: 23px; } .nav__bar { gap: 8px; } }
.footer__col a { overflow-wrap: anywhere; }
/* pinned chapters at rest on a phone: shorter pictures so four steps fit two screens */
@media (max-width: 639px) { [data-moment="pinned-chapters"]:not(.is-live) .mo-pc__visual > img { max-height: 18svh; } }
#range .tile__more { border-top: 0; padding-top: 0; }
/* the range: one photograph tile per row beside the white product tiles, all one height */
.range-row { align-items: start; }
.tile--feature .tile__media { aspect-ratio: auto; height: calc((min(100vw - 2 * var(--gut), 1280px) - 3 * var(--gutter)) / 4); }
.tile--feature .tile__media > img { object-fit: cover; }
.tile--feature .tile__head { align-items: baseline; }
.tile--feature .tile__price { color: var(--muted); font-size: 15px; }
@media (max-width: 1023px) { .tile--feature .tile__media { height: auto; aspect-ratio: 16 / 9; } }
.aside-photo { aspect-ratio: 16 / 10; margin-top: var(--s-4); }
.stack-6 > .aside-photo { margin-top: 0; }
@media (max-width: 639px) { [data-moment="pinned-chapters"]:not(.is-live) .mo-pc__visual > img { max-height: 15svh; } }
@media (max-width: 359px) { .nav .pt-word { display: none; } }
#range .tile--feature .tile__media { aspect-ratio: auto; width: 100%; }
@media (max-width: 1023px) { #range .tile--feature .tile__media { aspect-ratio: 16 / 9; height: auto; } }
#quote .aside-photo { aspect-ratio: 21 / 9; }
@media (max-width: 639px) {
  .range-row > .tile--feature { grid-column: 1 / -1; }
  .range-row > .tile--cat { grid-column: span 6; }
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) 12px; }
  .trio > :nth-child(1) { grid-column: 1 / -1 !important; --ratio-c: 16 / 9; }
  .trio > :nth-child(2), .trio > :nth-child(3) { grid-column: auto !important; --ratio-c: 4 / 3; }
  .trio .ph-card h3 { font-size: 16px; }
  #china .ticks li span { display: none; }
  #china .ticks li { padding: var(--s-3) 0; }
  [data-moment="pinned-chapters"]:not(.is-live) .mo-pc__visual > img { max-height: 11svh; }
}
/* tablet and phone: the range keeps its photograph tile across the row and the product tiles two-up */
@media (max-width: 1023px) {
  #range .range-row > .tile--feature { grid-column: 1 / -1; }
  #range .range-row > .tile--cat { grid-column: auto / span 6; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #range .tile--feature .tile__media { aspect-ratio: 21 / 9; }
  #branding .grid > .ph-card { grid-column: auto / span 4; }
  #branding .ph-card p { font-size: 15px; }
}
.ph-card { min-width: 0; }
.ph-card__media > img { max-width: 100%; display: block; }
@media (max-width: 639px) {
  main > #how[data-moment]:not(.is-live) { min-height: 200svh; }
  main > #faq { min-height: 200svh; }
}
.ph-card { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) and (max-width: 1023px) {
  #branding .ph-card__media { aspect-ratio: 2 / 3; }
  #range .tile--cat .tile__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 640px) and (max-width: 1023px) { #range .tile--feature .tile__media { aspect-ratio: 8 / 3; } }