/* ==========================================================================
   SEIPL — Premium One-Page Site
   Design system: dark + white, large display type, restrained brass accent.
   ========================================================================== */

:root{
  /* ---- Color tokens: Deep Navy / Dark Steel Blue / Slate Gray + restrained gold accent ---- */
  --black:        #060911;
  --black-soft:   #0a0f1c;
  --panel:        #0f1626;
  --panel-2:      #141d31;
  --line:         rgba(148,163,184,0.10);
  --line-strong:  rgba(148,163,184,0.20);
  --white:        #f4f6f9;
  --off-white:    #e7ebf1;
  --text-dim:     rgba(244,246,249,0.64);
  --text-faint:   rgba(244,246,249,0.4);

  --paper:        #eef1f6;
  --paper-2:      #e2e7ef;
  --ink:          #0b1220;
  --ink-dim:      rgba(11,18,32,0.62);
  --ink-faint:    rgba(11,18,32,0.4);

  --brass:        #c7a463;
  --brass-soft:   #e3cd98;
  --brass-deep:   #9c7c3f;

  /* ---- Steel / slate accent for depth layers (not for text/brand) ---- */
  --steel:        #34445e;
  --steel-soft:   #55698a;
  --steel-mist:   rgba(85,105,138,0.16);
  --navy-mid:     #101c30;

  --line-on-paper: rgba(11,18,32,0.1);

  /* ---- Type ---- */
  --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Layout ---- */
  --container: 1320px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 2px;
  --radius-lg: 14px;
  --ease: cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }

body{
  margin:0;
  background: var(--black);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:none; }
::selection{ background: var(--brass); color:#0c0d0f; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
  z-index: 1;
}

section{ position:relative; }

/* ---- Typography scale ---- */
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
}
.eyebrow::before{
  content:'';
  width: 26px; height:1px;
  background: var(--brass);
  display:inline-block;
}

.display-1{ font-size: clamp(3rem, 8vw, 7.2rem); }
.display-2{ font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.display-3{ font-size: clamp(1.8rem, 3.4vw, 2.8rem); }

.lead{
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--text-dim);
  max-width: 640px;
  font-weight: 400;
}
.section-on-paper .lead{ color: var(--ink-dim); }

