/*
Theme Name: Vasa Hospitality Signature V18
Description: Independent Vasa homepage, clean Everstyle-inspired typography, gold brand palette.
Version: 18.0.0
Requires PHP: 7.4
*/
:root {
    --gold:#b5a06a;
    --ink:#1d2321;
    --cream:#f8f7f3;
    --line:#e7e4dc;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    color:var(--ink);
    background:var(--cream);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

a {
    text-decoration:none;
    color:inherit;
}

img {
    max-width:100%;
    display:block;
}

h1,h2,h3,p {
    margin-top:0;
}

h1,h2,h3 {
    font-weight:600;
    letter-spacing:-.045em;
    line-height:1.12;
}

h1 {
    font-size:clamp(2.9rem,5.8vw,5.7rem);
}

h2 {
    font-size:clamp(2.2rem,4vw,4rem);
}

h3 {
    font-size:clamp(1.4rem,2.1vw,2rem);
}

p {
    font-size:1.04rem;
}

.v-container {
    width:min(1180px,calc(100% - 48px));
    margin:auto;
}

.site-header {
    background:#fff;
    position:relative;
    z-index:10;
    border-bottom:1px solid var(--line);
}

.v-nav {
    min-height:92px;
    display:flex;
    align-items:center;
    gap:35px;
    justify-content:space-between;
}

.v-logo img {
    width:160px;
    max-height:64px;
    object-fit:contain;
}

.v-nav nav {
    display:flex;
    gap:32px;
    font-size:14px;
    font-weight:600;
}

.v-header-contact {
    border:1px solid var(--ink);
    padding:12px 23px;
    border-radius:99px;
    font-size:13px;
    font-weight:600;
}

.v-section {
    padding:108px 0;
}

.v-kicker {
    font-size:11px;
    font-weight:750;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:#9a814b;
    margin-bottom:22px;
}

.v-kicker.light {
    color:#e6d5a4;
}

.v-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border:1px solid #a89a78;
    padding:15px 24px;
    border-radius:99px;
    font-size:13px;
    font-weight:700;
    min-height:48px;
    transition:transform .2s,background .2s;
}

.v-button:hover {
    transform:translateY(-2px);
}

.v-button-gold {
    background:var(--gold);
    border-color:var(--gold);
    color:#171a19;
}

.v-button-dark {
    background:var(--ink);
    color:#fff;
    border-color:var(--ink);
}

.v-text-link {
    font-weight:650;
    font-size:14px;
}

.v-hero {
    background:var(--ink);
    color:white;
    padding:88px 0;
}

.v-hero-inner {
    display:grid;
    grid-template-columns:1.06fr .94fr;
    align-items:center;
    gap:65px;
    min-height:550px;
}

.v-hero h1 {
    max-width:720px;
    margin-bottom:24px;
}

.v-hero-tag {
    letter-spacing:.19em;
    color:#d5c390;
    font-size:12px;
    font-weight:750;
    margin-bottom:34px;
}

.v-hero-media img {
    height:490px;
    width:100%;
    object-fit:cover;
    border-radius:28px;
}

.v-intro-grid,.v-about-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.v-intro p,.v-about p {
    max-width:570px;
    color:#5f625f;
}

.v-actions {
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:30px;
}

.v-intro-visual {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:end;
}

.v-intro-visual img {
    height:330px;
    width:100%;
    object-fit:cover;
    border-radius:24px;
}

.v-intro-visual img:nth-child(2) {
    height:260px;
}

.v-why {
    background:#e8dfc8;
}

.v-section-label {
    background:var(--ink);
    color:#fff;
    border-radius:99px;
    padding:14px 32px;
    width:max-content;
    margin:0 auto 42px;
    font-weight:700;
}

.v-why-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.v-why-grid article {
    background:#fffaf0;
    padding:44px 34px;
    border-radius:24px;
}

.v-why-grid p {
    font-size:15px;
    color:#65615b;
}

.v-centered {
    text-align:center;
}

.v-feature {
    background:#fff;
}

.v-feature-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:46px;
}

.v-feature-card {
    min-height:460px;
    background-position:center;
    background-size:cover;
    border-radius:26px;
    display:flex;
    align-items:end;
    padding:35px;
    color:#fff;
    overflow:hidden;
}

.v-feature-card span {
    font-size:11px;
    letter-spacing:.18em;
    font-weight:700;
}

.v-feature-card h3 {
    max-width:390px;
    margin:14px 0 0;
    font-size:clamp(1.5rem,2.5vw,2.5rem);
}

