/* ==========================================================================
   J GROUP — Across Oceans. Into Projects.
   Design tokens
   ========================================================================== */
:root{
  --navy:#0c2136;
  --navy-deep:#071522;
  --navy-mid:#122c46;
  --white-warm:#faf7f1;
  --stone:#eeece4;
  --stone-dark:#dfd9c9;
  --turquoise:#5eb3ac;
  --turquoise-soft:#8fd0c9;
  --ink:#0f1e2c;
  --line:rgba(15,30,44,.14);
  --line-light:rgba(250,247,241,.22);

  --font-serif:'Playfair Display','Frank Ruhl Libre',serif;
  --font-sans:'Inter','Heebo',sans-serif;
  --font-hero:'Fraunces','Playfair Display',serif;

  --ease:cubic-bezier(.16,.8,.24,1);
  --nav-h:84px;
}

html[data-lang="he"]{
  --font-serif:'Frank Ruhl Libre','Playfair Display',serif;
  --font-sans:'Heebo','Inter',sans-serif;
  --font-hero:'Frank Ruhl Libre','Fraunces',serif;
}

*,*::before,*::after{box-sizing:border-box;}

/* Screen-reader/SEO only: present in the accessibility tree and document
   outline, never visible. Used where the real heading is split across a
   composition (see the Hero's h1) rather than a single visible element. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

body{
  margin:0;
  background:var(--white-warm);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;}
h1,h2,h3,p{margin:0;}

::selection{background:var(--turquoise);color:var(--navy-deep);}

/* One consistent keyboard-focus indicator for every interactive element,
   sitewide — a visible ring, never suppressed. Components may still add
   their own additional focus treatment (e.g. the form fields' border-color
   shift) on top of this, but this is the floor everyone gets. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--turquoise);
  outline-offset:3px;
}

/* ==========================================================================
   Utility
   ========================================================================== */
.eyebrow{
  font-family:var(--font-sans);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  opacity:.6;
  margin-bottom:2rem;
}
.eyebrow--light{color:var(--white-warm);opacity:.7;}

.giant{
  font-family:var(--font-serif);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.01em;
  font-size:clamp(2.6rem,7vw,6.4rem);
  max-width:20ch;
  text-wrap:balance;
}
.giant--ink{color:var(--ink);}
.giant--light{color:var(--white-warm);}

.btn{
  display:inline-block;
  padding:1rem 2.2rem;
  font-family:var(--font-sans);
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid currentColor;
  transition:background .5s var(--ease),color .5s var(--ease);
}
.btn--ghost-light{color:var(--white-warm);}
.btn--ghost-light:hover{background:var(--white-warm);color:var(--navy-deep);}
.btn--ink{color:var(--ink);border-color:var(--ink);}
.btn--ink:hover{background:var(--ink);color:var(--white-warm);}

.section{
  position:relative;
  width:100%;
}

