:root{
  color-scheme:light;
  --paper:#FBFBFC;
  --paper-2:#F2F5F6;
  --ink:#14171A;
  --body:#33383D;
  --muted:#626970;
  --rule:#E2E5E8;
  --rule-soft:#EBEEF0;
  --note-ink:#2B3237;
  --accent-label:#7D5F00;

  --f:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-u:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-q:"Newsreader",Georgia,"Times New Roman",serif;
  --f-h:"Caveat","Bradley Hand",cursive;

  --body-size:17px;
  --body-lh:1.58;
  --stand-size:clamp(17px,0.9vw + 13px,19px);
  --stand-sm:clamp(16px,0.4vw + 14.5px,17.5px);
  --brand-font:600 16px/1.2 var(--f);
  --ledger-font:500 clamp(20px,1.9vw,26px)/1.1 var(--f);
  --quote-font:italic 400 clamp(19px,1.7vw,24px)/1.42 var(--f-q);
  --quote-font-big:italic 400 clamp(22px,2.3vw,32px)/1.32 var(--f-q);
  --quote-font-sm:italic 400 clamp(17px,1.3vw,18.5px)/1.55 var(--f-q);
  --faq-font:500 clamp(16.5px,1.32vw,18px)/1.35 var(--f);
  --art-h2:clamp(21px,1.8vw,25px);
  --art-h3:clamp(18px,1.45vw,20px);
  --post-title:clamp(27px,2.9vw,40px);

  --nav-rule:1px solid var(--rule);
  --heavy-rule:1px solid var(--ink);
  --cell-rule:1px solid var(--rule);
  --btn-r:2px;
  --btn-pad:13px 22px;
  --btn-border:1px solid var(--ink);
  --field-bg:var(--paper);
  --field-border:1px solid var(--rule);
  --field-pad:12px 13px;

  --cols:1;
  --reader-cols:minmax(0,1fr);

  --ease:cubic-bezier(.4,0,.2,1);
  --pad:clamp(20px,4.6vw,60px);
  --maxw:1280px;
  --col:36em;
  --stand-two-max:64em;
  --faq-max:46em;
  --nav-h:78px;
  --hover-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 26'%3E%3Cpath d='M0 3.4 C16 0.6 33 5.4 49 2.8 C65 0.4 82 6 99 3 C111 1.1 123 4.6 132 3.4 L132 22.6 C123 24.9 111 20.4 99 23 C82 26.4 65 20.6 49 23.2 C33 25.8 16 20.4 0 22.6 Z' fill='%23FFC905' opacity='.85'/%3E%3Cpath d='M0 8.2 C20 5.6 40 10.8 60 7.6 C80 4.4 106 10.2 132 8.2' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' opacity='.2'/%3E%3Cpath d='M0 18.4 C24 16 44 21 68 18.2 C92 15.4 112 20 132 18.4' fill='none' stroke='%23E8A800' stroke-width='1.8' stroke-linecap='round' opacity='.28'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:var(--f);font-size:var(--body-size);line-height:var(--body-lh);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
figure{margin:0}
p{margin:0}
a{color:inherit}
::selection{background:#FFC905;color:#17140A}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap.narrow{max-width:940px}

/* ---- masthead ---- */
.nav{position:sticky;top:0;z-index:90;background:var(--paper);
  border-bottom:var(--nav-rule)}
.nav-in{display:flex;align-items:center;gap:clamp(20px,3.2vw,46px);height:var(--nav-h)}
.nav-in > .navtools{margin-left:auto}
.brand{color:var(--ink);text-decoration:none;white-space:nowrap;font:var(--brand-font)}
.menu{display:flex;align-items:center;gap:clamp(11px,1.5vw,22px);list-style:none;margin:0;padding:0}
.menu a{font-family:var(--f-u);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;position:relative;
  padding-bottom:3px;transition:color .2s var(--ease)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#FFC905;
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.menu a[aria-current="page"]::after{transform:scaleX(1)}
/* the links sat 11px from the black button, tight enough to read as crowded */
.navtools{display:flex;align-items:center;gap:clamp(14px,2.6vw,38px)}
@media(max-width:1120px){.menu li.hd{display:none}}
.prog{position:absolute;left:0;bottom:-1.5px;height:2.5px;background:#FFC905;width:0}
.burger{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);
  background:transparent;color:var(--muted);cursor:pointer;border-radius:var(--btn-r);
  transition:color .2s,border-color .2s}
.burger:hover{color:var(--ink);border-color:var(--ink)}
.burger{display:none}
@media(max-width:1120px){.burger{display:grid}}
@media(max-width:640px){.nav .btn{display:none}}
.sheet{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:85;background:var(--paper);
  border-bottom:var(--nav-rule);padding:4px var(--pad) 20px;display:none;
  flex-direction:column;opacity:0;transition:opacity .2s linear}
.sheet.mounted{display:flex}
.sheet.open{opacity:1}
.sheet a{font-size:23px;color:var(--ink);text-decoration:none;padding-block:12px;
  border-bottom:1px solid var(--rule-soft)}
.sheet a:last-child{border-bottom:0}

.dateline{border-bottom:1px solid var(--rule);background:var(--paper)}
.dateline .in{display:flex;justify-content:space-between;gap:16px;padding-block:7px;
  font-family:var(--f-u);font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){.dateline .in span:nth-child(2){display:none}}

/* ---- type ---- */
h1,h2,h3,h4{margin:0;color:var(--ink)}
.kicker{font-family:var(--f-u);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0}
.stand{font-size:var(--stand-size);line-height:1.44;color:var(--ink);max-width:28em}
.stand.sm{font-size:var(--stand-sm);line-height:1.56;color:var(--body)}
/* a pair of standfirsts sit side by side so a service hero is not one narrow
   column stranded beside a lot of nothing */
.stand-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.6vw,44px);max-width:var(--stand-two-max)}
.stand-two .stand{max-width:none}
@media(max-width:820px){.stand-two{grid-template-columns:1fr}}
.wide-stand{max-width:none}
.lead-in{max-width:var(--col);margin-top:12px}
.col p{max-width:var(--col)}
.prose p + p{margin-top:1em}
.prose p{max-width:var(--col)}
/* a wide column is filled by adding a column, never by stretching the measure */
.fine{font-family:var(--f-u);font-size:13px;line-height:1.58;color:var(--muted)}
.pad-xs{margin-top:9px}
.pad-s{margin-top:clamp(16px,1.7vw,25px)}
.pad-t{margin-top:clamp(22px,2.5vw,37px)}
.pad-b{margin-bottom:clamp(14px,1.5vw,22px)}
.block{margin-top:clamp(44px,5.4vw,84px)}

/* ---- links + buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:var(--btn-pad);
  font-family:var(--f-u);font-size:12.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);
  border:var(--btn-border);border-radius:var(--btn-r);text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn:hover{background:#FFC905;border-color:#FFC905;color:#17140A}
.btn .a{transition:transform .2s var(--ease)}
.btn:hover .a{transform:translateX(3px)}
.tlink{font-family:var(--f-u);font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--rule);padding-bottom:3px;
  display:inline-flex;align-items:center;gap:8px;transition:border-color .2s var(--ease)}
.tlink:hover{border-color:#FFC905}
.tlink .a{transition:transform .2s var(--ease)}
.tlink:hover .a{transform:translateX(3px)}
.ln{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);
  text-underline-offset:4px;transition:text-decoration-color .2s}
.ln:hover{text-decoration-color:#FFC905}

/* ---- structure ---- */
.view{display:none}
.view.on{display:block;animation:vin .42s var(--ease)}
@keyframes vin{from{opacity:0;transform:translateY(7px)}}
section{padding-block:clamp(44px,6vw,92px)}
section.tight{padding-block:clamp(38px,5vw,74px)}
section.no-top{padding-top:0}
.tint{background:var(--paper-2)}
.rule{border-top:1px solid var(--rule)}

.reader{display:grid;grid-template-columns:var(--reader-cols);gap:clamp(22px,3.6vw,60px);
  align-items:start}
.reader > :first-child:empty{display:none}
@media(max-width:960px){.reader{grid-template-columns:1fr}}

/* ---- hero ---- */
/* the claim and the offer are two sentences, so they get two lines */
h1 .ln1,h1 .ln2{display:block}
/* an inner page fills its width by putting the standfirst beside the headline
   instead of leaving a third of the line empty */
.hero-head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.4vw,30px)}
/* a section reads across the page: its heading holds the left column and the
   body fills the rest, so the width is used without a rail of links in it */
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,30px)}
.duo p{margin:9px 0 0;max-width:var(--col)}
.duo h3{max-width:24ch}
@media(min-width:860px){
  .duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,56px)}
  .duo p{max-width:none}
}
.hero-head .hh-side{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(12px,1.6vw,20px)}
.hero-head .hh-side .stand{max-width:29em}
.hero-head .hh-side .note{margin:0}

