/* ============================================================
   MARUVIA GLOBAL TRADERS — CORE STYLESHEET
   Design tokens, base resets, typography, layout, components,
   cinematic scroll animation classes, and full responsive rules.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- Design Tokens ---------- */
/* Default = DARK THEME (black). Overridden by [data-theme="light"] below. */
:root{
  --navy-deep:#0C0C0C;        /* secondary surface (cards, alt sections) */
  --royal-blue:#111214;       /* tertiary surface */
  --teal:#147D8A;
  --bright-teal:#21A6B5;
  --white:#FFFFFF;            /* primary text / foreground */
  --light-gray:#F4F7F9;
  --dark-bg:#000000;          /* primary page surface */

  --ink-70: rgba(255,255,255,.72);
  --ink-50: rgba(255,255,255,.5);
  --line: rgba(255,255,255,.14);

  --scrim-strong: rgba(0,0,0,.6);
  --scrim-soft: rgba(0,0,0,.4);

  /* Constants — always white, regardless of active theme. Used only for text/UI
     sitting directly on top of photographic images with a dark scrim, so it
     stays legible whether the rest of the site is in dark or light mode. */
  --on-photo: #FFFFFF;
  --on-photo-80: rgba(255,255,255,.85);
  --on-photo-70: rgba(255,255,255,.72);
  --on-photo-50: rgba(255,255,255,.55);
  --ink-on-accent: #071B38; /* always-dark text used on top of the bright-teal accent color */

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;

  --container: 1280px;
  --gutter: clamp(24px, 5vw, 72px);

  --ease: cubic-bezier(.16,.84,.28,1);
  --dur-s: .35s;
  --dur-m: .7s;
  --dur-l: 1.2s;

  --radius-s: 4px;
  --radius-m: 10px;
}

/* ---------- LIGHT THEME OVERRIDE ---------- */
html[data-theme="light"]{
  --navy-deep:#F4F7F9;
  --royal-blue:#EAEFF2;
  --white:#0B0E14;            /* primary text becomes near-black */
  --dark-bg:#FFFFFF;          /* primary page surface becomes white */

  --ink-70: rgba(11,14,20,.68);
  --ink-50: rgba(11,14,20,.48);
  --line: rgba(11,14,20,.12);
}
html[data-theme="light"] body{ background:var(--dark-bg); color:var(--white); }
:root{ --nav-solid-bg: rgba(0,0,0,.82); }
html[data-theme="light"]{ --nav-solid-bg: rgba(255,255,255,.86); }
html{ transition:background-color .4s var(--ease); }
body{ transition:background-color .4s var(--ease), color .4s var(--ease); }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--dark-bg);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.08;
}

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

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

/* ---------- Loading Screen ---------- */
#loading-screen{
  position:fixed; inset:0; z-index:9999;
  background:var(--dark-bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#loading-screen.loaded{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  font-family:var(--font-display); font-size:14px; letter-spacing:.35em;
  color:var(--bright-teal); margin-bottom:22px;
}
.loader-bar{ width:220px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.loader-bar::after{
  content:''; position:absolute; left:0; top:0; height:100%; width:40%;
  background:var(--bright-teal); animation:loaderMove 1.1s ease-in-out infinite;
}
@keyframes loaderMove{
  0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); }
}

/* ---------- Scroll progress bar ---------- */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--teal),var(--bright-teal));
  z-index:1100; transition:width .1s linear;
}

