/* ==========================================================================
   SeaCliff Marine — shared stylesheet
   Duffy boat repair · Huntington Beach, CA
   ========================================================================== */

:root{
  /* Brand */
  --navy-950:#082541;
  --navy-900:#0e3255;
  --navy-800:#154169;
  --navy-700:#1d5583;
  --navy-600:#2a6c9e;

  --teal-700:#1a7f66;
  --teal-600:#229476;
  --teal-500:#2ea583;
  --teal-400:#48bd9b;

  --sky-300:#a9d7e9;
  --sky-200:#cbe8f3;
  --sky-100:#e3f2f8;
  --sky-50:#f2f9fc;

  --sand:#f6f1e6;
  --paper:#ffffff;

  --ink:#12303f;
  --ink-soft:#3c5866;
  --muted:#6a8794;
  --line:#dae8ef;

  --shadow-xs:0 1px 3px rgba(8,37,65,.08);
  --shadow-sm:0 3px 10px rgba(8,37,65,.08);
  --shadow-md:0 12px 30px rgba(8,37,65,.13);
  --shadow-lg:0 26px 60px rgba(8,37,65,.20);

  --radius:12px;
  --radius-lg:18px;
  --wrap:1180px;

  --font-display:'Poppins','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Helvetica Neue',system-ui,-apple-system,'Segoe UI',sans-serif;

  color-scheme:light;
}

/* The header is sticky, so anything we jump to needs clearance or the heading
   lands underneath it. */
[id]{scroll-margin-top:88px}

/* Skip link — first thing in the tab order, hidden until focused. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--teal-600);color:#fff;padding:13px 22px;border-radius:0 0 10px 0;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
}
.skip-link:focus{left:0;color:#fff}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  color:var(--ink-soft);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--navy-700);text-decoration:none}
a:hover{color:var(--teal-600)}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--navy-900);
  line-height:1.18;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-.01em;
  text-wrap:balance;
}
p,li{text-wrap:pretty}
a,button,summary,label,input,select,textarea{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(46,165,131,.22);
}
h1{font-size:clamp(2.1rem,4.6vw,3.35rem);font-weight:700}
h2{font-size:clamp(1.6rem,2.9vw,2.2rem)}
h3{font-size:1.18rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin-bottom:.45em}
:focus-visible{outline:3px solid var(--teal-400);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:13px 26px;border-radius:8px;border:2px solid transparent;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  text-align:center;
}
.btn-primary{background:var(--teal-500);color:#fff;box-shadow:0 6px 18px rgba(46,165,131,.28)}
.btn-primary:hover{background:var(--teal-600);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(46,165,131,.34)}
.btn-navy{background:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-900);color:#fff;transform:translateY(-2px)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn-outline-dark{background:transparent;color:var(--navy-800);border-color:var(--line)}
.btn-outline-dark:hover{background:var(--sky-50);color:var(--navy-900);border-color:var(--sky-300)}
.btn-lg{padding:16px 34px;font-size:1.02rem}
.btn-block{display:flex;width:100%}

/* ---------------------------------------------------------------- header -- */
.site-header{
  background:var(--navy-900);
  position:sticky;top:0;z-index:70;
  box-shadow:0 2px 14px rgba(8,37,65,.28);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px}
