/* Woodies Boat Storage & Cafe, design system
   Same locked bright family as FBH (reference boatstoragewa.com.au) but a distinct
   first impression: navy-led, squarer, utility-and-trust. Never dark-themed,
   navy is structure (header/bands), the page itself stays white and bright. */

:root{
  --aqua:#68ccd1;
  --teal:#4FD8CC;
  --navy:#002970;
  --navy2:#013587;
  --pale:#c3e9f3;
  --paler:#eef7fb;
  --base:#f7f7f7;
  --ink:#22303c;
  --grey:#5d6b77;
  --white:#ffffff;
  --radius:10px;
  --shadow:0 8px 26px rgba(0,41,112,.10);
  --shadow-lg:0 16px 44px rgba(0,41,112,.16);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Source Sans 3','Source Sans Pro',-apple-system,sans-serif;color:var(--ink);background:var(--white);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:'Montserrat',sans-serif;font-weight:800;line-height:1.14;color:var(--navy);letter-spacing:-.01em}
h1{font-size:clamp(38px,5.4vw,60px)}
h2{font-size:clamp(30px,4vw,42px)}
h3{font-size:22px}
.kicker{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua)}
section .kicker{color:#1e9aa1}
.sub{font-size:18.5px;color:var(--grey);max-width:660px}

/* buttons, squarer than FBH */
/* ⛔ inline-FLEX, not inline-block. In a flex .cta-row the default align-items:stretch makes
   a solid button match the taller bordered one, and with inline-block that extra height all
   lands under the text, so the label sits high and does not line up with the button beside
   it. Centring the line box makes every button immune to being stretched. */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15.5px;text-decoration:none;padding:16px 32px;border-radius:8px;transition:transform .15s ease, box-shadow .15s ease;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-aqua{background:var(--teal);color:var(--navy);box-shadow:var(--shadow)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.btn-white{background:#fff;color:var(--navy);box-shadow:var(--shadow)}
/* padding pulled in by the 2px border so this matches an unbordered .btn exactly, the same
   compensation .btn-outline already had. Without it the row is 4px taller than the solid button. */
.btn-outline-w{border:2px solid rgba(255,255,255,.85);color:#fff;padding:14px 30px}
.btn-outline{border:2px solid var(--navy);color:var(--navy);padding:14px 30px}

/* header, navy from the top, unlike FBH's white glass header */
.topbar{background:#001d52;color:#bcd0ea;font-size:13.5px;padding:7px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
/* BRAND BAND. Jim, 13 Sep: taller banner at the top, large logo, the click-throughs
   underneath it. Same navy as the nav so the two read as one tall banner. It scrolls
   away and the compact nav sticks, so nothing eats the screen on the way down. */
.brandband{display:block;background:var(--navy);padding:30px 0 24px;text-align:center;line-height:0}
.brandband img{height:clamp(62px,7.6vw,108px);width:auto;display:block;margin:0 auto}
header.site{position:sticky;top:0;z-index:50;background:var(--navy);box-shadow:0 2px 14px rgba(0,20,60,.25)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:82px}
/* the small nav logo is a duplicate while the big one is on screen, so it fades in
   only once you have scrolled past the band. Opacity only, so nothing shifts. */
header.site .logo{opacity:0;pointer-events:none;transition:opacity .28s ease}
body.scrolled header.site .logo{opacity:1;pointer-events:auto}
@media (min-width:941px){
  /* hairline splits the logo band from the link row, the way his old site did it */
  header.site{border-top:1px solid rgba(255,255,255,.11)}
  /* nav centred under the logo. The small logo is taken out of flow so it can fade
     in on scroll without nudging the links sideways. */
  header.site .wrap{position:relative;justify-content:center}
  header.site .logo{position:absolute;left:24px;top:50%;transform:translateY(-50%)}
  /* once the band has scrolled away the bar carries the brand again, and the links
     move back out to the right. The nav is too wide to keep centred with a logo
     beside it, so the bar returns to the normal logo-left layout. */
  body.scrolled header.site .wrap{justify-content:space-between}
  body.scrolled header.site .logo{position:static;transform:none}
}
.logo{font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:12px;letter-spacing:-.01em}
.logo .mark{width:44px;height:44px;border-radius:9px;background:var(--teal);display:grid;place-items:center;font-size:23px;color:var(--navy)}
.logo small{display:block;font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--pale);text-transform:uppercase}
nav.main{display:flex;gap:26px;align-items:center}
nav.main a{font-weight:600;font-size:15px;text-decoration:none;color:#e8f1f8}
nav.main a:hover{color:var(--teal)}
nav.main .btn{padding:12px 24px;font-size:14.5px}
.menu-toggle{display:none;background:none;border:0;font-size:28px;color:#fff;cursor:pointer}

/* hero, split layout, not FBH's full-bleed centered */
.hero{background:linear-gradient(180deg,var(--paler) 0%,#fff 100%);padding:78px 0 0}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-bottom:78px}
.hero h1 .accent{color:#12a5ad}
.hero .sub{margin:20px 0 32px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .photo{aspect-ratio:4/3.1;border-radius:14px;background:linear-gradient(135deg,var(--pale),var(--aqua));background-size:cover;background-position:center;box-shadow:var(--shadow-lg)}
.hero .badges{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero .badge{display:flex;gap:11px;align-items:center;font-weight:700;font-size:14.5px;color:var(--navy)}
.hero .badge .ico{width:42px;height:42px;border-radius:9px;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;font-size:19px}

/* services band, the "everything in one place" grid, high on the page */
.services{background:var(--navy);padding:84px 0}
.services h2,.services .lead{color:#fff}
.services .lead{color:#bcd0ea;max-width:640px;margin-top:12px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.svc{background:#fff;border-radius:var(--radius);padding:30px 28px;text-decoration:none;transition:transform .15s ease;display:block}
.svc:hover{transform:translateY(-4px)}
.svc .ico{width:52px;height:52px;border-radius:10px;background:var(--paler);display:grid;place-items:center;font-size:24px;margin-bottom:16px}
.svc h3{margin-bottom:6px}
.svc p{color:var(--grey);font-size:15px}
.svc .more{display:inline-block;margin-top:12px;font-weight:700;font-size:14px;color:#12a5ad}

/* sections */
section.pad{padding:92px 0}
section.pad-alt{padding:92px 0;background:var(--base)}
.center{text-align:center}
.center .sub{margin:14px auto 0}

/* pricing table (storage rates) */
.rates{width:100%;border-collapse:collapse;margin-top:44px;background:#fff;box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden}
.rates th{background:var(--navy);color:#fff;font-family:'Montserrat',sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:18px 24px;text-align:left}
.rates td{padding:20px 24px;border-bottom:1px solid #e8eff4;font-size:16.5px}
.rates tr:last-child td{border-bottom:0}
.rates td.price{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--navy);white-space:nowrap}
.rates td.price small{font-weight:600;color:var(--grey)}

/* feature split rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.rev .photo{order:2}
.split .photo{aspect-ratio:4/3;border-radius:14px;background:linear-gradient(135deg,var(--pale),var(--aqua));background-size:cover;background-position:center;box-shadow:var(--shadow-lg)}
.split .kicker{display:block;margin-bottom:10px}
.split p{color:var(--grey);margin-top:14px}
.split ul{margin:18px 0 26px;list-style:none}
.split li{padding-left:32px;position:relative;margin-bottom:11px;color:var(--ink);font-weight:600;font-size:16px}
.split li::before{content:'✓';position:absolute;left:0;top:0;width:22px;height:22px;border-radius:6px;background:var(--teal);color:var(--navy);font-size:13px;font-weight:800;display:grid;place-items:center;margin-top:3px}

/* cafe menu */
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:48px}
.menu-block{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:36px}
.menu-block h3{border-bottom:3px solid var(--teal);padding-bottom:12px;margin-bottom:20px}
.menu-item{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px dashed #dde8ee;font-size:16px}
.menu-item:last-child{border-bottom:0}
.menu-item .name{font-weight:700;color:var(--ink)}
.menu-item .desc{font-size:14px;color:var(--grey);font-weight:400;display:block}
.menu-item .price{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--navy);white-space:nowrap}
/* real menu artwork board (Jim's own menu file, framed) */
.menu-board{max-width:780px;margin:48px auto 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:16px}
.menu-board a{display:block;line-height:0;border-radius:7px;overflow:hidden}
.menu-board img{width:100%;height:auto;display:block;border-radius:7px;transition:transform .3s ease}
.menu-board a:hover img{transform:scale(1.015)}

/* reviews */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.review{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);border-top:4px solid var(--teal)}
.review .stars{color:#f5b301;font-size:16px;letter-spacing:2px;margin-bottom:12px}
.review p{font-size:15.5px}
.review .who{margin-top:14px;font-weight:700;font-size:14px;color:var(--grey)}

/* enquiry / forms */
.enquiry-panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:44px;margin-top:48px}
form.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form.enquiry .full{grid-column:1/-1}
form.enquiry label{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--navy);display:block;margin-bottom:7px}
form.enquiry input,form.enquiry select,form.enquiry textarea{width:100%;padding:14px 16px;border:1.5px solid #d5e2ea;border-radius:8px;font-family:inherit;font-size:16px;background:#fbfdfe}
form.enquiry input:focus,form.enquiry select:focus,form.enquiry textarea:focus{outline:2px solid var(--teal);border-color:var(--teal)}
form.enquiry .btn{grid-column:1/-1;justify-self:start}

/* page hero (inner pages), navy band, unlike FBH's pale gradient */
.page-hero{background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 100%);padding:74px 0 66px;color:#fff}
.page-hero h1{color:#fff}
.page-hero .sub{color:#bcd0ea;margin-top:14px}

/* cta band */
.band{background:linear-gradient(120deg,#0aa2aa,var(--teal));border-radius:16px;padding:58px 54px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band h2{color:var(--navy)}
.band p{color:#0b3f4a;max-width:520px;margin-top:10px;font-weight:600}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;margin-top:48px}
.info-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:38px}
.info-row{display:flex;gap:14px;margin-bottom:16px;font-size:16px}
.info-row .ico{width:40px;height:40px;flex:none;border-radius:8px;background:var(--paler);display:grid;place-items:center;font-size:17px}
.map-slot{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:380px;background:var(--paler)}
.map-slot iframe{width:100%;height:100%;min-height:380px;border:0}
.hours{width:100%;border-collapse:collapse;margin-top:8px}
.hours td{padding:9px 0;border-bottom:1px dashed #dde8ee;font-size:15.5px}
.hours td:last-child{text-align:right;font-weight:700;color:var(--navy)}

/* footer */
footer.site{background:#001d52;color:#b6c8e2;margin-top:92px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:66px 0 48px}
footer.site h4{color:#fff;font-family:'Montserrat',sans-serif;font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
footer.site a{color:#b6c8e2;text-decoration:none;display:block;margin-bottom:10px;font-size:15px}
footer.site a:hover{color:var(--teal)}
footer.site .fine{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;font-size:13.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* responsive */
@media (max-width:940px){
  .hero .grid,.split,.split.rev{grid-template-columns:1fr}
  .split.rev .photo{order:0}
  .svc-grid,.review-grid{grid-template-columns:1fr}
  .menu-cols{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  form.enquiry{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
  /* anchored to the header, not the viewport, so the brand band above it cannot
     push the nav bar down and leave the dropdown sitting over the top of it. */
  nav.main{position:absolute;inset:auto 0 auto 0;top:100%;background:var(--navy);flex-direction:column;padding:26px;gap:20px;box-shadow:var(--shadow-lg);display:none}
  nav.main.open{display:flex}
  /* the big logo sits in the band above, so the bar would otherwise be a lone
     hamburger floating in navy. Label it. */
  .menu-toggle{display:flex;align-items:center;gap:9px;margin-left:auto;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
  .menu-toggle::before{content:'Menu'}
  .menu-toggle svg{width:26px;height:26px}
  .band{padding:44px 30px}
}

/* honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* photo gallery strip, drop files into img/ to fill */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:34px}
.gallery .shot{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(135deg,var(--pale),var(--aqua));background-size:cover;background-position:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
/* ⛔ no aspect-ratio here. A span-2 tile is 2 columns PLUS the grid gap, so 8/3 made it ~5px
   taller than the 4/3 tiles beside it and stepped the bottom of the row. Matching the row
   height instead keeps every tile in a row flush. */
.gallery .shot.wide{grid-column:span 2;aspect-ratio:auto;height:100%;min-height:200px}
.gallery .shot span{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;font-size:13.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,20,60,.72))}
@media(max-width:640px){.gallery .shot.wide{grid-column:span 1;aspect-ratio:4/3}}
/* video slot */
.videoblock{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--navy);aspect-ratio:16/9}
.videoblock video{width:100%;height:100%;object-fit:cover;display:block}

section.pad .lead,section.pad-alt .lead{font-size:18.5px;color:var(--grey,#5b656f);max-width:680px;margin-top:12px;line-height:1.65}

/* icon system: inline SVG, inherits colour from its plate */
.ico svg{width:22px;height:22px;display:block}
.svc .ico svg{width:26px;height:26px}
.link-card .ico svg{width:26px;height:26px}
svg.i{width:1.05em;height:1.05em;vertical-align:-.16em;margin-right:.4em;flex:none}
.logo img{height:54px;width:auto;display:block}
/* icon stays 24px, the negative margin cancels the padding so nothing moves visually.
   The padding exists only to make the tap target 44px, the accessible minimum. */
.menu-toggle{padding:10px;margin:-10px}
.menu-toggle svg{width:24px;height:24px;display:block}
.ico{color:var(--navy)}
.spec svg.i{color:var(--navy);opacity:.75}
.footer-logo{margin-bottom:14px}
.footer-logo img{height:52px}

/* boatsonline listing cards */
.listings{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.listing{background:#fff;border:1px solid #e2e9f3;border-radius:var(--radius);padding:24px 24px 20px;text-decoration:none;display:block;transition:transform .15s ease,box-shadow .15s ease}
.listing:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.listing h3{font-size:18px;margin-bottom:6px;color:var(--navy)}
.listing p{color:var(--grey);font-size:14.5px}
.listing .more{display:inline-block;margin-top:12px;font-weight:700;font-size:14px;color:#12a5ad}
@media(max-width:900px){.listings{grid-template-columns:1fr}}

/* ============================================================
   CINEMATIC LAYER, Sep 2026
   Full-bleed photography, editorial type, fewer boxes.
   Plus a bright colourway switcher Jim can try on the page.
   ============================================================ */

:root{
  --deep:#001d52;
  --accent-ink:#12a5ad;
  --band-a:#0aa2aa;
}

/* ---------- colourways, all bright, page stays white ---------- */
html[data-theme="cockburn"]{
  --navy:#10406e; --navy2:#17518a; --deep:#0b3055;
  --teal:#46d6e8; --aqua:#7dd8e6; --pale:#c6ecf5; --paler:#edf8fc;
  --accent-ink:#0f8ea8; --band-a:#0f96b4;
  --shadow:0 8px 26px rgba(16,64,110,.12); --shadow-lg:0 16px 44px rgba(16,64,110,.18);
}
html[data-theme="sunset"]{
  --navy:#1d3557; --navy2:#2b4a75; --deep:#16283f;
  --teal:#ffb454; --aqua:#ffd28a; --pale:#ffe6c2; --paler:#fff6ea;
  --accent-ink:#d2761b; --band-a:#ff9e42;
  --shadow:0 8px 26px rgba(29,53,87,.12); --shadow-lg:0 16px 44px rgba(29,53,87,.18);
}
html[data-theme="seagrass"]{
  --navy:#123f3a; --navy2:#1a5750; --deep:#0d2f2b;
  --teal:#5fe0a8; --aqua:#97e8c6; --pale:#c9f2e0; --paler:#edfbf5;
  --accent-ink:#12967a; --band-a:#17ab8b;
  --shadow:0 8px 26px rgba(18,63,58,.12); --shadow-lg:0 16px 44px rgba(18,63,58,.18);
}

/* make the previously hardcoded colours follow the theme */
.topbar{background:var(--deep)}
footer.site{background:var(--deep)}
section .kicker,.svc .more,.listing .more,.hero h1 .accent{color:var(--accent-ink)}
.band{background:linear-gradient(120deg,var(--band-a),var(--teal))}

/* ---------- full-bleed cinematic hero, video slides ---------- */
/* every .slide sits in the same grid cell, so the section keeps a real height
   and the slides cross-fade on top of each other */
.chero{position:relative;display:grid;grid-template-areas:"stack";min-height:min(88vh,860px);overflow:hidden;background:var(--navy)}
.chero .slide{grid-area:stack;position:relative;display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.chero .slide.is-active{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.chero .media{position:absolute;inset:0;overflow:hidden}
.chero .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03)}
/* the still is the poster and the fallback. video only fades in once it really loads,
   so a missing mp4 leaves a clean photo instead of a black box */
.chero video.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.chero .slide.has-video video.vid{opacity:1}
/* second, left-hand wash so the type stays readable over a busy shop or cafe frame */
.chero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,16,45,.62) 0%,rgba(0,16,45,.18) 52%,rgba(0,16,45,0) 78%),linear-gradient(180deg,rgba(0,16,45,.55) 0%,rgba(0,16,45,.30) 32%,rgba(0,16,45,.88) 100%)}
.chero .wrap{position:relative;z-index:2;padding-top:150px;padding-bottom:132px;width:100%}
.chero .kicker{color:#fff;opacity:.9}
.chero h1{color:#fff;max-width:16ch;margin-top:16px;font-size:clamp(42px,6.4vw,86px);line-height:1.02;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,10,30,.35)}
.chero h1 .accent{color:var(--teal)}
.chero .sub{color:#dfeaf3;max-width:600px;margin-top:22px;font-size:19px}
.chero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* copy lifts in behind the fade */
.chero .slide .wrap>*{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.chero .slide.is-active .wrap>*{opacity:1;transform:none}
.chero .slide.is-active .wrap>.kicker{transition-delay:.10s}
.chero .slide.is-active .wrap>h1{transition-delay:.18s}
.chero .slide.is-active .wrap>.sub{transition-delay:.28s}
.chero .slide.is-active .wrap>.cta-row{transition-delay:.36s}
.chero .hero-foot{position:absolute;z-index:3;left:max(24px,calc(50vw - 566px));right:max(24px,calc(50vw - 566px));bottom:30px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;pointer-events:none}
.chero .scroll-note{color:rgba(255,255,255,.7);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-family:'Montserrat',sans-serif;font-weight:700}
.chero .hero-tabs{display:flex;gap:10px;flex-wrap:wrap;pointer-events:auto}
.chero .ht{appearance:none;background:transparent;border:0;padding:0;margin:0;cursor:pointer;text-align:left;width:158px;font-family:'Montserrat',sans-serif}
.chero .ht .lbl{display:block;color:rgba(255,255,255,.66);font-weight:700;font-size:13px;letter-spacing:.02em;padding-bottom:9px;transition:color .3s ease}
.chero .ht:hover .lbl,.chero .ht.is-on .lbl{color:#fff}
.chero .ht .bar{display:block;height:2px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden}
.chero .ht .bar i{display:block;height:100%;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left center}
.chero .ht.is-on .bar i{transform:scaleX(1);transition:transform linear var(--dur,7s)}
.chero .ht.is-on.no-anim .bar i{transition:none;transform:scaleX(0)}
.chero .ht:focus-visible{outline:2px solid var(--teal);outline-offset:6px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  .chero .slide,.chero .slide .wrap>*,.chero video.vid,.chero .ht.is-on .bar i{transition:none}
  .chero .slide .wrap>*{opacity:1;transform:none}
}

/* ---------- proof strip, four across, one line, full width ---------- */
.proof{background:#fff;border-bottom:1px solid #e6eef4}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof .item{display:flex;gap:14px;align-items:center;padding:26px 26px 26px 0;border-right:1px solid #e6eef4}
.proof .item:last-child{border-right:0}
.proof .item:not(:first-child){padding-left:26px}
.proof .ico{width:40px;height:40px;flex:none;border-radius:9px;background:var(--paler);display:grid;place-items:center;color:var(--navy)}
.proof b{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:15.5px;color:var(--navy);line-height:1.2}
.proof span.t{display:block;font-size:13.5px;color:var(--grey);line-height:1.35;margin-top:2px}

/* ---------- editorial photo index, replaces the white icon cards ---------- */
.editorial{background:var(--navy);padding:88px 0 96px}
.editorial h2,.editorial .lead{color:#fff}
.editorial .lead{color:#c3d5ea;max-width:640px;margin-top:14px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(300px,auto);gap:16px;margin-top:46px}
.tile{position:relative;overflow:hidden;border-radius:12px;text-decoration:none;display:flex;align-items:flex-end;background:#062a55}
.tile .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover .bg{transform:scale(1.06)}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,55,.18) 0%,rgba(0,20,55,.44) 46%,rgba(0,20,55,.90) 100%)}
.tile .cap{position:relative;width:100%;padding:26px 24px 24px;z-index:2}
.tile:not(.big) .veil{background:linear-gradient(180deg,rgba(0,20,55,.10) 0%,rgba(0,20,55,.58) 40%,rgba(0,20,55,.94) 100%)}
.tile h3,.tile p{text-shadow:0 1px 14px rgba(0,14,38,.5)}
.tile h3{color:#fff;font-size:23px;letter-spacing:-.01em}
.tile p{color:#d5e3f0;font-size:14.5px;margin-top:6px;line-height:1.5;max-width:38ch}
.tile .go{display:inline-block;margin-top:12px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.big h3{font-size:34px}
.tile.big p{font-size:16px;max-width:44ch}
.tile.wide{grid-column:span 2}

/* ---------- full-bleed statement band ---------- */
.statement{position:relative;min-height:520px;display:grid;place-items:center;text-align:center;overflow:hidden;background:var(--navy)}
.statement .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.statement .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,16,45,.62),rgba(0,16,45,.72))}
.statement .inner{position:relative;z-index:2;max-width:900px;padding:96px 24px}
.statement .kicker{color:var(--teal)}
.statement h2{color:#fff;font-size:clamp(30px,4.4vw,50px);margin-top:16px;line-height:1.16}
.statement p{color:#dbe7f2;font-size:18.5px;margin-top:20px;max-width:680px;margin-left:auto;margin-right:auto}

/* ---------- editorial split rows, photo bleeds taller ---------- */
.split.cine{gap:70px;align-items:center}
.split.cine .photo{aspect-ratio:4/4.3;border-radius:14px}
.split.cine h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em}

/* ---------- video, full width, cinematic ---------- */
.videowrap{max-width:1400px;margin:0 auto;padding:0 24px}
.videowrap .videoblock{border-radius:14px;box-shadow:var(--shadow-lg);aspect-ratio:21/9}

/* ---------- colourway switcher ---------- */
.cw{position:fixed;right:18px;bottom:18px;z-index:900;font-family:'Montserrat',sans-serif}
.cw-toggle{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #dde7ef;border-radius:999px;padding:10px 16px;box-shadow:0 10px 30px rgba(0,25,70,.18);cursor:pointer;font-weight:700;font-size:13px;color:var(--navy)}
.cw-toggle .dot{width:14px;height:14px;border-radius:50%;background:var(--teal);border:1px solid rgba(0,0,0,.08)}
.cw-panel{position:absolute;right:0;bottom:56px;width:250px;background:#fff;border:1px solid #dde7ef;border-radius:14px;box-shadow:0 18px 50px rgba(0,25,70,.22);padding:16px;display:none}
.cw.open .cw-panel{display:block}
.cw-panel h5{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:700;margin-bottom:4px}
.cw-panel .note{font-family:'Source Sans 3',sans-serif;font-size:12.5px;color:var(--grey);line-height:1.45;margin-bottom:12px}
.cw-opt{display:flex;align-items:center;gap:11px;width:100%;background:none;border:1px solid #e7eef4;border-radius:10px;padding:9px 11px;cursor:pointer;margin-bottom:8px;text-align:left}
.cw-opt:last-child{margin-bottom:0}
.cw-opt.on{border-color:var(--navy);background:var(--paler)}
.cw-opt .sw{width:30px;height:20px;border-radius:5px;flex:none;overflow:hidden;display:flex}
.cw-opt .sw i{display:block;flex:1;height:100%}
.cw-opt b{font-size:13px;color:var(--navy);font-weight:700}
.cw-opt span{display:block;font-family:'Source Sans 3',sans-serif;font-size:11.5px;color:var(--grey)}

/* ---------- Sep 13 additions: quick links, storage options, feature checks, cafe phone
   callout, partners, gallery groups. All on the theme variables. ---------- */
/* 15 Sep: the big hero logo was removed, so the hero goes back to its original height and
   top padding. The .hero-brand rules are gone with it. Logo is top bar + footer only. */
.quick{background:var(--white);border-bottom:1px solid var(--pale)}
.quick .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding-top:16px;padding-bottom:16px}
.quick a{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--paler);color:var(--navy);text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;padding:18px 14px;border-radius:10px;border:1px solid var(--pale);transition:transform .15s ease,background .15s ease}
.quick a:hover{transform:translateY(-2px);background:var(--pale)}
.quick a svg{width:22px;height:22px;flex:none;color:var(--accent-ink)}
.opt-intro{text-align:center;max-width:720px;margin:0 auto}
.opt-intro .lead{margin-left:auto;margin-right:auto}
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.option{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.option .photo{aspect-ratio:4/3;background:linear-gradient(135deg,var(--pale),var(--aqua));background-size:cover;background-position:center}
.option .body{padding:24px 24px 26px}
.option h3{margin-bottom:8px}
.option p{color:var(--grey);font-size:15.5px}
.checks{list-style:none;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.checks li{padding-left:34px;position:relative;font-weight:600;color:var(--ink);font-size:16px}
.checks li::before{content:'✓';position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:6px;background:var(--teal);color:var(--navy);font-size:13px;font-weight:800;display:grid;place-items:center}
.callout-phone{background:var(--paler);border-top:1px solid var(--pale);border-bottom:1px solid var(--pale)}
.callout-phone .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:30px;padding-bottom:30px}
.callout-phone p{font-family:'Montserrat',sans-serif;font-weight:700;font-size:clamp(18px,2.2vw,24px);color:var(--navy);max-width:560px;line-height:1.3}
.callout-phone a.tel{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(30px,4.6vw,52px);color:var(--navy);text-decoration:none;letter-spacing:-.02em;white-space:nowrap;display:inline-flex;align-items:center;gap:12px}
.callout-phone a.tel svg{width:.8em;height:.8em;color:var(--accent-ink)}
.callout-phone a.tel:hover{color:var(--accent-ink)}
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:40px}
.partners .listing p{margin-top:4px}
.gallery-group{margin-top:64px}
.gallery-group:first-of-type{margin-top:0}
.gallery-group h2{font-size:clamp(24px,3vw,32px)}
.gallery-group .gallery{margin-top:22px}
@media (max-width:1240px){nav.main{gap:18px} nav.main a{font-size:14px}}

/* ---------- tablet ---------- */
@media (max-width:940px){
  .quick .wrap{grid-template-columns:repeat(3,1fr)}
  .options{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(260px,auto)}
  .tile.big{grid-column:span 2;grid-row:span 1}
  .proof .wrap{grid-template-columns:1fr 1fr}
  .proof .item{border-right:0;border-bottom:1px solid #e6eef4;padding:20px 18px}
  .proof .item:nth-child(odd){border-right:1px solid #e6eef4}
  .proof .item:nth-last-child(-n+2){border-bottom:0}
  .proof .item:not(:first-child){padding-left:18px}
  .split.cine .photo{aspect-ratio:4/3}
  nav.main{position:absolute;inset:auto 0 auto 0;top:100%;background:var(--navy);flex-direction:column;align-items:stretch;padding:22px 24px 26px;gap:18px}
  nav.main a{font-size:17px;padding:4px 0}
  nav.main .btn{text-align:center}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  body{font-size:16px;line-height:1.65}
  .wrap{padding:0 18px}
  h1{font-size:clamp(32px,9vw,42px)}
  h2{font-size:clamp(26px,7.4vw,34px)}
  h3{font-size:20px}
  .sub,section.pad .lead,section.pad-alt .lead{font-size:16.5px}
  .kicker{font-size:11.5px;letter-spacing:.16em}
  .btn{font-size:15px;padding:15px 24px}
  .btn-outline{padding:13px 22px}

  .topbar{font-size:12.5px;padding:7px 0}
  .topbar .wrap{justify-content:center;gap:5px 14px;text-align:center}
  header.site .wrap{height:68px}
  .logo img{height:40px}
  .brandband{padding:20px 0 16px}
  .brandband img{height:56px}

  .chero{min-height:88vh}
  .chero .wrap{padding-top:180px;padding-bottom:104px}
  .quick .wrap{grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;padding-bottom:12px}
  .quick a{font-size:14px;padding:14px 10px}
  .quick a:last-child{grid-column:span 2}
  .callout-phone .wrap{justify-content:center;text-align:center;padding-top:24px;padding-bottom:24px}
  .callout-phone p{max-width:none}
  .chero h1{font-size:clamp(34px,10.5vw,46px);max-width:none}
  .chero .sub{font-size:16.5px;margin-top:16px}
  .chero .cta-row{margin-top:26px;flex-direction:column;align-items:stretch}
  .chero .cta-row .btn{width:100%}
  .chero .scroll-note{display:none}
  .chero .hero-foot{bottom:22px;left:24px;right:24px}
  .chero .hero-tabs{width:100%;gap:8px}
  .chero .ht{flex:1 1 0;width:auto;min-width:0}
  .chero .ht .lbl{font-size:11.5px;padding-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .proof .wrap{grid-template-columns:1fr}
  .proof .item{border-right:0!important;border-bottom:1px solid #e6eef4;padding:16px 0}
  .proof .item:last-child{border-bottom:0}
  .proof .item:not(:first-child){padding-left:0}

  .editorial{padding:58px 0 62px}
  .tiles{grid-template-columns:1fr;grid-auto-rows:minmax(230px,auto);gap:12px;margin-top:32px}
  .tile.big,.tile.wide{grid-column:span 1;grid-row:span 1}
  .tile .veil{background:linear-gradient(180deg,rgba(0,20,55,.10) 0%,rgba(0,20,55,.58) 40%,rgba(0,20,55,.94) 100%)}
  .tile.big h3{font-size:26px}
  .tile.big p{font-size:14.5px}
  .tile .cap{padding:20px}

  .statement{min-height:auto}
  .statement .inner{padding:64px 18px}

  section.pad,section.pad-alt{padding:56px 0}
  .split.cine{gap:26px}
  .split li{font-size:15.5px}
  .rates td,.rates th{padding:14px 14px;font-size:15px}
  .menu-block{padding:26px 22px}
  .enquiry-panel{padding:26px 20px;margin-top:32px}
  .review{padding:24px 22px}
  .info-card{padding:26px 22px}
  .map-slot,.map-slot iframe{min-height:300px}

  .band{padding:32px 22px;text-align:center;justify-content:center}
  .band p{margin-left:auto;margin-right:auto}
  .band .btn{width:100%}
  .videowrap{padding:0}
  .videowrap .videoblock{border-radius:0;aspect-ratio:16/9}

  footer.site{margin-top:60px}
  footer.site .cols{grid-template-columns:1fr;gap:26px;padding:46px 0 34px}
  footer.site .fine{justify-content:center;text-align:center;font-size:12.5px}

  .cw{right:12px;bottom:12px}
  .cw-panel{width:min(74vw,250px)}
}

/* ---------- 15 Sep: mobile tap targets. Apple/WCAG want 44px minimum. Every rule below
   adds padding for the touch area and cancels it with an equal negative margin, so the
   layout looks identical and only the hit area grows. ---------- */
@media(max-width:640px){
  footer.site a{padding:10px 0;margin-bottom:0;min-height:44px}
  .chero .hero-tabs .ht{padding:11px 0;margin:-11px 0}
}