/* ==========================================================================
   Oceanic Exports — Motion & Signature-Interaction Layer
   Loaded after style.css. Adds: preloader, custom cursor, magnetic buttons,
   grain texture, marquees, pinned/horizontal scroll sections, the services
   hover-list, floating-label form, ambient gradient blobs, tilt cards and
   the cross-page curtain transition.
   ========================================================================== */

/* Defensive copy of style.css's palette variables. Everything below reads
   colors via var(--white), var(--surface-dark), etc. — if style.css were
   ever to fail to load while this file loads (a partial extraction, a
   file blocked/renamed, a broken relative path) those vars would be
   undefined and text would render invisible (e.g. white-on-navy copy
   falling back to black-on-navy). Redeclaring the same values here means
   this stylesheet never depends on the other one having loaded. */
:root{
  --ocean-deepest:#06263B; --ocean-deep:#0B4C74; --ocean:#0F5A85; --ocean-mid:#1B7FB3;
  --sky:#3AA9D6; --sky-bright:#47B5E6; --sky-tint:#BFE4F4; --sky-pale:#EAF6FC;
  --white:#FFFFFF; --gold:#F2A541; --gold-deep:#C97A2B;
  --text-heading:#082238; --text-body:#3E5C72; --text-muted:#6C889A;
  --text-on-dark:#FFFFFF; --text-on-dark-secondary:#C7E4F2; --text-link:#0F5A85; --text-accent:#B96A1F;
  --surface-white:#FFFFFF; --surface-tint:#F3FAFD; --surface-dark:#06263B; --surface-dark-2:#0B3A57;
  --radius-sm:8px; --radius-md:14px; --radius-lg:24px;
  --shadow-sm:0 2px 10px rgba(6,38,59,0.08); --shadow-md:0 12px 30px rgba(6,38,59,0.12); --shadow-lg:0 24px 60px rgba(6,38,59,0.18);
  --container:1180px;
  --font-heading:'Poppins', 'Segoe UI', Arial, sans-serif; --font-body:'Inter', 'Segoe UI', Arial, sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

html{ background:var(--surface-dark); }

/* ---------------------------------------------------------------------
   Preloader — 100% CSS-driven, zero JavaScript involved in showing OR
   hiding it. A single keyframe animation with a fixed, deterministic
   lifecycle: hold visible, then fade out and disable itself. This can
   never get stuck: it does not wait for any script, library, or CDN to
   load or run — it plays and finishes purely because the browser applied
   the stylesheet, exactly the same as any other CSS animation.
   --------------------------------------------------------------------- */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--surface-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  animation: preloader-lifecycle 1.9s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes preloader-lifecycle{
  0%{ opacity:1; visibility:visible; }
  78%{ opacity:1; visibility:visible; }
  100%{ opacity:0; visibility:hidden; pointer-events:none; }
}
#preloader .pl-mark{
  width:54px; height:54px;
  animation: pl-fade-in .5s ease .1s both;
}
#preloader .pl-word{
  font-family:var(--font-heading); font-weight:700; letter-spacing:.06em;
  color:var(--white); font-size:1.05rem; overflow:hidden;
  animation: pl-fade-in .5s ease .2s both;
}
#preloader .pl-bar{
  width:180px; height:2px; background:rgba(255,255,255,0.12); overflow:hidden; border-radius:2px;
}
#preloader .pl-bar-fill{
  height:100%; background:var(--gold);
  animation: pl-bar-fill 1.4s cubic-bezier(.4,0,.2,1) .25s both;
}
@keyframes pl-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pl-bar-fill{ from{ width:0%; } to{ width:100%; } }

/* ---------------------------------------------------------------------
   Grain texture overlay
   --------------------------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}

/* ---------------------------------------------------------------------
   Magnetic buttons
   --------------------------------------------------------------------- */
.magnetic{ position:relative; display:inline-flex; }

/* ---------------------------------------------------------------------
   Split-text reveal helpers (GSAP SplitText targets .split-lines/.split-words)
   --------------------------------------------------------------------- */
.split-target{ overflow:hidden; }
.split-target .split-line{ overflow:hidden; }

