*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

/* ===========================
   FONT — Inter (self-hosted variable font, latin subset)
=========================== */

@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:400 700;
    font-display:swap;
    src:url('fonts/inter-var-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================
   DESIGN TOKENS
=========================== */

:root{
    --brand:#0077c8;       /* primary brand blue        */
    --brand-dark:#005ea1;  /* hover / active            */
    --brand-ink:#0068b0;   /* brand blue for small text on tinted bg (WCAG AA) */
    --ink:#0b2341;         /* headings                  */
    --surface:#eef6fc;     /* tinted section background */
    --radius-sm:10px;      /* pill buttons              */
    --radius:16px;         /* inputs                    */
    --radius-lg:24px;      /* cards, form, images       */
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: #f5f8fb;
    color: #444;
    line-height: 1.7;
    margin: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}
/* ===========================
   ACCESSIBILITY
=========================== */

/* Skip link — visually hidden until keyboard-focused */
.skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:200;
    background:var(--brand-dark);
    color:#fff;
    padding:12px 22px;
    border-radius:0 0 10px 0;
    text-decoration:none;
    font-weight:600;
}

.skip-link:focus{
    left:0;
}

/* Visible keyboard focus on interactive elements
   (inputs keep their existing border+shadow focus style) */
a:focus-visible,
button:focus-visible{
    outline:3px solid var(--brand);
    outline-offset:2px;
    border-radius:4px;
}

/* ===========================
   HEADER
=========================== */

header{
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    padding:16px 0;
    border-bottom:1px solid #eef2f5;
    position:sticky;
    top:0;
    z-index:100;
}

/* ===========================
   NAVBAR
=========================== */

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:64px;
}

/* ===========================
   LOGO
=========================== */

.logo-link{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo{
    width:220px;
    height:auto;
    display:block;
}

/* ===========================
   NAVIGATION
=========================== */

nav ul{
    display:flex;
    align-items:center;
    gap:40px;
    list-style:none;
    margin:0;
    padding:0;
}

nav ul li{
    margin:0;
    padding:0;
}

nav ul li a{

    color:#3d4652;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

    transition:.3s;

    position:relative;

    padding:8px 0;

}

nav ul li a:hover{

    color:var(--brand);

}

nav ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--brand);

    transition:.3s;

}

nav ul li a:hover::after{

    width:100%;

}

nav ul li a.nav-cta{
    color:var(--brand);
    font-weight:600;
}

/* Hamburger — hidden on desktop, shown ≤768px */
.nav-toggle{
    display:none;
    background:none;
    border:none;
    padding:8px;
    border-radius:8px;
    color:var(--ink);
    cursor:pointer;
}

.nav-toggle svg{
    width:26px;
    height:26px;
    display:block;
}

.hero{
    background:var(--surface);
    padding:60px 0 150px;
    overflow:hidden;
    position:relative;
}

.hero-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

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

.hero-subtitle{
    color:var(--brand-ink); /* 15px text on tinted bg needs the darker blue for AA */
    font-weight:700;
    font-size:15px;
    letter-spacing:1.5px;
}

.hero h1{
    font-size:clamp(40px, 5.5vw, 64px);
    line-height:1.12;
    margin:20px 0;
    color:var(--ink);
}

.hero h1 span{
    color:var(--brand);
}

.hero-line{
    width:80px;
    height:4px;
    background:var(--brand);
    border-radius:5px;
    margin-bottom:30px;
}

.hero p{
    max-width:480px;
    font-size:19px;
    color:#555;
    line-height:1.8;
    margin-bottom:40px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-bottom:50px;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--brand);
    color:white;
    padding:16px 28px;
    border-radius:var(--radius-sm);
    text-decoration:none;
    font-weight:600;
    box-shadow:0 8px 20px rgba(0,119,200,.30);
    transition:.3s;
}

.btn-primary:hover{
    background:var(--brand-dark);
}