/* ---- Section head pattern ---- */
.section-head{
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-head h2{ margin-top: 18px; }
.section-head p{ margin-top: 18px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::before{ display:none; }
.section-head.center .lead{ margin-left:auto; margin-right:auto; }

/* ---- Buttons ---- */
.btn{
  position: relative;
  display: inline-flex;
  align-items:center;
  gap: 12px;
  padding: 17px 32px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  overflow:hidden;
  transition: border-color .4s var(--ease), color .4s var(--ease);
  isolation:isolate;
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  background: var(--white);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
  z-index:-1;
}
.btn-primary{ color: var(--black); background: var(--white); border-color: var(--white); }
.btn-primary::before{ background: var(--brass); }
.btn-primary:hover{ border-color: var(--brass); }
.btn-primary:hover::before{ transform: translateY(0); }

.btn-ghost{ color: var(--white); }
.btn-ghost::before{ background: var(--white); }
.btn-ghost:hover{ color: var(--black); }
.btn-ghost:hover::before{ transform: translateY(0); }

.btn .arrow{ transition: transform .4s var(--ease); }
.btn:hover .arrow{ transform: translateX(5px); }

/* ---- Custom cursor ---- */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0;
  pointer-events:none;
  z-index: 9999;
  border-radius:50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{ width:6px; height:6px; background: var(--brass); }
.cursor-ring{
  width:34px; height:34px;
  border: 1px solid rgba(247,246,242,0.4);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cursor-ring.is-active{
  width:64px; height:64px;
  border-color: var(--brass);
  background: rgba(199,164,99,0.08);
}
@media (max-width: 900px){
  .cursor-dot, .cursor-ring{ display:none; }
  body{ cursor:auto; }
}

/* ---- Loading screen ---- */
.loader{
  position: fixed; inset:0; z-index: 10000;
  background: var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 22px;
}
.loader-mark{ width: 56px; height:56px; opacity:0.95; }
.loader-bar{
  width: 220px; height:1px; background: var(--line);
  position:relative; overflow:hidden;
}
.loader-bar::after{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width: var(--loader-fill, 0%);
  background: var(--brass);
}
.loader-pct{
  font-family: var(--f-display); font-size: 0.78rem; letter-spacing:0.2em;
  color: var(--text-faint);
}
.loader.is-done{
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
  opacity:0; visibility:hidden;
}

/* ---- Nav ---- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 26px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  transition: padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  padding: 16px var(--pad);
  background: rgba(8,9,11,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-brand img{ height: 34px; width:auto; transition: height .5s var(--ease); }
.nav-brand span{ font-family: var(--f-display); font-size:1rem; letter-spacing:0.02em; }
.nav:not(.scrolled) .nav-brand img{ height: 46px; }
@media (max-width:640px){
  .nav:not(.scrolled) .nav-brand img{ height: 38px; }
}

.nav-links{
  display:flex; align-items:center; gap: 40px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size: 0.82rem; font-weight:500; letter-spacing:0.03em;
  color: var(--text-dim);
  position:relative;
  padding: 4px 0;
  transition: color .3s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--brass);
  transition: right .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }

.nav-cta{
  border:1px solid var(--line-strong); padding: 10px 22px; border-radius: var(--radius);
  font-size:0.78rem !important; font-weight:600 !important; color: var(--white) !important;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.nav-cta:hover{ background: var(--brass); border-color: var(--brass); color: var(--black) !important; }
.nav-cta::after{ display:none; }

.nav-toggle{
  display:none; background:none; border:none; color:var(--white);
  width:38px; height:28px; position:relative;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px; background:var(--white);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1){ top:4px; }
.nav-toggle span:nth-child(2){ top:13px; }
.nav-toggle span:nth-child(3){ top:22px; }
.nav-toggle.is-open span:nth-child(1){ top:13px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:13px; transform: rotate(-45deg); }

@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,360px);
    background: var(--black-soft); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:28px; padding: 40px var(--pad);
    transform: translateX(100%); transition: transform .5s var(--ease);
    border-left: 1px solid var(--line);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display:block; z-index:600; }
}

/* ---- Hero ---- */
.hero{
  min-height: 100vh;
  display:flex; align-items:center;
  position:relative;
  padding-top: 120px;
  padding-bottom: 80px;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 82% 8%, rgba(199,164,99,0.10), transparent 55%),
    radial-gradient(90% 70% at 8% 96%, rgba(85,105,138,0.16), transparent 60%),
    linear-gradient(160deg, #0b1120 0%, var(--black) 46%, #08101d 78%, var(--black) 100%);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg canvas{ width:100%; height:100%; display:block; }
.hero-bg::after{
  content:'';
  position:absolute; inset:0; z-index:2;
  background: radial-gradient(120% 90% at 50% 100%, rgba(8,9,11,0) 0%, var(--black) 78%),
              linear-gradient(180deg, rgba(8,9,11,0.32) 0%, rgba(8,9,11,0.12) 22%, rgba(8,9,11,0.2) 55%, rgba(8,9,11,0.78) 100%);
}
.hero-aurora{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 46% at 22% 28%, rgba(199,164,99,0.20), transparent 70%),
    radial-gradient(42% 50% at 78% 22%, rgba(85,105,138,0.26), transparent 72%),
    radial-gradient(46% 54% at 55% 82%, rgba(199,164,99,0.12), transparent 74%);
  filter: blur(10px) saturate(1.15);
  animation: auroraDrift 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes auroraDrift{
  0%   { transform: translate3d(-2%,-1%,0) scale(1);    opacity:0.85; }
  50%  { transform: translate3d(2%,2%,0) scale(1.08);   opacity:1; }
  100% { transform: translate3d(-1%,2%,0) scale(1.02);  opacity:0.9; }
}
.hero-grid{
  position:absolute; inset:0; z-index:1; opacity:0.4;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 30%, transparent 90%);
}
.hero-sheen{
  position:absolute; inset:-20% -40%; z-index:1; pointer-events:none;
  background: linear-gradient(75deg, transparent 42%, rgba(227,205,152,0.10) 48%, rgba(227,205,152,0.16) 50%, rgba(227,205,152,0.10) 52%, transparent 58%);
  transform: translateX(-30%);
  animation: sheenSweep 9s ease-in-out infinite;
}
@keyframes sheenSweep{
  0%, 15%  { transform: translateX(-40%); opacity:0; }
  35%      { opacity:1; }
  60%      { transform: translateX(20%); opacity:0; }
  100%     { transform: translateX(20%); opacity:0; }
}
.hero-glow{
  position:absolute; z-index:1; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 620px at var(--gx,50%) var(--gy,40%), rgba(199,164,99,0.20), transparent 70%),
    radial-gradient(950px 750px at 50% 45%, rgba(85,105,138,0.24), transparent 72%);
  animation: glowBreathe 7s ease-in-out infinite;
}
@keyframes glowBreathe{
  0%, 100% { opacity:0.8; }
  50%      { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .hero-aurora, .hero-sheen, .hero-glow{ animation:none; }
}
.hero-ghost{
  position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; pointer-events:none; will-change: transform;
}
.hero-ghost::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(46% 40% at 50% 50%, rgba(85,105,138,0.30), rgba(199,164,99,0.06) 60%, transparent 75%);
  filter: blur(40px);
}
.hero-ghost span{
  position:relative;
  font-family: var(--f-display); font-weight:600;
  font-size: clamp(9rem, 28vw, 38rem); line-height:1; letter-spacing:-0.03em;
  white-space:nowrap; color:transparent;
  -webkit-text-stroke: 1.5px rgba(160,178,204,0.22);
  text-shadow: 0 0 120px rgba(199,164,99,0.16), 0 0 60px rgba(85,105,138,0.25);
}
@media (max-width: 700px){
  .hero-ghost span{ -webkit-text-stroke: 1.5px rgba(160,178,204,0.28); }
}
.hero .container{ position:relative; z-index:2; }
.hero-tag{
  display:inline-block; font-size:0.74rem; letter-spacing:0.28em; text-transform:uppercase;
  color: var(--brass-soft); font-weight:600; margin-bottom:26px;
}
.hero h1{
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  max-width: 16ch;
  overflow:hidden;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line span{ display:inline-block; will-change: transform; }
.hero .lead{ margin-top: 30px; font-size: clamp(1rem,1.5vw,1.3rem); max-width:600px; }
.hero-actions{ display:flex; gap:18px; margin-top:46px; flex-wrap:wrap; }

.hero-stats{
  position:absolute; right: var(--pad); bottom: 56px; z-index:2;
  display:flex; gap: 48px;
}
.hero-stats div{ text-align:left; }
.hero-stats .num{ font-family:var(--f-display); font-size:1.9rem; color:var(--white); }
.hero-stats .lbl{ font-size:0.7rem; letter-spacing:0.1em; color:var(--text-faint); margin-top:4px; }
@media (max-width: 1100px){ .hero-stats{ display:none; } }

.scroll-cue{
  position:absolute; left: var(--pad); bottom: 40px; z-index:2;
  display:flex; align-items:center; gap:12px;
  font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color: var(--text-faint);
}
.scroll-cue .stick{
  width:1px; height:34px; background: var(--line-strong); position:relative; overflow:hidden;
}
.scroll-cue .stick::after{
  content:''; position:absolute; top:-100%; left:0; right:0; height:100%;
  background: var(--brass); animation: scrollCue 2.2s ease-in-out infinite;
}
@keyframes scrollCue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---- Section variants — every section carries depth: mesh gradient + blueprint grid + drifting particles ---- */
.section-on-black{
  background:
    radial-gradient(1100px 650px at 14% -10%, rgba(199,164,99,0.055), transparent 55%),
    radial-gradient(950px 700px at 92% 8%, var(--steel-mist), transparent 55%),
    radial-gradient(750px 550px at 50% 105%, rgba(16,28,48,0.65), transparent 60%),
    var(--black);
  color: var(--white);
  isolation:isolate;
}
.section-on-soft{
  background:
    radial-gradient(1100px 650px at 14% -10%, rgba(199,164,99,0.05), transparent 55%),
    radial-gradient(950px 700px at 92% 8%, rgba(85,105,138,0.14), transparent 55%),
    radial-gradient(750px 550px at 50% 105%, rgba(16,28,48,0.55), transparent 60%),
    var(--black-soft);
  color: var(--white);
  isolation:isolate;
}
.section-on-paper{
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(199,164,99,0.05), transparent 60%),
    radial-gradient(800px 550px at 100% 100%, rgba(52,68,94,0.06), transparent 60%),
    var(--paper);
  color: var(--ink);
  isolation:isolate;
}
.section-pad{ padding: clamp(90px, 12vw, 160px) 0; }

/* Premium hairline divider between sections — thin gradient sweep, no flat seams */
.section-on-black, .section-on-soft, .section-on-paper{
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, rgba(199,164,99,0.32) 50%, transparent 100%) 1;
}

.section-on-paper .eyebrow{ color: var(--brass-deep); }
.section-on-paper h2, .section-on-paper h3, .section-on-paper h4{ color: var(--ink); }

/* Blueprint grid + drifting particle dust — shared background texture for every section */
.section-on-black::before, .section-on-soft::before, .section-on-paper::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.05;
  background-image:
    linear-gradient(rgba(148,163,184,0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.7) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 96%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 96%);
}
.section-on-paper::before{ opacity:0.035; }
.section-on-black::after, .section-on-soft::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.3;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 28%, rgba(199,164,99,0.55), transparent 100%),
    radial-gradient(1px 1px at 68% 62%, rgba(160,178,204,0.6), transparent 100%),
    radial-gradient(1.2px 1.2px at 38% 82%, rgba(199,164,99,0.4), transparent 100%),
    radial-gradient(1px 1px at 84% 22%, rgba(160,178,204,0.5), transparent 100%),
    radial-gradient(1.3px 1.3px at 54% 44%, rgba(199,164,99,0.35), transparent 100%),
    radial-gradient(1px 1px at 25% 92%, rgba(160,178,204,0.45), transparent 100%);
  background-size: 100% 100%;
  animation: floatParticles 30s ease-in-out infinite alternate;
}
@keyframes floatParticles{
  0%{ background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100%{ background-position: 0 -46px, 0 34px, 0 -24px, 0 28px, 0 -38px, 0 20px; }
}

/* Supplementary industrial-skyline silhouette — About + Contact backdrops */
#about::before, #contact::before{
  background-image:
    linear-gradient(rgba(148,163,184,0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.7) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 220'%3E%3Cg fill='%23223350'%3E%3Crect x='0' y='120' width='60' height='100'/%3E%3Crect x='70' y='90' width='40' height='130'/%3E%3Crect x='120' y='140' width='50' height='80'/%3E%3Crect x='180' y='60' width='30' height='160'/%3E%3Crect x='220' y='100' width='70' height='120'/%3E%3Crect x='300' y='150' width='40' height='70'/%3E%3Ccircle cx='250' cy='55' r='10'/%3E%3Crect x='360' y='40' width='14' height='180'/%3E%3Cline x1='367' y1='40' x2='420' y2='60' stroke='%23223350' stroke-width='6'/%3E%3Crect x='430' y='130' width='60' height='90'/%3E%3Crect x='500' y='90' width='45' height='130'/%3E%3Crect x='555' y='150' width='90' height='70'/%3E%3Crect x='660' y='70' width='35' height='150'/%3E%3Crect x='710' y='110' width='60' height='110'/%3E%3Crect x='780' y='150' width='20' height='70'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px, 72px 72px, auto 240px;
  background-position: 0 0, 0 0, bottom center;
  background-repeat: repeat, repeat, repeat-x;
  opacity: 0.09;
}

/* Supplementary port/trade motif — Global Network backdrop, complements the globe */
#network::before{
  background-image:
    linear-gradient(rgba(148,163,184,0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.7) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 220'%3E%3Cg fill='none' stroke='%23223350' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M40 200V60'/%3E%3Cpath d='M40 70l90 30'/%3E%3Cpath d='M40 100l70 22'/%3E%3Crect x='150' y='150' width='70' height='50' fill='%23223350' stroke='none'/%3E%3Crect x='230' y='160' width='60' height='40' fill='%23223350' stroke='none'/%3E%3Cpath d='M600 200V50'/%3E%3Cpath d='M600 60l100 34'/%3E%3Cpath d='M600 90l80 26'/%3E%3Crect x='680' y='150' width='70' height='50' fill='%23223350' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px, 72px 72px, auto 220px;
  background-position: 0 0, 0 0, bottom center;
  background-repeat: repeat, repeat, repeat-x;
  opacity: 0.08;
}

/* ---- Reveal / motion utility (GSAP-driven via JS, base state here) ---- */
.gs-reveal{ opacity:0; }
.gs-fade{ opacity:0; }

/* ---- Shared storytelling module — single static row, no scroll-jacking ---- */
.hscroll{ position:relative; margin: 56px 0 64px; }
.hscroll-inner{ display:block; }
.hscroll-track{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: clamp(22px, 2.6vw, 40px);
  max-width: var(--container); margin: 0 auto; padding: 0 var(--pad);
  align-items:start;
}
@media (max-width:1100px){
  .hscroll-track{ grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
}
@media (max-width:640px){
  .hscroll-track{ grid-template-columns: 1fr; row-gap: 40px; }
}

/* ---- About / timeline (single-line grid) ---- */
.timeline-panel{ width:100%; padding-right:0; }
.timeline-panel .idxnum{ font-family: var(--f-display); font-size: clamp(2.2rem,3.4vw,3.6rem); color: var(--line-strong); line-height:1; }
.timeline-panel .yr{ display:block; margin-top:20px; font-family: var(--f-display); color: var(--brass); font-size:0.95rem; letter-spacing:0.05em; }
.timeline-panel h4{ font-size: clamp(1.1rem,1.6vw,1.4rem); margin-top:10px; color:var(--white); max-width:22ch; }
.timeline-panel p{ margin-top:14px; color: var(--text-dim); font-size:0.92rem; max-width:32ch; }

.pillars{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--line); margin-top:8px; }
.pillar{ background: var(--panel); padding: 30px 28px; }
.pillar .tag{ font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--brass); font-weight:700; }
.pillar h4{ margin-top:14px; font-size:1.2rem; color:var(--white); }
.pillar p{ margin-top:10px; font-size:0.9rem; color:var(--text-dim); }
@media (max-width:640px){ .pillars{ grid-template-columns:1fr; } }

