/* ===================================================================
   Reel Boats & Maintenance — site.css  (v2, brand refresh)
   Light ocean theme · white base, brand cyan #00aad5,
   deep navy #0c3247 text, brand yellow #fdc42f accents.
   Sister design to Midwest Technologies (an LSLI Company).
   =================================================================== */

:root{
  --base:#ffffff;
  --base-2:#eef7fc;            /* pale sky for alt sections */
  --sand:#fdf8ec;              /* warm sand tint */
  --card:#f4fafe;
  --ink:#0c3247;               /* deep ocean navy text */
  --ink-soft:#17435c;
  --muted:#46697e;             /* blue-gray secondary text */
  --blue:#00aad5;              /* logo cyan, sampled from the supplied artwork */
  --blue-deep:#0d7ba0;         /* readable blue for small text/icons */
  --blue-bright:#4ecbf0;
  --navy:#0f3a52;
  --yellow:#fdc42f;            /* logo yellow, sampled from the supplied artwork */
  --yellow-deep:#d19c0a;
  --line:rgba(15,58,82,.26);
  --line-2:rgba(15,58,82,.42);
  --grad:linear-gradient(120deg,#00aad5,#0d7ba0 60%,#0c3247);
  /* Button gradient starts deeper than the logo cyan on purpose: white text on
     #00aad5 is only 2.7:1, so the left end of every button was unreadable.
     This keeps the cyan character while clearing 4.5:1 the whole way across.
     The bright logo cyan stays in --blue and the display gradients below. */
  --grad-btn:linear-gradient(120deg,#0480a3,#0b6f92 55%,#0a6183);
  /* Announcement bar: same cyan-to-navy family and same 120deg angle as the
     button, but starting where the button's gradient ends. The button's light
     end (#0480a3) would put the bar's smaller text at 3.7:1; this range holds
     5.9:1 or better the whole way across. */
  --grad-topbar:linear-gradient(120deg,#0a6183,#0d4c68 55%,#0f3a52);
  --grad-sun:linear-gradient(120deg,#4ecbf0,#00aad5 45%,#fdc42f);
  /* accent wire is blue-only: the yellow stop made the trim lines read like
     party streamers; yellow stays in the eyebrow dots and the CTA button */
  --grad-wave:linear-gradient(90deg,transparent,#4ecbf0,#00aad5 50%,#0d7ba0,transparent);
  --grad-soft:linear-gradient(135deg,rgba(0,170,213,.14),rgba(253,196,47,.10));
  --r:16px;
  --r-sm:12px;
  /* Outfit replaces Fredoka: the rounded Fredoka forms read as a kids' brand.
     Outfit keeps the geometric friendliness without the bubble. */
  --f-disp:"Outfit",system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --s--1:clamp(.8rem,.76rem + .2vw,.9rem);
  --s-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --s-1:clamp(1.2rem,1.06rem + .55vw,1.5rem);
  --s-2:clamp(1.7rem,1.35rem + 1.5vw,2.55rem);
  --s-3:clamp(2.3rem,1.7rem + 3vw,4.1rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  background:var(--base);color:var(--ink);
  font-family:var(--f-body);font-size:var(--s-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--f-disp);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}

.pad{padding-inline:clamp(1.15rem,5vw,4.5rem)}
.eyebrow{font-size:var(--s--1);letter-spacing:.22em;text-transform:uppercase;color:var(--blue-deep);font-weight:600;
  display:inline-flex;align-items:center;gap:.5em}
.eyebrow::before{content:"";width:.62em;height:.62em;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(253,196,47,.3)}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
::selection{background:rgba(0,170,213,.28);color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.95rem 1.5rem;border-radius:5px;font-weight:600;font-size:var(--s-0);
  font-family:var(--f-body);cursor:pointer;border:0;line-height:1;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,background .3s;
  will-change:transform;
}
.btn .ic{width:18px;height:18px;position:relative;z-index:2}
.btn-grad{position:relative;color:#fff;box-shadow:0 8px 20px rgba(0,120,155,.34);
  background:var(--grad-btn)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,120,155,.44)}
.btn-grad:active{transform:translateY(0)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--blue);transform:translateY(-2px);color:var(--blue-deep)}
.btn-ghost-dark{border:1px solid rgba(12,50,71,.45);color:var(--ink);background:rgba(255,255,255,.75);backdrop-filter:blur(4px)}
.btn-ghost-dark:hover{border-color:var(--blue);transform:translateY(-2px);color:var(--blue-deep)}
.btn-sun{background:var(--yellow);color:var(--navy);box-shadow:0 8px 24px rgba(217,164,22,.3)}
.btn-sun:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(217,164,22,.45)}

/* ---------- Utility topbar ---------- */
.topbar{background:var(--grad-topbar);color:rgba(255,255,255,.9);font-size:.82rem}
/* spans the true page edges, matching the header below it */
.topbar-inner{width:100%;padding:.5rem clamp(1.15rem,5vw,4.5rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.topbar-note{font-family:var(--f-disp);font-weight:500;letter-spacing:.04em}
.topbar-links{display:flex;align-items:center;gap:1.4rem;white-space:nowrap}
.topbar-links a{color:#fff;font-weight:600}
.topbar-links a:hover{color:var(--yellow)}
@media (max-width:860px){.topbar-note{display:none}.topbar-inner{justify-content:center}}
/* on phones keep the phone number and the address, drop the hours */
@media (max-width:560px){.topbar-links .tb-hours{display:none}}
@media (max-width:380px){.topbar-links{gap:.9rem;font-size:.78rem}}

/* ---------- Header (solid white, sticky) ---------- */
header{
  position:sticky;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1.15rem,5vw,4.5rem);
  background:#fff;
  border-bottom:1px solid rgba(12,50,71,.18);
  transition:box-shadow .3s;
}
header.scrolled{box-shadow:0 4px 18px rgba(12,50,71,.12)}
.brand{display:flex;align-items:center;gap:.6rem}
/* supplied brand lockup (Reel Boats & maintenance).
   It is a stacked lockup whose "& maintenance" line is only ~9.5% of the
   artwork height, so the logo is set large enough for that line to read. */
.brand-logo{height:72px;width:auto;display:block}
.brand-logo-foot{height:124px}
@media (max-width:900px){.brand-logo{height:62px}}
@media (max-width:520px){.brand-logo{height:60px}.brand-logo-foot{height:96px}}
.brand-mark{height:34px;width:auto}
.brand-name{font-family:var(--f-disp);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;line-height:1;
  display:flex;flex-direction:column;color:var(--blue)}
.brand-name-2{font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:lowercase;color:var(--yellow-deep)}
/* Three zones: logo left, nav centred, action right. With the nav pushed hard
   right and nothing after it, over half the bar was empty white, which the
   tall stacked logo made more obvious. */
.mainnav{display:flex;gap:.2rem;margin-inline:auto}
.mainnav a{position:relative;font-size:.92rem;font-weight:500;color:var(--muted);padding:.55rem .9rem;transition:color .25s}
.mainnav a:hover{color:var(--blue-deep)}
.mainnav a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.2rem;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.mainnav a:hover::after,.mainnav a[aria-current="page"]::after{transform:scaleX(1)}
.mainnav a[aria-current="page"]{color:var(--blue-deep);font-weight:600}
.header-actions{display:flex;align-items:center;gap:.6rem}
/* the drawer carries its own "Get a quote", so this one steps aside on mobile */
.header-cta{padding:.8rem 1.35rem;min-height:44px}
@media (max-width:900px){.header-cta{display:none}}

.menu-toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;
  align-items:center;justify-content:center;background:#fff;
  border:1px solid var(--line);border-radius:12px;cursor:pointer}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

body.nav-locked{overflow:hidden}
/* The drawer and its scrim slide out from UNDER the sticky header: both sit
   below it in the stacking order (header is z-index 200) and start at its
   bottom edge, so the header stays fully visible and nothing is cast over it.
   --drawer-top is the header's bottom edge, measured in JS as the drawer opens
   (the header is sticky, so that edge moves with scroll). */
.nav-scrim{position:fixed;top:var(--drawer-top,0);left:0;right:0;bottom:0;z-index:180;background:rgba(12,50,71,.5);
  opacity:0;transition:opacity .35s var(--ease)}
.nav-scrim.in{opacity:1}
.nav-scrim[hidden]{display:none}
.mobilenav{position:fixed;right:0;z-index:190;width:min(82vw,320px);
  top:var(--drawer-top,0);height:calc(100svh - var(--drawer-top,0px));
  background:#fff;border-left:1px solid var(--line);box-shadow:-26px 0 64px rgba(12,50,71,.34);
  display:flex;flex-direction:column;gap:.3rem;overflow-y:auto;
  padding:1.1rem 1.4rem 2rem;
  transform:translateX(100%);transition:transform .4s var(--ease)}
.mobilenav[hidden]{display:none}
.mobilenav.open{transform:translateX(0)}
.mobilenav a{font-family:var(--f-disp);font-size:1.2rem;font-weight:500;padding:.85rem .4rem;border-bottom:1px solid var(--line);color:var(--ink)}
.mobilenav a[aria-current="page"]{color:var(--blue-deep)}
.mobilenav .btn{margin-top:1.2rem;justify-content:center;border-bottom:0}
.mobilenav a.btn-grad{color:#fff}

@media (max-width:900px){
  .mainnav{display:none}
  .menu-toggle{display:flex}
}
/* Safety net: at desktop the toggle is hidden, so the drawer must never be able
   to stay open or keep the page scroll-locked, whatever state JS is in. */
@media (min-width:901px){
  .mobilenav,.nav-scrim{display:none !important}
  body.nav-locked{overflow:visible}
}

/* ---------- Layout ---------- */
main{position:relative}
.band{max-width:var(--maxw);margin-inline:auto;padding-block:clamp(3.5rem,8vw,7rem)}
.band-alt{background:var(--base-2)}
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.4rem 2rem;margin-bottom:3rem}
.band-head h2{font-size:var(--s-3);margin-top:.6rem}
.band-sub{color:var(--muted);max-width:40ch;font-size:var(--s-0)}

/* ---------- Wave dividers (oceany section breaks) ---------- */
.wave-div{display:block;width:100%;height:56px;margin-top:-1px}
.wave-div svg{display:block;width:100%;height:100%}

/* ---------- Hero (bright photo, light wash, ink type) ----------
   The photo stays sunny: instead of darkening it for white text, a white
   gradient lifts the left side and the type is the site's navy ink. The
   right half of the image is close to untouched. */
.hero{position:relative;min-height:clamp(560px,82svh,860px);display:grid;align-content:center;
  padding-top:3.5rem;padding-bottom:3.5rem;overflow:hidden;color:var(--ink);isolation:isolate}
.hero-slides{position:absolute;inset:0;z-index:-3}
.hero-slide{position:absolute;inset:0;background:center 55%/cover no-repeat;
  opacity:0;transition:opacity 1.4s ease}
.hero-slide.on{opacity:1}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  linear-gradient(92deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 30%,rgba(255,255,255,.6) 52%,rgba(255,255,255,.16) 72%,rgba(255,255,255,0) 88%),
  linear-gradient(180deg,rgba(238,247,252,.45),transparent 28%)}
/* soft waterline glow instead of Midwest's drafting hairlines */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 78% 78%,rgba(0,170,213,.22),transparent 62%)}
.hero-inner{max-width:var(--maxw);margin-inline:auto;width:100%}
.hero h1{font-size:clamp(2.6rem,1.6rem + 3.8vw,4.9rem);font-weight:600;margin:1.1rem 0 1.3rem;color:var(--ink);max-width:17ch}
.hero .lead{font-size:var(--s-1);color:var(--ink-soft);max-width:46ch;font-weight:400;line-height:1.55}
.hero .eyebrow{color:var(--blue-deep)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:2rem}
/* trust strip carries its own glass so it stays readable over the busy yard */
.hero-trust{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;margin-top:2.6rem;width:fit-content;
  padding:1rem 1.4rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.62);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(12,50,71,.16);font-size:var(--s--1);color:var(--muted)}
