/* =========================================================================
   Homepage (2026-09-25) - Joel's approved combined comp
   Linked from app/templates/public/index.html (head_extra). Page-local: every
   rule is scoped under .hw (V2 parts), .hs (V1 parts) or .hc (the layer that
   joins them), plus the homepage-only header rules at the end (the Build My
   Order chip is white over the ink banner and swaps to ink on scroll).
   Pruned from the comp's page.css to the rules this page can use; verified
   pixel-identical against the comp at 1440, 1024, 768 and 390 wide.
   No Tailwind utilities, so no css:build is needed for this file.
   ========================================================================= */
/* =========================================================================
   Homepage Version 2 - "The Workshop Edition" (comp, 2026-09-25)
   Brand-led and editorial: an ink poster hero with the white dragon, real
   work pinned across the fold, chapters with slab numerals, a live price
   ladder, a spec sheet, and the brand line to close. Polish borrowed from
   the studio: rounded tiles, ink ring + corner check, black and white
   buttons, money in Oswald, light tan blocks, no gold, no hairline clutter.
   Everything is scoped under .hw.
   ========================================================================= */
.hw { --hw-ink: #181510;
    --hw-ink-2: #2c271f;
    --hw-cream: #FAF6EE;
    --hw-panel: #FDFCF7;
    --hw-hair: #E6E1D8;
    --hw-hair-strong: #CFCAC0;
    --hw-quiet: #6B675F;
    --hw-muted: #59554E;
    --hw-hover: #F1EDE4;
    --hw-tan: #F4EEE2;
    --hw-on-ink: #FDFCF7;
    --hw-on-ink-2: rgba(239, 238, 233, .72);
    --hw-on-ink-3: rgba(239, 238, 233, .5);
    --hw-r-lg: 14px;
    --hw-r-card: 10px;
    --hw-r-ctl: 8px;
    --hw-r-sm: 6px;
    --hw-display: var(--vh-display, "Oswald", sans-serif);
    --hw-slab: var(--vh-slab, "Oswald", sans-serif);
    --hw-body: var(--vh-body, "Cooper Hewitt", "DM Sans", sans-serif);
    --hw-lift: 0 10px 24px -18px rgba(24, 21, 16, .45);
    --hw-float: 0 28px 56px -34px rgba(24, 21, 16, .42), 0 2px 6px -3px rgba(24, 21, 16, .08);
    --hw-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23FDFCF7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --hw-gutter: 3.2rem;
    --hw-pin-overlap: 17.6rem;
    display: flex;
    flex-direction: column;
    color: var(--hw-ink);
    font-family: var(--hw-body); }
.hw *, .hw *::before, .hw *::after { box-sizing: border-box; }
.hw img { display: block; max-width: 100%; }
:where(.hw) button { font: inherit; color: inherit; }
.hw :is(a, button):focus-visible { outline: 2px solid var(--hw-ink); outline-offset: 3px; }
.hw :is(.hw-hero, .hw-reviews) :is(a, button):focus-visible { outline-color: var(--hw-on-ink); }
.hw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hw-wrap { width: 100%; max-width: 128rem; margin: 0 auto; padding: 0 var(--hw-gutter); }
/* -- type --------------------------------------------------------------- */
.hw-kicker { display: block;
    font-family: var(--hw-display);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.25;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hw-quiet); }
.hw-money { font-family: var(--hw-display); font-weight: 500; font-style: normal; font-variant-numeric: tabular-nums; color: var(--hw-ink); }
/* -- buttons (the studio's pair) --------------------------------------- */
.hw-btn { display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 5.2rem;
    padding: 0 2.6rem;
    border: 1px solid transparent;
    border-radius: var(--hw-r-ctl);
    font-family: var(--hw-body);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.hw-btn svg { width: 1.6rem; height: 1.6rem; flex: none; transition: transform .2s ease; }
.hw-btn:hover svg { transform: translateX(3px); }
.hw-btn:active { transform: translateY(1px); }
.hw-btn--ink { background: var(--hw-ink); border-color: var(--hw-ink); color: #FFFFFF; }
.hw-btn--ink:hover { background: var(--hw-ink-2); border-color: var(--hw-ink-2); color: #FFFFFF; }
.hw-btn--paper { background: var(--hw-on-ink); border-color: var(--hw-on-ink); color: var(--hw-ink); }
.hw-btn--paper:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--hw-ink); }
.hw-btn--ghost { background: transparent; border-color: rgba(253, 252, 247, .38); color: var(--hw-on-ink); }
.hw-btn--ghost:hover { border-color: var(--hw-on-ink); background: rgba(253, 252, 247, .08); color: var(--hw-on-ink); }
.hw-stars { display: inline-flex; gap: .2rem; }
.hw-stars svg { width: 1.4rem; height: 1.4rem; }
/* =========================================================================
   1 . POSTER HERO (ink) + the work pinned across the fold
   ========================================================================= */
/* The header rides transparent over the ink (nav_mode "over-hero"), so the
   first screen is one poster: nav, dragon, line, buttons, facts, and the
   tops of the work photos. The dragon is sized from the viewport height so
   those photos peek above the fold on ordinary laptop screens. */
.hw-hero { position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--nav-height, 8rem) + 4rem) 0 calc(var(--hw-pin-overlap) + 4.4rem);
    background: var(--hw-ink);
    color: var(--hw-on-ink);
    text-align: center; }
.hw-hero::before { /* a faint warm pool of light behind the dragon, nothing more */
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 2rem;
    width: 120rem;
    height: 70rem;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(253, 252, 247, .08), transparent);
    pointer-events: none; }
.hw-hero__dragon { width: min(84vw, clamp(30rem, calc((100vh - 63rem) * 1.818), 60rem));
    width: min(84vw, clamp(30rem, calc((100svh - 63rem) * 1.818), 60rem));
    height: auto;
    margin: 0 auto; }
.hw-hero__title { margin: 3.6rem auto 0;
    max-width: 22ch;
    font-family: var(--hw-display);
    font-weight: 600;
    font-size: clamp(4rem, 4.6vw, 6.6rem);
    line-height: .98;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: var(--hw-on-ink);
    text-wrap: balance; }
.hw-hero__lede { margin: 2.2rem auto 0; max-width: 54ch; font-size: 1.8rem; line-height: 1.62; color: var(--hw-on-ink-2); text-wrap: balance; }
.hw-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 3.2rem; }
.hw-hero__facts { display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .8rem 0;
    margin: 3.2rem auto 0;
    padding: 0;
    list-style: none;
    font-family: var(--hw-display);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.4;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--hw-on-ink-3); }