/* ---------- Navigation ---------- */
.site-nav{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--gutter);
  background:transparent;
  transition:background var(--dur-m) var(--ease), padding var(--dur-m) var(--ease), backdrop-filter var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.site-nav.solid{
  background:var(--nav-solid-bg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  padding:16px var(--gutter);
  box-shadow:0 1px 0 var(--line);
}
/* Once the nav has a solid surface, switch its text to theme-aware colors
   instead of the always-white "on photo" tokens used while transparent. */
.site-nav.solid .nav-logo .logo-text,
.site-nav.solid .nav-links a,
.site-nav.solid .nav-cta,
.site-nav.solid .theme-toggle svg{ color:var(--white); }
.site-nav.solid .nav-links a{ color:var(--ink-70); }
.site-nav.solid .nav-links a:hover,
.site-nav.solid .nav-links a.active{ color:var(--white); }
.site-nav.solid .theme-toggle{ border-color:var(--line); }
.site-nav.solid .nav-toggle span{ background:var(--white); }
.nav-logo{ display:flex; align-items:center; gap:12px; }
.nav-logo img{ height:38px; width:auto; }
.nav-logo .logo-text{
  font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.02em; color:var(--on-photo);
}
.nav-logo .logo-text span{ display:block; font-family:var(--font-body); font-weight:400; font-size:9px; letter-spacing:.22em; color:var(--bright-teal); margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:13.5px; font-weight:500; color:var(--on-photo-70);
  position:relative; padding-bottom:4px; transition:color var(--dur-s) var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--bright-teal);
  transition:width var(--dur-s) var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--on-photo); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 24px; border:1px solid var(--bright-teal); border-radius:2px;
  font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--on-photo);
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.nav-cta:hover{ background:var(--bright-teal); color:var(--ink-on-accent); }

.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--on-photo-50);
  display:flex; align-items:center; justify-content:center; margin-left:18px; flex-shrink:0;
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.theme-toggle:hover{ border-color:var(--bright-teal); background:rgba(33,166,181,.08); }
.theme-toggle svg{ width:17px; height:17px; color:var(--on-photo); }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:26px; z-index:1200; position:relative;
}
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--on-photo); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-overlay{
  position:fixed; inset:0; background:var(--navy-deep); z-index:1050;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  transform:translateY(-100%); transition:transform .55s var(--ease);
}
.mobile-overlay.open{ transform:translateY(0); }
.mobile-overlay a{ font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--white); }
.mobile-overlay .nav-cta{ margin-top:12px; color:var(--white); }
.mobile-overlay .theme-toggle{ border-color:var(--line); }
.mobile-overlay .theme-toggle svg{ color:var(--white); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 34px; font-size:13.5px; font-weight:600; letter-spacing:.03em;
  border-radius:2px; transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.btn-primary{ background:var(--bright-teal); color:var(--ink-on-accent); }
.btn-primary:hover{ background:var(--white); transform:translateY(-2px); }
.btn-outline{ border:1px solid var(--ink-50); color:var(--white); }
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.btn-block{ width:100%; }

/* ---------- Section Basics ---------- */
.section{ position:relative; padding:150px 0; }
.section-dark{ background:var(--dark-bg); }
.section-navy{ background:var(--navy-deep); }
.eyebrow{ font-size:12.5px; font-weight:500; letter-spacing:.12em; color:var(--bright-teal); margin-bottom:18px; display:block; }
.section-heading{ font-size:clamp(32px,4.6vw,58px); max-width:16ch; }
.section-lede{ color:var(--ink-70); font-size:17px; max-width:52ch; margin-top:22px; }

/* ---------- Reveal Animations ---------- */
.reveal{ opacity:0; transform:translateY(46px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal-scale.in-view{ opacity:1; transform:scale(1); }
.reveal-left{ opacity:0; transform:translateX(-50px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-left.in-view{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(50px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-right.in-view{ opacity:1; transform:translateX(0); }
.stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }

.word-reveal span{ display:inline-block; overflow:hidden; }
.word-reveal span i{ display:inline-block; font-style:normal; transform:translateY(110%); transition:transform .9s var(--ease); transition-delay:calc(var(--i,0) * 70ms); }
.word-reveal.in-view span i{ transform:translateY(0); }

/* ---------- Hero ---------- */
.hero{
  position:relative; height:100vh; min-height:640px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
}
.hero-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); will-change:transform; }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,11,20,.55) 0%, rgba(5,11,20,.35) 40%, rgba(5,11,20,.92) 100%),
             linear-gradient(90deg, rgba(7,27,56,.65), rgba(7,27,56,.15));
}
.hero-routes{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55; }
.hero-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.particle{
  position:absolute; width:3px; height:3px; border-radius:50%; background:var(--bright-teal); opacity:.5;
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.4; }
  100%{ transform:translateY(-100vh) translateX(20px); opacity:0; }
}
.hero-content{ position:relative; z-index:2; width:100%; padding:0 var(--gutter) 110px; color:var(--on-photo); }
.hero-content .eyebrow{ opacity:0; animation:fadeUp .9s var(--ease) .3s forwards; color:var(--bright-teal); }
.hero-title{
  color:var(--on-photo);
  font-size:clamp(42px, 8vw, 108px); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  max-width:18ch;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{ display:inline-block; transform:translateY(115%); animation:lineUp 1s var(--ease) forwards; }
.hero-title .line:nth-child(1) span{ animation-delay:.45s; }
.hero-title .line:nth-child(2) span{ animation-delay:.62s; }
@keyframes lineUp{ to{ transform:translateY(0); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

.hero-sub{ margin-top:26px; max-width:44ch; color:var(--on-photo-70); font-size:17px; opacity:0; animation:fadeUp .9s var(--ease) .95s forwards; }
.hero-actions{ margin-top:42px; display:flex; gap:18px; flex-wrap:wrap; opacity:0; animation:fadeUp .9s var(--ease) 1.15s forwards; }
.hero .btn-outline{ border-color:var(--on-photo-50); color:var(--on-photo); }
.hero .btn-outline:hover{ border-color:var(--on-photo); background:rgba(255,255,255,.12); }

.scroll-indicator{
  position:absolute; left:var(--gutter); bottom:36px; z-index:2;
  display:flex; align-items:center; gap:12px; font-size:11.5px; letter-spacing:.18em; color:var(--on-photo-50);
  opacity:0; animation:fadeUp .9s var(--ease) 1.4s forwards;
}
.scroll-indicator .stick{ width:1px; height:34px; background:var(--on-photo-50); position:relative; overflow:hidden; }
.scroll-indicator .stick::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--bright-teal); animation:stickDrop 1.8s ease-in-out infinite; }
@keyframes stickDrop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- Split section (About) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.split-media{ position:relative; overflow:hidden; }
.split-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transform:scale(1.05); }
.split-text{ display:flex; align-items:center; padding:80px var(--gutter); background:var(--navy-deep); }
.split-text-inner{ max-width:480px; }