.leadership{ margin-top: 60px; }
.team-photo-banner{
  position:relative; margin-top:22px; overflow:hidden;
  aspect-ratio: 16/7; isolation:isolate;
  background: var(--panel);
}
.team-photo-banner::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image: var(--photo); background-size:cover; background-position:center 30%; background-repeat:no-repeat;
}
.team-photo-banner::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,11,13,0.05) 0%, rgba(10,11,13,0.15) 55%, rgba(10,11,13,0.88) 100%);
}
.team-photo-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 26px 30px;
}
.team-photo-caption h4{ font-size:1.15rem; color:var(--white); font-family:var(--f-display); }
.team-photo-caption p{ font-size:0.85rem; color:var(--text-dim); margin-top:6px; max-width:520px; }
@media (max-width:640px){
  .team-photo-banner{ aspect-ratio: 4/5; }
  .team-photo-caption{ padding:20px 20px; }
}
.leadership-row{
  display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--line);
}
@media (max-width:900px){ .leadership-row{ grid-template-columns:1fr; } }
.leader-card{ background: var(--panel); padding: 34px 30px; }
.leader-card .avatar{
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg, var(--brass), var(--brass-deep));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:1.1rem; color:#0c0d0f; font-weight:600;
}
.leader-card h4{ margin-top:18px; font-size:1.05rem; color:var(--white); }
.leader-card .role{ font-size:0.78rem; color:var(--brass-soft); margin-top:4px; letter-spacing:0.03em; }
.leader-card .note{ font-size:0.78rem; color:var(--text-faint); margin-top:12px; font-style:italic; }