.hw-hero__facts li { display: inline-flex; align-items: center; }
.hw-hero__facts li + li::before { content: ""; flex: none; width: .4rem; height: .4rem; margin: 0 1.8rem; border-radius: 50%; background: currentColor; }
.hw-hero__facts b { color: var(--hw-on-ink); font-weight: 600; }
/* pinned work: cards straddle the ink edge */
.hw-pins { position: relative; z-index: 2; margin-top: calc(var(--hw-pin-overlap) * -1); padding-bottom: 7.2rem; background: linear-gradient(180deg, transparent 0 var(--hw-pin-overlap), var(--hw-cream) var(--hw-pin-overlap)); }
.hw-pins__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; }
.hw-pin { margin: 0; min-width: 0; }
.hw-pin__open { position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--hw-r-card);
    background: #2a251d;
    box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .7);
    cursor: zoom-in; }
.hw-pin__open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) {
    .hw-pin__open:hover img { transform: scale(1.03); }
}
/* the cards straddle ink and cream, so the focus ring carries both */
.hw .hw-pin__open:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hw-cream), 0 0 0 5px var(--hw-ink); }
.hw-pin figcaption { padding: 1.4rem .2rem 0; }
.hw-pin__name { display: block; margin-top: .4rem; font-weight: 600; font-size: 1.5rem; line-height: 1.3; color: var(--hw-ink); }
.hw-pin__meta { display: block; margin-top: .2rem; font-size: 1.3rem; line-height: 1.4; color: var(--hw-muted); }
.hw-pins__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem 3.2rem; margin-top: 3.2rem; padding-top: 2.4rem; border-top: 1px solid var(--hw-hair); }
.hw-pins__foot p { margin: 0; max-width: 72ch; font-size: 1.5rem; line-height: 1.6; color: var(--hw-muted); text-wrap: pretty; }
.hw-textlink { display: inline-flex; align-items: center; gap: .8rem; flex: none; font-weight: 600; font-size: 1.5rem; color: var(--hw-ink); text-decoration: none; white-space: nowrap; }
.hw-textlink svg { width: 1.6rem; height: 1.6rem; transition: transform .2s ease; }
.hw-textlink:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.hw-textlink:hover svg { transform: translateX(3px); }
.hw-pins__foot p a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--hw-hair-strong); }
.hw-pins__foot p a:hover { text-decoration-color: currentColor; }
/* =========================================================================
   3 . CHAPTER 02 - what it costs (live ladder)
   ========================================================================= */
.hw-cost { padding: 10rem 0; background: var(--hw-cream); }
.hw-cost__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6.4rem; align-items: center; }
.hw-cost__notes { display: grid; gap: 1rem; margin: 3.2rem 0 0; padding: 0; list-style: none; }
.hw-cost__notes li { display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
    font-size: 1.5rem;
    line-height: 1.55;
    color: var(--hw-muted); }
.hw-cost__notes li b { color: var(--hw-ink); font-weight: 600; }
.hw-cost__notes li span { text-wrap: pretty; }
.hw-cost__notes svg { width: 2.2rem; height: 2.2rem; margin-top: .1rem; color: var(--hw-ink); }
.hw-calc { padding: 2.8rem;
    border-radius: var(--hw-r-lg);
    background: #FFFFFF;
    border: 1px solid var(--hw-hair);
    box-shadow: var(--hw-float); }
.hw-calc__label { margin: 0 0 1.2rem; }
.hw-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.hw-chip { position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-width: 0;
    padding: .8rem .3rem .9rem;
    overflow: hidden;
    border: 1px solid var(--hw-hair);
    border-radius: var(--hw-r-card);
    background: #FFFFFF;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--hw-ink);
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease; }
.hw-chip img { width: 4.6rem; height: 4.6rem; object-fit: contain; }
.hw-chip:hover:not([aria-checked="true"]) { border-color: var(--hw-hair-strong); box-shadow: var(--hw-lift); }
.hw-chip[aria-checked="true"] { border-color: var(--hw-ink); box-shadow: 0 0 0 1px var(--hw-ink); }
.hw-chip[aria-checked="true"]::after { content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: var(--hw-ink) var(--hw-check) center / 11px 11px no-repeat;
    border-bottom-left-radius: var(--hw-r-sm); }
.hw-calc__price { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin: 2.8rem 0 2rem; }
.hw-calc__big { font-family: var(--hw-display); font-weight: 600; font-size: 6.4rem; line-height: .9; letter-spacing: -.005em; color: var(--hw-ink); font-variant-numeric: tabular-nums; }
.hw-calc__big small { font-family: var(--hw-body); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; color: var(--hw-muted); margin-left: .6rem; }
.hw-calc__what { margin: .8rem 0 0; font-size: 1.35rem; color: var(--hw-muted); }
.hw-calc__save { flex: none;
    display: inline-flex;
    align-items: center;
    height: 3rem;
    padding: 0 1.1rem;
    border-radius: var(--hw-r-sm);
    background: var(--hw-tan);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--hw-ink);
    white-space: nowrap; }
.hw-calc__save[hidden] { display: none; }
.hw-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.hw-tier { position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1.3rem 1.4rem 1.4rem;
    border: 1px solid var(--hw-hair);
    border-radius: var(--hw-r-card);
    background: #FFFFFF;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; }
.hw-tier:hover:not([aria-checked="true"]) { border-color: var(--hw-hair-strong); background: var(--hw-hover); }
.hw-tier span { font-family: var(--hw-display); font-weight: 500; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hw-quiet); }
.hw-tier b { font-family: var(--hw-display); font-weight: 500; font-size: 2.2rem; line-height: 1; color: var(--hw-ink); font-variant-numeric: tabular-nums; }
.hw-tier[aria-checked="true"] { background: var(--hw-ink); border-color: var(--hw-ink); }
.hw-tier[aria-checked="true"] span { color: rgba(253, 252, 247, .66); }
.hw-tier[aria-checked="true"] b { color: #FFFFFF; }
.hw-ledger { margin-top: 2rem; padding: 1.6rem 1.8rem; border-radius: var(--hw-r-card); background: var(--hw-cream); }
.hw-ledger__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; font-size: 1.4rem; line-height: 1.5; color: var(--hw-muted); }
.hw-ledger__row + .hw-ledger__row { margin-top: .6rem; }
.hw-ledger__row .hw-money { font-size: 1.6rem; }
.hw-ledger__row--total { margin-top: 1.2rem !important; padding-top: 1.2rem; border-top: 1px solid var(--hw-hair-strong); color: var(--hw-ink); font-weight: 600; }
.hw-ledger__row--total .hw-money { font-size: 2rem; font-weight: 600; }
.hw-calc__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem 2rem; margin-top: 2rem; }
.hw-calc__foot p { margin: 0; max-width: 34ch; font-size: 1.25rem; line-height: 1.5; color: var(--hw-quiet); }
/* =========================================================================
   5 . CHAPTER 04 - reviews
   ========================================================================= */