.hero{padding-top:clamp(30px,4.6vw,74px);padding-bottom:clamp(28px,4vw,62px)}
.hero .kicker{margin-bottom:clamp(18px,2vw,30px)}
.hero-main > h1{margin-top:0}
.hero-main .stand{margin-top:clamp(18px,2.1vw,32px)}
.hero-main .act{margin-top:clamp(24px,2.9vw,42px)}
/* the plainest arrangement there is: headline, then the copy under it, with
   the portrait alongside. two columns, never three.
   the headline gets no character cap and no balanced wrapping: a cap plus
   `text-wrap:balance` was holding it to 397px of a 682px column, which read as
   squashed into the left with a hole before the photograph. it fills its
   column instead, one line per sentence on a wide screen. */
.hero-two{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,2.6vw,32px);align-items:start}
.hero-main{display:flex;flex-direction:column;align-items:flex-start}
.hero-main > h1{max-width:none;text-wrap:normal;
  font-size:clamp(30px,3.5vw,44px);letter-spacing:-.022em}
.hero-main > h1 .ln1{font-weight:600}
.hero-main > h1 .ln2{font-weight:400}
.hero-main .stand{max-width:38em}
@media(min-width:820px){
  .hero-two{grid-template-columns:minmax(0,1fr) clamp(240px,23vw,320px);
    gap:clamp(18px,2vw,30px)}
}
@media(max-width:819px){
  .fig.portrait{max-width:440px}
}
.fig img{width:100%;height:auto}
.fig figcaption{font-family:var(--f-u);font-size:11.5px;color:var(--muted);margin-top:8px}
.fig.wide{margin-top:clamp(28px,3.6vw,52px);max-width:min(100%,760px)}
.act{display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,32px);align-items:center}
.field .opt{text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}