/* ---- Marquee (Global Presence) ---- */
.marquee-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 26px 0; margin-top: 64px; overflow:hidden;
  white-space:nowrap;
}
.marquee-track{ display:inline-flex; animation: marquee 32s linear infinite; will-change: transform; }
.marquee-track span{
  font-family: var(--f-display); font-size:1.1rem; color: var(--text-faint);
  letter-spacing:0.02em; display:inline-flex; align-items:center; gap:56px;
  padding-right:56px; white-space:nowrap;
}
.marquee-track span em{ font-style:normal; color:var(--brass); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---- Sticky-sync editorial index (Services) ---- */
.svc-layout{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items:start; }
@media (max-width:900px){ .svc-layout{ grid-template-columns:1fr; } }

.svc-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.svc-row{
  display:flex; align-items:center; gap:26px; padding: 28px 4px; border-bottom:1px solid var(--line);
  cursor:pointer; transition: padding-left .45s var(--ease);
}
.svc-row .idx{ font-family: var(--f-display); font-size:0.82rem; color: var(--text-faint); width:32px; flex:none; }
.svc-row h3{
  font-size: clamp(1.3rem,2.6vw,2.1rem); font-weight:500; color: var(--text-dim); flex:1;
  transition: color .45s var(--ease);
}
.svc-row .go{
  font-size:0.85rem; color: var(--brass); opacity:0; transform: translateX(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease); flex:none;
}
.svc-row.is-active{ padding-left:18px; }
.svc-row.is-active h3, .svc-row:hover h3{ color: var(--white); }
.svc-row.is-active .go, .svc-row:hover .go{ opacity:1; transform:translateX(0); }

.svc-sticky{
  position:sticky; top: 130px; padding: 38px 34px; background: var(--panel); border:1px solid var(--line);
}
.svc-sticky-idx{ font-family: var(--f-display); font-size: 2.8rem; color: var(--brass); line-height:1; }
.svc-sticky-title{ margin-top:18px; font-size:1.3rem; color:var(--white); }
.svc-sticky-desc{ margin-top:14px; font-size:0.9rem; color: var(--text-dim); line-height:1.6; }
@media (max-width:900px){ .svc-sticky{ display:none; } }

/* ---- Industries — image-card grid ---- */
.ind-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px);
  perspective: 1400px;
}
@media (max-width: 980px){ .ind-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .ind-grid{ grid-template-columns: 1fr; } }

