/* ═══════════════════════════════════════════════════════════
   PRO GIGS AUDIO VISUAL LIMITED
   Palette (strict): #027ce6 · #999999 · #FFFFFF · #000000
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── The only four brand colours ── */
    --blue:   #027CE6;
    --grey:   #999999;
    --white:  #FFFFFF;
    --black:  #000000;

    /* ── Derived tints (same hues, no new colours) ── */
    /* NOTE: no second blue exists. Hover states use opacity/brightness
       on the exact brand blue so #027CE6 is the only blue on the site. */
    --blue-06: rgba(2,124,230,0.06);
    --blue-12: rgba(2,124,230,0.12);
    --blue-20: rgba(2,124,230,0.20);
    --blue-35: rgba(2,124,230,0.35);

    --ink-1:  #0A0A0A;                     /* near-black surfaces */
    --ink-2:  #121212;
    --ink-3:  #1A1A1A;
    --line-d: rgba(255,255,255,0.10);      /* border on dark */
    --line-l: rgba(0,0,0,0.10);            /* border on light */
    --wash:   #F5F5F5;                     /* light grey section bg */

    --grey-t: #6E6E6E;                     /* grey darkened for body text on white */

    --f-head: 'Anton', 'Arial Narrow', sans-serif;
    --f-body: 'DM Sans', 'Segoe UI', sans-serif;

    --r:   6px;
    --r-l: 14px;
    --sh:   0 6px 28px rgba(0,0,0,0.10);
    --sh-d: 0 18px 60px rgba(0,0,0,0.55);
    --t:   0.32s cubic-bezier(0.4,0,0.2,1);

    /* Navbar logo height — change this one value to resize */
    --logo-h: 88px;
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; scroll-padding-top:80px; }
html, body { overflow-x:hidden; width:100%; }
body {
    font-family:var(--f-body); background:var(--white); color:var(--black);
    line-height:1.7; -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
address { font-style:normal; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

.skip-link {
    position:absolute; left:-9999px; top:0; z-index:2000;
    background:var(--blue); color:var(--white); padding:.8rem 1.4rem;
    font-weight:700; border-radius:0 0 var(--r) 0;
}
.skip-link:focus { left:0; }

:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

/* ── SHARED ────────────────────────────────────────────── */
.wrap { max-width:1220px; margin:0 auto; padding:0 5%; }
.sec  { padding:6rem 0; }

.eyebrow {
    display:inline-block; font-size:.72rem; font-weight:700;
    letter-spacing:.22em; text-transform:uppercase;
    color:var(--blue); margin-bottom:.9rem;
}
.eyebrow.light { color:var(--blue); }

h1, h2, h3, .svc-n, .a-badge-num, .mini-stats strong {
    font-family:var(--f-head); font-weight:400;
    letter-spacing:.01em; line-height:1.05;
    text-transform:uppercase;
}

.sec-head { max-width:640px; margin:0 auto 3.5rem; text-align:center; }
.sec-head h2 { font-size:clamp(2rem,4.4vw,3.4rem); margin-bottom:.9rem; }
.sec-sub { color:var(--grey-t); font-size:1rem; }

/* ── BUTTONS ───────────────────────────────────────────── */
.btn-solid {
    display:inline-block; padding:.95rem 2.2rem;
    background:var(--blue); color:var(--white);
    font-weight:700; font-size:.9rem; letter-spacing:.06em;
    text-transform:uppercase; border-radius:var(--r);
    transition:background var(--t), transform var(--t), box-shadow var(--t);
    box-shadow:0 6px 22px var(--blue-35);
}
.btn-solid:hover { filter:brightness(0.88); transform:translateY(-2px); box-shadow:0 10px 30px var(--blue-35); }

.btn-line {
    display:inline-block; padding:.95rem 2.2rem;
    background:transparent; color:var(--white);
    border:1.5px solid rgba(255,255,255,.45);
    font-weight:700; font-size:.9rem; letter-spacing:.06em;
    text-transform:uppercase; border-radius:var(--r);
    transition:all var(--t);
}
.btn-line:hover { border-color:var(--blue); background:var(--blue); }
.btn-line.dark { color:var(--white); border-color:var(--line-d); }

.btn-nav-cta {
    display:inline-block; padding:.6rem 1.35rem;
    background:var(--blue); color:var(--white);
    font-size:.82rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; border-radius:var(--r);
    transition:background var(--t); white-space:nowrap;
}
.btn-nav-cta:hover { filter:brightness(0.88); }

/* ═══════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════ */
.navbar {
    position:fixed; inset:0 0 auto 0; z-index:1000;
    /* anchors the mobile dropdown */
    display:flex; align-items:center; justify-content:space-between;
    padding:.35rem 5%;   /* slim padding — the logo fills the bar instead */
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-d);
    transition:padding var(--t), background var(--t);
}
.navbar.scrolled { padding:.15rem 5%; background:rgba(0,0,0,.98); border-bottom-color:var(--blue-35); }
.navbar.scrolled .nav-logo { height:calc(var(--logo-h, 88px) * 0.75); }
/* ── LOGO SIZING ──────────────────────────────────────────
   Adjust --logo-h to resize the navbar logo site-wide.
   SVG is vector, so any size stays perfectly sharp.        */
.nav-logo {
    height: var(--logo-h, 88px);
    width: auto;              /* preserves aspect ratio     */
    max-width: none;          /* no cap = no letterboxing   */
    object-fit: contain;
    transition: height var(--t);
}
.logo-link { display:flex; align-items:center; }
.nav-links { display:flex; gap:1.9rem; align-items:center; }
.nav-links a {
    color:rgba(255,255,255,.72); font-size:.85rem; font-weight:500;
    letter-spacing:.03em; position:relative; padding-bottom:3px;
    transition:color var(--t);
}
.nav-links a::after {
    content:''; position:absolute; left:0; bottom:0;
    width:0; height:2px; background:var(--blue); transition:width var(--t);
}
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-cta-mobile { display:none; }

.hamburger { display:none; flex-direction:column; gap:5px; padding:4px; }
.hamburger .bar { width:24px; height:2px; background:var(--white); border-radius:2px; transition:all .3s ease; }
.hamburger.active .bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active .bar:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active .bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.7);
    z-index:998; opacity:0; transition:opacity .3s; pointer-events:none;
}
.nav-overlay.active { opacity:1; pointer-events:all; }