/* ---- ledger ---- */
.ledger{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--heavy-rule);
  border-bottom:1px solid var(--rule)}
.ledger div{padding:clamp(16px,1.8vw,23px) clamp(13px,1.8vw,24px) clamp(20px,2.2vw,28px);
  border-left:1px solid var(--rule-soft)}
.ledger div:first-child{border-left:0;padding-left:0}
.ledger b{display:block;font:var(--ledger-font);color:var(--ink)}
.ledger span{display:block;margin-top:6px;font-family:var(--f-u);font-size:12.5px;line-height:1.44;
  color:var(--muted);max-width:26ch}
.ledger-note{margin-top:clamp(12px,1.4vw,20px)}
@media(max-width:720px){.ledger{grid-template-columns:1fr}
  .ledger div{border-left:0;padding-left:0;border-top:1px solid var(--rule-soft)}
  .ledger div:first-child{border-top:0}}

/* a long read is one column at a comfortable measure. splitting it into two
   breaks a sentence across the gap, which reads as a mistake on a page that is
   otherwise a plain stack of sections. */
.article-body p{margin-bottom:1.05em;max-width:34em}
.article-body p:last-child{margin-bottom:0}
.article-body ul{margin:0 0 1.05em;padding-left:1.1em;max-width:34em}
.article-body li{margin-bottom:.45em}

.head{display:flex;flex-direction:column;gap:12px}
.marg{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px clamp(18px,2.4vw,38px)}
.marg > .head,.marg > div{flex:0 1 auto}
.marg > .note{flex:0 1 auto;margin-bottom:5px}
@media(max-width:820px){.marg{align-items:flex-start;gap:12px}}

.split{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1fr);
  gap:clamp(22px,3.2vw,52px);align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:20px}}

/* ---- service listing ---- */
.listing{border-top:var(--heavy-rule)}
.entry{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,40px);align-items:start;padding-block:clamp(20px,2.6vw,34px);
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.entry .no{font-family:var(--f-u);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-label)}
.entry h3{margin-top:7px}
.entry p{max-width:64ch;color:var(--body)}
.entry ul{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.entry li{font-family:var(--f-u);font-size:13.5px;color:var(--muted);padding-left:15px;
  position:relative}
.entry li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;
  background:var(--muted)}
.entry .go{align-self:center;font-size:19px;color:var(--muted);
  transition:transform .2s var(--ease),color .2s var(--ease)}
.entry:hover .go{transform:translateX(4px);color:var(--ink)}
.entry:hover h3{background-image:var(--hover-mark);background-repeat:repeat-x;
  background-size:auto .3em;background-position:left bottom;padding-bottom:.15em}
@media(max-width:860px){.entry{grid-template-columns:1fr auto;gap:11px}
  .entry .col1{grid-column:1/-1}.entry .go{align-self:end}}

/* The home page choices are the main decision, not another pair of text rows.
   Give them the weight of two editorial cards while the same component stays
   compact on About and Testimonials. */
.feature-list{border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,24px)}
.feature-list .entry{position:relative;display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);
  min-height:clamp(250px,22vw,310px);padding:clamp(22px,3vw,38px);
  border:1px solid var(--rule);background:var(--paper);overflow:hidden}
.feature-list .entry::before{content:"";position:absolute;left:0;top:0;width:0;height:5px;
  background:#FFC905;transition:width .36s var(--ease)}
.feature-list .entry:hover::before{width:100%}
.feature-list .entry .col1{padding-right:36px}
.feature-list .entry h3{font-size:clamp(22px,2.2vw,30px);line-height:1.12;max-width:16ch}
.feature-list .entry p{max-width:52ch}
.feature-list .entry .go{position:absolute;right:clamp(20px,2.4vw,32px);top:clamp(20px,2.4vw,32px)}
@media(max-width:760px){
  .feature-list{grid-template-columns:1fr}
  .feature-list .entry{min-height:0}
}

/* ---- quotes ---- */
.pull{border-left:3px solid #FFC905;padding-left:clamp(15px,1.8vw,24px);
  display:flex;flex-direction:column;gap:13px}
.pull blockquote{margin:0;font:var(--quote-font);color:var(--ink)}
.pull.sm blockquote{font:var(--quote-font-sm);color:var(--ink)}
.pull.big blockquote{font:var(--quote-font-big);color:var(--ink);max-width:26ch}
.pull figcaption{font-family:var(--f-u);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);line-height:1.7}
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.8vw,44px)}
@media(max-width:820px){.qgrid{grid-template-columns:1fr}}
.qlist{display:flex;flex-direction:column;gap:clamp(26px,3.2vw,48px)}

