/* =========================================================
   SEBENZA ONLINE — HOME 4 · "The fleet"
   Loads after css/home.css and only styles the hero: a headline with the
   disc glyph as its conjunction, chip-highlighted sub-line, and a ring of
   phones showing client work. Everything else is Home 3's system.
   ========================================================= */

:root{
  --accent:#7500F9;                 /* the logo dot — used once, on the headline glyph */
  --R:1150px;                       /* ring radius */
  --pw:214px;                       /* phone width */
  --ph:calc(var(--pw) * 19.2 / 9);  /* phone height incl. bezel */
  --ring-top:calc(max(68svh,500px) + var(--R)); /* top phone's centre; the max() keeps it under the copy on short screens */
  --bezel:#0d0618;
  --bezel-rim:.14;
  --sheet-gap:clamp(10px,1.6vw,22px);
  --sheet-r:28px;
  --glass-h:125vh;                  /* height of the frosted band */
}

/* ---------- section ---------- */
.fleet{
  position:relative;
  height:100svh;min-height:680px;
  padding-top:calc(var(--nav-h) + 7vh);
}
/* the rings run edge to edge; the inset sheets float over them. Clip the
   fleet sections horizontally only (phones may spill above/below), and
   belt-and-braces the root so mobile Safari can't widen the viewport. */
html{overflow-x:clip}
body{overflow-x:visible}   /* with clip on the root, a non-visible body would become its own 2px scroller and swallow the first swipe on iOS */
.fleet{overflow-x:clip;overflow-y:visible}
/* the underside: sized from the phones themselves. --under-top is where the
   lowest phone's centre sits — half a phone, plus how much higher the outer
   phones ride on the arc (R·(1−cos 33°) ≈ .16R), plus the sheet's tuck and a
   breath of air — so at rest every phone hangs fully clear of the sheet. */
