/* ==========================================================================
   Nxtcell Mobility, content layer
   The pieces added for the brand and press update: the Mobility lockup, the
   presence map, the manufacturing line illustration, the launches, the press
   wall and the social links. Loads after flow.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE MOBILITY LOCKUP
   The wordmark image is taller than its letters: the blue bars of the
   double l rise above the cap height, so centring on the image put the
   descriptor visibly high. Everything here is placed against the letters
   themselves, measured from the file: the caps start 25% down the image and
   end at 98%, so their centre sits 11.6% below the image centre and their
   height is 73% of it. The hairline spans exactly that cap height, and
   MOBILITY's own caps centre on it. --lh is the logo height.
   -------------------------------------------------------------------------- */
.nav__logo{--lh:28px;gap:.8rem}
.nav__logo img{height:var(--lh)}
.nav__sub,.flockup__sub{
  position:relative;
  top:calc(var(--lh) * .116);
  display:inline-flex;align-items:center;
  height:calc(var(--lh) * .732);
  padding-left:.8rem;
  padding-top:calc(var(--lh) * .05);
  box-sizing:border-box;
  font-family:var(--font-head);
  font-weight:600;
  font-stretch:112%;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}
.nav__sub{
  border-left:1px solid var(--line);
  font-size:.76rem;
  color:var(--ink);
}
@media (max-width:420px){
  .nav__logo{--lh:24px;gap:.6rem}
  .nav__sub{padding-left:.6rem;font-size:.66rem;letter-spacing:.18em}
}

.flockup{--lh:29px;display:flex;align-items:center;gap:.8rem;margin:0 0 1.2rem}
.site-footer .flockup img.flogo{height:var(--lh);margin-bottom:0}
.flockup__sub{
  border-left:1px solid rgba(255,255,255,.24);
  font-size:.76rem;
  color:#fff;
}

/* --------------------------------------------------------------------------
   2. 25 YEARS
   A callout rather than a lone figure: the number, its unit, a line naming
   what it measures and a short paragraph on what it means. It reuses .stat
   so the shared counter runs the figure up from zero on arrival.
   -------------------------------------------------------------------------- */
.exp.stat{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:clamp(18px,2.4vw,34px);
  margin:.6rem 0 1.8rem;
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,32px);
  border-top:0;
  border-left:3px solid var(--blue);
  background:linear-gradient(100deg,rgba(29,156,215,.08),rgba(29,156,215,.02) 70%);
}
.exp.stat::before{display:none}
.exp__fig{display:flex;align-items:baseline;gap:.35rem}
.exp.stat b{
  display:block;
  font-family:var(--font-head);
  font-weight:800;
  font-stretch:112%;
  font-size:clamp(3.4rem,2.4rem + 3.6vw,5.4rem);
  line-height:.85;
  letter-spacing:-.05em;
  color:var(--blue-700);
}
.exp.stat .exp__unit{
  display:inline;margin:0;
  font-family:var(--font-head);font-weight:700;font-stretch:112%;
  font-size:clamp(1.1rem,.9rem + .6vw,1.45rem);
  letter-spacing:-.02em;color:var(--ink);
}
.exp.stat .exp__txt p{margin:0;max-width:none;font-size:var(--t-md);line-height:1.6;color:var(--ink-70)}
.exp.stat .exp__txt .exp__h{
  margin:0 0 .45rem;
  font-family:var(--font-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
@media (max-width:520px){
  .exp.stat{grid-template-columns:1fr;gap:.9rem}
}

/* --------------------------------------------------------------------------
   3. CENTRED SECTIONS
   Paragraphs carry a global 72ch measure with no auto margins, so inside a
   centred block they sat as left-anchored boxes: the eyebrow and the lede
   drifted left of the heading. They now centre with it, and centred
   headings balance their lines instead of leaving a short last one.
   -------------------------------------------------------------------------- */
.section-head.center > p,
.statement > p{margin-left:auto;margin-right:auto}
.section-head.center h2,
.statement h2{text-wrap:balance}
/* the purpose line breaks at its own clause: what we build, then where and for whom */
.statement h2{max-width:23ch}

/* --------------------------------------------------------------------------
   3b. VISION AND MISSION
   Two labelled statements on one shared rule, set at the same size, so
   they read as a pair rather than two headlines of unequal weight.
   -------------------------------------------------------------------------- */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:0}
.vm__item{
  padding:clamp(22px,2.4vw,32px) clamp(24px,3.6vw,56px) 0 0;
  border-top:1px solid var(--navy-line);
}
.vm__item + .vm__item{
  padding-left:clamp(24px,3.6vw,56px);padding-right:0;
  border-left:1px solid var(--navy-line);
}
.vm__item h3{
  margin:0;
  color:#fff;
  font-size:clamp(1.25rem,1.05rem + .75vw,1.7rem);
  line-height:1.32;
  letter-spacing:-.02em;
  text-wrap:pretty;
}
@media (max-width:760px){
  .vm{grid-template-columns:1fr}
  .vm__item,.vm__item + .vm__item{padding:clamp(22px,5vw,30px) 0 clamp(26px,6vw,36px);border-left:0}
}

/* --------------------------------------------------------------------------
   4. THE FOOTPRINT: OFFICES AND PRESENCE
   Offices keep the drawn arcs and the travelling signal. Presence markets
   get a hollow ring and a finer dashed link, so the map never overstates
   the footprint: an office and a presence are visibly different things.
   -------------------------------------------------------------------------- */
.reach{
  stroke:#6FC6EC;
  stroke-width:1.2;
  stroke-dasharray:2 5;
  stroke-opacity:0;
  transition:stroke-opacity 1s var(--ease-out) 1.4s;
}
.in .reach{stroke-opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .in .reach{animation:reachFlow 1.6s linear infinite}
  @keyframes reachFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-14}}
}