.ind-card{
  position:relative; display:block; aspect-ratio: 3/4; overflow:hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-on-paper);
  background: linear-gradient(155deg, var(--card-a, #101c30) 0%, var(--card-b, #0b1220) 62%, #060911 100%);
  box-shadow: 0 18px 40px rgba(11,18,32,0.16);
  transition: transform .35s var(--ease-soft), box-shadow .6s var(--ease), border-color .6s var(--ease);
  transform-style: preserve-3d;
  isolation:isolate;
}
.ind-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 44px 80px rgba(11,18,32,0.32);
  border-color: rgba(199,164,99,0.35);
}
.ind-card-photo{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
}
/* blurred cover backdrop — fills the whole card, hides letterbox gaps */
.ind-card-photo::before{
  content:''; position:absolute; inset:-8%; z-index:0;
  background-image: var(--photo); background-size:cover; background-position:center; background-repeat:no-repeat;
  filter: blur(26px) brightness(0.55) saturate(1.15);
  transform: scale(1.1);
  transition: transform .9s var(--ease-soft);
  will-change: transform;
}
/* crisp foreground — shown at native aspect, no stretch, no upscale blur */
.ind-card-photo::after{
  content:''; position:absolute; inset:0; z-index:1;
  background-image: var(--photo); background-size:100% auto; background-position:center; background-repeat:no-repeat;
  filter: saturate(1.05) contrast(1.04);
  transition: transform .9s var(--ease-soft);
  will-change: transform;
}
.ind-card:hover .ind-card-photo::before{ transform: scale(1.16); }
.ind-card:hover .ind-card-photo::after{ transform: scale(1.05); }
.ind-card-photo ~ .ind-card-media{ display:none; }

