/* Centuria Yacht Group — demo (12 Oct 2026). Minimal, image-led; every image is a labelled placeholder. */
:root{
  --ink:#0e2340; --ink-2:#173462; --sand:#f2eee5; --paper:#fbfaf7;
  --line:rgba(11,21,32,.12); --line-d:rgba(255,255,255,.16);
  --text:#13233c; --muted:#5a6a80; --muted-d:rgba(236,240,247,.7);
  --brass:#bf9744; --brass-2:#d8b96e;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1320px; --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 15px/1.65 var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.modal-open{overflow:hidden}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
section{padding:clamp(84px,11vw,168px) 0}
.dark{background:var(--ink);color:#f4f1ea}
.sand{background:var(--sand)}
.eyebrow{font:500 11px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.dark .eyebrow,.hero .eyebrow,.band .eyebrow,.gate .mark .eyebrow{color:var(--brass-2)}
.h-xl{font:300 clamp(52px,8.6vw,132px)/.92 var(--serif);letter-spacing:-.015em}
.h-lg{font:300 clamp(38px,5.2vw,76px)/1 var(--serif);letter-spacing:-.01em}
.h-md{font:400 clamp(24px,2.3vw,32px)/1.15 var(--serif)}
.h-sm{font:600 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.lead{font-size:clamp(16px,1.25vw,19px);line-height:1.75;color:var(--muted);max-width:58ch}
.dark .lead{color:var(--muted-d)}
.rule{height:1px;background:var(--line);border:0}
.dark .rule{background:var(--line-d)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px)}

/* header */
.site-head{position:fixed;inset:0 0 auto;z-index:60;color:#fff;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s}
.site-head.solid{background:rgba(251,250,247,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--text);border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;gap:32px;height:78px}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;flex-shrink:0}
.brand b{font:500 15px/1 var(--sans);letter-spacing:.44em}
.brand span{font:400 9px/1 var(--sans);letter-spacing:.42em;margin-top:7px;color:var(--brass)}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav a{text-decoration:none;font:500 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:.82;padding:6px 0;border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s}
.nav a:hover{opacity:1}
.nav a[aria-current="page"]{opacity:1;border-bottom-color:currentColor}
.nav .btn{margin-left:8px}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{position:absolute;left:11px;right:11px;height:1px;background:currentColor;content:"";transition:transform .3s var(--ease),opacity .2s}
.nav-toggle span{top:22px}.nav-toggle span::before{top:-7px;left:0;right:0}.nav-toggle span::after{top:7px;left:0;right:0}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font:500 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:17px 26px;border:1px solid currentColor;background:transparent;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s;white-space:nowrap}
.btn:hover{background:rgba(127,127,127,.12)}
.btn--brass{background:var(--brass);border-color:var(--brass);color:#fff}
.btn--brass:hover{background:var(--brass-2);border-color:var(--brass-2)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-2)}
.link{font:500 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:10px;align-items:center;padding-bottom:6px;border-bottom:1px solid currentColor}
.link::after{content:"\2192";letter-spacing:0;transition:transform .3s var(--ease)}
.link:hover::after{transform:translateX(4px)}

/* image placeholders — swap each <figure class="ph"> for an <img> later; the caption says what to generate */
.ph{position:relative;overflow:hidden;margin:0;background:linear-gradient(180deg,#2c4a77 0%,#1b3663 56%,#122a50 100%)}
.ph::before{content:"";position:absolute;left:0;right:0;top:58%;height:1px;background:rgba(255,255,255,.2)}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 70% at 72% 26%,rgba(255,255,255,.10),transparent 62%)}
.ph figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font:500 10px/1.55 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ph figcaption em{display:block;font-style:normal;color:var(--brass-2);margin-bottom:3px}
.ph--light{background:linear-gradient(180deg,#e6dfd3 0%,#d8d0c1 58%,#ccc3b3 100%)}
.ph--light::before{background:rgba(22,32,43,.16)}
.ph--light figcaption{color:rgba(22,32,43,.62)}
.ph--light figcaption em{color:var(--brass)}
/* a placeholder that fills its box keeps the box shape, not its own ratio */
.hero > .ph,.band > .ph,.gate .gate-media .ph{aspect-ratio:auto}
.r-21x9{aspect-ratio:21/9}.r-16x9{aspect-ratio:16/9}.r-3x2{aspect-ratio:3/2}.r-4x5{aspect-ratio:4/5}.r-1x1{aspect-ratio:1/1}.r-3x4{aspect-ratio:3/4}.r-2x1{aspect-ratio:2/1}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0;color:#fff;background:var(--ink)}
.hero > .ph{position:absolute;inset:0}
.hero > .ph::after{background:linear-gradient(180deg,rgba(14,35,64,.35) 0%,rgba(14,35,64,.05) 38%,rgba(14,35,64,.85) 100%)}
.hero > .ph figcaption{top:104px;bottom:auto;max-width:440px}
.hero-inner{position:relative;z-index:3;width:100%;padding-top:150px;padding-bottom:clamp(40px,7vh,88px)}
.hero .eyebrow{margin-bottom:26px}
.hero .lead{color:rgba(255,255,255,.78);margin-top:26px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.hero--page{min-height:72svh}

/* quick search */
.quick{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr) auto;border:1px solid rgba(255,255,255,.22);background:rgba(11,21,32,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.quick label{display:flex;flex-direction:column;gap:8px;padding:18px 22px;border-right:1px solid rgba(255,255,255,.16)}
.quick label span{font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.quick select{background:transparent;border:0;color:#fff;font-size:15px;appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:18px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 6px) 55%,100% 55%;background-size:6px 6px;background-repeat:no-repeat}
.quick select option{color:var(--text)}
.quick button{border:0;padding:0 34px}

/* intro + pillars */
.intro{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;align-items:end}
.intro .eyebrow{grid-column:1/4}
.intro h2{grid-column:4/11}
.intro .lead{grid-column:4/10;margin-top:28px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);margin-top:clamp(56px,7vw,96px)}
.pillars--4{grid-template-columns:repeat(4,1fr)}
.pillar .ph{margin-bottom:26px}
.pillar .num{font:400 13px/1 var(--serif);font-style:italic;color:var(--brass);margin-bottom:12px;display:block}
.pillar p{color:var(--muted);margin:12px 0 22px;max-width:42ch}

/* split blocks / montage */
.split{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;align-items:center}
.split .copy{grid-column:1/6}
.split .media{grid-column:7/13}
.split.rev .copy{grid-column:8/13;order:2}
.split.rev .media{grid-column:1/7;order:1}
.montage{position:relative;padding-bottom:18%}
.montage .a{width:78%}
.montage .b{position:absolute;right:0;bottom:0;width:46%;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.ticks{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.dark .ticks{border-color:var(--line-d)}
.ticks li{padding:16px 0;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:baseline}
.dark .ticks li{border-color:var(--line-d)}
.ticks li b{font:400 13px/1 var(--serif);font-style:italic;color:var(--brass);min-width:26px}
.dark .ticks li b{color:var(--brass-2)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,34px)}
.card{position:relative}
.card-hit{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;color:inherit}
.card .ph{transition:transform .8s var(--ease)}
.card-hit:hover .ph{transform:scale(1.015)}
.card-body{padding:20px 0 6px}
.card-body .h-md{margin:8px 0 6px}
.specs{color:var(--muted);font-size:14px}
.price{font:500 15px/1 var(--sans);margin-top:14px;letter-spacing:.02em}
.badge{position:absolute;top:14px;left:14px;z-index:3;font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;background:var(--paper);color:var(--text);padding:8px 10px}
.badge--offer{background:var(--brass);color:#fff}
.sample-note{font-size:12.5px;color:var(--muted);margin-top:18px}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(36px,4vw,56px);flex-wrap:wrap}

/* yacht band */
.band{position:relative;color:#fff;padding:0;background:var(--ink)}
.band > .ph{position:absolute;inset:0}
.band > .ph::after{background:linear-gradient(90deg,rgba(14,35,64,.9) 0%,rgba(14,35,64,.55) 45%,rgba(14,35,64,.12) 100%)}
.band > .ph figcaption{left:auto;right:22px;text-align:right;max-width:360px}
.band .wrap{position:relative;z-index:3;padding-top:clamp(110px,14vw,200px);padding-bottom:clamp(110px,14vw,200px)}
.band .lead{color:rgba(255,255,255,.76);margin:24px 0 36px}

/* services grid */
.svc{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.svc > div{padding:32px 28px 36px 0;border-bottom:1px solid var(--line)}
.svc > div + div{padding-left:28px;border-left:1px solid var(--line)}
.svc > div:nth-child(3n+1){padding-left:0;border-left:0}
.svc ul{list-style:none;margin-top:16px}
.svc li{padding:7px 0;color:var(--muted)}
.svc a{color:var(--text)}

/* packages */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.pack{border:1px solid var(--line);padding:36px 32px;background:var(--paper);display:flex;flex-direction:column}
.pack.feature{background:var(--ink);color:#f4f1ea;border-color:var(--ink)}
.pack ul{list-style:none;margin:22px 0 30px;flex:1}
.pack li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.pack.feature li{border-color:var(--line-d)}
.pack .note{font-size:12.5px;color:var(--muted);margin-top:6px}
.pack.feature .note{color:var(--muted-d)}

/* partner strip */
.partner{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;align-items:center;padding:clamp(44px,5vw,64px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partner .eyebrow{grid-column:1/4}
.partner p:not(.eyebrow){grid-column:4/10;font:300 clamp(22px,2vw,28px)/1.35 var(--serif)}
.partner .link{grid-column:10/13;justify-self:end}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:10px}
.field > span{font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dark .field > span{color:var(--muted-d)}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0 12px;font-size:16px;border-radius:0;outline:none;transition:border-color .2s}
.dark .field input,.dark .field select,.dark .field textarea{border-color:var(--line-d);color:#fff}
.field select option{color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--brass)}
.field textarea{min-height:110px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:10px 16px;border:1px solid var(--line);font-size:13.5px;cursor:pointer;transition:all .2s;user-select:none}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--brass);outline-offset:2px}
.dark .chip span{border-color:var(--line-d)}
.dark .chip input:checked + span{background:var(--brass);border-color:var(--brass)}
.form-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fineprint{font-size:12.5px;color:var(--muted)}
.dark .fineprint{color:var(--muted-d)}
.thanks{padding:34px 0}
.thanks .h-md{margin-bottom:10px}

/* sales: categories + explorer */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,40px)}
.cat{display:block;text-decoration:none;color:inherit;background:none;border:0;text-align:left;cursor:pointer;width:100%}
.cat .ph{margin-bottom:22px}
.cat p{color:var(--muted);margin:10px 0 18px;max-width:46ch}
.explorer{display:grid;grid-template-columns:280px 1fr;gap:clamp(24px,3.4vw,56px);align-items:start}
.filters{position:sticky;top:100px;display:flex;flex-direction:column;gap:26px}
.filters .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.results-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:18px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.results-bar select{border:0;background:none;font-size:14px;cursor:pointer}
.results .cards{grid-template-columns:repeat(2,1fr)}
.empty{padding:60px 0;color:var(--muted)}
.filters-toggle{display:none}
.btn-reset{background:none;border:0;text-decoration:underline;cursor:pointer;color:var(--muted);font-size:13px;align-self:flex-start}

/* modals */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;background:rgba(10,26,50,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal.open{display:grid;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{position:relative;background:var(--paper);width:100%;max-width:760px;max-height:calc(100vh - 40px);overflow:auto;padding:clamp(28px,4vw,52px)}
.panel--wide{max-width:1040px}
.x{position:absolute;top:14px;right:14px;width:42px;height:42px;border:0;background:none;cursor:pointer;font-size:26px;line-height:1;color:var(--muted)}
.x:hover{color:var(--text)}
.vessel-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(22px,3vw,44px)}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.spec-table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:14px}
.spec-table th,.spec-table td{padding:10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec-table th{font:500 10.5px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);width:42%}

/* entry gate */
.gate{padding:0;background:var(--ink)}
.gate .gate-in{display:grid;grid-template-columns:1.1fr 1fr;width:100%;height:100%;max-width:none;max-height:none;overflow:auto;background:var(--ink);color:#f4f1ea}
.gate .gate-media{position:relative;min-height:100%}
.gate .gate-media .ph{position:absolute;inset:0}
.gate .gate-media .ph::after{background:linear-gradient(180deg,rgba(14,35,64,.1),rgba(14,35,64,.7))}
.gate .gate-media .ph figcaption{top:22px;bottom:auto;max-width:420px}
.gate .gate-media .mark{position:absolute;left:clamp(24px,4vw,56px);bottom:clamp(28px,5vw,64px);z-index:3;color:#fff}
.gate .gate-form{padding:clamp(36px,6vw,96px) clamp(24px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
.gate .gate-form .h-lg{margin:18px 0 16px}
.gate form{margin-top:34px}
.gate .form{gap:24px 24px}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:120;background:var(--ink);color:#fff;padding:14px 22px;font-size:14px;transition:all .45s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* footer */
.site-foot{background:var(--ink);color:#f4f1ea;padding:clamp(72px,8vw,120px) 0 36px}
.foot-top{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:44px}
.foot-top .brand-col{grid-column:1/5}
.foot-top .brand-col .slogan{font:300 clamp(28px,2.6vw,40px)/1.1 var(--serif);margin-top:28px;max-width:14ch}
.foot-top .col{grid-column:span 2}
.foot-top .col h4{font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);margin-bottom:20px}
.foot-top .col a,.foot-top .col p{display:block;text-decoration:none;font-size:14px;margin-bottom:10px;color:#f4f1ea;opacity:.86}
.foot-top .col a:hover{opacity:1}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(56px,7vw,96px);padding-top:26px;border-top:1px solid var(--line-d);font-size:12.5px;color:var(--muted-d)}
.foot-bot button{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font-size:12.5px}
.tbc{color:var(--brass-2)}
.demo-flag{position:fixed;right:14px;bottom:14px;z-index:55;font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;background:var(--brass);color:#fff;padding:9px 11px}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.card .ph,.link::after{transition:none}html{scroll-behavior:auto}}

/* responsive */
@media (max-width:1080px){
  .nav{position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);color:var(--text);padding:12px var(--gut) 28px;border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .3s var(--ease)}
  .nav a{padding:16px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav .btn{margin:20px 0 0;width:auto}
  body.nav-open .nav{opacity:1;transform:none;pointer-events:auto}
  body.nav-open .site-head{background:var(--paper);color:var(--text)}
  .nav-toggle{display:block}
  .quick{grid-template-columns:1fr 1fr}
  .quick label:nth-child(2){border-right:0}
  .quick label{border-bottom:1px solid rgba(255,255,255,.16)}
  .quick button{grid-column:1/-1;padding:20px}
  .explorer{grid-template-columns:1fr}
  .pillars--4{grid-template-columns:repeat(2,1fr)}
  .filters{position:static;display:none;margin-bottom:28px}
  .filters.open{display:flex}
  .filters-toggle{display:inline-flex;margin-bottom:28px}
  .svc{grid-template-columns:1fr 1fr}
  .svc > div:nth-child(3n+1){padding-left:28px;border-left:1px solid var(--line)}
  .svc > div:nth-child(2n+1){padding-left:0;border-left:0}
}
@media (max-width:860px){
  .intro .eyebrow,.intro h2,.intro .lead{grid-column:1/-1}
  .intro h2{margin-top:18px}
  .pillars,.cards,.packs,.cats{grid-template-columns:1fr}
  .results .cards{grid-template-columns:1fr}
  .split .copy,.split .media,.split.rev .copy,.split.rev .media{grid-column:1/-1;order:0}
  .split .media{margin-top:44px}
  .hero > .ph figcaption,.band > .ph figcaption{display:none}
  .partner .eyebrow,.partner p,.partner .link{grid-column:1/-1;justify-self:start}
  .partner p:not(.eyebrow){margin:16px 0 22px}
  .svc{grid-template-columns:1fr}
  .svc > div,.svc > div + div{padding-left:0;border-left:0}
  .vessel-grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .gate .gate-in{grid-template-columns:1fr}
  .gate .gate-media{min-height:34vh}
  .foot-top .brand-col{grid-column:1/-1}
  .foot-top .col{grid-column:span 6}
}
@media (max-width:520px){
  .quick{grid-template-columns:1fr}
  .quick label{border-right:0}
  .hero .ctas .btn{width:100%}
  .filters .row{grid-template-columns:1fr 1fr}
}

/* ── Brand logo (15 Oct 2026): the client's logo in the header, footer and welcome form. Two versions: the original
   colours for light grounds, and a reversed one (navy turned white, gold kept) for the dark photo heroes, the navy
   footer and the welcome form's photo side. The header shows the reversed one while it sits over a dark hero, the
   original once it turns solid (scrolled, a page without a dark hero, or the mobile menu open). ── */
.brand-logo{display:block;height:54px;width:auto;align-self:flex-start;flex:none}   /* never stretched by the brand's flex column */
.site-head .brand .logo-color{display:none}
.site-head.solid .brand .logo-light,body.nav-open .site-head .brand .logo-light{display:none}
.site-head.solid .brand .logo-color,body.nav-open .site-head .brand .logo-color{display:block}
.site-foot .brand .brand-logo{height:88px}
.gate .mark .mark-logo{display:block;height:84px;width:auto;margin-bottom:8px}
@media (max-width:720px){.brand-logo{height:44px}.site-foot .brand .brand-logo{height:72px}.gate .mark .mark-logo{height:64px}}

/* ── Real photos (15 Oct 2026): an <img> inside a placeholder frame keeps the frame's shape and its overlay; the
   placeholder's horizon line goes. The home hero adds a left-hand shade so the headline reads over the white wake. ── */
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph--img::before{display:none}
.hero > .ph--img::after{background:linear-gradient(90deg,rgba(14,35,64,.62) 0%,rgba(14,35,64,.3) 42%,rgba(14,35,64,0) 72%),linear-gradient(180deg,rgba(14,35,64,.4) 0%,rgba(14,35,64,.06) 38%,rgba(14,35,64,.85) 100%)}
.hero > .ph--img ~ .hero-inner .h-xl{text-shadow:0 2px 28px rgba(14,35,64,.55),0 1px 3px rgba(14,35,64,.35)}

/* ── Welcome form, left side (15 Oct 2026, Ben: "make the logo small, where it was but gradient fade and show the boat
   image above it"): the boat photo fills the panel and fades to white at the foot, where the small logo and the
   slogan sit, bottom left as before. Replaces the plain white panel from earlier the same day. ── */
.gate .gate-media{background:#fff;color:var(--ink)}
.gate .gate-media .ph--img::after{background:linear-gradient(0deg,#fff 0%,#fff 22%,rgba(255,255,255,.9) 31%,rgba(255,255,255,.45) 43%,rgba(255,255,255,0) 58%)}
.gate .gate-media .mark{color:var(--ink)}
.gate .gate-media .mark .mark-logo{height:64px;margin:0 0 12px}
@media (max-width:720px){
  .gate .gate-media{min-height:44vh}
  .gate .gate-media .ph--img::after{background:linear-gradient(0deg,#fff 0%,#fff 26%,rgba(255,255,255,.88) 36%,rgba(255,255,255,0) 56%)}
  .gate .gate-media .mark .mark-logo{height:46px;margin-bottom:6px}
}

/* ── Welcome form sparkle (15 Oct 2026): the Claude CMS particle field in white (assets/centuria/sparkle.js), in a band
   across the edge where the photo fades into the solid white. Screen blend: the field's black is "no change", its
   white points lighten the photo's fade and vanish into the white. Soft-masked top and bottom; above the photo, below
   the logo. ── */
.gate .gate-media .gate-spark{position:absolute;left:0;right:0;top:46%;height:40%;z-index:2;pointer-events:none;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 64%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 64%,transparent 100%)}
.gate .gate-media .gate-spark .spk-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s ease}
@media (max-width:720px){.gate .gate-media .gate-spark{top:34%;height:48%}}

/* ── Second sparkle layer along the hull (15 Oct 2026, Ben: "bring it down by the hull" — after the open-sea version
   "looks like flies"). Same field and screen blend, in a band centred on the waterline and bow wave, where the
   white points read as spray catching the light; strongest 40–55% of the panel, soft above and below. ── */
.gate .gate-media .gate-spark--hull{top:34%;height:28%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 75%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 75%,transparent 100%)}
@media (max-width:720px){.gate .gate-media .gate-spark--hull{top:30%;height:30%}}

/* ── Welcome form as a slide-out (15 Oct 2026, Ben: "the normal page should show first, but when a user clicks on a boat
   it slides out the form, so they complete it before going through"; then "stagger the slide so they don't look like one
   and the same"). The page stays visible, dimmed, behind. The form panel slides in from the right first; the photo
   follows a beat later, easing out from under the form. On the way out the photo tucks back under first, then the form
   goes. Exit timings fit inside the 420 ms site.js waits before closing. ── */
.gate{background:rgba(10,26,50,.55)}
.gate .gate-in{position:relative;background:transparent;overflow-x:hidden}
.gate .gate-media{z-index:1}
.gate .gate-form{position:relative;z-index:2;background:var(--ink);box-shadow:-30px 0 80px rgba(0,0,0,.35)}
.gate.open{animation:fade .45s var(--ease)}
.gate.open .gate-form{animation:gate-in .6s var(--ease) backwards}
.gate.open .gate-media{animation:gate-in-media .85s var(--ease) .18s backwards}
.gate.open .gate-x{animation:fade .4s ease .45s backwards}
@keyframes gate-in{from{transform:translateX(100%)}}
@keyframes gate-in-media{from{transform:translateX(45%);opacity:0}}
.gate.leaving{opacity:0;transition:opacity .25s ease .17s}
.gate.leaving .gate-media{transform:translateX(45%);opacity:0;transition:transform .28s cubic-bezier(.6,0,.8,.3),opacity .28s ease}
.gate.leaving .gate-form{transform:translateX(100%);transition:transform .34s cubic-bezier(.6,0,.8,.3) .08s}
.gate.leaving .gate-x{opacity:0;transition:opacity .15s}
.gate .gate-x{z-index:5;top:18px;right:18px;color:#fff;background:rgba(14,35,64,.45);border-radius:50%}
.gate .gate-x:hover{color:#fff;background:rgba(14,35,64,.7)}
@media (prefers-reduced-motion:reduce){.gate.open,.gate.open .gate-form,.gate.open .gate-media,.gate.open .gate-x{animation:none}.gate.leaving,.gate.leaving .gate-form,.gate.leaving .gate-media{transition:none}}

/* ── Image placeholders as a line drawing (15 Oct 2026, Ben: "put a placeholder where there is no image so it's just a
   line drawing of a yacht"). Every frame still waiting for a photo shows a yacht in outline (img/yacht-line.svg, used as
   a mask so it takes each frame's tone: pale on navy, navy on sand) instead of the horizon line and the what-to-shoot
   caption. The captions stay in the HTML as the shot list. On the wide hero and band frames the drawing sits to the
   right, clear of the headline. ── */
.ph:not(.ph--img)::before{top:0;bottom:0;height:auto;background:rgba(255,255,255,.34);
  -webkit-mask:url(/assets/centuria/img/yacht-line.svg) center 54%/min(62%,340px) auto no-repeat;
          mask:url(/assets/centuria/img/yacht-line.svg) center 54%/min(62%,340px) auto no-repeat}
.ph--light:not(.ph--img)::before{background:rgba(14,35,64,.32)}
.ph:not(.ph--img) figcaption{display:none}
.hero > .ph:not(.ph--img)::before,.band > .ph:not(.ph--img)::before{-webkit-mask-position:82% 40%;mask-position:82% 40%;-webkit-mask-size:min(36%,520px) auto;mask-size:min(36%,520px) auto}
.hero--page > .ph:not(.ph--img)::before{-webkit-mask-position:88% 30%;mask-position:88% 30%;-webkit-mask-size:min(26%,400px) auto;mask-size:min(26%,400px) auto}
@media (max-width:860px){.hero > .ph:not(.ph--img)::before,.band > .ph:not(.ph--img)::before,.hero--page > .ph:not(.ph--img)::before{-webkit-mask-position:50% 30%;mask-position:50% 30%;-webkit-mask-size:min(70%,340px) auto;mask-size:min(70%,340px) auto}}

/* Footer brand block on white (26 Oct 2026, Ben): the colour logo and a navy slogan on a white panel, so the reversed logo isn't needed. */
.site-foot .foot-top .brand-col{background:#fff;color:var(--ink);padding:clamp(28px,3vw,40px);align-self:start}
.site-foot .foot-top .brand-col .slogan{color:var(--ink)}

/* ── White header strip on every page (28 Oct 2026, Ben: "add the white top strip behind logo and nav on all pages so we
   don't see the white silhouette version"). The header always wears its scrolled look (solid white strip, navy links, the
   full-colour logo) instead of sitting clear over the dark heroes with the reversed logo. The Enquire button gets its
   own padding and gold edge back: the `.nav a` rule was zeroing its sides and clearing its bottom border. ── */
.site-head,.site-head.solid{background:#fff;color:var(--text);border-bottom:1px solid var(--line)}
.site-head .brand .logo-light{display:none}
.site-head .brand .logo-color{display:block}
.nav a.btn{padding:14px 22px;opacity:1}
.nav a.btn--brass{border-color:var(--brass)}
.nav a.btn--brass:hover{border-color:var(--brass-2)}

/* ── Listings from the store (28 Oct 2026): the boat panel shows the listing's own description under the specs (merchant
   text from the Shop tab, trimmed to plain formatting by listings.php), and a boat with no extra photos drops the
   thumbnail strip rather than showing empty frames. ── */
.v-desc{margin:-6px 0 26px;font-size:14px;line-height:1.7;color:var(--muted)}
.v-desc p{margin:0 0 12px}
.v-desc ul,.v-desc ol{margin:0 0 14px;padding-left:18px}
.v-desc li{margin:3px 0}
.v-desc strong,.v-desc b{color:var(--text);font-weight:600}
.thumbs[hidden],.v-desc[hidden]{display:none}

/* ── Sale price (29 Oct 2026, Sandra: the Glasstream's regular $192,000 and its boat show price): the regular price
   struck through and muted before the price, and the store's price note as a small gold tag beneath. ── */
.price .was{color:var(--muted);font-weight:400;margin-right:6px;text-decoration-thickness:1px}
.price-note{display:inline-block;margin-top:9px;font:600 9.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;background:var(--brass);color:#fff;padding:6px 9px}
.vessel-grid .price-note{margin:4px 0 0}