:root
{
    --ink:#17152b;
    --purple:#6636a8;
    --purple-dark:#45217f;
    --aqua:#24bfd1;
    --aqua-dark:#0d91a5;
    --pink:#ed3972;
    --cream:#f7fbfc;
    --white:#fff;
    --muted:#647080;
    --line:#e6edf0;
    --shadow:0 18px 50px rgba(23,21,43,.10);
    --radius:22px
}

*
{
    box-sizing:border-box
}

html
{
    scroll-behavior:smooth
}

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

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

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

.container
{
    width:min(1160px,calc(100% - 40px));
    margin:auto
}

.topbar
{
    background:var(--ink);
    color:#fff;
    font-size:.9rem
}

.topbar .container
{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:9px 0
}

.topbar a
{
    font-weight:700
}

.header
{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(230,237,240,.8)
}

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

.brand img
{
    width:170px;
    height:auto
}

.navlinks
{
    display:flex;
    align-items:center;
    gap:6px;
    list-style:none;
    margin:0;
    padding:0
}

.navlinks a
{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    font-weight:750;
    font-size:.93rem
}

.navlinks a:hover
{
    background:#f2f8fa;
    color:var(--purple)
}

.navcta
{
    background:var(--purple)!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(102,54,168,.2)
}

.menu
{
    display:none;
    border:0;
    background:none;
    font-size:1.6rem
}

.hero
{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:linear-gradient(120deg,rgba(23,21,43,.90),rgba(69,33,127,.72)),url('../images/kitchen.jpg') center/cover
}

.hero:after
{
    content:"";
    position:absolute;
    inset:auto -10% -130px auto;
    width:520px;
    height:260px;
    background:var(--aqua);
    border-radius:50%;
    opacity:.20;
    filter:blur(5px)
}

.hero .container
{
    position:relative;
    z-index:1
}

.eyebrow
{
    display:inline-flex;
    gap:8px;
    align-items:center;
    color:#baf5fb;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:800;
    font-size:.78rem
}

.hero h1
{
    font-size:clamp(2.7rem,6vw,5.5rem);
    line-height:1.03;
    letter-spacing:-.045em;
    color:#fff;
    max-width:780px;
    margin:18px 0
}

.hero p
{
    color:#eef5f6;
    font-size:1.18rem;
    max-width:650px
}

.actions
{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px
}

.btn
{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 22px;
    border-radius:999px;
    font-weight:800;
    border:1px solid transparent;
    transition:.2s
}

.btn-primary
{
    background:var(--aqua);
    color:#092f35
}

.btn-primary:hover
{
    transform:translateY(-2px);
    background:#54d5e2
}

.btn-light
{
    background:#fff;
    color:var(--ink)
}

.btn-outline
{
    border-color:#45217f;
    background:#fff
}

.section
{
    padding:88px 0
}

.section.alt
{
    background:var(--cream)
}

.section-head
{
    max-width:700px;
    margin-bottom:42px
}

.kicker
{
    color:var(--aqua-dark);
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.78rem
}

.section h2
{
    font-size:clamp(2rem,4vw,3.2rem);
    line-height:1.1;
    letter-spacing:-.035em;
    margin:10px 0 15px
}

.section-head p
{
    color:var(--muted);
    font-size:1.08rem
}

.grid
{
    display:grid;
    gap:24px
}

.grid-3
{
    grid-template-columns:repeat(3,1fr)
}

.grid-2
{
    grid-template-columns:repeat(2,1fr)
}

.card
{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow)
}

.card-body
{
    padding:28px
}

.card img
{
    width:100%;
    height:240px;
    object-fit:cover
}

.card h3
{
    font-size:1.3rem;
    margin:0 0 9px
}

.card p
{
    color:var(--muted);
    margin:0
}

.icon
{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#e8fbfd;
    color:var(--aqua-dark);
    font-size:1.35rem;
    margin-bottom:18px
}

.split
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center
}

.split img
{
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    width:100%;
    max-height:570px;
    object-fit:cover
}

.checklist
{
    display:grid;
    gap:11px;
    margin:25px 0 0;
    padding:0;
    list-style:none
}

.checklist li
{
    display:flex;
    gap:10px;
    align-items:flex-start
}

.checklist li:before
{
    content:"\2713 ";
    display:grid;
    place-items:center;
    flex:none;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#e7fafc;
    color:var(--aqua-dark);
    font-weight:900
}

.band
{
    background:linear-gradient(115deg,var(--purple-dark),var(--purple));
    color:#fff;
    border-radius:30px;
    padding:52px
}

.band p
{
    color:#e8e3f2;
    max-width:720px
}

.stats
{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:30px
}

.stat
{
    padding:20px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
    background:rgba(255,255,255,.08)
}