.hero-trust li{display:flex;flex-direction:column;gap:.1rem}
.hero-trust b{color:var(--ink);font-family:var(--f-disp);font-size:1.3rem;font-weight:600}
@media (max-width:820px){
  .hero{min-height:auto;padding-top:3rem}
}

/* framed photo (contact page) */
.hero-media{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 18px 42px rgba(12,50,71,.22);aspect-ratio:5/4}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media figcaption{position:absolute;left:1rem;bottom:1rem;z-index:3;display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-disp);font-weight:500;font-size:.84rem;color:#fff;
  background:rgba(15,58,82,.55);backdrop-filter:blur(8px);padding:.45rem .85rem;border-radius:100px;border:1px solid rgba(255,255,255,.25)}
.hero-media figcaption .dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(253,196,47,.6)}70%{box-shadow:0 0 0 9px rgba(253,196,47,0)}100%{box-shadow:0 0 0 0 rgba(253,196,47,0)}}
.hero-media-arc{position:absolute;top:0;left:0;right:0;height:3px;z-index:3;background:var(--grad-wave)}

.cta-inner{position:relative;z-index:1}

/* ---------- Service cards (light) ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.gcard{position:relative;border-radius:var(--r);background:#fff;
  padding:1.9rem;display:flex;flex-direction:column;gap:.85rem;color:var(--ink);
  border:1px solid var(--line);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.gcard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:1;
  background:var(--grad-sun);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.gcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;opacity:0;z-index:0;transition:opacity .4s;
  background:linear-gradient(to top,rgba(0,170,213,.12),transparent)}
.gcard > *{position:relative;z-index:2}
.gcard:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 18px 38px rgba(12,50,71,.18)}
.gcard:hover::before{opacity:1}
.gcard:hover::after{opacity:1}
.gcard-ic{display:block;color:var(--blue-deep);transition:color .35s,transform .45s var(--ease)}
.gcard-ic svg{width:34px;height:34px}
.gcard:hover .gcard-ic{color:var(--blue);transform:translateY(-3px)}
.gcard h3{font-size:var(--s-1);color:var(--ink)}
.gcard p{color:var(--muted);font-size:.97rem}
.gcard-cta{background:linear-gradient(140deg,#e8f5fd,#fdf4d8);border-color:rgba(0,170,213,.45)}
.card-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;
  font-family:var(--f-disp);font-weight:600;color:var(--blue-deep)}
.card-link .ic{width:18px;height:18px;transition:transform .3s var(--ease)}
.card-link:hover .ic{transform:translateX(4px)}
@media (max-width:560px){.grid-cards{grid-template-columns:1fr}}

/* ---------- Gallery (editorial: mixed sizes, quiet captions) ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem;
  grid-auto-rows:clamp(200px,24vw,340px)}
.shot{position:relative;border-radius:14px;overflow:hidden;background:#e3eef5}
.shot:nth-child(1){grid-column:span 7;grid-row:span 2}
.shot:nth-child(2){grid-column:span 5}
.shot:nth-child(3){grid-column:span 5}
.shot:nth-child(4){grid-column:span 12;grid-row:span 1}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{position:absolute;left:.9rem;bottom:.9rem;z-index:2;
  font-family:var(--f-disp);font-weight:500;font-size:.86rem;color:#fff;letter-spacing:.01em;
  background:rgba(15,58,82,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.4rem .85rem;border-radius:100px;display:inline-flex;align-items:center;gap:.45rem}
.shot figcaption::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:0 0 auto}
.tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px){
  .gallery{grid-template-columns:1fr;grid-auto-rows:auto}
  .shot{grid-column:auto !important;grid-row:auto !important;aspect-ratio:16/10}
}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.about-img{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 34px rgba(12,50,71,.18)}
.about-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4}
.about-img-badge{position:absolute;left:1rem;bottom:1rem;z-index:2;
  font-family:var(--f-disp);font-weight:500;font-size:.82rem;padding:.5rem .9rem;border-radius:100px;
  background:rgba(15,58,82,.6);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22)}
.about-copy h2{font-size:var(--s-2);margin:.7rem 0 1.1rem}
.about-copy p{color:var(--muted)}
.ticks{margin:1.5rem 0;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.9rem;color:var(--ink);font-size:.98rem}
.ticks li::before{content:"";position:absolute;left:0;top:.15em;width:1.2rem;height:1.2rem;border-radius:50%;
  background:var(--grad-btn);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/72% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/72% no-repeat}
.partners{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.partners span{font-family:var(--f-disp);font-size:.82rem;font-weight:500;color:var(--blue-deep);
  padding:.5rem .95rem;border:1px solid rgba(0,170,213,.55);border-radius:5px;background:#fff}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}.about-img{order:-1}}

/* ---------- Service rows ---------- */
.srows{max-width:var(--maxw);margin-inline:auto}
.srow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(2rem,4vw,3.2rem)}
.srow + .srow{border-top:1px dashed rgba(0,170,213,.5)}
.srow-media{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(12,50,71,.16)}
.srow-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.srows .srow:nth-child(even) .srow-media{order:2}
/* standalone srow with the photo on the right (homepage bands) */
.srow-flip .srow-media{order:2}
.srow-ic{display:block;color:var(--blue-deep);margin-bottom:1rem}
.srow-ic svg{width:32px;height:32px}
.srow h2{font-size:var(--s-2);margin:.2rem 0 .8rem}
.srow p{color:var(--muted)}
.srow .ticks{margin-top:1.1rem}
@media (max-width:820px){
  .srow{grid-template-columns:1fr;gap:1.2rem}
  .srows .srow .srow-media,.srows .srow:nth-child(even) .srow-media,.srow-flip .srow-media{order:-1}
}

