/* ═══════════════════════════════════════════════════════════════
   Group Project — single scroll
   Mobile first. Tablet ≥768. Desktop ≥1024.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --build:"2026-09-02q";
  --orange:#ff5200;
  --mint:#b3e8c2;
  --white:#fff;
  --ink:#1c1c1c;

  --gutter:9.5%;
  --rule:1px;

  /* type — mobile values, overridden at breakpoints */
  --fs-display:clamp(1.0625rem, 4.85vw, 1.5rem);
  --fs-bar:clamp(0.875rem, 3.5vw, 1.0625rem);
  --fs-heading:clamp(1rem, 4.1vw, 1.3125rem);
  --fs-body:clamp(0.875rem, 3.55vw, 1.0625rem);
  --fs-detail:clamp(0.8125rem, 3.35vw, 1rem);

  --lh-display:1.3;

  /* the lead's own metrics, named so the centring calc below can use them */
  --lead-logo:clamp(2.25rem, 9.2vw, 3.25rem);
  --lead-logo-gap:0.55rem;
  --hl-nudge:0.087em;
  --lead-lines:4;
  --lead-alpha:0;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--white);
  color:var(--orange);
  font-family:polymath, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-style:normal;
  overflow-x:hidden;
}

img{display:block;width:100%;height:100%;object-fit:cover;}

p{margin:0;}

.sprite{position:absolute;width:0;height:0;overflow:hidden;}

.u-visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

:where(a,button):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}

/* ── shared type ─────────────────────────────────────────────── */

.display{
  margin:0;
  font-size:var(--fs-display);
  font-weight:700;
  line-height:var(--lh-display);
  letter-spacing:-0.005em;
  color:var(--orange);
}

.display + .display{margin-top:1.4em;}

.maillink{
  color:inherit;
  text-decoration:none;
}
.maillink:hover{text-decoration:underline;text-underline-offset:0.12em;}

.heading{
  margin:0 0 0.85em;
  font-size:var(--fs-heading);
  font-weight:700;
  line-height:1.44;
  color:var(--ink);
}

.mark{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background-image:linear-gradient(var(--mint),var(--mint));
  background-size:100% 1.22em;
  background-position:left 0 bottom var(--hl-nudge);
  background-repeat:no-repeat;
  padding:0 0.32em;
}

/* ── hero ────────────────────────────────────────────────────── */

.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
}

/* The white of the section below grows up out of the hero's bottom edge as the
   page scrolls, covering the photograph and finishing behind the headline.
   Layered above the accordion bars (4) and below the headline (6). */
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--focus-rise, 0px);
  background:var(--white);
  z-index:5;
  pointer-events:none;
}

.hero__figure{
  position:relative;
  grid-column:1;
  margin:0;
  aspect-ratio:1/1;
  overflow:visible;
}
.hero__figure--a{grid-row:1;}
.hero__figure--b{grid-row:2;}

.hero__figure img{position:absolute;inset:0;}
.hero__figure--a img{object-position:52% 40%;}
.hero__figure--b img{object-position:48% 42%;}

/* ── strategy accordions ─────────────────────────────────────── */

.strategy{
  position:absolute;
  left:9.5%;
  right:9.5%;
  z-index:4;
}


/* The tiles are square on mobile, so the same 9.5% gives an identical inset on
   every edge — top for the upper bar, bottom for the lower one. */
.strategy--mint{top:9.5%;}
.strategy--orange{bottom:9.5%;}

.strategy__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75em;
  width:100%;
  padding:0.62em 0 0.62em 1em;
  border:0;
  border-radius:0;
  font:inherit;
  font-size:var(--fs-bar);
  font-weight:700;
  line-height:1.3;
  text-align:left;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

.strategy--mint{--seam:var(--orange);}
.strategy--orange{--seam:var(--mint);}
.strategy--mint .strategy__bar{background:var(--mint);color:var(--orange);}
.strategy--orange .strategy__bar{background:var(--orange);color:var(--mint);}

.strategy__labels{
  position:relative;
  display:block;
  flex:1 1 auto;
  min-width:0;
  height:1.3em;
  overflow:hidden;
}

.strategy__label{
  position:absolute;
  inset:0;
  display:block;
  will-change:transform;
  backface-visibility:hidden;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transform:translateY(0);
}

/* incoming / outgoing transforms are applied inline by script.js
   so the two states can never be fought over by selector order */