.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:2px solid var(--brand);
    color:var(--brand);
    background:#fff;
    padding:14px 28px;
    border-radius:var(--radius-sm);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-secondary:hover{
    background:var(--brand);
    color:white;
}

.btn-primary svg,
.btn-secondary svg{
    width:18px;
    height:18px;
    flex-shrink:0;
}

.hero-features{
    display:flex;
    flex-wrap:wrap;
    color:var(--ink);
    font-weight:600;
    font-size:15px;
}

.hero-features > div{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:4px 24px;
}

.hero-features > div:first-child{
    padding-left:0;
}

.hero-features > div + div{
    border-left:1px solid rgba(11,35,65,.15);
}

.hero-features svg{
    width:22px;
    height:22px;
    color:var(--brand);
    flex-shrink:0;
}

.hero-image{
    flex:1;
    min-height:480px;
}

/* Full-bleed photo: anchored to the hero's top-right, soft-fades into the
   hero background on the left, cut by the wave at the bottom. */
.hero-image img{
    position:absolute;
    top:0;
    right:0;
    width:min(52vw, 1000px);
    height:100%;
    object-fit:cover;
    object-position:60% 30%;
    -webkit-mask-image:linear-gradient(to left, #000 72%, transparent 100%);
    mask-image:linear-gradient(to left, #000 72%, transparent 100%);
}

/* Wave divider between the hero and the next section */
.hero-wave{
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    line-height:0;
    z-index:2;
    pointer-events:none;
}

.hero-wave svg{
    display:block;
    width:100%;
    height:100px;
}

.btn{
    background:var(--brand);
    color:#fff;
    padding:16px 35px;
    border-radius:var(--radius);
    text-decoration:none;
    border:none;
    cursor:pointer;
    font-size:16px;
    transition:.3s;
}

.btn:hover{
    background:var(--brand-dark);
}

section {
    padding: 80px 0;
}

/* Anchor targets must clear the sticky header */
section[id]{
    scroll-margin-top:140px;
}

section h2 {
    text-align: center;
    color: var(--ink);
    margin-bottom: 50px;
    font-size: 38px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.card{
    background:#fff;
    padding:35px;
    border-radius:var(--radius-lg);
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.card:hover{
    transform:translateY(-8px);
}

.card-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--surface);
    color:var(--brand);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}

.card-icon svg{
    width:26px;
    height:26px;
}

.card h3{
    color:var(--ink);
    margin-bottom:15px;
}

.about{
    background:#f9fbfc;
}

.about p{
    max-width:800px;
    margin:auto;
    text-align:center;
    font-size:18px;
}

.appointment{
    background:var(--surface);
}

form{
    background: white;
    max-width: 800px;
    margin: auto;
    padding: 50px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.form-group{
    margin-bottom:25px;
}

label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
}

input,
select,
textarea {
    width: 100%;
    padding: 18px;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    font-size: 16px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0,119,200,.15);
}

textarea{
    resize:vertical;
}

/* Inline validation (script.js) */

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{
    border-color:#c0392b;
}

.field-error{
    color:#c0392b;
    font-size:14px;
    margin:-12px 0 0;
}

.form-status{
    padding:14px 18px;
    border-radius:var(--radius);
    margin-bottom:25px;
    font-weight:500;
}

.form-status.is-error{
    background:#fdf0ef;
    color:#c0392b;
    border:1px solid #f2c9c4;
}

.form-success{
    text-align:center;
    padding:20px 0;
}

.form-success svg{
    width:56px;
    height:56px;
    color:#1e8e5a;
    margin-bottom:12px;
}

.form-success h3{
    color:var(--ink);
    margin-bottom:10px;
}

.form-success a{
    color:var(--brand);
}

.form-privacy{
    margin-top:18px;
    font-size:14px;
    color:#666; /* #777 was 4.48:1 on white — just under AA's 4.5:1 */
}

button {
    background: var(--brand);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: var(--radius);
    font-size: 18px;
    cursor: pointer;
    transition: .3s;
}

button:hover {
    background: var(--brand-dark);
}

button:disabled {
    background: #9bbdd4;
    cursor: default;
}

.contact{
    background:#f9fbfc;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 30px;
}

.contact-card {
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.contact-card h3 {
    color: var(--ink);
    margin-bottom: 25px;
}

.contact-card p{
    margin-bottom:20px;
}

.contact-card a{
    color:var(--brand);
    text-decoration:none;
}

.map-card{
    margin-top:40px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    line-height:0;
}

.map-card iframe{
    width:100%;
    height:340px;
    border:0;
}

.emergency-card {
    margin-top: 40px;
    background: #fff4f4;
    border-left: 6px solid #e74c3c;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.emergency-card h3 {
    color: #e74c3c;
}

.emergency-card a{
    color:#d9534f;
    text-decoration:none;
    font-weight:600;
}

footer {
    background: white;
    padding: 30px 0;
    text-align: center;
    color: #666;
    border-top: 1px solid #eee;
}

.footer-nav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 28px;
    list-style:none;
    margin:0 0 16px;
    padding:0;
}

.footer-nav a{
    color:#3d4652;
    text-decoration:none;
    font-size:15px;
}

.footer-nav a:hover{
    color:var(--brand);
}

.hidden-field{
    display:none;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
    }

    .card:hover{
        transform:none;
    }

}



