/* ============================================================
   How we work — four editorial blocks around the brand mark.

   The composition is the point: there is no card, no panel and no
   rectangle around any block. The page background runs straight
   through. What holds the four blocks together is the mark at the
   centre, the light around it, and four hairlines drawn to each
   block by how-we-work.js from measured positions.

   Below 860px the diagram is not a diagram any more: the mark goes
   on top, the blocks stack, and the wires are removed rather than
   squeezed.
   ============================================================ */

.hww{
  --hww-gold:#F0CE80;
  --hww-ink:#EDE8DF;
  --hww-dim:#9BAABF;
  --hww-wire:rgba(237,232,223,.17);
  position:relative;
  padding:clamp(42px,4.4vw,70px) 24px clamp(32px,3.2vw,50px);
  font-family:Archivo,Arial,sans-serif;
  color:var(--hww-ink);
  scroll-margin-top:95px;
  overflow-x:clip;
}
.hww__shell{position:relative;max-width:1180px;margin:0 auto}

/* ---------- heading ------------------------------------------------ */

/* No ch measure on the header: 46ch of a 16px root is ~350px, which was
   breaking a 35-character heading across three lines for no reason. The
   title sets its own line, and the lede is short enough not to need a cap. */
.hww__head{text-align:center;margin:0 auto clamp(20px,2vw,30px)}
.hww__kicker{
  display:block;margin-bottom:9px;
  font-size:10px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;
  color:#ffc02b;
}
.hww__title{
  margin:0;
  /* One line on desktop. Smaller than it was, and held unwrapped rather than
     squeezed: at 32px the sentence is ~560px wide inside an 1180px shell. */
  white-space:nowrap;
  font-size:clamp(23px,2.25vw,32px);line-height:1.12;letter-spacing:-.022em;
  font-weight:700;color:#FFFFFF;
}
.hww__lede{
  margin:9px 0 0;
  font-size:clamp(13.5px,1vw,15px);line-height:1.5;
  color:rgba(237,232,223,.62);
}

/* ---------- the map ------------------------------------------------ */

/* Two rows of two blocks with the mark held in the gutter between them.
   The centre column is what the wires are measured against, so it keeps a
   fixed share of the width rather than being sized by its contents. */
.hww__map{
  position:relative;
  display:grid;
  grid-template-columns:1fr clamp(150px,14.5vw,190px) 1fr;
  column-gap:clamp(18px,2.2vw,38px);
  row-gap:clamp(26px,3vw,46px);
  align-items:center;
}

.hww__wires{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
  overflow:visible;
}
.hww__wires path{
  fill:none;stroke:var(--hww-wire);stroke-width:1;
  stroke-linecap:round;
}
/* Drawn in once, when the section first comes into view. The dash length is
   set per path by the script, which is the only way to get an even reveal
   out of paths of different lengths. */
.hww__wires path{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
}
.hww.is-seen .hww__wires path{
  transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.3,1);
  transition-delay:calc(var(--n,0) * 130ms);
  stroke-dashoffset:0;
}

/* ---------- the mark at the centre --------------------------------- */

.hww__core{
  grid-column:2;grid-row:1 / span 2;
  justify-self:center;align-self:center;
  position:relative;z-index:2;
  display:grid;place-items:center;
  width:clamp(104px,11vw,140px);aspect-ratio:1;
}
/* A diffuse pool, not a halo on every element. It breathes very slightly so
   the centre is never completely static, and stops dead under reduced
   motion. */
.hww__halo{
  position:absolute;inset:-58%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(240,206,128,.17) 0%,rgba(240,206,128,.06) 42%,rgba(240,206,128,0) 72%);
  animation:hww-breathe 9s ease-in-out infinite alternate;
  animation-play-state:paused;
  will-change:opacity,transform;
}
.hww.is-seen .hww__halo{animation-play-state:running}
@keyframes hww-breathe{
  from{opacity:.75;transform:scale(.97)}
  to  {opacity:1;transform:scale(1.03)}
}
/* One ring. A single hairline, warm at the top where the light is. */
.hww__ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(240,206,128,.26);
  box-shadow:inset 0 1px 0 rgba(255,241,206,.14);
}
.hww__core img{
  position:relative;
  width:56%;height:auto;display:block;
  filter:drop-shadow(0 10px 26px rgba(10,7,0,.5));
}

/* ---------- one block ---------------------------------------------- */

/* Invisible on desktop. The wrapper exists for the mobile scroller; here it
   must not come between .hww__map and the four blocks, because the blocks are
   placed by grid-column / grid-row and the wires are measured from their
   dots. display:contents removes exactly the box and keeps the children. */
.hww__rail{display:contents}
.hww__dots{display:none}

/* align-self:start, so the two blocks in a row begin on the same line
   whatever their copy length. Centring them put the left heading and the
   right heading at different heights and the row read as misaligned. */
.hww__node{
  position:relative;z-index:1;
  align-self:start;
  max-width:33ch;
}
.hww__node--a,.hww__node--c{grid-column:1;justify-self:end;text-align:right}
.hww__node--b,.hww__node--d{grid-column:3;justify-self:start}
.hww__node--a,.hww__node--b{grid-row:1}
.hww__node--c,.hww__node--d{grid-row:2}

/* The wire lands on this dot, so it is the element the script measures. */
.hww__dot{
  position:absolute;top:7px;
  width:5px;height:5px;border-radius:50%;
  background:var(--hww-gold);
  box-shadow:0 0 0 4px rgba(240,206,128,.1);
}
.hww__node--a .hww__dot,.hww__node--c .hww__dot{right:-13px}
.hww__node--b .hww__dot,.hww__node--d .hww__dot{left:-13px}