.brand{display:inline-flex;align-items:center;gap:12px;color:#fff;font-family:var(--font-display);white-space:nowrap}
.brand:hover{color:#fff}
.brand svg{height:38px;width:auto;flex:none}
.wordmark{display:flex;flex-direction:column;gap:3px;line-height:1}
.wm-name{font-weight:600;font-size:1.22rem;letter-spacing:.01em}
.wm-name b{font-weight:700}
.wm-sub{
  font-weight:500;font-size:.56rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--teal-400);
}
.site-footer .brand svg{height:32px}
.site-footer .wm-name{font-size:1.05rem;color:#fff}
.site-footer .wm-sub{font-size:.5rem;letter-spacing:.28em}
@media (max-width:420px){
  .brand svg{height:32px}
  .wm-name{font-size:1.04rem}
  .wm-sub{font-size:.5rem;letter-spacing:.26em}
}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  color:rgba(255,255,255,.86);font-size:.925rem;font-weight:500;
  padding:9px 13px;border-radius:6px;position:relative;transition:color .16s ease,background .16s ease;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav a.is-current{color:#fff}
.nav a.is-current::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--teal-400);border-radius:2px;
}
.nav .btn{margin-left:10px;padding:10px 20px;font-size:.9rem}
.nav .btn:hover{background:var(--teal-600);color:#fff}

.nav-toggle{
  display:none;background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;
  width:42px;height:38px;border-radius:7px;font-size:1.15rem;line-height:1;cursor:pointer;
}
.nav-toggle:hover{background:rgba(255,255,255,.1)}

/* ------------------------------------------------------------------ hero -- */
.hero{
  position:relative;
  background:var(--navy-800) url("img/hero-harbor.jpg") center 38% / cover no-repeat;
  padding:clamp(72px,11vw,140px) 0 clamp(120px,14vw,180px);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,32,56,.80) 0%,rgba(6,32,56,.50) 34%,rgba(6,32,56,.10) 62%,rgba(6,32,56,0) 90%);
}
.hero .wrap{position:relative;z-index:2}
.hero-copy{max-width:600px}
.hero h1{color:#fff;text-shadow:0 3px 22px rgba(4,22,40,.45);margin-bottom:.42em}
.hero .lead{
  color:rgba(255,255,255,.93);font-size:clamp(1.02rem,1.5vw,1.18rem);
  max-width:33em;margin-bottom:1.9em;text-shadow:0 2px 14px rgba(4,22,40,.5);
}
.hero-eyebrow{
  display:inline-block;font-family:var(--font-display);font-weight:600;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky-200);background:rgba(8,37,65,.42);
  border:1px solid rgba(203,232,243,.3);border-radius:100px;
  padding:6px 16px;margin-bottom:22px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:38px;
  font-family:var(--font-display);font-size:.85rem;font-weight:500;color:rgba(255,255,255,.9);
}
.hero-badges span{display:inline-flex;align-items:center;gap:8px;text-shadow:0 2px 10px rgba(4,22,40,.5)}
.hero-badges svg{width:17px;height:17px;flex:none;color:var(--teal-400)}

/* Page hero (interior pages) */
.page-hero{
  position:relative;background:var(--navy-900);
  padding:56px 0 clamp(74px,9vw,104px);overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;opacity:.8;
  background:var(--page-hero-img,url("img/hero-harbor.jpg")) center 45% / cover no-repeat;
}
/* Each interior page fades in its own subject rather than the shared harbour
   shot. Declared here, not inline, so the url() resolves against this
   stylesheet and the same class works from any directory depth. */