.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px 24px; margin-top:46px; }
.stat-num{ font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--bright-teal); }
.stat-label{ font-size:12.5px; color:var(--ink-70); margin-top:6px; letter-spacing:.02em; }

.text-link{ display:inline-flex; align-items:center; gap:10px; margin-top:38px; font-weight:600; font-size:14px; color:var(--bright-teal); }
.text-link .arrow{ transition:transform var(--dur-s) var(--ease); }
.text-link:hover .arrow{ transform:translateX(6px); }

/* ---------- Product Cards ---------- */
.product-rail{
  display:flex; gap:26px; overflow-x:auto; padding:14px var(--gutter) 40px; scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.product-rail::-webkit-scrollbar{ display:none; }
.product-card{
  flex:0 0 340px; scroll-snap-align:start;
  background:var(--navy-deep); border:1px solid var(--line); border-radius:var(--radius-m);
  overflow:hidden; position:relative; transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.product-card:hover{ transform:translateY(-8px); border-color:var(--bright-teal); }
.product-card .pc-media{ height:260px; overflow:hidden; position:relative; }
.product-card .pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.product-card:hover .pc-media img{ transform:scale(1.1); }
.product-card .pc-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(5,11,20,.85)); }
.pc-origin{ position:absolute; top:16px; left:16px; font-size:10.5px; letter-spacing:.1em; background:rgba(5,11,20,.6); color:var(--on-photo); padding:6px 10px; border-radius:2px; backdrop-filter:blur(6px); }
.pc-body{ padding:24px 24px 28px; }
.pc-body h3{ font-size:19px; margin-bottom:10px; }
.pc-body p{ font-size:13.8px; color:var(--ink-70); line-height:1.6; min-height:44px; }
.pc-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-50); }
.pc-link{ color:var(--bright-teal); font-weight:600; }

/* Product grid (products page) */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:1000px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .product-grid{ grid-template-columns:1fr; } .product-rail{ padding-left:20px; padding-right:20px;} }
.product-grid.list-view{ grid-template-columns:1fr; }
.product-grid.list-view .product-card{ display:grid; grid-template-columns:220px 1fr; }
.product-grid.list-view .pc-media{ height:100%; }

