/* ─────────────────────────────────────────────────────────────────────
   DELTA BLUE CAPITAL — homepage, 24 Sep 2026 redesign. Loads after site.css.
   One environment, scrolled through: the sea (hero) → the introduction → the course
   (capabilities) → deep water (strategies) → the horizon (close). Order and the globe's removal
   are the client's calls, 27 Sep. The shared world — tokens,
   type, links, nav, modules, the course, the close, footer, gate — lives in site.css; this is
   only what the homepage alone does.
   ───────────────────────────────────────────────────────────────────── */

/* ── section index: fixed, right edge, desktop only ──────────────── */
.idx{position:fixed;right:clamp(18px,2.4vw,40px);top:50%;transform:translateY(-50%);z-index:50;
  display:grid;gap:14px;justify-items:end;color:var(--ink);transition:color .6s var(--ease),opacity .6s var(--ease)}
.idx[data-tone="dark"]{color:var(--on-deep)}
.idx[data-off]{opacity:0}
.idx .count{font:500 11px/1 var(--sans);letter-spacing:.16em}
.idx .count b{font-weight:500}
.idx .count span{opacity:.5}
.idx .track{width:1px;height:92px;background:currentColor;opacity:.22;position:relative}
.idx .fill{position:absolute;left:0;top:0;width:1px;height:100%;background:currentColor;transform-origin:top;transform:scaleY(0)}
.idx .track+.name{margin-top:2px}
.idx .name{font:500 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl;opacity:.7}
@media (max-width:1180px){.idx{display:none}}

/* ── 01 hero: the sea ────────────────────────────────────────────── */
.hero{position:sticky;top:0;z-index:0;height:100svh;min-height:620px;overflow:hidden;background:#C9D6E0}
.hero .plate{position:absolute;inset:-2% 0 0;will-change:transform}
.hero .plate img,.hero .plate video{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:saturate(.8) contrast(1.03)}
.hero .plate video{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--slow)}
.hero .plate video[data-live]{opacity:1}
/* the clip was generated from the desktop crop, so the ship already sits two-thirds across */
/* the client wanted bluer water: a colour layer over the photo, strongest on the sea, fading off the sky */
.hero .tint{position:absolute;inset:0;background:#0E4C8A;mix-blend-mode:color;opacity:.5;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,rgba(0,0,0,.45) 0%,#000 40%);mask:linear-gradient(180deg,rgba(0,0,0,.45) 0%,#000 40%)}
/* the photo moves: a slow drift, never a loop you can see restart */
.hero .plate img{animation:drift 38s var(--slow) infinite alternate;transform-origin:62% 60%}
.hero .plate:has(video) img{animation:none}   /* the clip carries the motion; drift only if it is gone */
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.6%,-1%,0)}}
/* the ship sits right of the copy: a wider box anchored left pushes the vessel to ~2/3 across */
/* the still is the loop's own first frame, exported from the same source frame, already cropped with the
   ship two-thirds across; still and video share one box so the fade between them is invisible */
.hero .plate img.still,.hero .plate video{object-position:50% 50%}
/* light held behind the type, deeper water toward the foot */
.hero .plate::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,24,44,.62) 0%,rgba(4,24,44,.2) 34%,rgba(4,24,44,0) 56%,rgba(4,24,44,.28) 100%),
    linear-gradient(90deg,rgba(4,24,44,.5) 0%,rgba(4,24,44,.2) 42%,rgba(4,24,44,0) 66%)}
.hero .veil{position:absolute;inset:0;background:var(--mist);opacity:0;pointer-events:none}
.hero .copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-start;
  padding-top:clamp(120px,19vh,190px);color:#fff;will-change:transform,opacity}