/* ═══════════════════════════════════════════════════════
   1 · HERO CAROUSEL
   ═══════════════════════════════════════════════════════ */
.hero {
    position:relative; min-height:100svh;
    display:flex; align-items:center;
    overflow:hidden; background:var(--black);
    padding:7rem 5% 5rem;
}
.slides { position:absolute; inset:0; }
.slide {
    position:absolute; inset:0;
    opacity:0; transition:opacity 1.1s ease;
    pointer-events:none;
}
.slide.is-active { opacity:1; }
.slide img { width:100%; height:100%; object-fit:cover; }
.slide::after {
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.30) 100%),
      linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 45%);
}
.slide.is-active img { animation:kb 7s ease-out forwards; }
@keyframes kb { from { transform:scale(1); } to { transform:scale(1.07); } }

.hero-inner { position:relative; z-index:3; max-width:760px; }
.hero-kicker {
    display:inline-flex; align-items:center; gap:.6rem;
    background:var(--blue-12); border:1px solid var(--blue-35);
    color:var(--white); padding:.42rem 1rem; border-radius:50px;
    font-size:.72rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; margin-bottom:1.6rem;
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--blue); animation:pl 2s infinite; }
@keyframes pl { 0%,100%{ box-shadow:0 0 0 0 var(--blue-35);} 50%{ box-shadow:0 0 0 8px rgba(2,124,230,0);} }

.hero h1 { font-size:clamp(2.6rem,7.5vw,6rem); color:var(--white); margin-bottom:1.3rem; }
.accent { color:var(--blue); }
.hero-sub {
    font-size:clamp(1rem,1.9vw,1.18rem); color:rgba(255,255,255,.78);
    max-width:560px; margin-bottom:2.4rem; font-weight:300;
}
.hero-btns { display:flex; gap:.9rem; flex-wrap:wrap; }

.nav-arrow {
    position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:46px; height:46px; display:grid; place-items:center;
    background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25);
    color:var(--white); border-radius:50%; transition:all var(--t);
}
.nav-arrow:hover { background:var(--blue); border-color:var(--blue); }
.nav-arrow.prev { left:2.2rem; }
.nav-arrow.next { right:2.2rem; }