.v-overlap {
    margin-top:30px;
}

.v-brands {
    background:#333735;
    color:#fff;
}

.v-brands h2 {
    margin-bottom:40px;
}

.v-brand-slots {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px;
}

.v-brand-slots div {
    border:1px dashed #999a8e;
    border-radius:18px;
    padding:28px 8px;
    font-size:13px;
    color:#d5d5c9;
}

.v-muted-light {
    color:#b9bdb8;
    font-size:12px;
    margin-top:24px;
}

.v-about {
    background:#fff;
}

.v-about-grid {
    align-items:start;
}

.v-about p {
    margin-bottom:20px;
}

.v-statement {
    background:#e8e5dc;
    text-align:center;
}

.v-statement p {
    max-width:700px;
    margin:20px auto 30px;
}

.v-products {
    background:var(--gold);
    color:#fff;
}

.v-products .v-kicker {
    color:#fff8e9;
}

.v-products-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:50px;
}

.v-product {
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.28);
    border-radius:22px;
    padding:28px 23px;
    min-height:210px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.v-product span {
    font-size:12px;
    opacity:.75;
}

.v-product h3 {
    font-size:23px;
    margin:0;
}

.v-product b {
    font-size:12px;
}

.v-benefits {
    background:#fff;
    padding:35px 0;
}

.v-benefits-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.v-benefits-grid>div {
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px;
    font-size:22px;
    color:#a58d57;
}

.v-benefits-grid span {
    font-size:14px;
    color:var(--ink);
    font-weight:650;
}

.v-cta {
    background:var(--cream);
}

.v-cta p {
    color:#6a6b68;
}

.v-footer {
    background:#292d2a;
    color:#eee;
    padding:70px 0 25px;
}

.v-footer-grid {
    display:grid;
    grid-template-columns:1.2fr .7fr 1.3fr 1fr;
    gap:35px;
}

.v-footer-logo {
    width:170px;
    margin-bottom:22px;
}

.v-footer h3 {
    font-size:16px;
    letter-spacing:0;
    margin-bottom:20px;
}

.v-footer p,.v-footer a {
    display:block;
    font-size:13px;
    color:#d4d5ce;
    margin-bottom:10px;
}

.v-copyright {
    border-top:1px solid #555c54;
    margin-top:50px;
    padding-top:25px;
    text-align:center;
    font-size:12px;
    color:#c9c9c3;
}

.v-page {
    max-width:950px;
}

.v-page h1 {
    font-size:clamp(2.4rem,5vw,4.5rem);
}