.hero .copy .tag{color:rgba(240,245,249,.95)}
.hero h1{max-width:19ch}
.hero .lead{max-width:44ch;margin-top:clamp(22px,2.4vw,34px);color:rgba(255,255,255,.9)}
.hero .sub{max-width:44ch;font-size:15.5px;color:rgba(233,240,246,.8)}
.sub-m{display:none}
.hero .acts{display:flex;flex-wrap:wrap;gap:22px 40px;margin-top:clamp(28px,3vw,44px)}
.hero .foot{position:absolute;z-index:2;left:0;right:0;bottom:clamp(20px,3.6vh,36px)}
.hero .foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero .cue{display:flex;align-items:center;gap:14px;color:var(--on-deep);text-decoration:none}
.hero .cue i{width:20px;height:32px;border:1px solid currentColor;border-radius:12px;position:relative;opacity:.8}
.hero .cue i::after{content:'';position:absolute;left:50%;top:7px;width:1px;height:7px;background:currentColor;
  transform:translateX(-50%);animation:cue 2.6s var(--slow) infinite}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}
.hero .cue .meta,.hero .coord{color:var(--on-deep)}
.hero .coord{text-align:right}
.hero .coord span{opacity:.72}


/* ── 02 introduction: the chart of it ────────────────────────────── */
.intro{background:linear-gradient(180deg,var(--mist) 0%,var(--paper) 88%);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 150px);mask:linear-gradient(180deg,transparent 0,#000 150px);
  padding:clamp(96px,11vw,170px) 0 clamp(90px,10vw,150px);overflow:hidden}
.intro .wrap{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,64px);align-items:center}
.intro .tag{color:var(--ink-2)}   /* --ink-3 drops to 4.3:1 on the mist end */
.intro h2{max-width:none}
.intro h2 span{display:block}   /* one sentence per line: "Disciplined capital." stays together */
.intro .body{margin-top:clamp(22px,2.4vw,32px);max-width:44ch;color:var(--ink-2)}
.intro .go{margin-top:clamp(28px,3vw,40px)}

/* the delta beside the introduction (28 Sep; it replaced a photograph, which replaced the globe on
   27 Sep at the client's request). Drawn, not photographed. Geometry is the favicon's triangle (base : height 1 : 1.16),
   in a 760 x 640 box: apex 380,62 / base 170-590 at 549. Each side runs 64 units past its corners so
   the three lines visibly cross — the "intersection" in the copy */
.delta{position:relative;margin:0;justify-self:end;width:100%;max-width:660px;aspect-ratio:760/640}
.delta svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.delta line{stroke:rgba(11,27,44,.42);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.delta circle{fill:var(--paper);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
/* the fill is engraved, not photographed: one set of hairlines parallel to each side, strongest at its
   own side and fading toward the opposite corner (the masks), so the three only weave at the middle */
.delta .hatch path{fill:none;stroke:var(--blue);stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke}
.delta .core{fill:var(--navy)}   /* navy again since 5 Oct 2026 (gold from 2 Oct, at the client's request) */
.delta .lbl{position:absolute;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.7;color:var(--ink-2)}
.delta .l1{right:67.5%;top:47.66%;transform:translateY(-50%);text-align:right}
.delta .l2{left:67.5%;top:47.66%;transform:translateY(-50%)}
.delta .l3{left:50%;top:90.5%;transform:translateX(-50%);white-space:nowrap}
/* the one authored moment: sides draw, corners land, the three hatches arrive one by one, the centre mark last.
   It rides the page's reveal (.rv[data-in]); without JS or with reduced motion it is simply drawn */
.js .delta.rv{opacity:1;transform:none}
.js .delta line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease)}
.js .delta .s2{transition-delay:.14s}.js .delta .s3{transition-delay:.28s}
.js .delta circle{opacity:0;transition:opacity .6s var(--ease) .9s}
.js .delta .hatch{opacity:0;transition:opacity 1.4s var(--ease) .7s}
.js .delta .h2{transition-delay:1s}.js .delta .h3{transition-delay:1.3s}
.js .delta .core{opacity:0;transform:scale(.4);transform-origin:380px 386.7px;transition:opacity .8s var(--ease) 1.9s,transform 1.1s var(--ease) 1.9s}
.js .delta .lbl{opacity:0;transition:opacity .9s var(--ease) 1.6s}
.js .delta[data-in] line{stroke-dashoffset:0}
.js .delta[data-in] circle,.js .delta[data-in] .lbl{opacity:1}
.js .delta[data-in] .hatch{opacity:1}
.js .delta[data-in] .core{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .delta *{transition-delay:0s!important}}
@media (min-width:1181px){.intro .wrap{padding-right:56px}}
@media (max-width:980px){
  .intro .wrap{grid-template-columns:1fr}
  .delta{justify-self:center;margin-top:44px}
}