/* ---------------------------------------------------------------------
   Hero heading — pure CSS fade-up, deliberately with no JavaScript or
   GSAP/SplitText involved. This is the single most important line of
   text on every page, so it cannot be allowed to depend on a plugin or
   a CDN successfully loading. Plays once on page load, always ends
   fully visible, and needs nothing else to run.
   --------------------------------------------------------------------- */
[data-split="hero"]{
  animation: hero-fade-up 1s cubic-bezier(.22,1,.36,1) .15s both;
}
@keyframes hero-fade-up{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------------
   Marquee (infinite scrolling strip)
   --------------------------------------------------------------------- */
.marquee{ overflow:hidden; position:relative; }
.marquee-track{ display:flex; width:max-content; gap:56px; align-items:center; animation:marquee-scroll 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track span{ font-family:var(--font-heading); font-weight:700; letter-spacing:.04em; color:var(--text-muted); font-size:1rem; white-space:nowrap; }
.marquee-track.pills{ gap:18px; }
.marquee-track.pills .badge-pill{ white-space:nowrap; }
.marquee-track.cards{ gap:26px; }
.marquee-fade::before, .marquee-fade::after{
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.marquee-fade::before{ left:0; background:linear-gradient(90deg, var(--surface-white), transparent); }
.marquee-fade::after{ right:0; background:linear-gradient(-90deg, var(--surface-white), transparent); }
.section-alt .marquee-fade::before{ background:linear-gradient(90deg, var(--surface-tint), transparent); }
.section-alt .marquee-fade::after{ background:linear-gradient(-90deg, var(--surface-tint), transparent); }
.section-dark .marquee-fade::before{ background:linear-gradient(90deg, var(--surface-dark), transparent); }
.section-dark .marquee-fade::after{ background:linear-gradient(-90deg, var(--surface-dark), transparent); }

/* ---------------------------------------------------------------------
   Video hero (Home)
   --------------------------------------------------------------------- */
.video-hero{
  position:relative; min-height:max(100vh,640px);
  overflow:hidden; color:var(--white);
  display:flex; align-items:flex-end;
  /* padding-top reserves clearance for the transparent fixed header (which
     takes no space in normal flow) so hero copy can never render underneath
     it. min-height (not a fixed height) lets the section grow taller than
     100vh on short/wide viewports (common laptop screens) instead of
     letting align-items:flex-end push content up past the header. */
  padding-top:146px;
  box-sizing:border-box;
}
@media (max-width:920px){ .video-hero{ padding-top:132px; } }
@media (max-width:768px){ .video-hero{ padding-top:172px; } }
@media (max-width:480px){ .video-hero{ padding-top:240px; } }
.video-hero video, .video-hero .hero-poster-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.video-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,38,59,0.55) 0%, rgba(6,38,59,0.35) 35%, rgba(6,38,59,0.75) 78%, rgba(6,38,59,0.94) 100%);
}
.video-hero .container{ position:relative; z-index:2; width:100%; padding-bottom:64px; }
.video-hero .eyebrow{ background:rgba(255,255,255,0.14); backdrop-filter:blur(6px); }
.video-hero h1{
  color:var(--white); font-size:clamp(2.6rem,7vw,5.2rem); font-weight:700; letter-spacing:-0.02em;
  max-width:16ch; margin-bottom:.35em;
}
.video-hero .lead{ color:var(--text-on-dark-secondary); max-width:48ch; font-size:1.14rem; }
.video-hero .hero-actions{ margin-top:34px; }