/* reveal system: soft-mask style reveal (clip + slight rise), not plain fade */
.reveal-up,.reveal-mask{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.reveal-up.is-visible,.reveal-mask.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-mask{transition-duration:1.2s;}

/* stagger children that opt in */
[data-stagger] > *{transition-delay:calc(var(--i,0) * 120ms);}

/* ==========================================================================
   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(--turquoise);opacity:0;transition:opacity .3s;}
.cursor-ring{width:34px;height:34px;border:1px solid var(--turquoise-soft);opacity:0;transition:width .25s,height .25s,opacity .3s;}
.cursor-dot.is-visible{opacity:1;}
.cursor-ring.is-visible{opacity:.6;}
.cursor-ring.is-visible.is-active{width:54px;height:54px;opacity:.9;}
@media (hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none;}
}

.scroll-progress{
  position:fixed;top:0;left:0;height:2px;background:var(--turquoise);
  width:0%;z-index:9998;transition:width .1s linear;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.25rem,4vw,3rem);
  height:var(--nav-h);
  background:transparent;
  transition:background .5s var(--ease),padding .4s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(250,247,241,.97);
  border-bottom-color:var(--line);
}
.nav.is-solid .nav__links a,.nav.is-solid .nav__lang{color:var(--ink);}
.nav__logo{display:flex;align-items:center;}
.nav__links{display:flex;align-items:center;gap:2.2rem;}

/* J GROUP brandmark: the supplied logo file bakes the "GROUP" wordmark in as a
   small tag near the bottom of the J, which reads as cramped at nav/hero scale.
   Mark and wordmark are cropped as two separate images (pixels untouched) and
   recomposed here with deliberate spacing/alignment instead. */
.brandmark{position:relative;display:inline-flex;align-items:flex-start;}
.brandmark__mark{display:block;width:auto;}
.brandmark__word{position:absolute;top:72.6%;transform:translateY(-50%);width:auto;max-width:none;}
/* the wordmark is position:absolute (so it can be offset vertically, independent
   of the mark) which means it doesn't count toward this box's own layout width —
   margin-right reserves that visual space in the surrounding flex layout so nav's
   flex order reversing in RTL can't push it past the viewport edge. Physical
   margin-right on purpose, not a logical/RTL-flipping property: the wordmark
   always extends rightward relative to the mark (see note above), so the space
   that needs reserving is always on that same physical side. */
.brandmark--nav .brandmark__mark{height:30px;}
.brandmark--nav .brandmark__word{height:9px;left:calc(100% + 8px);}
.brandmark--nav{margin-right:53px;}
/* The mark→wordmark relationship is fixed brand identity, not reading-direction
   text — it must not mirror in RTL (a logo that flips per language would read as
   a different mark, not the same brand). Only the surrounding layout (nav flex
   order, page alignment) should respond to dir; this component intentionally
   ignores it. */
.nav__links a{
  font-size:.8rem;letter-spacing:.04em;color:var(--white-warm);
  position:relative;transition:color .4s;
}
.nav__links a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--turquoise);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1);}
/* Current-section indicator: the same underline device the hover state
   already uses, just persistent — a quiet "you are here", not a progress
   bar. Weight shifts slightly too so it registers even without color. Base
   links stay at full opacity throughout (including over the Hero video) —
   dimming inactive links bought no orientation signal there, since nothing
   is ever "active" while still on Hero, and just cost contrast. */
.nav__links a.is-active{font-weight:600;}
.nav__links a.is-active::after{transform:scaleX(1);}
.nav__cta{
  border:1px solid currentColor;padding:.55rem 1.1rem;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.nav__lang{
  font-size:.72rem;letter-spacing:.08em;color:var(--white-warm);
  display:flex;gap:.35rem;transition:color .4s;
}
.lang-en,.lang-he{opacity:.45;}
[data-lang="en"] .lang-en{opacity:1;}
[data-lang="he"] .lang-he{opacity:1;}
.nav__burger{display:none;flex-direction:column;gap:5px;width:26px;}
.nav__burger span{display:block;height:1px;background:var(--white-warm);transition:transform .3s,opacity .3s,background .3s;}
.nav.is-solid .nav__burger span{background:var(--ink);}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 0 0;background:var(--navy-deep);
  z-index:400;display:flex;flex-direction:column;align-items:stretch;
  justify-content:center;gap:2.4rem;padding:2rem clamp(1.25rem,6vw,3rem);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.mobile-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.mobile-menu__links{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;}
.mobile-menu__links a{
  font-family:var(--font-serif);font-size:1.65rem;color:var(--white-warm);
  opacity:.72;transition:opacity .3s,color .3s;
}
.mobile-menu__links a.is-active{opacity:1;color:var(--turquoise-soft);}
.mobile-menu__cta{
  display:block;text-align:center;align-self:stretch;
  font-family:var(--font-sans);
}

@media (max-width:860px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
}

/* ==========================================================================
   01 Hero
   ========================================================================== */
.hero{
  height:100svh;min-height:560px;
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  background:var(--navy-deep);
  overflow:hidden;
}
.ocean-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hero__media{position:absolute;inset:0;overflow:hidden;}
.hero__ocean{
  width:100%;height:100%;object-fit:cover;
  object-position:center 14%;
  transform:scale(1);
  animation:heroOceanDrift 34s ease-in-out infinite alternate;
}
@media (max-width:700px){
  .hero__ocean{
    /* mobile crop is composed independently of desktop: biased well into the
       calmer upper water rather than the busiest mid-frame surf. */
    object-position:center 4%;
    animation-name:heroOceanDriftMobile;
  }
}
@keyframes heroOceanDrift{
  from{transform:scale(1);}
  to{transform:scale(1.025);}
}
@keyframes heroOceanDriftMobile{
  from{transform:scale(1.04);}
  to{transform:scale(1.06);}
}
@media (prefers-reduced-motion:reduce){
  .hero__ocean{animation:none;}
}
body.hero-video-active #heroOceanImg{animation-play-state:paused;}
/* Video sits on top of the static image, same fill/crop, fading in only once
   it is actually decoding and playing — the image is the real first paint and
   the permanent fallback, never a placeholder waiting on the video. The poster
   image is generated from the video's own first frame, so this handoff is a
   short safety blend for decode/compression variance, not a cover-up fade —
   kept brief on purpose so the switch reads as continuous, not cinematic. */
.hero__ocean-video{
  position:absolute;inset:0;
  opacity:0;
  animation:none;
  transition:opacity .5s var(--ease);
}
.hero__ocean-video.is-active{opacity:1;}
.hero__vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,14,23,.22) 0%,rgba(5,14,23,.05) 30%,rgba(5,14,23,.18) 68%,rgba(5,14,23,.48) 100%),
    radial-gradient(ellipse at center,rgba(5,14,23,0) 32%,rgba(5,14,23,.22) 100%);
  pointer-events:none;
}
/* Hero statement — "The Crossing" as typography: FROM SOURCE. and TO PROJECT.
   occupy opposite corners of the frame, joined by a thin measure that fills
   as the page settles. Same device as Solution's node-and-line, staged first.
   Text-shadow (not a scrim) carries legibility here, since the two statements
   sit in different, independently-moving parts of the footage rather than
   one fixed zone a single scrim could cover. */