.hww__h{
  margin:0 0 9px;
  font-size:clamp(14px,1.15vw,16px);line-height:1.25;
  font-weight:650;letter-spacing:-.01em;color:#fff;
}
.hww__p{
  margin:0;
  font-size:clamp(13px,1.02vw,14.5px);line-height:1.62;
  color:rgba(237,232,223,.66);
}
.hww__p a{
  color:rgba(237,232,223,.9);
  text-decoration:underline;text-decoration-color:rgba(240,206,128,.5);
  text-underline-offset:3px;
}
.hww__p a:hover{color:var(--hww-gold);text-decoration-color:var(--hww-gold)}
.hww__p a:focus-visible{
  outline:2px solid var(--hww-gold);outline-offset:3px;border-radius:3px;
}

/* ---------- stacked ------------------------------------------------- */

@media (max-width:860px){
  .hww{padding:34px 20px 28px}
  /* This one does fit. The sentence is 395px at 23px and a 390px phone gives
     the section 350, so 5.66vw - 2.26px solves for it and holds one line
     from 320px up — a 35-character sentence has no business on two lines.
     white-space stays normal rather than nowrap: if the solve is ever off by
     a pixel the sentence wraps, which is recoverable, instead of running out
     of the section, which is not. */
  .hww__title{white-space:normal;font-size:min(23px,calc(5.66vw - 2.26px))}
  /* Two sentences, 333px at 13.5px, and the 13.5px floor underneath was
     breaking them into a line and the orphan "process." on a 360px screen.
     Solved the same way as the title, with a floor of its own: below 320px
     of column the lede gives up one line rather than any more type size. */
  /* balance only has something to do below ~330px of column, where even the
     floor will not hold one line. There it splits the two sentences instead
     of filling the first line and orphaning "process." onto the second. */
  .hww__lede{font-size:clamp(12.6px,calc(3.93vw - 1.57px),15px);text-wrap:balance}
  .hww__head{margin-bottom:18px}
  /* The wires are removed, not scaled down: four lines crossing a single
     column would be decoration in the way of the text. */
  .hww__wires{display:none}
  .hww__map{
    grid-template-columns:1fr;
    row-gap:16px;
    justify-items:center;
  }
  .hww__core{
    grid-column:1;grid-row:1;
    width:clamp(96px,27vw,122px);
    margin-bottom:2px;
  }
  /* The four blocks stop being a column and become one row you swipe. The
     column was 660px tall on a 390px phone for four short paragraphs, and
     most of that height was the gaps between them — a reader had to scroll
     past the whole thing to reach the next section. On a row they occupy the
     height of the longest one, once.

     grid-column has to be set here, not just grid-row. Blocks b and d are
     sent to column 3 by the desktop rule, and a column 3 that no longer
     exists is not ignored: the grid grows implicit tracks to reach it. The
     rail is the one grid item now, so the placement lives on it. */
  .hww__rail{
    display:flex;
    grid-column:1;grid-row:2;
    width:100%;
    gap:12px;
    align-items:stretch;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hww__rail::-webkit-scrollbar{display:none}
  /* 87%, so an edge of the next block is always showing. That edge is the
     only thing on the screen that says there is a next block; a row that
     ends exactly at the fold reads as the end of the section. */
  .hww__node{
    flex:0 0 87%;
    scroll-snap-align:center;
    max-width:none;text-align:left;
  }
  .hww__node--a,.hww__node--c{text-align:left}
  /* align-self:start is a desktop rule — two blocks in a row beginning on the
     same line. In the rail every block is its own page, and stretch is what
     keeps the section the same height on all four. */
  .hww__node{align-self:stretch}
  /* The dot stays as a marker, moved in front of the heading where there is
     no wire for it to terminate. */
  .hww__dot{top:6px;left:0;right:auto}
  .hww__h,.hww__p{padding-left:16px}

  /* Position, not decoration: four short paragraphs on a row give no clue
     which one you are on. Built by how-we-work.js, so a blocked script
     leaves a scroller with no orphaned controls above it. */
  .hww__dots{
    display:flex;justify-content:center;gap:0;
    grid-column:1;grid-row:3;
  }
  /* The button is the target and the mark is drawn inside it, rather than a
     7px button with an invisible 39px pad hung off it: four of those, 7px
     apart, overlap by half their width, and a tap between two of them lands
     on whichever was painted last. 26px boxes edge to edge cannot overlap,
     and the dots still read 19px apart. */
  .hww__pip{
    position:relative;
    width:26px;height:26px;padding:0;
    border:0;background:none;
    cursor:pointer;
  }
  .hww__pip::before{
    content:'';position:absolute;inset:9.5px;
    border-radius:50%;
    background:rgba(237,232,223,.22);
    transition:background-color .2s,transform .2s;
  }
  .hww__pip.is-on::before{background:var(--hww-gold);transform:scale(1.3)}
  .hww__pip:focus-visible{outline:2px solid var(--hww-gold);outline-offset:-4px;
    border-radius:50%}
}

@media (prefers-reduced-motion:reduce){
  .hww__halo{animation:none;opacity:.9;transform:none}
  .hww.is-seen .hww__wires path{transition:none}
  .hww__wires path{stroke-dashoffset:0}
  /* The rail still snaps, it just stops gliding: a pip jumps to its block
     instead of travelling there. */
  .hww__rail{scroll-behavior:auto}
  .hww__pip::before{transition:none}
}

/* A tighter desktop transition from the comparison section. */
@media(min-width:701px){.hww{padding-top:28px;padding-bottom:28px}.hww__head{margin-bottom:20px}}