.pin__ring{fill:#0A1826;stroke:#6FC6EC;stroke-width:1.6}
.pin__label--sm{font-size:10.5px;fill:rgba(255,255,255,.78)}
.pin__label--l{text-anchor:start}
.pin__label--r{text-anchor:end}
.in .pin:nth-child(6){animation-delay:1.75s}
.in .pin:nth-child(7){animation-delay:1.9s}
.in .pin:nth-child(8){animation-delay:2.05s}
.in .pin:nth-child(9){animation-delay:2.2s}

.world__key{
  display:flex;gap:1.4rem;justify-content:flex-end;
  margin:.4rem 0 0;
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
.world__key-item{display:inline-flex;align-items:center;gap:.5rem}
.world__key-dot,.world__key-ring{display:inline-block;width:9px;height:9px;border-radius:50%}
.world__key-dot{background:#6FC6EC}
.world__key-ring{border:1.6px solid #6FC6EC}

.reachlist__h{
  margin:2.2rem 0 0;
  font-family:var(--font-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#6FC6EC;
}
.reachlist{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin:.9rem 0 0;padding:0;list-style:none;
}
.reachlist li{
  margin:0;padding:.85rem 1.1rem .95rem;
  border-top:1px dashed rgba(111,198,236,.35);
  border-left:1px solid var(--navy-line);
}
.reachlist li:first-child{border-left:0;padding-left:0}
.reachlist b{display:block;font-family:var(--font-head);font-weight:600;font-size:var(--t-md);color:#fff}
.reachlist span{display:block;margin-top:.2rem;font-size:var(--t-sm);color:rgba(255,255,255,.6)}
@media (max-width:860px){
  .reachlist{grid-template-columns:repeat(2,1fr)}
  .reachlist li:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:460px){
  .world__key{justify-content:flex-start}
  .pin__label--sm{font-size:15px}
}

/* --------------------------------------------------------------------------
   5. LAUNCHES
   Two markets side by side. The date is set as a display figure, because on
   a launch card the date is the headline.
   -------------------------------------------------------------------------- */
.launch{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,28px);
}
.launch__card{
  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(24px,2.8vw,40px);
  border:1px solid var(--navy-line);
  background:linear-gradient(160deg,rgba(29,156,215,.10),rgba(13,30,45,.6) 55%);
  overflow:hidden;
}
.launch__where{
  margin:0 0 1.1rem;
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:#6FC6EC;
}
.launch__date{
  margin:0 0 1.4rem;
  font-family:var(--font-mono);font-size:var(--t-sm);letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
}
.launch__day{
  display:block;
  font-family:var(--font-head);font-weight:800;font-stretch:112%;
  font-size:clamp(3.6rem,2.4rem + 4.4vw,6.4rem);
  line-height:.86;letter-spacing:-.05em;
  color:#fff;
  margin-bottom:.35rem;
}
.launch__card h3{color:#fff;margin:0 0 .6rem;font-size:clamp(1.2rem,1rem + .6vw,1.5rem)}
.launch__card > p:not(.launch__where):not(.launch__date){color:rgba(255,255,255,.74);margin:0 0 1.6rem;max-width:38ch}
.launch__link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;
  font-family:var(--font-head);font-weight:600;font-size:var(--t-sm);
  color:#fff;
}
.launch__link svg{width:16px;height:16px;color:#6FC6EC;transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .launch__link:hover svg{transform:translate(2px,-2px)}
}
.launch__watch{
  display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.4rem;
  margin-top:clamp(24px,3vw,40px);
}
.launch__watch .btn svg{width:20px;height:20px}
.launch__channel{
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
@media (max-width:760px){
  .launch{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   7. SOCIAL
   -------------------------------------------------------------------------- */
.social{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;padding:0;list-style:none}
.social li{margin:0}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.82);
  transition:border-color .3s var(--ease-out),color .3s var(--ease-out),background-color .3s var(--ease-out),transform .3s var(--ease-out);
}
.social svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){
  .social a:hover{border-color:#6FC6EC;color:#fff;background:rgba(111,198,236,.1);transform:translateY(-2px)}
}
.social a:active{transform:scale(.96)}
.social a:focus-visible{outline:2px solid #6FC6EC;outline-offset:2px}
.social__label{
  margin:1.6rem 0 0;
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}

/* --------------------------------------------------------------------------
   8. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .reach{transition:none;stroke-opacity:.55}
  .social a,.pcol__arrow,.launch__link svg,.pcol__go svg,.yt__btn{transition:none}
}

/* --------------------------------------------------------------------------
   9. THE FILM
   A facade that looks like the player and costs nothing until it is used.
   The poster is the video's own thumbnail, cropped to 16:9 so its
   letterbox bars fall outside the frame.
   -------------------------------------------------------------------------- */
.yt{margin:0}
.yt__frame{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--navy);
  box-shadow:0 30px 60px -36px rgba(10,24,38,.55);
  color:#fff;
}
.yt__poster{
  position:absolute;inset:0;
  background-color:var(--navy);
  background-size:cover;
  background-position:center;
  transition:transform 1.2s var(--ease-out);
}
.yt__shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,24,38,0) 38%,rgba(10,24,38,.82) 100%);
}
.yt__btn{
  position:absolute;left:50%;top:50%;
  width:clamp(58px,6vw,78px);height:clamp(58px,6vw,78px);
  margin:calc(clamp(58px,6vw,78px) / -2) 0 0 calc(clamp(58px,6vw,78px) / -2);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  color:var(--navy);
  box-shadow:0 12px 30px -10px rgba(10,24,38,.6);
  transition:transform .35s var(--ease-out),background-color .35s var(--ease-out),color .35s var(--ease-out);
}
.yt__btn svg{width:42%;height:42%;margin-left:6%}
.yt__meta{
  position:absolute;left:clamp(16px,2.2vw,28px);right:clamp(16px,2.2vw,28px);bottom:clamp(14px,2vw,24px);
  display:flex;flex-direction:column;gap:.3rem;
}
.yt__kicker{
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:#6FC6EC;
}
.yt__title{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.05rem,.9rem + .6vw,1.4rem);
  letter-spacing:-.02em;line-height:1.2;
}
@media (hover:hover) and (pointer:fine){
  .yt__frame:hover .yt__poster{transform:scale(1.035)}
  .yt__frame:hover .yt__btn{transform:scale(1.08);background:var(--blue);color:#fff}
}
.yt__frame:active .yt__btn{transform:scale(.96)}
.yt__frame:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt figcaption{
  margin-top:.9rem;
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-55);
}

/* --------------------------------------------------------------------------
   10. IN THE NEWS, BY MARKET
   India and the UAE side by side. Each column leads with its biggest story
   set large on navy, then the rest as editorial rows. Every headline is
   verbatim; the masthead is set in type, not as a logo.
   -------------------------------------------------------------------------- */
.pcols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,48px);
  align-items:start;
}
.pcol__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;margin-bottom:1.1rem;
  border-bottom:2px solid var(--ink);
}
.pcol__market{
  margin:0;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);
  letter-spacing:-.035em;
}
.pcol__when{
  margin:0;
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-55);
}