/* ---------- Journey / Process ---------- */
/* =========================================================
   EXPORT JOURNEY SECTION
========================================================= */

.journey {
  padding-bottom: 120px;
  overflow: hidden;
}

/* Each step */
.journey-step {
  width: 100%;
  min-height: 520px;

  display: grid;
  grid-template-columns: 1fr 1fr;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

/* Image */
.journey-step-image {
  width: 100%;
  height: 520px;
  overflow: hidden;
  position: relative;
}

.journey-step-image img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
  object-position: center;

  transition: transform 0.8s ease;
}

/* Image zoom effect */
.journey-step:hover .journey-step-image img {
  transform: scale(1.05);
}

/* Optional dark overlay on image */
.journey-step-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(5, 15, 28, 0.08),
    rgba(5, 15, 28, 0.35)
  );

  pointer-events: none;
}


/* =========================================================
   TEXT SIDE
========================================================= */

.journey-step-inner {
  min-height: 520px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 70px clamp(40px, 7vw, 140px);

  background: var(--navy, #071b38);
}

.journey-num {
  display: block;

  margin-bottom: 25px;

  color: var(--bright-teal, #39b8cf);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.journey-step-inner h3 {
  margin: 0 0 24px;

  color: var(--on-photo, #ffffff);

  font-size: clamp(36px, 4vw, 68px);
  line-height: 1.08;

  font-weight: 600;
  letter-spacing: -0.02em;

  max-width: 650px;
}

.journey-step-inner p {
  margin: 0;

  max-width: 580px;

  color: rgba(255, 255, 255, 0.7);

  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
}


/* =========================================================
   ALTERNATE IMAGE AND TEXT POSITION
========================================================= */

/* Step 2, 4 and 6:
   Text on left, image on right */

.journey-step:nth-of-type(even) .journey-step-image {
  order: 2;
}

.journey-step:nth-of-type(even) .journey-step-inner {
  order: 1;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .journey-step {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .journey-step-image {
    height: 420px;
  }

  .journey-step-inner {
    min-height: auto;
    padding: 70px 8vw;
  }

  /* Reset alternating layout */
  .journey-step:nth-of-type(even) .journey-step-image {
    order: 1;
  }

  .journey-step:nth-of-type(even) .journey-step-inner {
    order: 2;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .journey {
    padding-bottom: 60px;
  }

  .journey-step-image {
    height: 300px;
  }

  .journey-step-inner {
    padding: 50px 25px;
  }

  .journey-step-inner h3 {
    font-size: 36px;
  }

  .journey-step-inner p {
    font-size: 15px;
    line-height: 1.65;
  }

  .journey-num {
    margin-bottom: 18px;
    font-size: 11px;
  }
}Z
/* ---------- Feature / Why-us cards ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:60px; }
.feature-card{ background:var(--dark-bg); padding:44px 34px; transition:background .4s var(--ease); }
.feature-card:hover{ background:var(--navy-deep); }
.feature-card .fc-icon{ width:44px; height:44px; margin-bottom:26px; color:var(--bright-teal); }
.feature-card h3{ font-size:18px; margin-bottom:12px; }
.feature-card p{ font-size:14px; color:var(--ink-70); }
@media (max-width:900px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }

/* ---------- Quality section ---------- */
.quality-list{ display:grid; gap:0; margin-top:20px; }
.quality-row{ display:flex; align-items:center; gap:22px; padding:22px 0; border-bottom:1px solid var(--line); }
.quality-row .q-index{ font-family:var(--font-display); font-size:13px; color:var(--bright-teal); width:34px; }
.quality-row p{ font-size:16px; color:var(--white); }

/* ---------- Global presence ---------- */
.map-wrap{ position:relative; height:640px; border-radius:var(--radius-m); overflow:hidden; }
.map-wrap img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.4); }
.map-dot{ position:absolute; width:10px; height:10px; border-radius:50%; background:var(--bright-teal); box-shadow:0 0 0 0 rgba(33,166,181,.6); animation:pulseDot 2.4s ease-out infinite; }
@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(33,166,181,.55); } 70%{ box-shadow:0 0 0 22px rgba(33,166,181,0); } 100%{ box-shadow:0 0 0 0 rgba(33,166,181,0); } }
.map-label{ position:absolute; font-size:11.5px; letter-spacing:.05em; color:var(--on-photo); transform:translate(14px,-4px); white-space:nowrap; }
svg.route-line{ position:absolute; inset:0; width:100%; height:100%; }
.route-path{ fill:none; stroke:var(--bright-teal); stroke-width:1; stroke-dasharray:6 6; opacity:.6; stroke-dashoffset:0; animation:dashMove 30s linear infinite; }
@keyframes dashMove{ to{ stroke-dashoffset:-1000; } }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:10px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:12.5px; letter-spacing:.04em; color:var(--ink-70); }
.field input, .field select, .field textarea{
  background:transparent; border:1px solid var(--line); border-radius:2px; color:var(--white);
  padding:14px 16px; font-size:14.5px; transition:border-color var(--dur-s) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--bright-teal); }