/* ── 03 strategies: deep water ───────────────────────────────────── */
.strat{background:var(--deep);color:var(--on-deep);padding:clamp(100px,11vw,168px) 0 clamp(96px,10vw,150px);overflow:hidden;isolation:isolate}
.strat .water{position:absolute;inset:0;z-index:-1}
.strat .water img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.62)}
.strat .water::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,24,44,.96) 0%,rgba(4,24,44,.72) 40%,rgba(4,24,44,.9) 100%)}
.strat .tag{color:var(--on-deep-2)}
.strat .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,90px);align-items:end}
.strat h2{max-width:14ch}
.strat .head .lead{color:var(--on-deep-2);max-width:46ch}
.strat .head .go{margin-top:clamp(22px,2.4vw,30px)}
/* strategy titles hold one line (client, 28 Sep). The size steps down only where the card is too
   narrow for the longest title, "Ship Trading & Asset Finance" at ~12.2em: re-measure if one is
   renamed. Two columns start at 1240, not 1100, so four cards never push the titles under ~18px */
.strat .mod .txt{container-type:inline-size}
.strat .mod h3{white-space:nowrap;font-size:min(clamp(20px,1.55vw,25px),100cqi / 12.4)}
@media (min-width:1101px) and (max-width:1240px){.strat .mods{grid-template-columns:repeat(2,minmax(0,1fr))}.strat .mod{min-height:440px}}

/* ── 04 capabilities: the course ─────────────────────────────────── */
.caps{background:var(--paper);padding:0 0 clamp(96px,10vw,150px)}
.caps > .wrap{border-top:1px solid var(--line);padding-top:clamp(80px,8vw,130px)}
.caps .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,90px);align-items:end}
.caps h2{max-width:15ch}
.caps .head .lead{max-width:46ch}
.caps .go{margin-top:clamp(52px,5.4vw,80px)}
@media (max-width:900px){.caps .head{grid-template-columns:1fr;gap:18px}}
@media (max-width:760px){.strat .head{grid-template-columns:1fr;gap:18px}}

/* phones: the copy sits on sky, the ship gets its own space below it */
@media (max-width:760px){
  .hero{position:relative;height:auto;min-height:100svh}
  .hero .plate{inset:0}
  .hero .plate{overflow:hidden}
  .hero .plate img{height:136%;object-position:52% 0}
  .hero .plate::after{background:linear-gradient(180deg,rgba(4,24,44,.66) 0%,rgba(4,24,44,.42) 48%,rgba(4,24,44,0) 68%,rgba(230,236,241,0) 86%,var(--mist) 100%)}
  .hero .copy{height:auto;padding:clamp(108px,15vh,130px) 0 38svh}
  .hide-m{display:none}
  .hero .cue{display:none}
  .intro{-webkit-mask:none;mask:none}
  .sub-m{display:block;margin:0 0 clamp(80px,22vw,110px);color:var(--ink-2)}
  .intro{padding-top:28px}
  .hero .acts{flex-direction:column;align-items:flex-start;gap:20px}
  .hero .coord{display:none}
}

@media (prefers-reduced-motion:reduce){.hero{position:relative}.hero .plate img{animation:none}}
@media (max-height:620px){.hero{position:relative}}   /* taller than the screen: scroll it, don't pin it */

/* phones: the still and the clip share one crop that centres the ship (after the general rule, so it wins) */
@media (max-width:760px){.hero .plate img.still,.hero .plate video{height:100%;object-position:71% 50%}}