.dots {
    position:absolute; bottom:2.2rem; left:5%; z-index:4;
    display:flex; gap:.55rem;
}
.dots button {
    width:34px; height:3px; background:rgba(255,255,255,.3);
    border-radius:2px; transition:background var(--t), width var(--t);
}
.dots button.on { background:var(--blue); width:52px; }

/* ═══════════════════════════════════════════════════════
   2 · CONTACT STRIP
   ═══════════════════════════════════════════════════════ */
.strip { background:var(--blue); }
.strip-in {
    max-width:1220px; margin:0 auto; padding:1.5rem 5%;
    display:grid; grid-template-columns:repeat(3,1fr) auto;
    gap:1.5rem; align-items:center;
}
.strip-item { display:flex; align-items:center; gap:.85rem; color:var(--white); transition:opacity var(--t); }
.strip-item:hover { opacity:.82; }
.s-ico {
    width:40px; height:40px; flex-shrink:0; display:grid; place-items:center;
    background:rgba(255,255,255,.16); border-radius:50%; color:var(--white);
}
.strip-item span:last-child { display:flex; flex-direction:column; font-size:.88rem; line-height:1.45; }
/* Each phone number is its own tap target */
.strip-item span a { color:var(--white); transition:opacity var(--t); }
.strip-item span a:hover { opacity:.8; text-decoration:underline; }
.strip-item strong { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; font-weight:700; }
.strip-cta {
    justify-self:end; padding:.8rem 1.7rem;
    background:var(--white); color:var(--blue);
    font-size:.8rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; border-radius:var(--r);
    transition:background var(--t), color var(--t); white-space:nowrap;
}
.strip-cta:hover { background:var(--black); color:var(--white); }

/* ═══════════════════════════════════════════════════════
   3 · ABOUT
   ═══════════════════════════════════════════════════════ */
.about { background:var(--white); }
.about-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:4.5rem; align-items:center; }

.about-media { position:relative; }
/* 3/4 matches a portrait source, so nothing meaningful is lost */
.a-img-main { width:100%; height:auto; display:block; border-radius:var(--r-l); }
.a-img-sub {
    position:absolute; right:-2rem; bottom:3rem;
    /* Natural, uncropped. 4:3 source is taller than the old wide inset,
       so 50% width keeps the overlap balanced. Adjust % to taste. */
    width:50%; height:auto;
    border-radius:var(--r-l); border:6px solid var(--white); box-shadow:var(--sh);
}
.a-badge {
    position:absolute; left:-1.6rem; top:2rem;
    background:var(--blue); color:var(--white);
    padding:1.2rem 1.4rem; border-radius:var(--r-l);
    box-shadow:0 12px 34px var(--blue-35);
}
.a-badge-num { display:block; font-size:2.6rem; line-height:1; }
.a-badge-txt { display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-top:.35rem; opacity:.9; }

.about-copy h2 { font-size:clamp(2rem,4vw,3.2rem); margin-bottom:1.3rem; }
.about-copy > p { color:var(--grey-t); margin-bottom:1.1rem; }

.tick-list { margin:1.8rem 0; display:grid; gap:.75rem; }
.tick-list li { position:relative; padding-left:2rem; color:var(--black); font-size:.95rem; font-weight:500; }
.tick-list li::before {
    content:''; position:absolute; left:0; top:.42em;
    width:15px; height:15px; border-radius:50%;
    background:var(--blue-12); border:1.5px solid var(--blue);
}
.tick-list li::after {
    content:''; position:absolute; left:5px; top:.72em;
    width:5px; height:8px; border:solid var(--blue);
    border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-3px);
}

.mini-stats {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
    padding:1.7rem 0; margin-bottom:1.8rem;
    border-top:1px solid var(--line-l); border-bottom:1px solid var(--line-l);
}
.mini-stats strong { display:block; font-size:2.4rem; color:var(--blue); line-height:1; }
.mini-stats span { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-t); }

/* ═══════════════════════════════════════════════════════
   4 · SERVICES  (dark)
   ═══════════════════════════════════════════════════════ */
.services { background:var(--black); color:var(--white); position:relative; overflow:hidden; }
.services::before {
    content:''; position:absolute; top:-240px; right:-200px;
    width:640px; height:640px; border-radius:50%;
    background:radial-gradient(circle, var(--blue-20) 0%, transparent 68%);
    pointer-events:none;
}
.services .sec-head h2 { color:var(--white); }
.services .sec-sub { color:var(--grey); }

.svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.2rem; position:relative; z-index:1; }
.svc {
    background:var(--ink-2); border:1px solid var(--line-d);
    border-radius:var(--r-l); padding:2.2rem 2rem;
    position:relative; overflow:hidden; transition:all var(--t);
}
.svc::after {
    content:''; position:absolute; left:0; bottom:0;
    width:0; height:3px; background:var(--blue); transition:width .45s ease;
}
.svc:hover { background:var(--ink-3); border-color:var(--blue-35); transform:translateY(-6px); }
.svc:hover::after { width:100%; }
.svc.featured { border-color:var(--blue-35); background:var(--blue-06); }
.svc-n {
    position:absolute; top:1.4rem; right:1.6rem;
    font-size:2.8rem; color:rgba(255,255,255,.06); line-height:1;
}
.svc-ico {
    width:52px; height:52px; display:grid; place-items:center;
    background:var(--blue-12); border:1px solid var(--blue-35);
    border-radius:var(--r); color:var(--blue); margin-bottom:1.3rem;
}
.svc h3 { font-size:1.3rem; color:var(--white); margin-bottom:.65rem; }
.svc p { color:var(--grey); font-size:.92rem; }

/* ═══════════════════════════════════════════════════════
   5 · INDUSTRIES
   ═══════════════════════════════════════════════════════ */
.industries { background:var(--wash); }
.ind-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.4rem; align-items:start; }
.ind {
    background:var(--white); border-radius:var(--r-l);
    overflow:hidden; box-shadow:var(--sh); transition:transform var(--t), box-shadow var(--t);
}
/* Cards are static: no lift, no zoom — photos display exactly as shot. */
.ind img { width:100%; height:auto; display:block; }

.ind-body { padding:1.6rem 1.5rem 1.8rem; border-top:3px solid var(--blue); }
.ind-body h3 { font-size:1.2rem; margin-bottom:.5rem; }
.ind-body p { color:var(--grey-t); font-size:.9rem; }

/* ═══════════════════════════════════════════════════════
   6 · GALLERY  (dark)
   ═══════════════════════════════════════════════════════ */
.gallery { background:var(--ink-1); color:var(--white); }
.gallery .sec-head h2 { color:var(--white); }
.gallery .sec-sub { color:var(--grey); }

.filters { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:2.4rem; }
.filter {
    padding:.55rem 1.3rem; border-radius:50px;
    border:1px solid var(--line-d); background:transparent; color:var(--grey);
    font-size:.8rem; font-weight:600; letter-spacing:.05em;
    text-transform:uppercase; transition:all var(--t);
}
.filter:hover { color:var(--white); border-color:var(--grey); }
.filter.is-on { background:var(--blue); border-color:var(--blue); color:var(--white); }

/* Masonry columns: every photo keeps its natural shape.
   Nothing is cropped, so the whole image is always readable. */
.gal-grid { columns:3 300px; column-gap:1rem; }
.gal {
    position:relative; overflow:hidden; border-radius:var(--r-l);
    cursor:pointer; background:var(--ink-3);
    display:inline-block; width:100%; margin:0 0 1rem;
    break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
}
.gal img { width:100%; height:auto; display:block; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.gal:hover img { transform:scale(1.08); }
.gal figcaption {
    position:absolute; inset:auto 0 0 0; padding:2.2rem 1.2rem 1.1rem;
    background:linear-gradient(transparent, rgba(0,0,0,.92));
    display:flex; flex-direction:column; gap:.15rem;
    font-size:.98rem; font-weight:600; color:var(--white);
    transform:translateY(101%); transition:transform var(--t);
}
.gal:hover figcaption { transform:translateY(0); }
.gal figcaption span {
    font-size:.66rem; font-weight:700; letter-spacing:.15em;
    text-transform:uppercase; color:var(--blue);
}
.gal.hide { display:none; }

.load-wrap { text-align:center; margin-top:2.6rem; }

/* ═══════════════════════════════════════════════════════
   7 · CLIENTS
   ═══════════════════════════════════════════════════════ */
.clients { background:var(--white); }
.logo-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:1px; background:var(--line-l);
    border:1px solid var(--line-l); border-radius:var(--r-l); overflow:hidden;
}
.logo-grid li {
    background:var(--white); display:grid; place-items:center;
    padding:2rem 1.4rem; min-height:150px; transition:background var(--t);
}