/* ---------- Capability strip ---------- */
.capstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.cap{position:relative;padding:1.3rem 1.2rem;border-radius:18px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1.5px solid rgba(12,50,71,.26);
  box-shadow:0 8px 22px rgba(12,50,71,.08),inset 0 1px 0 rgba(255,255,255,.85)}
.cap::before{content:"";position:absolute;top:0;left:1.2rem;width:40px;height:3px;background:var(--blue);border-radius:0 0 3px 3px}
.cap h3{font-size:var(--s-1);margin:.2rem 0 .4rem}
.cap p{color:var(--muted);font-size:.94rem}
@media (max-width:760px){.capstrip{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.capstrip{grid-template-columns:1fr}}

/* ---------- CTA banner (bright ocean, not black) ---------- */
.cta-banner{position:relative;overflow:hidden;background:linear-gradient(130deg,#0f4c6e,#1273a3 55%,#00aad5);color:#fff;margin-top:3rem}
.cta-banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(42% 85% at 14% 18%,rgba(92,194,239,.35),transparent 60%),
    radial-gradient(45% 90% at 92% 88%,rgba(253,196,47,.32),transparent 60%)}
.cta-inner{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:1.6rem 2.5rem;padding-block:clamp(2.6rem,6vw,4.4rem)}
.cta-inner h2{color:#fff;font-size:var(--s-3);max-width:18ch}
.cta-inner .eyebrow{color:#ffe9a8}
.cta-inner .eyebrow::before{background:var(--yellow)}
.cta-sub{color:rgba(255,255,255,.85);max-width:42ch;margin-top:.8rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.cta-banner .btn-grad{background:var(--yellow);color:var(--navy);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.cta-banner .btn-ghost-dark{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08)}
.cta-banner .btn-ghost-dark:hover{border-color:#fff}
.cta-wire{position:absolute;left:0;right:0;height:3px;z-index:2;background:var(--grad-wave);opacity:.8}
.cta-wire{top:0}
.cta-wire-bottom{top:auto;bottom:0}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,4vw,3.5rem)}
.contact-intro h2{font-size:var(--s-2);margin:.7rem 0 1rem}
.contact-lead{color:var(--muted);max-width:38ch}
.contact-meta{margin-top:2rem;display:grid;gap:1.2rem}
.contact-meta li{display:flex;align-items:center;gap:.9rem}
.cm-ic{flex:0 0 auto;display:grid;place-items:center;color:var(--blue-deep)}
.cm-ic svg{width:24px;height:24px}
.contact-meta b{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.1rem}
.contact-meta a{font-family:var(--f-disp);font-weight:500;font-size:1.05rem}
.contact-meta a:hover{color:var(--blue-deep)}
.contact-meta span span{font-family:var(--f-disp);font-weight:500;font-size:1.05rem}

.contact-form-wrap{position:relative;border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1.5px solid rgba(12,50,71,.28);overflow:hidden;
  box-shadow:0 14px 34px rgba(12,50,71,.12),inset 0 1px 0 rgba(255,255,255,.85)}
.contact-form-wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-sun);opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.quote-form{display:grid;gap:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{position:relative}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:1.35rem .95rem .55rem;
  transition:border-color .25s,box-shadow .25s;resize:vertical}
.field textarea{padding-top:1.5rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,170,213,.5)}
.field label{position:absolute;left:.95rem;top:.95rem;color:var(--muted);font-size:.95rem;
  pointer-events:none;transition:transform .2s var(--ease),color .2s,font-size .2s;transform-origin:left top}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  transform:translateY(-.55rem) scale(.78);color:var(--blue-deep)}
.field .opt{opacity:.6;font-size:.82em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-submit{justify-content:center;margin-top:.3rem;width:100%}
.btn-submit[aria-busy="true"]{opacity:.75;pointer-events:none}
.form-note{font-size:.92rem;min-height:1.2em;color:var(--muted)}
.form-note.ok{color:var(--blue-deep);font-weight:500}
.form-note.err{color:#c2391b}
.form-note a{color:inherit;text-decoration:underline}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:480px){.form-row{grid-template-columns:1fr}}

/* ---------- Footer (light sky, not black) ---------- */
footer{position:relative;overflow:hidden;margin-top:0;padding-block:3.2rem 2rem;
  background:var(--base-2);color:var(--muted);border-top:1px solid rgba(0,170,213,.4)}
footer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 120% at 12% 0%,rgba(92,194,239,.14),transparent 60%),
             radial-gradient(40% 120% at 90% 100%,rgba(253,196,47,.14),transparent 62%)}
