/* PearlHelix inner pages, v5: services, AI, about and the film. Loaded by those pages only, after site.css.
   Values come from tokens.css; see docs/DESIGN.md section 10. */

/* ---------- The band: a page that opens on night ---------- */
.band{padding-bottom:var(--section);background:var(--night-field),var(--night);color:var(--on-teal-2)}
.band .eyebrow{color:var(--on-teal-2)}
.band :focus-visible{outline-color:var(--paper)}
.band-title{max-width:13em;margin-inline-start:var(--display-optical);color:var(--paper);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:var(--wght-medium)}
.band-lede{margin-top:var(--s-6);max-width:var(--measure-lede);font-size:var(--fs-lede);line-height:var(--lh-lede)}
.about-title{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-stretch:var(--wdth-h2);font-weight:var(--wght-h2)}
.about--page{padding-top:var(--page-pad-top)}

/* ---------- Services ---------- */
.jump{margin-top:var(--s-8)}
.jump ul{display:grid;list-style:none;padding:0;border-top:1px solid var(--night-line)}
.jump a{display:flex;align-items:baseline;gap:var(--s-4);min-height:var(--tap);padding-block:var(--s-3);border-bottom:1px solid var(--night-line);color:var(--paper);font-weight:var(--wght-medium);text-decoration:none}
.jump span{color:var(--on-teal-2);font-size:var(--fs-small);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-num)}
.group+.group{padding-top:0}
.group .half-title{margin-bottom:var(--s-6)}
.service{display:grid;row-gap:var(--s-5);padding-block:var(--s-7);border-top:1px solid var(--line);scroll-margin-top:var(--anchor-offset)}
.service-head h3{margin-block:var(--s-3) var(--s-4);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-stretch:var(--wdth-h2);font-weight:var(--wght-h2)}
.service-head .plate-verbs{margin:0;padding:0;border:0}
.service-text{max-width:var(--measure);color:var(--ink);font-size:var(--fs-lede);line-height:var(--lh-lede)}
.service-cols{display:grid;gap:var(--s-6) var(--grid-gap);margin-top:var(--s-7)}
.service .about-sub{margin-bottom:var(--s-4)}
.dots{list-style:none;padding:0}
.dots li{position:relative;padding-left:calc(var(--pearl) + var(--s-3))}
.dots li+li{margin-top:var(--s-3)}
.dots li::before{content:"";position:absolute;left:0;top:calc(.81em - var(--pearl) / 2);width:var(--pearl);height:var(--pearl);border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--teal-300),var(--teal-800) 70%)}
.service-step{margin-top:var(--s-7);padding:var(--s-5);border-radius:var(--r-md);background:var(--paper-deep);color:var(--ink)}
.service-step .about-sub{margin-bottom:var(--s-2)}
.service-ask{margin-top:var(--s-4)}
.run-list{display:grid;gap:var(--s-6) var(--grid-gap);list-style:none;padding:0}
.run-list li{position:relative;padding-top:calc(var(--node) + var(--s-4))}
.run-list h3{margin-bottom:var(--s-2)}
.run-list p{max-width:var(--measure-step)}

/* ---------- AI ---------- */
.compare{display:grid;gap:var(--s-6) var(--grid-gap)}
.compare>div{padding-top:var(--s-5);border-top:1px solid var(--line)}
.compare li{color:var(--ink);font-size:var(--fs-lede);line-height:var(--lh-tight)}
.compare .dots li+li{margin-top:var(--s-4)}
.plates--four .plate-verbs{margin:0 0 var(--s-5);padding:0;border:0;color:var(--teal-600)}
.ask-list{display:grid;column-gap:var(--grid-gap);padding:0;list-style:none;counter-reset:ask;border-top:1px solid var(--line)}
.ask-list li{display:grid;grid-template-columns:var(--ask-num) minmax(0,1fr);align-items:baseline;padding-block:var(--s-5);border-bottom:1px solid var(--line);counter-increment:ask;color:var(--ink);font-size:var(--fs-lede);line-height:var(--lh-tight)}
.ask-list li::before{content:counter(ask,decimal-leading-zero);color:var(--teal-600);font-size:var(--fs-small);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-num)}
.statement{padding-block:var(--section);background:var(--night);color:var(--on-teal-2)}
.statement .eyebrow{color:var(--on-teal-2)}
.statement-text{max-width:23em;color:var(--paper);font-size:var(--fs-h2);line-height:var(--lh-h3);letter-spacing:var(--tr-h2);font-stretch:var(--wdth-h2);font-weight:var(--wght-h2);text-wrap:balance}