/* the second ink moment: the page breathes ink, light, ink, light, ink */
.hw-reviews { padding: 11.2rem 0; background: var(--hw-ink); color: var(--hw-on-ink); }
.hw-reviews .hw-kicker { color: var(--hw-on-ink-3); }
.hw-reviews__head { justify-content: center; margin: 0 0 3.6rem; }
.hw-reviews__head .hw-kicker { color: var(--hw-on-ink); }
.hw-pull { margin: 0 auto; max-width: 96rem; text-align: center; }
.hw-pull__stars { display: inline-flex; gap: .4rem; color: var(--hw-on-ink); }
.hw-pull__stars svg { width: 2.2rem; height: 2.2rem; }
.hw-pull blockquote { margin: 2.8rem 0 0; }
.hw-pull blockquote p { margin: 0;
    font-family: var(--hw-body);
    font-size: clamp(2.6rem, 3.1vw, 4rem);
    line-height: 1.28;
    letter-spacing: -.012em;
    color: var(--hw-on-ink);
    text-wrap: balance; }
.hw-pull figcaption { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; margin-top: 2.8rem; }
.hw-score { display: inline-flex; align-items: center; gap: 1.2rem; padding: .9rem 1.6rem .9rem 1.2rem; border: 1px solid rgba(253, 252, 247, .16); border-radius: 999px; font-size: 1.4rem; color: var(--hw-on-ink-2); }
.hw-score b { font-family: var(--hw-display); font-weight: 600; font-size: 2.2rem; line-height: 1; color: var(--hw-on-ink); }
.hw-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; max-width: 104rem; margin: 6.4rem auto 0; }
.hw-quote { margin: 0; padding: 2.8rem; border-radius: var(--hw-r-card); background: rgba(253, 252, 247, .045); border: 1px solid rgba(253, 252, 247, .12); }
.hw-quote .hw-stars { color: var(--hw-on-ink); }
.hw-quote blockquote { margin: 1.6rem 0 2rem; }
.hw-quote blockquote p { margin: 0; font-size: 1.75rem; line-height: 1.5; color: rgba(253, 252, 247, .9); text-wrap: pretty; }
.hw-quote figcaption { display: flex; justify-content: space-between; gap: 1rem; }
/* gallery viewer (unchanged behaviour, restyled) */
body.home-gallery-lock { overflow: hidden; }
.home-gallery-modal { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.8rem; padding: 2rem 2.4rem 2.4rem; background: rgba(24, 21, 16, .975); color: #FDFCF7; }
.home-gallery-modal__top, .home-gallery-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: min(118rem, 100%); margin: 0 auto; }
.home-gallery-modal__counter { font-family: var(--vh-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .2em; }
.home-gallery-modal__close, .home-gallery-modal__nav { display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; padding: 0; border: 1px solid rgba(253, 252, 247, .3); border-radius: 8px; background: transparent; color: #FDFCF7; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.home-gallery-modal__close:hover, .home-gallery-modal__nav:hover { border-color: #FDFCF7; background: #FDFCF7; color: #181510; }
.home-gallery-modal :is(button, a):focus-visible { outline: 2px solid #FDFCF7; outline-offset: 3px; }
.home-gallery-modal__close svg, .home-gallery-modal__nav svg { width: 1.8rem; height: 1.8rem; }
.home-gallery-modal__stage { position: relative; display: grid; place-items: center; min-height: 0; width: min(118rem, 100%); margin: 0 auto; }
.home-gallery-modal__image { display: block; width: auto; max-width: min(92rem, calc(100vw - 15rem)); height: auto; max-height: calc(100vh - 17rem); object-fit: contain; border-radius: 10px; }
.home-gallery-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.home-gallery-modal__nav--prev { left: 0; }
.home-gallery-modal__nav--next { right: 0; }
.home-gallery-modal__title { margin: 0; font-family: var(--vh-display); font-size: 2rem; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }
.home-gallery-modal__kind { margin: .4rem 0 0; color: rgba(253, 252, 247, .62); font-size: 1.35rem; }
.home-gallery-modal__shop { display: inline-flex; align-items: center; height: 4.2rem; padding: 0 1.8rem; border-radius: 8px; background: #FDFCF7; color: #181510; font-weight: 600; font-size: 1.35rem; text-decoration: none; white-space: nowrap; }
/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
    .hw-pins__row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; }
    .hw-pin__meta { display: none; }
    .hw-cost__grid { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
    .hw-cost__intro { max-width: 64rem; }
}
@media (max-width: 1000px) {
    /* four facts would wrap with a stray dot; set them two by two instead */
    .hw-hero__facts { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 1rem 4rem; }
    .hw-hero__facts li { justify-content: center; }
    .hw-hero__facts li + li::before { display: none; }
}
@media (max-width: 900px) {
    .hw { --hw-pin-overlap: 15.2rem; }
    .hw-pins__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 22rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--hw-gutter) 1rem; margin: 0 calc(var(--hw-gutter) * -1); scrollbar-width: none; }
    .hw-pins__row::-webkit-scrollbar { display: none; }
    .hw-pin { scroll-snap-align: start; scroll-margin-left: var(--hw-gutter); }
    .hw-pin__meta { display: block; }
    .hw-pins__foot { flex-direction: column; align-items: flex-start; }
    .hw-quotes { grid-template-columns: minmax(0, 1fr); max-width: 64rem; }
}
@media (max-width: 640px) {
    .hw { --hw-gutter: 2rem; --hw-pin-overlap: 13.6rem; }
    .hw-hero { padding-top: calc(var(--nav-height, 6.4rem) + 3.2rem); }
    .hw-hero__dragon { width: min(100%, 32rem); }
    .hw-hero__title { max-width: none; font-size: clamp(3rem, 9.2vw, 4.4rem); margin-top: 2.8rem; }
    .hw-hero__lede { font-size: 1.6rem; }
    .hw-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 .4rem; }
    .hw-hero__actions .hw-btn { width: 100%; }
    .hw-hero__facts { grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-top: 2.8rem; font-size: 1.05rem; letter-spacing: .14em; }
    .hw-pins { padding-bottom: 6.4rem; }
    .hw-pins__row { grid-auto-columns: 19.2rem; }
    .hw-cost, .hw-reviews { padding: 6.4rem 0; }
    .hw-calc { padding: 2rem 1.6rem; }
    .hw-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hw-calc__price { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
    .hw-calc__big { font-size: 5.2rem; }
    .hw-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hw-calc__foot { flex-direction: column; align-items: stretch; }
    .hw-calc__foot .hw-btn { width: 100%; }
    .hw-pull blockquote p { font-size: 2.4rem; }
    .hw-quote { padding: 2.2rem; }
    .hw-quote blockquote p { font-size: 1.6rem; }
    .home-gallery-modal { gap: 1.2rem; padding: 1.4rem 1.4rem 1.8rem; }
    .home-gallery-modal__image { max-width: 100%; max-height: calc(100vh - 20rem); }
    .home-gallery-modal__stage { padding: 0 4.8rem; }
    .home-gallery-modal__nav { width: 4rem; height: 4rem; }
    .home-gallery-modal__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .hw *, .hw *::before, .hw *::after { transition: none !important; }
}
/* =========================================================================
   Homepage Version 1 - "Studio" (comp, 2026-09-25)
   Everything is scoped under .hs so nothing leaks into the global frame.
   Language borrowed from the Build My Order studio (studio_visual.css):
   white tiles on warm paper, one soft border, 10/8/6 radii, ink ring +
   corner check for selection, Oswald 600 sentence-case titles, money in
   Oswald, light tan info blocks, dotted canvas, black and white buttons.
   ========================================================================= */
.hs { --hs-ink: #181510;
    --hs-ink-2: #2c271f;
    --hs-paper: #FAF6EE;
    --hs-panel: #FDFCF7;
    --hs-white: #FFFFFF;
    --hs-hair: #E6E1D8;
    --hs-hair-strong: #CFCAC0;
    --hs-quiet: #6B675F;
    --hs-muted: #59554E;
    --hs-hover: #F1EDE4;
    --hs-r-lg: 14px;
    --hs-r-card: 10px;
    --hs-r-ctl: 8px;
    --hs-r-sm: 6px;
    --hs-display: var(--vh-display, "Oswald", sans-serif);
    --hs-body: var(--vh-body, "Cooper Hewitt", "DM Sans", sans-serif);
    --hs-lift: 0 10px 24px -18px rgba(24, 21, 16, .45);
    --hs-float: 0 28px 56px -34px rgba(24, 21, 16, .42), 0 2px 6px -3px rgba(24, 21, 16, .08);
    --hs-dots: radial-gradient(circle, rgba(24, 21, 16, .12) 1px, transparent 1.5px);
    --hs-dots-size: 22px 22px;
    --hs-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23FDFCF7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --hs-gutter: 3.2rem;
    display: flex;
    flex-direction: column;
    color: var(--hs-ink);
    font-family: var(--hs-body); }
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }
.hs img { display: block; max-width: 100%; }
:where(.hs) button { font: inherit; color: inherit; }
/* -- shared type --------------------------------------------------------- */
.hs-wrap { width: 100%; max-width: 128rem; margin: 0 auto; padding: 0 var(--hs-gutter); }
.hs-money { font-family: var(--hs-display);
    font-weight: 500;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    color: var(--hs-ink); }
