.pasta-hero { min-height: 660px; height: min(780px, 85vh); position: relative; display: grid; place-items: center; isolation: isolate; overflow: hidden; }
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center; z-index: -2; }
.pasta-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #15283c55, #15283c99 70%, #15283cdb); z-index: -1; }
.hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 38px 85px; }
.hero-content .eyebrow { color: #ffe1a0; text-shadow: 0 2px 12px #0008; }
.hero-content h1 { font-size: clamp(38px, 4.5vw, 62px); margin: 17px 0 8px; text-shadow: 0 2px 20px #0003; }
.hero-logo { width: clamp(230px, 23vw, 310px); height: auto; filter: drop-shadow(0 6px 15px #0006); }
.hero-tagline { margin-top: 15px; font-size: 18px; }
.hero-button { margin-top: 24px; }
.scroll-link { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; white-space: nowrap; font-size: 9px; letter-spacing: .18em; }
.scroll-link span { font-size: 25px; color: var(--gold); }
.flavour-strip { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 60px); padding: 19px 24px; background: var(--gold); color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: .12em; overflow: hidden; white-space: nowrap; }
.flavour-strip b { font-size: 24px; line-height: 1; }
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.story h2 { margin-block: 18px 26px; }
.story-copy>p:not(.eyebrow) { color: #d3dce5; font-size: 16px; line-height: 1.85; margin-top: 16px; max-width: 480px; }
.story-photo { position: relative; padding: 0 18px 18px 0; }
.story-photo::before { content: ''; position: absolute; inset: 18px 0 0 18px; border: 2px solid var(--gold); border-radius: 9px; z-index: -1; }
.story-photo>img { aspect-ratio: 1/1; width: 100%; border-radius: 9px; }
.photo-label { position: absolute; bottom: 40px; left: -24px; background: var(--gold); color: var(--navy); padding: 18px 24px; transform: rotate(-4deg); box-shadow: 0 5px 25px #0002; }
.photo-label span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.photo-label strong { display: block; font: 30px/1.3 var(--display); }
.menu-section { padding-top: 20px; }
.menu-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.menu-card { border-radius: 8px; overflow: hidden; display: block; }
.menu-card>div { position: relative; overflow: hidden; }
.menu-card img { width: 100%; height: 320px; transition: transform .35s; }
.menu-card:hover img { transform: scale(1.045); }
.card-number { position: absolute; top: 14px; left: 14px; border: 1px solid #ffffff88; background: #192c40b3; padding: 5px 8px; font-size: 10px; letter-spacing: .1em; }
.menu-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--gold); color: var(--navy); padding: 18px 20px; font-size: 27px; }
.menu-card h3 span { font: 25px Arial, sans-serif; }
.gallery-section { padding-top: 10px; }
.gallery-note { font-size: 13px; color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.gallery-grid img { width: 100%; aspect-ratio: 1/1; height: auto; border-radius: 5px; }
.app-section { background: var(--gold); color: var(--navy); overflow: hidden; }
.app-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-block: 55px; }
.app-visual img { width: 100%; max-height: 470px; object-fit: contain; }
.app-layout h2 { margin-block: 18px 24px; }
.app-layout h2 em { color: var(--navy); }
.app-layout p:not(.eyebrow) { font-size: 16px; line-height: 1.8; max-width: 460px; }
.app-layout .navy { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.app-layout .navy:hover { background: #162b42; }
.app-layout .text-link:hover { color: #15283c; }
.app-layout p.app-fine { font-size: 11px; margin-top: 20px; opacity: .8; }
.visit { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center; }
.visit h2 { margin-top: 16px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 36px; }
.contact-grid h3 { color: var(--gold); font-size: 26px; }
.contact-grid address { font-style: normal; font-size: 14px; line-height: 1.9; margin-top: 16px; color: #d3dce5; }
.contact-grid .text-link { margin-top: 20px; font-size: 12px; }
.contact-number { display: inline-block; font-size: 20px; margin-top: 16px; }
.contact-grid p { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.8; }
.contact-grid p.hours-note { font-size: 10px; }
.visit-card { background: #1b3047; border: 2px solid var(--gold); border-radius: 9px; padding: 42px 32px; display: flex; flex-direction: column; align-items: start; }
.visit-card .eyebrow { color: var(--gold); font-size: 9px; }
.visit-card h3 { font-size: 54px; margin-block: 24px 30px; }
.visit-card .text-link { margin-top: 22px; font-size: 12px; }
.closing { border-block: 1px solid #f1ae3166; background: #1c3047; padding-block: 38px; }
.closing .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.closing p { font-size: 10px; letter-spacing: .13em; color: var(--muted); }
.closing a { font: 33px/1.2 var(--display); color: var(--gold); }
.closing a span { margin-left: 24px; }

/* Apply the same navy and gold brand to every step of the ordering flow. */
.ordering {
    .topline { background: #192c40; color: #dce4eb; }
    h1, h2, h3 { font-family: var(--display); letter-spacing: .015em; }
    h1 em, h2 em { font-style: normal; }
    .site-header { border: 0; padding-block: 15px; }
    .site-header nav { font-size: 14px; }
    .site-header nav a.active { color: var(--gold); }
    .button { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 700; font-size: 13px; }
    .button:hover { background: #ffc658; color: var(--navy); border-color: #ffc658; }
    .button.outline { color: var(--gold); background: transparent; }
    .button.outline:hover { background: var(--gold); color: var(--navy); }
    .basket-link { color: #fffaf0; border-color: var(--gold); }
    .basket-link span { color: var(--navy); background: var(--gold); }
    .hero-stamp { background: var(--gold); border-color: var(--gold); color: var(--navy); }
    .hero-stamp em { font-family: var(--display); font-style: normal; letter-spacing: .015em; }
    .notice { background: #f1ae311c; color: #ffe1a0; border-color: #f1ae3177; }
    .notice.error, .validation-errors { background: #d8694a26; color: #ffd2c2; border-color: #f39776; }
    .product, .panel { background: #20364e; border-color: var(--line); }
    .product-photo span { background: var(--navy); color: #fffaf0; }
    .product-content>p { min-height: 65px; }
    .product-title h2 { font-size: 27px; }
    .product-title strong { color: var(--gold); }
    .basket-preview, .checkout-summary, .shop-stats>div { background: #1a2f46; border-color: var(--line); }
    .categories button { color: #fffaf0; }
    .categories button.selected { background: var(--gold); color: var(--navy); border-color: var(--gold); }
    input:not([type=radio]):not([type=checkbox]), select, textarea { background: #172b40; border-color: #718092; color: #fffaf0; color-scheme: dark; }
    input::placeholder, textarea::placeholder { color: #b4c0cd; }
    .choice.chosen { background: #f1ae311a; border-color: var(--gold); }
    .order-status { background: #ffffff14; color: #e7edf2; }
    .status-received { background: #f1ae3122; color: #ffd780; }
    .status-accepted, .status-preparing { background: #659ac52b; color: #addaff; }
    .status-ready { background: #5fbd8226; color: #a4e4b8; }
    .status-completed { background: #ffffff15; color: #c3ced9; }
    .order-timeline .current .timeline-marker { background: var(--gold); color: var(--navy); }
    .order-timeline .done .timeline-marker { background: #f1ae3122; color: var(--gold); border-color: #f1ae3166; }
    .footer a { color: var(--gold); }
    .footer-brand { font-size: 25px; text-decoration: none; }
    .shop-stats strong { font-family: var(--display); }
}
@media(max-width: 1000px) {
    .story, .visit { gap: 40px; }
    .menu-cards { gap: 14px; }
    .menu-card img { height: 270px; }
    .menu-card h3 { padding: 16px 12px; font-size: 23px; }
    .app-layout { gap: 30px; }
}
@media(max-width: 760px) {
    .pasta-hero { min-height: 590px; height: 76svh; max-height: 740px; }
    .hero-content { padding-top: 25px; }
    .hero-content .eyebrow { font-size: 9px; }
    .hero-content h1 { font-size: 42px; }
    .hero-logo { width: 250px; }
    .hero-tagline { font-size: 16px; }
    .hero-button { padding: 14px 22px; font-size: 14px; }
    .flavour-strip { justify-content: flex-start; font-size: 10px; gap: 22px; padding-block: 17px; }
    .story, .visit, .app-layout { grid-template-columns: 1fr; gap: 38px; }
    .story-copy>p:not(.eyebrow) { font-size: 15px; }
    .story-photo { max-width: 540px; margin-left: 12px; }
    .photo-label { left: -12px; }
    .menu-section { padding-top: 16px; }
    .menu-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 14px; }
    .menu-card img { height: 250px; }
    .menu-card h3 { font-size: 25px; }
    .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .app-layout { padding-block: 45px; }
    .app-visual { order: 2; }
    .app-visual img { max-height: 370px; }
    .visit-card { padding: 30px; }
    .visit-card h3 { font-size: 48px; }
    .closing .wrap { align-items: start; flex-direction: column; gap: 16px; }
    .closing a { font-size: 28px; }
    .closing a span { margin-left: 8px; }
    .ordering .site-header nav { font-size: 11px; }
    .ordering .menu-hero h1 { font-size: clamp(36px, 8vw, 48px); }
    .ordering .product-content>p { min-height: 100px; }
    .ordering .product-title h2 { font-size: 24px; }
}
@media(max-width: 380px) {
    .menu-card img { height: 205px; }
    .menu-card h3 { font-size: 21px; }
    .contact-grid { gap: 18px; }
    .contact-number { font-size: 17px; }
    .ordering .product-content>p { min-height: 0; }
}