/* ---- definition table ---- */
.defs{border-top:var(--heavy-rule)}
.def{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,1fr);gap:clamp(12px,2.4vw,36px);
  padding-block:clamp(14px,1.9vw,24px);border-bottom:1px solid var(--rule)}
.def .k{font-family:var(--f-u);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-top:5px}
.def p{max-width:var(--col)}
@media(max-width:720px){.def{grid-template-columns:1fr;gap:5px}}

/* ---- triads ---- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px)}
.triad.pairs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.triad{grid-template-columns:1fr;gap:22px}}
.triad .cell{border-top:var(--cell-rule);padding-top:12px;display:flex;
  flex-direction:column;gap:7px}
.triad p{color:var(--muted);max-width:32ch}

.creds{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px clamp(18px,2.4vw,34px)}
.creds li{font-family:var(--f-u);font-size:13px;font-weight:600;letter-spacing:.03em;
  color:var(--ink);padding-left:16px;position:relative}
.creds li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:50%;background:#FFC905}
.orgs{display:flex;flex-wrap:wrap;gap:0 clamp(14px,2.2vw,32px);align-items:baseline}
.orgs span{color:var(--muted);padding-block:6px}
/* the real client logos, not wordmarks. an even cell each, so the row spreads
   across the page instead of bunching at one end. they keep their own colours:
   one of these is white type on a solid coloured tile, and desaturating the
   row turns it into an unreadable grey square. even spacing is what stops the
   tile looking out of place, not muting it. */
section.clients{border-top:1px solid var(--rule)}
.logo-strip{--logo-gap:clamp(30px,6vw,46px)}
.logos{display:none}
.logos img{max-width:100%;height:auto}

/* wide: an even cell each, and the second copy is not needed */
@media(min-width:980px){
  .logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(22px,3vw,40px);align-items:center;justify-items:center}
  .logos.dup{display:none}
}

/* narrow: the set marches past. two copies, each translating its own width
   plus one gap, so the second arrives exactly where the first left. */