.hero__stage{
  position:relative;z-index:2;flex:1;width:100%;
  display:grid;grid-template-rows:.62fr auto .38fr;
  padding:clamp(5.5rem,13vh,8rem) clamp(1.5rem,6vw,5rem) clamp(2.4rem,7vh,4.2rem);
  max-width:1400px;margin:0 auto;
}
.hero__crossing-rule{
  grid-row:1/4;grid-column:1/-1;justify-self:center;align-self:stretch;
  position:relative;width:1px;margin:0 auto;
  background:rgba(250,247,241,.22);
  /* this element's own reveal is a line-draw (see .hero__crossing-fill), not
     the generic reveal-mask fade+rise, so neutralize that default here */
  opacity:1;transform:none;transition:none;
}
.hero__crossing-fill{
  position:absolute;left:0;top:0;width:100%;height:0%;
  background:var(--turquoise-soft);
  transition:height 1s var(--ease) .95s;
}
.hero__crossing-rule.is-visible .hero__crossing-fill{height:100%;}
.hero__statement{
  font-family:var(--font-hero);
  font-optical-sizing:auto;
  font-weight:340;
  line-height:1.04;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--white-warm);
  font-size:clamp(1.9rem,4.6vw,3.6rem);
  text-shadow:0 2px 28px rgba(3,9,15,.55),0 1px 3px rgba(3,9,15,.35);
}
html[data-lang="he"] .hero__statement{text-transform:none;}
.hero__source{grid-row:1;align-self:start;justify-self:start;text-align:start;transition-delay:.3s;}
.hero__project{grid-row:3;align-self:start;justify-self:end;text-align:end;transition-delay:1.75s;}
.hero__source span,.hero__project span{display:block;}
.hero__cta{
  display:inline-block;margin-top:1.3rem;
  font-family:var(--font-sans);font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--white-warm);
  padding-bottom:.3rem;border-bottom:1px solid rgba(250,247,241,.4);
  text-shadow:0 1px 14px rgba(3,9,15,.5);
  transition:border-color .3s,opacity .3s;
}
.hero__cta:hover{border-color:var(--white-warm);opacity:.8;}
.hero__cta::after{content:"\2192";margin-inline-start:.55em;}
html[dir="rtl"] .hero__cta::after{content:"\2190";}
@media (max-width:700px){
  .hero__stage{grid-template-rows:.58fr auto .42fr;}
  .hero__statement{font-size:clamp(1.7rem,7.4vw,2.4rem);}
}
.hero__scroll-cue{
  position:absolute;bottom:2.6rem;left:50%;transform:translateX(-50%);
}
.hero__scroll-line{
  display:block;width:1px;height:56px;background:linear-gradient(var(--turquoise-soft),transparent);
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{transform:scaleY(0);transform-origin:top;opacity:0;}
  40%{transform:scaleY(1);transform-origin:top;opacity:1;}
  60%{transform:scaleY(1);transform-origin:bottom;opacity:1;}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0;}
}