.strategy__chevron{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  width:2.4em;
  border-left:var(--rule) solid currentColor;
}
.strategy__chevron svg{
  width:1.35em;
  height:0.8em;
  overflow:visible;
  color:currentColor;
  transition:transform 320ms cubic-bezier(.5,0,.9,.55);
}
.strategy--orange .strategy__chevron svg{color:var(--mint);}
.strategy.is-open .strategy__chevron svg{transform:rotate(180deg);}

/* The hero panels float over the photo — nothing below them moves — so they
   slide on a transform instead of animating height. No layout per frame. */
.strategy__panel{
  position:absolute;
  top:100%;
  left:0;
  width:calc(100% - 2.4em);
  clip-path:inset(0 -2.5rem -2.5rem -2.5rem);
  pointer-events:none;
}

.strategy__panelinner{
  background:var(--white);
  border-top:2px solid var(--seam);
  color:var(--ink);
  padding:1.35em 1.5em 1.6em;
  font-size:var(--fs-body);
  line-height:1.45;
  box-shadow:0 14px 22px -10px rgba(28,28,28,0.30);
  transform:translate3d(0,-101%,0);
  visibility:hidden;
  will-change:transform;
  transition:transform 320ms cubic-bezier(.5,0,.9,.55), visibility 0s linear 320ms;
}

.strategy.is-open .strategy__panel{pointer-events:auto;}
.strategy.is-open .strategy__panelinner{
  transform:translate3d(0,0,0);
  visibility:visible;
  transition:transform 380ms cubic-bezier(.25,.85,.3,1), visibility 0s;
}

/* the chevron has to finish with the panel, not trail it */
.strategy.is-open .strategy__chevron svg{
  transition:transform 380ms cubic-bezier(.25,.85,.3,1);
}

/* panel copy: a bold lead line, then one item per line */

.pane[hidden]{display:none;}

.pane__lead{
  margin:0 0 0.6em;
  font-weight:700;
}

.pane__list{
  margin:0;
  padding:0;
  list-style:none;
}
.pane__list li + li{margin-top:0.3em;}

.pane__link{margin:0;}
.pane__link a{
  display:inline-flex;
  align-items:center;
  gap:0.3em;
  color:var(--orange);
  font-weight:700;
  text-decoration:none;
}
.pane__link a svg{
  width:0.95em;
  height:0.95em;
  fill:currentColor;
}
.pane__link a:hover{text-decoration:underline;text-underline-offset:0.14em;}

/* ── lead (logomark + first paragraph) ───────────────────────── */

.lead{
  grid-column:1;
  grid-row:1 / 3;
  align-self:start;
  position:sticky;
  top:0;
  z-index:6;

  /* Sit the block so the seam between the two portraits — at 100vw, since each
     is square — runs through the middle of the four text lines. Everything
     above the text (pad, logomark, its gap) is subtracted, then half the text.
     padding-top resolves against the container's width, so it matches the side
     gutter exactly and gives an even margin once the block pins to the top. */
  margin-top:calc(
    100vw
    - var(--gutter)
    - var(--lead-logo)
    - var(--lead-logo-gap)
    - (var(--lead-lines) / 2 * var(--lh-display) * var(--fs-display))
  );
  padding:var(--gutter) var(--gutter) 0.55rem;

}

.logomark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--lead-logo);
  height:var(--lead-logo);
  margin-bottom:var(--lead-logo-gap);
  padding:0.42em;
  background:var(--orange);
  color:var(--white);
}
.logomark svg{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:661 / 469;
  fill:currentColor;
}

/* white bars behind each rendered line — clone across line breaks.
   The bar is drawn as a sized gradient, not a background-color, so its height
   is a known 1.18em instead of whatever ascent+descent the font reports.
   Anchoring it to the bottom of the line box keeps descenders covered, and the
   gap between bars is then simply line-height minus 1.18em — the same in any
   font. Don't add vertical padding here; it re-introduces the overlap. */
.hl{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background-image:linear-gradient(var(--white),var(--white));
  background-size:100% 1.18em;
  background-position:0 calc(100% - var(--hl-nudge));
  background-repeat:no-repeat;
  padding:0 0.16em;
}

.namelink{
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}
.namelink svg{
  display:inline-block;
  width:0.82em;
  height:0.82em;
  margin-left:0.22em;
  vertical-align:-0.03em;
  fill:currentColor;
}
.namelink:hover{text-decoration:underline;text-underline-offset:0.11em;}

/* ── focus paragraph ─────────────────────────────────────────── */