@media(max-width:800px) {
    .v-nav {
        flex-wrap:wrap;
        padding:18px 0;
        gap:16px;
    }
    .v-nav nav {
        gap:15px;
        order:3;
        width:100%;
        justify-content:center;
    }
    .v-header-contact {
        font-size:12px;
    }
    .v-hero-inner,.v-intro-grid,.v-about-grid {
        grid-template-columns:1fr;
        gap:38px;
    }
    .v-hero-inner {
        min-height:0;
    }
    .v-hero-media img {
        height:300px;
    }
    .v-section {
        padding:70px 0;
    }
    .v-why-grid {
        grid-template-columns:1fr;
    }
    .v-feature-grid {
        grid-template-columns:1fr;
    }
    .v-feature-card {
        min-height:340px;
    }
    .v-products-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .v-brand-slots {
        grid-template-columns:repeat(2,1fr);
    }
    .v-benefits-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .v-footer-grid {
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:480px) {
    .v-container {
        width:calc(100% - 32px);
    }
    .v-logo img {
        width:130px;
    }
    .v-products-grid,.v-footer-grid {
        grid-template-columns:1fr;
    }
    .v-hero {
        padding:60px 0;
    }
    .v-intro-visual img {
        height:200px;
    }
    .v-intro-visual img:nth-child(2) {
        height:170px;
    }
}

/* V3.1 homepage refinement */
.v-hero {
    padding:74px 0 82px;
}

.v-hero-inner {
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:clamp(30px,4vw,64px);
    min-height:500px;
}

.v-hero h1 {
    font-size:clamp(2.65rem,4.05vw,4.55rem);
    line-height:1.105;
    letter-spacing:-.052em;
    max-width:690px;
    text-wrap:balance;
    margin-bottom:24px;
}

.v-hero-media img {
    height:430px;
    border-radius:26px;
}

.v-hero-tag {
    margin-bottom:28px;
}

.v-nav {
    min-height:84px;
}

.v-logo img {
    width:156px;
    max-height:62px;
}

.v-section {
    padding:88px 0;
}

.v-intro-grid,.v-about-grid {
    gap:65px;
}

.v-why-grid article {
    padding:36px 30px;
}

.v-why-grid h3 {
    font-size:clamp(1.3rem,1.8vw,1.75rem);
}

.v-feature-card {
    min-height:405px;
}

.v-product {
    min-height:185px;
}

.v-product h3 {
    font-size:21px;
}

.v-brand-slots div {
    min-height:85px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.v-logo {
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.v-nav nav a:hover {
    color:#a18a53;
}

.v-button:focus-visible,.v-nav a:focus-visible {
    outline:3px solid #b5a06a;
    outline-offset:3px;
}

@media(max-width:1000px) {
    .v-hero h1 {
        font-size:clamp(2.6rem,4.5vw,3.7rem);
    }
    .v-hero-inner {
        gap:30px;
    }
    .v-hero-media img {
        height:370px;
    }
}

@media(max-width:800px) {
    .v-hero {
        padding:60px 0;
    }
    .v-hero h1 {
        font-size:clamp(2.5rem,7vw,3.8rem);
        max-width:660px;
    }
    .v-hero-inner {
        grid-template-columns:1fr;
        gap:36px;
    }
    .v-hero-media img {
        height:340px;
    }
    .v-section {
        padding:65px 0;
    }
    .v-nav {
        min-height:0;
    }
    .v-header-contact {
        margin-left:auto;
    }
    .v-intro-grid,.v-about-grid {
        gap:36px;
    }
}

@media(max-width:480px) {
    .v-hero h1 {
        font-size:clamp(2.25rem,9vw,3rem);
        line-height:1.12;
    }
    .v-hero-media img {
        height:260px;
    }
    .v-hero {
        padding:52px 0;
    }
    .v-section {
        padding:55px 0;
    }
    .v-nav nav {
        gap:22px;
        flex-wrap:wrap;
        font-size:13px;
    }
    .v-header-contact {
        padding:9px 13px;
    }
    .v-why-grid article {
        padding:28px 24px;
    }
    .v-feature-card {
        min-height:320px;
    }
}

/* V4: user-supplied luxury HORECA showcase banner */
.v-hero-banner {
    position:relative;
    background:#21160f url('assets/vasa-luxury-hero-clean.png') center center / cover no-repeat;
    min-height:clamp(600px,53vw,790px);
    padding:0;
    color:#fff;
    isolation:isolate;
}

.v-hero-banner:before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,rgba(12,13,12,.82) 0%,rgba(12,13,12,.63) 35%,rgba(12,13,12,.08) 78%),linear-gradient(0deg,rgba(15,12,9,.1),transparent 40%);
}

.v-hero-banner-inner {
    display:flex;
    align-items:center;
    min-height:inherit;
    padding-top:45px;
    padding-bottom:170px;
}

.v-hero-copy {
    max-width:650px;
}

.v-hero-banner h1 {
    font-size:clamp(2.6rem,4.2vw,4.5rem);
    line-height:1.09;
    letter-spacing:-.05em;
    max-width:650px;
    text-wrap:balance;
    text-shadow:0 2px 20px rgba(0,0,0,.16);
}

.v-hero-banner .v-hero-tag {
    color:#f3dc9f;
}

.v-hero-banner .v-button {
    box-shadow:0 6px 22px rgba(0,0,0,.16);
}

@media(max-width:800px) {
    .v-hero-banner {
        min-height:660px;
        background-position:55% center;
    }
    .v-hero-banner:before {
        background:linear-gradient(90deg,rgba(12,13,12,.83),rgba(12,13,12,.48) 80%),linear-gradient(0deg,rgba(0,0,0,.25),transparent 45%);
    }
    .v-hero-banner-inner {
        padding-top:65px;
        padding-bottom:155px;
    }
    .v-hero-banner h1 {
        font-size:clamp(2.5rem,6.5vw,3.7rem);
    }
}

@media(max-width:480px) {
    .v-hero-banner {
        min-height:650px;
        background-position:54% center;
    }
    .v-hero-banner-inner {
        align-items:flex-start;
        padding-top:85px;
        padding-bottom:140px;
    }
    .v-hero-banner h1 {
        font-size:clamp(2.25rem,9vw,3.1rem);
    }
    .v-hero-copy {
        max-width:100%;
    }
    .v-hero-banner .v-kicker {
        font-size:10px;
    }
    .v-hero-banner .v-hero-tag {
        font-size:10px;
    }
}

/* V5: Raleway light/regular typography and Signature Steel editorial banner */

body,button,input,textarea,select {
    font-family:'Raleway',Arial,sans-serif;
    font-weight:400;
}

h1,h2,h3 {
    font-family:'Raleway',Arial,sans-serif;
    font-weight:400;
    letter-spacing:-.035em;
    line-height:1.17;
}

.v-hero-banner h1 {
    font-weight:400;
    letter-spacing:-.045em;
}

.v-kicker,.v-steel-eyebrow {
    font-weight:500;
}

.v-button,.v-nav nav,.v-header-contact {
    font-weight:500;
}

.v-section-label,.v-product h3,.v-footer h3 {
    font-weight:500;
}

.v-steel-section {
    background:#fff;
    padding:90px 0 18px;
}

.v-steel-banner {
    position:relative;
    min-height:570px;
    border-radius:34px;
    overflow:hidden;
    background:#555 url('assets/signature-steel.png') center center/cover no-repeat;
    display:flex;
    align-items:center;
    isolation:isolate;
}

.v-steel-banner:before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,rgba(12,15,15,.84) 0%,rgba(12,15,15,.66) 31%,rgba(12,15,15,.17) 62%,rgba(12,15,15,0) 100%);
}