/* faint blueprint schematic behind the icon, per-card texture */
.ind-card::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:0.16; pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.6) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(90% 70% at 50% 38%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 38%, #000 30%, transparent 85%);
}
/* dark overlay gradient for label legibility */
.ind-card::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, rgba(6,9,17,0.94) 0%, rgba(6,9,17,0.62) 34%, rgba(6,9,17,0.05) 62%, transparent 78%);
}

.ind-card-media{
  position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;
  padding-bottom: 18%;
}
.ind-card-icon{
  width: clamp(64px, 9vw, 96px); height: clamp(64px, 9vw, 96px);
  color: var(--brass-soft); opacity:0.88;
  filter: drop-shadow(0 8px 24px rgba(199,164,99,0.18));
  transition: transform .7s var(--ease), opacity .5s var(--ease);
  will-change: transform;
}
.ind-card:hover .ind-card-icon{ transform: scale(1.14) translateY(-6px); opacity:1; }

.ind-card-num{
  position:absolute; top:18px; left:18px; z-index:2;
  font-family: var(--f-display); font-size:0.74rem; letter-spacing:0.14em; color: rgba(244,246,249,0.5);
}

.ind-card-label{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 18px 20px 22px;
  background: rgba(15,22,38,0.28);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-top: 1px solid rgba(148,163,184,0.16);
  transform: translateY(8px);
  transition: transform .5s var(--ease);
}
.ind-card:hover .ind-card-label{ transform: translateY(0); }
.ind-card-label h4{
  font-family: var(--f-display); font-size: clamp(1.02rem, 1.6vw, 1.24rem); color: var(--white); font-weight:500;
}
.ind-card-label p{
  margin-top:8px; font-size:0.82rem; line-height:1.5; color: var(--text-dim);
  max-width: 42ch;
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease);
}
.ind-card:hover .ind-card-label p{ max-height:80px; opacity:1; }
@media (max-width: 900px){
  .ind-card-label p{ max-height:80px; opacity:1; }
  .ind-card-label{ transform: translateY(0); }
}

/* ---- Stats (Why Choose) ---- */
.stat-strip{ display:grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--line); margin-top: 10px; }
@media (max-width:900px){ .stat-strip{ grid-template-columns: repeat(2,1fr); } }
.stat-block{ background: var(--black); padding: 56px 26px 40px; text-align:left; position:relative; overflow:hidden; }
.stat-block::before{
  content: attr(data-idx); position:absolute; top:14px; left:26px;
  font-family: var(--f-display); font-size:0.68rem; letter-spacing:0.14em; color: var(--text-faint);
}
.stat-block .num{ font-family: var(--f-display); font-size: clamp(2.8rem,4.6vw,4.4rem); color: var(--white); display:flex; align-items:baseline; gap:2px; }
.stat-block .num .suf{ color: var(--brass); font-size: 0.5em; }
.stat-block .lbl{ margin-top: 14px; font-size:0.82rem; color: var(--text-dim); letter-spacing:0.02em; }