.ph-bottom-painting  {--page-hero-img:url("img/svc-bottom-paint.jpg")}
.ph-bottom-cleaning  {--page-hero-img:url("img/svc-hull-cleaning.jpg")}
.ph-fiberglass-repair{--page-hero-img:url("img/svc-fiberglass.jpg")}
.ph-electrical-repair{--page-hero-img:url("img/svc-electrical.jpg")}
.ph-battery-replacement{--page-hero-img:url("img/svc-battery.jpg")}
.ph-upholstery       {--page-hero-img:url("img/svc-upholstery.jpg")}
.ph-motor-overhaul   {--page-hero-img:url("img/svc-motor.jpg")}
.ph-decals           {--page-hero-img:url("img/svc-decals.jpg")}
.ph-storage          {--page-hero-img:url("img/svc-storage.jpg")}
.ph-duffy-transport  {--page-hero-img:url("img/svc-transport.jpg")}
.ph-boats            {--page-hero-img:url("img/boat-navy.jpg")}
/* Directional scrim: heavy on the left where the heading and lead sit, light
   on the right so the photo actually reads. A flat overlay dark enough for the
   text would hide the image no matter what opacity the photo layer has. */
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(8,37,65,.93) 0%,
    rgba(8,37,65,.84) 28%,
    rgba(8,37,65,.52) 62%,
    rgba(8,37,65,.26) 100%);
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{
  color:#fff;max-width:16ch;font-size:clamp(1.9rem,3.9vw,2.9rem);
  text-shadow:0 3px 20px rgba(4,22,40,.55);
}
.page-hero .lead{
  color:rgba(255,255,255,.93);max-width:56ch;font-size:1.08rem;margin-bottom:0;
  text-shadow:0 2px 14px rgba(4,22,40,.6);
}
.crumbs{
  font-size:.83rem;color:rgba(255,255,255,.66);margin-bottom:20px;
  font-family:var(--font-display);letter-spacing:.02em;
}
.crumbs a{color:var(--sky-200)}
.crumbs a:hover{color:#fff}
.crumbs span{padding:0 7px;opacity:.5}

/* ----------------------------------------------------------- wave shapes -- */
.wave{display:block;width:100%;line-height:0;position:relative;z-index:3;background:var(--sky-50)}
.wave svg{width:100%;height:clamp(46px,6vw,86px);display:block}
.wave-in-hero{position:absolute;left:0;right:0;bottom:-1px;z-index:4;background:transparent}

/* --------------------------------------------------------------- section -- */
section{position:relative}
.sect{padding:clamp(58px,7vw,88px) 0}
.sect-tight{padding:clamp(44px,5vw,64px) 0}
.bg-sky{background:linear-gradient(180deg,var(--sky-100) 0%,var(--sky-50) 100%)}
.bg-paper{background:var(--paper)}
.bg-soft{background:var(--sky-50)}

.sec-head{text-align:center;max-width:640px;margin:0 auto clamp(34px,4vw,50px)}
.sec-head h2{display:inline-flex;align-items:center;gap:clamp(12px,2vw,22px);margin-bottom:.35em;max-width:100%}
.sec-head h2::before,.sec-head h2::after{
  content:"";height:2px;width:clamp(26px,5vw,64px);flex:none;
  background:linear-gradient(90deg,transparent,var(--sky-300));border-radius:2px;
}
.sec-head h2::after{background:linear-gradient(90deg,var(--sky-300),transparent)}
.sec-head p{color:var(--muted);font-size:1.02rem;margin:0}
.sec-head.left{text-align:left;margin-left:0}
.sec-head.left h2::before{display:none}

/* ---------------------------------------------------------- service grid -- */
/* Flex rather than grid: with a service count that doesn't divide evenly into
   the column count, this lets the final short row centre instead of hanging
   left with empty tracks beside it. */
.svc-grid{
  display:flex;flex-wrap:wrap;gap:26px;justify-content:center;
}
.svc-card{
  flex:1 1 258px;max-width:344px;
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  color:inherit;
}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--sky-300);color:inherit}
.svc-card .thumb{aspect-ratio:4/3;background:var(--sky-100);overflow:hidden}
.svc-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.svc-card:hover .thumb img{transform:scale(1.045)}
.svc-card .body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
.svc-card h3{
  display:flex;align-items:center;gap:9px;font-size:1.05rem;margin-bottom:.42em;color:var(--navy-900);
}
.svc-card h3 svg{width:21px;height:21px;flex:none;color:var(--teal-600)}
.svc-card p{font-size:.93rem;color:var(--muted);margin-bottom:1em;flex:1}
.svc-card .go{
  font-family:var(--font-display);font-weight:600;font-size:.87rem;color:var(--teal-600);
  display:inline-flex;align-items:center;gap:6px;
}
.svc-card:hover .go{color:var(--teal-700)}
.svc-card .go::after{content:"→";transition:transform .2s ease;display:inline-block}
.svc-card:hover .go::after{transform:translateX(4px)}

/* ---------------------------------------------------------- brand strip -- */
/* Slim band carrying the chrome Duffy badge photo at the right with copy at
   the left. Deliberately a background-image, not an <img>: if the photo isn't
   in place the band degrades to a clean tinted strip that still reads well,
   instead of showing a broken-image icon. */
.brand-strip{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background-color:var(--sky-100);
  background-image:url("img/duffy-badge.jpg");
  background-repeat:no-repeat;background-position:right center;background-size:cover;
  padding:clamp(38px,5vw,60px) 0;
}
.brand-strip::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(242,249,252,.97) 0%,
    rgba(242,249,252,.94) 40%,
    rgba(242,249,252,.58) 66%,
    rgba(242,249,252,.10) 100%);
}
.brand-strip .wrap{position:relative;z-index:2}
.brand-strip p{
  margin:0;max-width:36ch;line-height:1.45;
  font-family:var(--font-display);font-weight:500;color:var(--navy-900);
  font-size:clamp(1.02rem,1.9vw,1.3rem);
}
.brand-strip strong{
  display:block;margin-bottom:10px;font-weight:600;color:var(--teal-700);
  font-size:.77rem;letter-spacing:.16em;text-transform:uppercase;
}
@media (max-width:720px){
  .brand-strip{background-position:right -70px center}
  .brand-strip::before{
    background:linear-gradient(90deg,rgba(242,249,252,.97) 0%,rgba(242,249,252,.92) 58%,rgba(242,249,252,.62) 100%);
  }
}