.v-steel-content {
    color:#fff;
    width:min(570px,85%);
    padding:70px 0 70px clamp(30px,6vw,85px);
}

.v-steel-eyebrow {
    display:block;
    color:#e6d5a4;
    letter-spacing:.19em;
    font-size:11px;
    margin-bottom:22px;
}

.v-steel-content h2 {
    font-size:clamp(2.6rem,4.5vw,4.7rem);
    font-weight:300;
    line-height:1.08;
    letter-spacing:-.05em;
    margin-bottom:25px;
}

.v-steel-content p {
    font-size:clamp(14px,1.3vw,17px);
    line-height:1.8;
    max-width:420px;
    margin-bottom:28px;
}

@media(max-width:800px) {
    .v-steel-section {
        padding:55px 0 5px;
    }
    .v-steel-banner {
        min-height:550px;
        background-position:57% center;
    }
    .v-steel-banner:before {
        background:linear-gradient(90deg,rgba(12,15,15,.88),rgba(12,15,15,.43) 80%);
    }
    .v-steel-content {
        padding:45px 25px;
        width:min(520px,94%);
    }
}

@media(max-width:480px) {
    .v-steel-banner {
        border-radius:24px;
        min-height:510px;
        background-position:54% center;
    }
    .v-steel-content h2 {
        font-size:2.5rem;
    }
    .v-steel-content {
        padding:35px 22px;
    }
    .v-steel-content p {
        font-size:14px;
    }
    .v-steel-eyebrow {
        font-size:9px;
    }
}

/* V6 updates — October 2026 */
.v-steel-section {
    padding:38px 0 34px;
}

.v-steel-section .v-container,.v-magic-section .v-container {
    width:min(1440px,calc(100% - 48px));
}

.v-steel-banner {
    min-height:unset;
    aspect-ratio: 1.96 / 1;
    background-size:contain;
    background-color:#292c2a;
    background-position:center;
}

.v-steel-content {
    padding-top:50px;
    padding-bottom:50px;
}

.v-magic-section {
    background:#fff;
    padding:28px 0 76px;
}

.v-magic-banner {
    position:relative;
    aspect-ratio: 2.02 / 1;
    border-radius:34px;
    overflow:hidden;
    background:#17191a url('assets/culinary-magic.png') center center/contain no-repeat;
    display:flex;
    align-items:flex-start;
    isolation:isolate;
}

.v-magic-banner:before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.18) 42%,transparent 72%);
}

.v-magic-copy {
    color:#fff;
    padding:clamp(30px,5.5vw,80px);
    max-width:690px;
}

.v-magic-copy h2 {
    font-weight:300;
    font-size:clamp(2.7rem,5.3vw,5.5rem);
    line-height:1.05;
    letter-spacing:-.05em;
}

.v-about-dark {
    background:#333735;
    color:#fff;
}

.v-about-dark .v-about-grid {
    align-items:start;
}

.v-about-dark p {
    color:#d4d7d2;
    line-height:1.85;
}

.v-about-dark h2 {
    color:#fff;
}

.v-products-grid {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:15px;
}

.v-product {
    padding:24px 18px;
    min-height:170px;
}

.v-product h3 {
    font-size:clamp(15px,1.35vw,20px);
    line-height:1.3;
    letter-spacing:-.03em;
    overflow-wrap:anywhere;
}

