.hero { display: grid; background: var(--tf-bottle-deep); }
.hero-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 50%; }

.hero-board {
    position: relative;
    margin: -3.5rem var(--tf-gutter) 0;
    padding: 1.6rem 1.25rem 1.5rem;
    display: grid;
    gap: 1rem;
    background: var(--tf-paper);
    border: 1.5px solid var(--tf-ink);
    box-shadow: 0 0 0 5px var(--tf-paper), 0 0 0 6.5px var(--tf-ink), 0 18px 40px rgb(0 0 0 / 28%);
}

.hero-board h1 span { display: block; color: var(--tf-brick); }
.hero-note { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--tf-step--1); color: var(--tf-slate); }
.hero-note .tf-icon { color: var(--tf-bottle); }

.address-search { display: grid; gap: 1rem; }
.trade-pick { display: grid; gap: .5rem; }
.trade-pick legend { margin-bottom: .5rem; }
.trade-pick-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .55rem .8rem;
    border: 1.5px solid var(--tf-line-strong);
    border-radius: var(--tf-radius);
    background: var(--tf-card);
    font-weight: 600;
    cursor: pointer;
}
.trade-pick-option input { accent-color: var(--tf-brick); width: 1.1rem; height: 1.1rem; margin: 0; }
.trade-pick-option:has(input:checked) { border-color: var(--tf-ink); background: var(--tf-paper-deep); box-shadow: inset 4px 0 0 var(--tf-brick); }
.trade-pick-option .tf-icon { color: var(--tf-bottle); }

.section-sign { display: grid; gap: .6rem; padding: 3.5rem var(--tf-gutter) 1.5rem; border-bottom: 1.5px solid var(--tf-ink); margin: 0 var(--tf-gutter); padding-inline: 0; }

.bays-row { list-style: none; margin: 0; padding: 1.5rem var(--tf-gutter) 0; display: grid; gap: 1.25rem; }
.bay a { display: grid; text-decoration: none; background: var(--tf-card); border: 1.5px solid var(--tf-ink); }
.bay-photo { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-bottom: 6px double var(--tf-ink); }
.bay-sign { display: flex; gap: .5rem; align-items: center; padding: .9rem 1rem 0; font: 800 var(--tf-step-2)/1 var(--tf-display); text-transform: uppercase; }
.bay-sign .tf-icon { color: var(--tf-brick); }
.bay-pitch { padding: .35rem 1rem 1rem; color: var(--tf-slate); }
.bay a:hover .bay-sign { color: var(--tf-brick); }

.how { display: grid; gap: 1.75rem; padding: 4rem var(--tf-gutter) 0; }
.how-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1.5px solid var(--tf-ink); }
.how-steps { display: grid; gap: 1rem; }
.how-steps ol { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: step; display: grid; }
.how-steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    column-gap: .9rem;
    padding: 1.1rem 0;
    border-top: 1.5px solid var(--tf-line-strong);
}
.how-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 3; font: 800 var(--tf-step-3)/1 var(--tf-display); color: var(--tf-brick); }
.how-steps li .tf-icon { color: var(--tf-bottle); margin-bottom: .3rem; }
.how-steps li p { color: var(--tf-slate); }

.for-business {
    display: grid;
    gap: 1.5rem;
    margin: 4rem var(--tf-gutter) 0;
    padding: 2rem 1.25rem;
    background: var(--tf-brick);
    color: var(--tf-paper);
    border: 6px double var(--tf-gilt);
}
.for-business .eyebrow { color: var(--tf-gilt); }
.for-business-terms { margin: 0; display: grid; gap: 1rem; }
.for-business-terms div { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: .8rem; border-top: 1.5px solid rgb(243 237 226 / 36%); padding-top: .8rem; }
.for-business-terms dt { font: 800 var(--tf-step-3)/1 var(--tf-display); color: var(--tf-gilt); }
.for-business-terms dd { margin: 0; }
.for-business-note { max-width: var(--tf-measure); color: rgb(243 237 226 / 88%); }

@media (min-width: 40rem) {
    .trade-pick { grid-template-columns: repeat(3, 1fr); }
    .bays-row { grid-template-columns: repeat(2, 1fr); }
    .bays-row .bay:first-child { grid-column: span 2; }
}

@media (min-width: 60rem) {
    .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(52rem, calc(100dvh - 4rem)); background: var(--tf-paper); }
    .hero-photo { grid-column: 2; grid-row: 1; height: 100%; aspect-ratio: auto; }
    .hero-board { grid-column: 1 / span 1; grid-row: 1; align-self: center; margin: 3rem -6rem 3rem var(--tf-gutter); padding: 2.5rem 2.25rem; z-index: 1; }
    .bays-row { grid-template-columns: 1.35fr 1fr 1fr; align-items: end; }
    .bays-row .bay:first-child { grid-column: auto; }
    .bays-row .bay:nth-child(2) { margin-bottom: 3rem; }
    .how { grid-template-columns: 4fr 6fr; align-items: center; gap: 4rem; padding-top: 6rem; }
    .for-business { grid-template-columns: 1fr 1.2fr; padding: 3rem; }
    .for-business-note { grid-column: 1 / -1; }
}