.hs-kicker { display: block;
    font-family: var(--hs-display);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hs-quiet); }
/* -- buttons: the studio's black and white pair -------------------------- */
.hs-btn { display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 5.2rem;
    padding: 0 2.6rem;
    border: 1px solid transparent;
    border-radius: var(--hs-r-ctl);
    font-family: var(--hs-body);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.hs-btn svg { width: 1.6rem; height: 1.6rem; flex: none; transition: transform .2s ease; }
.hs-btn:hover svg { transform: translateX(3px); }
.hs-btn:active { transform: translateY(1px); }
.hs-btn--ink { background: var(--hs-ink); border-color: var(--hs-ink); color: #FFFFFF; }
.hs-btn--ink:hover { background: var(--hs-ink-2); border-color: var(--hs-ink-2); color: #FFFFFF; }
.hs-btn--line { background: #FFFFFF; border-color: var(--hs-hair-strong); color: var(--hs-ink); }
.hs-btn--line:hover { background: var(--hs-hover); border-color: var(--hs-ink); color: var(--hs-ink); }
.hs-btn--block { width: 100%; }
.hs :is(a, button):focus-visible { outline: 2px solid var(--hs-ink); outline-offset: 3px; }
.hs-stage__frame { position: relative; height: 100%; aspect-ratio: 4 / 5; }
.hs-stage__img { position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .2s ease; }
.hs-stage__zone { position: absolute;
    left: var(--zx, 56.8%);
    top: var(--zy, 23%);
    width: var(--zw, 16.9%);
    height: var(--zh, 13.5%);
    border: 1.5px dashed rgba(24, 21, 16, .55);
    border-radius: 3px;
    transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease, border-color .2s ease; }
.hs-type:hover:not([aria-checked="true"]) { border-color: var(--hs-hair-strong); box-shadow: var(--hs-lift); }
.hs-check::after { content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: var(--hs-ink) var(--hs-check) center / 12px 12px no-repeat;
    border-bottom-left-radius: var(--hs-r-sm); }
/* =========================================================================
   3 . PATHS - three ways in, studio option tiles
   ========================================================================= */
.hs-paths { padding: 9.6rem 0; background: var(--hs-panel); }
.hs-paths__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.hs-path { position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.6rem 2.6rem 2.6rem;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--hs-hair);
    border-radius: var(--hs-r-card);
    transition: border-color .15s ease, box-shadow .15s ease; }
.hs-path:hover { border-color: var(--hs-hair-strong); box-shadow: var(--hs-lift); }
.hs-path__top { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: 2.6rem; }
.hs-path__ico { display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    flex: none;
    border-radius: var(--hs-r-card);
    background: var(--hs-paper);
    border: 1px solid var(--hs-hair); }
.hs-path__ico img, .hs-path__ico svg { width: 2.6rem; height: 2.6rem; }
.hs-pill { display: inline-flex;
    align-items: center;
    height: 2.6rem;
    padding: 0 1rem;
    border-radius: var(--hs-r-sm);
    background: var(--hs-ink);
    font-weight: 600;
    font-size: 1.2rem;
    color: #FFFFFF;
    white-space: nowrap; }
.hs-path__title { margin: .7rem 0 1rem;
    font-family: var(--hs-display);
    font-weight: 600;
    font-size: 2.8rem;
    line-height: 1.08;
    color: var(--hs-ink); }
.hs-path__text { margin: 0; font-size: 1.5rem; line-height: 1.6; color: var(--hs-muted); }
.hs-path__fit { margin: 2.2rem 0 2.4rem;
    padding: 1.2rem 1.4rem;
    border-radius: var(--hs-r-ctl);
    background: var(--hs-paper);
    font-size: 1.35rem;
    line-height: 1.45;
    color: var(--hs-muted); }
.hs-path__fit b { display: block; margin-bottom: .2rem; font-weight: 600; color: var(--hs-ink); }
.hs-path .hs-btn { margin-top: auto; }
/* =========================================================================
   4 . HOW IT WORKS - the studio itself, in miniature
   ========================================================================= */
.hs-how { padding: 9.6rem 0; background: var(--hs-paper); }
.hs-app { display: grid;
    grid-template-columns: 11.6rem minmax(0, 40rem) minmax(0, 1fr);
    height: 54rem;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--hs-hair);
    border-radius: var(--hs-r-lg);
    box-shadow: var(--hs-float); }
.hs-app__rail { display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.2rem 0 1.2rem .9rem;
    background: var(--hs-ink); }
.hs-rail-step { position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    padding: 1.6rem .4rem 1.4rem;
    border: 0;
    border-radius: var(--hs-r-card) 0 0 var(--hs-r-card);
    background: transparent;
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.15;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease; }
.hs-app__rail .hs-rail-step:last-child { margin-top: auto; }
.hs-rail-step img { width: 2.9rem; height: 2.9rem; filter: invert(1); transition: filter .15s ease; }
.hs-rail-step:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, .08); }
.hs-rail-step[aria-selected="true"] { background: var(--hs-panel); color: var(--hs-ink); }
.hs-rail-step[aria-selected="true"] img { filter: none; }
.hs-rail-step:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }
.hs-rail-step[aria-selected="true"]:focus-visible { outline-color: var(--hs-ink); }
.hs-app__panel { position: relative; padding: 3rem 3rem 2.8rem; background: var(--hs-panel); border-right: 1px solid var(--hs-hair); overflow: hidden; }
.hs-app__pane { display: flex; flex-direction: column; height: 100%; }
.hs-app__pane[hidden] { display: none; }
.hs-app__pane-title { margin: 0;
    font-family: var(--hs-display);
    font-weight: 600;
    font-size: 2.6rem;
    line-height: 1.12;
    color: var(--hs-ink); }