.focus{
  position:relative;
  z-index:3;   /* under an open panel (4), the rising white (5), and the headline (6) */
  background:var(--white);
  padding:1.75rem var(--gutter) 3.2rem;
}


/* ── work (orange) ───────────────────────────────────────────── */

.work{
  background:var(--orange);
  /* White on #ff5200 is only 3.25:1. Ink is 5.24:1, so the small text that
     carries the actual reading uses it; the brand orange is unchanged. */
  color:var(--ink);
  padding:2.6rem 0 3.4rem;
}

.wrap{padding:0 var(--gutter);}

.table{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:1.6rem;
  margin-bottom:3.4rem;
}

/* the wrappers exist for grouping only — the cells are the grid items,
   so all four rows share one set of column tracks */
.row,.row__line{display:contents;}

.cell--client{grid-column:1;}
.cell--year{grid-column:2;}
.dot{grid-column:3;}
.row__detail{grid-column:1 / -1;}

.cell{
  display:flex;
  align-items:center;
  padding:0.5rem 0 0.45rem;
  border-bottom:var(--rule) solid currentColor;
  font-size:var(--fs-body);
  line-height:1.3;
  min-height:calc(2.75em + 1rem);
}
.row:first-child .cell{border-top:var(--rule) solid currentColor;}

.cell--category,.cell--services{display:none;}
.cell--year{font-variant-numeric:lining-nums;}

.dot{
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.1rem;
  height:2.1rem;
  margin-left:0.3rem;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--mint);
  color:var(--ink);
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:transform 200ms ease;
}
.dot svg{
  width:58%;
  height:58%;
  fill:currentColor;
  transform:rotate(90deg);
  transition:transform 320ms cubic-bezier(.5,0,.9,.55);
}
.dot[aria-expanded="true"] svg{
  transform:rotate(-90deg);
  transition:transform 380ms cubic-bezier(.25,.85,.3,1);
}
.dot:hover{transform:scale(1.09);}

.row__detail{
  display:grid;
  grid-template-rows:0fr;
  max-width:62ch;
  transition:grid-template-rows 320ms cubic-bezier(.5,0,.9,.55);
}
.row__detailinner{
  overflow:hidden;
  min-height:0;
  visibility:hidden;
  transition:visibility 0s linear 320ms;
}
/* spacing lives on the children, not on the collapsing box — a border-box
   can't shrink below its own padding, so padding here would leave a gap when
   the row is closed */
.row__detailinner > :first-child{margin-top:1.9rem;}
.row__detailinner > :last-child{margin-bottom:1.5rem;}

.row.is-open .row__detail{
  grid-template-rows:1fr;
  transition:grid-template-rows 380ms cubic-bezier(.25,.85,.3,1);
}
.row.is-open .row__detailinner{
  visibility:visible;
  transition:visibility 0s;
}

.detail__meta{
  margin:0 0 0.9em;
  font-size:var(--fs-detail);
  font-weight:700;
  line-height:1.4;
}

.detail__copy{
  max-width:58ch;
  font-size:var(--fs-detail);
  line-height:1.5;
}
.detail__copy + .detail__copy{margin-top:1em;}
.detail__copy a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:0.14em;
}
.detail__copy a:hover{text-decoration-thickness:2px;}

/* ── capability columns ──────────────────────────────────────── */

.cols{display:grid;gap:2.9rem;}

.colflag{
  display:block;
  width:4.1rem;
  color:var(--white);
  margin-bottom:1rem;
}
.colflag svg{display:block;width:100%;height:auto;fill:currentColor;}
.colflag--tall svg{aspect-ratio:637 / 499;}
.colflag--wide svg{aspect-ratio:801 / 439;}
.colflag--wide{width:4.6rem;}

.plainlist{
  margin:0;padding:0;list-style:none;
  font-size:var(--fs-body);
  line-height:1.42;
}

.capability{margin-bottom:1.7rem;}
.capability:last-child{margin-bottom:0;}
.capability h3{
  display:inline-block;
  margin:0 0 0.42em;
  padding-bottom:0.2em;
  border-bottom:var(--rule) solid currentColor;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.3;
}
.capability p{
  max-width:46ch;
  font-size:var(--fs-body);
  line-height:1.42;
}

/* ── closing ─────────────────────────────────────────────────── */

.close{
  background:var(--white);
  padding:3rem var(--gutter) 4.4rem;
}

/* The centring calc needs to know how many lines the headline actually runs to.
   These breakpoints are where it reflows; re-check them if the copy changes. */
