/* RESET */
*,*:before,*:after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--color-fifth);
    color:var(--color-text);
    font-family:var(--sans);
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

/* BREADCRUMB */
.breadcrumb{
    background:var(--color-primary-dark);
    padding:.7rem 2rem;
    font-size:.78rem;
    color:var(--color-fifth);
}

.breadcrumb a{
    color:var(--color-fifth);
    text-decoration:none;
    opacity:.75;
}

.breadcrumb a:hover{
    opacity:1;
}

.breadcrumb span{
    margin:0 .5rem;
}

/* HERO */
.hero{
    background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
    color:var(--color-white);
    padding:clamp(4rem,10vw,8rem) 2rem clamp(3rem,7vw,6rem);
    text-align:center;
    position:relative;
    overflow:hidden;
}

.hero:before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(242,183,151,.20), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(226,221,168,.18), transparent 35%);
}

.hero > *{
    position:relative;
    z-index:2;
}

.hero-eyebrow{
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--color-secondary);
    margin-bottom:1.4rem;
}

.hero h1{
    font-family:var(--serif);
    font-size:clamp(2.8rem,7vw,5.5rem);
    line-height:1.08;
    margin-bottom:1.2rem;
}

.hero h1 em{
    color:var(--color-third);
    font-style:italic;
}

.hero-sub{
    max-width:620px;
    margin:0 auto 2rem;
    color:rgba(255,255,255,.86);
}

.hero-rating{
    margin-top:2rem;
    color:rgba(255,255,255,.72);
}

.hero-rating strong{
    color:var(--color-secondary);
}

/* BUTTONS */
.btn{
    display:inline-block;
    padding:.95rem 2rem;
    border-radius:3px;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.82rem;
    font-weight:500;
    transition:.25s ease;
}

.btn-primary{
    background:var(--color-third);
    color:var(--color-black);
    border:2px solid var(--color-third);
}

.btn-primary:hover{
    background:#ecaa86;
}

.btn-outline{
    background:transparent;
    color:var(--color-white);
    border:2px solid rgba(255,255,255,.35);
}

.btn-outline:hover{
    border-color:var(--color-white);
}

/* SECTIONS */
.section{
    padding:var(--gap) 2rem;
}

.container{
    max-width:var(--max);
    margin:auto;
}

.menu-section{
    background:var(--color-white);
}

.tag{
    display:inline-block;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--color-primary);
    border-bottom:1px solid var(--color-primary);
    padding-bottom:3px;
    margin-bottom:1rem;
}

h2{
    font-family:var(--serif);
    font-size:clamp(1.9rem,4vw,3rem);
    line-height:1.2;
    color:var(--color-primary);
    margin-bottom:1rem;
}

h3{
    font-family:var(--serif);
    color:var(--color-primary-dark);
    margin-bottom:.5rem;
}

p{
    color:var(--color-text);
}

/* GRID */
.intro-grid,
.location-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
}

@media(max-width:760px){
    .intro-grid,
    .location-grid{
        grid-template-columns:1fr;
        gap:2rem;
    }
}

/* IMG */
.img-placeholder,
.map-placeholder{
    background:var(--color-fourth);
    border:1px solid rgba(26,68,156,.08);
    overflow:hidden;
    border-radius:4px;
}

.img-placeholder img,
.map-placeholder iframe{
    width:100%;
    height:100%;
    object-fit:cover;
    border:0;
}

/* HOURS */
.hours-strip{
    background:var(--color-primary-dark);
    color:var(--color-white);
    padding:2rem;
}

.hours-label{
    color:var(--color-secondary);
    text-transform:uppercase;
    font-size:.75rem;
    letter-spacing:.18em;
}

/* CARDS */
.menu-grid,
.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1.5rem;
}

.menu-card{
    background:var(--color-fifth);
    border:1px solid rgba(26,68,156,.08);
    padding:2rem;
    transition:.25s ease;
}

.menu-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 28px rgba(26,68,156,.08);
}

.menu-icon{
    font-size:1.8rem;
    margin-bottom:1rem;
    display:block;
}

.why-item{
    border-left:3px solid var(--color-third);
    padding-left:1.2rem;
}

.why-number{
    font-size:2.8rem;
    font-family:var(--serif);
    color:var(--color-primary);
}

/* FAQ */
.faq-section{
    background:var(--color-primary);
    color:var(--color-white);
}

.faq-section h2{
    color:var(--color-white);
}

.faq-section .tag{
    color:var(--color-secondary);
    border-color:var(--color-secondary);
}

.faq-item{
    border-bottom:1px solid rgba(255,255,255,.12);
    padding:1.3rem 0;
}

.faq-q{
    color:var(--color-white);
    font-family:var(--serif);
    margin-bottom:.5rem;
}

.faq-a{
    color:rgba(255,255,255,.78);
}

/* CTA FINAL */
.cta-final{
    background:var(--color-fourth);
    text-align:center;
    padding:clamp(3rem,7vw,6rem) 2rem;
}

.cta-final p{
    max-width:560px;
    margin:auto auto 2rem;
}

/* DIVIDER */
.divider{
    border:none;
    border-top:1px solid rgba(26,68,156,.08);
}