.pcol__lead{
  position:relative;
  display:flex;flex-direction:column;gap:.55rem;
  min-height:clamp(250px,24vw,320px);
  padding:clamp(22px,2.4vw,34px);
  background:var(--navy);
  color:#fff;
  overflow:hidden;
}
.pcol__lead::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
}
.pcol__lead .pcol__pub{
  font-family:var(--font-head);font-weight:700;font-stretch:108%;
  font-size:clamp(1.15rem,1rem + .5vw,1.4rem);letter-spacing:-.02em;
}
.pcol__lead .pcol__date{
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
}
.pcol__lead .pcol__title{
  margin-top:.6rem;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.35rem,1.05rem + 1.1vw,2rem);
  line-height:1.14;letter-spacing:-.03em;
  text-wrap:balance;
}
.pcol__go{
  margin-top:auto;padding-top:1rem;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-head);font-weight:600;font-size:var(--t-sm);color:#6FC6EC;
}
.pcol__go svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .pcol__lead:hover .pcol__go svg{transform:translate(3px,-3px)}
}
.pcol__lead:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.pcol__list{list-style:none;margin:0;padding:0}
.pcol__list li{margin:0;border-bottom:1px solid var(--line)}
.pcol__list a{
  position:relative;
  display:grid;
  grid-template-columns:1fr 20px;
  grid-template-areas:"row arrow" "title arrow";
  gap:.35rem 1rem;
  align-items:center;
  padding:1.15rem 0;
  color:var(--ink);
}
.pcol__row{grid-area:row;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.pcol__list .pcol__pub{font-family:var(--font-head);font-weight:700;font-size:var(--t-md);letter-spacing:-.01em}
.pcol__list .pcol__date{
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-55);white-space:nowrap;
}
.pcol__list .pcol__title{
  grid-area:title;
  font-family:var(--font-head);font-weight:600;
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);
  line-height:1.38;letter-spacing:-.01em;
}
.pcol__arrow{grid-area:arrow;width:18px;height:18px;color:var(--ink-55);transition:transform .3s var(--ease-out),color .3s var(--ease-out)}
.pcol__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .pcol__list a:hover::after{transform:scaleX(1)}
  .pcol__list a:hover .pcol__arrow{transform:translate(3px,-3px);color:var(--blue-700)}
}
.pcol__list a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