.scroll-cue{
  position:absolute; left:50%; bottom:28px; z-index:2; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--text-on-dark-secondary); font-family:var(--font-heading); font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:38px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--white);
  animation:scroll-cue-drip 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-drip{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

.hero-live-badge{
  position:absolute; top:118px; right:24px; z-index:2;
  background:rgba(6,38,59,0.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.18); border-radius:16px;
  padding:14px 18px; color:var(--white); text-align:right; display:none;
}
.hero-live-badge strong{ display:block; font-family:var(--font-heading); font-size:1.2rem; }
.hero-live-badge span{ font-size:.72rem; color:var(--text-on-dark-secondary); letter-spacing:.06em; text-transform:uppercase; }
@media (min-width:860px){ .hero-live-badge{ display:block; } }

/* ---------------------------------------------------------------------
   Bento services grid (Home)
   --------------------------------------------------------------------- */
.bento{
  display:grid; gap:20px;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:150px;
}
.bento-item{
  grid-column:span 3; grid-row:span 2;
  position:relative; border-radius:var(--radius-md); padding:30px;
  background:var(--white); border:1px solid rgba(11,76,116,0.06); box-shadow:var(--shadow-sm);
  overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  transition:box-shadow .3s ease;
}
.bento-item:hover{ box-shadow:var(--shadow-md); }
.bento-item.wide{ grid-column:span 4; }
.bento-item.narrow{ grid-column:span 2; }
.bento-item.tall{ grid-row:span 3; }
.bento-item.dark{ background:linear-gradient(150deg, var(--ocean-deep), var(--surface-dark)); color:var(--white); border-color:transparent; }
.bento-item.dark h3, .bento-item.dark .link{ color:var(--white); }
.bento-item.dark p{ color:var(--text-on-dark-secondary); }
.bento-item .bento-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--sky-pale); color:var(--ocean-deep); margin-bottom:16px; flex:none;
}
.bento-item.dark .bento-icon{ background:rgba(255,255,255,0.12); color:var(--gold); }
.bento-item .bento-bg{
  position:absolute; right:-30px; top:-30px; width:160px; height:160px; opacity:.08;
}
.bento-item h3{ margin-bottom:.3em; font-size:1.15rem; }
.bento-item p{ font-size:.92rem; margin-bottom:.6em; }
@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .bento-item, .bento-item.wide, .bento-item.narrow, .bento-item.tall{ grid-column:span 2; grid-row:auto; }
}

/* ---------------------------------------------------------------------
   Pinned numbers band (Home)
   --------------------------------------------------------------------- */
.pin-stats{
  position:relative; background:var(--surface-dark); color:var(--white);
  display:flex; align-items:center; min-height:100vh; overflow:hidden;
}
.pin-stats::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 30%, rgba(27,127,179,0.35), transparent 55%),
             radial-gradient(circle at 80% 70%, rgba(242,165,65,0.18), transparent 50%);
}
.pin-stats .container{ position:relative; z-index:2; }

/* ---------------------------------------------------------------------
   Canvas particle / glow network background
   Injected by initParticles() as the first child of any [data-particles]
   host. Sits above a section's own ::before gradient (z-index 0-1) and
   below its .container content (z-index 2) — see .pin-stats/.section-dark.
   --------------------------------------------------------------------- */
.particle-field{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.9;
}
.pin-stats .grid-4 .stat-card{
  background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1);
  backdrop-filter:blur(6px);
}
.pin-stats .stat-card strong{ color:var(--white); font-size:3rem; }
.pin-stats .stat-card > span{ color:var(--text-on-dark-secondary); }

/* ---------------------------------------------------------------------
   Pinned horizontal-scroll strip (Home process / About timeline)
   --------------------------------------------------------------------- */
.h-scroll-section{ position:relative; overflow:hidden; }
.h-scroll-track{
  display:flex; gap:0; will-change:transform;
}
.h-scroll-panel{
  flex:0 0 auto; width:min(88vw,560px); padding:0 40px;
  display:flex; flex-direction:column; justify-content:center;
}
.h-scroll-panel .process-num{ margin:0 0 20px; }
.h-scroll-rail{
  position:absolute; left:0; right:0; top:50%; height:2px; background:rgba(255,255,255,0.12); z-index:0;
}
/* Default / fallback: a natively swipeable horizontal strip. JS upgrades
   this to a pinned, scroll-driven track when GSAP+ScrollTrigger are
   available and the viewport is wide enough (see initHorizontalPin). */