@media(max-width:979px){
  .logo-strip{display:flex;gap:var(--logo-gap);overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .logo-strip > .logos{display:flex;flex:0 0 auto;align-items:center;
    gap:var(--logo-gap);animation:march 34s linear infinite}
  .logo-strip:hover > .logos{animation-play-state:paused}
  .logo-strip img{max-width:none;flex:0 0 auto}
}
@keyframes march{to{transform:translateX(calc(-100% - var(--logo-gap)))}}

/* ---- hand-drawn schematics in the articles ----
   strokes in the SVG, words in HTML. one big SVG scaled to a phone takes its
   labels down with it, and 8px type inside a drawing is worse than none. */
.schema{margin:clamp(30px,3.6vw,52px) 0;padding:clamp(22px,2.6vw,34px) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.schema figcaption{margin-top:clamp(18px,2vw,26px);font-family:var(--f-u);
  font-size:13.5px;line-height:1.5;color:var(--muted);max-width:56ch}

.sk{width:100%;max-width:224px;height:auto;display:block;overflow:visible;
  fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sk .hot{stroke:#FFC905;stroke-width:5}
.sk-arrow{flex:none;width:44px;height:24px;fill:none;stroke:var(--muted);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;align-self:center}

.schema-pair{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,44px)}
@media(min-width:560px){.schema-pair{grid-template-columns:1fr 1fr}}
.schema-cell{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sk-label{margin:0;font-family:var(--f-h);font-size:clamp(23px,2.2vw,29px);
  line-height:1;color:var(--ink)}
.sk-note{margin:0;font-family:var(--f-u);font-size:13px;line-height:1.45;
  color:var(--body);max-width:26ch}

.phases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(16px,2vw,22px)}
.phases .sk-arrow{rotate:90deg;margin-inline-start:14px}
@media(min-width:760px){
  .phases{flex-direction:row;align-items:stretch;gap:clamp(14px,1.8vw,24px)}
  .phases .sk-arrow{rotate:none;margin-inline-start:0}
  .ph-cell{flex:1 1 0}
}
.ph-cell{display:flex;flex-direction:column;gap:7px;padding-top:14px;
  border-top:2px solid var(--ink)}
.ph-nums{margin:0;font-family:var(--f-u);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;color:var(--accent-label)}
.ph-name{margin:0;font-family:var(--f-h);font-size:clamp(21px,1.9vw,25px);
  line-height:1.05;color:var(--ink)}
.ph-what{margin:0;font-family:var(--f-u);font-size:13px;line-height:1.45;
  color:var(--body)}

.related{margin-top:clamp(34px,4vw,56px);padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--rule)}
.related .kicker{margin-bottom:clamp(12px,1.6vw,18px)}
.row-title{font-size:var(--art-h3);line-height:1.28;margin:0}

/* the way back out of a post. it is a link first and a label second, so the
   tap target is the words and the arrow, not a 12px chevron. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(12px,1.6vw,18px);
  margin-bottom:clamp(16px,2vw,24px)}
.crumbs a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--f-u);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:color .2s var(--ease)}
.crumbs a .a{transition:transform .2s var(--ease)}
.crumbs a:hover{color:var(--ink)}
.crumbs a:hover .a{transform:translateX(-4px)}
.crumb-topic{font-family:var(--f-u);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-label)}
.crumb-topic::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--rule);vertical-align:middle;margin-right:12px}

/* ---- charts, drawn in the same hand as the marks ----
   the bar is a length of the crayon tile rather than a flat rectangle, so a
   number on this site is set in the same voice as an underline. */
.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(12px,1.6vw,18px)}
.bars li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:center}
@media(min-width:600px){
  .bars li{grid-template-columns:minmax(0,13em) minmax(0,1fr) auto;
    gap:clamp(14px,2vw,26px)}
}
.bar-label{margin:0;font-family:var(--f-u);font-size:14px;color:var(--ink)}
.bar-track{margin:0;min-width:0}
.bar-fill{display:block;height:.85em;min-width:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 26'%3E%3Cpath d='M0 3.4 C16 0.6 33 5.4 49 2.8 C65 0.4 82 6 99 3 C111 1.1 123 4.6 132 3.4 L132 22.6 C123 24.9 111 20.4 99 23 C82 26.4 65 20.6 49 23.2 C33 25.8 16 20.4 0 22.6 Z' fill='%23FFC905' opacity='.85'/%3E%3Cpath d='M0 8.2 C20 5.6 40 10.8 60 7.6 C80 4.4 106 10.2 132 8.2' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' opacity='.2'/%3E%3Cpath d='M0 18.4 C24 16 44 21 68 18.2 C92 15.4 112 20 132 18.4' fill='none' stroke='%23E8A800' stroke-width='1.8' stroke-linecap='round' opacity='.28'/%3E%3C/svg%3E");background-repeat:repeat-x;
  background-position:left center;background-size:auto 100%}
.bar-val{margin:0;font-family:var(--f-u);font-size:13px;font-weight:600;
  letter-spacing:.06em;color:var(--muted);white-space:nowrap}
@media(min-width:600px){.bar-val{text-align:right;min-width:4em}}

/* the two by two. the axes are words down the side and across the top, because
   an axis drawn as a line needs labels inside the drawing to mean anything. */
.quad{display:grid;grid-template-columns:1fr;gap:10px}
.quad-axis{margin:0;font-family:var(--f-u);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.quad-y{display:none}
.quad-grid{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(14px,2vw,22px)}
@media(min-width:640px){
  .quad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quad-y{display:block;writing-mode:vertical-rl;transform:rotate(180deg);
    grid-row:2;grid-column:1;justify-self:start;margin:0}
  .quad{grid-template-columns:auto minmax(0,1fr);gap:12px clamp(14px,1.8vw,22px)}
  .quad-x{grid-row:1;grid-column:2}
  .quad-grid{grid-row:2;grid-column:2}
}
.quad-cell{padding-top:13px;border-top:2px solid var(--ink)}
.q-where{margin:0;font-family:var(--f-u);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent-label)}
.q-name{margin:6px 0 0;font-family:var(--f-h);font-size:clamp(21px,1.9vw,25px);
  line-height:1.05;color:var(--ink)}
.q-what{margin:7px 0 0;font-family:var(--f-u);font-size:13px;line-height:1.45;
  color:var(--body)}

/* rings, and the venn: a drawing beside a key, never labels inside the art */
.rings,.venn-wrap{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2.6vw,34px);align-items:center}
@media(min-width:620px){
  .rings{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .venn-wrap{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
}
.sk-rings{max-width:200px}
.sk-venn{max-width:260px}
.ring-key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(12px,1.6vw,18px);counter-reset:ring}
.ring-key li{padding-left:22px;position:relative}
.ring-key li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;
  border:2px solid var(--ink);border-radius:50%}