@media (max-width:860px){
  .pcols{grid-template-columns:1fr;gap:clamp(40px,8vw,56px)}
  .pcol__lead{min-height:0}
}

/* --------------------------------------------------------------------------
   11. WHERE TO BUY
   The full range in one frame, feature phones to tablet.
   -------------------------------------------------------------------------- */
.split__media--range img{
  aspect-ratio:1590/1050;
  object-fit:cover;
  box-shadow:0 30px 60px -38px rgba(10,24,38,.45);
}

@media (prefers-reduced-motion:reduce){
  .yt__poster{transition:none}
  .yt__frame:hover .yt__poster{transform:none}
}

/* --------------------------------------------------------------------------
   12. THE TABLET SLIDE
   Every other slide floats a cut-out product; the tablet now does too. It
   is landscape where the phones are portrait, so it is held a touch lower
   to carry the same visual weight.
   -------------------------------------------------------------------------- */
.banner__media img.banner__wide{
  max-height:clamp(250px,29vw,400px);
  max-width:100%;
}
@media (max-width:880px){
  .banner__media img.banner__wide{max-height:230px}
}

/* --------------------------------------------------------------------------
   13. THE INDIA LAUNCH FILM, ON THE DARK LAUNCHES BAND
   -------------------------------------------------------------------------- */
