/* ========= Theme tokens ========= */
:root{
    --ink:#0b0b0c; --bg:#ffffff; --subtle:#6b7280; --line:#e5e7eb;
    --accent:#0a2240; --accent-2:#c69a40; --focus:#2dd4bf; --max:72rem;

    /* Quote Form (Lightbox) */
    --qf-text:#0b0f17; --qf-muted:#64748b;
    --qf-panel:#ffffff; --qf-panel-border:#e5e7eb;
    --qf-input-bg:#ffffff; --qf-input-border:#cbd5e1;
    --qf-accent:#0a66ff; --qf-accent2:#9b7bff; --qf-ring:rgba(10,102,255,.35);
    --qf-error:#ef4444; --qf-errorRing:rgba(239,68,68,.18);
    --qf-shadow:0 22px 60px rgba(0,0,0,.22);
}
[data-theme="dark"]{
    --ink:#e5e7eb; --bg:#0b1220; --subtle:#93a0b3; --line:#1f2937;
    --accent:#60a5fa; --accent-2:#a78bfa; --focus:#22d3ee;

    --qf-text:#e5e7eb; --qf-muted:#93a0b3;
    --qf-panel:#111827; --qf-panel-border:#1f2937;
    --qf-input-bg:#0c1320; --qf-input-border:#263246;
    --qf-accent:#60a5fa; --qf-accent2:#a78bfa; --qf-ring:rgba(96,165,250,.55);
    --qf-shadow:0 22px 60px rgba(0,0,0,.55);
}