/* ==========================================================================
   02 The Route — one mechanism, not two sections explaining the same idea
   twice. The usual route is stated once, plainly and at full length; under
   the visitor's own (unpinned) scroll it compresses into Manufacturer —
   J GROUP — Project. See initScrollMechanisms() in main.js.
   ========================================================================== */
.route{
  background:var(--white-warm);
  padding:7rem clamp(1.25rem,6vw,4rem) 6rem;
}
.route__eyebrow{
  max-width:900px;margin:0 auto 2.5rem;text-align:center;
  font-size:.86rem;letter-spacing:.26em;opacity:.78;font-weight:500;
}

/* -- Live (desktop, motion-enabled): one horizontal row, compressed by scroll.
   Sized for a single line of content, not a cavernous scroll-jack box — the
   route is the hero of this section and should never feel adrift in empty
   space. -- */
.route__flow--live{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:36vh;
}
.route__row{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;
  max-width:1180px;margin:0 auto;row-gap:1.3rem;
}
.route__node{
  font-family:var(--font-sans);font-size:.95rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);opacity:.62;padding:.6rem 0;
  flex:none;white-space:nowrap;
}
.route__node--end{color:var(--ink);opacity:1;font-size:1.05rem;letter-spacing:.2em;font-weight:500;}
.route__brand-wrap{position:relative;display:flex;align-items:center;flex:none;}
.route__node--brand{
  position:absolute;left:50%;top:50%;
  font-family:var(--font-hero);font-style:italic;font-weight:600;
  font-size:2.35rem;letter-spacing:0;text-transform:none;white-space:nowrap;
  color:var(--turquoise);
  opacity:0;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .1s linear;
}
.route__mid{
  display:block;flex:none;overflow:hidden;white-space:nowrap;
  font-family:var(--font-sans);font-size:.86rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);opacity:.62;
  padding:.4rem .2rem;max-width:9rem;
}
.route__sep{width:2.2rem;height:1px;background:rgba(15,30,44,.3);flex:none;}
.route__line{position:relative;width:1.1rem;height:1px;background:rgba(15,30,44,.3);overflow:hidden;flex:none;}
.route__line-fill{position:absolute;left:0;top:0;width:0%;height:100%;background:var(--turquoise);}

.route__resolved-label{
  font-family:var(--font-sans);font-size:.86rem;letter-spacing:.24em;font-weight:500;
  text-transform:uppercase;color:var(--turquoise);opacity:0;
  margin-top:1.4rem;transition:opacity .6s var(--ease);
}
.route__flow--live.is-resolved .route__resolved-label{opacity:1;}

/* -- Static (mobile, or reduced motion at any width): a vertical before/after
   stack, art-directed on its own terms — no scroll-scrub, just the standard
   reveal-on-enter used everywhere else on the site. -- */
.route__flow--static{display:none;max-width:360px;margin:0 auto;}
.route__stack{display:flex;flex-direction:column;align-items:center;}
.route__vnode{
  font-family:var(--font-sans);font-size:.9rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);opacity:.68;padding:.34rem 0;
}
.route__vnode--mid{font-size:.82rem;opacity:.56;}
.route__vnode--brand{
  font-family:var(--font-hero);font-style:italic;font-weight:600;
  font-size:1.9rem;letter-spacing:0;text-transform:none;color:var(--turquoise);
  padding:.4rem 0;
}
.route__stack .route__vnode:first-child,.route__stack .route__vnode:last-child{
  color:var(--ink);opacity:1;font-size:1rem;letter-spacing:.16em;font-weight:500;
}
.route__varrow{width:1px;height:1.4rem;background:rgba(15,30,44,.32);}
.route__pivot{display:flex;justify-content:center;padding:1.1rem 0;}
.route__pivot-line{width:1px;height:1.8rem;background:var(--turquoise);}
.route__flow--static .route__resolved-label{
  opacity:1;text-align:center;margin:0 0 .5rem;
}

body.route-static .route__flow--live{display:none;}
body.route-static .route__flow--static{display:flex;flex-direction:column;align-items:center;}
/* Mobile needs more top clearance than the desktop live row: real phones
   (Safari's own chrome, or an in-app browser's "back to app" banner on top
   of it) leave noticeably less usable viewport height than a resized desktop
   window does, so the section's entry must not rely on a tight margin to
   read cleanly. */