.foot-grid{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:2rem;padding-bottom:2.5rem}
footer .brand-name{color:var(--blue)}
footer .brand-name-2{color:var(--yellow-deep)}
.foot-brand p{color:var(--muted);font-size:.92rem;margin-top:.9rem;max-width:30ch}
.foot-lsli{font-family:var(--f-disp);font-size:.8rem;letter-spacing:.08em;color:var(--blue-deep);margin-top:.6rem;display:block}
.foot-nav{display:flex;flex-direction:column;gap:.55rem}
.foot-nav a{color:var(--muted);font-size:.95rem}
.foot-nav a:hover{color:var(--ink)}
.foot-contact{display:flex;flex-direction:column;gap:.55rem;color:var(--muted);font-size:.95rem}
.foot-contact a:hover{color:var(--blue-deep)}
.foot-base{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;border-top:1px solid rgba(12,50,71,.2);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;color:var(--muted);font-size:.84rem}
.foot-credit{opacity:.85}
.foot-credit a{text-decoration:underline}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Local band (photo, lighter overlay) ---------- */
.localband{position:relative;width:100%;min-height:clamp(240px,32vw,400px);overflow:hidden;
  display:grid;align-items:center;margin-block:0}
/* the photo must paint UNDER the scrim: without explicit z-indexes the <img>
   comes later in tree order and covers ::before, leaving the type unreadable */
