/* =========================================================
   ROUTE — overrides on the faithfully reproduced SeaHawk theme
   Structure/layout = SeaHawk (grid-bs5 / child / custom).
   Palette = DARK × AMBER (ROUTE brand). Fonts substituted.
   ========================================================= */

/* ---------- SPLASH (cinematic: truck arrives → 100% → blasts off → hero) ---------- */
#splash{ position:fixed; inset:0; z-index:9999; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 46%, #0d131d 0%, #070a10 70%, #04060a 100%); }
#splash .sp-vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 52%, transparent 40%, rgba(0,0,0,.6) 100%);
  mix-blend-mode:multiply; }
/* horizontal speed-line field */
#splash .sp-speed{ position:absolute; inset:0; pointer-events:none; }
#splash .sp-streak{ position:absolute; height:1px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(255,150,90,.0) 0%, rgba(255,150,90,.65) 60%, rgba(255,210,170,.9)); }
/* road */
#splash .sp-road{ position:absolute; left:-20vw; right:-20vw; top:62%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 20%, rgba(255,255,255,.16) 80%, transparent); overflow:hidden; }
#splash .sp-dash{ position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,#ff6b2c 0 36px, transparent 36px 80px); opacity:.5; }
/* truck */
#splash .sp-truck{ position:absolute; left:50%; top:62%; width:min(56vw,460px);
  transform:translate(-50%,-100%); opacity:0; will-change:transform, filter; }
#splash .sp-rig{ width:100%; height:auto; color:#ff6b2c;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.55)); }
#splash .sp-wheel{ will-change:transform; }
/* headlight beam: a cone projecting forward (right) from the truck's nose */
#splash .sp-beam{ position:absolute; left:90%; top:60%; width:48%; height:26%;
  transform:translateY(-50%); transform-origin:left center; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,214,160,.6), rgba(255,170,90,.14) 48%, transparent 82%);
  clip-path:polygon(0 36%, 0 64%, 100% 100%, 100% 0); filter:blur(5px); opacity:.7; }
/* UI */
#splash .sp-ui{ position:absolute; left:0; right:0; bottom:0; top:0; pointer-events:none; }
#splash .sp-brand{ position:absolute; top:clamp(28px,6vh,64px); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.7rem; }
#splash .sp-brand svg{ width:34px; height:34px; }
#splash .sp-brand span{ font-family:"Inter",sans-serif; font-weight:600; letter-spacing:.5em; padding-left:.5em; font-size:clamp(20px,2.4vw,30px); color:#eef2f8; }
#splash .sp-readout{ position:absolute; left:50%; bottom:clamp(46px,12vh,120px); transform:translateX(-50%);
  width:min(80vw,520px); text-align:center; }
#splash .sp-count{ font-family:"IBM Plex Mono",monospace; color:#eef2f8; line-height:1; }
#splash .sp-count b{ font-weight:500; font-size:clamp(40px,7vw,86px); letter-spacing:-.02em; }
#splash .sp-count i{ font-style:normal; color:#ff6b2c; font-size:clamp(16px,2vw,24px); margin-left:.2em; }
#splash .sp-bar{ display:block; width:100%; height:2px; margin:22px 0 16px; }
#splash #spBarFill{ stroke-dasharray:100; stroke-dashoffset:100; }
#splash .sp-tag{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.28em; color:#7c8699; }
/* exit light sweep */
#splash .sp-wipe{ position:absolute; inset:0; pointer-events:none; transform:translateX(-101%);
  background:linear-gradient(90deg, transparent, rgba(255,107,44,.0) 30%, rgba(255,140,77,.9) 50%, rgba(255,107,44,.0) 70%, transparent); }

/* ---------- fonts (licensed Suisse/Helvetica Now → free) ---------- */
html{
  --font-b: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --font-sec: "IBM Plex Mono", ui-monospace, monospace;
}
body, .font-b, .font-sec{ font-family: var(--font-b); }
.mono{ font-family: var(--font-sec) !important; letter-spacing:.02em; }
.h1,.h2,h1,h2,.f-700,.f-460,.f-400,.f-320,.f-200,.f-160,.f-100,.f-70{
  letter-spacing:-.015em; font-weight:600;
}
body{ font-weight:400; }

/* ---------- DARK × AMBER palette remap ----------
   SeaHawk var names are literal; remap roles for a dark theme. */