body.route-static .route{padding-top:9.5rem;}
body.route-static .route__eyebrow{margin-bottom:3rem;}

.route__resolve{
  max-width:640px;margin:3rem auto 0;text-align:center;
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  color:var(--turquoise);font-size:clamp(1.1rem,1.9vw,1.35rem);
}

@media (max-width:600px){
  .route__mid{font-size:.78rem;}
  .route__sep{width:1.4rem;}
}

/* ==========================================================================
   03 The Process — a fast, normal-flow mechanism, not a pinned sequence.
   The Crossing here is a traveling marker: information (the BOQ) moving
   through the system, read top-to-bottom at the visitor's own scroll speed.
   ========================================================================== */
.process{background:var(--navy-deep);padding:8rem clamp(1.25rem,6vw,4rem);}
.process__inner{max-width:900px;margin:0 auto;text-align:center;}
.process__inner .giant{margin:1.6rem auto 5rem;max-width:16ch;}
.process__flow{position:relative;max-width:620px;margin:0 auto;text-align:start;}
.process__rule{
  position:absolute;inset-inline-start:1.4rem;top:1.8rem;bottom:1.8rem;width:1px;
  background:rgba(250,247,241,.18);
}
.process__rule-fill{position:absolute;left:0;top:0;width:100%;height:0%;background:var(--turquoise-soft);}
.process__rule-marker{
  position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--turquoise);transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px rgba(94,179,172,.16);
}
.process__step{
  position:relative;display:grid;grid-template-columns:2.8rem 1fr;column-gap:1.3rem;
  padding:2rem 0;
}
.process__num{
  font-family:var(--font-serif);font-style:italic;color:var(--turquoise-soft);
  font-size:1.05rem;text-align:center;
}
.process__step-body h3{
  font-family:var(--font-serif);font-weight:400;color:var(--white-warm);
  font-size:clamp(1.25rem,2.8vw,1.65rem);margin-bottom:.6rem;max-width:26ch;
}
.process__step-body p{
  color:var(--white-warm);opacity:.68;font-size:.98rem;max-width:38ch;
}

/* ==========================================================================
   05 Why J Group — "The Spine". Five parallel capabilities read down a single
   editorial column; ticks off a structural rule (not a sequence number) mark
   each, since these are infrastructure, not steps. No carousel, no cards.
   ========================================================================== */
.why{background:var(--white-warm);padding:8rem clamp(1.25rem,6vw,4rem) 0;}
.why__opening{max-width:820px;margin:0 auto;text-align:center;padding-bottom:5rem;}
.why__opening .giant{margin:1.4rem auto 0;max-width:18ch;}