.fleet--bottom{
  --under-top:calc(var(--ph) / 2 + var(--R) * .16 + var(--sheet-r) + 28px);
  height:calc(var(--under-top) + var(--ph) / 2 - clamp(72px,9vw,130px));   /* the lowest phone ends 72–130px under the footer block's frosted top */
  min-height:0;padding:0;
  margin-top:calc(var(--sheet-r) * -1);           /* tuck under the sheet's rounded foot */
}
.ring.ring--bottom{
  top:calc(var(--under-top) - var(--R));
  perspective-origin:50% var(--R);                /* vanishing point at the bottom of the wheel, where these phones are */
}
.fleet__head{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.fleet__title{
  font-size:clamp(44px,7.6vw,128px);font-weight:700;   /* matches the wordmark's weight */
  letter-spacing:-.04em;line-height:.95;
  white-space:nowrap;text-wrap:nowrap;
}
/* "Sebenza" completes to "Online" on hover; the dot travels from its place
   between the words up to the wordmark's position, top-right of the name */
.fleet__word{
  position:relative;display:inline-block;vertical-align:top;text-align:left;
  width:var(--wa,auto);margin-right:.8em;
  transition:width .6s var(--ease-out),margin .6s var(--ease-out);
}
/* The swap: one ease-out family for the word, the box width and the dot, so
   everything settles together. The outgoing word leaves in .3s and the
   incoming one arrives over .5s a beat later — they never sit at half
   strength on top of each other, which is what read as muddy before. */
.fleet__w{display:block;width:max-content;white-space:nowrap;will-change:transform,opacity;transition:opacity .45s var(--ease),transform .6s var(--ease-out)}   /* max-content: each word measures as its own text, never as the box it sits in (which is the other word's width mid-swap) */
.fleet__w--b{position:absolute;left:0;top:0;opacity:0;transform:translateY(.22em)}
/* The "Sebenza" slot holds the CAPS wordmark, cropped to its ink so the box is
   the cap height exactly. Helvetica Neue Bold's cap is .714em, so that is the
   image height, and the top margin drops its baseline onto the text baseline
   (.8445em down a .95 line box) — the S is the height of the B in Built and
   they share a line. Theme swap is data-light/data-dark. */
.fleet__logo{display:block;height:.714em;width:auto;max-width:none;margin-top:.1305em;-webkit-user-drag:none;user-select:none}
.fleet__title.is-alt .fleet__word{width:var(--wb,auto);margin-right:.42em}   /* the dot no longer sits in the gap */
.fleet__title.is-alt .fleet__w--a{opacity:0;transform:translateY(-.22em);transition:opacity .3s var(--ease),transform .6s var(--ease-out)}
.fleet__title.is-alt .fleet__w--b{opacity:1;transform:none;transition:opacity .5s var(--ease) .06s,transform .6s var(--ease-out)}
.fleet__g{
  position:absolute;left:calc(100% + .16em);top:61%;              /* sits low between the words, toward the baseline */
  width:.5em;height:.5em;margin-top:-.25em;
  color:var(--accent);
  transition:left .6s var(--ease-out),top .6s var(--ease-out),width .6s var(--ease-out),height .6s var(--ease-out),margin .6s var(--ease-out),color .6s var(--ease);
}
.fleet__title.is-alt .fleet__g{
  left:calc(100% + .03em);top:.2em;width:.22em;height:.22em;margin-top:0;   /* sits at the cap line, like the wordmark */
  color:var(--green);                                                       /* cyber green once it has landed on "Online" */
  animation:g-pulse 1.1s var(--ease) infinite;
}
@keyframes g-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
.fleet__title{cursor:default}
/* mobile-only line break after the glyph */
.fleet__br{display:none}
.fleet__sub{
  /* the chips are 1.6em tall boxes on this line, so 1.75 left consecutive
     rows touching; 2.2 gives them ~.5em of air and room for their shadows */
  font-size:clamp(17px,1.45vw,22px);font-weight:300;line-height:2.2;
  letter-spacing:-.015em;max-width:64ch;text-wrap:balance;   /* one line on desktop: the three services and who they are for */
}
/* At rest each chip is the site's glass recipe at word scale: a frosted tint
   over whatever the ring puts behind it, so it stays legible when a phone
   reaches up into this line. The two faint gradients of the lit state (a top
   sheen, a pink glow at the foot) are already present here, and only the
   base colour changes when a chip lights — so the two states read as one
   object and the switch can actually animate instead of snapping. */
.chip{
  position:relative;isolation:isolate;
  display:inline-block;padding:.06em .62em .1em;
  border-radius:8px;border:1px solid transparent;
  font-weight:400;line-height:1.45;
  background-color:var(--glass-bg);
  background-image:
    var(--glass-noise),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
    radial-gradient(120% 160% at 50% 100%,rgba(232,121,249,.14),transparent 54%);
  background-blend-mode:soft-light,normal,normal;
  box-shadow:
    0 0 0 1px var(--glass-edge),
    0 1px 2px rgba(var(--shadow-rgb),.06),
    0 8px 20px -10px rgba(var(--shadow-rgb),.3),
    var(--glass-inset);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  transition:background-color var(--t-med) var(--ease),color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
/* The chips are links to the three service pages. A chip carries the neon
   ring from the services page's primary button only while it is hovered,
   focused or pressed (js/fleet.js); none lights on its own. */
.fleet__nw{white-space:nowrap}   /* a comma never starts a line */
a.chip{color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a.chip:focus{outline:none}
a.chip:focus-visible{outline:2px solid #b985ff;outline-offset:4px}
.chip::before{                                   /* the gradient ring, kept off the face by a mask */
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(135deg,#ff4fd8 0%,#b985ff 38%,#7500F9 62%,#ff4fd8 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity var(--t-med) var(--ease);
}
.chip::after{                                    /* the outer halo */
  content:"";position:absolute;inset:-.55em;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 60% at 50% 50%,rgba(255,79,216,.42) 0%,rgba(117,0,249,.28) 45%,transparent 75%);
  filter:blur(8px);
  opacity:0;transition:opacity var(--t-med) var(--ease);
}
.chip.is-lit{
  color:#fff;
  background-color:rgba(10,8,14,.9);   /* the gradient layers above stay put; only the ground turns */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -18px 38px rgba(232,121,249,.08),0 0 22px -8px rgba(232,121,249,.86),0 0 48px -20px rgba(117,0,249,.9);
}
.chip.is-lit::before,.chip.is-lit::after{opacity:1}

/* ---------- the ring ---------- */
.ring{
  position:absolute;left:50%;top:var(--ring-top);   /* in the page; js/fleet.js parallaxes it at ~half scroll speed */
  width:0;height:0;z-index:0;
  will-change:transform;
  perspective:1600px;perspective-origin:50% calc(var(--R) * -1);
  transform-style:preserve-3d;
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  cursor:grab;
}
.ring.is-dragging{cursor:grabbing}
.ring{transition:opacity .35s var(--ease),visibility 0s linear 0s}
.ring.is-off{opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}   /* once every phone has left the screen */

/* ---------- the still version (js/fleet.js adds .is-still) ----------
   For older phones and slow connections, and ?lite to preview it. The wheel
   stands still unless it is dragged; each phone is one flat card (no edge
   stack, no 3D inside it, no standing compositor layer of its own); and the
   glass bands are plain paper, since a backdrop blur over the phones is the
   costliest thing on this page for an old graphics chip. */
.is-still .phone,.is-still .phone__body{transform-style:flat}
.is-still .phone{will-change:auto}
.is-still .sheet::before,.is-still .sheet__glass-b{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(var(--paper-rgb),.96)}

/* ---------- the sheet ---------- */
.sheet{
  --glass-b:0px;                                   /* frosted band at the bottom edge (main sheet only) */
  position:relative;z-index:2;
  margin:0 var(--sheet-gap);
  border-radius:var(--sheet-r) var(--sheet-r) 0 0;
  padding-top:1px;                                 /* keeps the first child's margin inside */
  box-shadow:0 0 0 1px var(--glass-edge),0 -28px 80px -44px rgba(var(--shadow-rgb),.42);
  isolation:isolate;
}
/* the main sheet ends after the showreel: all four corners, a frosted foot,
   and room below for the wheel's underside to show */
.sheet--main{
  --glass-b:60vh;
  --open:0;                                        /* 0 = contained, 1 = edge to edge; driven by scroll once the hero phones have left the viewport */
  --kx0:.97;                                       /* the contained width as a fraction of the full width; js/fleet.js measures the real figure */
  --kx:calc(var(--kx0) + (1 - var(--kx0)) * var(--open));
  --r-top:calc(var(--sheet-r) * (1 - var(--open)));
  /* full width in layout; the contained look comes from its three paint layers
     (the frosted band, the solid paper, the frosted foot) scaled in from the
     edges. Opening the sheet is a compositor transform on those three empty
     boxes — no layout, no repaint of the tall paper layer, and no clip-path or
     mask anywhere, since either one above a backdrop-filter can blind it to
     what is behind the sheet. */
  margin:0;border-radius:0;box-shadow:none;
  /* a little later than the hero's end, so the phones stay in view a beat
     longer as the page starts to scroll (Aston, 2026-09-30) */
  margin-top:clamp(56px,10vh,120px);
  padding-bottom:clamp(64px,7vw,110px);
}
/* where the browser can run scroll-linked motion off the main thread (Chrome 115+,
   Safari 26), the opening and the hero parallax are scroll-driven animations and
   js/fleet.js stands back; elsewhere it drives --open and the ring by hand */
@supports (animation-timeline:view()){
  .sheet--main{view-timeline-name:--sheet}                                /* one timeline, the sheet's own, shared by its three layers */
  /* the range opens once the last hero phone has left the top of the viewport
     (--open-extra, measured by js/fleet.js) and runs for half a viewport */
  .sheet--main::before,.sheet--main::after,.sheet--main .sheet__glass-b{animation:sheet-open ease-in-out both;animation-timeline:--sheet;animation-range:cover calc(100vh + var(--open-extra,0px)) cover calc(150vh + var(--open-extra,0px))}
  .sheet--main::before{animation-name:sheet-open-top}
  @keyframes sheet-open-top{
    from{transform:scaleX(var(--kx0));border-radius:var(--sheet-r) var(--sheet-r) 0 0}
    to{transform:scaleX(1);border-radius:0 0 0 0}
  }
  @keyframes sheet-open{
    from{transform:scaleX(var(--kx0))}
    to{transform:scaleX(1)}
  }
  /* reduced motion: the sheet keeps its first, contained shape as the page
     scrolls instead of widening to the edges (review, 2026-09-30) */
  @media (prefers-reduced-motion:reduce){
    .sheet--main::before,.sheet--main::after,.sheet--main .sheet__glass-b{animation:none}
  }
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .fleet:not(.fleet--bottom) .ring{animation:ring-parallax linear both;animation-timeline:scroll(root);animation-range:0 200vh}
    @keyframes ring-parallax{from{transform:translateY(0)}to{transform:translateY(60vh)}}   /* = 0.3 × scroll, the js figure */
  }
}
/* its shadows live on the neighbours, outside the clip: above the top edge and below the foot */
.fleet::after,.fleet--bottom::before{
  content:"";position:absolute;left:var(--sheet-gap);right:var(--sheet-gap);height:40px;z-index:-1;pointer-events:none;
  border-radius:var(--sheet-r);
}
.fleet::after{bottom:-40px;box-shadow:0 -28px 80px -44px rgba(var(--shadow-rgb),.42)}
.fleet--bottom::before{top:-40px;box-shadow:0 40px 90px -50px rgba(var(--shadow-rgb),.5)}
.sheet__glass-b{
  position:absolute;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;
  height:var(--glass-b);border-radius:0 0 var(--sheet-r) var(--sheet-r);      /* only the sheet's own corners: the band's inner end is invisible */
  background:
    var(--glass-noise),
    var(--glass-rimline) bottom/100% 1px no-repeat,                              /* the bottom rim, lit toward the corners */
    linear-gradient(to top,rgba(var(--paper-rgb),.36) 0,rgba(var(--paper-rgb),.5) 55%,rgba(var(--paper-rgb),.88) 88%,var(--paper) 100%);
  background-blend-mode:soft-light,normal,normal;
  box-shadow:inset 1px 0 0 var(--glass-side),inset -1px 0 0 var(--glass-side);
  -webkit-backdrop-filter:var(--glass-blur-band);backdrop-filter:var(--glass-blur-band);
}
/* the foot block: contact + footer on their own contained sheet */
/* ---------- footer glow ----------
   The Home 2 footer gradient, as an image, full-bleed beneath the foot sheet
   in dark mode: it sits under the sheet's glass, so it reads blurred and
   dimmed through the frosted plate and raw in the gutters beside it. Framed
   as on Home 2 (the left half of the graphic on the bottom edge), its top
   feathered; pulled to a deeper pink. On phones the sheet is tall and
   narrow, so the graphic covers the lower part through the bloom instead:
   pink at the foot, blue above, dark at the top. */
.footer__glow{
  display:none;position:absolute;top:0;bottom:0;z-index:-2;overflow:hidden;pointer-events:none;   /* -2: under the sheet's glass (-1) */
  left:0;right:0;
}
.footer__glow::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:37vw;      /* the graphic's height at 190% of the viewport width */
  background:url("../assets/images/footer-aurora.jpg?v=f4f5d897") left bottom / 190% auto no-repeat;
  filter:hue-rotate(-6deg) saturate(1) brightness(1);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%);
}
:root[data-theme="dark"] .footer__glow{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .footer__glow{display:block}}
@media (max-width:760px){
  .footer__glow::before{
    height:70%;background-position:12% bottom;background-size:cover;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%);
  }
}
.sheet--foot > .contact{margin-top:0;padding-top:clamp(56px,7vw,96px);border-top:0}
.sheet--foot .footer--sheet{margin:0;background:transparent}
.sheet::before,.sheet::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none}
/* frosted band: only where the phones can still be behind the page */
.sheet::before{
  top:0;height:var(--glass-h);border-radius:var(--sheet-r) var(--sheet-r) 0 0;  /* only the sheet's own corners: the band's inner end is invisible */
  background:
    var(--glass-noise),
    var(--glass-rimline) top/100% 1px no-repeat,                                 /* the top rim, lit toward the corners */
    var(--glass-sheen-band),                                                     /* lit at the corner only */
    linear-gradient(rgba(var(--paper-rgb),.36) 0,rgba(var(--paper-rgb),.5) 55%,rgba(var(--paper-rgb),.88) 88%,var(--paper) 100%);
  background-blend-mode:soft-light,normal,normal,normal;
  box-shadow:inset 1px 0 0 var(--glass-side),inset -1px 0 0 var(--glass-side);
  -webkit-backdrop-filter:var(--glass-blur-band);backdrop-filter:var(--glass-blur-band);
}
/* solid paper between the frosted bands */
.sheet::after{top:calc(var(--glass-h) - 2px);bottom:calc(var(--glass-b) - 2px);background:var(--glass-noise),var(--paper);background-blend-mode:soft-light,normal;box-shadow:inset 1px 0 0 var(--glass-side),inset -1px 0 0 var(--glass-side)}
.sheet--main::after{border-radius:0}
/* the main sheet's three layers, scaled to the current width (1 once the sheet has opened) */
.sheet--main::before,.sheet--main::after,.sheet--main .sheet__glass-b{left:0;right:0;transform-origin:50% 50%;transform:scaleX(var(--kx));will-change:transform}
.sheet--main::before{border-radius:var(--r-top) var(--r-top) 0 0}
.sheet--main .sheet__glass-b{border-radius:0 0 var(--sheet-r) var(--sheet-r)}
/* the foot sheet is glass all the way down, so the glow shows through it */
.sheet--foot{--glass-h:100%;margin:0}                    /* the foot sheet runs edge to edge at every width */
.sheet--foot::after{display:none}
.sheet--foot::before{
  background:
    var(--glass-noise),
    var(--glass-rimline) top/100% 1px no-repeat,
    var(--glass-sheen-band),
    linear-gradient(rgba(var(--paper-rgb),.36) 0,rgba(var(--paper-rgb),.48) 28%,rgba(var(--paper-rgb),.52) 100%);
  background-blend-mode:soft-light,normal,normal,normal;
}
.sheet > .clients{margin-top:clamp(26px,3.4vw,48px)}
.sheet > .work{margin-top:0;padding-top:clamp(64px,9vw,128px)}   /* first section: enough glass above it to see the phones pass, no more */
.footer--sheet{
  position:relative;z-index:2;background:var(--paper);
  margin:0 var(--sheet-gap);border-top-color:var(--line);
}
/* no backdrop support (old Firefox): solid band instead of frosted */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sheet::before,.sheet__glass-b{background:rgba(var(--paper-rgb),.96)}
  .nav__inner,.nav__burger,.beacon__plate{background:rgba(var(--paper-rgb),.94)}
}