.yt--launch{margin-top:clamp(28px,3.5vw,48px)}
.yt--launch .yt__frame{box-shadow:0 40px 80px -40px rgba(0,0,0,.7);outline:1px solid rgba(255,255,255,.1)}
.yt--launch .yt__frame:focus-visible{outline:3px solid #6FC6EC}
.yt--launch figcaption{color:rgba(255,255,255,.6)}

/* --------------------------------------------------------------------------
   14. MORE COVERAGE FOLD
   -------------------------------------------------------------------------- */
.pcol__more{margin-top:.2rem}
.pcol__more > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.7rem;
  padding:1.05rem 0;
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-700);
  border-bottom:1px solid var(--line);
}
.pcol__more > summary::-webkit-details-marker{display:none}
.pcol__more > summary::after{
  content:"";margin-left:auto;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg);
  transition:transform .3s var(--ease-out);
}
.pcol__more[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.pcol__more > summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.pcol__count{
  display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .4rem;
  border-radius:999px;background:rgba(0,120,200,.1);letter-spacing:0;font-weight:700;
}
.pcol__more[open] > summary .pcol__count{background:var(--blue-700);color:#fff}
@media (prefers-reduced-motion:reduce){.pcol__more > summary::after{transition:none}}
.launch__film{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(28px,3.5vw,48px);
}
.launch__film .yt--launch{margin-top:0}
.launch__filmtext h3{color:#fff;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);letter-spacing:-.02em;margin:.5rem 0 .8rem}
.launch__filmtext > p:not(.launch__where){color:rgba(255,255,255,.72);max-width:38ch}
.launch__filmtext .launch__watch{margin-top:1.4rem}
@media (max-width:880px){.launch__film{grid-template-columns:1fr}}
.yt--launch figcaption{display:none}

/* --------------------------------------------------------------------------
   15. PHOTOGRAPHIC CATEGORY TILE
   Product cut-outs are printed onto the tinted panel with multiply; a real
   photograph is not, or its whites turn grey.
   -------------------------------------------------------------------------- */
.feat__media--photo{background:transparent}
.feat__media--photo img{mix-blend-mode:normal}
.mfg__media img{width:100%;height:auto;display:block}

/* --------------------------------------------------------------------------
   16. THE LINE, RUNNING
   A short silent loop from our own line. It holds still for anyone who asks
   for less motion, and it never loads before it is needed.
   -------------------------------------------------------------------------- */
.mfg__media{margin:0}
.mfg__video{display:block;width:100%;height:auto;background:var(--navy)}
.mfg__media img{width:100%;height:auto;display:block}

/* --------------------------------------------------------------------------
   17. THE PHONE PASS
   The layout was drawn for a wide screen first. On a phone the same type
   scale, the same section padding and the same scroll tricks add up to a
   page that reads as enormous, with dead space between the parts and a
   couple of effects that misbehave at this width. Everything below applies
   to phones only; the desktop layout is untouched.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  /* 17.1 Type: one step down, so a line holds ten words instead of six. */
  body{font-size:16px;line-height:1.55}
  h1{font-size:clamp(1.95rem,1.35rem + 2.4vw,2.6rem);letter-spacing:-.03em}
  h2{font-size:clamp(1.55rem,1.15rem + 1.9vw,2.1rem);letter-spacing:-.028em}
  h3{font-size:clamp(1.08rem,1rem + .5vw,1.25rem)}
  .lede{font-size:1.02rem;line-height:1.5}
  .pagehead h1{font-size:clamp(2rem,1.4rem + 2.6vw,2.7rem)}

  /* 17.2 Space: the gaps were sized for a 1440px canvas. */
  .section{padding:clamp(46px,9vw,64px) 0}
  .section--tight{padding:clamp(34px,7vw,46px) 0}
  .section--tall{padding:clamp(58px,11vw,80px) 0}
  .section-head{margin-bottom:clamp(24px,5vw,34px)}
  .split{gap:clamp(22px,5vw,32px)}
  .statement{padding-block:clamp(30px,6vw,44px)}

  /* 17.3 The header is opaque here, so nothing ghosts through it as the
     dark sections scroll past. */
  .site-header,.site-header.is-stuck{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

  /* 17.4 Headings that animate word by word settle immediately at this
     width, instead of sitting half-faded when the effect does not fire. */
  .kin .kin__w,.kin__w{opacity:1;transform:none;filter:none;animation:none}
  .lsplit__line > span{transform:none}
}

/* 17.5 The two brand cards stack over one another on a wide screen. On a
   phone the first card is taller than the room the effect assumes, so the
   second one slides over it and cuts the text in half. They simply follow
   one another here. */
@media (max-width:820px){
  .stack{display:block}
  .stack .brandcard,
  .stack .brandcard:nth-child(1),
  .stack .brandcard:nth-child(2){
    position:static;top:auto;animation:none;transform:none;filter:none;
    box-shadow:none;margin-top:0;
  }
  .stack .brandcard + .brandcard{margin-top:18px}
}

/* 17.6 The NX teaser devices are near-black on a near-black panel. A touch
   of lift and a soft rim make them read on a phone screen. */
@media (max-width:880px){
  .teaser__media img{
    filter:drop-shadow(0 18px 36px rgba(0,0,0,.55)) brightness(1.5) contrast(1.06);
  }
  .banner{min-height:0}
  .banner__inner{min-height:0;padding:clamp(28px,6vw,44px) 0 clamp(36px,7vw,52px)}
  .banner__media--mark{min-height:200px}
}

/* ==========================================================================
   18. THE SECOND PHONE PASS
   Two things that read well on a wide screen do not survive the narrowing.

   The column rules behind the dark bands are set as a fraction of the band's
   width, so six of them across a desktop band are a quiet structure and six
   across a phone are a stripe every 65px, sitting directly behind the
   headline. The soft light that travels down the band on touch then lit
   those stripes from behind, which is what turned the grid into smears.

   Both are answered the same way: fewer rules, carrying less light.
   ========================================================================== */
@media (max-width:760px){
  /* The column rules go. At this width every one of them lands inside the
     measure rather than beside it, and the field of dots already carries
     the texture they were there for. */
  .band::after,.brandcard--dark::after{display:none}

  /* The descending hairlines stay, because they are the one thing in the
     band that moves, but they move at the gutters: site.js places two of
     them at the margins instead of five across the measure. The packet
     each one carries is halved, so it reads as light down the edge of the
     page rather than as a streak through a sentence. */
  .flowlines i{
    background:linear-gradient(180deg,transparent 0%,rgba(111,198,236,.05) 16%,
      rgba(111,198,236,.05) 84%,transparent 100%);
  }
  .flowlines i::after{
    width:2px;left:0;
    background:linear-gradient(180deg,rgba(111,198,236,0),rgba(111,198,236,.20) 46%,
      rgba(150,222,248,.38) 74%,rgba(111,198,236,0));
  }

  /* the travelling light sits off the copy and carries about half as far */
  .glow__light{
    background:radial-gradient(360px circle at 82% 22%,
      rgba(111,198,236,.09),rgba(111,198,236,.03) 40%,transparent 68%);
  }
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      @keyframes glowSweep{
        from{translate:0 -16%}
        to{translate:0 16%}
      }
    }
  }
}

/* The dot field behind the hero.
   Its falloff is horizontal: faint on the left where the copy sits, full
   strength on the right behind the product. On a phone the two columns
   become one, the product moves above the copy, and that same falloff now
   puts the brightest dots straight through the headline. The field keeps
   its place behind the product and leaves the words alone: see maskAt in
   signal.js, which switches to a vertical falloff under 900px. */
@media (max-width:900px){
  .banner .sigfield{opacity:.9}
}

/* The dwell rail: seven slides at 40px each all but span a phone. The dashes
   hold their 44px-tall hit area and give back some width. */
@media (max-width:480px){
  .banner__dots{gap:.34rem;bottom:2px}
  .banner__dots button{width:30px}
}