.why__spine{position:relative;max-width:760px;margin:0 auto;}
.why__spine-rule{
  position:absolute;inset-inline-start:0;top:.5rem;bottom:.5rem;width:1px;
  background:var(--line);
}
.why__item{
  position:relative;padding:2.6rem 0 2.6rem clamp(2.2rem,6vw,3.4rem);
}
html[dir="rtl"] .why__item{padding:2.6rem clamp(2.2rem,6vw,3.4rem) 2.6rem 0;}
.why__tick{
  position:absolute;inset-inline-start:0;top:3.1rem;width:1.6rem;height:1px;
  background:var(--turquoise);
}
.why__item--offset{margin-inline-start:clamp(1.5rem,5vw,3rem);}
.why__label{
  font-family:var(--font-sans);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);opacity:.5;margin-bottom:1rem;
}
.why__statement{
  font-family:var(--font-serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.2;
  margin-bottom:1rem;max-width:16ch;
}
.why__copy{max-width:44ch;color:var(--navy);opacity:.65;font-size:1rem;}

/* The convergence beat: the spine doesn't just list five parallel truths —
   it closes with the one sentence that names them as a single coordinated
   relationship. A cap on the line, not a sixth capability card. */
.why__resolve{
  position:relative;margin-top:1rem;padding-inline-start:clamp(2.2rem,6vw,3.4rem);
  padding-top:2.6rem;padding-bottom:.5rem;
}
html[dir="rtl"] .why__resolve{padding-inline-start:0;padding-inline-end:clamp(2.2rem,6vw,3.4rem);}
.why__resolve-cap{
  position:absolute;inset-inline-start:0;top:0;width:7px;height:7px;
  border-radius:50%;background:var(--turquoise);
  transform:translateX(-3px);
}
html[dir="rtl"] .why__resolve-cap{transform:translateX(3px);}
.why__resolve-statement{
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  color:var(--turquoise);font-size:clamp(1.05rem,1.8vw,1.3rem);
}

/* ==========================================================================
   08 Logistics — the physical climax of The Crossing. Everywhere else the
   relationship has been a line, a compression, a marker, a spine: here it
   becomes real-world scale — a static, elevated view of Victoria Harbour,
   Hong Kong, where Seaway Logistics maintains an office. The footage's own
   timelapse cloud/light movement carries the "movement" idea; nothing is
   drawn on top of it beyond a quiet, factual location tag.
   ========================================================================== */
.logistics{background:var(--navy-deep);overflow:hidden;}
.logistics__void{padding:clamp(4rem,11vh,7.5rem) clamp(1.25rem,6vw,4rem);text-align:center;}
.logistics__void--top{padding-bottom:clamp(3rem,8vh,5rem);}
.logistics__void--bottom{padding-top:clamp(2.5rem,7vh,4.5rem);max-width:640px;margin:0 auto;}
.logistics .giant{margin:1.2rem auto 0;max-width:18ch;}
.logistics__copy{color:var(--white-warm);opacity:.85;font-size:1.05rem;}
.logistics__copy strong{color:var(--turquoise-soft);font-weight:500;}
.logistics__secondary{margin-top:.8rem;color:var(--white-warm);opacity:.5;font-size:.85rem;}

.logistics__stage{position:relative;width:100%;height:clamp(420px,62vh,760px);overflow:hidden;}
.logistics__stage-media{position:absolute;inset:0;}
.logistics__hk{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block;}
.logistics__hk-video{position:absolute;inset:0;opacity:0;animation:none;transition:opacity .5s var(--ease);}
.logistics__hk-video.is-active{opacity:1;}
.logistics__stage-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,21,34,.55) 0%,rgba(7,21,34,0) 22%,rgba(7,21,34,0) 76%,rgba(7,21,34,.62) 100%);
}
.logistics__geo{
  position:absolute;z-index:2;
  top:clamp(1.5rem,4vh,2.75rem);inset-inline-start:clamp(1.25rem,5vw,3.5rem);
  display:flex;flex-direction:column;gap:.3rem;
  padding:.65rem 1rem;
  background:rgba(7,21,34,.38);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.logistics__geo-place{
  font-family:var(--font-sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white-warm);
}
.logistics__geo-partner{
  font-family:var(--font-sans);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--turquoise-soft);opacity:.85;
}
@media (max-width:600px){
  .logistics__geo-place{font-size:.62rem;letter-spacing:.12em;}
  .logistics__geo-partner{font-size:.56rem;}
}

/* ==========================================================================
   09 About — a warm editorial pause between the infrastructure proof
   (Logistics) and the ask (Contact). One narrative read top to bottom, not
   a founder-bio grid: opening statement, two short paragraphs bracketing a
   quiet highlight, a single pivot line marking where the story turns from
   observation to founding, three short purpose lines, then the vision beat
   — the strongest type in the section, since it is the section's payoff.
   ========================================================================== */
.about{background:var(--stone);padding:8rem clamp(1.25rem,6vw,4rem);}
.about__inner{max-width:700px;margin:0 auto;text-align:center;}
.about__inner .eyebrow{margin-bottom:2.4rem;}
.about__opening{
  font-family:var(--font-serif);font-weight:400;line-height:1.32;
  color:var(--ink);font-size:clamp(1.6rem,3.6vw,2.5rem);
  max-width:26ch;margin:0 auto 3.2rem;
}
.about__body{
  font-size:1.05rem;line-height:1.68;color:var(--navy);opacity:.72;
  max-width:54ch;margin:0 auto 2.2rem;
}
.about__highlight{
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  color:var(--turquoise);font-size:clamp(1.15rem,2.2vw,1.4rem);
  max-width:32ch;margin:2.8rem auto;line-height:1.42;
}
.about__pivot{display:flex;justify-content:center;padding:.6rem 0 2.4rem;}
.about__pivot-line{width:1px;height:2.2rem;background:var(--turquoise);}
.about__founded{
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  color:var(--turquoise);font-size:clamp(1.15rem,2.2vw,1.4rem);
  margin-bottom:2.8rem;
}
.about__purpose{
  display:flex;flex-direction:column;gap:1.2rem;
  max-width:50ch;margin:0 auto 3.6rem;
}
.about__purpose p{font-size:1.02rem;line-height:1.6;color:var(--navy);opacity:.72;}
.about__vision{margin-top:.5rem;}
.about__vision-quiet{
  font-family:var(--font-serif);color:var(--ink);opacity:.48;
  font-size:clamp(1.05rem,2vw,1.25rem);margin-bottom:1rem;
}
.about__vision-strong{
  font-family:var(--font-serif);font-weight:500;color:var(--ink);
  font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1.28;
  max-width:19ch;margin:0 auto;
}
.about__vision-strong .accent{color:var(--turquoise);font-style:italic;}