.hs-app__pane-text { margin: .9rem 0 2.2rem; font-size: 1.4rem; line-height: 1.55; color: var(--hs-muted); }
/* step 1 . garment wall */
.hs-mini-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.hs-mini-card { position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--hs-hair);
    border-radius: var(--hs-r-card); }
.hs-mini-card img { width: 100%; height: 8.4rem; padding: .8rem .8rem 0; object-fit: contain; }
.hs-mini-card > span { min-height: 3.4rem; hyphens: none; padding: .5rem .9rem 0; font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: var(--hs-ink); }
.hs-mini-card > small { margin-top: auto; padding: .3rem .9rem .9rem; font-size: 1.1rem; color: var(--hs-muted); }
.hs-mini-card small .hs-money { font-size: 1.4rem; }
.hs-mini-card.is-on { border-color: var(--hs-ink); box-shadow: 0 0 0 1px var(--hs-ink); }
/* step 2 . drop zone + text row */
.hs-drop { display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.6rem 2rem 2.4rem;
    border: 1.5px dashed var(--hs-hair-strong);
    border-radius: var(--hs-r-card);
    background: var(--hs-paper); }
.hs-drop svg { width: 3rem; height: 3rem; color: var(--hs-ink); margin-bottom: 1.2rem; }
.hs-drop b { font-family: var(--hs-display);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hs-ink); }
.hs-drop small { display: block; margin-top: .8rem; max-width: 30ch; font-size: 1.25rem; line-height: 1.5; color: var(--hs-muted); }
.hs-row-card { display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1rem;
    padding: 1.4rem 1.6rem;
    background: #FFFFFF;
    border: 1px solid var(--hs-hair);
    border-radius: var(--hs-r-card); }
.hs-row-card img { width: 2.4rem; height: 2.4rem; }
.hs-row-card b { display: block; font-weight: 600; font-size: 1.45rem; color: var(--hs-ink); }
.hs-row-card small { display: block; font-size: 1.25rem; color: var(--hs-muted); }
/* step 3 . placement spots */
.hs-spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.hs-spot { padding: 1.4rem 1.4rem 1.5rem;
    background: #FFFFFF;
    border: 1px solid var(--hs-hair);
    border-radius: var(--hs-r-ctl); }
.hs-spot b { display: block;
    font-family: var(--hs-display);
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hs-ink); }
.hs-spot small { display: block; margin-top: .4rem; font-size: 1.25rem; color: var(--hs-muted); }
.hs-spot.is-on { background: var(--hs-ink); border-color: var(--hs-ink); }
.hs-spot.is-on b, .hs-spot.is-on small { color: #FFFFFF; }
.hs-spot.is-on small { opacity: .75; }
/* step 4 . ledger + continue */
.hs-ledger { padding: 1.8rem 1.8rem 1.6rem; border-radius: var(--hs-r-card); background: var(--hs-paper); border: 1px solid var(--hs-hair); }
.hs-ledger__big { font-family: var(--hs-display); font-weight: 600; font-size: 2.2rem; line-height: 1.1; color: var(--hs-ink); }
.hs-ledger__meta { margin: .6rem 0 0; font-size: 1.3rem; line-height: 1.5; color: var(--hs-muted); }
.hs-ledger__row { display: flex; justify-content: space-between; gap: 1.2rem; margin-top: 1.2rem; font-size: 1.35rem; color: var(--hs-ink); }
.hs-ledger__row .hs-money { font-size: 1.5rem; }
.hs-app__pane .hs-btn { margin-top: 1.2rem; }
.hs-app__pane-foot { margin-top: auto; padding-top: 1.6rem; font-size: 1.25rem; line-height: 1.5; color: var(--hs-quiet); }
/* canvas: the stage card with the Front / Back cards under it, like the studio */
.hs-app__canvas { position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: 2.8rem 3.2rem;
    background-color: var(--hs-paper);
    background-image: var(--hs-dots);
    background-size: var(--hs-dots-size); }
.hs-canvas-card { position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 36rem);
    aspect-ratio: 1;
    background: #FFFFFF;
    border: 1px solid var(--hs-hair);
    border-radius: var(--hs-r-card); }
.hs-canvas-card .hs-stage__frame { height: 90%; }
.hs-canvas-card .hs-stage__zone { border-color: rgba(255, 255, 255, .85); }
.hs-canvas-tag { position: absolute;
    z-index: 2;
    top: 1.2rem;
    right: 1.2rem;
    display: inline-flex;
    align-items: center;
    height: 2.4rem;
    padding: 0 .9rem;
    border-radius: var(--hs-r-sm);
    background: var(--hs-paper);
    border: 1px solid var(--hs-hair);
    font-family: var(--hs-display);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hs-quiet); }