.v-product:hover {
    background:rgba(255,255,255,.21);
    transform:translateY(-3px);
    transition:transform .2s,background .2s;
}

@media(max-width:800px) {
    .v-steel-section .v-container,.v-magic-section .v-container {
        width:calc(100% - 32px);
    }
    .v-steel-banner {
        aspect-ratio:1.65/1;
        min-height:0;
        background-size:contain;
    }
    .v-steel-content {
        padding:25px;
        width:65%;
    }
    .v-steel-content h2 {
        font-size:clamp(1.65rem,4vw,2.6rem);
    }
    .v-steel-content p {
        font-size:12px;
        line-height:1.5;
    }
    .v-magic-banner {
        aspect-ratio:1.7/1;
    }
    .v-magic-copy {
        padding:30px;
    }
    .v-magic-copy h2 {
        font-size:clamp(2rem,5vw,3.6rem);
    }
    .v-products-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .v-product {
        min-height:165px;
    }
}

@media(max-width:480px) {
    .v-steel-banner {
        aspect-ratio:1.35/1;
        border-radius:22px;
        background-size:contain;
        background-position:center;
    }
    .v-steel-content {
        width:78%;
        padding:18px;
    }
    .v-steel-eyebrow {
        font-size:8px;
        margin-bottom:9px;
    }
    .v-steel-content h2 {
        font-size:clamp(1.45rem,6.2vw,2rem);
        margin-bottom:9px;
    }
    .v-steel-content p {
        font-size:10px;
        margin-bottom:10px;
    }
    .v-steel-content .v-button {
        padding:8px 11px;
        min-height:32px;
        font-size:10px;
    }
    .v-magic-section {
        padding:12px 0 50px;
    }
    .v-magic-banner {
        aspect-ratio:1.4/1;
        border-radius:22px;
    }
    .v-magic-copy {
        padding:23px 17px;
    }
    .v-magic-copy h2 {
        font-size:clamp(1.7rem,7vw,2.6rem);
    }
    .v-product {
        padding:18px 14px;
        min-height:150px;
    }
    .v-product h3 {
        font-size:16px;
    }
}

/* V7 final: remove letterboxing around Signature Steel;
image fills banner edge-to-edge.
   The banner uses the original image aspect ratio (1926 × 816), preventing cropping. */
.v-steel-banner {
    aspect-ratio:1926 / 816;
    min-height:0;
    background-image:url('assets/signature-steel.png');
    background-color:transparent;
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
}

.v-steel-section {
    background:#fff;
}

@media(max-width:800px) {
    .v-steel-banner {
        aspect-ratio:1926 / 816;
        min-height:0;
        background-size:100% 100%;
    }
    .v-steel-content {
        padding:clamp(12px,2.6vw,30px);
        width:58%;
    }
    .v-steel-content h2 {
        font-size:clamp(1.3rem,4vw,2.5rem);
        margin-bottom:12px;
    }
    .v-steel-content p {
        font-size:clamp(9px,1.4vw,13px);
        line-height:1.4;
        margin-bottom:12px;
    }
}

@media(max-width:480px) {
    .v-steel-banner {
        aspect-ratio:1926 / 816;
        min-height:0;
        border-radius:18px;
        background-size:100% 100%;
    }
    .v-steel-content {
        width:62%;
        padding:12px;
    }
    .v-steel-eyebrow {
        font-size:7px;
        letter-spacing:.08em;
        margin-bottom:5px;
    }
    .v-steel-content h2 {
        font-size:clamp(15px,4.6vw,21px);
        line-height:1.08;
        margin-bottom:6px;
    }
    .v-steel-content p {
        font-size:8px;
        line-height:1.25;
        margin-bottom:7px;
    }
    .v-steel-content .v-button {
        font-size:8px;
        min-height:24px;
        padding:5px 8px;
    }
}

/* V8: approved Vasa logo displayed at twice the previous width. */
.v-logo img {
    width:312px;
    max-width:100%;
    max-height:none;
    height:auto;
    object-fit:contain;
}

.v-footer-logo {
    width:340px;
    max-width:100%;
    height:auto;
}

.v-nav {
    gap:clamp(12px,2vw,28px);
}

@media(max-width:1050px) {
    .v-nav {
        flex-wrap:wrap;
        justify-content:center;
        padding:18px 0;
    }
    .v-nav nav {
        gap:22px;
    }
}

@media(max-width:800px) {
    .v-logo img {
        width:260px;
    }
    .v-nav nav {
        order:3;
        width:100%;
        justify-content:center;
    }
}

