/* ====================================================================
   Unison Talent Management, proposed direction.

   The concept is the board on a works office wall: information lives in
   cross references where position carries meaning, and in places, because
   in a factory where you are standing is itself information.

   Every colour comes from src/styles/tokens.css, which is generated from
   the Figma file. Nothing here is invented.
   ==================================================================== */

:root {
  --u-color-neutral-0:#FFFFFF; --u-color-neutral-50:#F6F6F6;
  --u-color-neutral-200:#D9D9D9; --u-color-neutral-400:#B2B2B2;
  --u-color-neutral-600:#686565; --u-color-neutral-700:#3D3D3D;
  --u-color-neutral-900:#000000;
  --u-color-brand-50:#E5EDFE; --u-color-brand-300:#4186FF;
  --u-color-brand-500:#004BF5; --u-color-brand-800:#001A4A;
  --u-radius-xs:2px; --u-radius-sm:4px; --u-radius-pill:999px;

  --ground:var(--u-color-neutral-50);
  --raise:var(--u-color-neutral-0);
  --ink:var(--u-color-neutral-900);
  --soft:var(--u-color-neutral-700);
  --rule:var(--u-color-neutral-200);
  --hair:#E4E4E4;
  --blue:var(--u-color-brand-500);
  --blue-lift:var(--u-color-brand-300);
  --deep:var(--u-color-brand-800);
  --on-dark:var(--u-color-neutral-0);

  --display:'Epilogue','Epilogue Fallback',system-ui,sans-serif;
  --struct:'Inter','Inter Fallback',system-ui,sans-serif;

  /* nine sizes, no more */
  --t-micro:13px;
  --t-s:15px;
  --t-b:17px;
  --t-m:20px;
  --t-26:26px;
  --t-34:clamp(26px,3.1vw,34px);
  --t-44:clamp(31px,4.3vw,44px);
  --t-l:clamp(34px,5.4vw,60px);
  --t-xl:clamp(38px,7.2vw,84px);

  --gut:clamp(20px,4vw,40px);
  --page:1320px;
  --mar:1320px;
}

*,*::before,*::after{box-sizing:border-box}
/* The header is sticky, so a jump to an anchor has to stop short of it or
   the reader arrives looking at the header with the heading behind it.
   This covers every route into an anchor at once: a link, a back button,
   a reload on a hash, and scrollIntoView. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:clamp(78px,9vh,104px)}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--struct);font-size:var(--t-b);line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:600;letter-spacing:-.035em;
  line-height:1.03;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0}
a{color:inherit}
::selection{background:var(--blue);color:#fff}

/* one focus treatment, on every interactive surface */
:where(a,button,[role="tab"],input,select,textarea,summary):focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

/* figures are read against each other, so they need to line up */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}

/* ====================================================================
   Header. Sticky, because the client asked for it and it has been built
   to hold its height exactly so the page does not twitch when it sticks.
   ==================================================================== */
.hdr{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding-block:16px;
  padding-inline:max(var(--gut),calc((100% - var(--page))/2 + var(--gut)));
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--hair);
}
/* The mark is Figma's own lockup, not the wordmark set as live text. The
   height is pinned so the sticky header keeps the height it was built to. */
.mark{display:flex;flex:0 0 auto;text-decoration:none}
.mark img{display:block;width:auto;height:34px}

/* a label and its icon on one baseline. Used where a line has no key to
   tell you what it is: the footer's contact column, the header's bare
   number. The contact page keeps words, because there the key is already
   the channel's name and an icon would only repeat it. */
.ic{display:flex;align-items:center;gap:9px;min-width:0;overflow-wrap:anywhere}
.ic img{flex:0 0 auto;width:auto;height:15px}
.ic .need{font-style:italic}
.tel img{height:14px;margin-right:7px;vertical-align:-2px}
.hdr nav{display:flex;align-items:center;gap:clamp(12px,2vw,30px);margin-left:auto}
.hdr nav > a,.hdr .has > button{
  font:inherit;font-size:var(--t-s);font-weight:500;text-decoration:none;
  color:var(--ink);background:none;border:0;padding:6px 0;cursor:pointer;
  position:relative}
.hdr nav > a::after,.hdr .has > button::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.hdr nav > a:hover::after,.hdr .has > button:hover::after,
.hdr nav > a[aria-current]::after,.hdr .has > button[data-here]::after{transform:scaleX(1)}
.tel{font-size:var(--t-s);color:var(--soft);font-weight:500}
.cta{
  text-decoration:none;font-size:var(--t-s);font-weight:600;
  background:var(--ink);color:var(--on-dark);padding:10px 20px;
  border-radius:var(--u-radius-sm);flex:0 0 auto}
.cta:hover{background:var(--blue)}

/* the services submenu */
.has{position:relative}
.sub{
  position:absolute;top:calc(100% + 10px);right:-12px;width:min(380px,calc(100vw - 32px));
  background:var(--raise);border:1px solid var(--rule);padding:8px;
  display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.4)}
.has[data-open] .sub,.has:hover .sub,.has:focus-within .sub{
  opacity:1;visibility:visible;transform:none}
.has[data-dismissed] .sub{opacity:0;visibility:hidden}
.sub a{display:grid;gap:1px;padding:11px 13px;text-decoration:none;
  font-size:var(--t-s);font-weight:500;line-height:1.3}
.sub a i{font-style:normal;font-weight:400;font-size:var(--t-micro);color:var(--soft)}
.sub a:hover{background:var(--ground)}
.sub a:hover i{color:var(--blue)}
.sub .all{border-top:1px solid var(--hair);margin-top:6px;font-weight:600;color:var(--blue)}

@media(max-width:1000px){
  .tel{display:none}
  .hdr nav{gap:14px}
  .hdr nav > a,.hdr .has > button{font-size:var(--t-micro)}
}
@media(max-width:720px){
  .hdr{flex-wrap:wrap;gap:10px 16px;padding-block:12px}
  .hdr nav{order:3;width:100%;margin-left:0;overflow-x:auto;gap:18px;
    padding-bottom:2px;scrollbar-width:none}
  .hdr nav::-webkit-scrollbar{display:none}
  .cta{margin-left:auto}
  .sub{position:static;width:auto;border:0;padding:0;box-shadow:none;background:none;
    opacity:1;visibility:visible;transform:none;display:none}
  .has[data-open] .sub{display:grid;position:absolute;background:var(--raise);
    border:1px solid var(--rule);padding:8px;left:0;right:auto;width:min(340px,86vw);
    box-shadow:0 18px 50px -24px rgba(0,0,0,.4);z-index:70}
  .has:hover .sub:not([data-x]){display:none}
  .has[data-open] .sub{display:grid}
}

/* ====================================================================
   Breadcrumb, buttons, footer
   ==================================================================== */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-top:22px;font-size:var(--t-micro);color:var(--soft)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--blue);text-decoration:underline}