/* ---------- starting positions (no JS yet) ----------
   The same geometry js/fleet.js computes each frame, so the fleet renders
   with the HTML on a cold mobile load instead of waiting for the scripts. */
.ring .phone:nth-child(1){transform:rotate(-69.0deg) translateY(calc(var(--R) * -1)) rotateY(-55.2deg) scale(0.831);z-index:310}
.ring--bottom .phone:nth-child(1){transform:rotate(-69.0deg) translateY(var(--R)) rotateY(55.2deg) scale(0.831)}
.ring .phone:nth-child(2){transform:rotate(-51.0deg) translateY(calc(var(--R) * -1)) rotateY(-40.8deg) scale(0.875);z-index:490}
.ring--bottom .phone:nth-child(2){transform:rotate(-51.0deg) translateY(var(--R)) rotateY(40.8deg) scale(0.875)}
.ring .phone:nth-child(3){transform:rotate(-33.0deg) translateY(calc(var(--R) * -1)) rotateY(-26.4deg) scale(0.919);z-index:670}
.ring--bottom .phone:nth-child(3){transform:rotate(-33.0deg) translateY(var(--R)) rotateY(26.4deg) scale(0.919)}
.ring .phone:nth-child(4){transform:rotate(-15.0deg) translateY(calc(var(--R) * -1)) rotateY(-12.0deg) scale(0.963);z-index:850}
.ring--bottom .phone:nth-child(4){transform:rotate(-15.0deg) translateY(var(--R)) rotateY(12.0deg) scale(0.963)}
.ring .phone:nth-child(5){transform:rotate(3.0deg) translateY(calc(var(--R) * -1)) rotateY(2.4deg) scale(0.993);z-index:970}
.ring--bottom .phone:nth-child(5){transform:rotate(3.0deg) translateY(var(--R)) rotateY(-2.4deg) scale(0.993)}
.ring .phone:nth-child(6){transform:rotate(21.0deg) translateY(calc(var(--R) * -1)) rotateY(16.8deg) scale(0.949);z-index:790}
.ring--bottom .phone:nth-child(6){transform:rotate(21.0deg) translateY(var(--R)) rotateY(-16.8deg) scale(0.949)}
.ring .phone:nth-child(7){transform:rotate(39.0deg) translateY(calc(var(--R) * -1)) rotateY(31.2deg) scale(0.905);z-index:610}
.ring--bottom .phone:nth-child(7){transform:rotate(39.0deg) translateY(var(--R)) rotateY(-31.2deg) scale(0.905)}
.ring .phone:nth-child(8){transform:rotate(57.0deg) translateY(calc(var(--R) * -1)) rotateY(45.6deg) scale(0.861);z-index:430}
.ring--bottom .phone:nth-child(8){transform:rotate(57.0deg) translateY(var(--R)) rotateY(-45.6deg) scale(0.861)}