.ring-key li:first-child::before{background:#FFC905;border-color:#FFC905}
.ring-name{margin:0;font-family:var(--f-u);font-size:13.5px;font-weight:600;color:var(--ink)}
.ring-what{margin:4px 0 0;font-family:var(--f-u);font-size:13px;line-height:1.45;
  color:var(--body)}
.venn-key .sk-note{max-width:44ch}

/* the hours of a day, each with a waveform of its own height */
.bands{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,26px)}
@media(min-width:760px){.bands{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px)}}
.band{padding-top:13px;border-top:2px solid var(--ink)}
.band-name{margin:0;font-family:var(--f-h);font-size:clamp(20px,1.8vw,24px);
  line-height:1.05;color:var(--ink)}
.sk-wave{display:block;width:100%;max-width:190px;height:auto;margin:10px 0 2px;
  fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.band-what{margin:8px 0 0;font-family:var(--f-u);font-size:13px;line-height:1.45;
  color:var(--body)}

/* ---- faq ---- */
.faq{border-top:var(--heavy-rule);max-width:var(--faq-max)}
.faq-two{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,34px)}
@media(min-width:1000px){
  .faq-two{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
    gap:clamp(24px,4vw,72px);align-items:start}
  .faq-two .faq{max-width:none}
}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding-block:clamp(13px,1.7vw,20px);
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  color:var(--ink);font:var(--faq-font)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-label)}
.faq .pm{flex:none;font-family:var(--f-u);font-size:15px;font-weight:400;color:var(--muted);
  transition:transform .2s var(--ease)}
.faq details[open] .pm{transform:rotate(45deg)}
.faq .ans{padding-bottom:clamp(14px,1.9vw,22px);display:flex;flex-direction:column;gap:10px}
.faq .ans p{max-width:var(--col)}

/* ---- writing ---- */
.posts{border-top:var(--heavy-rule)}
.post-row{display:grid;grid-template-columns:minmax(0,.22fr) minmax(0,1fr) minmax(0,.2fr);
  gap:clamp(14px,2.4vw,40px);align-items:start;padding-block:clamp(20px,2.6vw,34px);
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.post-row .when{font-family:var(--f-u);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.7}
.post-row .when i{font-style:normal;color:var(--accent-label);display:block}
.post-row p{max-width:66ch;margin-top:7px;color:var(--body)}
.post-row .mins{font-family:var(--f-u);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-align:right}
.post-row:hover h3{background-image:var(--hover-mark);background-repeat:repeat-x;
  background-size:auto .3em;background-position:left bottom;padding-bottom:.15em}
@media(max-width:820px){.post-row{grid-template-columns:1fr;gap:8px}
  .post-row .mins{text-align:left}}

.article{max-width:var(--col);margin-inline:auto}
.article h2{font-size:var(--art-h2);margin-top:1.5em;margin-bottom:.35em}
.article h3{font-size:var(--art-h3);margin-top:1.3em;margin-bottom:.3em}
.article p{margin-bottom:1em}
.article ul{margin:0 0 1.1em;padding-left:1.1em}
.article li{margin-bottom:.4em}
.post-title{font-size:var(--post-title);margin-top:14px}
.byline{max-width:var(--col);margin-inline:auto;display:flex;flex-wrap:wrap;gap:8px 16px;
  align-items:baseline;padding-block:14px;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);font-family:var(--f-u);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:clamp(24px,3vw,40px)}
.byline .who{color:var(--ink)}
.post-nav{max-width:var(--col);margin:clamp(30px,4vw,56px) auto 0;padding-top:20px;
  border-top:var(--heavy-rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- contact ---- */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.76fr);
  gap:clamp(24px,3.6vw,60px);align-items:start}
@media(max-width:880px){.cgrid{grid-template-columns:1fr}}
.form{display:flex;flex-direction:column;gap:15px;max-width:30em}
.field{display:flex;flex-direction:column;gap:6px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .sent{margin:0}
.field label{font-family:var(--f-u);font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{font-family:var(--f);font-size:17px;color:var(--ink);
  background:var(--field-bg);border:var(--field-border);border-radius:var(--btn-r);
  padding:var(--field-pad);width:100%;transition:border-color .2s var(--ease)}
.field textarea{min-height:128px;resize:vertical;border:1.5px solid var(--rule);padding:11px}
.field input:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.form .btn{align-self:flex-start;margin-top:4px}
.cmeta{display:flex;flex-direction:column}
.cmeta .item{padding-block:15px;border-bottom:1px solid var(--rule-soft);
  display:flex;flex-direction:column;gap:5px}
.cmeta .item:first-child{padding-top:0}
.cmeta .item:last-child{border-bottom:0}
.cmeta p{max-width:32ch}

/* ---- testimonial rotator ---- */
section.quotes{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-2)}
section.quotes .wrap{padding-block:clamp(38px,5.4vw,76px)}
section.quotes .wrap > *{max-width:1100px}
section.quotes .rotator{position:relative}
section.quotes .rotator::before{content:"\201C";position:absolute;right:0;top:-.58em;
  font-family:var(--f-q);font-size:clamp(90px,13vw,180px);line-height:1;color:#FFC905;
  opacity:.13;pointer-events:none}
.rotator{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px)}
/* the track is one row of full-width cells that slides. the row takes the
   height of the tallest quote, so the section never jumps as it moves. */