/* ---------------------------------------------------------- service area -- */
.area-grid{
  display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;
  gap:clamp(28px,4vw,54px);align-items:center;
}
.harbor-chips{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 26px;padding:0;list-style:none}
.harbor-chips li{
  margin:0;font-family:var(--font-display);font-size:.85rem;font-weight:500;color:var(--navy-800);
  background:var(--paper);border:1px solid var(--sky-200);border-radius:100px;
  padding:7px 15px;box-shadow:var(--shadow-xs);
  display:inline-flex;align-items:center;gap:7px;
}
.harbor-chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-500);flex:none}
.area-map{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);border:4px solid var(--paper);background:var(--sky-100);
}
.area-map img{width:100%;height:auto}

/* --------------------------------------------------------------- process -- */
.steps{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));counter-reset:step;list-style:none;padding:0;margin:0}
.steps li{
  margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px 22px;position:relative;box-shadow:var(--shadow-xs);
}
.steps li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;
  color:var(--teal-600);display:block;margin-bottom:10px;
}
.steps h3{font-size:1.02rem;margin-bottom:.4em}
.steps p{font-size:.92rem;color:var(--muted);margin:0}

/* ---------------------------------------------------------- dark cta band -- */
.dark-band{background:var(--navy-900);color:rgba(255,255,255,.82);position:relative;overflow:hidden}
.dark-band::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(900px 320px at 12% 0%,rgba(46,165,131,.18),transparent 70%),
    radial-gradient(800px 300px at 88% 100%,rgba(42,108,158,.32),transparent 72%);
}
.dark-band .wrap{position:relative;z-index:2}
.dark-band h2,.dark-band h3{color:#fff}
.dark-band .sec-head p{color:rgba(255,255,255,.7)}
.dark-band .sec-head h2::before,.dark-band .sec-head h2::after{background:linear-gradient(90deg,transparent,rgba(169,215,233,.5))}
.dark-band .sec-head h2::after{background:linear-gradient(90deg,rgba(169,215,233,.5),transparent)}

.split-band{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start;
  padding:clamp(52px,6.5vw,78px) 0;
}
.split-band > div{min-width:0}

/* Testimonials */
.tm-head{text-align:center;margin-bottom:26px}
.tm-head h2{display:inline-flex;align-items:center;gap:16px}
.tm-head h2::before,.tm-head h2::after{content:"";height:2px;width:40px;flex:none;background:rgba(169,215,233,.45);border-radius:2px}
.tm-stage{position:relative;min-height:190px}
.tm{
  position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease;
  text-align:center;display:flex;flex-direction:column;justify-content:center;
}
.tm.is-active{opacity:1;visibility:visible;position:relative}
.tm .stars{color:#f2b544;letter-spacing:3px;font-size:1rem;margin-bottom:14px}
.tm blockquote{
  margin:0 0 16px;font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.62;color:#fff;
}
.tm cite{font-style:normal;font-size:.88rem;color:var(--sky-200);letter-spacing:.03em}
.tm-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.tm-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .2s ease,transform .2s ease;
}
.tm-dots button[aria-current="true"]{background:var(--teal-400);transform:scale(1.25)}

/* Contact block */
.contact-block{text-align:center}
.contact-block .lead{color:rgba(255,255,255,.76);margin-bottom:26px}
.contact-lines{
  margin-top:26px;display:flex;flex-direction:column;gap:12px;align-items:center;
  font-size:.96rem;
}
.contact-lines a{color:#fff;font-family:var(--font-display);font-weight:500}
.contact-lines a:hover{color:var(--teal-400)}
.contact-lines .row{display:inline-flex;align-items:center;gap:10px}
.contact-lines svg{width:17px;height:17px;color:var(--teal-400);flex:none}
.contact-lines .hours{color:rgba(255,255,255,.62);font-size:.88rem}
.phone-big{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,1.95rem);
  color:#fff;letter-spacing:-.01em;display:inline-block;margin-top:6px;
}
.phone-big:hover{color:var(--teal-400)}

/* -------------------------------------------------------------- cta strip -- */
.cta-strip{
  background:linear-gradient(120deg,var(--teal-600),var(--teal-500) 55%,#31b18c);
  color:#fff;text-align:center;padding:clamp(44px,5.5vw,64px) 0;
}
.cta-strip h2{color:#fff;margin-bottom:.3em}
.cta-strip p{color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto 26px}
.cta-strip .btn-white{background:#fff;color:var(--teal-700)}
.cta-strip .btn-white:hover{background:#eefaf6;color:var(--teal-700);transform:translateY(-2px)}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ------------------------------------------------------- interior layout -- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,4.5vw,58px);align-items:start}
.prose h2{margin-top:1.9em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em;color:var(--navy-800)}
.prose > p:first-child{font-size:1.09rem;color:var(--ink)}
.prose ul{list-style:none;padding:0}
.prose ul li{
  position:relative;padding-left:31px;margin-bottom:.72em;
}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.44em;width:17px;height:17px;border-radius:50%;
  background:var(--teal-500);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/104% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/104% no-repeat;
}
.prose ol{padding-left:1.3em}
.prose ol li::marker{color:var(--teal-600);font-weight:700}

/* Real job photography sitting inside a service page's prose. Portrait shots
   are cropped to a landscape band so one photo can't dominate the column. */
.shot{
  margin:2.2em 0;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--sky-50);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.shot img{width:100%;height:auto;max-height:600px;object-fit:cover;object-position:center 42%;display:block}
.shot figcaption{
  padding:13px 20px;font-size:.87rem;color:var(--muted);
  font-family:var(--font-display);border-top:1px solid var(--line);background:var(--paper);
}

.callout{
  background:var(--sky-50);border:1px solid var(--sky-200);border-left:4px solid var(--teal-500);
  border-radius:10px;padding:20px 24px;margin:1.8em 0;font-size:.97rem;
}
.callout strong{color:var(--navy-900);font-family:var(--font-display)}
.callout p:last-child{margin-bottom:0}

.rate-table{width:100%;border-collapse:collapse;margin:1.2em 0 .6em;font-size:.95rem}
.rate-table caption{caption-side:top;text-align:left;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--font-display);padding-bottom:10px}
.rate-table th,.rate-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.rate-table thead th{
  background:var(--sky-50);color:var(--navy-900);font-family:var(--font-display);
  font-size:.79rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
}
.rate-table tbody tr:hover{background:var(--sky-50)}
.rate-table td:last-child,.rate-table th:last-child{text-align:right}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fineprint{font-size:.86rem;color:var(--muted)}

.aside{position:sticky;top:92px;display:flex;flex-direction:column;gap:20px}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-sm);
}
.card h4{
  font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-600);
  margin-bottom:14px;font-weight:600;
}
.card .price{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--navy-900);line-height:1.2;margin-bottom:4px}
.card .price small{display:block;font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:.02em;margin-top:5px}
.spec{list-style:none;padding:0;margin:0 0 20px;font-size:.92rem}
.spec li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);margin:0}
.spec li:last-child{border-bottom:0}
.spec .k{color:var(--muted)}
.spec .v{color:var(--navy-900);font-weight:600;text-align:right;font-family:var(--font-display);font-size:.88rem}
.divider{height:1px;background:var(--line);margin:18px 0}
.card-dark{background:var(--navy-900);border-color:var(--navy-800);color:rgba(255,255,255,.78)}
.card-dark h4{color:var(--sky-300)}
.card-dark p{font-size:.93rem}
.card-dark .price{color:#fff}

/* --------------------------------------------------------------- faq --- */
.faq{border-top:1px solid var(--line);margin-top:2em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-family:var(--font-display);font-weight:600;color:var(--navy-900);font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.4rem;font-weight:400;color:var(--teal-600);line-height:1;transition:transform .2s ease;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--teal-600)}
.faq .answer{padding:0 0 18px;font-size:.96rem;color:var(--ink-soft)}
.faq .answer p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- other svc -- */
.mini-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.mini{
  display:flex;align-items:center;gap:13px;padding:16px 18px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs);
  font-family:var(--font-display);font-weight:600;font-size:.94rem;color:var(--navy-900);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.mini:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--sky-300);color:var(--teal-700)}