.why-checks{ display:grid; grid-template-columns: repeat(2,1fr); gap: 20px 40px; margin-top: 56px; }
@media (max-width:700px){ .why-checks{ grid-template-columns:1fr; } }
.why-check{ display:flex; gap:16px; align-items:flex-start; }
.why-check .mk{
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--brass);
  display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:var(--brass);
}
.why-check p{ font-size:0.92rem; color: var(--text-dim); margin:0; padding-top:3px; }

.placeholder-note{
  margin-top: 34px; font-size: 0.76rem; color: var(--text-faint);
  border-left: 2px solid var(--brass-deep); padding-left: 14px; max-width: 620px;
}
.section-on-paper .placeholder-note{ color: var(--ink-faint); }

/* ---- Global network ---- */
.globe-wrap{
  position:relative; display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
}
@media (max-width:900px){ .globe-wrap{ grid-template-columns:1fr; } }
.globe-canvas-box{ position:relative; aspect-ratio: 1/1; }
.globe-canvas-box canvas{ width:100% !important; height:100% !important; }
.network-list{ display:flex; flex-direction:column; gap:0; }
.network-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 0; border-bottom:1px solid var(--line);
}
.network-row .region{ font-family: var(--f-display); font-size:1.05rem; }
.network-row .meta{ font-size:0.78rem; color:var(--text-faint); letter-spacing:0.05em; }

/* ---- Process — single-line grid sequence ---- */
.process-panel{ width:100%; padding-right:0; }
.process-panel .pnum{ font-family: var(--f-display); font-size: clamp(2.3rem,3.4vw,3.8rem); color: var(--line-strong); line-height:1; }
.process-panel h4{ font-size: clamp(1.1rem,1.6vw,1.4rem); margin-top:18px; color:var(--white); }
.process-panel p{ font-size:0.9rem; color:var(--text-dim); margin-top:12px; max-width:28ch; }

/* ---- Testimonials — crossfade with giant background quote ---- */
.testi-wrap{ position:relative; }
.testi-wrap::before{
  content:'\201C'; position:absolute; top:-70px; left:-14px; z-index:0;
  font-family: var(--f-display); font-size: 16rem; line-height:1; color: rgba(247,246,242,0.045); pointer-events:none;
}
.testi-track{ position:relative; min-height: 320px; margin-bottom: 30px; z-index:1; }
.testi-card{
  position:absolute; inset:0; opacity:0; transform: scale(0.97) translateY(16px); pointer-events:none;
  background: var(--panel); border:1px solid var(--line);
  padding: clamp(30px,4vw,56px); border-radius: var(--radius);
  display:grid; grid-template-columns: auto 1fr; gap: 34px; align-items:flex-start;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.testi-card.is-active{ opacity:1; transform: scale(1) translateY(0); pointer-events:auto; z-index:2; }
@media (max-width:700px){ .testi-card{ grid-template-columns:1fr; } .testi-track{ min-height:480px; } }
.testi-card .mark{ font-family: var(--f-display); font-size:3.4rem; color: var(--brass); line-height:0.6; }
.testi-quote{ font-size: clamp(1.05rem,1.6vw,1.4rem); font-family: var(--f-display); font-weight:400; color:var(--white); line-height:1.4; }
.testi-who{ margin-top:24px; font-size:0.84rem; color:var(--text-faint); letter-spacing:0.03em; }
.testi-dots{ display:flex; gap:10px; margin-top:34px; }
.testi-dots button{
  width:8px; height:8px; border-radius:50%; border:1px solid var(--line-strong); background:none; padding:0;
  transition: background .3s, border-color .3s;
}
.testi-dots button.is-active{ background: var(--brass); border-color: var(--brass); }
.testi-nav{ display:flex; gap:14px; margin-top:34px; }
.testi-nav button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:none; color:var(--white);
  transition: border-color .3s, background .3s;
}
.testi-nav button:hover{ border-color: var(--brass); background: rgba(199,164,99,0.1); }

/* ---- Insights — asymmetric editorial grid ---- */
.insight-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: 28px; }
.insight-card:nth-child(1){ grid-column: span 4; }
.insight-card:nth-child(2){ grid-column: span 2; }
.insight-card:nth-child(3){ grid-column: span 6; }
.insight-card:nth-child(3) .insight-media{ aspect-ratio: 26/9; }
.insight-card:nth-child(1) .insight-media{ aspect-ratio: 20/11; }
@media (max-width:900px){
  .insight-grid{ grid-template-columns:1fr; }
  .insight-card{ grid-column: span 1 !important; }
  .insight-card .insight-media{ aspect-ratio: 16/10 !important; }
}
.insight-card{
  border:1px solid var(--line-on-paper); border-radius: var(--radius); overflow:hidden;
  background: var(--white); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.insight-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px rgba(12,13,15,0.12); }