.crumb .sep{color:var(--u-color-neutral-400)}
.crumb [aria-current]{color:var(--ink);font-weight:500}

.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:var(--t-s);font-weight:600;line-height:1;
  padding:14px 24px;border-radius:var(--u-radius-sm);
  background:var(--ink);color:var(--on-dark);border:1px solid var(--ink);cursor:pointer}
.btn:hover{background:var(--blue);border-color:var(--blue)}
.btn--light{background:var(--raise);color:var(--ink);border-color:var(--raise)}
.btn--light:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--ghost{background:none;color:var(--ink);border-color:var(--u-color-neutral-400)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.btn--onDark{color:#fff;border-color:rgba(255,255,255,.65)}
.btn--onDark:hover{background:#fff;border-color:#fff;color:var(--ink)}

.ft{padding-block:clamp(48px,6vw,76px) 26px;border-top:1px solid var(--rule);margin-top:0}
.ft .cols{display:grid;gap:clamp(26px,3.2vw,44px);
  grid-template-columns:1.35fr 1.05fr .8fr 1.25fr}
.ft h5{font-family:var(--struct);font-size:var(--t-micro);font-weight:600;
  letter-spacing:0;margin-bottom:14px;line-height:1.4}
.ft a,.ft .plain{display:block;font-size:var(--t-s);color:var(--soft);
  text-decoration:none;padding-block:4px}
.ft .ic{display:flex}
.ft a:hover{color:var(--blue)}
.ft .blurb{font-size:var(--t-s);color:var(--soft);max-width:34ch}
.ft .end{display:flex;flex-wrap:wrap;gap:6px 30px;margin-top:clamp(34px,5vw,56px);
  padding-top:16px;border-top:1px solid var(--hair);
  font-size:var(--t-micro);color:var(--u-color-neutral-600)}
@media(max-width:860px){.ft .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft .cols{grid-template-columns:1fr}}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  background:var(--ink);color:var(--on-dark);font-size:var(--t-micro);
  padding:11px 18px;border-radius:var(--u-radius-sm);z-index:90;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast[data-show]{opacity:1;transform:translate(-50%,0)}

/* ====================================================================
   Section rhythm. White paper means reference material, the grey ground
   means prose. That is the whole shading system, and it tells the reader
   which kind of thing they are looking at before they read a word.
   ==================================================================== */
.sec{padding-block:clamp(40px,5vw,72px)}
.band{position:relative}
.band::before{content:'';position:absolute;top:0;left:var(--gut);right:var(--gut);
  border-top:1px solid var(--rule)}
.paper{background:var(--raise)}

/* label and note beside a section, folding above it on a narrow screen.
   Sentence case: the capitalised label was the commonest tell in the
   previous pass and appeared ninety seven times. */
.mg{display:grid;gap:clamp(22px,3vw,56px);grid-template-columns:200px minmax(0,1fr)}
.lbl{font-size:var(--t-micro);font-weight:600;color:var(--ink);margin:0 0 10px}
.marg{font-size:var(--t-s);color:var(--soft);line-height:1.55;max-width:30ch}
.marg b{display:block;font-weight:600;color:var(--ink);margin-bottom:3px}
.marg__a{display:inline-block;margin-top:10px;color:var(--blue);font-weight:500}
.need{font-size:var(--t-micro);color:var(--u-color-neutral-600);font-style:italic}
@media(min-width:1100px){
  .mg > div:first-child{position:sticky;top:104px;align-self:start}
}
@media(max-width:1099px){
  .mg{grid-template-columns:minmax(0,1fr);gap:18px}
  .mg > div:first-child,.mg > p.lbl{padding-bottom:14px;border-bottom:1px solid var(--hair)}
  .marg{max-width:62ch}
}

/* prose */
.body{font-size:var(--t-b);color:var(--soft);line-height:1.62;max-width:68ch;
  display:grid;gap:1.1em}
.body b,.body strong{color:var(--ink);font-weight:600}
.ser{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.08;
  color:var(--ink)}
.say{font-family:var(--display);font-weight:600;letter-spacing:-.035em}
.q{font-size:var(--t-s);color:var(--soft)}

/* ====================================================================
   The reference page opener: a register.

   A board on a works office wall has no title card. The heading and the
   first marks share one surface, so these pages open with their own first
   facts already on screen rather than a heading over an empty half.

   The rule is the signal. Two pixels of black above the register and
   nothing above the heading says one of them is a record and the other is
   a statement. The register is never decoration: on Contact it is the
   phone number and the hours, which is what the reader came for.
   ==================================================================== */
.mast{padding-block:0 clamp(40px,5.5vw,76px)}
.mast__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,64px);align-items:start;
  padding-top:clamp(30px,4vw,52px)}
.mast h1{font-size:var(--t-l);max-width:18ch}
.mast__sub{margin-top:clamp(12px,1.6vw,18px);font-family:var(--display);font-weight:600;
  letter-spacing:-.03em;font-size:var(--t-m);color:var(--soft);line-height:1.25;max-width:34ch;
  text-wrap:balance}
.mast__lead{margin-top:clamp(14px,1.8vw,22px);font-size:var(--t-m);color:var(--soft);
  line-height:1.5;max-width:44ch}
.mast__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mast__reg{background:var(--raise);border-top:2px solid var(--ink);
  padding:0 clamp(14px,1.8vw,22px) clamp(12px,1.4vw,18px)}
.mast__reg .dl > div:first-child{border-top:0;padding-top:16px}
.mast__reg .dl > div:last-child{border-bottom:0}
.mast__reg .dl > div{grid-template-columns:150px minmax(0,1fr)}
.mast__reg--w .dl > div{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px}
.mast__reg--w .dl dt{font-size:var(--t-s);line-height:1.3}
.mast__reg--s .dl > div{grid-template-columns:minmax(0,1fr)}
.mast__reg--s .dl dt{font-size:var(--t-s);font-weight:500;line-height:1.35}
.mast__reg .dl > div{padding-block:14px}
.mast__reg .dl dd a{color:var(--blue);font-weight:500}
.mast__reg .dl dt a{text-decoration:none}
.mast__reg .dl dt a:hover{color:var(--blue);text-decoration:underline}
.mast__reg .dl .st{font-family:var(--display);font-size:var(--t-s);font-weight:600;
  color:var(--blue);margin:0}
.mast__note{margin:14px 0 0;font-size:var(--t-micro);color:var(--soft);
  padding-top:12px;border-top:1px solid var(--hair);max-width:48ch}
@media(max-width:900px){
  .mast__in{grid-template-columns:minmax(0,1fr);gap:30px}
  .mast__lead{max-width:60ch}
}

/* kept for the pages that end on a single action */
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ====================================================================
   About: the record.

   About is the only page whose content is facts about the firm rather
   than an argument, so it is the only page built as a record. Keys hold
   one alignment and values another, and the sheet opens the page.

   Two earlier passes changed this page's opener and left the anatomy
   alone, which is why it kept reading as a second home page. A home page
   argues: claim, bands of support, a button. A record states, and ends
   with a person to ask for.

   The office stands beside the record rather than under it. A sheet of
   eight facts stretched across the full page leaves the right half empty,
   which is the fault the plain text opener was rejected for. Here the
   width is spent on the one thing that is information in its own right.
   ==================================================================== */

/* the gap sits under its value, not trailing off the end of it: a note
   in the margin of a record, which is what it is */

/* the place, standing beside the record */

/* A record page's sections are a heading and a paragraph, nothing else.
   No label column and no margin note: those are what made this page the
   same shape as every other one. The two notes sit side by side, because
   one short column of text on a wide page is the fault above again. */
/* the same grid as the sheet above, so the two records share an edge */

@media(max-width:900px){
  .rsheet__in,.rnotes,.rclose__in{grid-template-columns:minmax(0,1fr)}
  .rnotes{gap:clamp(30px,5vw,44px)}
}
@media(max-width:620px){
  .rec > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .rec dd{font-size:var(--t-s)}
  .rside figcaption .made{margin-left:0;flex-basis:100%}
}

/* ====================================================================
   THE BOARD. The one dominant element on the home page, and the one
   place the boldness is spent. Six things a buyer says, against what
   each usually means and what happens first, cross referenced to the
   five disciplines. A row with five marks is a business whose problems
   are feeding each other, which is information no list can carry.
   ==================================================================== */
.bd{padding-block:clamp(48px,6vw,88px) 0;border-top:1px solid var(--rule)}
.bd__top{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut);
  display:grid;gap:clamp(18px,3vw,48px);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:end;margin-bottom:clamp(30px,4vw,54px)}