.localband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* bright band: white wash from the text side instead of a dark scrim */
.localband::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 38%,rgba(255,255,255,.4) 68%,rgba(255,255,255,.06) 100%),
  linear-gradient(180deg,rgba(255,255,255,.25),transparent 40%)}
.localband-overlay{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;width:100%;color:var(--ink)}
.localband-overlay .eyebrow{color:var(--blue-deep)}
.localband-overlay h2{color:var(--ink);font-size:var(--s-3);margin-top:.5rem}
.localband-wire{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:3;background:var(--grad-wave);opacity:.85}

/* ---------- Sub-page hero (light sky, not near-black) ---------- */
.subhero{position:relative;padding-top:5rem;padding-bottom:3.2rem;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#dff0fa,#eef7fc 70%,#ffffff)}
.subhero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(55% 90% at 10% 20%,rgba(92,194,239,.3),transparent 60%),
  radial-gradient(45% 95% at 90% 85%,rgba(253,196,47,.25),transparent 62%)}
.subhero-inner{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto}
.subhero .eyebrow{color:var(--blue-deep)}
.subhero h1{font-size:clamp(2.3rem,1.6rem + 3vw,3.9rem);margin:.7rem 0 .9rem;color:var(--ink)}
.subhero p{color:var(--muted);max-width:54ch;font-size:var(--s-1);line-height:1.5}