.h-scroll-section.js-fallback-scroll,
.h-scroll-section:not(.js-pinned){
  height:auto;
}
.h-scroll-section:not(.js-pinned) .h-scroll-track{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; padding-bottom:12px;
}
.h-scroll-section:not(.js-pinned) .h-scroll-panel{ scroll-snap-align:start; }
.h-scroll-section.js-pinned{ height:100vh; display:flex; align-items:center; }
.h-scroll-section.js-pinned .h-scroll-track{ flex-wrap:nowrap; }
/* On small screens, swap the swipeable horizontal strip for a plain
   vertical stack — a hidden-until-you-swipe carousel is easy to miss
   entirely on a phone, and every other multi-item section on the site
   already stacks in a single column at this width. */
@media (max-width:720px){
  .h-scroll-section:not(.js-pinned) .h-scroll-track{
    flex-direction:column; overflow:visible; scroll-snap-type:none; padding-bottom:0; gap:32px;
  }
  .h-scroll-section:not(.js-pinned) .h-scroll-panel{
    width:100%; padding:0; scroll-snap-align:none;
  }
}

/* ---------------------------------------------------------------------
   World network draw-in (SVG paths animated via stroke-dashoffset)
   --------------------------------------------------------------------- */
.route-path{ stroke-dasharray:1 7; }
.route-path.draw{ stroke-dasharray:1000; stroke-dashoffset:1000; }
.hub-dot{ transform-origin:center; }
.hub-ring{
  transform-origin:center;
  animation:hub-ring-pulse 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
.route-draw .hub-ring:nth-of-type(4n+2){ animation-delay:.6s; }
.route-draw .hub-ring:nth-of-type(4n+3){ animation-delay:1.2s; }
@keyframes hub-ring-pulse{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.9); opacity:0; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ---------------------------------------------------------------------
   Testimonial marquee (Home)
   --------------------------------------------------------------------- */
.testi-track{ display:flex; gap:24px; width:max-content; animation:marquee-scroll 40s linear infinite; }
.testi-track:hover{ animation-play-state:paused; }
.testi-track .testimonial-card{ width:360px; flex:0 0 auto; }

/* ---------------------------------------------------------------------
   About — split hero image reveal
   --------------------------------------------------------------------- */
.reveal-clip{ clip-path:inset(0 0 0 100%); }
.reveal-clip.clip-in{ clip-path:inset(0 0 0 0%); transition:clip-path 1.1s cubic-bezier(.65,0,.15,1); }

.sticky-col{ position:sticky; top:110px; align-self:start; }

.diag-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.diag-cards .value-card:nth-child(2){ transform:translateY(34px); }
.diag-cards .value-card:nth-child(3){ transform:translateY(-10px); }
@media (max-width:900px){ .diag-cards{ grid-template-columns:1fr; } .diag-cards .value-card{ transform:none !important; } }

.tilt-card{ transform-style:preserve-3d; will-change:transform; }
.tilt-card .team-photo{ transform:translateZ(30px); }

/* ---------------------------------------------------------------------
   Services — interactive hover list
   --------------------------------------------------------------------- */
.service-list{ border-top:1px solid rgba(11,76,116,0.12); }
.service-row{
  display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:24px;
  padding:30px 8px; border-bottom:1px solid rgba(11,76,116,0.12);
  cursor:pointer; position:relative; transition:padding-left .3s ease;
}
.service-row:hover, .service-row.active{ padding-left:20px; }
.service-row:hover .service-row-title, .service-row.active .service-row-title{ color:var(--ocean-deep); }
.service-row-index{ font-family:var(--font-heading); font-weight:600; color:var(--text-muted); font-size:.95rem; }
.service-row-title{ font-family:var(--font-heading); font-weight:700; font-size:clamp(1.3rem,3vw,2rem); color:var(--text-heading); transition:color .3s ease; }
.service-row-desc{ font-size:.9rem; color:var(--text-muted); max-width:52ch; margin-top:6px; display:none; }
.service-row.active .service-row-desc{ display:block; }
.service-row-arrow{ width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(11,76,116,0.2); display:flex; align-items:center; justify-content:center; color:var(--ocean-deep); transition:transform .3s ease, background .3s ease, border-color .3s ease; flex:none; }
.service-row-arrow .icon{ width:18px; height:18px; }
.service-row:hover .service-row-arrow, .service-row.active .service-row-arrow{ background:var(--ocean-deep); border-color:var(--ocean-deep); color:var(--white); transform:rotate(45deg); }

.service-preview{
  position:sticky; top:110px; align-self:start;
  border-radius:var(--radius-lg); overflow:hidden; height:460px;
  background:linear-gradient(150deg, var(--ocean-deep), var(--surface-dark));
  display:flex; align-items:center; justify-content:center; color:var(--white);
  box-shadow:var(--shadow-lg);
}
.service-preview .preview-icon{ width:120px; height:120px; opacity:.9; transition:opacity .3s ease, transform .4s ease; }
.service-preview .preview-icon .icon{ width:100%; height:100%; stroke-width:1.2; color:var(--gold); }
.service-preview .preview-label{
  position:absolute; bottom:28px; left:28px; right:28px;
  font-family:var(--font-heading); font-weight:700; font-size:1.2rem;
}
@media (max-width:900px){ .service-preview{ display:none; } }

/* ---------------------------------------------------------------------
   Services — stacked number hero list
   --------------------------------------------------------------------- */
.stack-hero-list{ margin-top:36px; }
.stack-hero-list li{
  font-family:var(--font-heading); font-weight:700; font-size:clamp(1.4rem,4vw,2.6rem);
  color:rgba(255,255,255,0.35); padding:6px 0; transition:color .3s ease;
}
.stack-hero-list li:hover, .stack-hero-list li.active{ color:var(--white); }
.stack-hero-list li span{ color:var(--gold); font-size:.55em; margin-right:14px; }

/* ---------------------------------------------------------------------
   FAQ (GSAP-driven custom accordion, replacing <details>)
   --------------------------------------------------------------------- */
.faq-item{ border:1px solid rgba(11,76,116,0.1); border-radius:var(--radius-sm); margin-bottom:14px; background:var(--white); overflow:hidden; }
.faq-q{
  cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-heading); font-weight:600; color:var(--text-heading);
}
.faq-q .icon-chevron{ width:18px; height:18px; color:var(--ocean-deep); transition:transform .3s ease; flex:none; }
.faq-item.open .icon-chevron{ transform:rotate(180deg); }
.faq-a{ height:0; overflow:hidden; }
.faq-a-inner{ padding:0 22px 20px; color:var(--text-body); font-size:.95rem; }