.bd__top h2{font-size:var(--t-44);max-width:20ch}
.bd__top p{font-size:var(--t-b);color:var(--soft);max-width:52ch}
@media(max-width:900px){.bd__top{grid-template-columns:minmax(0,1fr);align-items:start}}

.bd__grid{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.bd__head{display:grid;grid-template-columns:var(--bdc);gap:0 clamp(16px,2.4vw,40px);
  padding-bottom:10px;border-bottom:1px solid var(--ink);
  font-size:var(--t-micro);font-weight:600;color:var(--ink)}
.bd__head span:last-child{text-align:right}
:root{--bdc:minmax(0,1.2fr) minmax(0,1.35fr) 190px}

.bd__row{display:grid;grid-template-columns:var(--bdc);gap:0 clamp(16px,2.4vw,40px);
  align-items:start;text-decoration:none;color:inherit;
  padding-block:clamp(22px,2.6vw,32px);
  border-bottom:1px solid var(--rule);transition:background .16s ease}
.bd__row:last-of-type{border-bottom:1px solid var(--ink)}
.bd__say{font-family:var(--display);font-weight:600;letter-spacing:-.035em;
  font-size:var(--t-m);line-height:1.18;margin:0;max-width:26ch}
.bd__mean{font-size:var(--t-s);color:var(--soft);line-height:1.56;max-width:48ch}
.bd__k{display:none}
.bd__cells{display:grid;gap:9px;justify-items:end}
.bd__marks{display:flex;gap:4px}
.bd__cell{width:13px;height:13px;border:1px solid var(--u-color-neutral-400);
  background:none;transition:background .16s ease,border-color .16s ease}
.bd__cell[data-on]{background:var(--blue);border-color:var(--blue)}
.bd__own{font-size:var(--t-micro);font-weight:600;text-align:right;line-height:1.35}
.bd__row:hover{background:var(--raise)}
.bd__row:hover .bd__own{color:var(--blue)}
.bd__row:hover .bd__cell[data-on]{background:var(--ink);border-color:var(--ink)}
.bd__foot{max-width:var(--page);margin-inline:auto;padding:clamp(22px,3vw,34px) var(--gut)
  clamp(48px,6vw,88px);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.bd__foot p{font-size:var(--t-s);color:var(--soft);max-width:48ch}

@media(max-width:1000px){
  :root{--bdc:minmax(0,1fr)}
  .bd__head{display:none}
  .bd__row{gap:16px;padding-block:26px}
  .bd__k{display:block;font-size:var(--t-micro);font-weight:600;color:var(--ink);
    margin-bottom:3px}
  .bd__cells{justify-items:start;grid-auto-flow:column;align-items:center;
    justify-content:start;gap:12px}
  .bd__own{text-align:left}
}

/* ====================================================================
   The five places. The disciplines are five places in one building, so
   they are a column of photographs rather than five equal cards.
   ==================================================================== */
/* heading left, lead right, the way the board above it already reads. A
   44px heading and a 58ch paragraph stacked in one column left the right
   half of the band empty. */
.pls__top{padding-block:clamp(40px,5vw,72px) clamp(24px,3vw,40px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,56px);align-items:end}
.pls__top h2{font-size:var(--t-44);max-width:16ch}
.pls__top p{font-size:var(--t-b);color:var(--soft);max-width:62ch;line-height:1.6}
@media(max-width:860px){
  .pls__top{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
}
.pls__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.pls__cell{display:grid;gap:0;align-content:start;text-decoration:none;color:inherit;
  padding:clamp(16px,2vw,22px) clamp(16px,2vw,26px) clamp(20px,2.4vw,28px)}
.pls__cell:nth-child(odd){border-right:1px solid var(--hair)}
.pls__cell:nth-child(n+3){border-top:1px solid var(--hair)}
.pls__img{position:relative;overflow:hidden;background:var(--deep);margin-bottom:18px}
.pls__img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.pls__where{position:absolute;left:0;bottom:0;z-index:2;background:var(--ink);color:#fff;
  font-size:var(--t-micro);font-weight:500;padding:7px 13px}
.pls__verb{font-size:var(--t-micro);font-weight:600;color:var(--blue);margin-bottom:9px}
.pls__cell h3{font-size:var(--t-26);max-width:22ch;line-height:1.12}
.pls__cell:hover h3{color:var(--blue)}
.pls__get{margin-top:12px;font-size:var(--t-s);color:var(--soft);line-height:1.56;
  max-width:52ch}
.pls__go{margin-top:16px;font-size:var(--t-s);font-weight:600;color:var(--blue)}
.pls__cell:hover .pls__go{text-decoration:underline}
@media(max-width:760px){
  .pls__grid{grid-template-columns:minmax(0,1fr)}
  .pls__cell:nth-child(odd){border-right:0}
  .pls__cell + .pls__cell{border-top:1px solid var(--hair)}
}

/* ====================================================================
   The five stages. The only sequence on the site, so the only thing
   numbered. A quiet white strip: it is reference, not an argument.
   ==================================================================== */
.run{background:var(--raise);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.run__top{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;
  padding-block:clamp(34px,4vw,56px) clamp(20px,2.4vw,30px)}
.run__top h2{font-size:var(--t-34);max-width:24ch}
.run__top a{font-size:var(--t-s);font-weight:600;color:var(--blue);text-decoration:none}
.run__top a:hover{text-decoration:underline}
.run__list{--col:clamp(12px,1.6vw,22px);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  padding:0 0 clamp(34px,4.5vw,62px);list-style:none;margin:0}
.run__list li{padding:18px var(--col) 0 0;border-top:2px solid var(--ink)}
.run__list li + li{border-left:1px solid var(--hair);padding-left:var(--col)}
.run__list li:last-child{padding-right:0}
.run__list .st{font-family:var(--display);font-size:var(--t-s);font-weight:600;
  color:var(--blue);margin:0 0 10px;letter-spacing:0}
.run__list h3{font-size:var(--t-m);margin-bottom:8px}
.run__list p:last-child{font-size:var(--t-s);color:var(--soft);line-height:1.5}
@media(max-width:900px){
  .run__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
  .run__list li + li{border-left:0}
}
@media(max-width:520px){.run__list{grid-template-columns:minmax(0,1fr)}}

/* ====================================================================
   The firm, and the close. The close is the one full bleed blue field.
   ==================================================================== */
.firm__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(26px,4vw,64px);align-items:center;padding-block:clamp(44px,6vw,86px)}
.firm h2{font-size:var(--t-44);max-width:20ch}
.firm .body{margin-top:20px}
.firm__act{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.firm figure{margin:0}
.firm figure img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.firm figcaption{margin-top:10px;font-size:var(--t-micro);color:var(--soft)}
@media(max-width:860px){.firm__in{grid-template-columns:minmax(0,1fr)}}

/* The same band as the one that closes every other page: the brand navy
   with the contour field behind it, and the label in its own gutter. It
   was a flat sheet of brand blue, which is the one place on the site that
   colour appeared at that size. This one also carries a photograph, so
   its content column sits between the label and the picture. */
.close__in{padding-block:clamp(44px,6.4vw,88px);display:grid;
  grid-template-columns:200px minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3.4vw,56px);align-items:center}
.close h2{color:#fff;font-size:var(--t-44);max-width:18ch}
.close__lead{margin-top:18px;font-size:var(--t-m);color:#C9D2E0;max-width:42ch;line-height:1.5}
.close__shot{margin:0;align-self:stretch;display:flex}
.close__shot img{width:100%;flex:1 1 auto;min-height:clamp(230px,24vw,340px);
  object-fit:cover;display:block}
.close__act{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:1100px){
  .close__in{grid-template-columns:200px minmax(0,1fr)}
  /* once it drops below the text it runs the full width, so it needs a
     height of its own rather than stretching to the row */
  .close__shot{grid-column:1 / -1;align-self:auto;margin-top:8px}
  .close__shot img{min-height:0;height:clamp(210px,28vw,300px)}
}
@media(max-width:860px){
  .close__in{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px}
}

/* the footnotes the figures point at */
.notes{padding-block:30px 40px;font-size:var(--t-micro);color:var(--u-color-neutral-600)}
.notes h2{font-family:var(--struct);font-size:var(--t-micro);font-weight:600;
  letter-spacing:0;margin-bottom:12px;color:var(--ink)}
.notes ol{margin:0;padding-left:20px;display:grid;gap:7px;max-width:76ch}
.note{display:block}
.n{text-decoration:none;color:var(--blue);font-size:11px;vertical-align:super;
  margin-left:2px;font-weight:600}

/* ====================================================================
   Smaller pieces: key and value pairs, the sector grid, the question
   list, the form, the band that closes an inner page.
   ==================================================================== */
.dl{margin:0;display:grid;gap:0}
.dl > div{display:grid;grid-template-columns:148px minmax(0,1fr);gap:16px;
  padding-block:13px;border-top:1px solid var(--hair)}
.dl > div:first-child{border-top:1px solid var(--ink)}
.dl > div:last-child{border-bottom:1px solid var(--ink)}
.dl dt{font-size:var(--t-micro);font-weight:600;color:var(--ink)}
.dl dd{margin:0;font-size:var(--t-s);color:var(--soft)}
@media(max-width:620px){.dl > div{grid-template-columns:minmax(0,1fr);gap:3px}}

.k{font-size:var(--t-micro);font-weight:600;color:var(--ink);display:block}
.v{font-size:var(--t-s);color:var(--soft);display:block}
.plain{color:var(--soft)}

.cx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:860px){.cx{grid-template-columns:minmax(0,1fr)}}

.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid5 > *:last-child,.sect > *:last-child{padding-right:0}
.grid5 b,.sect b{font-family:var(--display);font-size:var(--t-m);font-weight:600;
  letter-spacing:-.03em;line-height:1.14}
.grid5 span,.sect span{font-size:var(--t-micro);color:var(--soft);line-height:1.5}
.grid5 a:hover b,.sect a:hover b{color:var(--blue)}
.grid5 div:not(:has(a)) b,.sect div:not(:has(a)) b{color:var(--u-color-neutral-400)}
@media(max-width:900px){
  .grid5,.sect{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .grid5 > * + *,.sect > * + *{border-left:0}
}
@media(max-width:520px){.grid5,.sect{grid-template-columns:minmax(0,1fr)}}

.qa{display:grid;gap:0}
.qa > div{padding-block:clamp(18px,2.2vw,26px);border-top:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(12px,2.4vw,40px)}
.qa > div:first-child{border-top:1px solid var(--ink)}
.qa > div:last-child{border-bottom:1px solid var(--ink)}
.qa h3{font-size:var(--t-m);line-height:1.18;max-width:28ch}
.qa p{font-size:var(--t-s);color:var(--soft);line-height:1.56;max-width:56ch}
@media(max-width:760px){.qa > div{grid-template-columns:minmax(0,1fr);gap:8px}}

.tl ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tl li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 20px;
  padding-block:clamp(16px,2vw,24px);border-top:1px solid var(--hair)}
.tl li:first-child{border-top:1px solid var(--ink)}
.tl li:last-child{border-bottom:1px solid var(--ink)}
.tl .st{font-family:var(--display);font-size:var(--t-m);font-weight:600;color:var(--blue);margin:0}
.tl h4{font-size:var(--t-m);margin-bottom:6px}
.tl p:last-child{font-size:var(--t-s);color:var(--soft);max-width:60ch}

.form{display:grid;gap:18px;max-width:560px}
.fld{display:grid;gap:7px}
.fld > label,.fld > span:first-child{font-size:var(--t-micro);font-weight:600;
  color:var(--ink);display:block}
.fld > label span{font-weight:400;color:var(--soft)}
.fld > label span::before{content:'('}
.fld > label span::after{content:')'}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:var(--t-s);padding:13px 14px;background:var(--raise);
  border:1px solid var(--u-color-neutral-400);color:var(--ink);width:100%;border-radius:0}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue)}
.fld textarea{min-height:120px;resize:vertical}
.form__note{font-size:var(--t-micro);color:var(--soft)}

/* The closing panel on a discipline page was a flat black rectangle. The
   contour field is the only decorative asset in the Figma file, so it
   belongs here rather than being invented. It is set low and wide so the
   lines read as a ground, never as an illustration of anything. */
.cta-band{background:var(--deep);color:#fff;position:relative;isolation:isolate}
.cta-band::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(icons/contour.svg) right bottom/auto 165% no-repeat;opacity:.5}
@media(max-width:860px){.cta-band::before{background-size:auto 120%;opacity:.34}}
.cta-band .mg > div:first-child .lbl,.cta-band .lbl{color:#A9BBD8}
.cta-band h2,.cta-band .ser{color:#fff}
.cta-band .body{color:#C9D2E0}
.cta-band .body b{color:#fff}
.cta-band .marg{color:#A9BBD8}
.cta-band .marg b{color:#fff}

/* ====================================================================
   Motion. One orchestrated moment, the opening crossfade, and one
   response to a person's action. Nothing else moves, and someone who
   has asked for less motion gets none of it.
   ==================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ====================================================================
   Pieces the client's own content asked for: the four values, the lists
   of what is still missing, the insight slots, and the wider form.
   ==================================================================== */

/* a closing note under a section, set apart from the rows above it */
.pls__note,.run__lead{margin-top:clamp(20px,2.4vw,30px);font-size:var(--t-s);
  color:var(--soft);line-height:1.6;max-width:92ch}
.run__lead{margin-bottom:clamp(20px,2.4vw,30px)}

/* the five values, as a row of plain marks */
/* a grid rather than a wrapping row: wrapped, the second line began with
   a rule that had nothing to its left */
.vals{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.vals li{font-size:var(--t-micro);font-weight:600;padding:9px clamp(8px,1vw,14px) 9px 0;
  line-height:1.3;border-top:2px solid var(--ink)}
.vals li + li{padding-left:clamp(8px,1vw,14px);border-left:1px solid var(--hair)}
@media(max-width:760px){
  .vals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vals li + li{border-left:0;padding-left:0}
}

/* what a section is waiting for. A numbered list is right here: these are
   slots to be filled, and the count is the point. */
.pend{list-style:none;margin:0;padding:0;counter-reset:p;border-top:2px solid var(--ink)}
.pend li{counter-increment:p;display:grid;grid-template-columns:28px minmax(0,1fr);
  gap:12px;padding-block:13px;border-bottom:1px solid var(--hair);
  font-size:var(--t-s);color:var(--soft)}
.pend li::before{content:counter(p);font-family:var(--display);font-weight:600;
  color:var(--u-color-neutral-400)}

/* the insight slots, on the home page and on the insights page */
.think,.ins{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.think__row,.ins li{display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:clamp(12px,2vw,24px);padding-block:13px;border-bottom:1px solid var(--hair);
  align-items:baseline}
.think__t,.ins__t{font-size:var(--t-micro);font-weight:600;color:var(--ink)}
.ins__feat{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
  padding-block:clamp(16px,2vw,24px);display:grid;gap:8px}
@media(max-width:620px){
  .think__row,.ins li{grid-template-columns:minmax(0,1fr);gap:3px}
  .vals li + li{padding-left:0;border-left:0}
}

/* the four numbers the client marked as placeholders, named once */
.pf{display:block;margin-top:6px}
.pf li{display:inline;font-style:normal}
.pf li + li::before{content:' \00b7 '}

/* the form gained a role and a set of interests */
.fld--set{border:0;margin:0;padding:0;display:grid;gap:9px}
.fld--set legend{font-size:var(--t-s);font-weight:600;color:var(--ink);padding:0;
  margin-bottom:5px}
.fld--set legend span{font-weight:400;color:var(--soft)}
.chk{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-s);color:var(--soft);
  line-height:1.45;cursor:pointer}
.chk input{margin:3px 0 0;accent-color:var(--blue);width:16px;height:16px;flex:0 0 auto}

/* three related cards rather than four */
.rel--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.rel--3{grid-template-columns:minmax(0,1fr)}
  .rel--3 a + a{border-left:0;padding-left:0}}

/* the stage sheet with no gate column: the client's approach copy makes no
   promise about what has to be true before the next stage, so that column
   was removed rather than invented */

.ft__mark{display:block;width:auto;height:32px;margin-bottom:14px}

/* ====================================================================
   The hero.

   The client's layout, set in the photographs. Their hero is two columns
   ending on a shared baseline: headline, lead and two calls on the left,
   the ambition in a bordered aside on the right. Their page has no
   picture behind it. This one does, because the photographs are the only
   thing on the site that shows the places the work happens in, and a
   band of them below the fold is not a hero.

   One thing in their hero is deliberately not reproduced: they set the
   second half of the headline in italic and in the accent colour. An
   accented phrase inside a headline is the commonest tell of a generated
   page, so the headline stays in one voice.
   ==================================================================== */
.hero{position:relative;background:var(--deep);overflow:clip;isolation:isolate;
  display:grid;align-items:end;min-height:clamp(560px,86vh,860px)}
.hero__stack{position:absolute;inset:0;z-index:0}
.hero__f{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero__f[data-on],.hero__f:first-child{opacity:1}
.hero__f img{width:100%;height:100%;object-fit:cover;display:block}
.hero__wash{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(0,26,74,.74) 0%,rgba(0,26,74,.6) 36%,
      rgba(0,26,74,.26) 68%,rgba(0,26,74,.1) 92%),
    linear-gradient(180deg,rgba(0,26,74,.26) 0%,rgba(0,26,74,0) 26%,
      rgba(0,26,74,0) 42%,rgba(0,26,74,.64) 100%),
    rgba(0,26,74,.32)}
/* The contour field travelling across the foot of the hero.

   It has to loop with no seam, and the drawing's left and right edges do
   not match, so every second copy is mirrored: a copy's right edge then
   meets its own right edge, and the next join meets its own left edge.
   The track holds twelve copies and travels exactly half its length, by
   which point copies 7 to 12 stand where 1 to 6 were and the frame is
   identical. The band is masked away at the top so it does not end on a
   hard line, and it runs linear, because anything eased reads as a loop
   restarting. */
.hero__waves{position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:hidden;
  pointer-events:none;height:clamp(150px,21vw,260px);opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 46%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 46%)}
/* Two layers, not one. Mirroring makes the join continuous but it meets a
   line with its own reflection, which leaves a visible chevron. Two tracks
   at different widths and speeds never put their joins in the same place,
   so each one's chevron falls across the other's unbroken lines. */
.hero__wtrack{position:absolute;inset:0;display:flex;width:max-content;height:100%;
  will-change:transform}
.hero__wtrack--a{animation:wave-run 46s linear infinite}
.hero__wtrack--b{animation:wave-run 67s linear infinite;opacity:.72;
  transform-origin:center;scale:1 -1;translate:0 14%}
/* the whole drawing, stretched the length of the band rather than cropped
   out of it. Cropped, the field's density changes across the band and it
   reads as a mesh in one place and nothing in another; stretched, the
   sweeps run long, which is what a wave does. */
.hero__wtrack img{height:100%;width:clamp(560px,56vw,900px);display:block;flex:0 0 auto}
.hero__wtrack--b img{width:clamp(430px,41vw,680px)}
.hero__wtrack img:nth-child(2n){transform:scaleX(-1)}
@keyframes wave-run{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(prefers-reduced-motion:reduce){.hero__wtrack{animation:none}}

.hero__in{position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4.4vw,64px);align-items:end;color:#fff;
  padding-block:clamp(90px,13vw,170px) clamp(74px,8vw,104px)}
.hero h1{font-size:var(--t-l);max-width:21ch;color:#fff}
.hero__sub{margin-top:clamp(18px,2.4vw,28px);font-size:var(--t-m);color:#E6EDF8;
  line-height:1.5;max-width:46ch}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px)}
.hero__aside{border-left:1px solid rgba(255,255,255,.3);padding-left:clamp(20px,2.6vw,36px)}
.hero__tag{display:block;font-size:var(--t-micro);font-weight:600;color:#fff;margin-bottom:13px}
.hero__aside p{font-size:var(--t-s);color:#CBD7EA;line-height:1.7;max-width:42ch}

.hero__cap{position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none;
  padding-block:0 clamp(13px,1.8vw,20px)}
.hero__capin{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut);
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;
  color:#E6EDF8;font-size:var(--t-micro)}
.hero__capin > span:first-child{color:#A9BBD8}
.hero__capin b{font-weight:600}
.hero__ticks{display:flex;gap:6px;margin-left:auto}
.hero__ticks i{width:22px;height:2px;background:rgba(255,255,255,.3);display:block}
.hero__ticks i[data-on]{background:#fff}
.hero__pause{appearance:none;background:none;border:1px solid rgba(255,255,255,.45);
  color:#E6EDF8;font:inherit;font-size:var(--t-micro);font-weight:500;padding:5px 13px;
  cursor:pointer;border-radius:var(--u-radius-sm);pointer-events:auto}
.hero__pause:hover{background:rgba(255,255,255,.16)}
.hero__cap [hidden]{display:none}
@media(prefers-reduced-motion:reduce){.hero__f{transition:none}}
@media(max-width:860px){
  .hero{min-height:clamp(520px,80vh,680px)}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;
    padding-block:clamp(70px,16vw,110px) clamp(62px,9vw,86px)}
  .hero__aside{border-left:0;border-top:1px solid rgba(255,255,255,.3);
    padding-left:0;padding-top:22px}
  .hero__wash{background:
    linear-gradient(177deg,rgba(0,26,74,.7) 0%,rgba(0,26,74,.5) 24%,
      rgba(0,26,74,.78) 58%,rgba(0,26,74,.92) 100%),
    rgba(0,26,74,.36)}
}

/* The client logo row. Neutral marks, not invented company names: a name
   under this heading is a claim about who Unison works with. */
/* The partner strip.

   It carries the partners' NAMES, set in the site's own type, not their
   logos. Those are their marks and they need permission to appear here;
   neither scraping one nor drawing one would be honest. Every cell is
   sized to take a real logo file the moment Unison supplies it.

   Four identical sets travelling exactly one set, so the loop closes on
   itself with no join to hide. It stops on hover, on keyboard focus, and
   on the control, because content that moves on its own for more than a
   few seconds has to be stoppable. */
.trust{padding-block:clamp(26px,3.4vw,40px) 0}
.trust__k{font-size:var(--t-micro);font-weight:600;color:var(--ink);margin-bottom:16px}
.mq{position:relative;overflow:hidden;border-block:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq__track{display:flex;width:max-content;animation:mq-run 42s linear infinite;
  will-change:transform}
.mq__set{display:flex;list-style:none;margin:0;padding:0}
.mq__item{display:grid;place-items:center;flex:0 0 auto;
  padding:clamp(14px,1.8vw,20px) clamp(24px,3.6vw,56px);
  border-right:1px solid var(--hair);min-height:clamp(70px,8vw,96px)}
/* an explicit box, because an SVG written without width and height
   collapses to nothing inside a grid cell. --s lifts a round mark, which
   reads smaller than a wordmark set to the same height. */
.mq__item img{--s:1;height:calc(clamp(26px,3vw,38px) * var(--s));width:auto;
  max-width:clamp(120px,14vw,186px);object-fit:contain;display:block}
/* two of the six are drawn white for a dark background. Inverting and
   turning the hue back keeps their brand colour while making them read on
   a light tile. The brand's own light file should replace this. */
.mq__item img.mq__flip{filter:invert(1) hue-rotate(180deg)}
.mq__item span{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:var(--t-m);color:var(--u-color-neutral-600);white-space:nowrap}
@keyframes mq-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}
/* Hover and the control, but NOT :focus-within. The only focusable thing
   in the strip is the control itself, so focus-within did nothing except
   hold the strip paused while the button that had just started it kept
   focus: you pressed Play and nothing happened. */
.mq:hover .mq__track,.mq[data-held] .mq__track{animation-play-state:paused}
.mq__pause{position:absolute;right:10px;top:50%;translate:0 -50%;z-index:2;
  appearance:none;background:var(--raise);border:1px solid var(--u-color-neutral-400);
  color:var(--ink);font:inherit;font-size:var(--t-micro);font-weight:500;
  padding:5px 12px;border-radius:var(--u-radius-sm);cursor:pointer;opacity:0;
  transition:opacity .16s ease}
.mq:hover .mq__pause,.mq__pause:focus-visible,.mq[data-held] .mq__pause{opacity:1}
@media(prefers-reduced-motion:reduce){
  .mq{mask-image:none;-webkit-mask-image:none}
  .mq__track{animation:none;width:auto;flex-wrap:wrap}
  .mq__set:not(:first-child){display:none}
  .mq__set{flex-wrap:wrap}
  .mq__pause{display:none}
}

.stats{padding-block:clamp(26px,3.4vw,40px) clamp(34px,4.6vw,64px)}
.stats__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.stat{display:grid;gap:6px;align-content:start;
  padding:clamp(16px,2vw,22px) clamp(12px,1.6vw,22px)}
.stat__n{font-family:var(--display);font-size:var(--t-34);font-weight:600;
  letter-spacing:-.035em;line-height:1}
.stat__c{font-size:var(--t-micro);color:var(--soft);line-height:1.45}
.stat + .stat{border-left:1px solid var(--hair)}
@media(max-width:760px){
  .stats__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--hair)}
  .stat:nth-child(3){border-left:0}
}

.proofs,.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.proof,.card{display:grid;gap:11px;align-content:start;
  padding:clamp(20px,2.4vw,28px) clamp(14px,1.8vw,24px);margin:0}
.proof + .proof,.card + .card{border-left:1px solid var(--hair)}
.proof blockquote{margin:0}
.proof blockquote p{font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  font-size:var(--t-m);line-height:1.3}
.proof figcaption{display:grid;gap:2px;font-size:var(--t-micro);color:var(--soft)}
.proof figcaption b{color:var(--ink);font-weight:600}
.card{text-decoration:none;color:inherit}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;margin-bottom:5px}
.card__k{font-size:var(--t-micro);font-weight:600;color:var(--blue)}
.card h3{font-size:var(--t-m);line-height:1.18}
.card:hover h3{color:var(--blue)}
.card p{font-size:var(--t-s);color:var(--soft);line-height:1.55}
.card time{font-size:var(--t-micro);color:var(--u-color-neutral-600)}
@media(max-width:760px){
  .proofs,.cards{grid-template-columns:minmax(0,1fr)}
  .proof + .proof,.card + .card{border-left:0;border-top:1px solid var(--hair)}
}

.ind__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.ind__h{font-size:var(--t-34);max-width:22ch}
.ind__shot{margin:0}
.ind__shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(max-width:860px){.ind__in{grid-template-columns:minmax(0,1fr)}}

.human{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.human__lead{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:var(--t-26);line-height:1.2;max-width:26ch}
.human__shot{margin:clamp(20px,2.6vw,30px) 0 0}
.human__shot img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
@media(max-width:860px){.human{grid-template-columns:minmax(0,1fr)}}

/* the insight library, and the four sectors */
.pieces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:2px solid var(--ink)}
.piece{display:grid;gap:9px;align-content:start;text-decoration:none;color:inherit;
  padding:clamp(18px,2.2vw,26px) clamp(14px,1.8vw,24px);
  border-bottom:1px solid var(--hair)}
.piece img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;margin-bottom:6px}
.piece:nth-child(odd){border-right:1px solid var(--hair)}
.piece__k{font-size:var(--t-micro);font-weight:600;color:var(--blue)}
.piece h3{font-size:var(--t-m);line-height:1.18;max-width:28ch}
.piece:hover h3,.feat:hover h3{color:var(--blue)}
.piece p{font-size:var(--t-s);color:var(--soft);line-height:1.55}
.piece time,.feat time{font-size:var(--t-micro);color:var(--u-color-neutral-600)}
/* the lead piece reads across: picture on one side, the piece on the other */
.feat{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,34px);text-decoration:none;color:inherit;background:var(--raise);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:clamp(16px,2vw,22px) clamp(16px,2vw,24px);align-items:center}
.feat img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.feat > div{display:grid;gap:11px;align-content:center}
@media(max-width:760px){.feat{grid-template-columns:minmax(0,1fr)}}
.feat h3{font-size:var(--t-34);line-height:1.1;max-width:22ch}
.feat p{font-size:var(--t-b);color:var(--soft);line-height:1.6;max-width:56ch}
@media(max-width:760px){
  .pieces{grid-template-columns:minmax(0,1fr)}
  .piece:nth-child(odd){border-right:0}
}

.scts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.sct{display:grid;gap:7px;align-content:start;
  padding:clamp(16px,2vw,24px) clamp(14px,1.8vw,22px)}
.sct:nth-child(odd){border-right:1px solid var(--hair)}
.sct:nth-child(n+3){border-top:1px solid var(--hair)}
.sct h3{font-size:var(--t-m)}
.sct p{font-size:var(--t-s);color:var(--soft);line-height:1.55}
.sct--lead h3{color:var(--blue)}
@media(max-width:620px){
  .scts{grid-template-columns:minmax(0,1fr)}
  .sct:nth-child(odd){border-right:0}
  .sct + .sct{border-top:1px solid var(--hair)}
}

.proof--one{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
  padding-inline:0}
.proof--one blockquote p{font-size:var(--t-26);max-width:30ch}

/* a photograph on an inner page */
.shot{margin:0}
.shot img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.shot figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  padding:11px 0 0;font-size:var(--t-micro);color:var(--soft)}
.shot figcaption b{font-weight:600;color:var(--ink)}
.shot--bleed img{aspect-ratio:auto;height:clamp(320px,46vh,520px)}
.shot--bleed figcaption{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}

/* the other disciplines, at the foot of a discipline page */
.rel{--col:clamp(12px,1.6vw,22px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.rel a{display:grid;gap:6px;align-content:start;text-decoration:none;color:inherit;
  padding:16px var(--col) 22px 0}
.rel a + a{border-left:1px solid var(--hair);padding-left:var(--col)}
.rel a .lbl{margin:0}
.rel a b{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:var(--t-m);line-height:1.16}
.rel a:hover b{color:var(--blue)}
.rel a > span:last-child{font-size:var(--t-s);color:var(--soft);line-height:1.5}
@media(max-width:760px){
  .rel,.rel--3{grid-template-columns:minmax(0,1fr)}
  .rel a + a{border-left:0;padding-left:0;border-top:1px solid var(--hair)}
}

/* ====================================================================
   The opener for a discipline or a place page.

   Not a hero. These pages used to open with a full bleed photograph, a
   60px headline and two pill buttons, which is exactly what the home page
   does, so they read as second home pages however their markup differed.

   This one sits on the page ground, the headline is 44px rather than 60,
   the photograph is contained rather than bleeding, and there are no
   buttons: the page already ends with a call. The strip is the thing only
   these pages can carry. It is the home board turned to this row, and it
   answers the question a reader actually arrives with, which is which one
   of the four this is.
   ==================================================================== */
.dh{padding-block:0 clamp(34px,4.4vw,62px)}
.dh__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,4vw,60px);align-items:stretch;padding-top:clamp(22px,3vw,38px)}
.dh__verb{font-size:var(--t-micro);font-weight:600;color:var(--blue);margin-bottom:11px}
.dh h1{font-size:var(--t-44);max-width:17ch}
.dh__sub{margin-top:clamp(12px,1.6vw,18px);font-family:var(--display);font-weight:600;
  letter-spacing:-.03em;font-size:var(--t-m);color:var(--soft);max-width:38ch;
  line-height:1.25;text-wrap:balance}
.dh__lead{margin-top:clamp(14px,1.8vw,20px);font-size:var(--t-b);color:var(--soft);
  line-height:1.6;max-width:52ch}

/* where this one sits among the set */
.dh__pos{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.dh__pos li{display:grid;grid-template-columns:13px 96px minmax(0,1fr);gap:0 14px;
  align-items:baseline;border-top:1px solid var(--hair)}
.dh__pos li:first-child{border-top:0}
.dh__pos li > a{display:grid;grid-template-columns:subgrid;grid-column:2 / -1;
  text-decoration:none;color:inherit}
.dh__mark{width:11px;height:11px;border:1px solid var(--u-color-neutral-400);
  align-self:center;margin-block:11px}
.dh__mark[data-on]{background:var(--blue);border-color:var(--blue)}
.dh__v{font-size:var(--t-micro);font-weight:600;color:var(--soft);padding-block:11px}
.dh__n{font-size:var(--t-s);color:var(--soft);padding-block:11px;line-height:1.35}
.dh__pos li[aria-current] .dh__v,.dh__pos li[aria-current] .dh__n{color:var(--ink);
  font-weight:600}
.dh__pos li > a:hover .dh__n{color:var(--blue)}

.dh__shot{position:relative;margin:0;overflow:hidden;align-self:stretch;
  display:flex;flex-direction:column}
.dh__shot img{width:100%;flex:1 1 auto;min-height:clamp(300px,33vw,520px);
  object-fit:cover;display:block}
.dh__shot figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;
  font-size:var(--t-micro);font-weight:500;padding:7px 13px}
@media(max-width:860px){
  .dh__in{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
  .dh__shot img{min-height:clamp(230px,52vw,320px)}
  .dh__shot{order:-1}
  .dh__pos li{grid-template-columns:13px minmax(0,1fr);gap:0 12px}
  .dh__v{display:none}
}

/* what a discipline solves: the statement, and what it usually means */
.probs{display:grid;gap:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.prob{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(16px,2.4vw,40px);padding-block:clamp(15px,1.9vw,21px);
  border-top:1px solid var(--hair)}
.prob:first-child{border-top:0}
.prob h3{font-size:var(--t-m);line-height:1.2;max-width:26ch}
.prob p{font-size:var(--t-s);color:var(--soft);line-height:1.56;max-width:52ch}
@media(max-width:760px){.prob{grid-template-columns:minmax(0,1fr);gap:5px}}

/* the three steps inside a discipline */
.steps{--col:clamp(12px,1.6vw,22px);list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.steps li{padding:16px var(--col) 0 0;border-top:2px solid var(--ink)}
.steps li + li{border-left:1px solid var(--hair);padding-left:var(--col)}
.steps li:last-child{padding-right:0}
.steps .st{font-family:var(--display);font-size:var(--t-s);font-weight:600;
  color:var(--blue);margin:0 0 10px}
.steps h4{font-size:var(--t-m);margin-bottom:8px}
.steps p:last-child{font-size:var(--t-s);color:var(--soft);line-height:1.52}
@media(max-width:900px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
  .steps li + li{border-left:0;padding-left:0}
}
@media(max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* the four disciplines described, as the client lists them */
.discs{display:grid;gap:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.disc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
  gap:clamp(16px,2.4vw,40px);padding-block:clamp(17px,2.1vw,24px);
  border-top:1px solid var(--hair);text-decoration:none;color:inherit}
.disc:first-child{border-top:0}
.disc h3{font-size:var(--t-m);line-height:1.18;max-width:20ch}
.disc:hover h3{color:var(--blue)}
.disc p{font-size:var(--t-s);color:var(--soft);line-height:1.56}
.disc__go{display:block;margin-top:11px;font-size:var(--t-s);font-weight:600;color:var(--blue)}
.disc:hover .disc__go{text-decoration:underline}
@media(max-width:760px){.disc{grid-template-columns:minmax(0,1fr);gap:8px}}

/* ====================================================================
   Motion on scroll.

   Not a fade up on every block. That withholds real content until the
   reader has scrolled far enough to deserve it, and it is the treatment
   every generated page uses. Everything here is already on screen at full
   opacity before anything moves.

   Three things move, and each one is the site's own language rather than
   a generic entrance:

   1. The 2px rule that heads every sheet draws itself left to right. The
      whole site is built on ruled sheets, so this animates the structure
      instead of sliding boxes around. It is a background gradient, not
      the border, so nothing shifts: the border stays in place and only
      loses its colour.
   2. The marks on the board land one after another. Those marks are the
      information the board exists to carry.
   3. The header condenses once you have left the top. That answers the
      reader rather than decorating.
   ==================================================================== */
@media(prefers-reduced-motion:no-preference){
  .bd__grid,.stats__in,.discs,.pls__grid,.proofs,.cards,.pieces,.scts,
  .dh__pos,.rel,.feat,.probs,.steps li,.dl > div:first-child,.rec{
    border-top-color:transparent;
    background-image:linear-gradient(var(--ink),var(--ink));
    background-repeat:no-repeat;background-position:left top;
    background-size:0 2px;
    transition:background-size .72s cubic-bezier(.22,.7,.2,1)}
  .steps li,.dl > div:first-child{transition-duration:.52s}
  [data-in].bd__grid,[data-in].stats__in,[data-in].discs,[data-in].pls__grid,
  [data-in].proofs,[data-in].cards,[data-in].pieces,[data-in].scts,
  [data-in].dh__pos,[data-in].rel,[data-in].feat,[data-in].probs,
  [data-in] .steps li,[data-in] .dl > div:first-child,[data-in].rec{
    background-size:100% 2px}
  .steps li:nth-child(2){transition-delay:.1s}
  .steps li:nth-child(3){transition-delay:.2s}

  /* the marks land in order, left to right, after the rule has drawn */
  .bd__cell{transition:background-color .3s ease,border-color .3s ease}
  .bd__row:not([data-in]) .bd__cell[data-on]{background:none;
    border-color:var(--u-color-neutral-400)}
  .bd__row .bd__cell:nth-child(1){transition-delay:.06s}
  .bd__row .bd__cell:nth-child(2){transition-delay:.14s}
  .bd__row .bd__cell:nth-child(3){transition-delay:.22s}
  .bd__row .bd__cell:nth-child(4){transition-delay:.3s}
}

/* the header gives the page back some room once you have left the top */
.hdr{transition:padding-block .22s ease,background-color .22s ease}
.hdr .mark img{transition:height .22s ease}
.hdr[data-stuck]{padding-block:9px;
  background:color-mix(in srgb,var(--ground) 97%,transparent);
  box-shadow:0 1px 0 var(--rule)}
.hdr[data-stuck] .mark img{height:27px}
@media(prefers-reduced-motion:reduce){
  .hdr,.hdr .mark img{transition:none}
}

/* page to page, where the browser supports it */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}