@media(max-width:480px) {
    .v-logo img {
        width:min(260px,78vw);
    }
    .v-footer-logo {
        width:min(340px,100%);
    }
}

/* V11: Signature Steel mobile banner. Keep the desktop layout unchanged. */
@media (max-width: 600px) {
    .v-steel-section {
        padding-top: 28px;
        padding-bottom: 32px;
    }
    .v-steel-section .v-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .v-steel-banner {
        position: relative;
        display: flex;
        align-items: flex-end;
        width: 100%;
        min-height: 420px;
        aspect-ratio: auto;
        overflow: hidden;
        border-radius: 24px;
        background-color: #343635;
        background-image: linear-gradient(to top, rgba(8, 12, 12, .88) 0%, rgba(8, 12, 12, .35) 57%, transparent 100%), url('assets/signature-steel.png');
        background-size: cover;
        background-position: 55% center;
        background-repeat: no-repeat;
    }
    .v-steel-content {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        padding: 26px 23px 28px;
        color: #fff;
    }
    .v-steel-eyebrow {
        display: block;
        font-size: 9px;
        line-height: 1.5;
        letter-spacing: .11em;
        margin-bottom: 13px;
    }
    .v-steel-content h2 {
        font-size: clamp(32px, 8vw, 42px);
        line-height: 1.06;
        margin: 0 0 14px;
    }
    .v-steel-content p {
        max-width: 310px;
        font-size: 13px;
        line-height: 1.55;
        margin: 0 0 20px;
    }
    .v-steel-content .v-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        min-height: 44px;
        padding: 11px 18px;
        font-size: 12px;
        line-height: 1.3;
        border-radius: 999px;
    }
    .v-intro-visual img:nth-child(2) {
        object-fit: contain;
        background: #f7f5ef;
        padding: 8px;
    }
}

/* V13: GOLD TOP STRIP + IVORY FLOATING ROUNDED NAVIGATION */
.site-header {
    background:#e9dec2;
    border:0;
    padding:8px 20px 14px;
}

.v-header-shell {
    max-width:1440px;
    margin:auto;
    background:#b5a06a;
    border-radius:24px;
    padding:0 11px 11px;
}

.v-header-top {
    min-height:36px;
    padding:6px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
    font-size:12px;
}

.v-social-links {
    display:flex;
    gap:15px;
    align-items:center;
}

.v-social-links a {
    font-size:16px;
    font-weight:700;
}

.site-header .v-nav {
    width:100%;
    margin:0;
    padding:12px 24px;
    min-height:86px;
    background:#fffdf8;
    border-radius:22px;
    gap:20px;
}

.site-header .v-logo img {
    width:clamp(175px,19vw,255px);
    max-height:74px;
    object-fit:contain;
}

.site-header .v-main-menu {
    display:flex;
    align-items:center;
    gap:clamp(12px,2.5vw,32px);
    font-size:13px;
    font-weight:500;
}

.site-header .v-header-contact {
    white-space:nowrap;
}

.v-mobile-menu-toggle {
    display:none;
    border:0;
    background:transparent;
    color:#1d2321;
    font-size:28px;
    cursor:pointer;
}

/* V13: SIX HERO CATEGORY ICONS — ALWAYS VISIBLE BELOW THE HERO COPY */
.v-hero-banner {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:clamp(650px,60vw,790px);
    height:auto;
    padding-bottom:0!important;
    background-position:center;
}

.v-hero-banner-inner {
    flex:1;
    display:flex;
    align-items:center;
}

.v-hero-categories {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    width:min(1280px,calc(100% - 48px));
    margin:26px auto 0;
    padding:15px 0 20px;
    background:rgba(18,16,13,.54);
    border-radius:16px 16px 0 0;
}

.v-hero-categories a {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:82px;
    padding:6px 8px;
    border-right:1px solid rgba(221,191,122,.3);
    color:white;
    font-size:10px;
    line-height:1.4;
    font-weight:500;
    text-align:center;
}

.v-hero-categories a:last-child {
    border-right:0;
}

.v-category-icon {
    font-size:30px;
    line-height:1.1;
    color:#d6b974;
    margin-bottom:8px;
}

/* V13: CONTINUOUS BEIGE INTRO / CULINARY / WHY VASA */
.v-intro {
    background:#e9dec2!important;
    padding:74px 0 60px!important;
}

.v-intro-visual {
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center;
    gap:14px;
}

.v-intro-visual img {
    width:calc(50% - 7px)!important;
    height:clamp(185px,22vw,340px)!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    background:transparent!important;
}

