/* =========================================================
   AYN YACHT MANAGEMENT — "Deep Sea" theme layer
   Loaded AFTER style.css.
   1. Palette tokens
   2. Living-water backgrounds
   3. Section + component restyling
   4. Site-wide hover motion
   ========================================================= */

:root{
  /* --- water --- */
  --abyss:#02101a;
  --deep:#052232;
  --sea:#0a3d55;
  --shallow:#11637f;
  --tide:#1b8ba3;
  --aqua:#5fd4e0;
  --aqua-soft:#9ae8ee;
  --foam:#dcf7f8;

  /* --- warm accent --- */
  --champagne:#e6cf9d;
  --champagne-deep:#a9833f;

  /* --- light surfaces --- */
  --paper:#f7fdfd;
  --paper-2:#eaf5f8;
  --paper-3:#f4fbfc;

  /* --- ink --- */
  --ink:#07202f;
  --ink-soft:#546f7c;
  --line:rgba(11,74,95,.14);

  --ease:cubic-bezier(.22,.8,.28,1);
  --sheen:rgba(255,255,255,.42);

  --wave-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,58 C150,10 350,10 600,58 C850,106 1050,106 1200,58 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
  --wave-svg-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C200,22 320,110 600,70 C880,30 1000,110 1200,70 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
}

html{background:var(--abyss)}
body{color:var(--ink);background:transparent}
.container{position:relative;z-index:2}

/* =========================================================
   1. FIXED OCEAN BACKDROP
   ========================================================= */
.ayn-ocean{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#02101a 0%,#062736 34%,#0a4258 68%,#0d5a74 100%)}
.ayn-ocean i{position:absolute;inset:-25%;display:block}

/* reusable water layers (also injected into dark sections) */
.ayn-caustics{
  background:
    radial-gradient(42% 32% at 18% 22%,rgba(95,212,224,.20),transparent 62%),
    radial-gradient(38% 28% at 76% 58%,rgba(27,139,163,.26),transparent 64%),
    radial-gradient(46% 34% at 48% 88%,rgba(154,232,238,.13),transparent 66%);
  filter:blur(8px);
  animation:ayn-drift 28s ease-in-out infinite alternate;
  pointer-events:none;
}
.ayn-rays{
  background:repeating-linear-gradient(101deg,rgba(255,255,255,.055) 0 2px,transparent 2px 64px);
  mix-blend-mode:screen;opacity:.6;
  animation:ayn-rays 22s ease-in-out infinite alternate;
  pointer-events:none;
}
.ayn-bubbles{
  background-image:
    radial-gradient(circle at 22% 80%,rgba(255,255,255,.30) 1.6px,transparent 2.2px),
    radial-gradient(circle at 68% 30%,rgba(255,255,255,.20) 2.2px,transparent 2.8px),
    radial-gradient(circle at 88% 62%,rgba(154,232,238,.24) 1.2px,transparent 1.8px);
  background-size:190px 280px,260px 360px,150px 210px;
  animation:ayn-bubble 30s linear infinite;
  opacity:.55;pointer-events:none;
}

/* dark sections host the layers */
.hero,.section-navy,.contact-section,footer{position:relative;overflow:hidden}
.hero .ayn-caustics,.hero .ayn-rays,.hero .ayn-bubbles,
.section-navy .ayn-caustics,.section-navy .ayn-rays,.section-navy .ayn-bubbles,
.contact-section .ayn-caustics,.contact-section .ayn-rays,.contact-section .ayn-bubbles,
footer .ayn-caustics,footer .ayn-rays{position:absolute;inset:-15%;z-index:0}

@keyframes ayn-drift{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d(2%,2%,0) scale(1.06)}
  100%{transform:translate3d(-1%,3%,0) scale(1.02)}
}
@keyframes ayn-rays{
  from{transform:translateX(-4%) skewX(0deg);opacity:.4}
  to{transform:translateX(4%) skewX(3deg);opacity:.75}
}
@keyframes ayn-bubble{
  from{background-position:0 0,0 0,0 0}
  to{background-position:0 -280px,0 -720px,0 -420px}
}

/* =========================================================
   2. ANIMATED WAVE SEPARATORS
   ========================================================= */
