/* Ehukai Media site CSS - tokens and core patterns */

/* Design Tokens */
:root {
  --color-primary: #1B9AAA;
  --color-primary-dark: #146B77;
  --color-accent: #51C4D3;
  --color-ink: #0A0F14;
  --color-surface: #FFFFFF;
  --color-muted: #F5F5F7;

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;

  --radius-base: 0.4rem;
  --radius-full: 9999px;

  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --ease-smooth: cubic-bezier(0.2, 0, 0.1, 1);
}

/* Consistent hero typography */
.hero-thin { font-family: var(--font-display); font-weight:100; letter-spacing:-.02em; }

/* Global weight overrides to remove heavy bold */
.font-extrabold, .font-bold { font-weight: 500 !important; }
.font-semibold { font-weight: 500 !important; }
b, strong { font-weight: 500; }

/* Footer polish */
/* Elegant, brand-specific icon buttons */
.footer-social a { position:relative; width: 40px; height: 40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:0; background: transparent; transition: color 150ms ease; }
.footer-social a::before, .footer-social a::after { content:none; }
.footer-social a:hover { color:#fff; }
/* Social icons use theme mask-based icons for consistency */
.footer-social .icon-social { width: 22px; height: 22px; display:inline-block; background: linear-gradient(135deg, rgba(27,154,170,.95), rgba(20,107,119,.95)); color: currentColor; transition: filter 150ms ease; }
.footer-social a:hover .icon-social { filter: brightness(1.1) contrast(1.05); }
.footer-social .icon-x { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M3 3h4.6l5.1 6.5L17.9 3H21l-7.5 9.1L21 21h-4.6l-5.4-6.9L6.1 21H3l7.8-9.3L3 3z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M3 3h4.6l5.1 6.5L17.9 3H21l-7.5 9.1L21 21h-4.6l-5.4-6.9L6.1 21H3l7.8-9.3L3 3z'/></svg>") no-repeat center / contain; }
.footer-social .icon-facebook { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12.07C22 6.48 17.52 2 11.93 2 6.35 2 1.87 6.48 1.87 12.07c0 4.96 3.63 9.08 8.38 9.93v-7.02H7.9v-2.9h2.35v-2.2c0-2.33 1.39-3.62 3.52-3.62 1.02 0 2.1.18 2.1.18v2.3h-1.18c-1.16 0-1.52.72-1.52 1.46v1.88h2.59l-.41 2.9h-2.18V22c4.75-.85 8.38-4.97 8.38-9.93z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12.07C22 6.48 17.52 2 11.93 2 6.35 2 1.87 6.48 1.87 12.07c0 4.96 3.63 9.08 8.38 9.93v-7.02H7.9v-2.9h2.35v-2.2c0-2.33 1.39-3.62 3.52-3.62 1.02 0 2.1.18 2.1.18v2.3h-1.18c-1.16 0-1.52.72-1.52 1.46v1.88h2.59l-.41 2.9h-2.18V22c4.75-.85 8.38-4.97 8.38-9.93z'/></svg>") no-repeat center / contain; }
.footer-social .icon-youtube { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.7 3.5 12 3.5 12 3.5s-7.7 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.7.6 9.4.6 9.4.6s7.7 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.8 15.5V8.5l6.3 3.5-6.3 3.5z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.7 3.5 12 3.5 12 3.5s-7.7 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.7.6 9.4.6 9.4.6s7.7 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.8 15.5V8.5l6.3 3.5-6.3 3.5z'/></svg>") no-repeat center / contain; }
.footer-social .icon-instagram { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5zm5.25-2.25a1 1 0 1 1-1 1 1 1 0 0 1 1-1z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5zm5.25-2.25a1 1 0 1 1-1 1 1 1 0 0 1 1-1z'/></svg>") no-repeat center / contain; }
.footer-social .icon-github { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .5a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.5-1.1-1.2-1.4-1.2-1.4-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 .1.8 1.9 2.8 1.4.1-.8.4-1.4.7-1.7-2.6-.3-5.4-1.3-5.4-5.8 0-1.3.5-2.4 1.2-3.3-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.4 1.2a11.7 11.7 0 0 1 6.2 0c2.4-1.5 3.4-1.2 3.4-1.2.6 1.7.2 3 .1 3.3.8.9 1.2 2 1.2 3.3 0 4.5-2.8 5.5-5.4 5.8.4.3.8 1 .8 2.1v3.1c0 .3.2.7.8.6A12 12 0 0 0 12 .5z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .5a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.5-1.1-1.2-1.4-1.2-1.4-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 .1.8 1.9 2.8 1.4.1-.8.4-1.4.7-1.7-2.6-.3-5.4-1.3-5.4-5.8 0-1.3.5-2.4 1.2-3.3-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.4 1.2a11.7 11.7 0 0 1 6.2 0c2.4-1.5 3.4-1.2 3.4-1.2.6 1.7.2 3 .1 3.3.8.9 1.2 2 1.2 3.3 0 4.5-2.8 5.5-5.4 5.8.4.3.8 1 .8 2.1v3.1c0 .3.2.7.8.6A12 12 0 0 0 12 .5z'/></svg>") no-repeat center / contain; }
/* LinkedIn icon */
.footer-social .icon-linkedin { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.226.792 24 1.771 24h20.451C23.2 24 24 23.226 24 22.271V1.729C24 .774 23.2 0 22.222 0zM6.556 20.452H4.116V9h2.44v11.452zM5.337 7.433a1.805 1.805 0 11.002-3.61 1.805 1.805 0 01-.002 3.61zM20.447 20.452H17.21v-5.569c0-1.328-.025-3.039-1.852-3.039-1.853 0-2.136 1.445-2.136 2.939v5.669H9.085V9h3.112v1.561h.045c.434-.823 1.494-1.69 3.073-1.69 3.29 0 3.894 2.165 3.894 4.981v6.6z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.226.792 24 1.771 24h20.451C23.2 24 24 23.226 24 22.271V1.729C24 .774 23.2 0 22.222 0zM6.556 20.452H4.116V9h2.44v11.452zM5.337 7.433a1.805 1.805 0 11.002-3.61 1.805 1.805 0 01-.002 3.61zM20.447 20.452H17.21v-5.569c0-1.328-.025-3.039-1.852-3.039-1.853 0-2.136 1.445-2.136 2.939v5.669H9.085V9h3.112v1.561h.045c.434-.823 1.494-1.69 3.073-1.69 3.29 0 3.894 2.165 3.894 4.981v6.6z'/></svg>") no-repeat center / contain; }

/* Atmospheric deep ocean footer */
.footer-ocean {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 60% at 20% 0%, rgba(27,154,170,.10), transparent 60%),
    radial-gradient(800px 40% at 80% 10%, rgba(81,196,211,.08), transparent 70%),
    linear-gradient(180deg, #061018 0%, #09131e 55%, #0b1522 100%);
}
.footer-ocean::before {
  content: '';
  position: absolute; inset: -20% -10% 0 -10%;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    conic-gradient(from 180deg at 50% 110%, rgba(27,154,170,.10), rgba(0,0,0,0) 40%, rgba(81,196,211,.10) 70%, rgba(0,0,0,0));
  filter: blur(22px);
  opacity: .45;
  animation: oceanBreathe 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes oceanBreathe {
  0% { transform: translateY(0) scale(1); opacity:.38; }
  100% { transform: translateY(-12px) scale(1.02); opacity:.5; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-ocean::before { animation: none; opacity:.45; }
}

/* Ocean CTA (services ready section) */
.ocean-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 50% at 15% 0%, rgba(27,154,170,.10), transparent 60%),
    radial-gradient(700px 40% at 85% 15%, rgba(81,196,211,.08), transparent 70%),
    linear-gradient(180deg, #07121a 0%, #0a1521 55%, #0c1726 100%);
}
.ocean-cta::before {
  content: '';
  position: absolute; inset: -15% -10% 0 -10%;
  background:
    radial-gradient(50% 35% at 50% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 70%),
    conic-gradient(from 180deg at 50% 110%, rgba(27,154,170,.10), rgba(0,0,0,0) 40%, rgba(81,196,211,.10) 70%, rgba(0,0,0,0));
  filter: blur(20px);
  opacity:.4;
  animation: oceanBreathe 18s ease-in-out infinite alternate;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce) {
  .ocean-cta::before { animation: none; opacity:.45; }
}

/* Light tropical ocean CTA */
.ocean-cta--light { display:none; }

/* New CTA hero (seamless, elegant gradient pattern) */
.cta-hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
}
.cta-hero--aqua {
  background:
    radial-gradient(900px 480px at 12% -5%, rgba(81,196,211,.16), transparent 60%),
    radial-gradient(700px 420px at 88% 0%, rgba(27,154,170,.10), transparent 70%),
    linear-gradient(180deg, #eaf8fb 0%, #f8fdff 60%, #ffffff 100%);
}
.cta-hero--aqua::before {
  content:''; position:absolute; inset:-30% -15% -45% -15%; z-index:0;
  /* Subtle organic texture using layered gradients (no image tiling) */
  background:
    conic-gradient(from 210deg at 40% 20%, rgba(27,154,170,.06), rgba(27,154,170,0) 35%, rgba(81,196,211,.06) 65%, rgba(81,196,211,0) 85%),
    radial-gradient(400px 160px at 30% 25%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%);
  filter: blur(18px) saturate(110%);
  pointer-events:none;
}
.cta-hero--aqua::after {
  content:''; position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,.35) 100%);
  pointer-events:none;
}
.cta-hero > * { position:relative; z-index:1; }
@media (max-width: 640px) { .cta-hero { padding: 4rem 0; } }
@media (prefers-reduced-motion: reduce) { .cta-hero--aqua::before { filter: blur(14px) saturate(105%); } }

/* Accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-base);
  z-index: 10000;
}

/* Nav */
.nav-logo-link { display:flex; align-items:center; transition: opacity .3s ease; }
.nav-logo-link:hover { opacity:.85; }
.nav-logo { height:40px; width:auto; max-width:200px; object-fit:contain; }
.mobile-menu-btn { width:44px; height:44px; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:11px; border-radius:var(--radius-base); transition: all var(--duration-base) var(--ease-smooth); }
.mobile-menu-btn:hover { background: rgba(27,154,170,.1); transform: scale(1.05); }
.mobile-menu-btn:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.hamburger-line { width:24px; height:2px; background:#374151; transition: all var(--duration-base) var(--ease-smooth); transform-origin:center; border-radius:1px; }
.mobile-menu-btn.active .hamburger-line:nth-child(1){ transform: rotate(45deg) translate(6px,6px); background: var(--color-primary); }
.mobile-menu-btn.active .hamburger-line:nth-child(2){ opacity:0; transform: scale(0); }
.mobile-menu-btn.active .hamburger-line:nth-child(3){ transform: rotate(-45deg) translate(6px,-6px); background: var(--color-primary); }

.mobile-menu-overlay { position:fixed; inset:0; background: rgba(0,8,20,.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index:9999; opacity:0; visibility:hidden; transition: all var(--duration-slow) var(--ease-smooth); overflow: hidden; }
.mobile-menu-overlay.active { opacity:1; visibility:visible; }
.mobile-menu-content { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; height:100%; padding: calc(64px + env(safe-area-inset-top, 0)) 2rem 2rem; transform: translateY(50px); transition: transform .4s cubic-bezier(.175,.885,.32,1.275) .1s; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-menu-overlay.active .mobile-menu-content { transform: translateY(0); }
.mobile-nav { display:flex; flex-direction:column; align-items:center; gap:1.5rem; margin-bottom:3rem; width:100%; }
.mobile-nav-link { font-family: var(--font-display); font-size:2rem; font-weight:300; color:#fff; text-decoration:none; transition: all var(--duration-base) var(--ease-smooth); opacity:0; transform: translateY(20px); padding:.5rem 1rem; border-radius: var(--radius-base); position:relative; }
.mobile-menu-overlay.active .mobile-nav-link { opacity:1; transform: translateY(0); }
.mobile-nav-link:hover { color: var(--color-primary); transform: scale(1.05); }
.mobile-nav-link::after { content:''; position:absolute; bottom:-8px; left:50%; transform: translateX(-50%) scaleX(0); width:100%; height:2px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); transition: transform .3s ease; }
.mobile-nav-link:hover::after { transform: translateX(-50%) scaleX(1); }
.mobile-nav-link[aria-current="page"] { color: var(--color-primary); font-weight: 600; }
.mobile-menu-footer { opacity:0; transform: translateY(20px); transition: all .3s ease .5s; }
.mobile-menu-overlay.active .mobile-menu-footer { opacity:1; transform: translateY(0); }
.mobile-cta-btn { display:inline-block; padding:1.2rem 2.5rem; background: linear-gradient(135deg, rgba(27,154,170,.9), rgba(20,107,119,.95)); color:#fff; text-decoration:none; border-radius:50px; font-weight:500; font-size:1.1rem; border:1px solid rgba(255,255,255,.2); box-shadow:0 8px 25px rgba(27,154,170,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all var(--duration-base) var(--ease-smooth); min-width:150px; text-align:center; }
.mobile-cta-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow:0 15px 35px rgba(27,154,170,.4); }
.mobile-close-btn { position:absolute; top:2rem; right:2rem; width:44px; height:44px; background: rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.5); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: all var(--duration-base) var(--ease-smooth); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow:0 4px 12px rgba(0,0,0,.4); z-index:10001; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mobile-close-btn:hover { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.7); transform: rotate(90deg) scale(1.1); box-shadow:0 6px 16px rgba(0,0,0,.5); }
.mobile-close-btn:active { background: rgba(255,255,255,.4); transform: scale(.95); }
.mobile-close-btn:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }

/* Cards */
.glass-card { background: rgba(255,255,255,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.glass-card--thin { background: rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tight { padding: clamp(28px, 4vw, 64px) 0; }
.section + .section:not(.parallax-band) { border-top: 1px solid rgba(12,18,24,0.06); }

/* Modern process rail */
.process-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.process-rail::before {
  content: '';
  position: absolute;
  left: 5%; right: 5%;
  top: 24px; height: 4px;
  background: linear-gradient(90deg, rgba(27,154,170,.25), rgba(20,107,119,.25));
  border-radius: 9999px;
}
.process-step {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base) var(--ease-smooth);
}
.process-step:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.08); }
.process-step__badge {
  position: absolute; top: -14px; left: 1rem;
  width: 34px; height: 34px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(27,154,170,1), rgba(20,107,119,1));
  color: #fff; font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 24px rgba(27,154,170,.35);
}
@media (max-width: 960px) {
  .process-rail { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .process-rail::before { display: none; }
}
@media (max-width: 640px) {
  .process-rail { grid-template-columns: 1fr; }
}

/* FAQ accordion */
.faq-accordion { max-width: 960px; margin-left: auto; margin-right: auto; }
.faq-item { background:#fff; border:1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.05); overflow: hidden; }
.faq-item + .faq-item { margin-top: .75rem; }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-q { font-weight: 600; }
.faq-content { padding: 0 1.25rem 1rem 1.25rem; color:#4b5563; }
.faq-icon { width: 22px; height: 22px; flex: 0 0 auto; background: var(--color-primary); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M11 5h2v14h-2zM5 11h14v2H5z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M11 5h2v14h-2zM5 11h14v2H5z'/></svg>") no-repeat center / contain; transition: transform var(--duration-base) var(--ease-smooth), background var(--duration-base) var(--ease-smooth); }
.faq-item[open] { border-color: rgba(27,154,170,.35); box-shadow: 0 12px 30px rgba(27,154,170,.12); }
.faq-item[open] .faq-icon { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M5 11h14v2H5z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M5 11h14v2H5z'/></svg>") no-repeat center / contain; }

/* Blog post cards */
.post-card { background:#fff; border:1px solid #e5e7eb; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.post-card__media { position: relative; display:block; aspect-ratio: 16 / 9; background:#f3f4f6; }
.post-card__img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.post-card__body { padding: 1rem 1rem 1.25rem 1rem; }
.post-card__meta { color:#6b7280; font-size:.85rem; margin-bottom:.25rem; }
.post-card__title { font-size: 1.125rem; font-weight: 600; line-height:1.35; margin-bottom:.35rem; }
.post-card__title a { color: #0a0f14; text-decoration: none; }
.post-card__title a:hover { color: var(--color-primary); }
.post-card__desc { color:#4b5563; font-size:.95rem; }

/* Post cover image */
.post-cover { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 18px 40px rgba(0,0,0,.12); background:#f3f4f6; }
.post-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }

/* Featured pill overlay in blog hero */
.featured-hero-card { display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; border-radius:14px; color:#fff; text-decoration:none; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base) var(--ease-smooth); }
.featured-hero-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0,0,0,.35); }
.featured-hero-card__img { width:64px; height:64px; object-fit: cover; border-radius:10px; flex: 0 0 auto; }
.featured-hero-card__body { display:flex; flex-direction:column; line-height:1.2; }
.featured-hero-card__kicker { font-size:.75rem; opacity:.85; }
.featured-hero-card__title { font-weight:600; max-width:48ch; }
.featured-hero-card__cta { margin-left:auto; font-weight:600; opacity:.9; }
@media (max-width: 480px){ .featured-hero-card__img{ width:48px; height:48px; } }

/* Post next/prev nav */
.post-nav { display:flex; gap:1rem; justify-content:space-between; align-items:stretch; }
.post-nav__link { flex:1; display:flex; flex-direction:column; padding:1rem; border:1px solid #e5e7eb; border-radius:14px; text-decoration:none; color:#0a0f14; background:#fff; transition: box-shadow var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth); box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.post-nav__link:hover { box-shadow: 0 14px 32px rgba(0,0,0,.08); transform: translateY(-2px); }
.post-nav__kicker { font-size:.8rem; color:#6b7280; }
.post-nav__title { font-weight:600; margin-top:.2rem; }
.section-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: rgba(27,154,170,.8); font-weight: 600; }
.section-title { font-family: var(--font-display); font-weight: 100; letter-spacing: -.02em; }
.section-subtitle { color: #4b5563; }
.btn-primary { background: linear-gradient(135deg, rgba(27,154,170,.9), rgba(20,107,119,.95)); color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow: 0 8px 25px rgba(27,154,170,.25), inset 0 1px 0 rgba(255,255,255,.1); display:inline-block; padding:.9rem 1.5rem; border-radius: 9999px; font-weight: 600; transition: all var(--duration-base) var(--ease-smooth); }
.btn-primary:hover { background: linear-gradient(135deg, rgba(27,154,170,1), rgba(20,107,119,1)); transform: translateY(-2px); box-shadow: 0 18px 36px rgba(27,154,170,.35), inset 0 1px 0 rgba(255,255,255,.2); }
.content-html h1, .content-html h2, .content-html h3 { scroll-margin-top: 100px; }
/* Policy icons */
.icon-16, .icon-24 { display:inline-block; background-color: currentColor; flex: 0 0 auto; }
.icon-16 { width: 16px; height: 16px; }
.icon-24 { width: 24px; height: 24px; }
/* Footer action icon buttons */
.footer-actions .icon-btn { position:relative; width: 40px; height: 40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:0; background: transparent; color:#e5e7eb; transition: color 150ms ease; }
.footer-actions .icon-btn:hover { color:#fff; }
.footer-actions .icon-16 { width:22px; height:22px; display:inline-block; background: linear-gradient(135deg, rgba(27,154,170,.95), rgba(20,107,119,.95)); }
.footer-actions .icon-btn:hover .icon-16 { filter: brightness(1.1) contrast(1.05); }
/* Contact icons */
.icon-phone { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.26 11 11 0 0 0 3.4.54 1 1 0 0 1 1 1V21a1 1 0 0 1-1 1A19 19 0 0 1 3 6a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11 11 0 0 0 .54 3.4 1 1 0 0 1-.26 1L6.6 10.8z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.26 11 11 0 0 0 3.4.54 1 1 0 0 1 1 1V21a1 1 0 0 1-1 1A19 19 0 0 1 3 6a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11 11 0 0 0 .54 3.4 1 1 0 0 1-.26 1L6.6 10.8z'/></svg>") no-repeat center / contain; }
.icon-sms { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v10H7l-3 3V4zm2 4v2h12V8H6zm0 4v2h8v-2H6z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v10H7l-3 3V4zm2 4v2h12V8H6zm0 4v2h8v-2H6z'/></svg>") no-repeat center / contain; }
.icon-form { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3h12a1 1 0 0 1 1 1v16l-4-3H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm2 4h8v2H8V7zm0 4h8v2H8v-2z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3h12a1 1 0 0 1 1 1v16l-4-3H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm2 4h8v2H8V7zm0 4h8v2H8v-2z'/></svg>") no-repeat center / contain; }
.icon-map { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center / contain; }
.icon-shield { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l7 4v6c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-4z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l7 4v6c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-4z'/></svg>") no-repeat center / contain; }
.icon-cookie { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 9.54 12.8A3 3 0 0 1 18 12a3 3 0 0 1-3-3 3 3 0 0 1-3-3zM8 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm2 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 9.54 12.8A3 3 0 0 1 18 12a3 3 0 0 1-3-3 3 3 0 0 1-3-3zM8 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm2 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/></svg>") no-repeat center / contain; }
.icon-analytics { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13h3v7H4v-7zm5-6h3v13H9V7zm5 3h3v10h-3V10zM3 3h18v2H3V3z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13h3v7H4v-7zm5-6h3v13H9V7zm5 3h3v10h-3V10zM3 3h18v2H3V3z'/></svg>") no-repeat center / contain; }
.icon-mail { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16v12H4V6zm8 6L4 8v-.5l8 5 8-5V8l-8 4z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16v12H4V6zm8 6L4 8v-.5l8 5 8-5V8l-8 4z'/></svg>") no-repeat center / contain; }
.icon-consent { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l7 4v6c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-4zM9 12l2 2 4-4 1.5 1.5L11 16l-3.5-3.5L9 12z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l7 4v6c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-4zM9 12l2 2 4-4 1.5 1.5L11 16l-3.5-3.5L9 12z'/></svg>") no-repeat center / contain; }
.icon-processor { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zm0 2v12h10V6H7zm2 2h6v2H9V8zm0 4h6v2H9v-2z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zm0 2v12h10V6H7zm2 2h6v2H9V8zm0 4h6v2H9v-2z'/></svg>") no-repeat center / contain; }
.icon-lock { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/></svg>") no-repeat center / contain; }
.icon-time { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6l5 3 .9-1.5L13 12V7z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6l5 3 .9-1.5L13 12V7z'/></svg>") no-repeat center / contain; }
.icon-rights { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l7 4v6c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-4zM9 12l2 2 4-4 1.5 1.5L11 16l-3.5-3.5L9 12z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l7 4v6c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-4zM9 12l2 2 4-4 1.5 1.5L11 16l-3.5-3.5L9 12z'/></svg>") no-repeat center / contain; }
.icon-terms { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 3h10l3 3v15H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm9 2H7v14h12V8h-3V5zM9 9h8v2H9V9zm0 4h8v2H9v-2z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 3h10l3 3v15H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm9 2H7v14h12V8h-3V5zM9 9h8v2H9V9zm0 4h8v2H9v-2z'/></svg>") no-repeat center / contain; }
.icon-usage { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5h16v2H4V5zm0 6h10v2H4v-2zm0 6h16v2H4v-2z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5h16v2H4V5zm0 6h10v2H4v-2zm0 6h16v2H4v-2z'/></svg>") no-repeat center / contain; }
.icon-check { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/></svg>") no-repeat center / contain; }
.icon-ip { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 4h12v2H6V4zm0 14h12v2H6v-2zM4 8h2v8H4V8zm14 0h2v8h-2V8zM8 8h8v8H8V8z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 4h12v2H6V4zm0 14h12v2H6v-2zM4 8h2v8H4V8zm14 0h2v8h-2V8zM8 8h8v8H8V8z'/></svg>") no-repeat center / contain; }
.icon-liability { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v2h2V7zm0 4h-2v6h2v-6z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v2h2V7zm0 4h-2v6h2v-6z'/></svg>") no-repeat center / contain; }
.icon-contact { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 8V7l-3 2-5-4-5 4L3 7v1l10 7 8-7zM3 10l9 7 9-7v7H3v-7z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 8V7l-3 2-5-4-5 4L3 7v1l10 7 8-7zM3 10l9 7 9-7v7H3v-7z'/></svg>") no-repeat center / contain; }
.icon-link { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 13a5 5 0 0 1 0-7l2-2a5 5 0 0 1 7 7l-1 1-1.4-1.4 1-1a3 3 0 0 0-4.2-4.2l-2 2A3 3 0 0 0 10 11l1 1-1.4 1.4L8.6 12l1.4 1.4zM14 11a5 5 0 0 1 0 7l-2 2a5 5 0 0 1-7-7l1-1 1.4 1.4-1 1a3 3 0 0 0 4.2 4.2l2-2A3 3 0 0 0 14 13l-1-1 1.4-1.4L15.4 12 14 11z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 13a5 5 0 0 1 0-7l2-2a5 5 0 0 1 7 7l-1 1-1.4-1.4 1-1a3 3 0 0 0-4.2-4.2l-2 2A3 3 0 0 0 10 11l1 1-1.4 1.4L8.6 12l1.4 1.4zM14 11a5 5 0 0 1 0 7l-2 2a5 5 0 0 1-7-7l1-1 1.4 1.4-1 1a3 3 0 0 0 4.2 4.2l2-2A3 3 0 0 0 14 13l-1-1 1.4-1.4L15.4 12 14 11z'/></svg>") no-repeat center / contain; }
.icon-refresh { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 6V3l4 4-4 4V8a5 5 0 1 0 5 5h2a7 7 0 1 1-7-7z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 6V3l4 4-4 4V8a5 5 0 1 0 5 5h2a7 7 0 1 1-7-7z'/></svg>") no-repeat center / contain; }

/* Hero */
.simple-ocean-hero { position:relative; height:100vh; min-height:600px; display:flex; align-items:center; justify-content:center; background: radial-gradient(ellipse 120% 80% at 30% 20%, rgba(27,154,170,.15) 0%, transparent 50%), radial-gradient(ellipse 150% 100% at 50% 100%, rgba(0,30,60,.5) 0%, rgba(0,15,30,.9) 70%, #000814 100%); background-size:200% 200%, 100% 100%; background-attachment: fixed; animation:oceanFlow 20s ease-in-out infinite; will-change: background-position; contain: layout style paint; overflow:hidden; }
.simple-ocean-hero--half { height: 60vh; min-height: 480px; }
@media (max-width: 640px) {
  /* Avoid clipped hero on mobile: allow auto height with a safe minimum */
  .simple-ocean-hero--half { height: auto; min-height: 520px; }
}
.simple-ocean-hero::before { content:''; position:absolute; inset:0; background-image: radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 85% 15%, rgba(173,216,230,.8), transparent), radial-gradient(1.5px 1.5px at 25% 85%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 75% 75%, rgba(135,206,235,.6), transparent), radial-gradient(.5px .5px at 45% 35%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 65% 45%, rgba(176,224,230,.4), transparent); background-size: 500px 350px, 400px 300px, 600px 400px, 450px 320px, 350px 250px, 550px 380px; pointer-events:none; animation: luxuryTwinkle 12s ease-in-out infinite, stellarDrift 30s linear infinite; opacity:.5; z-index:5; }
.hero-content-wrapper::before { content:''; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:min(90vw, 900px); height:min(60vh, 520px); background: radial-gradient(ellipse at center, rgba(0,8,20,.55) 0%, rgba(0,8,20,.35) 45%, rgba(0,8,20,0) 75%); filter: blur(8px); z-index: 90; pointer-events: none; border-radius: 24px; }
.hero-brand { height:64px; width:auto; margin: 0 auto 1rem; display:inline-block; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); opacity:.95; }
.logo-particles-hero canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:10; display:block; }
.hero-content-wrapper { position:relative; z-index:100; text-align:center; color:#fff; max-width:1200px; padding:0 2rem; }
/* Push hero text down for Ehukai hero to reveal more of the wave */
[data-pattern="ehukai-hero"] .hero-content-wrapper { margin-top: 12vh; }
@media (max-width: 960px){ [data-pattern="ehukai-hero"] .hero-content-wrapper { margin-top: 8vh; } }
.hero-title { font-family: var(--font-display); font-weight:100; font-size: clamp(2.5rem, 6vw, 5.5rem); color:#fff; margin-bottom:2rem; letter-spacing:-.02em; line-height:1.1; text-shadow: 0 2px 4px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.3), 0 16px 32px rgba(0,0,0,.1); background: linear-gradient(135deg, #fff 0%, rgba(240,248,255,.95) 50%, #fff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation: subtleGlow 4s ease-in-out infinite alternate; }
.hero-subtitle { font-family: var(--font-stack); font-size: clamp(1.1rem, 2.5vw, 1.8rem); font-weight:300; color: rgba(173,216,230,.95); margin-bottom:4.236rem; letter-spacing:.02em; line-height:1.75; text-shadow: 0 2px 4px rgba(0,0,0,.4), 0 4px 8px rgba(0,0,0,.2); max-width:42rem; margin-left:auto; margin-right:auto; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-cta-primary, .hero-cta-secondary { font-family: var(--font-stack); padding:1.2rem 2.5rem; border-radius:50px; font-weight:500; font-size:1.1rem; text-decoration:none; transition: all var(--duration-base) var(--ease-smooth); display:inline-block; position:relative; overflow:hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width:150px; text-align:center; }
.hero-cta-primary { background: linear-gradient(135deg, rgba(27,154,170,.9), rgba(20,107,119,.95)); color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow: 0 8px 25px rgba(27,154,170,.25), inset 0 1px 0 rgba(255,255,255,.1); }
.hero-cta-primary:hover { background: linear-gradient(135deg, rgba(27,154,170,1), rgba(20,107,119,1)); transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 40px rgba(27,154,170,.4), inset 0 1px 0 rgba(255,255,255,.2); }
.hero-cta-secondary { background: rgba(255,255,255,.05); color: rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.2); box-shadow: 0 8px 25px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.1); }
.hero-cta-secondary:hover { background: rgba(255,255,255,.15); color:#fff; border-color: rgba(255,255,255,.4); transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 40px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.2); }

@keyframes oceanFlow { 0%{ background-position:0% 0%, 0% 0%; } 50%{ background-position:100% 50%, 0% 0%; } 100%{ background-position:200% 100%, 0% 0%; } }
@keyframes luxuryTwinkle { 0%{ opacity:.6; transform: scale(1);} 33%{ opacity:1; transform: scale(1.05);} 66%{ opacity:.7; transform: scale(.95);} 100%{ opacity:.6; transform: scale(1);} }
@keyframes stellarDrift { 0%{ background-position:0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } 100%{ background-position:-100% -100%, 100% 100%, -100% 100%, 100% -100%, -50% -50%, 50% 50%; } }

@media (max-width: 768px) { 
  .hero-title { font-size:2.5rem; }
  .hero-subtitle { font-size:1.25rem; }
  .hero-cta-primary, .hero-cta-secondary { width:250px; }
  .hero-brand { height:48px; }
}

/* Reduced motion: disable background animations */
@media (prefers-reduced-motion: reduce) {
  .simple-ocean-hero { animation: none; }
  .simple-ocean-hero::before { animation: none; }
}

/* Content defaults */
.content-html h1 { font-size: 2.5rem; font-weight:600; margin: 2rem 0 1rem; letter-spacing:-.01em; }
.content-html h2 { font-size: 2rem; font-weight:500; margin: 1.5rem 0 1rem; letter-spacing:-.005em; }
.content-html h3 { font-size: 1.5rem; font-weight:500; margin: 1rem 0 .5rem; }
.content-html a { color: var(--color-primary); text-decoration: none; }
.content-html a:hover { text-decoration: underline; }
.content-html a:visited { color: var(--color-primary); }
.content-html strong, .content-html em { color: inherit; }

/* About notes styling */
.about-notes h2 { font-family: var(--font-display); font-weight:100; letter-spacing:-.02em; }
.about-notes ul { list-style: none; padding-left: 0; }
.about-notes ul li { position: relative; padding-left: 1.5rem; margin: .5rem 0; }
.about-notes ul li::before { content:''; position:absolute; left:0; top:.4rem; width:1rem; height:1rem; background-color: var(--color-primary); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/></svg>") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/></svg>") no-repeat center / contain; }
/* Parallax band (Honolulu section) */
.parallax-band { position: relative; background-image: var(--parallax-bg); background-size: cover; background-position: center; background-attachment: fixed; isolation: isolate; }
.parallax-band::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(0,8,20,.55), rgba(0,8,20,.35)); }
.parallax-band > * { position: relative; z-index: 1; }
@media (max-width: 768px) { .parallax-band { background-attachment: scroll; } }
/* Background video layer for parallax bands */
.parallax-band.has-bg-video { background-image: none; }
.parallax-band .bg-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.parallax-band .bg-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(105%) contrast(102%); }
@media (prefers-reduced-motion: reduce) {
  .parallax-band .bg-video { display: none; }
}
.content-html p { margin:1rem 0; line-height:1.8; }
.content-html ul, .content-html ol { margin:1rem 0; padding-left:2rem; }
.content-html li { margin:.5rem 0; }
.content-html a { color: var(--color-primary); text-decoration: underline; }
.content-html strong { font-weight:700; }
.content-html .faq-item { margin: 1.5rem 0; padding:1.5rem; background:#f8f9fa; border-radius:8px; }

/* Voice UI */
.voice-fab {
  position: fixed;
  right: 1rem; bottom: 1rem;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(27,154,170,.95), rgba(20,107,119,1));
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 30px rgba(27,154,170,.35);
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
  z-index: 10000;
  transition: transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base) var(--ease-smooth);
}
.voice-fab::before {
  content: '';
  width: 24px; height: 24px; display:block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <rect x='3' y='8' width='2' height='8' rx='1'/>\
    <rect x='7' y='6' width='2' height='12' rx='1'/>\
    <rect x='11' y='4' width='2' height='16' rx='1'/>\
    <rect x='15' y='6' width='2' height='12' rx='1'/>\
    <rect x='19' y='8' width='2' height='8' rx='1'/>\
  </svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <rect x='3' y='8' width='2' height='8' rx='1'/>\
    <rect x='7' y='6' width='2' height='12' rx='1'/>\
    <rect x='11' y='4' width='2' height='16' rx='1'/>\
    <rect x='15' y='6' width='2' height='12' rx='1'/>\
    <rect x='19' y='8' width='2' height='8' rx='1'/>\
  </svg>") no-repeat center / contain;
}
.voice-fab span[aria-hidden] { display:inline-flex; align-items:center; justify-content:center; }
.voice-fab svg { width:24px; height:24px; display:block; }
.voice-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(27,154,170,.45); }
.voice-fab:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.voice-fab[aria-pressed="true"] { background: linear-gradient(135deg, rgba(220,38,38,1), rgba(239,68,68,1)); box-shadow: 0 10px 30px rgba(239,68,68,.35); }
/* Subtle listening pulse when recording */
.voice-fab::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
}
.voice-fab[aria-pressed="true"]::after {
  opacity: 1;
  animation: voicePulse 1.6s var(--ease-smooth) infinite;
}
@keyframes voicePulse {
  0%   { transform: scale(.9);  opacity: .6; }
  60%  { transform: scale(1.15); opacity: .15; }
  100% { transform: scale(1.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-fab[aria-pressed="true"]::after { animation: none; opacity: .25; }
}

.voice-overlay {
  position: fixed; inset: 0;
  background: rgba(0,8,20,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 10001;
}
.voice-overlay.active { display: flex; }
.voice-card {
  width: min(720px, 92vw);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%);
  box-shadow: 0 22px 48px rgba(9,19,30,.25);
  padding: 1.25rem;
  border: 1px solid rgba(12,18,24,.08);
}
.voice-row { display:flex; gap:.5rem; align-items:center; }
.voice-input { flex:1; padding:.9rem 1rem; border:1px solid #e5e7eb; border-radius: 12px; font-size: 1rem; }
.voice-btn { padding:.95rem 1.2rem; border-radius: 12px; background:#111827; color:#fff; border:1px solid rgba(0,0,0,.1); font-weight:600; }
.voice-btn.ghost { background: #fff; color:#111827; border:1px solid #e5e7eb; }
.voice-btn.speak { position: relative; display:inline-flex; align-items:center; gap:.5rem; }
.voice-btn.speak::before { content:''; width: 20px; height: 20px; display:inline-block; background-color: currentColor; vertical-align: middle; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 14a4 4 0 0 0 4-4V7a4 4 0 0 0-8 0v3a4 4 0 0 0 4 4zm-6-4a6 6 0 0 0 12 0h2a8 8 0 0 1-7 7.9V21h-2v-3.1A8 8 0 0 1 4 10h2z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 14a4 4 0 0 0 4-4V7a4 4 0 0 0-8 0v3a4 4 0 0 0 4 4zm-6-4a6 6 0 0 0 12 0h2a8 8 0 0 1-7 7.9V21h-2v-3.1A8 8 0 0 1 4 10h2z'/></svg>") no-repeat center / contain; }
.voice-btn.speak.listening { background: linear-gradient(135deg, rgba(27,154,170,.9), rgba(20,107,119,.95)); }
.voice-btn.speak.listening::before { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6h12v12H6z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6h12v12H6z'/></svg>") no-repeat center / contain; }
.icon { width: 1.25rem; height: 1.25rem; display:inline-block; vertical-align: middle; }
.icon-speaker { margin-right: .5rem; }
.voice-results { margin-top: .75rem; max-height: 260px; overflow:auto; }
.voice-result-item { padding:.75rem; border-radius:10px; border:1px solid #f3f4f6; display:block; text-decoration:none; color:#111827; }
.voice-result-item:hover { background:#f9fafb; }
.voice-btn.summarize { display:inline-flex; align-items:center; gap:.5rem; }
  .voice-btn.summarize::before { content:''; width: 22px; height: 22px; display:inline-block; background-color: currentColor; vertical-align: middle;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M4 10h3l4-3v10l-4-3H4z'/>\
  </svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M4 10h3l4-3v10l-4-3H4z'/>\
  </svg>") no-repeat center / contain; }
.voice-btn.summarize.stop::before { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6h12v12H6z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6h12v12H6z'/></svg>") no-repeat center / contain; }

/* Listening visualizer */
.voice-visualizer { display:none; height: 28px; align-items:flex-end; gap:4px; margin:.5rem 0 0; padding:0 .25rem; }
.voice-visualizer.active { display:flex; }
.voice-visualizer .bar { width:4px; height:8px; background: linear-gradient(135deg, rgba(27,154,170,.9), rgba(20,107,119,.95)); border-radius:2px; opacity:.9; animation: voiceBar 1.1s ease-in-out infinite; }
.voice-visualizer .bar:nth-child(2){ animation-delay:.1s }
.voice-visualizer .bar:nth-child(3){ animation-delay:.2s }
.voice-visualizer .bar:nth-child(4){ animation-delay:.3s }
.voice-visualizer .bar:nth-child(5){ animation-delay:.4s }
.voice-visualizer .bar:nth-child(6){ animation-delay:.5s }
.voice-visualizer .bar:nth-child(7){ animation-delay:.6s }
@keyframes voiceBar {
  0% { transform: scaleY(.4) }
  50% { transform: scaleY(1.3) }
  100% { transform: scaleY(.4) }
}
/* Mobile layout: make summary button full-width and obvious */
@media (max-width: 480px){
  .voice-row { gap:.6rem; }
  .voice-input { flex-basis: 100%; }
  .voice-btn.summarize { flex-basis: 100%; justify-content: center; font-size: 1.05rem; }
  .voice-btn { padding: 1rem 1.2rem; }
}

/* AI Orb (About image) */
.ai-orb {
  position: relative;
  display: grid; place-items: center;
  width: min(520px, 90vw);
  aspect-ratio: 1/1;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: radial-gradient(120% 120% at 10% 10%, rgba(27,154,170,.12), rgba(255,255,255,0) 60%),
              radial-gradient(120% 120% at 90% 90%, rgba(81,196,211,.12), rgba(255,255,255,0) 60%);
  box-shadow: 0 12px 40px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
}
.ambient-dots::after {
  /* reuse ::after? move to ::before 2? We'll add an inner layer using a child pseudo via background */
}
.ambient-dots {
  background-image:
    radial-gradient(12px 12px at 20% 30%, rgba(27,154,170,.08) 0 40%, transparent 41%),
    radial-gradient(10px 10px at 70% 60%, rgba(81,196,211,.08) 0 40%, transparent 41%),
    radial-gradient(8px 8px at 40% 80%, rgba(20,107,119,.08) 0 40%, transparent 41%),
    radial-gradient(120% 120% at 10% 10%, rgba(27,154,170,.12), rgba(255,255,255,0) 60%),
    radial-gradient(120% 120% at 90% 90%, rgba(81,196,211,.12), rgba(255,255,255,0) 60%);
  background-size: auto, auto, auto, cover, cover;
  animation: ambientDrift 18s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0 0, 0 0; }
  100% { background-position: 12px -18px, -16px 8px, 10px 16px, 0 0, 0 0; }
}
.ai-orb::before {
  content: '';
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, rgba(27,154,170,.0), rgba(27,154,170,.35), rgba(81,196,211,.0) 40%, rgba(20,107,119,.35) 70%, rgba(27,154,170,.0));
  filter: blur(18px);
  transform: rotate(0deg);
  opacity: 0;
}
.ai-orb::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(27,154,170,.35), rgba(81,196,211,.15));
  mask: radial-gradient(circle at center, transparent 64%, black 65%);
  -webkit-mask: radial-gradient(circle at center, transparent 64%, black 65%);
  opacity: .25;
}
.ai-orb__img {
  width: 76%; height: 76%; object-fit: cover; border-radius: 18px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
  transform: translateZ(0);
}
.ai-orb.active::before { opacity: 1; animation: aiOrbSpin 8s linear infinite; }
.ai-orb:hover .ai-orb__img { transform: scale(1.02); transition: transform .5s var(--ease-smooth); }
@keyframes aiOrbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ai-orb.active::before { animation: none; opacity: .35; }
  .ambient-dots { animation: none; }
}

/* Simple parallax helper */
[data-parallax] { will-change: transform; }

/* Logo Neo (animated logo ring) */
.logo-neo { position: relative; width: 14rem; height: 14rem; border-radius: 50%; display:grid; place-items:center; }
.logo-neo__img { width: 72%; height:72%; object-fit: contain; z-index:2; filter: drop-shadow(0 8px 24px rgba(0,0,0,.25)); }
.logo-neo::before { content:''; position:absolute; inset:-8px; border-radius:50%; background:
  conic-gradient(from 0deg, rgba(27,154,170,.08), rgba(27,154,170,.2), rgba(81,196,211,.08) 40%, rgba(20,107,119,.2) 70%, rgba(27,154,170,.08));
  filter: blur(10px); opacity:.45; /* no animation for static look */
}
.logo-neo__ring { position:absolute; inset:-3px; border-radius:50%; background:
  radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%);
  mix-blend-mode: screen; opacity:.45; z-index:1; pointer-events:none;
}
@keyframes logoSpin { from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .logo-neo::before{ animation:none; opacity:.35; } }
/* Explicit static variant (no decoration/animation) */
.logo-neo--static::before { display:none; }
.logo-neo--static .logo-neo__ring { display:none; }

/* Video Modal + Play Button */
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 12px 30px rgba(27,154,170,.35);
  border: 0;
  cursor: pointer;
  z-index: 2;
}
.video-play-btn::before,
.video-play-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: .6;
  z-index: -1;
  animation: videoRipple 2s infinite ease-in-out;
}
.video-play-btn::after { opacity: .35; animation-delay: .5s; }
.video-play-btn span::before {
  content: '';
  display:block; width: 0; height: 0;
  border-left: 18px solid currentColor; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  margin-left: 4px;
}
@keyframes videoRipple {
  0% { transform: scale(1); opacity: .6; }
  60% { transform: scale(1.6); opacity: .15; }
  100% { transform: scale(1.8); opacity: 0; }
}

.video-modal { position: fixed; inset: 0; display:none; align-items:center; justify-content:center; background: rgba(10,15,20,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index:10000; }

/* Ehukai hero: make particles fill entire hero and center the image */
header[data-pattern="ehukai-hero"] { position: relative; overflow: hidden; }
header[data-pattern="ehukai-hero"] #page-header-bg { position: absolute; inset: 0; height: 100%; width: 100%; }
header[data-pattern="ehukai-hero"] .ehukai-particles { position: absolute; inset: 0; height: 100%; width: 100%; }
header[data-pattern="ehukai-hero"] .canvas-bg { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 0; }
header[data-pattern="ehukai-hero"] canvas#canvas { position: absolute; inset: 0; height: 100% !important; width: 100% !important; display: block; }
.video-modal.active { display:flex; }
.video-modal__backdrop { position:absolute; inset:0; }
.video-modal__dialog { position: relative; width: min(960px, 92vw); background: #000; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.4); overflow:hidden; }
.video-modal__frame { position: relative; padding-top: 56.25%; }
.video-modal__frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal__close { position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35); cursor:pointer; font-size: 24px; line-height: 1; display:flex; align-items:center; justify-content:center; }
.video-modal__close:hover { background: rgba(255,255,255,.3); }