/* ---------------------------------------------------------------------
   Contact — ambient gradient hero + floating labels
   --------------------------------------------------------------------- */
.ambient-hero{ position:relative; overflow:hidden; }
.ambient-blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; z-index:0;
  animation:blob-float 16s ease-in-out infinite;
}
.ambient-blob.b1{ width:420px; height:420px; background:var(--ocean-mid); top:-120px; left:-80px; }
.ambient-blob.b2{ width:360px; height:360px; background:var(--gold); bottom:-140px; right:-60px; animation-delay:-6s; }
.ambient-blob.b3{ width:280px; height:280px; background:var(--sky-bright); top:40%; left:55%; animation-delay:-11s; }
@keyframes blob-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.08); }
  66%{ transform:translate(-30px,20px) scale(0.95); }
}
.ambient-hero .container{ position:relative; z-index:2; }

.field-float{ position:relative; }
.field-float input, .field-float select, .field-float textarea{ padding-top:30px; padding-bottom:10px; }
.field-float label{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-size:.98rem; line-height:1.2; color:var(--text-muted); font-weight:500; font-family:var(--font-body);
  pointer-events:none; transition:transform .2s ease, font-size .2s ease, top .2s ease, color .2s ease;
  background:transparent;
}
.field-float textarea ~ label{ top:27px; transform:none; }
.field-float input:focus ~ label,
.field-float input:not(:placeholder-shown) ~ label,
.field-float select ~ label,
.field-float textarea:focus ~ label,
.field-float textarea:not(:placeholder-shown) ~ label{
  top:11px; transform:translateY(0); line-height:1; font-size:.68rem; font-weight:600; color:var(--ocean-deep); font-family:var(--font-heading); letter-spacing:.04em; text-transform:uppercase;
}
.field-float select ~ label{ top:11px; transform:translateY(0); line-height:1; font-size:.68rem; font-weight:600; color:var(--ocean-deep); font-family:var(--font-heading); letter-spacing:.04em; text-transform:uppercase; }