.ayn-waves{position:absolute;left:0;width:100%;height:120px;pointer-events:none;z-index:3;overflow:hidden}
.ayn-waves.is-bottom{bottom:-1px;top:auto}
.ayn-waves.is-top{top:-1px;bottom:auto;transform:rotate(180deg)}
.ayn-waves span{
  position:absolute;left:0;bottom:0;width:200%;height:100%;
  background-color:var(--wave-color,#f7fdfd);
  -webkit-mask-image:var(--wave-svg);mask-image:var(--wave-svg);
  -webkit-mask-size:50% 100%;mask-size:50% 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  will-change:transform;
}
.ayn-waves span:nth-child(1){opacity:.30;height:96%;
  -webkit-mask-image:var(--wave-svg-2);mask-image:var(--wave-svg-2);
  animation:ayn-swell 21s linear infinite}
.ayn-waves span:nth-child(2){opacity:.55;height:80%;animation:ayn-swell 15s linear infinite reverse}
.ayn-waves span:nth-child(3){opacity:1;height:62%;animation:ayn-swell 10s linear infinite}
@keyframes ayn-swell{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header{background:rgba(2,18,28,.62);border-bottom:1px solid rgba(95,212,224,.14);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.site-header.scrolled{background:rgba(2,18,28,.93);box-shadow:0 14px 44px rgba(0,0,0,.34);border-bottom-color:rgba(95,212,224,.22)}

.brand-badge{border-color:rgba(95,212,224,.6);background:rgba(95,212,224,.09);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.brand:hover .brand-badge{transform:translateY(-2px) scale(1.05);background:rgba(95,212,224,.2);box-shadow:0 10px 26px rgba(95,212,224,.3)}
.brand-copy small{color:rgba(154,232,238,.7)}

.nav a{position:relative;padding:6px 2px;letter-spacing:.04em;transition:color .35s var(--ease),transform .35s var(--ease)}
.nav a:not(.nav-cta):after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:linear-gradient(90deg,var(--aqua),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:not(.nav-cta):hover{color:var(--aqua-soft);transform:translateY(-1px)}
.nav a:not(.nav-cta):hover:after{transform:scaleX(1)}
.nav-cta{border-color:rgba(95,212,224,.5);background:linear-gradient(135deg,rgba(95,212,224,.16),rgba(95,212,224,.04));
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease)}
.nav-cta:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(95,212,224,.34),rgba(95,212,224,.12));box-shadow:0 12px 30px rgba(95,212,224,.28)}
.menu-toggle{transition:transform .4s var(--ease),color .3s}
.menu-toggle:hover{transform:rotate(90deg) scale(1.1);color:var(--aqua)}

/* =========================================================
   4. HERO
   ========================================================= */
.hero{min-height:900px;
  background:
    radial-gradient(circle at 78% 18%,rgba(27,139,163,.45),transparent 44%),
    radial-gradient(circle at 10% 92%,rgba(95,212,224,.16),transparent 40%),
    linear-gradient(158deg,#02101a 0%,#062a3d 46%,#0d5670 100%)}
.hero:before{background:
  linear-gradient(90deg,rgba(2,16,26,.35),transparent 58%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 24px);z-index:1}
.hero-watermark{color:rgba(154,232,238,.045);z-index:1}
.glow-one{background:radial-gradient(circle,rgba(95,212,224,.26),rgba(95,212,224,0) 68%);animation:ayn-float 16s ease-in-out infinite alternate}
.glow-two{background:radial-gradient(circle,rgba(27,139,163,.22),transparent 70%);animation:ayn-float 21s ease-in-out infinite alternate-reverse}
.hero-line{border-color:rgba(154,232,238,.09);z-index:1}
@keyframes ayn-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(-30px,26px,0)}}

.hero-grid{z-index:4}
.hero h1{text-shadow:0 18px 50px rgba(0,0,0,.4)}
.eyebrow{color:var(--aqua-soft)}
.eyebrow.dark{color:var(--tide)}
.hero-lead{color:rgba(226,246,249,.78)}
.hero-proof span:before{color:var(--aqua)}
.hero-proof span{transition:color .35s var(--ease),transform .35s var(--ease);display:inline-flex;align-items:center}
.hero-proof span:hover{color:var(--aqua-soft);transform:translateY(-2px)}

.hero-card{border-color:rgba(154,232,238,.2);
  background:linear-gradient(150deg,rgba(95,212,224,.14),rgba(255,255,255,.03));
  box-shadow:0 34px 96px rgba(0,0,0,.4)}
.hero-card:before{background:linear-gradient(135deg,rgba(95,212,224,.6),transparent 38%,rgba(255,255,255,.1))}
.mini-label{color:var(--aqua-soft)}
.quick-list span:before{color:var(--aqua)}
.quick-list span{transition:transform .35s var(--ease),color .35s var(--ease)}
.quick-list span:hover{transform:translateX(5px);color:var(--foam)}

.hero-cut{height:150px;background:none;clip-path:none;overflow:hidden;z-index:5;--wave-color:#f7fdfd}

/* =========================================================
   5. LIGHT SECTIONS — shallow water
   ========================================================= */
.capability-strip,
.section-white,
.section-soft,
.standard-section,
.process-section,
.faq-section,
.report-section{
  position:relative;overflow:hidden;
  background-color:var(--paper);
  background-image:
    linear-gradient(180deg,#f7fdfd 0%,#eaf5f8 52%,#f4fbfc 100%),
    repeating-linear-gradient(114deg,rgba(11,74,95,.022) 0 1px,transparent 1px 28px);
  background-blend-mode:normal;
}
.section-white::after,
.section-soft::after,
.process-section::after,
.faq-section::after,
.report-section::after,
.standard-section::after{
  content:"";position:absolute;inset:-14%;pointer-events:none;z-index:0;opacity:.6;
  background:
    radial-gradient(36% 26% at 16% 20%,rgba(95,212,224,.30),transparent 62%),
    radial-gradient(30% 22% at 74% 48%,rgba(27,139,163,.18),transparent 64%),
    radial-gradient(42% 30% at 46% 90%,rgba(154,232,238,.26),transparent 66%);
  filter:blur(14px);
  animation:ayn-drift 34s ease-in-out infinite alternate;
}
.section-soft::after,.faq-section::after{animation-duration:42s;animation-direction:alternate-reverse}

.capability-strip{border-bottom:1px solid var(--line)}
.capability-inner>div{border-right:1px solid var(--line);border-radius:14px}
.capability-inner span{color:var(--tide)}
.capability-inner strong{color:var(--ink)}
.capability-inner small{color:var(--ink-soft)}

.section-head h2{color:var(--ink)}
.section-head p{color:var(--ink-soft)}

/* --- service cards --- */
.service-card{border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(240,250,252,.88));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 14px 40px rgba(8,60,80,.06)}
.service-card:after{background:linear-gradient(90deg,var(--tide),var(--aqua),var(--aqua-soft));height:3px;transition:transform .55s var(--ease)}
.service-card:hover{border-color:rgba(95,212,224,.6);box-shadow:0 28px 64px rgba(8,60,80,.16)}
.service-card>span{background:linear-gradient(140deg,#e2f6f9,#c9edf3);color:var(--shallow);
  box-shadow:inset 0 0 0 1px rgba(95,212,224,.45);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.service-card:hover>span{transform:translateY(-3px) rotate(-6deg) scale(1.08);box-shadow:0 10px 24px rgba(27,139,163,.28)}
.service-card h3{color:var(--ink)}
.service-card p{color:var(--ink-soft)}

/* --- packages --- */
.package-card{border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(243,251,252,.92));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 22px 60px rgba(8,60,80,.08)}
.package-card:before{background:linear-gradient(90deg,var(--aqua-soft),rgba(95,212,224,.25));height:5px}
.package-card.featured{border-color:rgba(95,212,224,.65);box-shadow:0 34px 88px rgba(8,60,80,.2)}
.package-card.featured:before{background:linear-gradient(90deg,var(--tide),var(--aqua),var(--champagne))}
.package-card:hover{box-shadow:0 40px 96px rgba(8,60,80,.22);border-color:rgba(95,212,224,.7)}
.featured-pill{background:linear-gradient(135deg,var(--champagne),#c9a869);color:#2a1e07;
  box-shadow:0 8px 22px rgba(201,168,105,.4);transition:transform .5s var(--ease)}
.package-card.featured:hover .featured-pill{transform:translateY(-2px) scale(1.05)}
.package-label{color:var(--tide)}
.package-head h3{color:var(--ink)}
.package-tagline{color:var(--ink-soft)}
.price small{color:var(--champagne-deep)}
.price strong{color:var(--shallow);transition:color .45s var(--ease),transform .45s var(--ease)}
.package-card:hover .price strong{color:var(--tide);transform:translateY(-2px)}
.price span{color:var(--ink-soft)}
.checklist li{border-bottom:1px solid rgba(11,74,95,.09);color:var(--ink-soft)}
.checklist li:before{color:var(--tide)}
.package-rule{background:linear-gradient(135deg,rgba(95,212,224,.14),rgba(240,250,252,.6));border:1px solid rgba(95,212,224,.28)}
.package-rule strong{color:var(--shallow)}
.package-rule p{color:var(--ink-soft)}
.pricing-note{background:linear-gradient(100deg,rgba(95,212,224,.16),rgba(244,251,252,.7));
  border:1px solid rgba(95,212,224,.3);color:var(--sea)}

/* --- AYN standard --- */
.standard-section:before{color:rgba(27,139,163,.05)}
.standard-copy h2{color:var(--ink)}
.standard-copy p{color:var(--ink-soft)}
.standard-stack article{border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,250,252,.86));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 12px 34px rgba(8,60,80,.06)}
.standard-stack article:hover{border-color:rgba(95,212,224,.6);box-shadow:0 26px 58px rgba(8,60,80,.14)}
.standard-num{background:linear-gradient(140deg,var(--sea),var(--tide));
  box-shadow:0 8px 20px rgba(27,139,163,.32);transition:transform .55s var(--ease)}
.standard-stack article:hover .standard-num{transform:rotate(-10deg) scale(1.1)}
.standard-stack h3{color:var(--ink)}
.standard-stack p{color:var(--ink-soft)}
.text-link{color:var(--tide);position:relative}
.text-link:after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;
  background:linear-gradient(90deg,var(--aqua),transparent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.text-link:hover:after{transform:scaleX(1)}

/* --- about (deep water) --- */
.section-navy{
  background:
    radial-gradient(circle at 84% 18%,rgba(27,139,163,.34),transparent 40%),
    linear-gradient(150deg,#03192a 0%,#07364c 55%,#0a4e66 100%);
  padding-top:170px;padding-bottom:170px}
.about-grid{position:relative;z-index:4}
.about-copy>p{color:rgba(226,246,249,.74)}
.founder-card{border-top-color:rgba(95,212,224,.22);border-radius:16px;padding:26px 4px 4px;
  transition:transform .55s var(--ease)}
.founder-card:hover{transform:translateX(6px)}
.founder-avatar{background:linear-gradient(145deg,rgba(95,212,224,.24),rgba(255,255,255,.05));
  border-color:rgba(154,232,238,.35);color:#fff;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.founder-card:hover .founder-avatar{transform:scale(1.08) rotate(-5deg);box-shadow:0 14px 34px rgba(95,212,224,.35)}
.founder-card p{color:rgba(226,246,249,.62)}
.founder-card strong{color:var(--champagne)}
.about-panel{border-color:rgba(154,232,238,.2);
  background:linear-gradient(150deg,rgba(95,212,224,.13),rgba(255,255,255,.02));
  box-shadow:0 30px 78px rgba(0,0,0,.28)}
.about-panel li{border-bottom-color:rgba(154,232,238,.13);color:rgba(226,246,249,.8);
  transition:transform .4s var(--ease),color .4s var(--ease),padding .4s var(--ease)}
.about-panel li:before{color:var(--aqua)}
.about-panel li:hover{transform:translateX(8px);color:#fff}

/* --- add-ons --- */
.addon-grid article{border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(238,248,251,.82));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.addon-grid article:before{background:linear-gradient(90deg,var(--tide),var(--aqua));
  transition:width .55s var(--ease)}
.addon-grid article:hover{background:linear-gradient(180deg,#fff,rgba(233,246,250,.95));
  border-color:rgba(95,212,224,.65);box-shadow:0 24px 52px rgba(8,60,80,.14)}
.addon-grid article:hover:before{width:64px}
.addon-grid h3{color:var(--ink)}
.addon-grid p{color:var(--ink-soft)}

/* --- process --- */
.process-grid article{border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(240,250,252,.86));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.process-grid article:after{background:radial-gradient(circle,rgba(95,212,224,.30),rgba(95,212,224,.06));
  transition:transform .6s var(--ease)}
.process-grid article:hover:after{transform:scale(1.5)}
.process-grid article:hover{border-color:rgba(95,212,224,.6);box-shadow:0 26px 58px rgba(8,60,80,.14)}
.process-grid article>span{background:linear-gradient(140deg,var(--sea),var(--tide));
  box-shadow:0 8px 20px rgba(27,139,163,.3);transition:transform .55s var(--ease)}
.process-grid article:hover>span{transform:translateY(-3px) scale(1.1)}
.process-grid h3{color:var(--ink)}
.process-grid p{color:var(--ink-soft)}

/* --- report --- */
.report-grid h2{color:var(--ink)}
.report-grid>div:first-child p{color:var(--ink-soft)}
.report-card{border:1px solid rgba(95,212,224,.3);
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(243,251,253,.93));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 30px 80px rgba(8,60,80,.16)}
.report-card:hover{box-shadow:0 42px 100px rgba(8,60,80,.22);border-color:rgba(95,212,224,.6)}
.report-header{border-bottom-color:rgba(11,74,95,.1)}
.report-header small{color:var(--ink-soft)}
.status-good{color:#0d5f52;background:linear-gradient(135deg,rgba(120,226,201,.32),rgba(95,212,224,.18));
  box-shadow:inset 0 0 0 1px rgba(45,168,143,.28)}
.report-row{border-bottom-color:rgba(11,74,95,.08);border-radius:8px;
  transition:transform .35s var(--ease),background .35s var(--ease),padding .35s var(--ease)}
.report-row strong{color:var(--tide)}
.report-row:hover{background:linear-gradient(90deg,rgba(95,212,224,.16),transparent);transform:translateX(6px)}
.report-note{background:linear-gradient(120deg,rgba(95,212,224,.16),rgba(244,251,252,.7));
  border-left:3px solid var(--aqua);border-radius:12px}
.report-note p{color:var(--ink-soft)}

/* --- FAQ --- */
.faq-grid details{border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,250,252,.88));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease)}
.faq-grid details:hover{transform:translateY(-4px);border-color:rgba(95,212,224,.65);
  box-shadow:0 22px 48px rgba(8,60,80,.13)}
.faq-grid details[open]{border-color:rgba(95,212,224,.5);box-shadow:0 20px 44px rgba(8,60,80,.11)}
.faq-grid summary{color:var(--ink);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:color .35s var(--ease)}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary:after{content:"";flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(140deg,rgba(95,212,224,.28),rgba(95,212,224,.1));
  box-shadow:inset 0 0 0 1px rgba(95,212,224,.45);
  background-image:linear-gradient(140deg,rgba(95,212,224,.28),rgba(95,212,224,.1));
  position:relative;transition:transform .45s var(--ease)}
.faq-grid summary:hover{color:var(--tide)}
.faq-grid summary:hover:after{transform:scale(1.15)}
.faq-grid details[open] summary:after{transform:rotate(180deg)}
.faq-grid p{color:var(--ink-soft)}

/* --- contact --- */
.contact-section{
  background:
    radial-gradient(circle at 14% 16%,rgba(95,212,224,.22),transparent 34%),
    linear-gradient(150deg,#03192a 0%,#083b52 52%,#0d5a74 100%);
  padding-top:170px}
.contact-section:after{color:rgba(154,232,238,.045)}
.contact-grid{z-index:4}
.contact-copy>p{color:rgba(226,246,249,.76)}
.contact-details strong{color:var(--aqua-soft)}
.contact-details span{color:rgba(226,246,249,.82)}
.contact-details p{padding:10px 14px;border-radius:12px;border:1px solid transparent;
  transition:transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease)}
.contact-details p:hover{transform:translateX(8px);background:rgba(95,212,224,.1);border-color:rgba(95,212,224,.28)}

/* --- footer --- */
footer{background:linear-gradient(180deg,#04141f,#010a11);padding-top:78px}
footer .footer-grid{position:relative;z-index:4}
.footer-links a{position:relative;transition:color .35s var(--ease),transform .35s var(--ease)}
.footer-links a:after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;
  background:linear-gradient(90deg,var(--aqua),transparent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.footer-links a:hover{color:var(--aqua-soft);transform:translateY(-2px)}
.footer-links a:hover:after{transform:scaleX(1)}
.copyright{border-top-color:rgba(154,232,238,.12)}

/* clean chevron for FAQ (overrides earlier block) */
.faq-grid summary:after{
  content:"\2304";display:grid;place-items:center;font-size:17px;line-height:0;
  color:var(--tide);border-radius:50%;
  background:linear-gradient(140deg,rgba(95,212,224,.26),rgba(95,212,224,.08));
  box-shadow:inset 0 0 0 1px rgba(95,212,224,.42);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.faq-grid details[open] summary:after{transform:rotate(180deg)}
.faq-grid summary:hover:after{box-shadow:inset 0 0 0 1px rgba(95,212,224,.9),0 6px 16px rgba(27,139,163,.25)}

/* =========================================================
   6. UNIVERSAL HOVER MOTION
   (.ayn-hover is applied by script.js to every box)
   ========================================================= */
.ayn-hover{position:relative;overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             border-color .55s var(--ease),background-color .55s var(--ease)}
.ayn-hover:hover{transform:translateY(-7px)}

.ayn-glow,.ayn-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;display:block}
.ayn-glow{opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
             rgba(95,212,224,.26),rgba(95,212,224,0) 70%)}
.ayn-hover:hover .ayn-glow{opacity:1}
.ayn-sheen{transform:translateX(-130%) skewX(-14deg);opacity:0;
  background:linear-gradient(90deg,transparent,var(--sheen),transparent);
  transition:transform 0s,opacity .2s}
.ayn-hover:hover .ayn-sheen{opacity:.65;transform:translateX(130%) skewX(-14deg);
  transition:transform 1.05s var(--ease),opacity .3s}

/* dark-surface variants */
.hero-card,.about-panel{--sheen:rgba(154,232,238,.34)}
.hero-card .ayn-glow,.about-panel .ayn-glow{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(154,232,238,.22),transparent 70%)}
.hero-card:hover,.about-panel:hover{border-color:rgba(154,232,238,.45);box-shadow:0 44px 110px rgba(0,0,0,.42)}

/* light-surface sheen is aqua rather than white */
.service-card,.package-card,.addon-grid article,.process-grid article,
.standard-stack article,.report-card,.capability-inner>div,
.pricing-note,.package-rule,.report-note{--sheen:rgba(95,212,224,.38)}

.capability-inner>div:hover{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(233,246,250,.7));
  box-shadow:0 18px 42px rgba(8,60,80,.1)}
.capability-inner>div:hover strong{color:var(--tide)}
.capability-inner strong{transition:color .4s var(--ease)}
.pricing-note:hover,.package-rule:hover,.report-note:hover{
  border-color:rgba(95,212,224,.6);box-shadow:0 20px 44px rgba(8,60,80,.12);transform:translateY(-4px)}

/* =========================================================
   7. BUTTONS
   ========================================================= */
.btn{position:relative;overflow:hidden;border-radius:11px;letter-spacing:.03em;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease),color .45s var(--ease)}
.btn:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-130%) skewX(-16deg);opacity:0;transition:transform 0s,opacity .2s}
.btn:hover:after{opacity:.9;transform:translateX(130%) skewX(-16deg);transition:transform .95s var(--ease),opacity .3s}
.btn:hover{transform:translateY(-3px) scale(1.015)}
.btn:active{transform:translateY(-1px) scale(.99)}

.btn-primary{background:linear-gradient(135deg,var(--aqua-soft),var(--aqua) 45%,#2fa8bd);color:#03202c;
  box-shadow:0 14px 38px rgba(95,212,224,.3)}
.btn-primary:hover{box-shadow:0 22px 52px rgba(95,212,224,.45)}
.btn-secondary{background:rgba(154,232,238,.07);border:1px solid rgba(154,232,238,.32);color:#fff}
.btn-secondary:hover{background:rgba(154,232,238,.16);border-color:rgba(154,232,238,.6);box-shadow:0 18px 40px rgba(95,212,224,.22)}
.btn-dark{background:linear-gradient(135deg,#0a3d55,#062232);color:#fff;box-shadow:0 14px 34px rgba(6,34,50,.24)}
.btn-dark:hover{background:linear-gradient(135deg,#11637f,#0a3d55);box-shadow:0 22px 48px rgba(11,99,127,.35)}

/* =========================================================
   8. FORM — text areas & inputs
   ========================================================= */
.contact-form{background:rgba(255,255,255,.97);border:1px solid rgba(154,232,238,.35);
  box-shadow:0 34px 92px rgba(0,0,0,.28);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.contact-form:hover{transform:translateY(-5px);box-shadow:0 44px 110px rgba(0,0,0,.34)}
.contact-form label{color:var(--shallow);letter-spacing:.06em;text-transform:uppercase;
  transition:color .35s var(--ease)}
.contact-form label:hover{color:var(--tide)}
.contact-form input,.contact-form select,.contact-form textarea{
  border:1px solid rgba(11,74,95,.16);background:#f6fcfd;color:var(--ink);border-radius:11px;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{
  border-color:var(--aqua);background:#fff;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(27,139,163,.14)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  border-color:var(--tide);background:#fff;transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(95,212,224,.24),0 12px 30px rgba(27,139,163,.16)}
.contact-form textarea{resize:vertical}
.form-note{color:#8aa0aa!important}

/* =========================================================
   9. LIST ROWS
   ========================================================= */
.checklist li{border-radius:9px;
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.checklist li:before{transition:transform .4s var(--ease),color .4s var(--ease)}
.checklist li:hover{transform:translateX(8px);color:var(--ink);
  background:linear-gradient(90deg,rgba(95,212,224,.16),transparent 70%)}
.checklist li:hover:before{transform:scale(1.25);color:var(--shallow)}

/* =========================================================
   10. LOADER — recoloured
   ========================================================= */
.ayn-loader{background:
  radial-gradient(circle at 76% 24%,rgba(27,139,163,.42),transparent 40%),
  linear-gradient(158deg,#02101a 0%,#062a3d 46%,#0d5670 100%)}
.ayn-loader:after{color:rgba(154,232,238,.035)}
.loader-yacht{color:#eafafc;filter:drop-shadow(0 16px 30px rgba(0,0,0,.5))}
.yacht-glass{fill:#062a3d}
.wave-back{color:rgba(95,212,224,.2)}
.wave-front{color:rgba(154,232,238,.34)}
.loader-badge{border-color:rgba(95,212,224,.55);background:rgba(95,212,224,.09)}
.loader-tag{color:rgba(154,232,238,.78)}

/* =========================================================
   11. REVEAL + RESPONSIVE
   ========================================================= */
.reveal{transform:translateY(22px) scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{transform:none}

@media(max-width:950px){
  .hero{min-height:auto}
  .ayn-waves{height:80px}
  .hero-cut{height:100px}
  .section-navy,.contact-section{padding-top:130px;padding-bottom:130px}
}
@media(max-width:620px){
  .ayn-waves{height:58px}
  .hero-cut{height:74px}
  .ayn-hover:hover{transform:translateY(-4px)}
  .section-navy,.contact-section{padding-top:110px;padding-bottom:110px}
}

@media(prefers-reduced-motion:reduce){
  .ayn-caustics,.ayn-rays,.ayn-bubbles,.ayn-waves span,
  .section-white::after,.section-soft::after,.process-section::after,
  .faq-section::after,.report-section::after,.standard-section::after,
  .glow-one,.glow-two{animation:none!important}
  .ayn-hover:hover{transform:none}
  .ayn-sheen,.btn:after{display:none}
  html{scroll-behavior:auto}
}

/* --- layered wave depth (back = deep teal, mid = shallow teal, front = next section) --- */
.ayn-waves span:nth-child(1){background-color:var(--wave-back,#0f5570);opacity:1}
.ayn-waves span:nth-child(2){background-color:var(--wave-mid,#63b3c8);opacity:.92}
.ayn-waves span:nth-child(3){background-color:var(--wave-color);opacity:1}

/* softer, more layered surf */
.ayn-ocean{inset:-14% 0}
.ayn-waves span:nth-child(1){background-color:var(--wave-back,#1c7291);opacity:.5}
.ayn-waves span:nth-child(2){background-color:var(--wave-mid,#59aac0);opacity:.45}
.ayn-waves span:nth-child(3){background-color:var(--wave-color);opacity:1}
.ayn-waves span:nth-child(2){height:84%}
.ayn-waves span:nth-child(3){height:66%}
.ayn-loader:after{color:rgba(154,232,238,.022)}

/* =========================================================
   12. LOADER v2 — yacht cruising on open water
   cruise in (0-1.0s) -> hold & cruise (1.0-2.4s) -> run off (2.4-3.2s)
   ========================================================= */

/* returning visitors in the same session never see it */
html.ayn-loader-skip .ayn-loader{display:none!important}

/* retire the v1 scene rules */
.loader-scene,.loader-yacht,.loader-sea,.loader-wave{display:none!important}

.ayn-loader{gap:0;justify-content:flex-end;padding-bottom:0;
  animation:ayn-failsafe .5s ease 7s forwards}

.ldr-sky{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 78% 6%,rgba(27,139,163,.5),transparent 58%),
    radial-gradient(90% 60% at 12% 96%,rgba(95,212,224,.16),transparent 60%)}
.ldr-sun{position:absolute;right:16%;top:12%;width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(214,244,248,.30),rgba(154,232,238,.10) 42%,transparent 70%);
  animation:ldr-sun 4.4s ease-in-out infinite alternate}
@keyframes ldr-sun{from{transform:scale(1);opacity:.85}to{transform:scale(1.09);opacity:1}}
.ldr-horizon{position:absolute;left:0;right:0;bottom:36%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(174,236,242,.34),transparent)}

.ldr-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* ---- the vessel: travel + swell ---- */
.ldr-vessel{position:absolute;left:50%;bottom:31%;width:300px;margin-left:-150px;
  animation:ldr-cruise 3.2s both}
.ldr-bob{position:relative;display:block;width:300px;height:152px;
  transform-origin:50% 88%;animation:ldr-swell 1.75s ease-in-out infinite alternate}
.ldr-yacht{display:block;filter:drop-shadow(0 18px 26px rgba(1,14,22,.5))}

@keyframes ldr-cruise{
  0%   {transform:translateX(-78vw);animation-timing-function:cubic-bezier(.16,.72,.28,1)}
  31%  {transform:translateX(0);animation-timing-function:linear}
  62%  {transform:translateX(0);animation-timing-function:cubic-bezier(.55,0,.85,.36)}
  100% {transform:translateX(92vw)}
}
@keyframes ldr-swell{
  from{transform:translateY(3px) rotate(-1.6deg)}
  to  {transform:translateY(-10px) rotate(1.6deg)}
}

/* ---- wake trailing off the stern ---- */
.ldr-wake{position:absolute;right:262px;bottom:26px;width:300px;height:16px;border-radius:50%;
  background:linear-gradient(90deg,rgba(214,244,248,0),rgba(214,244,248,.5));
  filter:blur(5px);transform-origin:100% 50%;
  animation:ldr-wake 1.75s ease-in-out infinite alternate}
@keyframes ldr-wake{
  from{transform:scaleX(.82) translateY(2px);opacity:.55}
  to  {transform:scaleX(1) translateY(-2px);opacity:.9}
}

/* ---- bow spray ---- */
.ldr-spray{position:absolute;bottom:24px;width:30px;height:14px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 68%);
  opacity:0;animation:ldr-spray 1.5s ease-out infinite}
.sp1{right:16px;animation-delay:0s}
.sp2{right:34px;width:22px;height:11px;animation-delay:.38s}
.sp3{right:4px;width:18px;height:9px;animation-delay:.76s}
@keyframes ldr-spray{
  0%  {opacity:0;transform:translate(0,4px) scale(.5)}
  22% {opacity:.85}
  100%{opacity:0;transform:translate(26px,-24px) scale(1.25)}
}

/* ---- water streaming past (parallax) ---- */
.ldr-water{position:absolute;left:0;right:0;bottom:0;height:34%;overflow:hidden}
.ldr-wave{position:absolute;left:0;bottom:0;width:200%;height:100%;
  -webkit-mask-image:var(--wave-svg);mask-image:var(--wave-svg);
  -webkit-mask-size:50% 100%;mask-size:50% 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  will-change:transform}
.wv-back{height:100%;opacity:.55;background-color:#0d5570;
  -webkit-mask-image:var(--wave-svg-2);mask-image:var(--wave-svg-2);
  animation:ayn-swell 7.5s linear infinite}
.wv-mid{height:78%;opacity:.6;background-color:#2b90ab;animation:ayn-swell 4.2s linear infinite}
.wv-front{height:56%;opacity:.95;
  background:linear-gradient(180deg,#5fb8cc,#186a86);
  animation:ayn-swell 2.4s linear infinite}

/* ---- brand block + progress ---- */
.ayn-loader .loader-brand{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:4;animation:ayn-brand-in .9s ease .1s both}
.ldr-progress{display:block;width:180px;height:2px;border-radius:2px;margin-top:6px;
  background:rgba(154,232,238,.18);overflow:hidden}
.ldr-progress i{display:block;width:100%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--aqua-soft),var(--aqua));
  transform-origin:left;transform:scaleX(0);animation:ldr-fill 3.05s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes ldr-fill{to{transform:scaleX(1)}}

@media(max-width:620px){
  .ldr-vessel{width:210px;margin-left:-105px;bottom:33%}
  .ldr-bob{width:210px;height:107px}
  .ldr-yacht{width:210px;height:107px}
  .ldr-wake{right:184px;width:200px}
  .ldr-sun{width:220px;height:220px}
}

@media(prefers-reduced-motion:reduce){
  .ldr-vessel{animation:none;transform:none}
  .ldr-bob,.ldr-wake,.ldr-spray,.ldr-wave,.ldr-sun{animation:none}
  .ldr-spray{opacity:.5}
  .ldr-progress i{animation:ldr-fill .6s linear forwards}
}

/* ---- loader v2 tuning: seat the vessel in the water, lift the brand ---- */
.ayn-loader .loader-brand{top:24%;transform:none;gap:12px}
.ldr-horizon{bottom:47%}
.ldr-vessel{bottom:20%}
.ldr-water{height:44%}
.wv-back{opacity:.42;background-color:#0d5570}
.ldr-wake{right:276px;bottom:34px;width:330px;height:18px;
  background:linear-gradient(90deg,rgba(214,244,248,0),rgba(214,244,248,.62))}
.ldr-spray{bottom:32px}
.sp1{right:12px}
.sp2{right:32px}
.sp3{right:0}

/* ---- loader v2.1: gentle swell, vessel seated in the water ---- */
:root{
  --wave-lo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C150,52 350,52 600,70 C850,88 1050,88 1200,70 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
  --wave-lo-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,74 C200,58 300,92 600,74 C900,56 1000,90 1200,74 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
}

.ldr-water{height:46%;z-index:2}
.ldr-water-back{z-index:0}
.ldr-vessel{bottom:12%;z-index:1}
.ldr-bob{width:340px;height:150px}
.ldr-yacht{width:340px;height:150px}
.ldr-vessel{width:340px;margin-left:-170px}

.ldr-wave{-webkit-mask-image:var(--wave-lo);mask-image:var(--wave-lo)}
.wv-back{height:100%;opacity:.5;background-color:#0e5772;
  -webkit-mask-image:var(--wave-lo-2);mask-image:var(--wave-lo-2);
  animation:ayn-swell 9s linear infinite}
.wv-mid{height:78%;opacity:.72;background:linear-gradient(180deg,#3c9db6,#12586f);
  -webkit-mask-image:var(--wave-lo-2);mask-image:var(--wave-lo-2);
  animation:ayn-swell 5s linear infinite reverse}
.wv-front{height:56%;opacity:1;background:linear-gradient(180deg,#6ec2d4,#17708c);
  -webkit-mask-image:var(--wave-lo);mask-image:var(--wave-lo);
  animation:ayn-swell 2.8s linear infinite}

.ldr-wake{right:312px;bottom:36px;width:340px;height:16px}
.ldr-spray{bottom:34px}
.sp1{right:22px}
.sp2{right:44px}
.sp3{right:8px}
.ldr-horizon{bottom:49%}

@media(max-width:620px){
  .ldr-vessel{width:238px;margin-left:-119px;bottom:14%}
  .ldr-bob,.ldr-yacht{width:238px;height:105px}
  .ldr-wake{right:218px;width:240px;bottom:26px}
  .ldr-spray{bottom:24px}
}

/* ---- loader v2.2: calmer swell, vessel riding the waterline ---- */
:root{
  --wave-lo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C150,62 350,62 600,70 C850,78 1050,78 1200,70 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
  --wave-lo-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C200,57 300,84 600,70 C900,56 1000,84 1200,70 L1200,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
}
.ldr-vessel{bottom:7%}
.wv-back{height:82%;opacity:.48}
.wv-mid{height:58%;opacity:.75}
.wv-front{height:54%;opacity:1}
.ldr-wake{right:316px;bottom:34px;width:330px;height:15px}
.ldr-spray{bottom:38px}
.sp1{right:26px}
.sp2{right:46px}
.sp3{right:12px}

@media(max-width:620px){
  .ldr-wake{right:222px;width:230px;bottom:24px}
  .ldr-spray{bottom:27px}
  .sp1{right:18px}.sp2{right:32px}.sp3{right:8px}
}
.ldr-vessel{bottom:5%}
.wv-front{height:58%}

/* ---- loader v2.3: brighter wake and bow spray ---- */
.ldr-wake{right:314px;bottom:28px;width:340px;height:14px;filter:blur(4px);
  background:linear-gradient(90deg,rgba(226,250,252,0),rgba(226,250,252,.55))}
.ldr-wake:after{content:"";position:absolute;right:0;bottom:4px;width:62%;height:5px;border-radius:50%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85));filter:blur(1.5px)}
.ldr-spray{bottom:36px;width:34px;height:16px;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(226,250,252,0) 66%)}
.sp1{right:22px}
.sp2{right:44px;width:26px;height:13px}
.sp3{right:6px;width:22px;height:11px}
@keyframes ldr-spray{
  0%  {opacity:0;transform:translate(0,6px) scale(.45)}
  20% {opacity:.95}
  100%{opacity:0;transform:translate(30px,-30px) scale(1.35)}
}
@media(max-width:620px){
  .ldr-wake{right:222px;width:236px;bottom:20px}
  .ldr-spray{bottom:25px;width:24px;height:12px}
  .sp1{right:16px}.sp2{right:30px;width:19px;height:10px}.sp3{right:4px;width:16px;height:8px}
}
.ldr-progress i{animation-duration:2.8s}

/* ---- loader v3: Sunseeker-style flybridge sport yacht (400x185) ---- */
.ldr-vessel{width:400px;margin-left:-200px;bottom:7%}
.ldr-bob{width:400px;height:185px}
.ldr-yacht{width:400px;height:185px}
.ldr-wake{right:372px;bottom:26px;width:360px;height:15px}
.ldr-spray{bottom:30px}
.sp1{right:14px}
.sp2{right:36px}
.sp3{right:2px}

@media(max-width:620px){
  .ldr-vessel{width:280px;margin-left:-140px;bottom:8%}
  .ldr-bob,.ldr-yacht{width:280px;height:130px}
  .ldr-wake{right:260px;width:250px;bottom:18px}
  .ldr-spray{bottom:21px}
  .sp1{right:10px}.sp2{right:25px}.sp3{right:2px}
}
.ldr-vessel{bottom:5.5%}
.wv-front{height:62%}
.ldr-wake{right:378px;bottom:22px}
.ldr-spray{bottom:26px}

/* ---- loader v3.1: seat the yacht deeper, foam the wave crests ---- */
.ldr-vessel{bottom:4.2%}
.wv-front{filter:drop-shadow(0 -1.5px 0 rgba(222,248,250,.5))}
.wv-mid{filter:drop-shadow(0 -1px 0 rgba(200,238,244,.28))}
@media(max-width:620px){ .ldr-vessel{bottom:6%} }

/* ---- loader v4: flat-vector yacht ---- */
.ldr-bob,.ldr-yacht{width:400px;height:150px}
.ldr-vessel{width:400px;margin-left:-200px;bottom:7%}
.ldr-yacht{filter:drop-shadow(0 14px 22px rgba(1,12,20,.45))}
.ldr-wake{right:376px;bottom:30px;width:340px;height:14px}
.ldr-spray{bottom:34px}
.sp1{right:18px}
.sp2{right:40px}
.sp3{right:4px}

/* stylised ripple lines drawn over the water */
.ldr-ripples{position:absolute;left:0;bottom:0;width:200%;height:100%;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='96' viewBox='0 0 240 96'%3E%3Cg fill='none' stroke='%23dcf7f8' stroke-width='2.6' stroke-linecap='round' opacity='.45'%3E%3Cpath d='M12,24 q12,-9 24,0 t24,0'/%3E%3Cpath d='M132,52 q12,-9 24,0 t24,0'/%3E%3Cpath d='M56,76 q12,-9 24,0 t24,0'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;background-size:240px 96px;
  animation:ayn-swell 6.5s linear infinite}

@media(max-width:620px){
  .ldr-bob,.ldr-yacht{width:280px;height:105px}
  .ldr-vessel{width:280px;margin-left:-140px;bottom:8%}
  .ldr-wake{right:262px;width:240px;bottom:20px}
  .ldr-spray{bottom:23px}
  .sp1{right:12px}.sp2{right:28px}.sp3{right:2px}
  .ldr-ripples{background-size:170px 68px}
}

/* ---- loader v4.1: ripples live inside the wave shapes ---- */
.ldr-ripples{display:none}
.wv-mid{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='104' viewBox='0 0 260 104'%3E%3Cg fill='none' stroke='%23dcf7f8' stroke-width='2.4' stroke-linecap='round' opacity='.30'%3E%3Cpath d='M18,30 q12,-9 24,0 t24,0'/%3E%3Cpath d='M150,64 q12,-9 24,0 t24,0'/%3E%3C/g%3E%3C/svg%3E"),
                  linear-gradient(180deg,#3c9db6,#12586f);
  background-repeat:repeat,no-repeat;background-size:260px 104px,100% 100%}
.wv-front{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='92' viewBox='0 0 230 92'%3E%3Cg fill='none' stroke='%23eafcfd' stroke-width='2.6' stroke-linecap='round' opacity='.42'%3E%3Cpath d='M14,26 q12,-9 24,0 t24,0'/%3E%3Cpath d='M120,58 q12,-9 24,0 t24,0'/%3E%3C/g%3E%3C/svg%3E"),
                  linear-gradient(180deg,#6ec2d4,#17708c);
  background-repeat:repeat,no-repeat;background-size:230px 92px,100% 100%}

/* calmer wake for the flat style */
.ldr-wake{width:280px;height:11px;filter:blur(3px);
  background:linear-gradient(90deg,rgba(226,250,252,0),rgba(226,250,252,.42))}
.ldr-wake:after{width:55%;height:4px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7))}
.ldr-yacht{filter:drop-shadow(0 12px 18px rgba(1,12,20,.4))}

/* ---- loader v4.2: larger vessel, better vertical balance ---- */
.ayn-loader .loader-brand{top:34%}
.ldr-vessel{width:470px;margin-left:-235px;bottom:7.5%}
.ldr-bob,.ldr-yacht{width:470px;height:176px}
.ldr-wake{right:444px;bottom:34px;width:330px;height:13px}
.ldr-spray{bottom:39px}
.sp1{right:21px}
.sp2{right:47px}
.sp3{right:5px}

@media(max-width:620px){
  .ayn-loader .loader-brand{top:30%}
  .ldr-vessel{width:300px;margin-left:-150px;bottom:9%}
  .ldr-bob,.ldr-yacht{width:300px;height:113px}
  .ldr-wake{right:284px;width:215px;bottom:22px}
  .ldr-spray{bottom:25px}
  .sp1{right:13px}.sp2{right:30px}.sp3{right:3px}
}
.ldr-vessel{bottom:6.6%}

/* ---- loader v5: rebuilt vessel geometry ---- */
.ldr-bob,.ldr-yacht{width:470px;height:204px}
.ldr-vessel{width:470px;margin-left:-235px;bottom:8%}
.ldr-wake{right:439px;bottom:36px;width:330px;height:13px}
.ldr-spray{bottom:40px}
.sp1{right:18px}
.sp2{right:42px}
.sp3{right:4px}

@media(max-width:620px){
  .ldr-bob,.ldr-yacht{width:300px;height:130px}
  .ldr-vessel{width:300px;margin-left:-150px;bottom:9%}
  .ldr-wake{right:280px;width:215px;bottom:23px}
  .ldr-spray{bottom:26px}
  .sp1{right:12px}.sp2{right:27px}.sp3{right:3px}
}
.ldr-vessel{bottom:5.75%}
.ldr-vessel{bottom:3%}

/* =========================================================
   13. HOVER RESTRAINT — quieter, faster, less floaty
   ========================================================= */
.ayn-hover{transition:transform .38s var(--ease),box-shadow .38s var(--ease),
           border-color .38s var(--ease),background-color .38s var(--ease)}
.ayn-hover:hover{transform:translateY(-3px)}
.ayn-glow{background:radial-gradient(210px circle at var(--mx,50%) var(--my,50%),
          rgba(95,212,224,.13),rgba(95,212,224,0) 70%);transition:opacity .35s var(--ease)}
.hero-card .ayn-glow,.about-panel .ayn-glow{
  background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),rgba(154,232,238,.12),transparent 70%)}
.ayn-hover:hover .ayn-sheen{opacity:.2;transition:transform .9s var(--ease),opacity .3s}

/* softer hover shadows */
.service-card:hover{box-shadow:0 16px 36px rgba(8,60,80,.11)}
.standard-stack article:hover,.process-grid article:hover{box-shadow:0 16px 34px rgba(8,60,80,.1)}
.addon-grid article:hover{box-shadow:0 14px 30px rgba(8,60,80,.1);transform:none}
.package-card:hover{box-shadow:0 26px 62px rgba(8,60,80,.14)}
.report-card:hover{box-shadow:0 30px 72px rgba(8,60,80,.16)}
.hero-card:hover,.about-panel:hover{box-shadow:0 32px 82px rgba(0,0,0,.3)}
.faq-grid details:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,60,80,.09)}
.pricing-note:hover,.package-rule:hover,.report-note:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(8,60,80,.09)}
.capability-inner>div:hover{box-shadow:0 10px 24px rgba(8,60,80,.07)}

/* smaller icon flourishes */
.service-card:hover>span{transform:scale(1.04);box-shadow:0 6px 14px rgba(27,139,163,.2)}
.standard-stack article:hover .standard-num{transform:scale(1.04)}
.process-grid article:hover>span{transform:scale(1.04)}
.process-grid article:hover:after{transform:scale(1.16)}
.package-card.featured:hover .featured-pill{transform:translateY(-1px) scale(1.02)}
.package-card:hover .price strong{transform:none}
.founder-card:hover .founder-avatar{transform:scale(1.04);box-shadow:0 8px 20px rgba(95,212,224,.25)}
.brand:hover .brand-badge{transform:translateY(-1px) scale(1.03);box-shadow:0 6px 16px rgba(95,212,224,.22)}
.menu-toggle:hover{transform:scale(1.05);color:var(--aqua)}

/* shorter list slides */
.checklist li:hover{transform:translateX(4px)}
.checklist li:hover:before{transform:scale(1.1)}
.about-panel li:hover{transform:translateX(4px)}
.contact-details p:hover{transform:translateX(4px)}
.report-row:hover{transform:translateX(3px)}
.founder-card:hover{transform:translateX(3px)}
.quick-list span:hover{transform:translateX(3px)}
.footer-links a:hover{transform:translateY(-1px)}

/* calmer buttons and form fields */
.btn:hover{transform:translateY(-2px)}
.btn:hover:after{opacity:.32;transition:transform .8s var(--ease),opacity .3s}
.btn-primary:hover{box-shadow:0 16px 38px rgba(95,212,224,.32)}
.contact-form:hover{transform:none;box-shadow:0 34px 92px rgba(0,0,0,.28)}
.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{
  transform:none;box-shadow:0 4px 14px rgba(27,139,163,.09)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  transform:none;box-shadow:0 0 0 3px rgba(95,212,224,.2)}

@media(max-width:620px){ .ayn-hover:hover{transform:translateY(-2px)} }
@media(max-width:620px){ .ldr-vessel{bottom:5.5%} }

/* =========================================================
   14. MINIMAL HOVER — barely there
   Supersedes section 13. Border, a whisper of shadow,
   a 2px lift. No sweeps, no scaling, no rotation.
   ========================================================= */
.ayn-hover{transition:transform .28s var(--ease),box-shadow .28s var(--ease),
           border-color .28s var(--ease),background-color .28s var(--ease)}
.ayn-hover:hover{transform:translateY(-2px)}
.ayn-sheen{display:none!important}
.ayn-glow{background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),
          rgba(95,212,224,.06),rgba(95,212,224,0) 70%)}
.hero-card .ayn-glow,.about-panel .ayn-glow{
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(154,232,238,.06),transparent 70%)}

/* shadows barely deepen */
.service-card:hover{box-shadow:0 10px 24px rgba(8,60,80,.08);border-color:rgba(95,212,224,.45)}
.standard-stack article:hover,.process-grid article:hover{box-shadow:0 10px 22px rgba(8,60,80,.07);border-color:rgba(95,212,224,.4)}
.addon-grid article:hover{box-shadow:0 9px 20px rgba(8,60,80,.07);border-color:rgba(95,212,224,.4);transform:none}
.package-card:hover{box-shadow:0 20px 52px rgba(8,60,80,.1);border-color:rgba(95,212,224,.45)}
.report-card:hover{box-shadow:0 26px 66px rgba(8,60,80,.13);border-color:rgba(95,212,224,.4)}
.hero-card:hover,.about-panel:hover{box-shadow:0 30px 78px rgba(0,0,0,.28);border-color:rgba(154,232,238,.28)}
.faq-grid details:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(8,60,80,.07);border-color:rgba(95,212,224,.42)}
.pricing-note:hover,.package-rule:hover,.report-note:hover{transform:none;box-shadow:none;border-color:rgba(95,212,224,.4)}
.capability-inner>div:hover{box-shadow:none;background:rgba(255,255,255,.5)}

/* no icon flourishes at all */
.service-card:hover>span,
.standard-stack article:hover .standard-num,
.process-grid article:hover>span,
.process-grid article:hover:after,
.package-card.featured:hover .featured-pill,
.package-card:hover .price strong,
.founder-card:hover .founder-avatar,
.brand:hover .brand-badge,
.menu-toggle:hover{transform:none}
.service-card:hover>span{box-shadow:inset 0 0 0 1px rgba(95,212,224,.6)}
.founder-card:hover .founder-avatar,.brand:hover .brand-badge{box-shadow:none}
.addon-grid article:hover:before{width:40px}

/* rows: a tint, essentially no travel */
.checklist li:hover,
.about-panel li:hover,
.contact-details p:hover,
.report-row:hover,
.founder-card:hover,
.quick-list span:hover,
.hero-proof span:hover{transform:none}
.checklist li:hover:before{transform:none}
.footer-links a:hover,.nav a:not(.nav-cta):hover{transform:none}
.nav-cta:hover{transform:none;box-shadow:none}

/* buttons: colour only */
.btn:hover{transform:none}
.btn:active{transform:translateY(1px)}
.btn:hover:after{opacity:0}
.btn-primary:hover{box-shadow:0 12px 30px rgba(95,212,224,.26)}
.btn-secondary:hover{box-shadow:none}
.btn-dark:hover{box-shadow:0 12px 28px rgba(11,99,127,.22)}

/* form fields: border and ring only */
.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{
  transform:none;box-shadow:none;border-color:rgba(95,212,224,.75)}

@media(max-width:620px){ .ayn-hover:hover{transform:none} }

/* ---- loader v6: traced Absolute-style flybridge yacht ----
   viewBox 1404x512 (traced 1:1 from the reference profile).
   The SVG's bottom edge IS the waterline. */
.ldr-bob,.ldr-yacht{width:470px;height:171px}
.ldr-vessel{width:470px;margin-left:-235px;bottom:11.5%}
.ldr-yacht{filter:drop-shadow(0 10px 16px rgba(1,12,20,.38))}
.ldr-wake{right:452px;bottom:6px;width:320px;height:12px}
.ldr-spray{bottom:10px}
.sp1{right:14px}
.sp2{right:38px}
.sp3{right:2px}

@media(max-width:620px){
  .ldr-bob,.ldr-yacht{width:300px;height:109px}
  .ldr-vessel{width:300px;margin-left:-150px;bottom:12.5%}
  .ldr-wake{right:288px;width:210px;bottom:4px}
  .ldr-spray{bottom:7px}
  .sp1{right:9px}.sp2{right:24px}.sp3{right:1px}
}
/* softer ripples so the water reads naturalistic beside the traced yacht */
.wv-mid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='104' viewBox='0 0 260 104'%3E%3Cg fill='none' stroke='%23dcf7f8' stroke-width='2' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M18,30 q12,-9 24,0 t24,0'/%3E%3Cpath d='M150,64 q12,-9 24,0 t24,0'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#3c9db6,#12586f)}
.wv-front{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='92' viewBox='0 0 230 92'%3E%3Cg fill='none' stroke='%23eafcfd' stroke-width='2.2' stroke-linecap='round' opacity='.18'%3E%3Cpath d='M14,26 q12,-9 24,0 t24,0'/%3E%3Cpath d='M120,58 q12,-9 24,0 t24,0'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#6ec2d4,#17708c)}

/* =========================================================
   15. BRAND LOGO
   ========================================================= */
.brand-logo{display:block;height:46px;width:auto}
.brand{gap:0}
.footer-brand .brand-logo{height:44px}
.loader-logo{display:block;width:min(370px,66vw);height:auto}
.ayn-loader .loader-brand{gap:22px}

@media(max-width:950px){ .brand-logo{height:40px} }
@media(max-width:620px){
  .brand-logo{height:34px}
  .footer-brand .brand-logo{height:38px}
  .loader-logo{width:min(300px,74vw)}
}

/* ---- nav CTA: the generic .nav a padding was overriding the pill ---- */
.nav a:not(.nav-cta){padding:6px 2px}
.nav .nav-cta{
  padding:12px 26px;
  line-height:1;
  white-space:nowrap;
  letter-spacing:.05em;
  border-radius:999px;
}
@media(max-width:1080px){ .nav .nav-cta{padding:11px 20px} }
@media(max-width:950px){ .nav .nav-cta{padding:14px 26px;text-align:center} }
.brand-logo{height:50px}
.footer-brand .brand-logo{height:48px}
@media(max-width:950px){ .brand-logo{height:42px} }
@media(max-width:620px){ .brand-logo{height:34px} .footer-brand .brand-logo{height:40px} }

/* ---- brand lockup: AYN mark + the expansion spelled out ---- */
.brand{gap:14px;align-items:center}
.brand-logo{height:34px}
.footer-brand .brand-logo{height:34px}
.brand-copy{display:flex;flex-direction:column;line-height:1;gap:6px}
.brand-copy strong{font-family:"Libre Baskerville",Georgia,serif;font-size:15px;font-weight:700;
  letter-spacing:.04em;color:#fbf9f7;text-transform:none}
.brand-copy small{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(126,214,229,.78);margin-top:0}
.brand:hover .brand-copy strong{color:#fff}
.brand-copy strong,.brand-copy small{transition:color .3s var(--ease)}

@media(max-width:1080px){
  .brand-logo{height:30px}
  .brand-copy strong{font-size:13.5px}
  .brand-copy small{font-size:8px;letter-spacing:.18em}
}
@media(max-width:620px){
  .brand{gap:10px}
  .brand-logo{height:26px}
  .brand-copy strong{font-size:12.5px}
  .brand-copy small{font-size:7.5px;letter-spacing:.16em}
}

/* =========================================================
   16. CAPABILITY STRIP — defined cards instead of faint rules
   ========================================================= */
.capability-inner{grid-template-columns:repeat(4,1fr);gap:14px;padding:32px 0}
.capability-inner>div{
  padding:20px 22px;
  border:1px solid rgba(11,74,95,.3);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(238,248,251,.62));
  box-shadow:0 1px 2px rgba(11,74,95,.05), inset 0 1px 0 rgba(255,255,255,.85);
}
.capability-inner>div:last-child,
.capability-inner>div:nth-child(2),
.capability-inner>div:nth-child(-n+2){border:1px solid rgba(11,74,95,.3)}
.capability-inner>div:hover{
  border-color:rgba(27,139,163,.62);
  background:linear-gradient(180deg,#fff,rgba(233,246,250,.85));
  box-shadow:0 6px 18px rgba(8,60,80,.08), inset 0 1px 0 #fff;
}
.capability-inner span{color:var(--tide);font-size:9.5px}
.capability-inner strong{font-size:16px}

@media(max-width:950px){
  .capability-inner{grid-template-columns:1fr 1fr;gap:12px}
  .capability-inner>div{border:1px solid rgba(11,74,95,.3);padding:18px 20px}
}
@media(max-width:620px){
  .capability-inner{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .capability-inner>div{border:1px solid rgba(11,74,95,.3);padding:16px 18px}
}

/* ---- loader v7: cleaner trace, smaller vessel ---- */
.ldr-bob,.ldr-yacht{width:400px;height:146px}
.ldr-vessel{width:400px;margin-left:-200px;bottom:11.5%}
.ldr-wake{right:385px;bottom:5px;width:280px;height:11px}
.ldr-spray{bottom:9px}
.sp1{right:12px}
.sp2{right:32px}
.sp3{right:2px}

@media(max-width:620px){
  .ldr-bob,.ldr-yacht{width:260px;height:95px}
  .ldr-vessel{width:260px;margin-left:-130px;bottom:12.5%}
  .ldr-wake{right:250px;width:185px;bottom:3px}
  .ldr-spray{bottom:6px}
  .sp1{right:8px}.sp2{right:21px}.sp3{right:1px}
}

/* ---- loader v8: support post restored, rails thinned, vessel smaller again ---- */
.ldr-bob,.ldr-yacht{width:350px;height:128px}
.ldr-vessel{width:350px;margin-left:-175px;bottom:11.5%}
.ldr-wake{right:337px;bottom:4px;width:250px;height:10px}
.ldr-spray{bottom:8px}
.sp1{right:10px}
.sp2{right:28px}
.sp3{right:2px}

@media(max-width:620px){
  .ldr-bob,.ldr-yacht{width:230px;height:84px}
  .ldr-vessel{width:230px;margin-left:-115px;bottom:12.5%}
  .ldr-wake{right:222px;width:165px;bottom:3px}
  .ldr-spray{bottom:5px}
  .sp1{right:7px}.sp2{right:18px}.sp3{right:1px}
}

/* =========================================================
   17. HERO BACKGROUND VIDEO (optional)
   Inactive until hero-video.mp4 exists next to index.html.
   ========================================================= */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  z-index:0;opacity:0;pointer-events:none;
  transition:opacity 1.4s var(--ease);
}
.hero.has-video .hero-video{opacity:1}

/* scrim: keeps the headline readable over whatever the footage does */
.hero.has-video:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,16,26,.93) 0%,rgba(2,16,26,.78) 38%,rgba(2,16,26,.34) 72%,rgba(2,16,26,.28) 100%),
    linear-gradient(180deg,rgba(2,16,26,.5) 0%,rgba(2,16,26,0) 26%,rgba(2,16,26,0) 62%,rgba(3,25,38,.72) 100%);
}
/* the painted water effects step back so they don't fight the footage */
.hero.has-video .ayn-caustics{opacity:.3}
.hero.has-video .ayn-rays{opacity:.22}
.hero.has-video .ayn-bubbles{display:none}
.hero.has-video .hero-glow{opacity:.45}
.hero.has-video .hero-watermark{z-index:2;color:rgba(226,246,249,.05)}
.hero.has-video .hero-line{z-index:2}

/* =========================================================
   18. LOADER v3 — cinematic footage plate
   The <video> lives inside #ayn-loader and is gated by the inline
   script beside it (reduced motion / Save-Data / 2G-3G / <720px all
   fall back to the painted SVG scene, unchanged, in section 12).
   Poster frame carries the look until the video is decodable, so the
   loader never shows an empty box.
   ========================================================= */
.ldr-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 55%;
  z-index:0;pointer-events:none;border:0;background:var(--abyss);
  animation:ldr-video-in .7s var(--ease) both;
}
@keyframes ldr-video-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

/* footage replaces the painted scene rather than sitting behind it */
.ayn-loader.has-video .ldr-sky,
.ayn-loader.has-video .ldr-sun,
.ayn-loader.has-video .ldr-horizon,
.ayn-loader.has-video .ldr-scene{display:none!important}

/* scrim: hold the lockup's contrast over moving footage, and keep the
   abyss-navy edges so the loader still reads as part of the site */
.ayn-loader.has-video:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 46% at 50% 26%,rgba(2,16,26,.72),transparent 72%),
    linear-gradient(180deg,rgba(2,16,26,.86) 0%,rgba(2,16,26,.30) 34%,rgba(2,16,26,.12) 58%,rgba(2,16,26,.62) 100%);
}
.ayn-loader.has-video .loader-brand{z-index:4}
.ayn-loader.has-video .loader-logo{filter:drop-shadow(0 14px 34px rgba(0,0,0,.72))}

@media(max-width:900px) and (min-aspect-ratio:5/4){.ldr-video{object-position:50% 58%}}

@media(prefers-reduced-motion:reduce){
  .ldr-video{animation:none}
}

/* ---- loader v3 tuning: lift the lockup clear of the vessel ---- */
.ayn-loader.has-video .loader-brand{top:15%}
.ayn-loader.has-video:before{
  background:
    radial-gradient(64% 40% at 50% 20%,rgba(2,16,26,.66),transparent 74%),
    linear-gradient(180deg,rgba(2,16,26,.82) 0%,rgba(2,16,26,.26) 32%,rgba(2,16,26,.08) 56%,rgba(2,16,26,.55) 100%);
}
@media(max-width:900px) and (min-aspect-ratio:5/4){.ayn-loader.has-video .loader-brand{top:18%}}

/* ---- loader v3.1: mobile. A 16:9 plate cover-cropped into a portrait
   viewport shows a vertical sliver of the saloon and nothing else, so on
   narrow screens the footage runs as an oversized band, its top and bottom
   edges dissolved into the abyss field, with the lockup in clear navy above.
   Deliberate composition rather than a bad crop. Keyed off SHAPE, not width:
   a portrait tablet crops just as badly as a phone, while a landscape phone
   is wider than 16:9 and covers fine. NOTE: this must reset the
   inset/width/height from section 18 explicitly or the box mis-resolves. ---- */
@media(max-aspect-ratio:5/4){
  /* section 18's ldr-video-in ends on transform:scale(1) with fill-mode
     both, which silently overrides the positioning transform below.
     Mobile therefore uses an opacity-only fade. */
  .ldr-video{
    animation-name:ldr-video-fade;
    inset:auto;top:56%;left:50%;right:auto;bottom:auto;
    width:168%;height:auto;
    transform:translate(-50%,-50%);
    object-fit:contain;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 78%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 78%,transparent 100%);
  }
  .ayn-loader.has-video{background:linear-gradient(180deg,#02101a 0%,#04202f 54%,#02131f 100%)}
  .ayn-loader.has-video:before{
    background:
      radial-gradient(86% 22% at 50% 16%,rgba(2,16,26,.68),transparent 78%),
      linear-gradient(180deg,rgba(2,16,26,.76) 0%,rgba(2,16,26,.06) 42%,rgba(2,16,26,.06) 70%,rgba(2,16,26,.80) 100%);
  }
  .ayn-loader.has-video .loader-brand{top:18%}
}
@keyframes ldr-video-fade{from{opacity:0}to{opacity:1}}

/* ---- contact details: real mailto / tel links (added with the
   aynmarine.com launch). They must not pick up the browser's default
   link colour or underline - they sit on the dark contact panel and
   inherit its type. The parent <p> already carries the hover shift. ---- */
.contact-details a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.contact-details a:hover,
.contact-details a:focus-visible{
  color:#fff;
  border-bottom-color:rgba(255,222,182,.55);
}
.contact-details a:focus-visible{outline:2px solid rgba(255,222,182,.7);outline-offset:3px;border-radius:2px}

/* ---- Netlify Forms: honeypot + inline status (aynmarine.com launch) ----
   NOTE: this message sits INSIDE .contact-form, which is a WHITE card
   (rgba(255,255,255,.98) with color:#183041) sitting on the dark contact
   section. It is not on the dark panel. Text here must be DARK INK.
   The first version used white text and was invisible on the card. ---- */
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{
  margin:14px 0 0;padding:15px 17px 15px 44px;border-radius:12px;
  position:relative;
  font-size:14.5px;line-height:1.55;font-weight:500;
  border:1px solid rgba(27,139,163,.30);
  background:rgba(95,212,224,.10);
  color:#183041;
}
.form-status:before{
  position:absolute;left:16px;top:15px;
  font-weight:700;font-size:15px;line-height:1.55;
}
.form-status.is-ok{
  border-color:rgba(40,138,102,.42);
  background:linear-gradient(120deg,rgba(120,200,160,.20),rgba(95,212,224,.12));
  color:#12452f;
}
.form-status.is-ok:before{content:"\2713";color:#1c7a52}
.form-status.is-err{
  border-color:rgba(186,74,56,.44);
  background:rgba(214,90,70,.10);
  color:#7a2016;
}
.form-status.is-err:before{content:"\0021";color:#a83426}
.contact-form button[disabled]{opacity:.7;cursor:progress}

/* ---- section CTAs (added 2026-09-10)
   Four buttons at the natural decision points: after Services, after
   Process, after FAQ, and in the footer. Deliberately restrained -
   centred, generous space above, no box or panel around them, so a
   full read-through never feels like it is being sold at. ---- */
.section-cta{
  margin-top:56px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;
}
.section-cta .btn{min-width:264px}
.section-cta-lead{
  margin:0;
  font-size:15.5px;
  color:var(--ink-soft);
}

/* footer CTA sits under the lockup, left-aligned with it */
.footer-cta{
  display:inline-flex;
  margin-top:20px;
  min-width:0;
}

@media(max-width:620px){
  .section-cta{margin-top:40px}
  .section-cta .btn{min-width:0;width:100%}
  .footer-cta{width:100%;justify-content:center}
}

/* ---- nav "Play" link -> game.html (Harbor Run, added 2026-09-10)
   Sits between the last nav item and the CTA pill. Given a border so
   it reads as a distinct thing rather than a sixth nav word, but kept
   quieter than the CTA so it never competes with it. ---- */
.nav .nav-play{
  padding:9px 14px;
  border:1px solid rgba(154,232,238,.32);
  border-radius:999px;
  letter-spacing:.08em;
  white-space:nowrap;
  color:rgba(255,255,255,.86);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.nav a.nav-play:after{display:none}          /* no underline sweep on a pill */
.nav a.nav-play:hover{
  background:rgba(154,232,238,.12);
  border-color:rgba(154,232,238,.6);
  color:#fff;
  transform:none;
}
@media(max-width:1080px){ .nav .nav-play{padding:8px 12px} }
@media(max-width:950px){ .nav .nav-play{padding:12px 18px;text-align:center} }