.insight-media{
  aspect-ratio: 16/10; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(150deg, #172038 0%, var(--ink) 55%, #0a0e18 100%);
}
.insight-media::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:0.18; pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.6) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(85% 75% at 50% 45%, #000 30%, transparent 88%);
  -webkit-mask-image: radial-gradient(85% 75% at 50% 45%, #000 30%, transparent 88%);
}
.insight-media::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(199,164,99,0.16), transparent 72%);
}
.insight-icon{
  position:relative; z-index:1;
  width: clamp(48px, 7vw, 72px); height: clamp(48px, 7vw, 72px);
  color: var(--brass-soft); opacity:0.85;
  filter: drop-shadow(0 8px 22px rgba(199,164,99,0.2));
  transition: transform .6s var(--ease), opacity .5s var(--ease);
}
.insight-card:hover .insight-icon{ transform: scale(1.1) translateY(-4px); opacity:1; }
.insight-media .tag{
  position:absolute; top:16px; left:16px; z-index:2; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase;
  background: rgba(247,246,242,0.92); color:#0c0d0f; padding:6px 12px; border-radius:2px; font-weight:700;
}
.insight-body{ padding: 26px 24px 30px; }
.insight-body .meta{ font-size:0.72rem; color: var(--ink-faint); letter-spacing:0.06em; text-transform:uppercase; }
.insight-body h4{ margin-top:12px; font-size:1.08rem; color: var(--ink); line-height:1.3; }
.insight-body .go{ margin-top:18px; font-size:0.78rem; font-weight:600; color: var(--brass-deep); display:flex; align-items:center; gap:8px; }

/* ---- Statement — cinematic storytelling transition ---- */
.statement{ text-align:center; }
.statement-text{
  font-family: var(--f-display); font-weight:500; line-height:1.35;
  font-size: clamp(1.7rem,3.8vw,3.1rem); max-width:1040px; margin:0 auto; color: var(--ink-faint);
}
.statement-text .hl{
  position:relative; color: var(--ink);
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat:no-repeat; background-position:0 100%;
  background-size: var(--hlw, 0%) 3px;
}

/* ---- Contact ---- */
.contact-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; }
@media (max-width:960px){ .contact-wrap{ grid-template-columns:1fr; gap:50px; } }

.field{ margin-bottom: 24px; }
.field label{ font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-faint); }
.field input, .field textarea{
  width:100%; margin-top:10px; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  color: var(--white); font-family:var(--f-body); font-size:1rem; padding: 10px 2px; outline:none;
  transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color: var(--brass); }
.field textarea{ resize:vertical; min-height:110px; }
.field ::placeholder{ color: var(--text-faint); }

.form-status{ margin-top:16px; font-size:0.84rem; min-height:1.2em; color: var(--text-faint); }
.form-status--ok{ color: var(--brass-soft); }
.form-status--error{ color:#e07a6b; }

.info-list{ margin-top: 40px; display:flex; flex-direction:column; gap:22px; }
.info-row{ display:flex; gap:18px; align-items:flex-start; }
.info-row .k{ width:30px; height:30px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:var(--brass); flex:none; }
.info-row .v strong{ display:block; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-faint); margin-bottom:4px; }
.info-row .v span{ font-size:0.95rem; color:var(--white); }
.info-row .v em{ display:block; font-style:normal; color: var(--text-faint); font-size:0.78rem; margin-top:2px; }

.map-embed{ margin-top:34px; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; filter: grayscale(1) invert(0.92) contrast(0.9); }
.map-embed iframe{ width:100%; height:260px; border:0; display:block; }

.social-row{ display:flex; gap:14px; margin-top:30px; }
.social-row a{
  width:40px; height:40px; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:0.82rem;
  transition: background .3s, border-color .3s, color .3s;
}
.social-row a:hover{ background: var(--brass); border-color:var(--brass); color:#0c0d0f; }

/* ---- Footer ---- */
.footer{ background: var(--black-soft); border-top:1px solid var(--line); padding: 60px 0 30px; }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 40px; padding-bottom: 40px; border-bottom:1px solid var(--line); }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ height:28px; }
.footer-brand span{ font-family:var(--f-display); font-size:1.05rem; }
.footer-links{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-links h5{ font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--text-faint); margin-bottom:16px; font-weight:600; }
.footer-links ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-links a{ font-size:0.88rem; color: var(--text-dim); transition:color .3s; }
.footer-links a:hover{ color: var(--brass); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top: 26px; font-size:0.76rem; color: var(--text-faint); }

/* ---- Grain overlay ---- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Utility ---- */
.hide-mobile{ }
@media (max-width:700px){ .hide-mobile{ display:none !important; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}