/* ---------- About ---------- */
.person-grid{display:grid;row-gap:var(--s-6)}
.note{margin:0;padding:var(--plate-pad);border:var(--art-frame);border-radius:var(--r-lg);background:var(--paper-raised)}
.note blockquote{margin:0;color:var(--ink);font-size:var(--fs-lede);line-height:var(--lh-lede)}
.note blockquote p+p{margin-top:var(--s-4)}
.note figcaption{display:grid;margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);font-size:var(--fs-small)}
.note figcaption strong{color:var(--ink);font-size:var(--fs-body);font-weight:var(--wght-strong)}
.note-link{margin-top:var(--s-3)}
.note figcaption .note-link a{font-size:var(--fs-body)}
.business{padding-top:0}
.business .about-block{max-width:var(--measure)}

/* ---------- Film ---------- */
/* The film has no frame (D-98): it runs the full width of the band, and the band round it is lit by it. Without
   film.js it is the browser's own player in that room; with it, its edges dissolve and the light follows the film. */
.band--film{padding-bottom:var(--s-8);background:var(--night);overflow:clip}
.theatre-head{position:relative;z-index:1}
.screen{margin-top:var(--s-7)}
.screen-frame{position:relative;isolation:isolate;width:min(100%,var(--film-fit));margin-inline:auto}
.screen-light{position:absolute;inset:-40% -30%;z-index:-1;pointer-events:none}
.screen-light span{position:absolute;inset:0;opacity:var(--level)}
/* at rest the room holds the poster's light (film/light.mjs prints it) */
.screen-light span:first-child{--level:.55;background:var(--film-light-cool)}
.screen-light span:last-child{--level:.17;background:var(--film-light-warm)}
.film{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--night)}
/* A phone shows the film 4:3: only the dark sides of its frame go, and the pearl, the strands and every word are
   within the middle three quarters of its width */
@media (max-width:40rem){.film{aspect-ratio:4/3;object-fit:cover}}
.film-notes{display:grid;gap:var(--s-7) var(--grid-gap)}
.film-words{list-style:none;padding:0;color:var(--ink);font-size:var(--fs-lede);line-height:var(--lh-lede)}
.film-words li+li{margin-top:var(--s-3)}
.film-notes p{max-width:var(--measure-intro)}

@media (min-width:45rem){
  .jump ul,.service-cols,.compare,.run-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap)}
  .plates--four .plate:last-child{grid-column:auto}
}
@media (min-width:64rem){
  .jump ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .service{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .service-head{grid-column:1/span 4;position:sticky;top:var(--sticky-top);align-self:start}
  .service-body{grid-column:6/span 7}
  .run-list,.plates--four{grid-template-columns:repeat(4,minmax(0,1fr))}
  .care-list--three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ask-list,.film-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .person-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .person-head{grid-column:1/span 5}
  .note{grid-column:7/span 6}
}
@supports (grid-template-rows:subgrid){
  @media (min-width:45rem){.plates--four .plate{grid-row:span 3}}
}
@media (forced-colors:active){
  .dots li::before{forced-color-adjust:none;background:CanvasText}
  .service-step,.note{background:Canvas;border:1px solid CanvasText}
  .screen-light{display:none}
}
@media print{
  .service,.note,.ask-list li{break-inside:avoid}
  .screen-light{display:none}
  .service-head{position:static}
}