.field select option{ background:var(--navy-deep); }
.field textarea{ resize:vertical; min-height:120px; }
.field-error{ font-size:12px; color:#ff8383; min-height:14px; }
.radio-group{ display:flex; gap:14px; flex-wrap:wrap; }
.radio-chip{ border:1px solid var(--line); padding:10px 18px; border-radius:20px; font-size:13px; cursor:pointer; transition:all var(--dur-s) var(--ease); }
.radio-chip.selected{ background:var(--bright-teal); border-color:var(--bright-teal); color:var(--ink-on-accent); font-weight:600; }

/* ---------- Steps (multi-step form) ---------- */
.step-tracker{ display:flex; gap:10px; margin-bottom:56px; }
.step-tracker .st{ flex:1; }
.step-tracker .st-bar{ height:2px; background:var(--line); position:relative; overflow:hidden; }
.step-tracker .st-bar::after{ content:''; position:absolute; inset:0; background:var(--bright-teal); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.step-tracker .st.done .st-bar::after, .step-tracker .st.active .st-bar::after{ transform:scaleX(1); }
.step-tracker .st-label{ font-size:11px; letter-spacing:.06em; color:var(--ink-50); margin-top:10px; }
.step-tracker .st.active .st-label{ color:var(--bright-teal); }
.form-step{ display:none; }
.form-step.active{ display:block; animation:fadeUp .5s var(--ease); }
.step-actions{ display:flex; justify-content:space-between; margin-top:44px; }

/* ---------- FAQ Accordion ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; padding:26px 4px; cursor:pointer; }
.faq-q h3{ font-size:17px; font-weight:500; font-family:var(--font-body); max-width:80%; }
.faq-plus{ position:relative; width:18px; height:18px; flex-shrink:0; }
.faq-plus::before, .faq-plus::after{ content:''; position:absolute; background:var(--bright-teal); transition:transform .35s var(--ease); }
.faq-plus::before{ top:8px; left:0; width:18px; height:1.5px; }
.faq-plus::after{ left:8px; top:0; height:18px; width:1.5px; }
.faq-item.open .faq-plus::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-a p{ padding:0 4px 26px; color:var(--ink-70); font-size:14.5px; max-width:70ch; }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:56px; }
@media (max-width:900px){ .team-grid{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; } }
.team-card{ text-align:center; }
.team-photo{
  width:100%; aspect-ratio:1/1; border-radius:50%; overflow:hidden; max-width:220px; margin:0 auto 26px;
  border:1px solid var(--line);
}
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-card h3{ font-size:19px; margin-bottom:6px; }
.team-role{ font-size:12.5px; letter-spacing:.06em; color:var(--bright-teal); margin-bottom:14px; display:block; }
.team-card p{ font-size:14px; color:var(--ink-70); max-width:32ch; margin:0 auto; }

/* ---------- Image break / full bleed ---------- */
.image-break{ position:relative; height:64vh; min-height:360px; overflow:hidden; }
.image-break img{ width:100%; height:100%; object-fit:cover; }
.image-break::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.image-break-caption{ position:absolute; left:var(--gutter); bottom:40px; z-index:1; max-width:36ch; font-family:var(--font-display); font-size:clamp(20px,2.6vw,30px); color:#fff; }

/* ---------- Mini image strip ---------- */
.image-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
@media (max-width:760px){ .image-strip{ grid-template-columns:1fr; } }
.image-strip img{ width:100%; height:220px; object-fit:cover; border-radius:var(--radius-m); }

/* ---------- Gallery ---------- */
.gallery-grid{ columns:3 260px; column-gap:18px; }
.gallery-grid img{ width:100%; margin-bottom:18px; border-radius:var(--radius-s); cursor:zoom-in; transition:transform .5s var(--ease); }
.gallery-grid img:hover{ transform:scale(1.02); }
.lightbox{ position:fixed; inset:0; background:rgba(5,11,20,.94); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .4s var(--ease); }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:88vw; max-height:86vh; border-radius:4px; }
.lightbox-close{ position:absolute; top:30px; right:40px; font-size:28px; color:var(--on-photo); }

/* ---------- Tracking timeline ---------- */
.track-timeline{ margin-top:60px; }
.tt-row{ display:flex; gap:22px; padding-bottom:34px; position:relative; }
.tt-row::before{ content:''; position:absolute; left:11px; top:26px; bottom:0; width:1px; background:var(--line); }
.tt-row:last-child::before{ display:none; }
.tt-dot{ width:24px; height:24px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; transition:all .4s var(--ease); }
.tt-row.done .tt-dot{ background:var(--bright-teal); border-color:var(--bright-teal); color:var(--ink-on-accent); }
.tt-row.current .tt-dot{ border-color:var(--bright-teal); box-shadow:0 0 0 5px rgba(33,166,181,.18); }
.tt-title{ font-weight:600; font-size:15px; }
.tt-row.done .tt-title{ color:var(--white); }
.tt-row:not(.done) .tt-title{ color:var(--ink-50); }
.tt-time{ font-size:12px; color:var(--ink-50); margin-top:4px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-deep); padding:90px 0 30px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-size:12.5px; letter-spacing:.08em; color:var(--bright-teal); margin-bottom:22px; }
.footer-grid ul li{ margin-bottom:12px; }
.footer-grid ul li a{ font-size:14px; color:var(--ink-70); transition:color var(--dur-s) var(--ease); }
.footer-grid ul li a:hover{ color:var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-50); flex-wrap:wrap; gap:12px; }
.social-row{ display:flex; gap:16px; }
.social-row a{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all var(--dur-s) var(--ease); }
.social-row a:hover{ border-color:var(--bright-teal); background:var(--bright-teal); color:var(--ink-on-accent); }

