@import "./tokens.css";

/* Self-hosted fonts (Latin subset only) — replaces external Google Fonts CSS
   to eliminate the third-party render-block. WOFF2 files in /fonts/ are served
   with `Cache-Control: public, max-age=31536000, immutable`. Fonts loaded
   on-demand via unicode-range; only weights actually used hit the network. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/barlow-300.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; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/barlow-400.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; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/barlow-500.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; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-600.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; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-700.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; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlowcondensed-600.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; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlowcondensed-700.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; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/barlowcondensed-800.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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibmplexmono-400.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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibmplexmono-500.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; }

/* Phosphor-style icon utility (inline SVG paths copied from phosphor-icons regular).
   Use as: <svg class="icon" viewBox="0 0 256 256"><path d="..."/></svg>
   Color via parent: fill follows currentColor. */
.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;fill:currentColor}
.icon-lg{width:24px;height:24px}

/* Mono utility — IBM Plex Mono for phone numbers, airport codes, booking refs */
.mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1}

/* Mockup → design-system token aliases. The mockup author used bare names
   (--navy, --sky, etc.); the design system ships --sb-* tokens. Mapping
   here keeps tokens.css canonical while leaving the existing layout rules
   below untouched. Update tokens.css to change the palette globally. */
:root{
  --navy:var(--sb-navy);
  --sky:var(--sb-sky);
  --sky2:var(--sb-sky-dark);
  --skylt:var(--sb-sky-pale);
  --accent:#00B89C;
  --white:var(--sb-white);
  --offwh:var(--sb-off-white);
  --text:var(--sb-text-heading);
  --textm:var(--sb-text-body);
  --textl:var(--sb-text-muted);
  --bord:var(--sb-light-grey);
  --navh:76px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Barlow',sans-serif;font-size:16px;line-height:1.7;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--navh);background:var(--white);border-bottom:1px solid var(--bord);display:flex;align-items:center;padding:0 40px}
.nav-logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.nav-logo img{height:56px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{display:block;font-size:13px;font-weight:400;color:var(--textm);text-decoration:none;padding:7px 13px;border-radius:6px;transition:all .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--sky);background:var(--skylt)}
.nav-cta{background:var(--sky)!important;color:var(--white)!important;font-weight:500!important;border-radius:7px!important}
.nav-cta:hover{background:var(--sky2)!important}
.nav-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.nav-ham span{display:block;width:22px;height:2px;background:var(--textm);border-radius:2px}
.mob-nav{display:none;position:fixed;top:var(--navh);left:0;right:0;background:var(--white);z-index:999;padding:12px 20px 20px;flex-direction:column;gap:4px;border-bottom:1px solid var(--bord)}
.mob-nav.open{display:flex}
.mob-nav a{font-size:15px;color:var(--textm);text-decoration:none;padding:11px 14px;border-radius:8px;transition:all .2s}
.mob-nav a:hover{background:var(--skylt);color:var(--sky)}
main{padding-top:var(--navh);min-height:100vh}
/* HERO */
.hero{position:relative;overflow:hidden;min-height:88vh;display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.hero-ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(26,43,60,.88) 0%,rgba(26,43,60,.6) 55%,rgba(26,43,60,.22) 100%)}
.hero-c{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:88px 40px 72px;flex:1;display:flex;align-items:center}
.hero-txt{max-width:580px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:100px;padding:6px 16px;font-size:12px;font-weight:400;letter-spacing:.08em;color:rgba(255,255,255,.85);text-transform:uppercase;margin-bottom:26px}
.hbdot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hero h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(52px,6vw,84px);font-weight:800;line-height:.95;letter-spacing:-.01em;color:var(--white);margin-bottom:20px}
.hero h1 em{font-style:normal;color:#60C8FF}
.hero-desc{font-size:17px;font-weight:300;color:rgba(255,255,255,.76);max-width:460px;line-height:1.72;margin-bottom:34px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}
.btn-p{display:inline-flex;align-items:center;gap:8px;background:var(--sky);color:var(--white);font-size:15px;font-weight:500;padding:14px 28px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:all .2s;font-family:'Barlow',sans-serif}
.btn-p:hover{background:var(--sky2);transform:translateY(-1px)}
.btn-s{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.9);font-size:15px;font-weight:400;padding:14px 28px;border-radius:8px;border:1px solid rgba(255,255,255,.27);cursor:pointer;transition:all .2s;text-decoration:none;font-family:'Barlow',sans-serif}
.btn-s:hover{background:rgba(255,255,255,.2);color:var(--white)}
.hstats{display:flex;gap:40px;flex-wrap:wrap}
.hstat-n{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:800;color:var(--white);line-height:1}
.hstat-n span{color:#60C8FF}
.hstat-l{font-size:12px;font-weight:300;color:rgba(255,255,255,.48);letter-spacing:.07em;text-transform:uppercase;margin-top:3px}
/* ACCENT STRIP */
.strip{height:6px;display:flex}
.strip-s{flex:1}
.strip-s:nth-child(1){background:var(--sky)}
.strip-s:nth-child(2){background:var(--accent)}
.strip-s:nth-child(3){background:#F5A623}
.strip-s:nth-child(4){background:#A064F0}
/* STATSBAR */
.sbar{background:var(--navy);padding:32px 40px}
.sbar-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sb-n{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:800;color:var(--white);line-height:1;text-align:center}
.sb-n span{color:#60C8FF}
.sb-l{font-size:11px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:5px;text-align:center}
.sb-div{width:1px;height:44px;background:rgba(255,255,255,.1)}
/* SECTION */
.sec{padding:80px 40px}
.sec-in{max-width:1200px;margin:0 auto}
.sec-alt{background:var(--offwh)}
.sec-sky{background:var(--sb-sky-pale)}
/* Photographic bands — wide image with navy gradient overlay + centred headline */
.photo-band{position:relative;overflow:hidden;height:380px}
/* `.tall` modifier is the contact-page hero variant. Uses min-height in
   vh so it stays in sync with the .hero / .about-hero sizes on other
   child pages and adapts naturally across viewports. */
.photo-band.tall{height:auto;min-height:52vh}
.photo-band-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.photo-band-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,43,60,.3) 0%,rgba(26,43,60,.55) 100%)}
.photo-band-overlay.dim{background:linear-gradient(180deg,rgba(26,43,60,.4) 0%,rgba(26,43,60,.7) 100%)}
.photo-band-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}
.photo-band-headline{font-family:'Barlow Condensed',sans-serif;font-size:clamp(28px,3.5vw,40px);font-weight:600;line-height:1.2;color:#fff;letter-spacing:-.01em;max-width:760px;margin:0}
.sec-lbl{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:10px}
.sec-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,4vw,52px);font-weight:700;line-height:1.05;letter-spacing:-.01em;color:var(--navy);margin-bottom:14px}
.sec-body{font-size:16px;font-weight:300;color:var(--textm);max-width:580px;line-height:1.75}
.sec-hd{margin-bottom:52px}
/* SERVICE CARDS */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:var(--white);border:1px solid var(--bord);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .25s;text-decoration:none;display:block;color:inherit}
.svc:hover{border-color:var(--sky);box-shadow:0 8px 32px rgba(0,128,200,.1);transform:translateY(-3px)}
.svc-img{height:210px;overflow:hidden;background:var(--white);display:flex;align-items:center;justify-content:center}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.svc:hover .svc-img img{transform:scale(1.04)}
.svc-body{padding:22px 24px 26px}
.svc-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--navy);margin-bottom:8px}
.svc-desc{font-size:13px;font-weight:300;color:var(--textm);line-height:1.68;margin-bottom:14px}
.svc-link{font-size:13px;font-weight:500;color:var(--sky)}
/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split-img{border-radius:16px;overflow:hidden;height:420px}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-lbl{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:10px}
.split-title{font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:700;color:var(--navy);line-height:1.02;margin-bottom:14px}
.split-body{font-size:15px;font-weight:300;color:var(--textm);line-height:1.75;margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.tag{font-size:12px;padding:5px 13px;border-radius:100px;background:var(--skylt);color:var(--sky);border:1px solid rgba(0,128,200,.18)}
/* PORTER PKGS */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pkg{border:1.5px solid var(--bord);border-radius:14px;overflow:hidden;background:var(--white);transition:all .2s}
.pkg:hover{border-color:var(--sky);box-shadow:0 6px 24px rgba(0,128,200,.1)}
.pkg.feat{border-color:var(--sky);box-shadow:0 6px 28px rgba(0,128,200,.14)}
.pkg-img{height:220px;overflow:hidden;background:var(--white)}
.pkg-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.pkg-body{padding:20px 20px 6px}
.pkg-badge{display:inline-block;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:100px;background:var(--sky);color:var(--white);margin-bottom:8px}
.pkg-name{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--navy);margin-bottom:6px}
.pkg-desc{font-size:13px;font-weight:300;color:var(--textm);line-height:1.6;margin-bottom:14px}
.pkg-foot{padding:0 20px 20px}
.pkg-btn{width:100%;padding:12px;border-radius:8px;font-size:14px;font-weight:500;font-family:'Barlow',sans-serif;cursor:pointer;transition:all .2s;border:1.5px solid var(--sky);color:var(--sky);background:var(--white);text-decoration:none;display:block;text-align:center}
.pkg-btn:hover,.pkg.feat .pkg-btn{background:var(--sky);color:var(--white)}
/* HOW IT WORKS */
.how{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--bord);border-radius:14px;overflow:hidden;margin-top:36px}
.how-s{padding:28px 24px;border-right:1px solid var(--bord)}
.how-s:last-child{border-right:none}
.how-n{font-family:'Barlow Condensed',sans-serif;font-size:50px;font-weight:800;color:var(--skylt);line-height:1;margin-bottom:10px}
.how-t{font-size:15px;font-weight:500;color:var(--navy);margin-bottom:8px}
.how-d{font-size:13px;font-weight:300;color:var(--textm);line-height:1.65}
/* BOOKING */
.bwrap{background:var(--navy);padding:80px 40px}
.bin{max-width:860px;margin:0 auto}
.btitle{font-family:'Barlow Condensed',sans-serif;font-size:46px;font-weight:800;color:var(--white);margin-bottom:8px;line-height:1}
.bsub{font-size:15px;font-weight:300;color:rgba(255,255,255,.62);margin-bottom:34px}
.bform{background:var(--white);border-radius:14px;padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fg{display:flex;flex-direction:column;gap:6px}
.fg.full{grid-column:1/-1}
.fl{font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--textm)}
.fc{height:46px;padding:0 13px;border:1.5px solid var(--bord);border-radius:8px;font-size:14px;font-family:'Barlow',sans-serif;color:var(--text);background:var(--white);transition:border-color .2s;outline:none}
.fc:focus{border-color:var(--sky)}
.fc::placeholder{color:var(--textl)}
.fsel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234A5A6B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.fnotice{grid-column:1/-1;font-size:13px;font-weight:300;color:var(--textm);padding:12px 16px;background:var(--skylt);border-radius:8px;border-left:3px solid var(--sky);line-height:1.5}
.fsub{grid-column:1/-1;background:var(--navy);color:var(--white);font-size:15px;font-weight:500;padding:15px 32px;border-radius:8px;border:none;cursor:pointer;width:100%;font-family:'Barlow',sans-serif;transition:background .2s}
.fsub:hover{background:var(--sky)}
.fsub:disabled{opacity:.6;cursor:not-allowed}
.grow{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--offwh);border-radius:8px;border:1px solid var(--bord);font-size:13px}
.grow-t{color:var(--textm);font-weight:300}
.grow-l{font-weight:500;color:var(--sky);text-decoration:none;white-space:nowrap}
.fturnstile{grid-column:1/-1;display:flex;justify-content:center}
.fdone{grid-column:1/-1;padding:24px;border-radius:10px;background:var(--skylt);border-left:4px solid var(--sky);font-size:14px;color:var(--text);line-height:1.6;text-align:center}
.fdone strong{color:var(--navy);font-weight:600}
/* TROLLEY */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.timg{border-radius:14px;overflow:hidden;height:320px;border:1px solid var(--bord);background:var(--white);display:flex;align-items:center;justify-content:center;padding:32px}
.timg img{width:100%;height:100%;object-fit:contain;object-position:center center}
.spec{width:100%;border-collapse:collapse;margin-top:18px}
.spec th{background:var(--navy);color:var(--white);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:11px 16px;text-align:left}
.spec td{padding:10px 16px;font-size:13px;border-bottom:1px solid var(--bord)}
.spec tr:nth-child(even) td{background:var(--offwh)}
.enqbox{background:var(--navy);border-radius:16px;padding:40px;margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.enq-title{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:700;color:var(--white);margin-bottom:10px;line-height:1}
.enq-desc{font-size:14px;font-weight:300;color:rgba(255,255,255,.58);line-height:1.72}
.enqf{display:flex;flex-direction:column;gap:11px}
.efc{height:44px;padding:0 13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:8px;color:var(--white);font-size:14px;font-family:'Barlow',sans-serif;outline:none}
.efc::placeholder{color:rgba(255,255,255,.3)}
.efc:focus{border-color:var(--sky);background:rgba(255,255,255,.12)}
.ebtn{background:var(--sky);color:var(--white);font-size:14px;font-weight:500;padding:13px;border-radius:8px;border:none;cursor:pointer;font-family:'Barlow',sans-serif;transition:background .2s}
.ebtn:hover{background:var(--sky2)}
.ebtn:disabled{opacity:.6;cursor:not-allowed}
/* ABOUT */
.about-hero{position:relative;overflow:hidden;min-height:52vh;display:flex;align-items:flex-end}
.ahbg{position:absolute;inset:0;background-image:url('/images/slider/slide_trolley.webp');background-size:cover;background-position:center 40%}
.ahov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,43,60,.5) 0%,rgba(26,43,60,.86) 100%)}
.ahc{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:60px 40px;width:100%}
.tl{margin-top:32px;display:flex;flex-direction:column}
.tl-item{display:flex;gap:20px;padding-bottom:26px}
.tl-l{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0}
.tl-dot{width:14px;height:14px;border-radius:50%;background:var(--sky);flex-shrink:0;margin-top:4px}
.tl-line{width:2px;flex:1;background:rgba(0,128,200,.2);margin-top:6px}
.tl-yr{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--sky);margin-bottom:3px}
.tl-tx{font-size:14px;font-weight:300;color:var(--textm);line-height:1.65}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.val{background:var(--white);border:1px solid var(--bord);border-radius:14px;padding:26px}
.val-n{font-family:'Barlow Condensed',sans-serif;font-size:46px;font-weight:800;color:var(--skylt);margin-bottom:10px;line-height:1}
.val-t{font-size:16px;font-weight:500;color:var(--navy);margin-bottom:7px}
.val-d{font-size:13px;font-weight:300;color:var(--textm);line-height:1.65}
/* SUBS */
.subs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sub{border:1px solid var(--bord);border-radius:14px;overflow:hidden;text-decoration:none;display:block;transition:all .25s;color:inherit}
.sub:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(13,33,55,.1);border-color:var(--sky)}
.sub-hdr{padding:26px;display:flex;align-items:center;gap:16px}
.sub-pill{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;color:var(--white)}
.sub-nm{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;line-height:1;margin-bottom:3px}
.sub-tg{font-size:12px;font-weight:300;letter-spacing:.05em;text-transform:uppercase;color:var(--textl)}
.sub-bdy{padding:0 26px 26px}
.sub-desc{font-size:13px;font-weight:300;color:var(--textm);line-height:1.68;margin-bottom:14px}
.sub-ftags{display:flex;flex-wrap:wrap;gap:7px}
.sub-ft{padding:14px 26px;border-top:1px solid var(--bord);display:flex;justify-content:space-between;font-size:12px}
/* CONTACT */
.ctgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ctinfo{display:flex;flex-direction:column;gap:22px}
.ctitem{display:flex;gap:14px;align-items:flex-start}
.cticon{width:42px;height:42px;border-radius:10px;background:var(--skylt);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cticon svg{width:18px;height:18px;color:var(--sky)}
.ctlbl{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--textl);margin-bottom:3px}
.ctval{font-size:15px;color:var(--text);line-height:1.5}
.ctval a{color:var(--sky);text-decoration:none}
.ctcard{background:var(--white);border:1px solid var(--bord);border-radius:14px;padding:30px;display:flex;flex-direction:column;gap:14px}
.ctcard-t{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;color:var(--navy)}
.mapbox{background:var(--skylt);border:1px solid var(--bord);border-radius:12px;height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;margin-top:22px}
.disclaim{background:var(--offwh);border:1px solid var(--bord);border-left:4px solid var(--accent);border-radius:8px;padding:14px 18px;font-size:13px;font-weight:300;color:var(--textm);line-height:1.6;margin-top:18px}
/* FOOTER */
footer{background:var(--sb-navy);padding:56px 40px 0;border-top:3px solid var(--sky)}
.ft-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
.ft-logo img{height:52px;width:auto;filter:brightness(0) invert(1);opacity:1;margin-bottom:14px}
.ft-about{font-size:13px;font-weight:400;color:rgba(255,255,255,.78);line-height:1.75;margin-bottom:20px}
.ft-ct{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:14px}
.ft-lnks{list-style:none;display:flex;flex-direction:column;gap:9px}
.ft-lnks a{font-size:13px;font-weight:400;color:rgba(255,255,255,.78);text-decoration:none;transition:color .2s}
.ft-lnks a:hover{color:var(--white)}
.ft-lnks .ft-static{font-size:13px;font-weight:400;color:rgba(255,255,255,.78);opacity:.55}
.ft-bot{max-width:1200px;margin:0 auto;padding:18px 0;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:400;color:rgba(255,255,255,.6)}
.nsl{display:flex;gap:8px;margin-top:6px}
.nsl input{flex:1;height:36px;padding:0 11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);border-radius:6px;color:var(--white);font-size:13px;font-family:'Barlow',sans-serif;outline:none}
.nsl input::placeholder{color:rgba(255,255,255,.27)}
.nsl input:focus{border-color:var(--sky)}