/* the track slides by scrolling itself. a transform on this grid is dropped
   by the engine, and CSS scroll snapping refuses any position between two
   slides, which kills an animated scroll: the script eases scrollLeft instead
   and settles the nearest slide after a swipe. */
.track{overflow:hidden}
.slides{display:flex;transition:transform .58s cubic-bezier(.35,0,.2,1);will-change:transform}
.slides > .slide{flex:0 0 100%;min-width:0}
/* at rest only the quote on show paints. clipping the track alone leaves the
   next quote's opening speech mark antialiasing against the clip edge, which
   prints as a speck to the right of the visible one. every slide is visible
   while the rail is moving, so the slide itself still reads. visibility keeps
   them in the layout either way, so the row stays as tall as the longest. */
.slides > .slide{visibility:hidden}
.slides > .slide.is-on,.slides.moving > .slide{visibility:visible}
.slide{display:flex;flex-direction:column;gap:16px;align-content:start}
.rotator blockquote{margin:0;font:var(--quote-font-big);color:var(--ink);max-width:28em;
  text-wrap:pretty}
.rotator blockquote::before{content:"\201C"}
.rotator blockquote::after{content:"\201D"}
.rotator.wide{max-width:none}
/* a long testimonial fills the page by being set large, not by being split
   into two columns that break it mid-sentence */
.rotator.wide blockquote{font:var(--quote-font-big);color:var(--ink);max-width:26em}
/* a long quote fills a wide page by breaking into columns, like a paper does */

.rotator figcaption{font-family:var(--f-u);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);line-height:1.7;
  padding-top:13px;border-top:1px solid var(--rule);position:relative;align-self:flex-start}
.rotator figcaption::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;
  background:#FFC905}