/* ---------- Scroll reveal ----------
   One signature move: content rises and settles with a soft overshoot, like
   something finding its level on water. Items in a row surface in sequence
   (--i is set by site.js). */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .5s ease-out,transform .78s cubic-bezier(.22,1.15,.36,1);
  transition-delay:calc(var(--i,0) * 90ms)}
.reveal.in{opacity:1;transform:none}
.hint{font-size:.8rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;transition-delay:0s}
  .hero-media figcaption .dot{animation:none}
}

/* ===================================================================
   v3 — “Rock pool” creative layer
   =================================================================== */

/* ---------- The pool: water-shaped photo collage (signature) ---------- */
.pool{position:relative;max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:30px;gap:0 1rem;padding-block:1.5rem}
.pool-shot{position:relative}
.pool-clip{position:absolute;inset:0;overflow:hidden;box-shadow:0 18px 40px rgba(12,50,71,.22)}
.pool-clip img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pool-shot:hover .pool-clip img{transform:scale(1.03)}
/* each shot is its own still water shape */
.pool-shot.p1{grid-column:1/7;grid-row:1/span 15}
.pool-shot.p1 .pool-clip{border-radius:var(--r)}
.pool-shot.p2{grid-column:7/12;grid-row:2/span 11}
.pool-shot.p2 .pool-clip{border-radius:var(--r)}
.pool-shot.p3{grid-column:2/7;grid-row:16/span 11;z-index:2}
.pool-shot.p3 .pool-clip{border-radius:var(--r)}
.pool-shot.p4{grid-column:7/13;grid-row:14/span 13}
.pool-shot.p4 .pool-clip{border-radius:var(--r)}
/* captions sit on the figure, outside the clipped curve, so they never get cut */
.pool-shot figcaption{position:absolute;left:12%;bottom:6%;z-index:3;
  font-family:var(--f-disp);font-weight:500;font-size:.86rem;color:#fff;
  background:rgba(15,58,82,.62);backdrop-filter:blur(6px);padding:.42rem .9rem;border-radius:100px;
  display:inline-flex;align-items:center;gap:.45rem;box-shadow:0 6px 16px rgba(15,58,82,.25);
  white-space:nowrap}