html{
  --bg:        #0a0e14;
  --panel:     #0e1420;
  --panel-2:   #121a28;
  --ink:       #eef2f8;   /* primary light text */
  --ink-dim:   #aeb8c8;
  --amber:     #ff6b2c;
  --amber-2:   #ff8c4d;
  --line:      rgba(255,255,255,0.12);

  --color-white: #eef2f8;     /* text on dark feature panels */
  --color-blue:  #eef2f8;     /* "ink" → light */
  --color-blue-a:#15202f;     /* value panels (dark elevated, progressive) */
  --color-blue-b:#1a2738;
  --color-blue-c:#213149;
  --color-red:   #ff6b2c;     /* accent → amber */
  --color-grey:  #11161f;     /* placeholder / subtle bg */
  --color-dark-grey:#8b94a3;
}
/* page background must be dark + default text must be light (was unset → invisible) */
html, body, .bg-white{ background:var(--bg) !important; }
body{ color:var(--ink); }
p, li, td, th, span, h1, h2, h3, h4, h5, h6, a, time{ color:inherit; }
.color-blue{ color:var(--ink) !important; }
.color-white{ color:#ffffff !important; }
.color-dark-grey{ color:#aab4c4 !important; }
::selection{ background:var(--amber); color:#0a0a0a; }

/* feature sections that were navy → dark elevated panels */
.bg-blue{ background:var(--panel) !important; }
.bg-blue-a{ background:var(--color-blue-a) !important; }
.bg-blue-b{ background:var(--color-blue-b) !important; }
.bg-blue-c{ background:var(--color-blue-c) !important; }
.bg-grey{ background:var(--panel) !important; }
.img-container{ background:var(--panel-2); }

/* borders → faint light */
.brd-t,.brd-b,.brd-l,.brd-r,.brd-blue-a,.brd-t.brd-blue-a{ border-color:var(--line) !important; }
.list-underline li{ border-color:var(--line) !important; }
#main-nav .menu-contact,#main-nav .menu-contact>div:first-child{ border-color:var(--line) !important; }

/* navbar pill → dark glass */
.inner-navbar-container{ border:1px solid var(--line) !important; background:rgba(10,14,20,.66) !important;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
#wrapper-navbar.bluenav .inner-navbar-container{ border-color:var(--line) !important; background:rgba(8,11,17,.8) !important; }
#main-nav .navbar-nav .nav-link,#wrapper-navbar.bluenav #main-nav .navbar-nav .nav-link{ color:var(--ink); }
#main-menu::before,#wrapper-navbar.bluenav #main-menu::before{ background:var(--amber); }

/* buttons → amber accent */
.btn-main,.btn-header{
  color:var(--ink) !important; border:1px solid var(--amber) !important;
  background:linear-gradient(to right, var(--amber) 50%, transparent 50%) !important;
  background-size:201% 100% !important; background-position:right !important;
  transition:background .5s ease-out,color .5s ease-out;
}
.btn-main:hover,.btn-header:hover{ background-position:left !important; color:#0a0a0a !important; }
.btn-white{ border-color:var(--ink) !important;
  background:linear-gradient(to right, var(--ink) 50%, transparent 50%) !important; background-size:201% 100% !important; background-position:right !important; color:var(--ink) !important; }
.btn-white:hover{ background-position:left !important; color:#0a0a0a !important; }
.link:hover,.btn-underline,.btn-underline:hover{ color:var(--amber); }
.btn-underline::after{ background:var(--amber); }

/* ---------- ROUTE logo (brand image) ---------- */
.route-logo{ display:inline-flex; align-items:center; }
.route-logo img{ height:30px; width:auto; display:block; }
.footer-logo img{ height:40px; }

/* keyword highlight */
.kw,.color-red{ color:var(--amber) !important; }

/* hero giant headline */
.hero-line{ display:block; overflow:visible; padding-bottom:.04em; }
.hero-right{ text-align:right; }
@media(max-width:991px){ .hero-right{ text-align:left; } }

/* live clock dot */
#main-nav .header-date>span{ background:#19c37d; }

/* ---------- 3D map stage ---------- */
#fleet3D{ position:relative; }
#canvas{ position:absolute; inset:0; width:100%; height:100%; transform:none; }
.map-stage{ position:relative; width:100%; height:80vh; min-height:560px; }

/* counters */
.inner-counter .count-num{ font-weight:600; letter-spacing:-.02em; line-height:.9; display:block; }
.inner-counter .count-unit{ font-family:var(--font-sec); color:var(--amber); }
.inner-counter .count-label{ font-family:var(--font-sec); color:var(--color-dark-grey); }

/* ---------- FIX: services accordion ---------- */
/* Bootstrap forces white bg on accordion → light text became invisible. Kill it. */
#accordionServices, #accordionServices .accordion, #accordionServices .accordion-item,
#accordionServices .accordion-header, #accordionServices .accordion-button,
#accordionServices .accordion-collapse, #accordionServices .accordion-body,
#accordionServices .accordion-inner{
  background:transparent !important; box-shadow:none !important;
  --bs-accordion-bg:transparent; --bs-accordion-active-bg:transparent;
  --bs-accordion-btn-bg:transparent; --bs-accordion-color:var(--ink);
}
#accordionServices .accordion-item{ align-items:center; min-height:96px; border-color:var(--line); }
#accordionServices .accordion-item.show{ align-items:stretch; min-height:300px; }
#accordionServices .accordion-img{ align-self:stretch; }
#accordionServices .accordion-img .img-container{ height:100%; min-height:96px; }
#accordionServices .accordion-inner{ display:flex; flex-direction:column; justify-content:center; padding:1rem 0; }
#accordionServices .accordion-header,
#accordionServices .accordion-collapse,
#accordionServices .accordion-body,
#accordionServices .accordion-item .header-num{ height:auto !important; }
/* without Bootstrap collapse JS: show body/number only for the open item */
#accordionServices .accordion-collapse{ display:none; overflow:hidden; }
#accordionServices .accordion-item.show .accordion-collapse{ display:block; }
#accordionServices .header-num{ display:none; }
#accordionServices .accordion-item.show .header-num{ display:block; }
#accordionServices .accordion-body{ padding:.6rem 1.25rem 0 !important; }
#accordionServices .accordion-body p{ color:var(--ink) !important; }
#accordionServices .accordion-button{ color:var(--ink) !important; padding:0 1.25rem !important; opacity:1 !important; }
#accordionServices .accordion-item:not(.show) .accordion-button{ color:var(--ink-dim) !important; }
#accordionServices .accordion-item:not(.show):hover .accordion-button{ color:var(--ink) !important; }
#accordionServices .header-num .f-70{ color:var(--amber) !important; }
#accordionServices .accordion-button::after,
#accordionServices .accordion-button:not(.collapsed)::after{
  filter:invert(1) sepia(1) saturate(6) hue-rotate(-15deg); }

/* values footer */
.values-footer h4{ font-weight:600; }

/* real photos fill their container */
.img-container img{ width:100%; height:100%; object-fit:cover; display:block; }
/* image placeholders (fallback) */
.media-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem; }
.media-ph::after{ content:attr(data-ph); font-family:var(--font-sec); font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.45); line-height:1.6; }

/* company table */
.company-table{ border-collapse:collapse; }
.company-table tr{ border-bottom:1px solid var(--line); }
.company-table th{ text-align:left; vertical-align:top; padding:1.1rem 2rem 1.1rem 0; width:230px; color:var(--color-dark-grey); font-weight:500; font-size:.95rem; }
.company-table td{ padding:1.1rem 0; color:var(--ink); font-weight:400; font-size:1rem; }
@media(max-width:600px){ .company-table th{ display:block; width:auto; padding-bottom:.2rem; } .company-table td{ display:block; padding-top:.2rem; padding-bottom:1.1rem; } }

/* recruit list */
.list-underline li{ font-size:1.05rem; }

/* contour bg subtle on dark */
#siteBgSVG path{ stroke:#2c3a52 !important; stroke-width:.3px; }
#siteBG svg{ opacity:.42; transform:scale(2) !important; }
/* kill SeaHawk's home-only background artifacts (big numbers / split line) */
.home #siteBgSVG #numGroup, .home #siteBgSVG #splitline,
#siteBgSVG #numGroup, #siteBgSVG #splitline{ display:none !important; }
@media(max-width:991px){ #siteBG svg{ opacity:.32; transform:scale(2.2) !important; } }

/* custom HOLD-TO-VIEW cursor removed (no purpose on a single page) */
#cursor{ display:none !important; }

/* mobile menu */
#navbarMobile .nav-link{ padding:.6rem 0; display:block; color:var(--ink) !important; }
#wrapper-menu .bg-blue{ background:var(--bg) !important; }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; } #cursor{ display:none !important; } }