/* home.css: the home page's half of the concept's site.css (R1, 2026 rebrand).
   Loaded by / only, after core.css. It holds the home-only rules: the type and
   links the screens use, the isometric figures, the screens themselves, the fixed
   line and the rail, the globe and its caption, the client strip, the connections
   list, and the home rows of the concept's mixed phone and tablet media blocks
   (each re-wrapped in its own @media here). Source order is kept.

   R2 applied the owner's changes made after approval (docs/rebrand-2026.md § Owner
   changes): the per-screen phone line bands are gone, the fixed line runs behind
   every width, and below 1024px it is dimmed and the copy that is not #F2F4F8 sits
   on a solid backdrop (test/home-line.test.mjs checks the contrast). Two classes
   key on JS: html.js (a one-line script in the head) hides the line until home.js
   sets its opacity, and html.is-home (added by home.js) turns on section paging (R8a:
   mandatory scroll snap, one input moves one screen). Without JS neither appears: the
   baked line shows and the page scrolls plainly.
   Website/ is the source from here on (PLAN.md A16). */
/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font:500 11.5px/1.35 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.eyebrow .bit,.bit{flex:none;width:7px;height:7px;background:var(--forge)}
.h2{font-size:clamp(32px, 6.6vw, 56px);font-weight:560;line-height:1.04;letter-spacing:-.035em;color:var(--fg);text-wrap:balance}
.lede{font-size:clamp(17px, 1.6vw, 20px);line-height:1.55;color:var(--fg-2);max-width:38em;text-wrap:pretty}

/* ---------- buttons ---------- */
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:600;font-size:15px}
.link .i{width:15px;height:15px;color:var(--link);transition:transform .2s}
.link:hover .i{transform:translateX(3px)}

/* product heads: tile and name */
.prodhead{display:flex;align-items:center;gap:14px}
.prodhead .mtile{width:46px;height:46px;border-radius:12px}
.prodhead b{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--fg)}