@media (max-width:334px){
  :root{--lead-lines:6;}
}
@media (min-width:335px) and (max-width:349px){
  :root{--lead-lines:5;}
}
@media (min-width:684px){
  :root{--lead-lines:3;}
}

/* ═══ TABLET ≥768 ════════════════════════════════════════════ */

@media (min-width:768px){
  :root{
    --gutter:6.5%;
    --fs-display:clamp(1.5rem, 3.05vw, 2.15rem);
    --fs-bar:clamp(0.9375rem, 1.75vw, 1.15rem);
    --fs-heading:clamp(1.0625rem, 1.85vw, 1.3rem);
    --fs-body:clamp(0.9375rem, 1.6vw, 1.125rem);
    --fs-detail:clamp(0.875rem, 1.45vw, 1.0625rem);
    --lh-display:1.34;
    --lead-alpha:1;
  }

  /* two portraits side by side; lead sits underneath, full width */
  .hero{grid-template-columns:1fr 1fr;}
  .hero__figure{aspect-ratio:9/8;}
  .hero__figure--a{grid-row:1;grid-column:1;}
  .hero__figure--b{grid-row:1;grid-column:2;}

  .strategy{left:8.4%;right:8.4%;}

  /* 72% down the tile, then shifted a further one bar-height. The panel is
     absolutely positioned, so .strategy is exactly as tall as its bar and
     translateY(100%) is precisely one bar height at any type size. */
  .strategy--mint,.strategy--orange{
    top:72%;
    bottom:auto;
    transform:translateY(100%);
  }

  .lead{
    grid-row:2;
    grid-column:1 / -1;
    position:static;
    /* Grid items honour z-index even when static. The lead has to sit above
       the photos so the logomark can straddle the edge, but below an open
       panel (4). Clearing it entirely drops it under the photos. */
    z-index:1;
    margin-top:0;
    padding:0 var(--gutter);
    background:var(--white);
  }

  /* bars are decorative on mobile only — no padding shift on wide screens */
  .hl{background-image:none;padding:0;}

  .display{max-width:28em;}

  .logomark{
    --lead-logo:clamp(2.75rem, 3.7vw, 3.5rem);
    margin-top:-1.55rem;
    margin-bottom:1.5rem;
  }

  .focus{padding:1.9rem var(--gutter) 3.6rem;}

  .work{padding:3rem 0 4rem;}

  .table{
    grid-template-columns:auto auto minmax(0,1fr) auto auto;
    column-gap:1.5rem;
  }
  .detail__meta{display:none;}   /* the row shows these columns instead */
  .detail__meta + .detail__copy{margin-top:1.9rem;}
  .cell--category{grid-column:2;}
  .cell--services{grid-column:3;}
  .cell--year{grid-column:4;}
  .dot{grid-column:5;}
  .cell--category,.cell--services{display:flex;}
  .cell--year{min-width:4.2rem;}

  .dot{width:1.95rem;height:1.95rem;margin-left:0.55rem;}

  .cols{grid-template-columns:1fr 1fr;gap:0 3.4rem;}

  .close{padding:3.6rem var(--gutter) 5rem;}
}

/* ═══ DESKTOP ≥1024 ══════════════════════════════════════════ */

@media (min-width:1024px){
  :root{
    --gutter:5.1%;
    --fs-display:clamp(1.85rem, 2.5vw, 2.85rem);
    --fs-bar:clamp(1rem, 1.22vw, 1.2rem);
    --fs-heading:clamp(1.05rem, 1.32vw, 1.35rem);
    --fs-body:clamp(0.95rem, 1.18vw, 1.15rem);
    --fs-detail:clamp(0.875rem, 1.05vw, 1.05rem);
    --lh-display:1.36;
  }

  .work{padding:3.4rem 0 4.6rem;}
  .table{margin-bottom:4.6rem;}
  .table{column-gap:2rem;}
  .cell{min-height:2.9em;}
  .cell--client,.cell--category,.cell--year{white-space:nowrap;}
  .cols{gap:0 4.4rem;}
  .focus{padding:2.1rem var(--gutter) 4.2rem;}
  .close{padding:4.2rem var(--gutter) 6rem;}
  .logomark{margin-top:-1.75rem;}
}

@media (min-width:1200px){
  .table{max-width:94%;}
}

/* very wide — keep measure sane */
@media (min-width:1800px){
  :root{--gutter:8%;}
}

/* ── reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    transition-duration:0.001ms !important;
  }
}