.stat strong
{
    font-size:1.05rem;
    display:block
}

.stat span
{
    font-size:.9rem;
    color:#ddd7ea
}

.quote
{
    background:var(--ink);
    color:#fff;
    border-radius:30px;
    padding:55px
}

.quote p
{
    font-size:clamp(1.5rem,3vw,2.4rem);
    line-height:1.25;
    margin:0 0 22px
}

.quote small
{
    color:#b8bec8
}

.contact
{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:35px
}

.contact-info
{
    background:var(--cream);
    border-radius:26px;
    padding:34px
}

.contact-info h3
{
    margin-top:0
}

.contact-item
{
    margin:22px 0
}

.contact-item span
{
    display:block;
    color:var(--muted);
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:800
}

.contact-item a
{
    font-size:1.1rem;
    font-weight:750
}

.form
{
    padding:34px;
    border:1px solid var(--line);
    border-radius:26px;
    box-shadow:var(--shadow)
}

.fields
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}

.field.full
{
    grid-column:1/-1
}

.field label
{
    display:block;
    font-size:.88rem;
    font-weight:750;
    margin-bottom:6px
}

.field input,.field textarea
{
    width:100%;
    padding:14px 15px;
    border:1px solid #d8e1e4;
    border-radius:12px;
    font:inherit;
    outline:none
}

.field textarea
{
    min-height:150px;
    resize:vertical
}

.field input:focus,.field textarea:focus
{
    border-color:var(--aqua);
    box-shadow:0 0 0 4px rgba(36,191,209,.12)
}

.footer
{
    background:#0f0e1c;
    color:#fff;
    padding:55px 0 25px
}

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

.footer p,.footer li
{
    color:#bfc4ce
}

.footer ul
{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:8px
}

.footer-bottom
{
    border-top:1px solid #2b2936;
    margin-top:35px;
    padding-top:18px;
    color:#8f96a2;
    font-size:.85rem;
    display:flex;
    justify-content:space-between
}

.page-hero
{
    padding:105px 0 85px;
    background:linear-gradient(120deg,#f0fbfc,#f7f2ff)
}

.page-hero h1
{
    font-size:clamp(2.6rem,5vw,4.4rem);
    line-height:1.05;
    letter-spacing:-.04em;
    margin:12px 0
}

.page-hero p
{
    max-width:720px;
    color:var(--muted);
    font-size:1.1rem
}

.gallery
{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:14px
}

.gallery img
{
    width:100%;
    height:230px;
    object-fit:cover;
    border-radius:16px
}

.gallery img:first-child
{
    height:474px;
    grid-row:span 2
}

.team-card
{
    text-align:center
}

.team-card img
{
    height:320px;
    object-fit:cover
}

.notice
{
    padding:14px 18px;
    border-left:4px solid var(--aqua);
    background:#effbfc;
    border-radius:8px;
    color:#3e5d63
}

.anchor
{
    scroll-margin-top:110px
}

@media(max-width:900px)
{
    .navlinks
    {
        display:none;
        position:absolute;
        top:82px;
        left:0;
        right:0;
        background:#fff;
        padding:14px 20px 20px;
        border-bottom:1px solid var(--line);
        box-shadow:0 15px 30px rgba(0,0,0,.08);
        flex-direction:column;
        align-items:stretch
    }
    .navlinks.open
    {
        display:flex
    }
    .menu
    {
        display:block
    }
    .grid-3
    {
        grid-template-columns:1fr
    }
    .grid-2,.split,.contact
    {
        grid-template-columns:1fr
    }
    .hero
    {
        min-height:590px
    }
    .footer-grid
    {
        grid-template-columns:1fr 1fr
    }
    .gallery
    {
        grid-template-columns:1fr 1fr
    }
    .gallery img:first-child
    {
        grid-row:auto;
        height:230px
    }
    .fields
    {
        grid-template-columns:1fr
    }
    .field.full
    {
        grid-column:auto
    }
}

@media(max-width:560px)
{
    .container
    {
        width:min(100% - 28px,1160px)
    }
    .topbar .container
    {
        justify-content:center;
        text-align:center
    }
    .topbar .secondary
    {
        display:none
    }
    .brand img
    {
        width:145px
    }
    .hero
    {
        min-height:620px
    }
    .hero h1
    {
        font-size:2.8rem
    }
    .section
    {
        padding:65px 0
    }
    .band,.quote
    {
        padding:30px 24px
    }
    .stats
    {
        grid-template-columns:1fr
    }
    .footer-grid
    {
        grid-template-columns:1fr
    }
    .footer-bottom
    {
        display:block
    }
    .footer-bottom span
    {
        display:block;
        margin-top:8px
    }
    .gallery
    {
        grid-template-columns:1fr
    }
}