.logo-grid img {
    /* Logos are pre-normalised to a 400x200 transparent canvas,
       so a single max-height keeps every one optically balanced.
       Shown in full colour, static — no greyscale, no hover effects. */
    max-height:76px; width:auto; max-width:100%; object-fit:contain;
}

/* ═══════════════════════════════════════════════════════
   8 · CONTACT  (dark)
   ═══════════════════════════════════════════════════════ */
.contact { background:var(--black); color:var(--white); position:relative; overflow:hidden; }
.contact::before {
    content:''; position:absolute; bottom:-220px; left:-180px;
    width:600px; height:600px; border-radius:50%;
    background:radial-gradient(circle, var(--blue-20) 0%, transparent 68%);
    pointer-events:none;
}
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start; position:relative; z-index:1; }
.c-left h2 { font-size:clamp(2rem,4vw,3.2rem); color:var(--white); margin-bottom:1.2rem; }
.c-lead { color:var(--grey); margin-bottom:2.4rem; }

.c-details { display:grid; gap:1.5rem; }
.c-row { display:flex; gap:1rem; align-items:flex-start; }
.c-ico {
    width:40px; height:40px; flex-shrink:0; display:grid; place-items:center;
    background:var(--blue-12); border:1px solid var(--blue-35);
    border-radius:var(--r); color:var(--blue);
}
.c-row strong { display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white); margin-bottom:.2rem; }
.c-row p, .c-row a { color:var(--grey); font-size:.92rem; transition:color var(--t); }
.c-row a:hover { color:var(--blue); }

.c-right { background:var(--ink-2); border:1px solid var(--line-d); border-radius:var(--r-l); padding:2.6rem; }
.c-right h3 { font-size:1.6rem; color:var(--white); margin-bottom:.4rem; }
.c-note { color:var(--grey); font-size:.88rem; margin-bottom:2rem; }
.fld { display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.15rem; }
.fld label { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.fld input, .fld textarea {
    padding:.9rem 1rem; background:var(--black);
    border:1px solid var(--line-d); border-radius:var(--r);
    color:var(--white); font-family:var(--f-body); font-size:.94rem;
    width:100%; resize:vertical;
    transition:border-color var(--t), box-shadow var(--t);
}
.fld input::placeholder, .fld textarea::placeholder { color:#4A4A4A; }
.fld input:focus, .fld textarea:focus {
    outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-20);
}
.btn-wa {
    display:flex; align-items:center; justify-content:center; gap:.65rem;
    width:100%; padding:1.05rem; background:var(--blue); color:var(--white);
    font-weight:700; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase;
    border-radius:var(--r); transition:background var(--t), transform var(--t);
}
.btn-wa:hover { filter:brightness(0.88); transform:translateY(-2px); }
.c-alt { text-align:center; font-size:.85rem; color:var(--grey); margin-top:1.1rem; }
.c-alt a { color:var(--blue); font-weight:600; }

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.footer { background:var(--ink-1); color:var(--grey); padding:5rem 0 0; border-top:1px solid var(--line-d); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:3rem; padding-bottom:3.5rem; border-bottom:1px solid var(--line-d); }
.footer-logo { height:112px; width:auto; max-width:none; margin-bottom:1.2rem; object-fit:contain; }
.footer-brand p { font-size:.9rem; max-width:290px; }
.footer-tagline { margin-top:1rem !important; color:var(--blue) !important; font-size:.88rem !important; font-weight:600; }
.footer-col h4 { font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--white); margin-bottom:1.3rem; }
.footer-col ul li { margin-bottom:.65rem; }
.footer-col ul li a { font-size:.9rem; color:var(--grey); transition:color var(--t); }
.footer-col ul li a:hover { color:var(--blue); }
.footer-contact { display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.85rem; font-size:.88rem; }
.footer-contact a { color:var(--grey); transition:color var(--t); }
.footer-contact a:hover { color:var(--blue); }
.footer-bottom { padding:1.6rem 0; }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.footer-bottom p { font-size:.82rem; color:#4A4A4A; }

/* ═══════════════════════════════════════════════════════
   LIGHTBOX + WHATSAPP FLOAT
   ═══════════════════════════════════════════════════════ */
.lightbox {
    position:fixed; inset:0; z-index:1500;
    background:rgba(0,0,0,.96);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .3s;
}
/* CRITICAL: class selectors beat the UA [hidden] rule, so restate it */
.lightbox[hidden] { display:none !important; }
.lightbox.open { opacity:1; }
.lightbox img { max-width:88vw; max-height:80vh; object-fit:contain; border-radius:var(--r); }
.lb-close {
    position:absolute; top:1.5rem; right:2rem;
    font-size:2.4rem; line-height:1; color:var(--white);
    width:46px; height:46px; border-radius:50%;
    transition:background var(--t);
}
.lb-close:hover { background:var(--blue); }
.lb-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    font-size:2.6rem; line-height:1; color:var(--white);
    width:52px; height:52px; border-radius:50%;
    background:rgba(255,255,255,.08); transition:background var(--t);
}
.lb-nav:hover { background:var(--blue); }
.lb-prev { left:2rem; } .lb-next { right:2rem; }
.lb-cap {
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    color:var(--white); font-size:.92rem; letter-spacing:.04em; text-align:center;
}