/* ---------- Scroll to top ---------- */
#scroll-top{
  position:fixed; right:26px; bottom:26px; width:48px; height:48px; border-radius:50%;
  background:var(--bright-teal); color:var(--ink-on-accent); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all .4s var(--ease); z-index:900;
}
#scroll-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ position:relative; height:70vh; min-height:460px; display:flex; align-items:flex-end; overflow:hidden; }
.page-hero-bg{ position:absolute; inset:0; }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); }
.page-hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,11,20,.5), rgba(5,11,20,.95)); }
.page-hero-content{ position:relative; z-index:1; padding:0 var(--gutter) 70px; }
.breadcrumb{ font-size:12px; color:var(--on-photo-50); letter-spacing:.04em; margin-bottom:16px; }
.page-hero h1{ color:var(--on-photo); font-size:clamp(36px,6vw,72px); text-transform:uppercase; max-width:16ch; }

/* ---------- Utilities ---------- */
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-lg{ margin-top:60px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; gap:40px; } }
.badge-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.badge{ font-size:11.5px; letter-spacing:.06em; border:1px solid var(--line); padding:8px 14px; border-radius:20px; color:var(--ink-70); }
.center-copy{ max-width:640px; margin:0 auto; text-align:center; }
.thankyou-box{ text-align:center; padding:80px 0; }
.thankyou-box .icon-circle{ width:76px; height:76px; border-radius:50%; border:1px solid var(--bright-teal); display:flex; align-items:center; justify-content:center; margin:0 auto 30px; font-size:30px; color:var(--bright-teal); }

/* ---------- Responsive: nav + hero + split ---------- */
@media (max-width:900px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .split{ grid-template-columns:1fr; }
  .split-media{ height:52vw; min-height:280px; }
  .journey-map{ display:none; }
}
@media (max-width:640px){
  .section{ padding:100px 0; }
  .gallery-grid{ columns:1 100%; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}