.pool-shot figcaption::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:0 0 auto}
/* floating accents in the pool */
@media (max-width:820px){
  .pool{display:flex;flex-direction:column;gap:1.2rem;grid-auto-rows:auto}
  .pool-shot{aspect-ratio:5/4;transform:none !important}
}

/* ---------- Tide: services drift at different heights ---------- */
.tide{position:relative;max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;align-items:start}
/* all four cards share one glass surface, one solid edge and one radius; a
   small vertical drift keeps the tide feel without reading as scattered */
.tcard{position:relative;z-index:1;border-radius:var(--r);padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1.5px solid rgba(12,50,71,.28);
  box-shadow:0 10px 26px rgba(12,50,71,.09),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .45s var(--ease),box-shadow .45s,border-color .3s}
.tcard:hover{transform:translateY(-4px);border-color:rgba(0,170,213,.6);
  box-shadow:0 18px 38px rgba(12,50,71,.18),inset 0 1px 0 rgba(255,255,255,.9)}
.tcard.t1{margin-top:1.6rem}
.tcard.t2{margin-top:0}
.tcard.t3{margin-top:2.2rem}
.tcard.t4{margin-top:.7rem}
.tcard h3{font-size:var(--s-1)}
.tcard p{color:var(--muted);font-size:.95rem}
.tcard .gcard-ic{margin-bottom:.1rem}
@media (max-width:980px){.tide{grid-template-columns:1fr 1fr}
  .tcard{margin-top:0 !important}
  .tcard:nth-child(even){transform:translateY(1.6rem)}}
@media (max-width:560px){.tide{grid-template-columns:1fr}
  .tcard:nth-child(even){transform:none}}

/* ---------- Pull-quote (editorial, replaces twin columns) ---------- */
.pull-quote{position:relative;max-width:900px;margin-inline:auto;text-align:center;padding-block:1rem}
.pull-quote .qmark{font-family:var(--f-disp);font-size:clamp(4rem,9vw,7rem);line-height:.6;color:var(--blue);opacity:.32;display:block}
.pull-quote blockquote{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.25;color:var(--ink);margin-top:.6rem}
.pull-quote blockquote em{font-style:normal;position:relative;white-space:nowrap}
.pull-quote blockquote em::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.34em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q15 2 30 7 T60 6 T90 8 T120 5' fill='none' stroke='%23fdc42f' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.pull-quote cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.95rem;color:var(--muted)}