/* ---------------------------------------------------------------------
   Generic reveal utility (fallback / non-GSAP elements)
   --------------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(28px);
  /* Same pure-CSS failsafe as the preloader: guarantees content is never
     permanently invisible if main.js fails to load or run for any reason. */
  animation: reveal-failsafe .3s linear 4.5s forwards;
}
.reveal.in{ opacity:1; transform:translateY(0); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
@keyframes reveal-failsafe{ to{ opacity:1; transform:none; } }
[data-animate]{ opacity:0; }
[data-animate].gsap-ready{ opacity:1; }
.reveal-clip{ animation: reveal-clip-failsafe .3s linear 4.5s forwards; }
@keyframes reveal-clip-failsafe{ to{ clip-path:inset(0 0 0 0%); } }

/* Header state over dark video hero */
.site-header.transparent{
  position:fixed; top:0; left:0; right:0;
  background:transparent; border-bottom-color:transparent; backdrop-filter:none;
}
.site-header.transparent .topbar{ background:transparent; border-bottom:1px solid rgba(255,255,255,0.15); }
.site-header.transparent .nav-links a, .site-header.transparent .brand-name{ color:var(--white); }
.site-header.transparent .brand-tag{ color:var(--gold); }
.site-header.transparent .nav-links a:hover{ background:rgba(255,255,255,0.12); color:var(--white); }
.site-header.transparent .nav-links a.active{ background:rgba(255,255,255,0.16); }
.site-header.transparent .nav-toggle{ color:var(--white); }
.site-header.scrolled{
  background:rgba(255,255,255,0.95);
  box-shadow:0 8px 24px rgba(6,38,59,0.10);
}
.site-header.transparent.scrolled .topbar{ background:var(--ocean-deepest); border-bottom-color:transparent; }
.site-header.scrolled .nav-links a, .site-header.scrolled .brand-name{ color:var(--text-heading); }
.site-header.scrolled .nav-links a:hover{ background:var(--sky-pale); color:var(--ocean-deep); }
.site-header.scrolled .nav-links a.active{ background:var(--ocean-deep); color:var(--white); }
.site-header.scrolled .nav-toggle{ color:var(--text-heading); }
@media (max-width:920px){
  .site-header.transparent .nav-links{ background:var(--white); }
  .site-header.transparent .nav-links a{ color:var(--text-heading); }
  .site-header.transparent .nav-links a.active{ background:var(--ocean-deep); color:var(--white); }
}

.breadcrumb.on-light{ color:var(--text-muted); }
.breadcrumb.on-light a{ color:var(--text-muted); }
.breadcrumb.on-light a:hover{ color:var(--ocean-deep); }

.ambient-hero{ background:var(--surface-white); padding:150px 0 90px; }

/* ---------------------------------------------------------------------
   Split-grid: the shared two-column layout used across hero/story/form
   sections. Ratio, gap and alignment are set per-instance via CSS custom
   properties on the element (--split / --split-gap / --split-align) so the
   actual grid-template-columns declaration always lives here — meaning the
   mobile override below can collapse it to one column reliably, which a
   plain inline `style="grid-template-columns:..."` can never be overridden
   by an external stylesheet without !important fights.
   --------------------------------------------------------------------- */
.split-grid{
  display:grid;
  grid-template-columns:var(--split, 1fr 1fr);
  gap:var(--split-gap, 48px);
  align-items:var(--split-align, center);
}
/* Grid items default to min-width:auto (their content's min-content size),
   so any oversized descendant (e.g. an un-widthed <select>, long unwrapped
   text) can force a track wider than the viewport. min-width:0 lets tracks
   actually shrink to the available space instead. */
.split-grid > *{ min-width:0; }
@media (max-width:900px){
  .split-grid{ grid-template-columns:1fr !important; gap:32px !important; }
}