.hs-canvas-logo { position: absolute;
    left: var(--zx);
    top: var(--zy);
    width: var(--zw);
    height: var(--zh);
    display: block;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .3s ease, transform .3s ease; }
.hs-canvas-logo img { position: absolute; inset: 4%; width: 92%; height: 92%; max-width: none; object-fit: contain; }
.hs-app:not([data-step="1"]) .hs-canvas-logo { opacity: 1; transform: none; }
.hs-app:not([data-step="1"]) .hs-canvas-card .hs-stage__zone { border-color: transparent; }
.hs-app[data-step="3"] .hs-canvas-card .hs-stage__zone { border-color: rgba(255, 255, 255, .85); }
.hs-canvas-label { position: absolute;
    left: var(--zx);
    top: calc(var(--zy) - 2.2rem);
    font-family: var(--hs-display);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .25s ease; }
.hs-app[data-step="3"] .hs-canvas-label { opacity: 1; }
.hs-canvas-sides { display: flex; gap: .8rem; }
.hs-side { position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 8.8rem;
    padding: .6rem .6rem .7rem;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--hs-hair);
    border-radius: var(--hs-r-card);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--hs-ink);
    transition: border-color .2s ease, box-shadow .2s ease; }
.hs-side img { width: 5rem; height: 5rem; object-fit: contain; }
.hs-side small { font-weight: 400; font-size: 1.05rem; color: var(--hs-muted); }
.hs-side .hs-side__on { display: none; }
.hs-app:not([data-step="1"]) .hs-side .hs-side__on { display: inline; }
.hs-app:not([data-step="1"]) .hs-side .hs-side__off { display: none; }
.hs-side.is-on { border-color: var(--hs-ink); box-shadow: 0 0 0 1px var(--hs-ink); }
/* gallery viewer (behaviour unchanged from the live page, restyled) */
body.home-gallery-lock { overflow: hidden; }
.home-gallery-modal { position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1.8rem;
    padding: 2rem 2.4rem 2.4rem;
    background: rgba(24, 21, 16, .975);
    color: #FDFCF7; }
.home-gallery-modal__top, .home-gallery-modal__foot { display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: min(118rem, 100%);
    margin: 0 auto; }
.home-gallery-modal__counter { font-family: var(--vh-display);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: .2em; }
.home-gallery-modal__close, .home-gallery-modal__nav { display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    border: 1px solid rgba(253, 252, 247, .3);
    border-radius: 8px;
    background: transparent;
    color: #FDFCF7;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease; }
.home-gallery-modal__close:hover, .home-gallery-modal__nav:hover { border-color: #FDFCF7; background: #FDFCF7; color: #181510; }
.home-gallery-modal :is(button, a):focus-visible { outline: 2px solid #FDFCF7; outline-offset: 3px; }
.home-gallery-modal__close svg, .home-gallery-modal__nav svg { width: 1.8rem; height: 1.8rem; }
.home-gallery-modal__stage { position: relative; display: grid; place-items: center; min-height: 0; width: min(118rem, 100%); margin: 0 auto; }
.home-gallery-modal__image { display: block;
    width: auto;
    max-width: min(92rem, calc(100vw - 15rem));
    height: auto;
    max-height: calc(100vh - 17rem);
    object-fit: contain;
    border-radius: 10px; }
.home-gallery-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.home-gallery-modal__nav--prev { left: 0; }
.home-gallery-modal__nav--next { right: 0; }
.home-gallery-modal__title { margin: 0; font-family: var(--vh-display); font-size: 2rem; font-weight: 600; line-height: 1.2; }
.home-gallery-modal__kind { margin: .4rem 0 0; color: rgba(253, 252, 247, .62); font-size: 1.35rem; }
.home-gallery-modal__shop { display: inline-flex;
    align-items: center;
    height: 4.2rem;
    padding: 0 1.8rem;
    border-radius: 8px;
    background: #FDFCF7;
    color: #181510;
    font-weight: 600;
    font-size: 1.35rem;
    text-decoration: none;
    white-space: nowrap; }
/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1240px) {
    .hs-app { grid-template-columns: 11rem minmax(0, 36rem) minmax(0, 1fr); }
}
@media (max-width: 1060px) {
    .hs-path { padding: 2.2rem; }
    .hs-path__title { font-size: 2.5rem; }
    .hs-app { grid-template-columns: 10.4rem minmax(0, 34rem) minmax(0, 1fr); }
    .hs-app__panel { padding: 2.6rem 2.4rem; }
    .hs-app__canvas { padding: 2.4rem; }
}
@media (max-width: 900px) {
    .hs-paths__grid { grid-template-columns: minmax(0, 1fr); max-width: 64rem; }
    .hs-app { grid-template-columns: 10.4rem minmax(0, 1fr); height: auto; }
    .hs-app__canvas { display: none; }
    .hs-app__panel { border-right: 0; min-height: 50rem; }
}
@media (max-width: 640px) {
    .hs { --hs-gutter: 2rem; }
    .hs-stage__frame { height: 29rem; }
    .hs-paths, .hs-how { padding: 6.4rem 0; }
    .hs-path { padding: 2.2rem; }
    .hs-app { grid-template-columns: minmax(0, 1fr); }
    .hs-app__rail { flex-direction: row; gap: .2rem; padding: .8rem .8rem 0; overflow-x: auto; scrollbar-width: none; }
    .hs-app__rail .hs-rail-step:last-child { margin-top: 0; }
    .hs-app__rail::-webkit-scrollbar { display: none; }
    .hs-rail-step { flex: 1 0 7.6rem; padding: 1.1rem .4rem 1rem; gap: .5rem; font-size: 1.2rem; border-radius: var(--hs-r-card) var(--hs-r-card) 0 0; }
    .hs-rail-step img { width: 2.3rem; height: 2.3rem; }
    .hs-app__panel { min-height: 0; padding: 2.4rem 2rem 2.4rem; }
    .hs-mini-card img { height: 6.4rem; }
    .hs-shot:not(.hs-shot--feature) .hs-shot__zoom { display: none; }
    .hs-shot:not(.hs-shot--feature) .hs-shot__meta { font-size: 1.2rem; }
    .home-gallery-modal { gap: 1.2rem; padding: 1.4rem 1.4rem 1.8rem; }
    .home-gallery-modal__image { max-width: 100%; max-height: calc(100vh - 20rem); }
    .home-gallery-modal__stage { padding: 0 4.8rem; }
    .home-gallery-modal__nav { width: 4rem; height: 4rem; }
    .home-gallery-modal__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .hs *, .hs *::before, .hs *::after { transition: none !important; }
}
/* =========================================================================
   COMBINED PAGE (2026-09-25, final): Joel's picks laid out as one page.
   Order: V2 ink banner with four shop photos pinned across its bottom edge,
   V1 three ways in, V1 how it works, V2 reviews (ink), V2 price ladder, and
   today's homepage FAQ. Section CSS stays in its V1 (.hs) and V2 (.hw)
   scope; everything below makes them read as one page: one section head,
   one column grid, one vertical rhythm, one card language.
   ========================================================================= */
.hc { --hc-ink: #181510;
    --hc-quiet: #6B675F;
    --hc-muted: #59554E;
    --hc-hair: #E6E1D8;
    --hc-hair-strong: #CFCAC0;
    --hc-panel: #FDFCF7;      /* light sections */
    --hc-tone: #F4EEE2;       /* the alternate light sections, clearly warmer */
    --hc-display: var(--vh-display, "Oswald", sans-serif);
    --hc-gap: 1.6rem;         /* gap of every card grid, so columns line up down the page */
    --hc-sect: 11.2rem;       /* top and bottom padding of every section */
    --hc-head-gap: 5.6rem;    /* section head to its content */
    --hc-float: 0 28px 56px -34px rgba(24, 21, 16, .42), 0 2px 6px -3px rgba(24, 21, 16, .08);
    display: flex;
    flex-direction: column; }
/* hyphenated words stay whole without swapping in a hyphen glyph the body font lacks */
.hc-nowrap { white-space: nowrap; }
/* -- one section head: kicker, title, optional lede ------------------- */
.hc-head { margin: 0 0 var(--hc-head-gap); }
.hc-kicker { display: block;
    margin: 0 0 1.8rem;
    font-family: var(--hc-display);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hc-quiet); }
.hc-title { margin: 0;
    font-family: var(--hc-display);
    font-weight: 600;
    font-size: clamp(3.2rem, 3.8vw, 5.2rem);
    line-height: .98;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: var(--hc-ink);
    text-wrap: balance; }
.hc-lede { margin: 2rem 0 0; max-width: 52ch; font-size: 1.7rem; line-height: 1.65; color: var(--hc-muted); text-wrap: pretty; }
.hc-lede a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: var(--hc-hair-strong); }
.hc-lede a:hover { color: var(--hc-ink); text-decoration-color: currentColor; }
/* wide screens: the lede sits in the third column of the page's card grid
   and shares the title's last baseline */
@media (min-width: 1101px) {
    .hc-head--split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--hc-gap); align-items: last baseline; }
    .hc-head--split > div { grid-column: 1 / span 2; }
    .hc-head--split .hc-lede { grid-column: 3; margin: 0; }
}
/* small labels inside cards share one size and spacing; body copy never
   leaves one word alone on its last line */