/* Keyboard-only focus indication on interactive elements that already
   define :hover. Uses :focus-visible so mouse clicks don't show a ring
   while keyboard tab still does. WCAG 2.4.7. */
.nav-links a:focus-visible,
.mob-nav a:focus-visible,
.ft-lnks a:focus-visible,
.nav-ham:focus-visible,
.nav-cta:focus-visible,
.fsub:focus-visible,
.ebtn:focus-visible,
.nf-cta:focus-visible{
  outline:2px solid var(--sky);
  outline-offset:2px;
  border-radius:4px;
}
.nsl button{height:36px;padding:0 14px;background:var(--sky);color:var(--white);border:none;border-radius:6px;font-size:13px;font-weight:500;font-family:'Barlow',sans-serif;cursor:pointer}
/* TOAST */
.toast{position:fixed;bottom:28px;right:28px;z-index:9999;background:var(--navy);color:var(--white);padding:14px 22px;border-radius:10px;font-size:14px;line-height:1.5;box-shadow:0 8px 32px rgba(0,0,0,.22);display:none;max-width:320px;border-left:4px solid var(--accent)}
.toast.show{display:block;animation:sup .3s ease}
@keyframes sup{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
/* RESPONSIVE */
@media(max-width:960px){
  .svcs{grid-template-columns:1fr 1fr}.pkgs{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:32px}.split-img{height:280px}
  .subs{grid-template-columns:1fr}.tgrid{grid-template-columns:1fr}
  .enqbox{grid-template-columns:1fr}.ctgrid{grid-template-columns:1fr;gap:40px}
  .ft-in{grid-template-columns:1fr 1fr}.vals{grid-template-columns:1fr 1fr}
  .how{grid-template-columns:1fr 1fr}
  .how-s:nth-child(2){border-right:none}
  .how-s:nth-child(3){border-right:1px solid var(--bord);border-top:1px solid var(--bord)}
  .how-s:nth-child(4){border-right:none;border-top:1px solid var(--bord)}
  nav{padding:0 20px}.nav-links{display:none}.nav-ham{display:flex}
  .sec{padding:56px 20px}.hero-c{padding:56px 20px}
  .sbar{padding:28px 20px}.ahc{padding:40px 20px}
  .bwrap{padding:56px 20px}.bform{grid-template-columns:1fr}
  footer{padding:48px 20px 0}
  .photo-band{height:320px}
  .photo-band-inner{padding:32px 20px}
}
@media(max-width:600px){
  .svcs{grid-template-columns:1fr}.vals{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
  .how-s{border-right:none!important;border-top:none!important;border-bottom:1px solid var(--bord)}
  .how-s:last-child{border-bottom:none}
  .ft-in{grid-template-columns:1fr}.hero h1{font-size:46px}
  .hstats{gap:20px}.sb-div{display:none}
  .sbar-in{justify-content:center;gap:28px}
  .photo-band{height:260px}
  .photo-band-inner{padding:24px 16px}
  .ft-bot{flex-direction:column;gap:8px;text-align:center}
}

/* ---------- DARK MODE ---------- */
/* Triggered by OS-level prefers-color-scheme. Uses element-level overrides
   rather than token-level — `--sb-white` is dual-purpose in our codebase
   (used both as page bg AND as "white text on dark backgrounds") so flipping
   the token would break stats bars, hero headings, button labels etc.
   Hero overlays, photo bands, the navy stats bar, and the footer stay dark
   in either mode by design — only their surrounding sections invert. */
@media (prefers-color-scheme: dark) {
  /* Safe token overrides: cascade through aliases that aren't dual-purpose.
     Note --sb-white intentionally NOT flipped — it doubles as "white text on
     dark surfaces" in this codebase. */
  :root {
    --sb-light-grey:   #2A3848;
    --sb-mid-grey:     #6B7C92;
    --sb-text-body:    #C5D0DD;
    --sb-text-muted:   #8A9BB0;
  }
  body { background: #0F1825; color: #C5D0DD; }
  nav { background: #0F1825; border-bottom-color: #2A3848; }
  .mob-nav { background: #0F1825; border-bottom-color: #2A3848; }
  .nav-links a { color: #B5C2D2; }
  .nav-links a:hover, .nav-links a.active { color: var(--sb-sky); background: rgba(0,174,239,.1); }
  .mob-nav a { color: #B5C2D2; }
  .mob-nav a:hover { background: rgba(0,174,239,.1); color: var(--sb-sky); }
  .nav-ham span { background: #B5C2D2; }
  .sec-alt { background: #18222F; }
  .sec-sky { background: #102C3D; }
  /* Cards: lift slightly above page bg for definition */
  .svc, .pkg, .val, .sub, .ctcard, .timg {
    background: #1B2532; border-color: #2A3848;
  }
  .svc:hover, .pkg:hover, .sub:hover { box-shadow: 0 8px 32px rgba(0,0,0,.4); }
  /* Headings, body text on light surfaces flip to light */
  .sec-title, .split-title, .svc-title, .pkg-name, .ctcard-t, .val-t,
  .pkg-name, .enq-title { color: #E8EEF5; }
  .sec-body, .split-body, .svc-desc, .pkg-desc, .val-d, .ctval { color: #C5D0DD; }
  .ctlbl { color: #6B7C92; }
  /* Form inputs */
  .fc { background: #1B2532; border-color: #2A3848; color: #E8EEF5; }
  .fc::placeholder { color: #6B7C92; }
  .grow { background: #18222F; border-color: #2A3848; }
  .grow-t { color: #C5D0DD; }
  .fnotice, .fdone { background: #102C3D; color: #C5D0DD; }
  /* Tag chips: invert sky-pale fill to lift on dark backgrounds */
  .tag { background: rgba(0,174,239,.14); border-color: rgba(0,174,239,.32); color: #5BCDF8; }
  /* Spec table */
  .spec tr:nth-child(even) td { background: #18222F; }
  .spec td { color: #C5D0DD; border-bottom-color: #2A3848; }
  /* Contact map placeholder */
  .mapbox { background: #102C3D; border-color: #2A3848; }
  .mapbox div { color: #C5D0DD; }
  .mapbox strong { color: #E8EEF5 !important; }
  /* Trolley spec th — already navy bg + white text, fine */
  /* Cream Blue Lodge service-card tile reads odd in dark mode */
  .svc-img[style*="FFF9ED"] { background: #2A2418 !important; }
}