/* ---------- Find us (map band) ---------- */
.findus{position:relative;overflow:hidden;background:var(--base-2)}
.findus-inner{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(1.4rem,3.5vw,3rem);align-items:center;padding-block:clamp(3rem,7vw,5.5rem)}
.findus-map{position:relative;border-radius:34% 66% 58% 42% / 48% 42% 58% 52%;overflow:hidden;
  border:6px solid #fff;box-shadow:0 22px 48px rgba(12,50,71,.26);aspect-ratio:16/11}
.findus-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.findus-card h2{font-size:var(--s-2);margin:.6rem 0 1rem}
.findus-card p{color:var(--muted)}
.findus-meta{margin:1.3rem 0 1.6rem;display:grid;gap:.65rem;font-size:.98rem}
.findus-meta li{display:flex;gap:.6rem;align-items:baseline}
.findus-meta b{font-family:var(--f-disp);color:var(--blue-deep);font-weight:600;min-width:5.2rem}
.findus-actions{display:flex;flex-wrap:wrap;gap:.8rem}
@media (max-width:900px){.findus-inner{grid-template-columns:1fr}
  .findus-map{border-radius:26px;aspect-ratio:16/10}}

/* ---------- Mobile polish: spacious + collapsible details ---------- */
@media (max-width:820px){
  .pad{padding-inline:1.35rem}
  .band{padding-block:3.4rem}
  .band-head{margin-bottom:2.2rem}
  .subhero{padding-top:3.4rem;padding-bottom:2.6rem}
  .hero .lead{margin-top:.2rem}
  .hero-cta{margin-top:1.6rem}
  .tide{gap:1.2rem}
  .tcard{padding:1.5rem 1.35rem}
  .pool{gap:1.4rem;padding-block:.6rem}
  .pool-shot figcaption{left:8%;bottom:5%}
  .srow{padding-block:2.4rem}
  .srow .ticks{display:none;margin-top:.9rem}
  .srow .ticks.open{display:grid}
  .about-copy .ticks{display:none}
  .about-copy .ticks.open{display:grid}
  .read-more{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
    font-family:var(--f-disp);font-weight:500;font-size:.9rem;color:var(--blue-deep);
    background:none;border:1px solid var(--line-2);border-radius:5px;padding:.55rem 1.05rem;cursor:pointer}
  .read-more::after{content:"+";font-size:1rem;line-height:1}
  .read-more.open::after{content:"–"}
  .findus-inner{gap:1.8rem;padding-block:3rem}
  .findus-actions .btn{flex:1;justify-content:center}
  .cta-inner{padding-block:2.4rem}
  .pull-quote blockquote{font-size:clamp(1.4rem,6.4vw,2rem)}
  .capstrip{gap:1rem}
}
@media (min-width:821px){.read-more{display:none}}

/* ---------- Mobile hero: centred, one line, one action ---------- */
.m-only{display:none}
@media (max-width:820px){
  .d-only{display:none}
  .m-only{display:inline}
  .hero{min-height:72svh;padding-top:2.5rem;align-content:center}
  /* scoped to the hero: .hero-cta is reused further down the page */
  .hero .eyebrow,.hero .hero-trust{display:none}
  /* the text spans the full width here, so the wash is even rather than sided */
  .hero::before{background:
    linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.84) 55%,rgba(255,255,255,.72))}
  /* Fade the photo out into the pale band below so the hero stops on a soft
     transition instead of a hard horizontal cut. It ends on --base-2 rather
     than pure white because that is the colour of the section underneath.
     Starts at 66%, below the CTA, and the text paints above this layer. */
  .hero::after{background:
    linear-gradient(180deg,transparent 66%,rgba(238,247,252,.55) 85%,#eef7fc 100%),
    radial-gradient(80% 50% at 50% 88%,rgba(0,170,213,.2),transparent 65%)}
  .hero-inner{text-align:center}
  .hero h1{font-size:clamp(2.1rem,8.8vw,2.7rem);margin:0 auto 1rem;max-width:13ch}
  .hero .lead{display:block;font-size:1.02rem;max-width:30ch;margin:0 auto 1.6rem;color:var(--ink-soft)}
  .hero .hero-cta{margin-top:0;justify-content:center}
  .hero .hero-cta .btn{min-width:220px;justify-content:center}
  .hero .hero-cta .btn-ghost-dark{display:none}
}