/* ==========================================
   MOBILE (Phones & Small Tablets)
========================================== */

@media screen and (max-width: 768px){

    .container{
        width:92%;
    }

    /* Header — hamburger nav */

    header{
        padding:10px 0;
    }

    .navbar{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:0;
        min-height:0;
        flex-wrap:wrap;
    }

    .logo{
        width:180px;
    }

    .nav-toggle{
        display:block;
    }

    nav{
        display:none;
        width:100%;
    }

    header.nav-open nav{
        display:block;
    }

    nav ul{
        flex-direction:column;
        align-items:center;
        gap:4px;
        padding:10px 0 6px;
    }

    nav ul li{
        width:100%;
        text-align:center;
    }

    nav ul li a{
        font-size:16px;
        display:block;
        padding:10px 0;
    }

    /* Hero */

    .hero{
        padding:0 0 90px;
    }

    .hero-container{
        flex-direction:column;
        gap:30px;
        text-align:center;
    }

    .hero-content{
        order:2;
    }

    .hero-image{
        order:1;
        width:100%;
        min-height:0;
    }

    .hero-image img{
        position:static;
        width:100%;
        height:auto;
        max-height:340px;
        -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
        mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
    }

    .hero-wave svg{
        height:50px;
    }

    .hero h1{
        line-height:1.15;
    }

    .hero-subtitle{
        font-size:16px;
    }

    .hero-line{
        margin:25px auto;
    }

    .hero p{
        max-width:100%;
        font-size:19px;
        line-height:1.7;
        margin-bottom:30px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:15px;
        margin-bottom:35px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }

    .hero-features{
        justify-content:center;
        gap:14px;
        font-size:15px;
    }

    .hero-features > div{
        padding:4px 0;
    }

    .hero-features > div + div{
        border-left:none;
    }

    /* Sections */

    section{
        padding:60px 0;
    }

    section h2{
        font-size:30px;
        margin-bottom:35px;
    }

    /* Cards */

    .cards{
        grid-template-columns:1fr;
    }

    .card{
        padding:28px;
    }

    /* About */

    .about p{
        font-size:17px;
    }

    /* Form */

    form{
        padding:30px 22px;
    }

    label{
        font-size:15px;
    }

    input,
    select,
    textarea{
        font-size:16px;
        padding:16px;
    }

    button{
        width:100%;
        padding:18px;
    }

    /* Contact */

    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-card,
    .emergency-card{
        padding:28px;
    }

    .map-card iframe{
        height:260px;
    }

    /* Footer */

    footer{
        font-size:14px;
    }

}