.hc :is(.hs-kicker, .hw-kicker) { font-size: 1.1rem; letter-spacing: .16em; }
.hc :is(.hw-hero__lede, .hs-path__text, .hs-path__fit, .hs-app__pane-text, .hw-cost__notes span, .hw-qa__a p, .hw-quote blockquote p, .hw-faq__closing p) { text-wrap: pretty; }
/* -- one rhythm and alternating grounds: ink, warm, white, ink, warm, white - */
.hc :is(.hs-paths, .hs-how, .hw-reviews, .hw-cost, .hc-faq) { padding: var(--hc-sect) 0; }
.hc .hs-paths { background: var(--hc-tone); }
.hc .hs-how { background: var(--hc-panel); }
.hc .hw-cost { background: var(--hc-tone); }
.hc .hc-faq { background: var(--hc-panel); }
/* -- 1 . 2 . banner with four shop photos pinned across its bottom edge
   (V2's own overlap and banner padding); the warm ground below the edge
   carries on into the three ways in */
.hc .hw-pins { padding-bottom: 0; background: linear-gradient(180deg, transparent 0 var(--hw-pin-overlap), var(--hc-tone) var(--hw-pin-overlap)); }
.hc .hw-pin__open { box-shadow: 0 24px 40px -30px rgba(24, 21, 16, .6); }
.hc .hw-pin__name { font-family: var(--hc-display); font-weight: 600; font-size: 1.8rem; line-height: 1.15; text-wrap: balance; }
@media (min-width: 901px) {
    .hc .hw-pins__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hc-gap); }
    .hc .hw-pin__meta { display: block; }
}
/* the row's foot carries the two SEO links and the way into the shop */
.hc .hw-pins__foot { margin-top: 4rem; }
.hc .hw-pins__foot p { font-size: 1.55rem; }
@media (min-width: 901px) {
    .hc .hw-pins__foot { align-items: center; }
}
/* -- 3 . three ways in ------------------------------------------------- */
.hc-doors .hs-paths__grid { gap: var(--hc-gap); }
.hc-doors .hs-path { padding: 2.8rem; border-color: var(--hc-hair); box-shadow: var(--hc-float); }
.hc-doors .hs-path:hover { border-color: var(--hc-hair-strong); box-shadow: var(--hc-float); }
.hc-doors .hs-path__ico { color: var(--hc-ink); }
.hc-doors .hs-path__title { font-size: 3rem; }
/* side by side, the three cards share rows so their "Best for" boxes and
   buttons line up whatever the length of the text above them */
@media (min-width: 901px) {
    .hc-doors .hs-paths__grid { grid-template-rows: repeat(6, auto); row-gap: 0; }
    .hc-doors .hs-path { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; }
    .hc-doors .hs-path__fit { margin: 2.2rem 0 2.4rem; }
}
/* -- 6 . reviews: kicker as the head, three cards on the page grid ------ */
.hc .hw-reviews__head { margin: 0 0 2.8rem; text-align: center; color: rgba(239, 238, 233, .62); }
.hc .hw-score { border-radius: 8px; }
.hc .hw-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hc-gap); max-width: none; }
.hc .hw-quote { display: flex; flex-direction: column; }
.hc .hw-quote blockquote { flex: 1 1 auto; }
/* -- 7 . 8 . split sections share one grid: head left, content right ---- */
.hc .hw-cost__notes { margin-top: 3.6rem; }
.hc .hw-cost__intro { max-width: none; }
.hc .hw-calc__save { border-radius: 6px; }
@media (min-width: 1101px) {
    .hc :is(.hw-cost__grid, .hw-faq__grid) { grid-template-columns: minmax(0, 48rem) minmax(0, 1fr); column-gap: 8rem; }
    .hc .hw-cost__grid { align-items: start; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .hc :is(.hw-cost__grid, .hw-faq__grid) { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); column-gap: 4.8rem; }
    .hc .hw-cost__grid { align-items: start; }
}
/* -- 7 . FAQ: today's homepage FAQ (Joel's pick) in the page's rhythm, with the
   page's section head. Rules, uppercase questions and the Bevan plus come from
   vintage.css (.vh-faq-*), unchanged. */