@media (max-width:600px){
  .about{padding:7rem clamp(1.25rem,6vw,4rem);}
  .about__body,.about__purpose p{font-size:1rem;}
}

/* ==========================================================================
   10 Contact
   ========================================================================== */
.contact{
  background:var(--white-warm);
  padding:8rem clamp(1.25rem,6vw,4rem) 6rem;
}
.contact__inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;
}
.contact__copy{color:var(--navy);opacity:.72;font-size:1.02rem;max-width:36ch;margin-top:1.4rem;}

.contact__form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
.field{display:flex;flex-direction:column;gap:.5rem;}
.field--half{grid-column:span 1;}
.field:not(.field--half){grid-column:1 / -1;}
.field label{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);opacity:.55;
}
.field input,.field textarea{
  border:none;border-bottom:1px solid var(--line);background:transparent;
  padding:.6rem .1rem;font-family:var(--font-sans);font-size:1rem;color:var(--ink);
  transition:border-color .3s;
}
.field input:focus,.field textarea:focus{border-color:var(--turquoise);}
.field textarea{resize:vertical;}

.upload{
  border:1px dashed var(--line);
  padding:1.3rem 1rem;text-align:center;cursor:pointer;
  transition:border-color .3s,background .3s;
}
.upload:hover,.upload.is-dragover{
  border-color:var(--turquoise);background:rgba(94,179,172,.05);
}
.upload__hint{font-size:.78rem;color:var(--navy);opacity:.5;}
.upload__file{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
}
.upload__filename{font-size:.9rem;color:var(--ink);word-break:break-all;}
.upload__remove{
  flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;line-height:1;color:var(--navy);
  transition:background .3s,color .3s,border-color .3s;
}
.upload__remove:hover{background:var(--navy);color:var(--white-warm);border-color:var(--navy);}
.upload__error{
  font-size:.78rem;color:#b5533e;min-height:1.1em;margin:0;
}

.contact__reassure{
  grid-column:1 / -1;font-size:.82rem;color:var(--navy);opacity:.55;margin-top:.6rem;
}
.contact__form .btn{grid-column:1 / -1;justify-self:start;margin-top:.6rem;}
.contact__form .btn:disabled{opacity:.55;cursor:default;}
.contact__note{grid-column:1 / -1;font-size:.85rem;color:var(--turquoise);min-height:1.2em;}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background:var(--navy-deep);color:var(--white-warm);
  padding:4rem 1.5rem 2.5rem;text-align:center;
}
.footer__mark{width:26px;margin:0 auto 1.2rem;}
.footer__line{font-family:var(--font-serif);font-size:1.1rem;margin-bottom:1.6rem;opacity:.85;}
.footer__direct{
  display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;
  margin-bottom:1.8rem;font-size:.82rem;
}
.footer__direct a{opacity:.6;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s;}
.footer__direct a:hover{opacity:1;border-color:currentColor;}
.footer__copy{font-size:.75rem;opacity:.4;letter-spacing:.03em;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:860px){
  .contact__inner{grid-template-columns:1fr;gap:3rem;}
  .contact__form{grid-template-columns:1fr;}
  .field--half{grid-column:1 / -1;}
  .route,.logistics,.about,.contact{padding-left:1.25rem;padding-right:1.25rem;}
}

@media (max-width:600px){
  .giant{font-size:clamp(2.1rem,9vw,3.2rem);}
}

/* RTL logical adjustments */
html[dir="rtl"] .hero__scroll-line{background:linear-gradient(var(--turquoise-soft),transparent);}