.mini svg{width:22px;height:22px;color:var(--teal-600);flex:none}

/* ------------------------------------------------------------ boat cards -- */
.boat-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.boat{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.boat:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.boat-photo{
  position:relative;aspect-ratio:16/10;
  background:linear-gradient(180deg,#cfe7f2 0%,#a9d3e7 46%,#6fb0d0 46%,#3d7fa8 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.boat-photo svg{width:88%;height:auto}
.boat-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.boat:hover .boat-photo img{transform:scale(1.04)}
.boat-tag{
  position:absolute;top:13px;left:13px;z-index:2;
  font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;background:var(--navy-900);color:#fff;
}
.boat-tag.sold{background:#b3402f}
.boat-tag.pending{background:#c98a1e}
.boat-tag.new{background:var(--teal-600)}
.boat-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.boat-body h3{margin-bottom:.2em;font-size:1.15rem}
.boat-sub{font-size:.85rem;color:var(--muted);letter-spacing:.02em;margin-bottom:14px;font-family:var(--font-display)}
.boat-specs{
  list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;font-size:.87rem;
}
.boat-specs li{margin:0;display:flex;flex-direction:column;gap:1px;color:var(--navy-900);font-weight:500}
.boat-specs .k{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-display);font-weight:600}
.boat-note{font-size:.9rem;color:var(--muted);margin-bottom:18px;flex:1}
.boat-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.boat-price{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--navy-900)}
.boat-price small{display:block;font-size:.72rem;font-weight:500;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}

/* ------------------------------------------------------------------ form -- */
.field{margin-bottom:16px}
.field label{
  display:block;font-family:var(--font-display);font-size:.82rem;font-weight:600;
  color:var(--navy-900);margin-bottom:6px;letter-spacing:.02em;
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:.97rem;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;background:var(--paper);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(46,165,131,.16);
}
.form-note{font-size:.84rem;color:var(--muted);margin-top:12px}
.form-ok{
  margin-top:14px;padding:12px 16px;border-radius:9px;
  background:#e7f7f1;border:1px solid #b6e5d6;color:var(--teal-700);
  font-size:.92rem;font-family:var(--font-display);font-weight:500;
}

/* ---------------------------------------------------------------- footer -- */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.66);font-size:.93rem;padding:56px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px}
.site-footer .foot-h{
  font-family:var(--font-display);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:15px;font-weight:600;
}
.site-footer a{display:block;color:rgba(255,255,255,.66);padding:5px 0;font-size:.92rem}
.site-footer a:hover{color:var(--teal-400)}
.site-footer .brand{margin-bottom:14px}
.site-footer .brand a{display:inline-flex;padding:0}
.footer-about{max-width:34ch;line-height:1.65}
.foot-note{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.11);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:.83rem;color:rgba(255,255,255,.45);
}
.foot-note a{display:inline;color:rgba(255,255,255,.55)}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:960px){
  .layout{grid-template-columns:1fr}
  .aside{position:static;flex-direction:row;flex-wrap:wrap}
  .aside > *{flex:1 1 280px}
  .area-grid{grid-template-columns:1fr}
  .split-band{grid-template-columns:1fr;gap:48px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:820px){
  body{font-size:16px}
  .nav-toggle{display:block}
  .site-header .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:2px;
    padding:8px 0 14px;border-top:1px solid rgba(255,255,255,.13);margin-top:8px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 10px;border-radius:7px}
  .nav a.is-current::after{display:none}
  .nav .btn{margin:8px 0 0;justify-content:center}
  .hero{background-position:62% 40%}
  .hero::before{background:linear-gradient(170deg,rgba(6,32,56,.84) 0%,rgba(6,32,56,.66) 55%,rgba(6,32,56,.44) 100%)}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .hero-eyebrow{font-size:.67rem;letter-spacing:.1em;padding:6px 13px}
  .boat-specs{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions .btn,.cta-actions .btn{width:100%}
  .foot-note{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .svc-card:hover,.boat:hover,.mini:hover,.btn:hover{transform:none}
}

@media print{
  .site-header,.nav,.cta-strip,.dark-band,.wave,.nav-toggle{display:none!important}
  body{font-size:12pt;color:#000}
  .layout{grid-template-columns:1fr}
}