.hc-faq__wrap { max-width: 74rem; }
/* the title at today's size, so it stays on one line in the reading column */
.hc-faq .hc-title { font-size: clamp(2.6rem, 3.4vw, 4.4rem); }
.hc-faq__lede { margin-top: 2.4rem; }
.hc-faq__lede a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: var(--hc-hair-strong); }
.hc-faq__lede a:hover { color: var(--hc-ink); text-decoration-color: currentColor; }
.hc-faq .vh-faq-q span { text-wrap: balance; }
.hc-faq .vh-faq-a p { text-wrap: pretty; }
.home-faq__closing { display: flex; align-items: center; justify-content: space-between; gap: 3rem; margin-top: 4rem; padding-top: 2.8rem; }
.home-faq__closing p { flex: 1 1 auto; max-width: 52rem; margin: 0; color: var(--vh-muted, #59554E); font-size: 1.55rem; line-height: 1.65; text-wrap: pretty; }
.home-faq__closing strong { color: var(--vh-ink, #181510); font-weight: 600; }
@media (max-width: 640px) {
    .home-faq__closing { align-items: flex-start; flex-direction: column; gap: 2rem; }
    .hc-faq .vh-faq-q { font-size: 1.6rem; }
}
@media (max-width: 1100px) {
    .hc { --hc-sect: 9.6rem; }
    .hc-head { max-width: 72rem; }
}
@media (max-width: 1000px) {
    /* the four facts stack in one centred column rather than a lopsided 2 by 2 */
    .hc .hw-hero__facts { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
}
@media (max-width: 900px) {
    .hc { --hc-sect: 8.8rem; --hc-head-gap: 4.8rem; }
    .hc-doors .hs-paths__grid { grid-template-columns: minmax(0, 1fr); max-width: none; gap: 2rem; }
    .hc-doors .hs-path { box-shadow: 0 16px 32px -24px rgba(24, 21, 16, .38), 0 1px 4px -2px rgba(24, 21, 16, .1); }
    .hc-doors .hs-path:hover { box-shadow: 0 16px 32px -24px rgba(24, 21, 16, .38), 0 1px 4px -2px rgba(24, 21, 16, .1); }
    .hc .hw-quotes { grid-template-columns: minmax(0, 1fr); max-width: none; }
}
/* tablets: each card turns sideways so buttons don't stretch across the page */
@media (min-width: 641px) and (max-width: 900px) {
    .hc-doors .hs-path { display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
        grid-template-areas: "top fit" "kicker fit" "title fit" "text btn";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 3.2rem;
        padding: 2.6rem; }
    .hc-doors .hs-path__top { grid-area: top; justify-content: flex-start; gap: 1.6rem; margin-bottom: 2rem; }
    .hc-doors .hs-path .hs-kicker { grid-area: kicker; }
    .hc-doors .hs-path__title { grid-area: title; }
    .hc-doors .hs-path__text { grid-area: text; }
    .hc-doors .hs-path__fit { grid-area: fit; align-self: start; margin: 0 0 1.6rem; }
    .hc-doors .hs-path .hs-btn { grid-area: btn; align-self: end; }
}
@media (max-width: 640px) {
    .hc { --hc-sect: 6.4rem; --hc-head-gap: 3.6rem; --hc-gap: 1rem; }
    .hc .hw-pin__name { font-size: 1.6rem; }
    .hc-kicker { margin-bottom: 1.4rem; }
    .hc-lede { font-size: 1.6rem; }
    .hc-doors .hs-paths__grid { gap: 1.6rem; }
    .hc-doors .hs-path { padding: 2.2rem; }
    .hc-doors .hs-path__title { font-size: 2.6rem; }
}
/* =========================================================================
   HEADER over the ink hero (homepage only: nav_mode "over-hero").
   Joel's call: over the ink, "Build My Order" is a white button with black
   text; it switches to the usual black button with white text as the bar
   fills on scroll. The base template fades the bar over the first 20vh;
   the button flips halfway through that, so it never sits mid-grey.
   Text colour goes through -webkit-text-fill-color because the base sets
   the chip's colour with !important (see BUILD_NOTES for the base edit).
   ========================================================================= */
.site-header.site-header--over-hero .nav-link.nav-link--primary { background-color: #FDFCF7;
    border-color: #FDFCF7;
    -webkit-text-fill-color: #181510; }
/* browsers without scroll-driven animations: page.js adds .hc-chip-ink at
   the same point (half of the bar's fade) */
.site-header.site-header--over-hero.hc-chip-ink .nav-link.nav-link--primary { background-color: #181510;
    border-color: #181510;
    -webkit-text-fill-color: #FFFFFF; }
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .site-header.site-header--over-hero .nav-link.nav-link--primary { animation: hc-chip-switch linear both;
            animation-timeline: scroll(root);
            animation-range: 0 20vh; }
        /* the base divider reads --nav-fg, which the scroll animation never
           changes, so it would stay white on the cream bar */
        .site-header.site-header--over-hero .nav-action-start::before { animation: hc-nav-divider linear both;
            animation-timeline: scroll(root);
            animation-range: 0 20vh; }
    }
}
/* a clean swap at 50%, no grey in-between */
@keyframes hc-chip-switch {
    0% { background-color: #FDFCF7; border-color: #FDFCF7; -webkit-text-fill-color: #181510; animation-timing-function: step-end; }
    50%, 100% { background-color: #181510; border-color: #181510; -webkit-text-fill-color: #FFFFFF; }
}
@keyframes hc-nav-divider {
    0% { background-color: #FFFFFF; }
    100% { background-color: #181510; }
}

/* Build My Order switched off (build_my_order_public_enabled false): the
   Build door and How it works are not rendered, so the three ways in become
   two doors (quote + shop). Not part of the approved comp's pixel check. */
.hc-doors .hs-paths__grid.hs-paths__grid--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .hc-doors .hs-paths__grid.hs-paths__grid--duo { grid-template-columns: minmax(0, 1fr); }
}

/* -- v4b (2026-09-25): text-only line under the price box ------------------ */
.hc .hc-cost__side { min-width: 0; }
.hc .hc-cost__text { margin: 2rem 0 0; font-size: 1.5rem; line-height: 1.55; color: var(--hw-muted); text-wrap: balance; }
.hc .hc-cost__text b { color: var(--hw-ink); font-weight: 600; }