/* ---------- phone ---------- */
.phone{
  position:absolute;
  left:calc(var(--pw) / -2);top:calc(var(--ph) / -2);
  width:var(--pw);height:var(--ph);
  transform-origin:50% 50%;
  transform-style:preserve-3d;           /* keeps the body's depth inside the ring's perspective */
  will-change:transform;
  outline-offset:6px;
}
.phone__body{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;           /* the edge stack and the screen live at different depths */
  border-radius:calc(var(--pw) * .17);
  background:
    linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%) ,
    var(--bezel);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,var(--bezel-rim,.14)),
    inset 0 0 0 3px rgba(0,0,0,.6),
    0 40px 70px -34px rgba(var(--shadow-rgb),.55),
    0 12px 24px -16px rgba(var(--shadow-rgb),.35);
  transition:box-shadow var(--t-med) var(--ease);
}
/* the device's thickness: js/fleet.js stacks these behind the face, each
   one a little deeper, so a turned phone shows a real side instead of a gap */
.phone__edge{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:#120a1f;background:color-mix(in srgb,var(--bezel) 72%,#000);   /* the side: the same colour in shadow */
  transform:translateZ(calc(var(--z) * -1px));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone__edge:last-of-type{background:#08040f;background:color-mix(in srgb,var(--bezel) 48%,#000);box-shadow:0 30px 50px -30px rgba(var(--shadow-rgb),.6)}
/* Every phone in its own brand colour, in both themes — one per slot, ordered
   so no two dark or two light bodies sit side by side, including where slot
   nine wraps round to meet slot one. */
.phone{--bezel-rim:.42}
/* nine, because the top ring now carries nine phones — at 8 the ninth
   repeated the first and landed beside its own twin */
.phone:nth-child(9n+1){--bezel:#7500F9}   /* electric purple */
.phone:nth-child(9n+2){--bezel:#F6F5F8}   /* off-white */
.phone:nth-child(9n+3){--bezel:#16022C}   /* amethyst */
.phone:nth-child(9n+4){--bezel:#00FF48}   /* cyber green */
.phone:nth-child(9n+5){--bezel:#F18F01}   /* carrot */
.phone:nth-child(9n+6){--bezel:#F4F3E4}   /* ivory */
.phone:nth-child(9n+7){--bezel:#16022C}   /* amethyst */
.phone:nth-child(9n+8){--bezel:#FA9819}   /* orange */
.phone:nth-child(9n+9){--bezel:#F6F5F8}   /* off-white */
/* light bodies drop the white rim — the 3px inset ink ring gives them their edge instead */
.phone:nth-child(9n+2),.phone:nth-child(9n+6),.phone:nth-child(9n+9){--bezel-rim:0}
.phone .phone__screen{transform:translateZ(1px)}   /* face sits a pixel in front of the edge stack */
/* the whole face is the link into that piece of work; the ring keeps the grab
   cursor, and js/fleet.js already cancels a click that was really a drag */
.phone__link{
  position:absolute;inset:0;z-index:4;display:block;
  border-radius:inherit;cursor:pointer;transform:translateZ(2px);
  -webkit-tap-highlight-color:transparent;
}
.phone__link:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.ring.is-dragging .phone__link{cursor:grabbing}
.phone__island{
  position:absolute;left:50%;top:14px;z-index:3;
  width:26%;height:16px;border-radius:999px;
  transform:translateX(-50%) translateZ(1px);
  background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone .phone__screen{
  position:absolute;inset:8px;
  aspect-ratio:auto;border:0;
  border-radius:calc(var(--pw) * .17 - 8px);
  background:var(--ivory);
  overflow:hidden;
}
.phone .frame__poster,.phone .frame__video{border-radius:inherit;pointer-events:none;-webkit-user-drag:none;user-drag:none}

/* ---------- the client's mark ----------
   The picture and the logo are separate layers on purpose. The photograph
   stays a clean photograph, so the same file serves the phone and the case
   study hero; the mark stays a crisp transparent PNG that CSS sizes, and it
   fades with the page when the picture is lifted out rather than travelling
   along baked into it.

   Each logo gets its own width because their proportions are nothing alike:
   a squarish badge reads far bigger than a long horizontal lockup at the
   same width. --veil is the soft ground the mark sits on — dark for light
   marks, light for dark ones. */
.phone__brand{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;border-radius:inherit;
  --logo-w:42%;
  --logo-y:50%;                     /* so a mark can sit clear of the subject */
  --veil:rgba(0,0,0,.34);
}
.phone__brand::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse 58% 26% at 50% var(--logo-y),var(--veil),rgba(0,0,0,0) 72%);
}
.phone__brand img{
  position:absolute;left:50%;top:var(--logo-y);
  width:var(--logo-w);height:auto;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 1px 10px rgba(0,0,0,.38));
}
/* Each phone's screen opens like the client's own app: a frosted bar under
   the island with their mark and an arrow in a solid circle (Aston,
   2026-09-30: the white plates over the middle "look cheap"; he chose the
   app-style bar, with nothing but the logo and the button). Sized in the
   screen's own width (cqw), so it scales with the phone; each mark's height
   (--lh) is set by its proportions, so a tall badge and a long wordmark weigh
   the same. It steps aside while the phone's reel plays. The dark marks are
   in assets/images/work/logos/plate. */
.phone .phone__screen{container-type:inline-size}
.phone__bar{
  position:absolute;left:5.5%;right:5.5%;top:9%;z-index:3;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;gap:4cqw;
  padding:3.6cqw 3.6cqw 3.6cqw 5.4cqw;border-radius:7cqw;
  background:rgba(255,255,255,.92);
  box-shadow:0 1.8cqw 6cqw -2cqw rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.6);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.phone__bar img{display:block;height:var(--lh,14cqw);width:auto;max-width:72%;object-fit:contain;object-position:left center}
/* the way in: a neat arrow in a solid circle (Aston: no words, they were too small) */
.phone__cta{flex:none;display:grid;place-items:center;width:14cqw;height:14cqw;border-radius:50%;background:#0A0A0C;color:#fff}
.phone__cta svg{width:7cqw;height:7cqw}
/* frosted only where it is cheap: a desktop that isn't in the still version.
   Eighteen blurred layers on a turning wheel are the one thing a weak phone's
   graphics chip would feel; on a phone the bar is simply solid */
@media (hover:hover) and (pointer:fine){
  :root:not(.is-still) .phone__bar{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
}
.frame.is-live .phone__bar{opacity:0;transform:translateY(-3cqw)}   /* the reel has the screen while it plays */
.phone .frame--empty{display:grid;place-items:center;text-align:center;padding:16px}
.phone .frame--empty .label{line-height:1.6;opacity:.55;background:transparent}
.phone .frame--empty::before{opacity:.4}
/* the screen glass */
.phone__screen::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%);
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  :root{--R:980px;--pw:200px}
}
@media (max-width:1024px) and (min-width:821px){
  :root{--pw:184px}
  .fleet__title{font-size:clamp(44px,8.4vw,96px)}
}
@media (max-width:820px){
  :root{--R:700px;--pw:178px;--sheet-gap:8px;--sheet-r:22px;--glass-h:110vh;--ring-top:calc(max(72svh,470px) + var(--R))}   /* no top bar on phones: bigger phones, higher */
  .fleet{min-height:620px;padding-top:calc(var(--nav-h) + 4vh)}
  .fleet--bottom{--under-top:calc(var(--ph) / 2 + var(--R) * .16 + var(--sheet-r) + 16px);min-height:0;padding:0}   /* not the hero's 620px minimum */
  .sheet--main{--glass-b:40vh}
  .fleet__title{white-space:normal;font-size:clamp(44px,14.6vw,84px)}   /* the freed top of the screen goes to the headline */
  .fleet__br{display:block}
  .fleet__sub{font-size:17px;line-height:2.1;max-width:none}   /* chips need the air here too */
  .fleet__for{display:block;line-height:1.6}   /* the three services on one line, who they are for on the next */
  .fleet__head{gap:16px}
}
@media (max-height:720px) and (min-width:821px){
  :root{--pw:190px;--ring-top:calc(max(76svh,500px) + var(--R))}
}

/* ---------- reduced motion ---------- */
:root[data-theme="dark"]{--bezel:#0b0b0d;--bezel-rim:.28}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bezel:#0b0b0d;--bezel-rim:.28}}

@media (prefers-reduced-motion:reduce){
  .fleet__g{animation:none!important}
  .fleet__word,.fleet__w,.fleet__g{transition:none}
  .phone{will-change:auto}
}