.wa-float {
    position:fixed; right:1.4rem; bottom:1.4rem; z-index:900;
    width:56px; height:56px; display:grid; place-items:center;
    background:var(--blue); color:var(--white); border-radius:50%;
    box-shadow:0 8px 26px var(--blue-35); transition:transform var(--t), background var(--t);
}
.wa-float:hover { transform:scale(1.08); filter:brightness(0.88); }

/* Reveal animation */
.rv { opacity:0; transform:translateY(26px); transition:opacity .65s ease, transform .65s ease; }
.rv.in { opacity:1; transform:none; }

/* ═══════════════════════════════════════════════════════
   BOOKING PAGE
   ═══════════════════════════════════════════════════════ */
.booking-hero {
    background:var(--black); padding:9rem 5% 6rem; text-align:center;
    color:var(--white); position:relative; overflow:hidden;
    border-bottom:1px solid var(--line-d);
}
.booking-hero::before {
    content:''; position:absolute; top:-200px; right:-140px;
    width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle, var(--blue-20) 0%, transparent 68%);
}
.booking-hero h1 { font-size:clamp(2.2rem,5.4vw,4rem); color:var(--white); margin-bottom:.9rem; position:relative; z-index:1; }
.booking-hero p { color:var(--grey); font-size:1.05rem; position:relative; z-index:1; }