/* ---------- isometric figures ---------- */
.isofig{position:relative;max-width:100%}
.isofig svg{width:100%;height:auto}
.iso-flow{animation:isoflow 1.6s linear infinite}
@keyframes isoflow{to{stroke-dashoffset:-22.1}}
.iso-ping{animation:isoping 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes isoping{0%{opacity:.9}100%{opacity:0}}
/* R7a: the HQ screen's phone figure is /hq/'s team map (owner, post-launch). Its rules come from
   ui.css (body.style-console main .cx-*), which / does not load, so they are restated here under
   .teamfig and reach nothing else. Not .isofig: .isofig svg would size the 16 nested seat svgs too.
   No animations, so the .scr__vis:not(.is-on) pause has nothing to hold. Sizing: the phone block. */
.teamfig{position:relative}
.teamfig::before{content:"";position:absolute;inset:-6% -4% 0;background:radial-gradient(closest-side,rgba(58,102,255,.14),rgba(58,102,255,0));pointer-events:none}
.teamfig .cx-map__svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.teamfig .cx-sector{fill:#0B1122;stroke:#1C2542;stroke-width:1}
.teamfig .cx-score{fill:none;stroke:#7B97FF;stroke-width:2.5;stroke-dasharray:.1 9;stroke-linecap:round;opacity:.85}
.teamfig .cx-podium{fill:#141D38;stroke:#3A4F8F}
.teamfig .cx-seat--new rect{fill:rgba(123,151,255,.04);stroke:#4A5C8F;stroke-width:1.6;stroke-dasharray:5 5}
.teamfig .cx-seat--new path{stroke:#7B97FF;stroke-width:2;stroke-linecap:round}
.teamfig .cx-you>rect:first-child{fill:#0E1530;stroke:#7B97FF;stroke-width:1.6}
.teamfig .cx-you__scr{fill:#070B16}
.teamfig .cx-vault rect:first-child{fill:#0E1530;stroke:#7B97FF;stroke-width:1.6}
.teamfig .cx-vault path{stroke:#7B97FF;stroke-width:2.2}

/* the contact screen's mail row */
.mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}

/* ---------- home: six simple screens and the line ---------- */
/* R8a: one scroll = one screen (owner). Mandatory snap on the root, and scroll-snap-stop:always so a
   trackpad or touch fling stops at the next screen instead of skipping it. scroll-padding-top is 0
   here (core.css sets hdr+16px for the inner pages' anchors): each screen pads for the header itself,
   so a snapped screen's own top sits under the header and no strip of the previous one shows, and
   every screen is exactly one snapport tall. The hero starts hdr below the top of the page, so its
   snap area is pulled up by hdr and the first position is 0. A screen taller than the viewport
   (short landscape phones) scrolls through: every position where it covers the viewport is a snap
   position. Stays on under reduced motion (core.css turns smooth scrolling off, so a page jumps). */
html.is-home{scroll-snap-type:y mandatory;scroll-padding-top:0}
.scr{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;min-height:100vh;min-height:100svh;padding-top:calc(var(--hdr) + 13vh);padding-top:calc(var(--hdr) + 13svh);padding-bottom:40px;scroll-snap-align:start;scroll-snap-stop:always}
.scr--hero{scroll-margin-top:var(--hdr)}
.scr__in{display:grid;gap:18px;max-width:640px}
.scr__in--right{margin-left:auto;text-align:right;justify-items:end}
.scr h2{font-size:clamp(36px, 8.6vw, 72px);font-weight:560;line-height:1.02;letter-spacing:-.04em;color:#F2F4F8;text-wrap:balance}
.scr__p{color:var(--mist);font-size:clamp(16.5px, 1.6vw, 19px);line-height:1.55;max-width:32em}
.scr .ctas{align-items:center;gap:14px 22px}
.scr .links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:6px}
.scr__in--right .links{justify-content:flex-end}
.scr--hero{justify-content:flex-start;padding-top:calc(var(--hdr) + 8px);padding-bottom:20px}
.scr--hero .scr__p{margin-top:2px}
.scr--hero .scr__in{max-width:none}
.scr--hero h1{font-size:clamp(44px, 11.4vw, 96px);font-weight:560;line-height:.98;letter-spacing:-.045em;color:#F2F4F8;text-wrap:balance;max-width:11.5ch}
.home .globe{position:relative;margin:10px calc(-1 * var(--gr)) 0 calc(-1 * var(--gl));height:min(96vw, 44svh, 520px)}
.globe canvas{width:100%;height:100%;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.globe canvas.is-drag{cursor:grabbing}
/* until the script draws the first frame (or without JS), a quiet sphere holds the globe's shape */
.home .globe:not(.is-live) canvas{background:radial-gradient(circle closest-side,rgba(26,38,82,.55),rgba(7,10,20,.78) 70%,rgba(4,6,12,.86) 90%,rgba(123,151,255,.22) 90.6%,rgba(58,102,255,.08) 92%,rgba(58,102,255,0) 100%)}
.follow{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.follow:hover{color:#F2F4F8}
@media (min-width:1024px){
  .scr--hero{justify-content:center;padding-top:var(--hdr)}
  .scr--hero .scr__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px}
  .home .globe{margin:0 calc(-1 * var(--gr)) 0 -40px;height:min(640px, 76vh)}
}
.homeline{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;transition:opacity .4s}
/* With JS the line waits for home.js, which sets its opacity from the scroll position (0 at the top
   of the page). html.js comes from a one-line script in the head, so the first frame already has the
   line hidden and nothing fades out on load. Without JS the class never appears and the baked line shows. */
html.js .homeline{opacity:0}
/* R7d: each link is a 24px target (WCAG 2.5.8) around the dot it draws in ::before, so the dots
   now sit 16px apart edge to edge. The padding puts the dot 6px in from the link's right edge,
   and .rail moves right by those 6px, so the dot keeps its old x and core.css's focus ring
   (3px offset, 2px wide) stays inside the viewport. The active dot grows its link with it. */
.rail{position:fixed;right:calc(max(12px, env(safe-area-inset-right, 0px)) - 6px);top:50%;z-index:5;display:grid;gap:0;transform:translateY(-50%)}
.rail a{display:block;padding:8px 6px 8px 10px}
.rail a::before{content:"";display:block;width:8px;height:8px;background:#2B3450;transition:background .2s,height .2s}
.rail a.is-on::before{background:#F2F4F8;height:18px}
/* the footer is the last page: its end snaps to the bottom, so the last scroll reaches it and stays */
.homefoot{position:relative;z-index:1;scroll-snap-align:end;scroll-snap-stop:always}

/* ---------- responsive helpers: parts that exist only below or only from 1024px ---------- */
@media (min-width:1024px){.m-only{display:none!important}}
@media (max-width:1023.98px){.d-only{display:none!important}}

/* ---------- home: the globe's caption and the Our clients screen (every width) ---------- */
.globe__cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;font:500 10.5px/1.45 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center}
.globe__n{display:inline-flex;align-items:center;gap:10px}
.globe__cap .bit{width:5px;height:5px}
@media (min-width:1024px){.globe__cap{position:absolute;left:0;right:0;bottom:4px;pointer-events:none}}
.scr--clients .scr__in{max-width:900px}
.cstats{display:flex;flex-wrap:wrap;gap:14px 56px;margin-top:8px}
.cstats div{display:grid;gap:8px;align-content:start}
.cstats dt{font-size:clamp(36px, 3.6vw, 52px);font-weight:560;line-height:1;letter-spacing:-.04em;color:#F2F4F8;font-variant-numeric:tabular-nums}
.cstats dd{margin:0;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ---------- phones and tablets (below 1024px). Desktop above is untouched. ----------
   R8a: the screens page here too (owner): each is one viewport (100svh, so a collapsing browser
   bar grows the viewport instead of resizing the screen) and pads for the header itself, as on
   desktop. R8b (owner: more space, less cluttered) fills each one: the column grows to the
   screen's height, the visual takes the free height in the middle and the copy sits at the
   foot with room below it; connections anchors its figures at the foot, contact is centred.
   The fixed line stays on behind the screens (owner change 1), dimmed to a composite opacity of 0.415 so #F2F4F8 text that crosses it keeps
   at least 5.38:1 over every palette stop (the palest, #FFE7A8, is the worst case). Mist and
   dim copy cannot reach 4.5:1 over even a dimmed line (2.37:1 and 1.62:1 at worst), so each
   of those blocks sits on a solid backdrop instead (mist 8.1:1, dim 5.56:1).
   One visual, the headline, one line of text and one row of actions per screen: the rest
   is trimmed here, never removed from the markup. */
@media (max-width:1023.98px){
  .rail{display:none}
  #hlPath{opacity:.35}#hlGlow{opacity:.1}
  .scr__p,.globe__cap,.cx,.cstats,.cband__in{background:var(--bg);box-shadow:0 0 0 6px var(--bg)}
  .cband__in{box-shadow:none}

  .scr{padding-top:calc(var(--hdr) + env(safe-area-inset-top, 0px) + clamp(16px, 3.6svh, 36px));padding-bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(28px, 5svh, 48px))}
  .scr:not(.scr--hero)>.wrap{flex:1 1 auto;display:flex;flex-direction:column}
  .scr:not(.scr--hero) .scr__in{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}

  /* first screen: a poster that fits the visible height exactly: globe, caption, headline, one line, the button */
  .scr--hero{min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr) - env(safe-area-inset-top, 0px));padding-top:0;padding-bottom:max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px))}
  .scr--hero>.wrap{flex:1 1 auto;display:flex;flex-direction:column}
  .scr--hero .scr__grid{flex:1 1 auto;display:flex;flex-direction:column;gap:clamp(14px, 2.4svh, 26px)}
  .scr--hero .scr__in{flex:none;gap:clamp(12px, 1.9svh, 18px)}
  .scr--hero .eyebrow{display:none}
  .scr--hero h1{font-size:clamp(36px, min(11.2vw, 6.3svh), 62px);max-width:11.2ch}
  .scr--hero .scr__p{margin-top:0;font-size:clamp(16px, 4.3vw, 19px);max-width:26em}
  .scr--hero .ctas{flex-wrap:nowrap;align-items:center;gap:12px;margin-top:2px}
  .scr--hero .ctas .btn{min-height:52px;padding:0 26px}
  .home .globe{order:-1;flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-height:190px;height:auto;margin:0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl))}
  .globe canvas{flex:1 1 0;min-height:0;height:auto}
  .globe__cap{flex:none;flex-direction:column;gap:3px;padding:0 var(--gr) 0 var(--gl)}

  /* product screens: a visual first, then the name, the headline, one short line, the links */
  .scr__in,.scr__in--right{max-width:640px;margin-left:0;text-align:left;justify-items:stretch;gap:20px}
  .scr__in--right .links{justify-content:flex-start}
  .scr h2{font-size:clamp(31px, 8.4vw, 50px);line-height:1.04}
  .scr .links{gap:0 24px;margin-top:0}
  .scr .links .link{min-height:44px}
  /* the visual takes the free height and centres in it; its size follows the viewport's height, capped */
  .scr__vis{flex:1 1 auto;display:flex;align-items:center;justify-content:center;margin:0 0 clamp(6px, 1.6svh, 14px)}
  .scr__vis .isofig{height:clamp(150px, calc(100svh - 420px), 320px);width:auto;max-width:100%}
  .scr__vis .isofig svg{width:100%;height:100%}
  .scr__vis .teamfig{width:100%;max-width:480px;max-width:min(480px, calc((100svh - 420px) * 1.265))}
  /* tablets: the copy is wider and its h2 larger, so the visual leaves it more room */
  @media (min-width:720px){
    .scr__vis .isofig{height:clamp(150px, calc(100svh - 445px), 320px)}
    .scr__vis .teamfig{max-width:min(480px, calc((100svh - 445px) * 1.265))}
  }
  .scr__vis:not(.is-on) .iso-flow,.scr__vis:not(.is-on) .iso-ping{animation-play-state:paused}
  .prodhead .mtile{width:42px;height:42px;border-radius:11px}
  .prodhead b{font-size:22px}
  .prodhead .pill{display:none}

  /* our connections and contact: the list, the heading and the figures; the booking button alone */
  .scr--clients .scr__in{gap:16px}
  .scr.scr--clients .scr__in{justify-content:flex-start}
  .scr--clients .eyebrow{display:none}
  .scr--clients .cx{margin-bottom:clamp(16px, 3svh, 32px)}
  .scr--clients .cx li{min-height:clamp(50px, 8.4svh, 72px)}
  .cstats{gap:14px 40px;margin-top:auto}
  .scr.scr--contact .scr__in{justify-content:center;padding-bottom:clamp(0px, 4svh, 40px)}
  .scr--contact .mailrow{display:none}
}

/* phones */
@media (max-width:719.98px){
  .scr--hero .follow{flex:none;width:52px;height:52px;justify-content:center;gap:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:#F2F4F8}
  .scr--hero .follow__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .scr--hero .follow .i{width:16px!important;height:16px!important}
}

/* phones held sideways: the poster splits into two columns again */
@media (max-width:1023.98px) and (orientation:landscape) and (max-height:540px){
  .scr--hero{min-height:calc(100svh - var(--hdr))}
  .scr--hero .scr__grid{flex-direction:row;align-items:center;gap:20px}
  .scr--hero .scr__in{flex:1 1 52%}
  .scr--hero h1{font-size:clamp(28px, 4.6vw, 44px);max-width:none}
  .home .globe{order:0;flex:1 1 48%;align-self:stretch;min-height:150px;margin:0 calc(-1 * var(--gr)) 0 0}
  /* R8b: the other screens stay taller than this viewport and scroll through (R8a), so the spacing
     added above for portrait is taken back here and the visuals shrink to pay for the bottom room */
  .scr:not(.scr--hero){padding-top:calc(var(--hdr) + env(safe-area-inset-top, 0px) + 12px);padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 16px)}
  .scr__in,.scr__in--right{gap:14px}
  .scr__vis{margin:0}
  .scr__vis .isofig{height:clamp(130px, 43svh, 200px)}
  .scr__vis .teamfig{max-width:calc(clamp(130px, 43svh, 200px) * 640 / 506)}
  .scr--clients .cx li{min-height:46px}
  .scr--clients .cx{margin-bottom:8px}
}

/* ---------- client strip at the foot of the first screen ---------- */
.cband{position:relative;z-index:1;flex:none;border-top:1px solid var(--hair)}
.cband__in{display:grid;gap:10px;padding-top:14px;padding-bottom:16px}
.cband__label{display:flex;align-items:center;gap:10px;font:500 10.5px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.cband__label::before{content:"";flex:none;width:6px;height:6px;background:var(--forge)}
.cband__viewport{overflow:hidden}
/* the edge fade belongs to the moving loop: the static list (no JS, reduced motion) wraps from the left edge, where the fade would eat each name's first letter */
.cband__viewport:has(.is-loop){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.cband__track{display:flex;flex-wrap:wrap;row-gap:6px}
.cband__track li{display:flex;align-items:center;gap:22px;padding-right:22px;font-size:clamp(17px, 1.6vw, 21px);font-weight:560;letter-spacing:-.02em;line-height:1.3;color:#C5CCDB;white-space:nowrap}
.cband__track li::after{content:"";flex:none;width:6px;height:6px;background:#2B3450}
.cband__track.is-loop{flex-wrap:nowrap;width:max-content;animation:cband var(--cband-d, 40s) linear infinite}
.cband:hover .cband__track.is-loop{animation-play-state:paused}
@keyframes cband{to{transform:translateX(-50%)}}
@media (min-width:1024px){
  .scr--hero{justify-content:flex-start;min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));padding-top:12px;padding-bottom:0}
  .scr--hero>.wrap{margin-block:auto}
  .cband__in{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:36px;padding-top:20px;padding-bottom:22px}
}

/* ---------- our connections: one bit per connection ---------- */
.cx{display:grid;margin-top:6px;border-top:1px solid var(--hair-2)}
.cx li{display:grid;grid-template-columns:minmax(0,8.6em) minmax(0,1fr) 2em;align-items:center;gap:14px;min-height:50px;padding:8px 0;border-bottom:1px solid var(--hair)}
.cx__name{font-size:clamp(16px, 1.5vw, 20px);font-weight:560;letter-spacing:-.015em;color:#F2F4F8}
.cx__bits{display:flex;flex-wrap:wrap;gap:5px}
.cx__bits i{display:block;width:11px;height:11px;background:#3A66FF}
.cx li:nth-child(2) .cx__bits i{background:#A855F7}
.cx li:nth-child(3) .cx__bits i{background:#FF4D6D}
.cx li:nth-child(4) .cx__bits i{background:#FF9A2E}
.cx li:nth-child(5) .cx__bits i{background:#FFD23F}
.cx li:nth-child(6) .cx__bits i{background:#22DD84}
.cx__n{font:500 14px/1 var(--f-mono);color:var(--mist);text-align:right;font-variant-numeric:tabular-nums}

.cband__track a{color:inherit;border-radius:4px;transition:color .2s}
.cband__track a:hover,.cband__track a:focus-visible{color:#FFFFFF}
.cband:focus-within .cband__track.is-loop{animation-play-state:paused}