/* ============================================================
 CLASS SAILS - design system
 Restrained-premium, trust-first. Red = sharp accent only.
 ============================================================ */
/* [hidden] must always win. A later `.sd-row{display:flex}` has equal specificity to
 `[hidden]` and was overriding it - so the designer's Size/Remove row showed before any
 graphic was loaded. !important on the platform default is the correct fix. */
[hidden]{display:none !important}
:root{
 --ink:#0E1A2B; /* deep navy-charcoal */
 --ink-2:#2B3B50;
 --muted:#6B7787;
 --line:#E6EAF0;
 --line-2:#D7DDE6;
 --bg:#FCFCFA; /* warm white */
 --bg-alt:#F3F6FA; /* cool light */
 --navy:#0E1B2E; /* dark panel */
 --navy-2:#16263E;
 --red:#E1051B;
 --red-deep:#B00312;
 --silver-hi:#F7F8FA;
 --silver:#C6CCD4;
 --silver-lo:#9AA3AE;
 --radius:16px;
 --radius-sm:10px;
 --shadow-sm:0 1px 2px rgba(14,26,43,.05), 0 4px 14px rgba(14,26,43,.05);
 --shadow-md:0 10px 30px rgba(14,26,43,.09), 0 2px 8px rgba(14,26,43,.05);
 --shadow-lg:0 30px 70px rgba(14,26,43,.14);
 --maxw:1400px;
 --ease:cubic-bezier(.22,.61,.36,1);
 --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
/* NO scroll-behavior:smooth here. Lenis already smooths the whole document, and running
   both meant every anchor jump was smoothed twice - mushy on desktop, and on touch it
   fought the native momentum. Lenis' own docs say to remove it. Under reduce-motion
   Lenis never starts, and the reduce-motion block below sets scroll-behavior:auto, so
   that path is covered too. */
html{-webkit-text-size-adjust:100%}
body{
 margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
 font-size:17px;line-height:1.6;font-weight:400;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
 overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
/* full-bleed band: breaks a child out of .wrap to the viewport edges (Doyle-style
 edge-to-edge hero/tile/CTA bands); pair with an inner .wrap for the content */
.bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ---------- type ---------- */
h1{font-size:clamp(2.5rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h3{font-size:1.28rem;letter-spacing:-.01em}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.eyebrow.light{color:#8FB0E6}
.lead{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--ink-2);line-height:1.55;max-width:34ch}
.section-sub{color:var(--muted);font-size:1.08rem;max-width:60ch;margin-top:14px;line-height:1.6}
.accent-underline{position:relative;white-space:nowrap}
.accent-underline::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.14em;background:linear-gradient(90deg,var(--red),var(--red-deep));border-radius:2px;transform:scaleX(0);transform-origin:left;animation:underline 1s var(--ease) .5s forwards}
@keyframes underline{to{transform:scaleX(1)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
 font-family:var(--font);font-weight:700;font-size:1rem;letter-spacing:-.01em;
 padding:15px 28px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;
 transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
 white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(225,5,27,.28)}
.btn-red:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 14px 30px rgba(225,5,27,.34)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-sm{padding:11px 20px;font-size:.94rem}
.btn-block{width:100%}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(252,252,250,.72);
 backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
 border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;gap:28px;height:74px}
.nav{display:flex;gap:30px;margin-left:14px}
.nav a{font-weight:600;font-size:.98rem;color:var(--ink-2);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:width .28s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}
.header-cta{margin-left:auto}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(60px,7vw,104px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy h1{margin:6px 0 22px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 26px}
.trust-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--muted);font-size:.95rem;font-weight:600}
.trust-row li{display:flex;align-items:center;gap:8px}
.tick{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:rgba(225,5,27,.1);color:var(--red);font-size:.7rem;font-weight:800}
/* hero panel */
.hero-panel{position:relative;aspect-ratio:4/3.4;border-radius:var(--radius);overflow:hidden;
 background:radial-gradient(120% 120% at 30% 10%,var(--navy-2),var(--navy) 70%);
 box-shadow:var(--shadow-lg);display:grid;place-items:center;isolation:isolate}
.panel-glow{position:absolute;inset:0;background:
 radial-gradient(60% 50% at 78% 22%,rgba(225,5,27,.28),transparent 60%),
 radial-gradient(50% 45% at 15% 85%,rgba(80,130,220,.22),transparent 65%);z-index:-1}
.panel-mark{width:76%;opacity:.9;filter:brightness(0) invert(1);mix-blend-mode:screen;
 transform:translateY(-6%);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(-6%)}50%{transform:translateY(-2%)}}
.panel-tag{position:absolute;left:26px;bottom:24px;color:#fff}
.panel-tag-sm{display:block;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#9DB6DE;font-weight:700}
.panel-tag-lg{display:block;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-top:3px}

/* ---------- sections ---------- */
.section{padding:clamp(60px,8vw,108px) 0}
.section-alt{background:var(--bg-alt)}
.section-head{max-width:62ch;margin-bottom:clamp(32px,4vw,54px)}
.section-head h2{margin-top:2px}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px 26px;
 box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.card h3{margin:0 0 10px}
.card p{color:var(--muted);font-size:.98rem;line-height:1.55}
.card-link{display:inline-block;margin-top:16px;color:var(--red);font-weight:700;font-size:.95rem;transition:gap .2s}
.card-link:hover{color:var(--red-deep)}
.card-ic{width:46px;height:46px;border-radius:12px;margin-bottom:20px;
 background:linear-gradient(150deg,var(--navy-2),var(--navy));position:relative;box-shadow:var(--shadow-sm)}
.card-ic::after{content:"";position:absolute;inset:0;background-size:60%;background-repeat:no-repeat;background-position:center}
.card-ic[data-ic="sail"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 L14 4 L14 20 Z'/%3E%3Cpath d='M4 20 L14 20'/%3E%3C/svg%3E")}
.card-ic[data-ic="class"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L20 19 L4 19 Z'/%3E%3Cpath d='M12 3 L12 19'/%3E%3C/svg%3E")}
.card-ic[data-ic="cover"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 L12 5 L21 9'/%3E%3Cpath d='M4 9 v9 h16 v-9'/%3E%3C/svg%3E")}
.card-ic[data-ic="repair"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 7 a4 4 0 1 0 3 7 l4 4 -3 3 -4-4 a4 4 0 0 1-7-3'/%3E%3C/svg%3E")}

/* ---------- quote engine ---------- */
.section-quote{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%)}
.quote{display:grid;grid-template-columns:1.4fr .9fr;gap:26px;align-items:start}
.quote-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-md)}
.q-step{padding:20px 0;border-bottom:1px solid var(--line)}
.q-step:first-child{padding-top:0}
.q-step:last-child{border-bottom:0;padding-bottom:0}
.q-label{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.05rem;margin-bottom:14px}
.q-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:.85rem;font-weight:800}
.q-optional{color:var(--muted);font-weight:500;font-size:.9rem}
.q-select,.q-input{width:100%;font-family:var(--font);font-size:1rem;font-weight:500;color:var(--ink);
 padding:14px 16px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;transition:border-color .2s,box-shadow .2s}
.q-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7787' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer}
.q-select:focus,.q-input:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 4px rgba(225,5,27,.1)}
.q-tabs{display:inline-flex;background:var(--bg-alt);border-radius:100px;padding:4px;margin-bottom:16px;gap:2px}
.q-tab{border:0;background:none;font-family:var(--font);font-weight:700;font-size:.92rem;color:var(--muted);padding:9px 20px;border-radius:100px;cursor:pointer;transition:.2s}
.q-tab.is-active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.q-inline{display:flex;gap:14px}
.q-inline label{flex:1;font-size:.86rem;font-weight:600;color:var(--ink-2);display:flex;flex-direction:column;gap:7px}
.q-hint{font-size:.85rem;color:var(--muted);margin-top:9px}
.q-suggest{list-style:none;margin:6px 0 0;padding:6px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
 max-height:230px;overflow-y:auto;box-shadow:var(--shadow-md);background:#fff;position:relative;z-index:5}
.q-suggest li{padding:11px 14px;border-radius:8px;cursor:pointer;font-weight:600;font-size:.95rem;display:flex;justify-content:space-between;gap:12px;transition:background .12s}
.q-suggest li:hover,.q-suggest li.active{background:var(--bg-alt)}
.q-suggest li .q-sg-area{color:var(--muted);font-weight:600;font-size:.85rem}
.q-suggest li mark{background:rgba(225,5,27,.14);color:var(--red-deep);border-radius:3px}
.q-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q-opt{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;font-size:.93rem;font-weight:600;transition:border-color .2s,background .2s}
.q-opt:hover{border-color:var(--line-2)}
.q-opt.on{border-color:var(--red);background:rgba(225,5,27,.04)}
.q-opt input{accent-color:var(--red);width:17px;height:17px;flex-shrink:0}
.q-opt .q-opt-price{margin-left:auto;color:var(--muted);font-weight:700;font-size:.85rem}
.q-empty{color:var(--muted);font-size:.93rem;grid-column:1/-1}

/* result card */
.quote-result{position:sticky;top:96px;background:var(--navy);color:#fff;border-radius:var(--radius);padding:clamp(24px,2.6vw,34px);box-shadow:var(--shadow-lg);overflow:hidden}
.qr-label{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#9DB6DE;font-weight:700}
.qr-price{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;margin:6px 0 2px;line-height:1}
.qr-price span::before{content:"";}
.qr-basis{color:#B9C6DA;font-size:.95rem;min-height:1.4em}
/* side-by-side: industry low end vs Class Sails (the moat, made visible in the estimate) */
.qr-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px}
.qr-compare .qc{border-radius:var(--radius-sm);padding:12px 14px;border:1px solid rgba(255,255,255,.12)}
.qr-compare .qc-lbl{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:5px}
.qr-compare .qc-val{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.qr-compare .qc.industry{background:rgba(255,255,255,.04)}
.qr-compare .qc.industry .qc-lbl{color:#8595AC}
.qr-compare .qc.industry .qc-val{color:#9DAABC;font-size:1.02rem;
 text-decoration:line-through;text-decoration-color:rgba(225,5,27,.7);text-decoration-thickness:2px}
.qr-compare .qc.ours{background:rgba(225,5,27,.14);border-color:rgba(225,5,27,.4)}
.qr-compare .qc.ours .qc-lbl{color:#ff8a94}
.qr-compare .qc.ours .qc-val{color:#fff;font-size:1.6rem}
.qr-compare .qc.ours .qc-save{display:inline-block;margin-top:4px;font-family:var(--font);font-size:.72rem;font-weight:800;color:#fff;background:var(--red);border-radius:100px;padding:2px 9px}
.qr-compare[hidden]{display:none}
.qr-break{margin:18px 0;display:flex;flex-direction:column;gap:8px}
.qr-break .row{display:flex;justify-content:space-between;font-size:.9rem;color:#C9D4E4;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.qr-break .row.total{color:#fff;font-weight:800;font-size:1rem;border-bottom:0;padding-top:11px}
.qr-break .row span:last-child{font-weight:700;color:#fff}
.qr-break:empty{margin:0}
.qr-fine{font-size:.78rem;color:#8595AC;margin-top:16px;line-height:1.5}
.quote-result .btn-red{box-shadow:0 8px 22px rgba(225,5,27,.4);margin-top:6px}

/* ---------- process steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:s}
.step{position:relative;padding-top:22px}
.step-n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;border:1.5px solid var(--line-2);color:var(--red);font-weight:800;font-size:1.1rem;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.step h3{font-size:1.06rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.93rem;line-height:1.5}
.step::before{content:"";position:absolute;top:42px;left:52px;right:-9px;height:1.5px;background:var(--line-2)}
.step:last-child::before{display:none}

/* ---------- materials ---------- */
.materials-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.materials-grid h2{margin:2px 0 0}
.materials-grid .btn{margin-top:26px}
.tiers{display:flex;flex-direction:column;gap:14px}
.tier{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--radius-sm);padding:20px 24px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease)}
.tier:hover{transform:translateX(6px)}
.tier h4{font-size:1.1rem;margin-bottom:5px}
.tier p{color:var(--muted);font-size:.95rem}

/* ---------- why (navy) ---------- */
.section-navy{background:radial-gradient(120% 130% at 80% 0%,var(--navy-2),var(--navy) 60%);color:#fff}
.on-navy{color:#fff}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,60px);align-items:center}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.why-list li{color:#B9C6DA;font-size:1.02rem;line-height:1.55;padding-left:28px;position:relative}
.why-list li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:3px;background:var(--red);transform:rotate(45deg)}
.why-list strong{color:#fff;font-weight:700}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#B9C6DA;padding:clamp(48px,6vw,76px) 0 32px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
/* full-colour lockup on navy - no invert filter (it would flatten it to a white silhouette) */
.footer-logo{width:190px;height:auto;display:block;margin-bottom:16px}
.footer-brand p{max-width:26ch;font-size:.95rem;color:#8595AC}
.footer-col h5{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.footer-col a,.footer-col p{display:block;color:#B9C6DA;font-size:.96rem;margin-bottom:11px;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:#6B7787}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:960px){
 .hero-grid{grid-template-columns:1fr;gap:36px}
 .hero-panel{aspect-ratio:16/10;max-width:560px}
 .cards{grid-template-columns:1fr 1fr}
 .quote{grid-template-columns:1fr}
 .quote-result{position:static}
 .steps{grid-template-columns:1fr 1fr}
 .step::before{display:none}
 .materials-grid,.why-grid,.footer-grid{grid-template-columns:1fr}
 .footer-grid{gap:28px}
}
@media(max-width:640px){
 body{font-size:16px}
 .nav,.header-cta{display:none}
 .nav-toggle{display:flex}
 /* The open menu is its OWN scroll container. It was position:absolute inside the
 sticky header with ~1800px of items and no overflow - the bottom two thirds were
 physically unreachable by finger (Kealan's phone, 2026-07-17). margin-left:0 kills
 the 14px offset inherited from the desktop .nav{margin-left:14px}.
 EXPLICIT height, not bottom:0 - the header's backdrop-filter makes it the containing
 block for fixed descendants, so bottom:0 resolved against the 74px header and the
 panel collapsed to 59px. calc against the viewport can't be hijacked by an ancestor;
 dvh so the iOS URL bar doesn't eat the last items. */
 .nav.open{display:flex;position:fixed;top:74px;left:0;right:0;margin-left:0;
 height:calc(100vh - 74px);height:calc(100dvh - 74px);
 flex-direction:column;background:#fff;padding:18px 24px 40px;gap:6px;
 box-shadow:var(--shadow-md);border-bottom:1px solid var(--line);
 overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
 .nav.open a{white-space:normal}
 .cards,.q-options{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr}
 .q-inline{flex-direction:column}
 .footer-legal{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
 *{animation:none!important;scroll-behavior:auto!important}
 .reveal{opacity:1;transform:none;transition:none}
 .accent-underline::after{transform:scaleX(1)}
}

/* ============================================================
 HERO + SCAFFOLD
 ============================================================ */
:root{ --display:Georgia,"Times New Roman",serif; }
body{ font-family:var(--font); }
h1,h2,h3,h4,h5,.btn{ font-family:var(--display); letter-spacing:-.015em; }

/* film grain */
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* preloader: a reference sail becomes verified geometry */
body.is-preloading{overflow:hidden}
.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}
.preloader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden;
 background:var(--bg);color:var(--ink);isolation:isolate;
 clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
 transition:clip-path .86s cubic-bezier(.76,0,.24,1),opacity .24s ease .7s,visibility 0s linear .96s}
.preloader::before{content:"";position:absolute;inset:clamp(18px,3vw,38px);border:1px solid rgba(91,107,124,.18);
 pointer-events:none}
.preloader::after{content:"";position:absolute;top:clamp(18px,3vw,38px);left:50%;width:1px;height:28px;
 background:var(--red);transform:translateX(-50%);pointer-events:none}
.preloader[hidden]{display:none}
.preloader.is-lifting{clip-path:polygon(65% 10%,65% 10%,84% 74%,54% 74%)}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pre-inner{position:relative;z-index:1;width:min(420px,calc(100vw - 52px));display:grid;justify-items:center;
 text-align:center;transform:translateZ(0)}
.pre-brand{display:flex;align-items:center;gap:13px;margin-bottom:10px;transition:opacity .2s ease,transform .3s var(--ease)}
.pre-mark{width:58px;height:58px;object-fit:contain}
.pre-brand span{font-family:var(--display);font-size:1.08rem;font-weight:700;text-transform:uppercase;letter-spacing:0;color:var(--ink)}
.pre-calibration{width:min(316px,76vw);transition:transform .86s cubic-bezier(.76,0,.24,1),opacity .22s ease .64s;
 transform-origin:center}
.pre-sail{display:block;width:100%;height:auto;overflow:visible}
.pre-sail path,.pre-sail line,.pre-sail circle{vector-effect:non-scaling-stroke}
.pre-grid{fill:none;stroke:rgba(91,107,124,.13);stroke-width:1;stroke-dasharray:2 7}
.pre-sail-paper{fill:rgba(255,255,255,.76)}
.pre-sail-wash{fill:var(--red);opacity:.055}
.pre-sail-guide{fill:none;stroke:rgba(91,107,124,.64);stroke-width:1.1}
.pre-sail-trace{fill:none;stroke:var(--red);stroke-width:2.25;stroke-linecap:square;stroke-linejoin:miter;
 stroke-dasharray:100;stroke-dashoffset:100}
.pre-seams{fill:none;stroke:rgba(91,107,124,.54);stroke-width:1;opacity:0;transition:opacity .32s ease}
.preloader.has-seams .pre-seams{opacity:1}
.pre-point{color:var(--red);opacity:0;transform:scale(.8);transform-box:fill-box;transform-origin:center;
 transition:opacity .24s ease,transform .32s var(--ease)}
.pre-point.is-visible{opacity:1;transform:scale(1)}
.pre-point circle{fill:var(--bg);stroke:currentColor;stroke-width:1.5}
.pre-point path{fill:none;stroke:currentColor;stroke-width:1}
.pre-point text{fill:var(--ink-2);font-family:var(--font);font-size:9px;font-weight:700;letter-spacing:0}
.pre-readout{width:min(242px,64vw);display:flex;align-items:baseline;justify-content:space-between;margin-top:-4px;
 padding-top:12px;border-top:1px solid rgba(91,107,124,.28);color:var(--muted);font-size:.68rem;font-weight:700;
 text-transform:uppercase;letter-spacing:0;transition:opacity .2s ease,transform .3s var(--ease)}
.pre-percent{display:flex;align-items:baseline;color:var(--ink);font-variant-numeric:tabular-nums}
.pre-percent b{min-width:2.15ch;font-family:var(--display);font-size:1.35rem;line-height:1;font-weight:500;text-align:right}
.pre-percent small{font-family:var(--font);font-size:.65rem;margin-left:2px}
.preloader.is-complete .pre-sail-guide{stroke:rgba(91,107,124,.28)}
.preloader.is-lifting .pre-brand,.preloader.is-lifting .pre-readout{opacity:0;transform:translateY(-8px)}
.preloader.is-lifting .pre-calibration{transform:translate(18vw,-3vh) scale(1.24);opacity:.18}

@media(max-width:640px){
 .preloader::before{inset:16px}
 .preloader::after{top:16px}
 .pre-inner{width:calc(100vw - 42px)}
 .pre-brand{margin-bottom:2px}
 .pre-mark{width:48px;height:48px}
 .pre-calibration{width:min(288px,76vw)}
 /* PHONES DO NOT GET THE TRIANGLE (Kealan, 2026-07-19: "the animation kind of gets
    ruined due to the white minimizing").
    The lift clips the preloader to a sail-shaped polygon - but those percentages are of
    the VIEWPORT, so on a tall narrow phone the shape resolves to a large white wedge
    that then sits over the hero for the ~700ms before .done fades it. On a wide screen
    it reads as a sail flying off; on a phone it reads as a broken overlay slicing the
    headline in half. So phones fade straight out instead, and the sail diagram stops
    being flung sideways (translate(18vw) pushes it off a narrow screen anyway). */
 .preloader{transition:opacity .38s ease,visibility 0s linear .4s}
 .preloader.is-lifting{clip-path:none;opacity:0}
 .preloader.is-lifting .pre-calibration{transform:scale(1.06);opacity:0}
 .preloader.is-lifting .pre-calibration{transform:translate(12vw,-4vh) scale(1.18)}
}
@media(prefers-reduced-motion:reduce){
 .preloader{transition:opacity .12s ease,visibility 0s linear .12s}
 .preloader.is-lifting{clip-path:none}
 .preloader.is-lifting .pre-calibration{transform:none;opacity:0}
}

/* hero - sticky WebGL */
/* One viewport, no pin. 240vh + sticky was the 3D boat's scroll-scrub rig -
   the logo intro is time-based, so the extra 140vh was just dead scroll with
   the hero frozen in place. svh so a phone's collapsing URL bar doesn't crop
   the CTA off the bottom. */
.hero-sail{position:relative;height:100vh;height:100svh;background:var(--navy)}
.hero-sticky{position:relative;height:100%;overflow:hidden}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-sail.no3d .hero-sticky{background:
 radial-gradient(80% 80% at 70% 18%,rgba(220,50,34,.18),transparent 56%),
 linear-gradient(180deg,#eef3f5 0%,#f6f4ef 44%,#0E1B2E 72%,#0E1B2E 100%)}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(90deg,rgba(14,27,46,.58) 0%,rgba(14,27,46,.28) 34%,transparent 62%),
 linear-gradient(180deg,rgba(14,27,46,.52) 0%,rgba(14,27,46,.14) 13%,transparent 30%,transparent 52%,rgba(14,27,46,.64) 100%)}
.hud{position:absolute;top:clamp(88px,11vh,104px);font-family:var(--font);font-size:.72rem;
 letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:600;z-index:3}
.hud-tl{left:clamp(20px,5vw,48px)} .hud-tr{right:clamp(20px,5vw,48px)}
.hero-lede{position:absolute;left:clamp(20px,5vw,48px);bottom:clamp(52px,10vh,120px);z-index:3;color:#fff;max-width:min(780px,88vw)}
.hero-lede .eyebrow{color:#B9D0F0}
.hero-lede h1{color:#fff;font-size:clamp(2.6rem,5.2vw,4.7rem);line-height:1;margin:12px 0 28px;
 font-weight:600;text-shadow:0 2px 34px rgba(0,0,0,.35)}
.hero-lede .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.btn-glass{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.42);
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.2);border-color:#fff;transform:translateY(-2px)}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;display:flex;
 flex-direction:column;align-items:center;gap:9px;color:rgba(255,255,255,.7);font-size:.68rem;
 letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.75),transparent);
 animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
 55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* header: transparent + white ONLY on pages with a dark hero (body.has-hero = home);
 every content page falls back to the base solid glassy header with ink nav - always legible */
.nav a{white-space:nowrap}
body.has-hero .site-header{background:rgba(252,252,250,.78);-webkit-backdrop-filter:saturate(160%) blur(14px);
 backdrop-filter:saturate(160%) blur(14px);border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
body.has-hero .site-header:not(.scrolled) .nav a{color:var(--ink-2);text-shadow:none}
body.has-hero .site-header:not(.scrolled) .nav a::after{background:var(--red)}
body.has-hero .site-header.scrolled{background:rgba(252,252,250,.78);-webkit-backdrop-filter:saturate(160%) blur(14px);
 backdrop-filter:saturate(160%) blur(14px);border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
body.has-hero .site-header:not(.scrolled) .brand-logo{filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}

@media(prefers-reduced-motion:reduce){ .scroll-cue i{animation:none} .grain{display:none} }
/* On a phone the cue sat ON TOP of "Explore the range" (measured: 54px of overlap on a
 390x844 - Kealan's screenshot). Nobody needs to be told to scroll a phone; the desktop
 cue earns its place, the mobile one only collided. */
@media(max-width:640px){ .scroll-cue{display:none} }
/* 150vh, was 200: the full drone flight now completes in about half a screen of finger
 travel - Kealan wanted more camera motion per scroll on the phone. */
@media(max-width:640px){ .hud-tr{display:none} }
@media(max-width:640px){
 .hero-scrim{background:
 linear-gradient(90deg,rgba(14,27,46,.86) 0%,rgba(14,27,46,.62) 54%,rgba(14,27,46,.1) 100%),
 linear-gradient(180deg,rgba(14,27,46,.22) 0%,rgba(14,27,46,.18) 36%,rgba(14,27,46,.88) 100%)}
 .hero-lede{left:20px;right:20px;bottom:38px;max-width:350px}
 .hero-lede h1{font-size:clamp(2.35rem,12vw,3.05rem);line-height:.95;margin-bottom:22px}
 .hero-lede .hero-cta{display:grid;grid-template-columns:1fr;gap:10px;max-width:236px}
 .hero-lede .hero-cta .btn{width:100%;padding:13px 18px}
}

/* ============================================================
 INNER PAGES - category / product templates (content-clone of H-Sails IA, our floor)
 ============================================================ */
.crumb{display:flex;gap:9px;align-items:center;font-size:.82rem;color:var(--muted);font-weight:600;padding:24px 0 0}
.crumb a:hover{color:var(--ink)} .crumb .sep{opacity:.45}
.page-hero{background:linear-gradient(178deg,#f7f9fb,#e9eef3);border-bottom:1px solid var(--line);padding:clamp(28px,4vw,60px) 0 clamp(36px,5vw,64px);overflow:hidden}
.page-hero-grid{display:grid;grid-template-columns:1.06fr .8fr;gap:clamp(28px,5vw,64px);align-items:center}
.page-hero-art{margin:0;display:grid;place-items:center}
.page-hero-art .sail-dia{width:100%;max-width:330px;height:auto;filter:drop-shadow(0 26px 50px rgba(14,26,43,.16))}
@media(max-width:860px){.page-hero-grid{grid-template-columns:1fr}.page-hero-art{display:none}}
.page-hero .eyebrow{margin-bottom:12px}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:17ch}
.page-hero .lead{margin-top:18px;max-width:54ch}
.page-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.statline{display:flex;flex-wrap:wrap;gap:18px 40px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.statline .st{display:flex;flex-direction:column;gap:2px}
.statline .st b{font-family:var(--display);font-size:1.45rem;letter-spacing:-.01em;color:var(--ink)}
.statline .st span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}

.family{padding:clamp(46px,6vw,82px) 0}
.family + .family{border-top:1px solid var(--line)}
.family-head{max-width:62ch;margin-bottom:34px}
.family-head h2{font-size:clamp(1.6rem,2.9vw,2.35rem)}
.family-head p{color:var(--muted);margin-top:13px;font-size:1.02rem;line-height:1.62;max-width:58ch}

.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prod-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
 padding:24px 24px 22px;box-shadow:var(--shadow-sm);transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .3s}
.prod-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.prod-card .pc-tag{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.prod-card h3{font-size:1.12rem;margin:11px 0 8px;letter-spacing:-.01em}
.prod-card > p{color:var(--muted);font-size:.92rem;line-height:1.5;flex:1}
.prod-price{display:flex;align-items:baseline;gap:6px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.prod-price .from{font-size:.76rem;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.prod-price .amt{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.prod-price .unit{font-size:.85rem;color:var(--muted);font-weight:600}
.prod-card .pc-link{margin-top:15px;font-weight:700;font-size:.9rem;color:var(--red);display:inline-flex;gap:6px;transition:gap .2s}
.prod-card:hover .pc-link{gap:11px;color:var(--red-deep)}

.band{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(30px,4vw,54px);
 display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(22px,4vw,48px);align-items:center}
.band h2{font-size:clamp(1.5rem,2.7vw,2.15rem)}
.band p{color:var(--muted);margin-top:13px;line-height:1.62;max-width:56ch}
.band .band-cta{display:flex;flex-direction:column;gap:12px}
.band.dark{background:radial-gradient(120% 130% at 80% 0%,var(--navy-2),var(--navy) 60%);border-color:transparent;color:#fff}
.band.dark h2{color:#fff} .band.dark p{color:#B9C6DA}
.formula{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;font-family:var(--display);font-weight:600}
.formula code{background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:6px 11px;font-family:var(--display);font-size:.95rem}
.band.dark .formula code{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.formula .op{color:var(--muted)} .band.dark .formula .op{color:#9DB6DE}

.related{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rel-card{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
 border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.rel-card h3{font-size:1.18rem} .rel-card p{color:var(--muted);font-size:.9rem;margin-top:4px}
.rel-card .arw{color:var(--red);font-size:1.5rem;font-weight:700;line-height:1}

.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{width:100%}

@media(max-width:960px){ .prod-grid{grid-template-columns:1fr 1fr} .band{grid-template-columns:1fr} .related{grid-template-columns:1fr} }
@media(max-width:640px){ .prod-grid{grid-template-columns:1fr} }

/* ---------- 3D logo mini-hero (live brand mark in the menu bar) ---------- */
/* Brand lockup. The mark is 2.28:1 - it MUST keep that proportion.
 It was previously squeezed into a 52px square, which rendered the wordmark ~4px tall. */
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand-logo{width:170px;height:auto;display:block;transition:transform .25s var(--ease)}
.brand:hover .brand-logo{transform:translateY(-1px)}
@media(max-width:860px){.brand-logo{width:142px}}
@media(max-width:420px){.brand-logo{width:120px}}
@media(max-width:640px){ .brand-badge{width:46px;height:46px;border-radius:12px} }

/* ---------- product-card sail diagram (our own vector imagery) ---------- */
.prod-media{aspect-ratio:5/4;border-radius:12px;border:1px solid var(--line);
 background:radial-gradient(120% 120% at 50% 12%,#ffffff,#f1eee6);
 display:grid;place-items:center;padding:16px;margin-bottom:18px;overflow:hidden}
.prod-media .sail-dia{height:100%;max-height:172px;width:auto;filter:drop-shadow(0 6px 14px rgba(14,26,43,.08))}
.prod-card{padding-top:20px}
.prod-card h3 a:hover{color:var(--red)}

/* ---------- product-detail page ---------- */
.product-top{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start;padding:clamp(18px,3vw,36px) 0 clamp(26px,4vw,44px)}
.product-media{position:sticky;top:96px}
.pm-frame{aspect-ratio:4/5;border-radius:var(--radius);border:1px solid var(--line);
 background:radial-gradient(120% 120% at 50% 12%,#fff,#f1eee6);display:grid;place-items:center;padding:34px;box-shadow:var(--shadow-sm)}
.pm-frame .sail-dia{height:100%;max-height:360px;width:auto;filter:drop-shadow(0 12px 24px rgba(14,26,43,.1))}
.pm-cap{margin-top:14px;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:center}
.product-info h1{font-size:clamp(2rem,3.6vw,2.9rem);margin:6px 0 12px}
.product-price-lead{font-family:var(--display);font-size:1.55rem;font-weight:700;color:var(--ink);margin-bottom:24px}
.product-price-lead .unit{font-size:.9rem;color:var(--muted);font-weight:600}
.spec-bullets{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.spec-bullets li{position:relative;padding-left:26px;color:var(--ink-2);font-size:.98rem;line-height:1.45}
.spec-bullets li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:3px;background:var(--red);transform:rotate(45deg)}
.product-quote{margin-top:16px}
.product-detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:start}
.datasheet h2,.product-desc h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:6px}
.ds-table{width:100%;border-collapse:collapse;margin-top:12px}
.ds-table th,.ds-table td{text-align:left;vertical-align:top;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.ds-table th{color:var(--muted);font-weight:600;width:44%;padding-right:20px}
.ds-table td{color:var(--ink);font-weight:500}
.product-desc p{color:var(--ink-2);line-height:1.65}
@media(max-width:900px){ .product-top{grid-template-columns:1fr} .product-media{position:static} .pm-frame{aspect-ratio:4/3;max-width:420px} .product-detail-grid{grid-template-columns:1fr} }

/* ---------- boat finder ---------- */
.boatbook-section{padding-top:clamp(42px,6vw,72px)}
.boatbook-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;margin-bottom:18px}
.boatbook-field{display:block}
.boatbook-label{display:block;margin-bottom:8px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.boatbook-search{width:100%;font-family:var(--font);font-size:1rem;font-weight:600;color:var(--ink);padding:14px 16px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.boatbook-search:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 4px rgba(225,5,27,.1)}
.boatbook-count{padding-bottom:13px;font-size:.9rem;font-weight:700;color:var(--muted);white-space:nowrap}
.boatbook-az{position:sticky;top:82px;z-index:20;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px;padding:10px;background:rgba(252,252,250,.92);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.boatbook-az button{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-family:var(--font);font-size:.82rem;font-weight:800;letter-spacing:0;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.boatbook-az button:hover{border-color:var(--red);color:var(--red)}
.boatbook-az button:disabled,.boatbook-az button.is-empty{opacity:.32;cursor:not-allowed}
.boatbook-list{display:grid;gap:28px}
.boatbook-group{scroll-margin-top:142px}
.boatbook-heading{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:1.45rem;letter-spacing:0}
.boatbook-rows{display:grid;border-top:1px solid var(--line)}
.boatbook-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.boatbook-model{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.boatbook-area{font-size:.86rem;font-weight:700;color:var(--muted);white-space:nowrap}
.boatbook-quote{font-size:.9rem;font-weight:800;color:var(--red);white-space:nowrap}
.boatbook-quote:hover{color:var(--red-deep)}
.boatbook-row.is-hidden,.boatbook-group.is-hidden{display:none}
@media(max-width:700px){.boatbook-controls{grid-template-columns:1fr}.boatbook-count{padding-bottom:0}.boatbook-row{grid-template-columns:minmax(0,1fr) auto}.boatbook-area{grid-column:1/-1}.boatbook-az{top:78px}}

/* ============================================================
 DUAL-AXIS NAV - boat axis (Boat Finder) + sail axis (Sails ▾ mega-menu)
 ============================================================ */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-droptrigger{font-family:inherit;font-weight:600;font-size:.98rem;color:var(--ink-2);background:none;border:0;
 padding:6px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;position:relative}
.nav-droptrigger::after{content:"";width:0;height:2px;background:var(--red);position:absolute;left:0;bottom:0;transition:width .28s var(--ease)}
.nav-drop:hover .nav-droptrigger,.nav-drop:focus-within .nav-droptrigger{color:var(--ink)}
.nav-drop:hover .nav-droptrigger::after,.nav-drop:focus-within .nav-droptrigger::after{width:100%}
.nav-droptrigger .caret{transition:transform .25s var(--ease);font-size:.62em;opacity:.7}
.nav-drop:hover .nav-droptrigger .caret,.nav-drop:focus-within .nav-droptrigger .caret{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
 display:grid;grid-template-columns:1fr 1fr;gap:28px;min-width:min(460px,calc(100vw - 24px));padding:24px 28px;
 background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
 opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:70}
.nav-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-menu-h{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.nav-menu a{display:block;font-weight:600;font-size:.96rem;color:var(--ink-2);padding:7px 0;position:relative}
.nav-menu a small{display:block;font-weight:500;font-size:.78rem;color:var(--muted);margin-top:1px}
.nav-menu a:hover{color:var(--red)}
@media(max-width:640px){
 .nav-drop{flex-direction:column;align-items:flex-start;width:100%}
 .nav-droptrigger{padding:8px 0}
 .nav-droptrigger .caret{display:none}
 .nav-menu{position:static !important;transform:none !important;left:auto;opacity:1;visibility:visible;
 pointer-events:auto;box-shadow:none;width:100%;
 border:0;border-left:2px solid var(--line);border-radius:0;min-width:0;padding:4px 0 8px 16px;gap:16px;grid-template-columns:1fr}
}

/* ============================================================
 HOMEPAGE - full-range frame: range pillars, production-line moat, guarantee, EYS
 ============================================================ */
/* range pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
 padding:28px 26px 24px;box-shadow:var(--shadow-sm);overflow:hidden;
 transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.pillar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);opacity:.9}
.pillar-tag{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.pillar h3{font-size:1.24rem;margin-bottom:9px}
.pillar p{color:var(--muted);font-size:.95rem;line-height:1.55;flex:1}
.pillar-link{margin-top:16px;font-weight:700;font-size:.92rem;color:var(--red);display:inline-flex;gap:6px;transition:gap .2s}
.pillar:hover .pillar-link{gap:11px;color:var(--red-deep)}
@media(max-width:960px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}

/* tall use-case IMAGE tiles (Doyle-style) - photo drops into --img; navy fallback until then */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tile{position:relative;display:block;aspect-ratio:3/4.2;border-radius:var(--radius);overflow:hidden;
 background:radial-gradient(130% 120% at 50% 0%,var(--navy-2),var(--navy));box-shadow:var(--shadow-md);isolation:isolate}
.tile .tile-img{position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;
 transition:transform .6s var(--ease);z-index:0}
.tile:hover .tile-img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(180deg,rgba(14,26,43,.05) 0%,rgba(14,26,43,.12) 42%,rgba(14,26,43,.85) 100%)}
.tile-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 22px;color:#fff}
.tile-tag{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.82}
.tile-body h3{color:#fff;font-size:1.5rem;margin:7px 0 5px;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.tile-body p{color:rgba(255,255,255,.86);font-size:.94rem;margin-bottom:13px;line-height:1.4}
.tile-arw{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:#fff;
 border-bottom:2px solid var(--red);padding-bottom:2px;transition:gap .2s}
.tile:hover .tile-arw{gap:12px}
@media(max-width:960px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}.tile{aspect-ratio:16/10}}

/* Quantum-style service cards with photos - photo drops into --img; navy fallback until then */
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
 overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .3s}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.svc-card-img{aspect-ratio:16/10;background-color:var(--navy);background-image:var(--img);background-size:cover;
 background-position:center;position:relative}
.svc-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(22,38,62,.35),transparent 60%)}
/* cards whose stock photo was pulled: a deliberate brand panel, not a missing-image hole */
.svc-card-img.no-photo{background-image:linear-gradient(135deg,var(--navy-2) 0%,var(--navy) 70%)}
.svc-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.svc-card-body h3{font-size:1.2rem;margin-bottom:8px}
.svc-card-body p{color:var(--muted);font-size:.95rem;line-height:1.5;flex:1}
.svc-card-link{margin-top:16px;font-weight:700;font-size:.92rem;color:var(--red);display:inline-flex;gap:6px;transition:gap .2s}
.svc-card:hover .svc-card-link{gap:11px;color:var(--red-deep)}
@media(max-width:860px){.svc-cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.svc-cards{grid-template-columns:1fr}}

/* production-line moat band */
.value-band{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,68px);align-items:center}
.value-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:18px}
.value-points li{position:relative;padding-left:34px;color:var(--ink-2);font-size:1.02rem;line-height:1.55}
.value-points li strong{color:var(--ink);font-weight:800}
.value-points li::before{content:"";position:absolute;left:0;top:.1em;width:22px;height:22px;border-radius:6px;
 background:rgba(225,5,27,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1051B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:14px;background-repeat:no-repeat;background-position:center}
.savecard{background:radial-gradient(120% 130% at 80% 0%,var(--navy-2),var(--navy) 62%);color:#fff;border-radius:var(--radius);
 padding:clamp(28px,3.4vw,40px);box-shadow:var(--shadow-lg)}
.savecard .sc-eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#9DB6DE;font-weight:700}
.savecard .sc-bars{display:grid;gap:16px;margin:22px 0 18px}
.sc-bar{display:grid;gap:7px}
.sc-bar .sc-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:#C9D4E4}
.sc-bar .sc-row b{font-family:var(--display);font-size:1.05rem;color:#fff;font-weight:700}
.sc-track{height:12px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden}
/* the fills are <i> elements - inline boxes ignore width/height, so without display:block the
   bars rendered as empty tracks. block + a grow transition = the comparison actually reads. */
.sc-fill{display:block;height:100%;border-radius:100px;transform-origin:left center;
  animation:scGrow .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes scGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.sc-fill{animation:none}}
/* the industry bar sat at #5b6b7c-#8595AC on a #0E1B2E card: only ~1.5:1 against the
   panel, so it read as empty track. It also ran dark->light while the red bar runs
   light->dark, so the two didn't read as the same object measured twice.
   Fixed with the existing silver tokens: ~9:1 on navy, near-zero saturation so the
   brand red stays the only saturated thing on the card, and the same light->dark
   direction as .ours. Silver = the baseline, red = us. */
.sc-fill.industry{width:100%;background:linear-gradient(90deg,var(--silver-hi),var(--silver-lo))}
.sc-fill.ours{width:80%;background:linear-gradient(90deg,var(--red),var(--red-deep))}
.savecard .sc-note{font-size:.78rem;color:#8595AC;line-height:1.5;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:860px){.value-band{grid-template-columns:1fr}}

/* guarantee + services strip */
.gtee{display:flex;align-items:center;gap:clamp(20px,3vw,34px);background:var(--bg-alt);border:1px solid var(--line);
 border-left:5px solid var(--red);border-radius:var(--radius);padding:clamp(24px,3vw,34px) clamp(26px,3.4vw,40px)}
.gtee-badge{flex:0 0 auto;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
 background:radial-gradient(120% 120% at 30% 20%,var(--navy-2),var(--navy));box-shadow:var(--shadow-md)}
.gtee-badge svg{width:38px;height:38px;stroke:#fff;fill:none;stroke-width:1.5}
.gtee-txt h3{font-size:1.28rem;margin-bottom:6px}
.gtee-txt p{color:var(--muted);font-size:.98rem;line-height:1.55;max-width:64ch}
.gtee-txt a{color:var(--red);font-weight:700;white-space:nowrap}
@media(max-width:560px){.gtee{flex-direction:column;align-items:flex-start;text-align:left}}

.svc-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.svc-chip{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
 padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .28s var(--ease),border-color .3s,box-shadow .3s}
.svc-chip:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow-md)}
.svc-chip b{font-size:1.02rem;color:var(--ink);font-weight:700}
.svc-chip span{font-size:.88rem;color:var(--muted);line-height:1.45}
@media(max-width:760px){.svc-strip{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.svc-strip{grid-template-columns:1fr}}

/* ---------- locations ---------- */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3vw,38px);box-shadow:var(--shadow-sm)}
.loc-card .loc-tag{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.loc-card h3{font-size:1.5rem;margin-bottom:6px}
.loc-card .loc-role{color:var(--muted);font-size:.95rem;margin-bottom:20px}
.loc-rows{list-style:none;margin:0;padding:0;display:grid;gap:14px;border-top:1px solid var(--line);padding-top:20px}
.loc-rows li{display:grid;grid-template-columns:104px 1fr;gap:14px;font-size:.96rem;line-height:1.5}
.loc-rows .lk{color:var(--muted);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.loc-rows .lv{color:var(--ink-2)}
.loc-rows .lv a{color:var(--red);font-weight:600}
.loc-rows .todo{color:var(--muted);font-style:italic}
@media(max-width:760px){.loc-grid{grid-template-columns:1fr}.loc-rows li{grid-template-columns:88px 1fr}}

/* ---------- contact form (bootstrap: Web3Forms endpoint, honeypot, no reCAPTCHA) ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:start}
.form{display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-md)}
.form .f-row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.form label{display:flex;flex-direction:column;gap:7px;font-size:.82rem;font-weight:700;color:var(--ink-2)}
.form input,.form select,.form textarea{font-family:var(--font);font-size:1rem;font-weight:500;color:var(--ink);
 padding:13px 15px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;transition:border-color .2s,box-shadow .2s}
.form textarea{resize:vertical;min-height:120px}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 4px rgba(225,5,27,.1)}
.form .f-checks{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.form .f-check{display:flex;flex-direction:row;align-items:center;gap:9px;font-weight:600;font-size:.92rem;color:var(--ink-2);cursor:pointer}
.form .f-check input{width:17px;height:17px;accent-color:var(--red);padding:0}
.form .f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .f-note{font-size:.8rem;color:var(--muted);line-height:1.5}
.form-aside{display:grid;gap:18px}
.form-aside .fa-block{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.form-aside h4{font-size:1.08rem;margin-bottom:8px}
.form-aside p{color:var(--muted);font-size:.95rem;line-height:1.55}
.form-aside a{color:var(--red);font-weight:600}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}.form .f-row,.form .f-checks{grid-template-columns:1fr}}

/* floating "get an instant estimate" tab - site-wide */
.float-est{position:fixed;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);z-index:80;
 display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 14px;border-radius:100px;
 background:var(--red);color:#fff;font-family:var(--font);font-weight:700;font-size:.96rem;letter-spacing:-.01em;
 box-shadow:0 10px 30px rgba(225,5,27,.38),0 2px 8px rgba(14,26,43,.18);
 transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;cursor:pointer}
.float-est:hover{background:var(--red-deep);transform:translateY(-3px);box-shadow:0 16px 38px rgba(225,5,27,.44)}
.float-est .fe-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);
 font-family:var(--display);font-weight:700;font-size:1.02rem;flex:0 0 auto}
@media(max-width:640px){
 .float-est{padding:14px;gap:0}
 .float-est .fe-tx{display:none}
 .float-est .fe-ic{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){ .float-est{transition:none} }

/* floating WhatsApp + call - contact/locations/both lofts/superyacht only (main.js).
   Stacks in the same right-hand column ABOVE the estimate tab, so the two CTAs read
   as one column rather than fighting for the same corner. */
.float-contact{position:fixed;right:clamp(14px,2.5vw,26px);
 bottom:calc(clamp(14px,2.5vw,26px) + 64px);z-index:80;display:flex;flex-direction:column;gap:10px}
.float-contact a{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
 color:#fff;box-shadow:0 10px 26px rgba(14,26,43,.26);
 transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .2s}
.float-contact a:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(14,26,43,.34);filter:brightness(1.07)}
.float-contact a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.float-contact svg{width:26px;height:26px;fill:currentColor}
.fc-wa{background:#25D366}   /* WhatsApp brand green - recognised instantly, so no label needed */
.fc-tel{background:var(--navy-2)}
/* label appears on hover only: two silent circles are ambiguous, two labelled pills are noise */
.fc-tip{position:absolute;right:60px;white-space:nowrap;background:var(--ink);color:#fff;
 font-size:.82rem;font-weight:700;padding:7px 12px;border-radius:8px;opacity:0;pointer-events:none;
 transform:translateX(6px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.float-contact a:hover .fc-tip,.float-contact a:focus-visible .fc-tip{opacity:1;transform:translateX(0)}
@media(max-width:640px){
 /* On a phone the three floats lie in a ROW along the bottom edge instead of a
    column up the right one. Stacked, they were ~180px of the right-hand edge -
    a fifth of the screen height sitting over whatever you were reading, and on
    a long list (Boat Finder) permanently over the rows. The estimate tab is
    already icon-only at this width, so all three are circles and a row is the
    natural shape. */
 .float-contact{flex-direction:row;gap:10px;
  bottom:clamp(14px,2.5vw,26px);right:calc(clamp(14px,2.5vw,26px) + 58px)}
 .float-contact a{width:48px;height:48px}
 .float-contact svg{width:24px;height:24px}
 .fc-tip{display:none}          /* no hover on touch - the icons carry it */
}
@media(prefers-reduced-motion:reduce){.float-contact a,.fc-tip{transition:none}}

/* Both floats step aside while the card deck is under them - the deck keeps its
   own transport controls in this exact corner (main.js sets the class). */
.deck-in-view .float-est,.deck-in-view .float-contact{
 opacity:0;pointer-events:none;transform:translateY(10px);
 transition:opacity .22s var(--ease),transform .22s var(--ease)}
@media(prefers-reduced-motion:reduce){
 .deck-in-view .float-est,.deck-in-view .float-contact{transition:none}}

/* loft media band - the harbour the loft actually sits in, above the address block.
   The <video> carries the still as its poster, so if the video never loads (phone,
   reduced-motion, data-saver, blocked autoplay) the band still reads as a photo
   rather than collapsing to a black box. */
/* Small and clean, not a hero (Kealan, 2026-07-19: "images too dominant for the pages
   you added them to"). The first version was a full-width 16/9 band with a heavy shadow,
   which outranked the address block it was meant to introduce. Now an inset plate: a
   modest fixed width, a light border instead of a drop shadow, and a quiet caption. */
.loft-media{position:relative;margin:0;max-width:460px;border-radius:var(--radius-sm);
 overflow:hidden;border:1px solid var(--line-2);background:var(--navy)}
/* phones get the still + this control rather than 4 MB they didn't ask for */
.loft-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 display:inline-flex;align-items:center;gap:10px;padding:14px 22px 14px 18px;border:0;
 border-radius:100px;background:rgba(14,26,43,.72);color:#fff;font-family:var(--font);
 font-weight:700;font-size:.95rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);
 backdrop-filter:blur(6px);box-shadow:0 8px 24px rgba(14,26,43,.35)}
.loft-play:active{transform:translate(-50%,-50%) scale(.97)}
/* height:auto is load-bearing - the <img> carries width/height attributes (which reserve
   space and stop layout shift), and those map to the height property. Without auto they
   WIN over aspect-ratio, which only fills a dimension that is auto: the plate rendered
   458x733 portrait instead of 3:2. */
.loft-media video,.loft-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.loft-media figcaption{background:var(--bg-alt);color:var(--muted);font-size:.8rem;
 line-height:1.45;padding:10px 14px;border-top:1px solid var(--line)}
@media(max-width:640px){.loft-media{max-width:none}.loft-media video,.loft-media img{aspect-ratio:4/3}}

/* powered by EYS */
.eys-strip{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;
 padding:26px 0;border-top:1px solid rgba(255,255,255,.1);margin-top:8px}
.eys-strip .eys-lbl{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#8595AC;font-weight:700}
.eys-strip a{color:#fff;font-weight:700;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .2s}
.eys-strip a:hover{border-color:#fff}
.eys-strip .eys-sub{width:100%;font-size:.82rem;color:#6B7787;margin-top:2px}

/* ---------- one-design class browser (dinghy-class.html) ---------- */
.od-tools{display:flex;align-items:center;gap:18px;margin:6px 0 22px;flex-wrap:wrap}
.od-tools input[type=search]{flex:1 1 320px;max-width:440px;font-family:var(--font);font-size:1.02rem;font-weight:500;
 color:var(--ink);padding:13px 18px;border:1.5px solid var(--line-2);border-radius:100px;background:#fff;
 transition:border-color .2s,box-shadow .2s}
.od-tools input[type=search]:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 4px rgba(225,5,27,.1)}
.od-count{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.od-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.od-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;
 box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s}
.od-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.od-card h3{font-size:1.08rem;margin-bottom:10px}
.od-card ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;flex:1}
.od-card li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.92rem;color:var(--ink-2);
 border-bottom:1px dashed var(--line);padding-bottom:6px}
.od-card li b{font-family:var(--display);font-weight:700;color:var(--ink);white-space:nowrap}
.od-ask{font-size:.85rem;font-weight:700;color:var(--red)}
.od-none{color:var(--muted);font-size:1rem;grid-column:1/-1}
@media(max-width:1100px){.od-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.od-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.od-grid{grid-template-columns:1fr}}

/* ---------- measurement-form downloads (measure.html) ---------- */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.dl-col h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.dl{display:flex;flex-direction:column;gap:2px;padding:13px 16px;margin-bottom:8px;background:#fff;
 border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
 transition:transform .22s var(--ease),border-color .25s,box-shadow .25s;position:relative}
.dl::after{content:"PDF ↓";position:absolute;right:14px;top:50%;transform:translateY(-50%);
 font-size:.68rem;font-weight:800;letter-spacing:.1em;color:var(--red);opacity:.75}
.dl:hover{transform:translateX(4px);border-color:var(--line-2);box-shadow:var(--shadow-md)}
.dl b{font-size:.98rem;color:var(--ink);padding-right:56px}
.dl span{font-size:.82rem;color:var(--muted);padding-right:56px}
@media(max-width:720px){.dl-grid{grid-template-columns:1fr}}

/* ---------- brand lockup motion ----------
 NO overflow/border-radius on .brand - that clipped the hero drop-shadow into a hard
 rectangle (the "flat line"). NO rotation either - a flat PNG rocking on scroll axes read
 as a wobbling sticker. The only motion is a specular band (.brand-spec) masked to the
 mark and raked across the chrome by scroll position (js/main.js): light on metal. */
.brand{position:relative}
.brand .brand-logo{display:block;position:relative;z-index:1}
.brand-spec{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
 -webkit-mask-image:url("/assets/logo/class-sails-lockup.png");mask-image:url("/assets/logo/class-sails-lockup.png");
 -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-position:left center;mask-position:left center;
 background:linear-gradient(108deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%);
 background-size:280% 100%;background-position:130% 0}
/* scroll-linked rake is user-driven motion (like the hero) - it runs even under reduced-motion;
 it never animates on its own. */

/* ---------- bespoke cursor ---------- */
@media (hover:hover) and (pointer:fine){
 html.cur-on, html.cur-on *{cursor:none !important}
 html.cur-on input, html.cur-on textarea, html.cur-on select{cursor:text !important}
}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:99999;border-radius:50%;
 opacity:0;transition:opacity .25s}
html.cur-live .cur-dot,html.cur-live .cur-ring{opacity:1}
.cur-dot{width:7px;height:7px;background:var(--red);margin:-3.5px 0 0 -3.5px}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(225,5,27,.85);
 background:rgba(225,5,27,0);display:grid;place-items:center;
 transition:opacity .25s,width .28s var(--ease),height .28s var(--ease),margin .28s var(--ease),
 background .28s,border-color .28s}
.cur-ring .cur-tx{font:700 .6rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#fff;
 opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease)}
.cur-ring.is-link{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(225,5,27,.12);border-color:var(--red)}
.cur-ring.is-label{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(225,5,27,.92);border-color:var(--red)}
.cur-ring.is-label .cur-tx{opacity:1;transform:scale(1)}
.cur-ring.is-down{width:26px;height:26px;margin:-13px 0 0 -13px}
.cur-hidden .cur-dot,.cur-hidden .cur-ring{opacity:0 !important}

/* "also in this range" orphan-rescue strips */
.more-links{border-top:1px solid var(--line);padding-top:26px}
.more-links h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.ml-row{display:flex;flex-wrap:wrap;gap:10px}
.ml-row a{font-size:.9rem;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);
 border-radius:100px;padding:9px 16px;transition:border-color .2s,color .2s,transform .2s var(--ease)}
.ml-row a:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}

/* care-by-cloth matrix (sail-care.html) */
.care-table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.ct-row{display:grid;grid-template-columns:.9fr 1fr 2fr;gap:20px;padding:18px 22px;border-bottom:1px solid var(--line);align-items:start}
.ct-row:last-child{border-bottom:0}
.ct-head{background:var(--bg-alt);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ct-row b{display:block;color:var(--ink);font-size:1rem}
.ct-row small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.ct-row span{color:var(--ink-2);font-size:.94rem;line-height:1.55}
.ct-row a{color:var(--red);font-weight:600}
@media(max-width:820px){.ct-row{grid-template-columns:1fr;gap:6px}.ct-head{display:none}
 .ct-row span:nth-child(2){color:var(--red);font-weight:600;font-size:.85rem}}

/* parametric sail diagrams (sail-dia.js emits <svg class="sd">) - mirror the .sail-dia
 sizing rules so generated diagrams sit in the same frames as the hand-drawn ones. */
.page-hero-art .sd{width:100%;max-width:330px;height:auto;filter:drop-shadow(0 26px 50px rgba(14,26,43,.16))}
.prod-media{display:grid;place-items:center}
.prod-media .sd{height:100%;max-height:172px;width:auto;filter:drop-shadow(0 6px 14px rgba(14,26,43,.08))}
.pm-frame{display:grid;place-items:center}
.pm-frame .sd{height:100%;max-height:360px;width:auto;filter:drop-shadow(0 12px 24px rgba(14,26,43,.1))}

/* carried-over context notice on the contact form (js/contact-prefill.js) */
.f-carry{background:rgba(225,5,27,.07);border:1px solid rgba(225,5,27,.22);border-radius:var(--radius-sm);
 padding:11px 14px;font-size:.86rem;font-weight:600;color:var(--red-deep);margin:0}

/* ---------- how-you-sail: the use-case IA layer ---------- */
.hys-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:30px}
.hys-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);
 border-radius:var(--radius-sm);padding:16px 18px;box-shadow:var(--shadow-sm);
 transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.hys-card:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:var(--shadow-md)}
.hys-card-tag{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.hys-card-h{font-size:.92rem;font-weight:600;color:var(--ink-2);line-height:1.4}
@media(max-width:1000px){.hys-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.hys-cards{grid-template-columns:1fr 1fr}}

.hys{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4.5vw,64px);align-items:start}
.hys-l h2{font-size:clamp(1.5rem,2.4vw,2.05rem);margin:6px 0 14px}
.hys-sailing{color:var(--muted);font-size:1.02rem;line-height:1.65}
.hys-r h3{font-size:1.12rem;margin-bottom:8px}
.hys-r p{color:var(--ink-2);font-size:1rem;line-height:1.62}
.hys-r h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.hys-want{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hys-want li{position:relative;padding-left:26px;color:var(--ink-2);font-size:.97rem;line-height:1.5}
.hys-want li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:2px;
 background:var(--red);transform:rotate(45deg)}
.hys-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.hys-links a{font-size:.9rem;font-weight:700;color:var(--red)}
@media(max-width:860px){.hys{grid-template-columns:1fr;gap:22px}}
.hys-strip{display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--bg-alt);
 border:1px solid var(--line);border-left:5px solid var(--red);border-radius:var(--radius);
 padding:clamp(22px,2.8vw,32px) clamp(24px,3.2vw,38px);transition:transform .25s var(--ease),box-shadow .25s}
.hys-strip:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.hys-strip h3{font-size:1.32rem;margin:6px 0 8px}
.hys-strip p{color:var(--muted);font-size:.98rem;line-height:1.55;max-width:70ch}
.hys-strip-go{flex:0 0 auto;font-weight:700;color:var(--red);white-space:nowrap}
@media(max-width:700px){.hys-strip{flex-direction:column;align-items:flex-start;gap:14px}}

/* local-language landing pages (NL/ES): the "this page is in X" escape hatch */
.lang-note{margin-top:20px;font-size:.85rem;color:var(--muted)}
.lang-note a{color:var(--red);font-weight:600}

/* ---------- editorial photo features (real water, real cloth) ----------
 Figures are illustrative of the trade - captions describe the sailing,
 never claim the build. Portrait shots get --portrait so they don't tower. */
.photo-feat{margin-top:34px;border-radius:var(--radius);overflow:hidden;
 border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--navy-2)}
.photo-feat img{width:100%;height:auto;display:block}
.photo-feat figcaption{background:#fff;border-top:1px solid var(--line);
 padding:12px 18px;font-size:.88rem;color:var(--muted);line-height:1.5}
.photo-feat--portrait{max-width:640px;margin-left:auto;margin-right:auto}
.photo-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.photo-duo .photo-feat{margin-top:0}
@media (max-width:760px){.photo-duo{grid-template-columns:1fr;gap:18px}}

/* ---------- zeilklassen.html - Dutch class-dimension reference ----------
 A reference table, not a shop surface: no prices, sources on every figure. */
/* minmax(0,…) not 1fr: a grid item defaults to min-width:auto, so the 640px-min table
 inside would blow the column out to its min-content and the page - not the .kv-scroll
 container - would take the horizontal scroll. */
.kv-note-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:start}
.kv-explain{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
 padding:28px 30px;box-shadow:var(--shadow-sm);min-width:0}
.kv-explain h2{font-size:1.5rem;margin-bottom:16px}
.kv-explain p{color:var(--ink-2);font-size:.96rem;line-height:1.62;margin-bottom:12px}
.kv-explain b{color:var(--ink)}
.kv-fine{font-size:.84rem !important;color:var(--muted) !important;border-top:1px solid var(--line);padding-top:12px}
.kv-fine a,.kv-ask a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.kv-warn{background:var(--navy);color:#fff;border-radius:var(--radius);padding:28px 30px;
 border-left:4px solid var(--red);box-shadow:var(--shadow-md);min-width:0}
.kv-warn h2{color:#fff;font-size:1.5rem;margin-bottom:14px}
.kv-warn p{color:rgba(255,255,255,.82);font-size:.94rem;line-height:1.6;margin-bottom:12px}
.kv-warn b{color:#fff}
.kv-warn-tag{font-size:.76rem !important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:var(--red) !important;margin-bottom:10px !important}
.kv-warn .kv-tbl{background:rgba(255,255,255,.04)}
.kv-warn .kv-tbl th,.kv-warn .kv-tbl td{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.kv-warn .kv-tbl thead th{color:#fff;background:rgba(255,255,255,.06)}
.kv-warn .kv-note{color:rgba(255,255,255,.6)}
.kv-warn .kv-src a{color:rgba(255,255,255,.75)}

.kv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.kv-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
 padding:24px 26px;box-shadow:var(--shadow-sm);min-width:0}
.kv-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.kv-head h3{font-size:1.32rem}
.kv-badge{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
 padding:5px 11px;border-radius:100px;white-space:nowrap}
.kv-badge--hi{background:#E8F3EC;color:#1D6B3E;border:1px solid #C9E3D3}
.kv-badge--med{background:#FDF3E3;color:#8A5A12;border:1px solid #F0DFC0}
.kv-blurb{color:var(--ink-2);font-size:.94rem;line-height:1.6;max-width:78ch}
.kv-tot{margin-top:10px;font-size:.92rem;color:var(--ink-2)}

.kv-scroll{overflow-x:auto;margin-top:16px;-webkit-overflow-scrolling:touch}
.kv-tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
/* area-only sources (encyclopedia figures, or rules that state m² directly) get 3 columns,
 so they fit a phone - and the narrow warning box - without scrolling at all */
.kv-tbl--areas{min-width:0}
.kv-tbl--areas .kv-note{min-width:0}
.kv-tbl th,.kv-tbl td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;
 vertical-align:top;color:var(--ink-2)}
.kv-tbl thead th{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 color:var(--muted);background:var(--bg-alt);white-space:nowrap}
.kv-tbl tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.kv-tbl td{font-variant-numeric:tabular-nums;white-space:nowrap}
.kv-tbl td.kv-note{white-space:normal;font-size:.82rem;color:var(--muted);min-width:200px}
.kv-na{color:var(--line-2);cursor:help}

.kv-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
 margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.kv-src{font-size:.82rem;color:var(--muted)}
.kv-src a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.kv-src a:hover{color:var(--red)}

.kv-gaps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.kv-gap{background:var(--bg-alt);border:1px dashed var(--line-2);border-radius:var(--radius);padding:24px 26px;min-width:0}
.kv-gap h3{font-size:1.2rem;margin-bottom:10px}
.kv-gap p{color:var(--ink-2);font-size:.92rem;line-height:1.6;margin-bottom:10px}
.kv-gap a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}

@media (max-width:900px){
 .kv-note-grid,.kv-gaps{grid-template-columns:minmax(0,1fr)}
 .kv-explain,.kv-warn,.kv-card,.kv-gap{padding:22px 20px}
 .kv-foot .btn{width:100%;text-align:center}
}

/* ---------- encyclopedia (encyclopedia.html + term-*.html) ---------- */
.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}

.gl-search{margin-top:26px;max-width:560px}
.gl-search input{width:100%;font:inherit;font-size:1.05rem;padding:15px 20px;border-radius:100px;
 border:1.5px solid var(--line-2);background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.gl-search input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(225,5,27,.1)}
.gl-count{margin-top:10px;font-size:.85rem;color:var(--muted);padding-left:4px}

.gl-index{display:grid;gap:44px}
.gl-group h2{font-size:1.5rem;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.gl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.gl-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
 padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.gl-card:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:var(--shadow-md)}
.gl-card h3{font-size:1.05rem;margin-bottom:7px}
.gl-card p{font-size:.86rem;color:var(--muted);line-height:1.5}
.gl-card-eq{display:block;margin-top:10px;font-size:.78rem;color:var(--ink-2);font-weight:600;
 border-top:1px solid var(--line);padding-top:9px}
.gl-empty{color:var(--muted);font-size:.95rem}
.gl-empty a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.gl-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start}
.gl-term h1{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:14px}
.gl-main .lead{max-width:52ch;margin-bottom:22px}
.gl-body{color:var(--ink-2);font-size:1.02rem;line-height:1.68;max-width:62ch}
.gl-body p{margin-top:15px}
.gl-body strong{color:var(--ink)}
.gl-body a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.gl-eqs{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);
 border-radius:var(--radius-sm);overflow:hidden;margin-bottom:24px;max-width:52ch}
.gl-eq{display:flex;align-items:baseline;gap:12px;background:var(--bg-alt);padding:11px 16px;font-size:.92rem}
.gl-eq-l{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
 min-width:62px}
.gl-eq b{color:var(--ink);font-size:1rem}
.gl-eq a{margin-left:auto;font-size:.78rem;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.gl-eq a:hover{color:var(--red)}

.gl-figs{position:sticky;top:96px;display:grid;gap:18px}
.gl-dia{margin:0;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
 padding:18px;text-align:center}
/* cap the height, not the width: these entries often carry TWO diagrams whose whole job is
 to be compared, and an uncapped sail eats the column and pushes its partner off-screen */
.gl-dia-art{display:flex;justify-content:center}
.gl-dia-art .sd{width:auto;height:auto;max-height:230px;max-width:100%;
 filter:drop-shadow(0 14px 30px rgba(14,26,43,.13))}
.gl-dia figcaption{margin-top:12px;font-size:.82rem;color:var(--muted);line-height:1.5;text-align:left}

.gl-rel{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.gl-rel h4{font-size:.76rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 color:var(--muted);margin-bottom:12px}
.gl-rel-row{display:flex;flex-wrap:wrap;gap:9px}
.gl-rel-row a{font-size:.86rem;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);
 border-radius:100px;padding:7px 14px;transition:border-color .2s,color .2s,transform .2s var(--ease)}
.gl-rel-row a:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.gl-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

@media (max-width:980px){
 .gl-wrap{grid-template-columns:minmax(0,1fr);gap:30px}
 .gl-figs{position:static;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
}

/* ---------- measurement guides (measure-*.html) ---------- */
.mg-wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;align-items:start}
.mg-intro{font-size:1.05rem;line-height:1.7;color:var(--ink-2);max-width:62ch}
.mg-intro b{color:var(--ink)}
.mg-h{font-size:1.4rem;margin:32px 0 4px}

.mg-method{background:var(--bg-alt);border:1px solid var(--line);border-left:4px solid var(--navy);
 border-radius:var(--radius-sm);padding:22px 24px;margin-top:26px}
.mg-method h2{font-size:1.18rem;margin-bottom:10px}
.mg-method p{color:var(--ink-2);font-size:.97rem;line-height:1.65}
.mg-method b{color:var(--ink)}

.mg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
.mg-tbl{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.mg-tbl thead th{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 color:var(--muted);background:var(--bg-alt);padding:9px 12px;text-align:left;white-space:nowrap}
.mg-tbl th,.mg-tbl td{border-bottom:1px solid var(--line);padding:14px 12px;text-align:left;vertical-align:top}
.mg-tbl tbody th{min-width:118px}
.mg-code{display:block;font-family:var(--display);font-size:1.06rem;color:var(--red);font-weight:700}
.mg-name{display:block;font-size:.8rem;color:var(--muted);font-weight:600;margin-top:2px}
.mg-tbl td{color:var(--ink-2);line-height:1.6}
.mg-tbl td b{color:var(--ink)}
.mg-tbl td a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.mg-diacell{width:132px}
.mg-mini{display:block}
.mg-mini .sd{width:auto;height:auto;max-height:96px;max-width:100%}

.mg-hard{background:var(--navy);color:#fff;border-radius:var(--radius);padding:26px 28px;margin-top:30px;
 border-left:4px solid var(--red)}
.mg-hard h2{color:#fff;font-size:1.3rem;margin-bottom:12px}
.mg-hard p{color:rgba(255,255,255,.84);font-size:.96rem;line-height:1.68;margin-bottom:11px}
.mg-hard b{color:#fff}
.mg-hard em{color:rgba(255,255,255,.95)}

.mg-honest{border:1px dashed var(--line-2);border-radius:var(--radius-sm);padding:20px 22px;margin-top:26px;
 background:var(--bg-alt)}
.mg-honest-tag{font-size:.72rem !important;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:var(--red) !important;margin-bottom:8px !important}
.mg-honest p{color:var(--ink-2);font-size:.95rem;line-height:1.65}
.mg-honest b{color:var(--ink)}

.mg-rel{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.mg-rel h4,.mg-sibs h4{font-size:.74rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 color:var(--muted);margin-bottom:11px}
.mg-rel-row,.mg-sibs-row{display:flex;flex-wrap:wrap;gap:8px}
.mg-rel-row a,.mg-sibs-row a{font-size:.85rem;font-weight:600;color:var(--ink-2);background:#fff;
 border:1px solid var(--line);border-radius:100px;padding:7px 14px;
 transition:border-color .2s,color .2s,transform .2s var(--ease)}
.mg-rel-row a:hover,.mg-sibs-row a:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}

.mg-cta{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;
 margin-top:34px;padding-top:26px;border-top:2px solid var(--line)}
.mg-cta h2{font-size:1.3rem;margin-bottom:8px}
.mg-cta p{color:var(--ink-2);font-size:.95rem;line-height:1.6}
.mg-cta-btns{display:flex;flex-direction:column;gap:10px}

.mg-aside{position:sticky;top:96px;display:grid;gap:18px}
.mg-dia{margin:0;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
 padding:20px;text-align:center}
.mg-dia-art{display:flex;justify-content:center}
.mg-dia-art .sd{width:auto;height:auto;max-height:240px;max-width:100%;
 filter:drop-shadow(0 14px 30px rgba(14,26,43,.13))}
.mg-dia figcaption{margin-top:12px;font-size:.8rem;color:var(--muted);line-height:1.5}

@media(max-width:980px){
 .mg-wrap{grid-template-columns:minmax(0,1fr);gap:28px}
 .mg-aside{position:static}
 .mg-cta{grid-template-columns:minmax(0,1fr)}
}

/* cover guides - 2-column code table (no sail-edge diagram) + form-download aside */
.mg-tbl--cover{min-width:0}
.mg-tbl--cover th[scope=row]{min-width:52px}
.mg-form .dl{margin:0}

/* build credit - deliberately quiet: it belongs in the legal row, not the brand */
.foot-credit{opacity:.62;font-size:.82rem}
.foot-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot-credit a:hover{color:#fff;opacity:1}

/* ---------- homepage hero: the 3D mark over sailing footage ----------
   Replaces the 3D boat scene. The mark is the headline here, so the plate
   stays bright and unscrimmed behind it (Job 11: no black patch behind the
   logo, ever) and the grade is a light wash rather than a darkener.
   Styles ported from logo3d/rebuild/realtime/studio/hero2.html; the only
   change is that #heroStage fills the hero box instead of the viewport. */
#heroStage{position:absolute;inset:0;overflow:hidden;background:
 linear-gradient(180deg,#e8eef2 0%,#f7f4e8 38%,#90bfd2 39%,#4b7484 70%,#253741 100%)}
/* The plate is INVISIBLE until it is genuinely playing.
   Hiding iOS's play button with ::-webkit-media-controls-* selectors does not
   work reliably - in Low Power Mode Safari refuses autoplay outright and draws
   its own overlay that CSS could not reach. So the element itself carries no
   pixels until the 'playing' event fires (hero-logo.js adds .plate-live), and
   until then the stage shows a real frame of the footage as its own background.
   A still frame of the sail is a hero; a grey play button is a bug report. */
#heroPlate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;
 filter:brightness(1.08) saturate(1.16) contrast(1.07);
 transform:scale(1.06);animation:heroDrift 24s ease-in-out infinite alternate;
 transition:opacity .5s ease;pointer-events:none}
#heroStage.plate-live #heroPlate{opacity:1}
#heroStage.video-fallback #heroPlate{opacity:0}

/* The stand-in: the poster, drawn by the stage rather than by the video, so no
   media element is on screen to be decorated. It drifts on the same curve as
   the plate, so an autoplay that never comes still reads as a live hero rather
   than a frozen screenshot. */
#heroPoster{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;
 filter:brightness(1.08) saturate(1.16) contrast(1.07);
 transform:scale(1.06);animation:heroDrift 24s ease-in-out infinite alternate;
 transition:opacity .5s ease;pointer-events:none}
#heroStage.plate-live #heroPoster{opacity:0}
@keyframes heroDrift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
#heroGrade{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(180deg,rgba(202,232,255,.34) 0%,rgba(210,238,255,.24) 48%,rgba(205,237,255,.33) 100%),
            linear-gradient(180deg,rgba(255,255,255,.060) 0%,rgba(255,255,255,.038) 54%,rgba(255,255,255,.030) 100%),
            radial-gradient(130% 100% at 54% 42%,rgba(255,255,255,.035) 0%,rgba(255,255,255,.014) 62%,rgba(255,255,255,0) 100%)}
#heroGl{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block;transform:translateZ(0)}
#heroFallbackLogo{position:absolute;left:65%;top:44%;z-index:4;display:none;align-items:center;gap:18px;
 transform:translate(-50%,-50%) scale(.56);
 filter:drop-shadow(18px 21px 18px rgba(2,7,14,.58)) drop-shadow(0 20px 30px rgba(2,7,14,.38))}
#heroStage.fallback #heroFallbackLogo{display:flex}
#heroFallbackLogo .fallback-sail{position:relative;width:180px;height:236px;flex:0 0 auto}
#heroFallbackLogo .fallback-sail:before,#heroFallbackLogo .fallback-sail:after{
 content:"";position:absolute;bottom:0;clip-path:polygon(78% 0,100% 100%,0 86%)}
#heroFallbackLogo .fallback-sail:before{left:0;width:112px;height:210px;
 background:linear-gradient(140deg,#fff,#dfe5ea 58%,#9fa9b1)}
#heroFallbackLogo .fallback-sail:after{right:0;width:104px;height:236px;
 background:linear-gradient(140deg,#f1323b,#cc121c 58%,#82070d)}
#heroFallbackLogo .fallback-type{font-family:Impact,Haettenschweiler,'Arial Black',sans-serif;
 font-style:italic;font-weight:900;line-height:.76;text-transform:uppercase;
 text-shadow:11px 13px 0 rgba(0,0,0,.42)}
#heroFallbackLogo .fallback-type span{display:block;font-size:102px;color:#f5f8fb}
#heroFallbackLogo .fallback-type span+span{color:#cc121c}
/* The plate is bright, so the old dark scrim would fight both it and the mark. */
.hero-sail .hero-scrim{background:linear-gradient(180deg,rgba(10,18,28,0) 46%,rgba(10,18,28,.44) 100%)}
@media(max-width:700px){
 #heroFallbackLogo{left:50%;top:63%;transform:translate(-50%,-50%) scale(.54)}
}
@media(prefers-reduced-motion:reduce){ #heroPlate{animation:none} }
/* The line that replaced the hero h1 in the visual flow - supporting copy under
   the mark, not a second headline competing with it. */
.hero-lede .hero-sub{color:#fff;font-size:clamp(1.05rem,1.7vw,1.42rem);font-weight:600;
 line-height:1.3;margin:10px 0 26px;max-width:24ch;text-shadow:0 2px 14px rgba(6,14,24,.55)}
@media(max-width:640px){ .hero-lede .hero-sub{font-size:1.05rem;margin:8px 0 18px;max-width:20ch} }

/* The mark answers horizontal drags on a phone; vertical ones still scroll the
   page under it, which the hero sits on top of. */
#heroGl{touch-action:pan-y}

/* The deck's instructions are device-specific: a phone has no scroll wheel and
   no Esc key, so two thirds of the desktop sentence was noise on the largest
   block of text above the object. Swap the clause rather than write two
   paragraphs, so the sentence stays one sentence in the markup. */
.note-pointer{display:inline}
.note-touch{display:none}
@media(hover:none) and (pointer:coarse){
 .note-pointer{display:none}
 .note-touch{display:inline}
}

/* iOS draws a native play triangle over any <video> it has not started, and
   nothing in JS can remove it - only this pseudo-element can. Without it a
   blocked or still-buffering autoplay puts a grey play button in the middle of
   the hero. The first-touch unlock in hero-logo.js is the affordance instead. */
#heroPlate::-webkit-media-controls,
#heroPlate::-webkit-media-controls-panel,
#heroPlate::-webkit-media-controls-play-button,
#heroPlate::-webkit-media-controls-start-playback-button{
 display:none !important;-webkit-appearance:none;appearance:none;opacity:0;pointer-events:none}