/* ========= Base ========= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,"Noto Sans";background:var(--bg);color:var(--ink);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
a,button,input,select,textarea{font:inherit}
.wrap{max-width:var(--max);margin-inline:auto;padding:clamp(1rem,2vw,2rem)}

/* Accessibility */
.skip-link{position:absolute;inset:auto auto auto -9999px;overflow:hidden;white-space:nowrap}
.skip-link:focus{inset:1rem auto auto 1rem;background:#fff;border:2px solid var(--focus);padding:.5rem .75rem;z-index:1000}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ========= Header & Nav ========= */
header{
    /*position:sticky;top:0;background:color-mix(in oklab, var(--bg), #000 3%);*/
    /*border-bottom:1px solid var(--line);*/
    z-index:20}
.nav{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.brand{display:flex;align-items:flex-end;gap:.75rem;text-decoration:none}
.brand img{height:42px;width:auto;}
.brand__name{font-weight:800;letter-spacing:.2px;margin-left:-1px;}
.tel--container {padding-left:16px}
.tel{margin-left:auto;margin-right:.5rem;text-decoration:none;font-weight:700;white-space:nowrap;display:inline-block;line-height:48px;cursor:default}
.nav a:not(.brand):not(.btn--primary):not(.tel):hover{text-decoration:underline}
.tel--big{font-size:clamp(1.05rem,2.6vw,1.35rem);font-weight:800;letter-spacing:.01em;color:var(--accent)}
#menu { width: calc(100% - 50px); margin: 0 auto; }
@media(min-width:950px){
    header { display:flex }
    .tel{margin-left:0}
    #menu { width:auto; margin:auto; }
}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:.625rem;border:2px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{filter:brightness(1.05)}
.btn--outline{background:transparent;border-color:var(--accent);color:var(--accent)}

/* Mobile menu */
.menu-toggle{background:transparent;border:2px solid var(--ink);border-radius:.5rem;padding:.5rem; color:var(--ink)}
#menu{display:none}
@media(min-width:950px){.menu-toggle{display:none}#menu{display:block!important}}
.navlist{list-style:none;display:flex;gap:1rem;margin:0;padding:0;flex-wrap:wrap}
@media(max-width:949px){
    #menu{display:none}
    #menu[data-open="true"]{display:block;max-height:none;background:color-mix(in oklab, var(--bg), #000 5%);
        backdrop-filter:saturate(180%) blur(6px); border:2px solid color-mix(in oklab, var(--accent), #000 20%);
        margin:0 25px 0; margin-top:clamp(0.125em,0.25vw,1rem); border-width:0 2px 2px;}
    .navlist{flex-direction:column;gap:.5rem;text-align:center}
    .navlist .btn,.navlist .tel--big{display:block;width:100%}
    .navlist li:last-child .btn {margin-bottom:26px;display:inline-block;width:auto;margin-left:10px}
    .tel--container{padding:0 0 5px;}

    .calendar {
        display: block !important;
    }
    .cal-dow, .date-cell.outside, .date-num { display: none; }
    .date-cell {
        width: 100%;
    }
    .date-cell:before {
        content: attr(aria-label);
        margin: .42em 0 0 .1em
    }

}

/* ========= Hero ========= */
.hero{padding-block:clamp(3.5rem,8vw,7rem); position:relative; overflow:auto; display:flex;}
.hero-bg{position:absolute;background:url("/assets/images/back-glass.jpg") center/cover no-repeat; width:100%; left:0; height:100%; top:0;}
.hero-bg::before{background:radial-gradient(1200px 500px at 40% -25%, color-mix(in oklab, var(--accent-2), #fff 80%), color-mix(in oklab, var(--bg), #fff 0%)); width:100%; height:100%; left:0; top:0; display:inline-block; z-index:1; content:''; position:absolute; opacity:.8}
.hero-bg::after{background:radial-gradient(1200px 500px at 40% -25%, color-mix(in oklab, var(--accent-2), #000 15%), color-mix(in oklab, var(--bg), #000 5%)); width:100%; height:100%; z-index:2; position:absolute; left:0; top:0; display:inline-block; content:''; opacity:.2}
.hero .wrap, .hero .wrap > * {z-index:8;}
.hero .wrap { width:100%; }
.hero h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.1;margin:0 0 .5rem; text-shadow:-3px 1px 2px color-mix(in oklab, var(--bg), #000 2%); color:var(--ink);}
.hero p{max-width:60ch;margin:.5rem 0 2rem;font-size:1.25em;letter-spacing:-0.005em;text-shadow:-1.5px 1px 0 color-mix(in oklab, var(--bg), #000 2%);}

/* ========= Sections ========= */
section{padding-block:clamp(2.25rem,6vw,5rem)}
.eyebrow{color:var(--subtle);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.title{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;margin:.25rem 0 1rem}

/* Services grid */
.grid{display:grid;gap:1.25rem}
.grid-4{grid-template-columns:1fr}
@media(min-width:950px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--line);border-radius:1rem;padding:1rem;background:color-mix(in oklab, var(--bg), #000 3%)}
.card h3{margin:.25rem 0 .5rem}
.muted{color:var(--subtle)}

/* About */
.about{background:color-mix(in oklab, var(--bg), #000 4%);border-block:1px solid var(--line)}

/* Footer */
footer{background:color-mix(in oklab, var(--accent), #000 35%);color:#cfd8e3}
footer a{color:#e5e7eb}

/* ========= Lightbox (Quote Form) ========= */
.no-scroll{overflow:hidden}
.get-quote{cursor:pointer}
.lightbox{position:fixed; inset:0; display:grid; place-items:center; background:rgba(7,10,16,.45); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease; z-index:1000;}
[data-theme="light"] .lightbox{ background:rgba(7,10,16,.35); }
.lightbox.is-open{opacity:1; visibility:visible; pointer-events:auto}
.lightbox__backdrop{position:absolute; inset:0}
.lightbox__panel{position:relative; width:min(720px, calc(100vw - 28px)); border-radius:14px; background:var(--qf-panel); border:1px solid var(--qf-panel-border); padding:22px 20px; color:var(--qf-text); box-shadow:var(--qf-shadow);}
.lightbox__close{position:absolute; top:6px; right:24px; inline-size:44px; block-size:44px; border:0; background:transparent; color:var(--qf-muted); font-size:22px; cursor:pointer;}
.lightbox__close:focus-visible{outline:3px solid var(--qf-ring); outline-offset:2px}

/* Stepper — 90px narrower */
.stepper{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; list-style:none; padding:0; margin:0 auto 12px; width:calc(100% - 90px);}
.step{font-size:12px; color:var(--qf-muted); text-align:center; position:relative}
.step.is-current{color:var(--qf-text)}
.step.is-clickable{cursor:pointer}
.step.is-locked{cursor:default; opacity:.75}
.step__label{display:none}
.step__badge{display:none; width:8px; height:8px; border-radius:999px; margin-left:6px; vertical-align:middle; background:var(--qf-error); box-shadow:0 0 0 3px var(--qf-errorRing);}
.step::before{content:""; display:inline-block; width:10px; height:10px; border-radius:999px; background:var(--qf-input-border); vertical-align:middle;}
.step.is-current::before{ box-shadow:0 0 0 3px var(--qf-ring); background:#6b7280; }
.step.has-error::before{ background:var(--qf-error); box-shadow:0 0 0 3px var(--qf-errorRing); }
.progress-track{height:4px; background:var(--qf-input-border); border-radius:999px; overflow:hidden; margin:0 auto 10px; width:calc(100% - 90px);}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--qf-accent),var(--qf-accent2)); transition:width .25s ease}
@media (min-width:900px){
    .step__label{display:inline}
    .step.has-error::before{ background:var(--qf-input-border); box-shadow:none; }
    .step.has-error .step__badge{display:inline-block}
}

/* Form structure */
.form-stages{list-style:none; margin:0; padding:0; position:relative; min-height:340px}
.stage{display:none} .stage.active{display:block}
h2.qf{margin:4px 4px 12px;}
.qf-label{display:block; font-weight:600; margin-bottom:6px; color:var(--qf-text)}
.qf-input{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--qf-input-border); background:var(--qf-input-bg); color:var(--qf-text)}
fieldset{border:0; padding:0; margin:0}
.radio-grid{display:grid; gap:12px}
.radio{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--qf-input-border); border-radius:12px; background:var(--qf-input-bg); cursor:pointer}
.row{display:grid; gap:10px; margin-block:10px}
.actions-row{display:flex; justify-content:space-between; align-items:center; margin-top:12px}
.actions-row.single-right{justify-content:flex-end}
.qf-btn{border:1px solid var(--qf-input-border); background:transparent; color:var(--qf-text); padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer; transition:transform .08s ease}
.qf-btn:hover{transform:translateY(-1px)} .qf-btn:active{transform:translateY(0)}
.qf-btn.primary{background:linear-gradient(135deg,var(--qf-accent),var(--qf-accent2)); color:#0b0f17; border:0; box-shadow:0 6px 20px rgba(0,0,0,.15)}
[data-theme="dark"] .qf-btn.primary{ color:#0b0f17; box-shadow:0 6px 20px rgba(96,165,250,.25)}
.qf-error{color:#fca5a5; font-size:13px}
.qf-helper{color:var(--qf-muted); font-size:13px}
.qf-toast{position:fixed; right:16px; bottom:16px; background:var(--qf-panel); border:1px solid var(--qf-input-border); padding:10px 12px; border-radius:10px; opacity:0; transform:translateY(8px); transition:all .2s ease; color:var(--qf-text)}
.qf-toast.show{opacity:1; transform:translateY(0)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{display:none !important}
.thanks-panel{margin-top:12px}
.is-hidden{display:none !important}

/* Lightbox fade + subtle panel lift — 750ms ease */
.lightbox {
    position: fixed; inset: 0; display: grid; place-items: center;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 750ms ease, visibility 0s linear 750ms;
    z-index: 1000;
}
.lightbox[aria-hidden="false"] { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 750ms ease; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity 750ms ease; }
.lightbox[aria-hidden="false"] .lightbox__backdrop { opacity: 1; }
.lightbox__panel { position: relative; width: min(720px, 92vw); max-height: 90vh; border-radius: .75rem; background: var(--panel, #fff); box-shadow: 0 20px 60px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px) scale(.985); transition: opacity 750ms ease, transform 750ms ease; }
.lightbox[aria-hidden="false"] .lightbox__panel { opacity: 1; transform: translateY(0) scale(1); }

/* Sequential fade for first-visit inputs */
@media (prefers-reduced-motion: no-preference){
    .fade-seq{ opacity:0; transform:translateY(6px); transition:opacity .24s ease, transform .24s ease; }
    .fade-seq.is-visible{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
    .fade-seq{ opacity:1; transform:none; }
}

/* ========= Gallery ========= */
#gallery{max-width:var(--max);margin-inline:auto;padding:clamp(1rem,2vw,2rem);display:grid;gap:12px}
#main-image-container{aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;background:color-mix(in oklab, var(--bg), #000 3%);display:flex;align-items:center;justify-content:center}
#main-image{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .2s ease}
#main-image.is-fading{opacity:.15}
#thumbnails{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.thumbnail{width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid transparent;cursor:pointer}
.thumbnail:hover{filter:brightness(1.05)}
.thumbnail.is-active,.thumbnail[aria-current="true"]{border-color:var(--accent)}
.thumbnail:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:600px){#thumbnails{gap:8px}}

/* Gallery: main image left, thumbs column right */
#gallery{display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:start; gap:14px;}
#main-image-container{aspect-ratio: 16/10;}
#thumbnails{display:flex; flex-direction:column; gap:10px; overflow:visible;}
#thumbnails .thumbnail{aspect-ratio:16/10;}
@media (max-width:900px){
    #gallery{ grid-template-columns:1fr; }
    #main-image-container{ display:none; }
    #thumbnails{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; overflow:visible; }
}

/* Scrollable City radio list on Stage 2 */
#city-group{
    max-height: clamp(160px, 28vh, 320px);
    overflow:auto; padding-right:4px; -webkit-overflow-scrolling: touch;
}

/* ========= Calendar (schedule.html) ========= */
.calendar-wrap { max-width: 1000px; margin: 0 auto; padding: 1.5rem; overflow-x: auto; }
.cal-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem; }
.cal-header h1 { font-size:1.5rem; margin:0; }
.cal-controls { display:flex; gap:.5rem; }
.cal-controls .btn { padding:.5rem .75rem; }

.calendar {
    display: grid; width: 100%;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    border: 1px solid var(--line);
    border-radius: .75rem; overflow: hidden; background: var(--qf-panel);
}
.cal-dow { background: color-mix(in oklab, var(--bg), #000 6%); color: var(--subtle); font-weight: 600; padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: center; font-size: .9rem; }

.date-cell { min-height: 8.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .5rem; display:flex; flex-direction:column; gap:.35rem; position:relative; background: var(--bg); }
.date-cell:nth-child(7n) { border-right: none; }
.date-num { font-size: .9rem; font-weight: 700; color: var(--subtle); position: absolute; top: .4rem; right: .5rem; }

.announce { display:flex; flex-direction:column; gap:.15rem; padding-top:.2rem; padding-right:1.75rem; line-height:1.1; min-height: calc(2 * 1.1em); max-height: calc(2 * 1.1em); overflow:hidden; }
.announce span { display:block; white-space:normal; overflow-wrap:anywhere; word-break:break-word; min-height:1.1em; }

.slot-row { margin-top:auto; display:grid; grid-template-columns:1fr; gap:.4rem; }
.time-slot { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:.5rem; padding:.45rem .6rem; font-size:.9rem; cursor:pointer; user-select:none; background: var(--bg); transition: transform .08s ease, box-shadow .08s ease, background .2s ease; }
.time-slot:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.time-slot[aria-pressed="true"] { outline:2px solid var(--accent); background: color-mix(in oklab, var(--accent), #fff 93%); }
.time-slot[disabled], .past .time-slot { opacity:.45; cursor:not-allowed; filter:grayscale(1); }

.past { background: linear-gradient(0deg, rgba(0,0,0,.04), rgba(0,0,0,.04)), var(--bg); color:#9ca3af; }
.past .announce span { color:#9ca3af; }
.outside { background: #fafafa; color:#a1a1aa; }
.outside .time-slot { display:none; }

.date-cell.is-active { outline:2px solid var(--accent); outline-offset:-2px; background: color-mix(in oklab, var(--accent), #fff 95%); }

.legend { display:flex; gap:1rem; align-items:center; margin-top:1rem; color:var(--subtle); font-size:.9rem; }
.legend .pill { width:1rem; height:1rem; border-radius:.25rem; border:1px solid var(--line); }
.pill-avail{ background:#fff; } .pill-past{ background:rgba(0,0,0,.05);} .pill-off{ background:#fafafa;}