.v-magic-section {
    background:#e9dec2!important;
    padding-top:0!important;
    padding-bottom:66px!important;
}

.v-magic-banner {
    overflow:hidden;
    border-radius:30px;
}

.v-why {
    background:#e9dec2!important;
    padding-top:30px!important;
}

.v-steel-section {
    padding-top:70px;
    padding-bottom:70px;
}

/* V13: RESPONSIVE MOBILE LAYOUT */
@media(max-width:900px) {
    .site-header {
        padding:6px 10px 12px;
    }
    .v-header-shell {
        padding:0 7px 7px;
        border-radius:20px;
    }
    .v-header-top {
        padding:5px 11px;
        font-size:10px;
    }
    .site-header .v-nav {
        position:relative;
        min-height:67px;
        padding:8px 13px;
        border-radius:17px;
    }
    .site-header .v-logo img {
        width:clamp(155px,40vw,225px);
        max-height:51px;
    }
    .site-header .v-header-contact {
        display:none;
    }
    .v-mobile-menu-toggle {
        display:block;
        margin-left:auto;
    }
    .site-header .v-main-menu {
        display:none;
        position:absolute;
        z-index:30;
        top:calc(100% + 8px);
        left:0;
        right:0;
        background:#fffdf8;
        border-radius:16px;
        box-shadow:0 12px 28px rgba(0,0,0,.16);
        padding:20px;
        flex-direction:column;
        align-items:flex-start;
    }
    .site-header .v-main-menu.v-menu-open {
        display:flex;
    }
    .v-hero-banner {
        min-height:730px!important;
        height:auto!important;
    }
    .v-hero-banner-inner {
        padding-top:48px;
        padding-bottom:20px;
    }
    .v-hero-categories {
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:calc(100% - 20px);
        padding:8px 0;
        margin-top:14px;
    }
    .v-hero-categories a {
        min-height:75px;
        font-size:8px;
        padding:5px 3px;
    }
    .v-hero-categories a:nth-child(3) {
        border-right:0;
    }
    .v-hero-categories a:nth-child(-n+3) {
        border-bottom:1px solid rgba(221,191,122,.3);
    }
    .v-category-icon {
        font-size:24px;
        margin-bottom:5px;
    }
    .v-intro {
        padding:56px 0 38px!important;
    }
    .v-intro-visual {
        gap:8px;
        margin-top:25px;
    }
    .v-intro-visual img {
        height:clamp(165px,45vw,255px)!important;
        width:calc(50% - 4px)!important;
    }
    .v-magic-section {
        padding-bottom:44px!important;
    }
    .v-why {
        padding-top:24px!important;
    }
}

@media(max-width:420px) {
    .site-header .v-logo img {
        width:155px;
    }
    .v-hero-banner {
        min-height:750px!important;
    }
    .v-intro-visual img {
        height:175px!important;
    }
}

/* ==========================================================
   V14 HEADER REFINEMENT — FULL WIDTH, CENTERED CONTACT
   ========================================================== */
.site-header {
    padding: 6px 8px 12px;
}

.v-header-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

.v-header-top {
    justify-content: center;
    text-align: center;
}

.v-header-top > a {
    display: inline-block;
    margin: 0 auto;
    color: #fff;
    text-decoration: none;
}

.site-header .v-nav {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .site-header {
        padding: 5px 6px 10px;
    }
    .v-header-top {
        justify-content: center;
    }
}

/* ==========================================================
   V15 — EDGE-TO-EDGE HEADER
   Edit this section to change the header appearance.
   ========================================================== */

/* White shows through the two rounded TOP corners. */
.site-header {
    width: 100%;
    margin: 0;
    padding: 0 !important;
    background-color: #ffffff !important;
    border: none;
}

/* Gold strip reaches the left and right edges, with no bottom gap. */
.v-header-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 !important;
    background-color: #b5a06a;
    border-radius: 28px 28px 0 0;
    box-sizing: border-box;
    overflow: visible;
}

/* Contact number centered across the entire screen. */
.v-header-top {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    padding: 5px 16px;
    text-align: center;
}

.v-header-top > a {
    margin: 0;
    color: #ffffff;
    text-decoration: none;
}

/* Ivory bar is flush with both sides and with the next section. */
.site-header .v-nav {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 28px;
    border-radius: 0;
    background-color: #fffdf8;
    box-sizing: border-box;
}

/* Keep the contact button text clean — no decorative arrow. */
.site-header .v-header-contact::before,
.site-header .v-header-contact::after,
.v-header-top::before,
.v-header-top::after {
    content: none !important;
}