.rot-ui{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dots{display:flex;gap:2px}
.dots button{width:32px;height:32px;padding:0;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center}
.dots button::after{content:"";width:9px;height:9px;border-radius:50%;border:1px solid var(--rule);
  background:transparent;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.dots button:hover::after{border-color:var(--ink)}
.dots button[aria-current]::after{background:#FFC905;border-color:#FFC905;transform:scale(1.2)}
.arrows{display:flex;gap:8px}
.arrows button{width:44px;height:44px;padding:0;border:1px solid var(--rule);
  background:transparent;color:var(--ink);cursor:pointer;border-radius:var(--btn-r);
  font-family:var(--f-u);font-size:14px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.arrows button:hover{border-color:var(--ink);background:#FFC905}
@media(max-width:520px){.rot-ui{justify-content:flex-start;gap:14px}}

/* ---- closing + footer ---- */
.closer{background:var(--paper-2);border-top:var(--heavy-rule)}
.closer .in{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:40em}
.cta-stand{max-width:var(--col)}
footer{border-top:var(--heavy-rule);padding-block:clamp(26px,3.2vw,42px)}
/* one flat list of every page read as an afterthought. the links are grouped
   under labels, set larger, and take the crayon on hover like the rest of the
   site, so the foot of the page is part of it. */
.foot{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,48px);align-items:start}
@media(max-width:1000px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot{grid-template-columns:1fr}}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  max-width:30ch}
.foot-brand .brand{font-size:clamp(19px,1.9vw,24px)}
.foot-btn{margin-top:clamp(6px,1vw,12px)}
.foot-col .kicker{margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(8px,1vw,12px)}
/* `.foot a` beats `.btn` on specificity, so styling every anchor in the
   footer painted the button's own text in body ink: black on black. the
   sitemap links are addressed on their own and the button is left alone. */
.foot-link{font-family:var(--f-u);font-size:14.5px;color:var(--body);text-decoration:none;
  background-image:var(--hover-mark);background-repeat:repeat-x;
  background-position:left calc(100% + .12em);background-size:0 .32em;
  transition:background-size .28s var(--ease),color .2s var(--ease)}
.foot-link:hover{color:var(--ink);background-size:auto .32em}

/* the legal line sits on its own rule under the columns */
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:10px clamp(18px,2.4vw,36px);margin-top:clamp(30px,3.6vw,54px);
  padding-top:clamp(16px,1.8vw,24px);border-top:1px solid var(--rule)}
.foot-base p{margin:0}
/* the way in for Heather. quiet enough that a visitor scrolls past it. */
.foot-edit{margin-left:16px;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:1px}
.foot-edit:hover{color:var(--ink);border-bottom-color:#FFC905}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
  /* the blanket rule above would snap the march to its finished position, so
     the strip stops where it started and can be pushed by hand instead */
  .logo-strip > .logos{animation:none !important;transform:none !important}
  .logo-strip{overflow-x:auto}
}

/* ---- the crayon mark: one type, everywhere ----
   the wax is a repeating tile painted on the words themselves, so a phrase
   that wraps onto two lines gets a stroke under each of them. an absolutely
   positioned pseudo-element cannot do that: it only ever draws one line, at
   the bottom of the whole box, which leaves wax hanging past the last word.
   the tile height is set in em, so the weight stays proportional to the copy,
   and repeat-x means a longer phrase gets more wax, never thicker wax. */
.mk{display:inline;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 26'%3E%3Cpath d='M0 3.4 C16 0.6 33 5.4 49 2.8 C65 0.4 82 6 99 3 C111 1.1 123 4.6 132 3.4 L132 22.6 C123 24.9 111 20.4 99 23 C82 26.4 65 20.6 49 23.2 C33 25.8 16 20.4 0 22.6 Z' fill='%23FFC905' opacity='.85'/%3E%3Cpath d='M0 8.2 C20 5.6 40 10.8 60 7.6 C80 4.4 106 10.2 132 8.2' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' opacity='.2'/%3E%3Cpath d='M0 18.4 C24 16 44 21 68 18.2 C92 15.4 112 20 132 18.4' fill='none' stroke='%23E8A800' stroke-width='1.8' stroke-linecap='round' opacity='.28'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:left calc(100% + .12em);
  background-size:auto .4em}

.ring{position:relative;display:inline-block;white-space:nowrap}
.ring > svg{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:196%;height:320%;overflow:visible;pointer-events:none}
.ring path{fill:none;stroke:#FFC905;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;
  transition:stroke-dashoffset 1.05s cubic-bezier(.16,.84,.24,1) .15s}
.ring.drawn path{stroke-dashoffset:0}

/* the note itself stays in ink so it can actually be read; the arrow carries
   the yellow, and the whole thing is scrawled at a slight angle */
.note{font-family:var(--f-h);font-size:clamp(19px,1.7vw,23px);line-height:1.15;
  color:var(--note-ink);transform:rotate(-2.2deg);transform-origin:left center;
  display:flex;align-items:flex-start;gap:8px;opacity:0;
  transition:opacity .6s ease .25s}
.note.drawn{opacity:1}
.note svg{flex:none;width:27px;height:23px;margin-top:4px;overflow:visible}
.note svg path{fill:none;stroke:#FFC905;stroke-width:2.8;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;
  transition:stroke-dashoffset .7s cubic-bezier(.16,.84,.24,1) .45s}
.note.drawn svg path{stroke-dashoffset:0}
.note.flip{transform:rotate(1.8deg)}
.note.up svg{transform:scaleY(-1)}

@media (prefers-reduced-motion:reduce){
  .ring path,.note svg path{stroke-dashoffset:0 !important}
  .note{opacity:1 !important}
}

/* one grotesque, set small and tight; the serif is only ever a client speaking */
h1{font-size:clamp(29px,2.95vw,44px);line-height:1.14;letter-spacing:-.02em;
  font-weight:500;text-wrap:balance;max-width:20ch}
h2{font-size:clamp(23px,2vw,29px);line-height:1.18;letter-spacing:-.018em;
  font-weight:500;text-wrap:balance;max-width:26ch}
h3{font-size:clamp(18px,1.42vw,20px);line-height:1.32;letter-spacing:-.006em;font-weight:500}
h4{font-size:17px;font-weight:500}
.entry p,.def p,.faq .ans p,.post-row p,.triad p{font-size:16px}
.orgs span{font-size:16px}
.post-title{max-width:26ch}

/* no drop caps: this direction is not a newspaper */
.dropcap::first-letter{float:none;font-size:inherit;padding:0}

/* the reading rail carries the secondary portrait, so a wide screen gains a
   second track rather than a wider line of text */
@media(min-width:1024px){
  .reader{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
  .reader > .fig{margin:0}
}

/* the portrait extends past the page grid to the right edge.
   the negative margin goes on the FIGURE, not on the hero. put it on the hero
   and it fights .wrap's margin-inline:auto, the auto left margin swallows the
   difference, and the whole hero slides sideways on a wide screen. keeping the
   hero a normal centred wrap also stops the left column growing so wide that
   the copy floats in the middle of it. */
.fig.portrait{background:#EDF1F2;border:1px solid var(--rule);
  box-shadow:clamp(7px,1vw,12px) clamp(7px,1vw,12px) 0 rgba(255,201,5,.22)}
.fig.portrait img{padding:0}
.fig.portrait figcaption{margin-top:0;padding:9px 12px 12px;color:#59636A}
/* the hero measures are set in base_css now: capping them again here was what
   held the headline and the standfirst to two thirds of their column */
@media(max-width:700px){.fig.portrait{max-width:440px}}
/* with no rail to sit in, the secondary portrait becomes a plate, not a poster */
@media(max-width:1023px){.reader > .fig{max-width:min(100%,430px)}}

/* quotes get the serif and a lighter rule */
.pull{border-left:0;padding-left:0}
.pull figcaption{padding-top:14px;border-top:1px solid var(--rule);position:relative}
.pull figcaption::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;
  background:#FFC905}