.form-page { background:var(--wash); padding-bottom:5rem; }
.form-container {
    max-width:840px; margin:-3.5rem auto 0; background:var(--white);
    padding:3rem; border-radius:var(--r-l); box-shadow:var(--sh);
    position:relative; z-index:10; border-top:4px solid var(--blue);
}
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; margin-bottom:.5rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-t); }
.form-control {
    width:100%; padding:.9rem 1rem; border:1.5px solid #DDD;
    border-radius:var(--r); font-family:var(--f-body); font-size:.96rem;
    color:var(--black); background:var(--white);
    transition:border-color var(--t), box-shadow var(--t);
}
.form-control:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-20); }
.form-control::placeholder { color:#B5B5B5; }
.grid-2-col { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.checkbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.4rem; margin-top:.8rem; }
.checkbox-label {
    display:flex; align-items:center; gap:.6rem; font-size:.92rem; font-weight:500;
    padding:.7rem 1rem; border:1.5px solid #DDD; border-radius:var(--r);
    cursor:pointer; transition:all .2s;
}
.checkbox-label:hover { border-color:var(--blue); background:var(--blue-06); }
.checkbox-label input[type="checkbox"] { accent-color:var(--blue); width:16px; height:16px; }
.checkbox-label:has(input:checked) { border-color:var(--blue); background:var(--blue-12); }
.success-message { display:none; text-align:center; padding:4rem 2rem; }
.success-message h2 { font-size:2.2rem; color:var(--blue); margin-bottom:1rem; }
.success-message p { color:var(--grey-t); margin-bottom:2rem; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width:1100px) {
    .nav-links { gap:1.3rem; }
    .nav-links a { font-size:.8rem; }
    .about-grid { gap:3rem; }
    .contact-grid { gap:3rem; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:2.4rem; }
}

@media (max-width:900px) {
    .strip-in { grid-template-columns:1fr 1fr; }
    .strip-cta { grid-column:1 / -1; justify-self:stretch; text-align:center; }
    .about-grid { grid-template-columns:1fr; }
    .about-media { max-width:520px; }
    .a-img-sub { right:0; }
    .contact-grid { grid-template-columns:1fr; }
}

@media (max-width:768px) {
    .sec { padding:4rem 0; }
    .hamburger { display:flex; }
    .btn-nav-cta { display:none; }
    :root { --logo-h: 64px; }
    .footer-logo { height:88px; }
    /* ── Mobile dropdown menu ── */
    .nav-links {
        position:absolute; top:100%; left:0; right:0; width:100%;
        flex-direction:column; align-items:stretch; gap:0;
        background:var(--ink-1);
        border-top:1px solid var(--line-d);
        border-bottom:3px solid var(--blue);
        box-shadow:0 20px 44px rgba(0,0,0,.65);
        max-height:0; overflow:hidden;
        opacity:0; visibility:hidden; z-index:999;
        transition:max-height .38s cubic-bezier(.4,0,.2,1),
                   opacity .26s ease, visibility .38s;
    }
    .nav-links.active {
        max-height:calc(100dvh - 66px);
        overflow-y:auto; opacity:1; visibility:visible;
    }
    .nav-links li { width:100%; border-bottom:1px solid var(--line-d); }
    .nav-links li:last-child { border-bottom:none; }
    .nav-links a {
        display:block; width:100%; padding:1.05rem 5%;
        font-size:.95rem; letter-spacing:.04em;
        color:rgba(255,255,255,.86);
    }
    .nav-links a::after { display:none; }
    .nav-links a:hover, .nav-links a.active {
        background:var(--blue); color:var(--white);
    }
    /* CTA inside the dropdown (hidden on desktop) */
    .nav-cta-mobile { padding:1rem 5% 1.2rem; border-bottom:none !important; }
    .nav-cta-mobile a {
        display:block; text-align:center; padding:.95rem;
        background:var(--blue); color:var(--white) !important;
        border-radius:var(--r); font-weight:700; font-size:.85rem;
        letter-spacing:.07em; text-transform:uppercase;
    }
    .nav-cta-mobile a:hover { filter:brightness(0.88); }
    /* Overlay sits below the dropdown, above the page */
    .nav-overlay { display:block; top:66px; pointer-events:none; }

    .hero { min-height:88svh; padding:6rem 5% 4.5rem; }
    .nav-arrow { display:none; }
    .dots { left:5%; bottom:1.6rem; }
    .hero-btns .btn-solid, .hero-btns .btn-line { flex:1; text-align:center; }

    .a-img-sub { display:none; }
    .a-badge { left:auto; right:1rem; top:1rem; padding:.9rem 1.1rem; }
    .a-badge-num { font-size:2rem; }

    .mini-stats { grid-template-columns:1fr; gap:1.2rem; text-align:center; }
    .gal-grid { columns:2 140px; column-gap:.7rem; }
    .gal { margin-bottom:.7rem; }
    .gal figcaption { transform:translateY(0); padding:1.6rem .8rem .7rem; font-size:.8rem; }
    .gal figcaption span { font-size:.58rem; }
    .logo-grid { grid-template-columns:repeat(3,1fr); }
    .logo-grid li { padding:1.2rem .9rem; min-height:110px; }
    .logo-grid img { max-height:54px; }
    .c-right { padding:1.8rem; }
    .footer-grid { grid-template-columns:1fr; gap:2.2rem; }
    .grid-2-col, .checkbox-grid { grid-template-columns:1fr; }
    .form-container { padding:1.8rem; margin:-2.5rem 1rem 0; }
    .lb-prev { left:.5rem; } .lb-next { right:.5rem; }
    .lb-nav { width:42px; height:42px; font-size:2rem; }
}

@media (max-width:480px) {
    .strip-in { grid-template-columns:1fr; }
    .hero h1 { font-size:2.4rem; }
    .filters { gap:.4rem; }
    .filter { padding:.45rem 1rem; font-size:.72rem; }
    .logo-grid { grid-template-columns:repeat(2,1fr); }
    .footer-bottom-inner { flex-direction:column; text-align:center; }
    .wa-float { width:50px; height:50px; right:1rem; bottom:1rem; }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    .slide.is-active img { animation:none; }
}