@media (max-width: 900px) {
    .site-header {
        padding: 0 !important;
    }

    .v-header-shell {
        padding: 0 !important;
        border-radius: 20px 20px 0 0;
    }

    .site-header .v-nav {
        padding: 12px 16px;
        border-radius: 0;
    }
}

/* ==========================================================
   V16 — CLEAN FORWARD ARROWS ON ALL BUTTONS AND TEXT LINKS
   ASCII-safe HTML entities prevent broken encoding symbols.
   ========================================================== */

.v-link-arrow {
    display: inline-block;
    margin-left: 0.3em;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
}

/* Keep decorative arrows from being duplicated. */
.v-button .v-link-arrow,
.v-text-link .v-link-arrow {
    text-decoration: none;
}

/* ============================================================
   V17 — TEXT-COLOR CHEVRON FOR ALL LINK AND BUTTON ARROWS
   Uses a CSS border instead of a font character, avoiding
   encoding problems. Change size here for all buttons.
   ============================================================ */
.v-link-arrow {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 7px;
    border-top: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
    transform: rotate(45deg);
    vertical-align: 2px;
    font-size: 0;
    line-height: 0;
    color: inherit;
}

/* ============================================================
   V18 — CENTERED INTRODUCTION
   The images have been removed from the HTML in front-page.php.
   ============================================================ */
.v-intro {
    background: #e9dec2;
    padding: clamp(72px, 9vw, 130px) 24px !important;
}

.v-intro-centered {
    width: min(100%, 950px);
    margin: 0 auto;
    text-align: center;
}

.v-intro-centered h2 {
    margin: 22px auto 26px;
    font-weight: 300;
    line-height: 1.13;
}

.v-intro-centered p {
    max-width: 740px;
    margin: 0 auto;
    color: #60615e;
    line-height: 1.8;
}

.v-intro-centered .v-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.v-intro-centered .v-button-ink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    border: 1px solid #1d2321;
    background: #1d2321;
    color: #ffffff;
    font-weight: 500;
}

.v-intro-centered .v-button-ink:hover {
    background: #303735;
    border-color: #303735;
    color: #ffffff;
}

/* ============================================================
   V18 — SIGNATURE STEEL: FULL BLEED, NO FRAME OR GAPS
   Uses a cropped image with the original white rounded border removed.
   ============================================================ */
.v-steel-section {
    width: 100%;
    margin: 0;
    padding: 0 !important;
    background: #e9dec2;
}

.v-steel-section > .v-steel-banner {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 490px;
    margin: 0;
    padding: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0 !important;
    background-color: #343635;
    background-image: url('assets/signature-steel-edge-to-edge.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.v-steel-section .v-steel-content {
    position: relative;
    z-index: 1;
    padding: clamp(55px, 6vw, 105px) clamp(24px, 7vw, 115px);
}

.v-steel-section + .v-products {
    margin-top: 0;
}

@media (max-width: 700px) {
    .v-intro {
        padding: 76px 20px !important;
    }

    .v-intro-centered h2 {
        font-size: clamp(34px, 8vw, 48px);
    }

    .v-intro-centered .v-actions {
        gap: 12px;
    }

    .v-intro-centered .v-button-ink {
        padding: 12px 18px;
        font-size: 12px;
    }

    .v-steel-section > .v-steel-banner {
        min-height: 470px;
        aspect-ratio: auto;
        background-position: 58% center;
        background-image: linear-gradient(90deg, rgba(10, 13, 13, .72), rgba(10, 13, 13, .08)), url('assets/signature-steel-edge-to-edge.jpg');
    }

    .v-steel-section .v-steel-content {
        padding: 50px 25px;
        max-width: 420px;
    }
}

/* ============================================================
   V19 — SIGNATURE STEEL CONTENT ALIGNMENT
   Match the left edge of the main hero's .v-container.
   Keep the full-bleed background and existing typography.
   ============================================================ */
.v-steel-section .v-steel-content {
    box-sizing: border-box;
    width: min(100%, 650px);
    max-width: 650px;
    margin-left: max(24px, calc((100% - 1180px) / 2));
    padding: clamp(55px, 6vw, 105px) 24px clamp(55px, 6vw, 105px) 0;
    text-align: left;
}

@media (max-width: 700px) {
    .v-steel-section .v-steel-content {
        width: calc(100% - 48px);
        max-width: 420px;
        margin-left: 24px;
        padding: 50px 0;
        text-align: left;
    }
}