/* ==========================================================================
   insights.css - the field notes: the listing, the reader, and the card the
   hub band on index.html reuses.

   Loaded by insights.html and insights-article.html. content-hub.css loads it
   on index.html for .pcard alone, so a note card is one design wherever it is
   found. Nothing here is declared that base.css already declares: the colours,
   the spacing steps, the radii, the elevations and every button are its.

   ART DIRECTION, since it is the one thing here that is a decision rather than
   a reuse. A blog for an agency network is, by default, a page of stock
   photographs of meetings. This one is a page of MAPS: each note is headed by
   the relief cut of the country it reports on, already on disk for the profile
   page, laid under its own market's ramp colour. It costs nothing, it cannot be
   bought by a competitor, it makes the market the subject of every image, and
   it is the same material the hero plate is made of, so the blog reads as part
   of the site rather than a WordPress theme bolted to the side of it.

   The tint is the CITY'S OWN colour, carried in as --ac. That value already
   paints the member's tile, the panel accent and the map pin, so Tokyo is one
   colour everywhere on this site including here.
   ========================================================================== */


/* ==========================================================================
   01. Page chrome
   ========================================================================== */

/* The insights pages are light from the top, so the header is not the
   transparent-over-a-dark-plate bar index.html uses. It gets a ground and a
   hairline, and its CTA goes back to being the purple primary, which is what
   base.css intends on a light surface. */
/* NOT STICKY, because index.html's is not. Its header is position:absolute over
   the map - it passes once and scrolls away - and a reading page that pins its
   nav while the landing page lets it go reads as two different sites.

   This also retires the z-index that was load-bearing while it pinned. base.css
   gives .site-header a background and nothing else, and immersive-hero.css - the
   sheet index gets its z-index from - is deliberately not loaded here, so a
   STICKY header sat at z-index auto and the note images painted straight over
   it, because mix-blend-mode opens a stacking context. In normal flow the header
   and the content never share space, so there is nothing left to lose to. The
   bug is gone with the position rather than fixed. */
.ins .site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
}
/* THE WRAP'S OWN RULE IS GONE (2026-09-03), and it was doing damage rather
   than nothing. It read `display:flex;align-items:center;gap:var(--s6)` - the
   first two are what base.css already sets on .site-header .wrap, and the third
   was a second gap value 4px off the base one. At 0,3,0 it outranked base's
   RESPONSIVE gap ladder (--s3 below 1023, --s2 below 479), so the bar kept a
   24px gap at every width. Measured on insights at 768 that made brand + nav +
   Sign in + the CTA overflow by two pixels and the CTA wrapped to a row of its
   own - a 137px header where index's was 68. At 320 it wrapped twice: 206px of
   header before the page began. Deleting the declaration hands the band back to
   base.css, which already had the right numbers. */

/* .ins-nav has moved to base.css - see "The section nav" there. It is on
   profile.html now, which does not load this sheet, so it could no longer live
   in the insights bundle. The name is kept because docs/brief.md and the header
   comments on all six pages refer to it. */


/* --- The contained bar --------------------------------------------------

   index.html's header is a contained pill over the map, and its own CSS gives
   the reason to borrow the geometry: "a wordmark pinned to one edge and an
   action pinned to the other, with eleven hundred pixels of nothing between
   them, reads as unfinished rather than restrained. Inside a frame the same
   emptiness is composed." True here too.

   What is NOT borrowed is the colour, and that is settled rather than chosen:
   the dark pill exists because a full-bleed dark map has to run to the top edge
   and a solid bar would cut the stage off. These pages have no stage.

   There was briefly a second state - flat and full-bleed once pinned - which
   existed only because this header used to be sticky. It is not, so there is
   one state and no scroll machinery behind it.

   901px, the same breakpoint index uses, and for the same reason: below it the
   viewport is too narrow for a contained bar to read as contained. */
@media (min-width:901px){
  .ins .site-header{
    padding-top:var(--s5);
    background:transparent;
    border-bottom:0;
    /* The margin either side of the pill is page, not header. */
    pointer-events:none;
  }
  .ins .site-header .wrap{
    pointer-events:auto;
    background:var(--white);
    /* Fully round at 72 tall, exactly as index reasons it: the action inside is
       43 and sits 14 clear, and concentric corners want outer = inner + gap. */
    border-radius:999px;
    border:1px solid rgb(58 35 100 / .10);
    /* index's shadow, lifted off a dark stage onto a light one: same geometry,
       a third of the opacity, and tinted plum rather than black so it reads as
       depth rather than dirt. */
    box-shadow:0 18px 44px -30px rgb(28 16 54 / .45);
  }
}


/* ==========================================================================
   02. Masthead
   ========================================================================== */

/* ASYMMETRIC, and this is the stated reason the rule in base.css asks for. A
   masthead has no section above it to be separated from - its top padding is
   clearance from the header, which is section-tier work, while its bottom is the
   gap to its own first content block, which is component-tier work. Two
   different jobs, so two different scales. */
.ins-mast{padding:var(--sec) 0 0}
.ins-mast .wrap{padding-top:0;padding-bottom:var(--s10)}
.ins-mast .eyebrow{margin-bottom:var(--s4)}
/* Capped in characters rather than pixels: the line break in the markup is the
   one the display size wants, and a pixel cap would fight it at some widths. */
.ins-mast h1{max-width:18ch}
.ins-mast-deck{
  margin-top:var(--s6);max-width:58ch;
  color:var(--gray);font-size:19px;line-height:29px;
}


/* ==========================================================================
   03. The lead
   One post at full width. Image left, everything else right, which is the
   arrangement a reader scanning a blog index already expects and the one that
   lets the deck run at reading size instead of card size.
   ========================================================================== */

.ins-lead-sec .wrap{padding-bottom:var(--sec)}

.ins-lead{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--s10);align-items:center;
  text-decoration:none;
  /* Inherited balance off, for the reason spelled out beside .pcard below.
     .ins-lead-t re-declares balance for itself; .ins-lead-dek was the one
     being balanced by accident. */
  text-wrap:pretty;
  transition:transform 220ms cubic-bezier(.2,.7,.3,1);
}
.ins-lead:hover{transform:translateY(-2px)}

.ins-lead-media{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-lg);aspect-ratio:16/10;
}
/* --- repeat framing ------------------------------------------------------
   Every market has one photograph and every member files three or four notes,
   so a market's cards were four prints of one frame in a row. photoFor() still
   returns the city file; frameFor() in js/insights-data.js hands the second and
   later notes from a market a different crop of it, set as --pz (zoom) and
   --ptx/--pty (pan) on the img. The first note of a market is left alone at
   --pz:1 - the photographer's framing is the best one available and the lead
   card keeps it.
   ZOOM, NOT object-position: the files are 1600x1000 and these frames are 16/10,
   so cover crops nothing and panning alone would be a no-op. Scale is capped at
   1.3, which still leaves 1230px of source under a 340px card at DPR 2.
   Hover composes with the frame rather than replacing it - an inline transform
   would have won over the hover rule and killed the zoom on every framed card. */
.ins-lead-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--pz,1)) translate(var(--ptx,0%),var(--pty,0%));
  transition:transform 600ms cubic-bezier(.2,.7,.3,1);
}
.ins-lead:hover .ins-lead-media img{
  transform:scale(calc(var(--pz,1) * 1.03)) translate(var(--ptx,0%),var(--pty,0%));
}

.ins-lead-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.ins-lead-t{
  color:var(--black);font-size:clamp(28px,2.9vw,40px);font-weight:500;line-height:1.2;
  text-wrap:balance;
}
.ins-lead:hover .ins-lead-t{color:var(--blue-deep)}
.ins-lead:hover .u-sweep,
.ins-lead:focus-visible .u-sweep{background-size:100% var(--u-h);background-position:0 100%}
.ins-lead-dek{color:var(--gray);font-size:18px;line-height:28px;max-width:46ch}
.ins-lead-go{
  margin-top:var(--s2);
  color:var(--purple);font-size:16px;font-weight:500;
  transition:color 180ms ease-in-out;
}
.ins-lead:hover .ins-lead-go{color:var(--blue-deep)}

@media (max-width:900px){
  .ins-lead{grid-template-columns:1fr;gap:var(--s6)}
  .ins-lead-media{aspect-ratio:16/9}
}


/* ==========================================================================
   04. Controls
   The same two-part split .dir-controls makes: what is in the set on the left,
   which market on the right, the result of both reported underneath.
   ========================================================================== */

/* NOT STICKY. It was, and the reason it was is gone: the applied-filter row
   pinned with it, and that row's whole job was answering "why am I seeing three
   notes" from wherever the reader had scrolled to. With the row removed the bar
   is four controls the reader sets once, and pinning four controls to the top of
   every screen spends 86px of every viewport on something already used.

   Removing it also takes the machinery with it - the measured --hdr-h, the
   font-load re-measure and the scroll listener existed only to position a bar
   that no longer moves. */
/* NO RULES ABOVE OR BELOW. The bar used to be fenced by two --line hairlines,
   which is base.css's stated failure mode written out on this page: a border
   between two blocks reads as a rule across the page, not as a separator, and
   the top one sat a few pixels under .ins-mast's own hairline so the eye got two
   parallel lines doing one job.

   THE PADDING HAD TO CHANGE WITH THEM, because the bottom border was the only
   thing holding the pills off the first card row - at --s2 there were 16px
   between a filter control and a photograph. --s8 below, plus .ins-grid-sec's
   own --s2, is 40px of clear space, which separates the two without drawing
   anything. Nothing is needed above: .ins-lead-sec already closes on a full
   --sec. */
/* The landing gap for a deep link. insights.js scrolls this section to the top
   of the viewport when the page opens with a filter already applied; flush
   against the edge the pill row reads as clipped rather than as the top of a
   set. Nothing on this page is sticky, so this is the whole offset. */
.ins-controls-sec{scroll-margin-top:var(--s5)}
.ins-controls-sec:focus{outline:none}
.ins-controls-sec .wrap{padding-top:0;padding-bottom:var(--s8)}
.ins-controls{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}

/* The chip row and the market <select> that lived here were replaced by the
   toolbar in filter-bar.css - three pill dropdowns, a search field, a count and
   a sort, plus a row of dismissible applied filters. The chips were fine at one
   filter axis and did not survive three: six chips plus ten markets plus eleven
   agencies is fifty-odd controls on a page holding thirteen notes. */

/* ==========================================================================
   05. The note card
   Shared with index.html's hub band. Changing anything here changes both.
   ========================================================================== */

.ins-grid-sec .wrap{padding-top:var(--s2);padding-bottom:var(--sec)}

/* 380, and every digit of it is measured. At the original 320 the 1400 wrap fits
   FOUR tracks and two things broke: 20px titles ran to four lines, and
   .pcard-foot could no longer hold a long member name beside the date, so the
   meta wrapped on SOME cards and not others and the row of card feet came out
   ragged.

   The floor is set by the longest byline in the set. "M2.0 Communications" at
   13px/500 is about 132px; add the 32px tile, two 8px gaps, roughly 128px of
   date and read time, and 48px of card padding and the foot needs a 356px
   track. 360 cleared that at 1440 and failed at 1180, where auto-fill was still
   printing three tracks at 361 and that one card wrapped alone. 380 makes the
   break honest: three tracks down to a 1236px viewport, two below it, and the
   narrowest track anywhere is 380 against a 356 requirement. Below 520 the foot
   stacks on purpose - see the rule at the foot of this block. */
/* GAP --s10, NOT --s6, AND THE FILL IS WHY. A filled card draws its own edge,
   so 24px was enough to separate two of them. Unfilled, the only thing between
   two cards is white - and the gutter now has to beat the dek's 21px leading by
   enough that the eye stops at the column edge instead of reading across into
   the neighbour. At 24 the .pcard-foot hairlines of adjacent cards very nearly
   meet and three cards read as one ruled table. 40 is the first step on the
   scale that clears it.

   IT MOVES THE COLUMN BREAK. Three 380 tracks need 2*gap between them, so the
   three-column floor went from 1188 to 1220 of content width. Re-swept after
   the change - see the note on 380 below, whose arithmetic still holds. */
.ins-grid{
  display:grid;gap:var(--s10);
  grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
}

/* NO FILL (2026-09-02). The card was --haze #F4F4F7 on --surface #FFFFFF with
   --r-lg and overflow:hidden, and the note here said a page of outlined boxes
   draws the grid before it draws the notes. That is still true of OUTLINES. It
   was not true of this fill, and the measurement is what settled it:

     three steps of lightness, invisible at card scale
     48px of --s6 padding spent to justify it, on a 312px track
     = 15% of the measure, which showed up as clipped titles

   "Manila's disclosure rules are now the strictest in the region" truncates
   filled and fits whole unfilled, same card, same width. That is the trade the
   fill was making and it was not worth it.

   THE FILL'S OTHER JOB WAS HOVER - haze to mist, plus --e-high, plus a 2px
   lift - and that job now has three other channels: the title goes
   --blue-deep, .u-sweep draws the underline, and the photograph scales 1.04.
   The fill was the weakest of the four and the only one that cost measure.
   The lift went with it: translating an unfilled card moves text with no
   container around it, which reads as a glitch rather than a response.

   THE PHOTOGRAPH IS NOW THE ONLY SHAPE ON THE CARD. The radius moved one
   element down to .pcard-media, same --r-lg, so the grid is a grid of pictures
   with type under them rather than a grid of grey rectangles.

   ONE EXCEPTION, and it is deliberate: .hub-lead .pcard on index.html keeps the
   fill. It is the single focal card in a band that is otherwise text rows, and
   unfilled it stops reading as the lead. The re-fill lives in content-hub.css
   beside the rest of that band's rules. */
/* text-wrap:pretty, AND IT IS A RESET RATHER THAN A CHOICE.

   base.css balances a long list of selectors to kill orphans, and bare `a` is
   on it. That rule was written for a LINK IN A SENTENCE - a few words, where
   balance stops the last one falling alone. text-wrap INHERITS, and this
   component is an <a> the size of a card, so every string inside it was being
   balanced: kicker, dek, byline, date.

   The title is meant to be balanced and says so itself, so it is unaffected.
   The DEK was the casualty. Balance minimises the longest line across the whole
   block, so a three-line dek came out as three SHORT lines with the right of
   the card empty - measured on insights.html at 1440, average slack from the
   text's longest line to the card edge was 42px and the worst was 152px on a
   424px card. Reset to pretty: 17px average, 52px worst. On a member page at
   299px: 33 -> 21 average, 78 -> 46 worst.

   IT WAS ALWAYS WRONG AND ONLY BECAME VISIBLE ON 2026-09-02, when the card lost
   its fill. The old --s6 of right padding put a 24px margin between the text
   and the card's edge, so short lines read as padding. With the text running to
   the card edge the .pcard-foot hairline is now the reference, and it goes the
   full width while the dek stops well short of it.

   THE SAME BUG IS EVERYWHERE A BLOCK IS A LINK - see .ins-lead and .hub-row,
   both reset the same way. Anything else built as a card-sized <a> needs this
   line too, until the rule in base.css is scoped to inline links. */
.pcard{
  display:flex;flex-direction:column;
  background:transparent;
  text-decoration:none;
  text-wrap:pretty;
}

/* --- the images, untreated -----------------------------------------------

   THE DUOTONE IS GONE (client direction, 2026-08-31), and this note is what was
   here so nobody re-derives it from scratch. The treatment was: a gradient
   ground per market running that market's --ac down into --plum, the photograph
   laid over it in mix-blend-mode:luminosity so it contributed LIGHTNESS ONLY,
   and a hover bloom that swapped the far stop toward the electric end. Every
   colour on a card came from that gradient - the photographs were never in
   colour at all, which is why turning the purple down had to be done to the
   ground and not to the image.

   THREE THINGS WENT WITH IT, because none of them does anything without the
   blend and leaving them would be three pieces of machinery with no mechanism:

     isolation:isolate   existed so the blend resolved against THIS box's ground
                         rather than whatever happened to be painted beneath it.
     the ::before bloom  painted at z-index -1, UNDER the image, which is where
                         it had to be for a luminosity blend to see it. With an
                         opaque image above it, it would never be seen again.
     grayscale(1)        was belt-and-braces on a blend that was already
                         discarding chroma.

   WHAT IT COSTS, recorded because it was the whole argument for the duotone:
   the longitude ramp is no longer visible on these cards. data.js still assigns
   c.color west to east and --ac still colours the kicker, the tags, the reading
   bar and the article's accents - a market's place on the ramp is still on the
   page, it is just not the photograph any more. Cards also no longer share one
   palette, so the grid is as consistent as the photography is.

   THE GROUND STAYS, AS A PLACEHOLDER ONLY. --haze, the same grey .pcard already
   fills with, so a card whose photograph has not decoded yet is a grey plate
   rather than a white hole in the grid. An opaque image covers it the moment
   one arrives. */
.pcard-media,
.ins-lead-media,
.ins-art-media,
.hub-row-media{
  background:var(--haze);
}

/* THE EDGE, because the picture is now the card. See --e-media in base.css for
   the measurement that set it - the short version is that a white image on a
   white sheet was reading rgb(254) against rgb(255) on all four sides, and a
   downward shadow would only have answered one of them.

   The same four surfaces as the placeholder ground above, and for the same
   reason: these are the four places an image meets the page directly. The one
   exclusion is the hub band's lead, which still has a fill around its picture
   and clips it - the ring would be sliced on three sides and it has nothing to
   separate itself from anyway.

   STATIC ON HOVER, deliberately. The card already answers the cursor three
   ways - the title goes --blue-deep, .u-sweep draws the underline, the
   photograph scales 1.04 - and a fourth channel would be the same mistake the
   old --haze-to--mist fill was making. This is structure, not feedback. */
.pcard-media,
.ins-lead-media,
.ins-art-media,
.hub-row-media{
  box-shadow:var(--e-media);
}
.hub-lead .pcard-media{box-shadow:none}

/* The radius the card used to own. overflow:hidden was on .pcard before, doing
   double duty as the clip for this image; with no fill above it there is
   nothing to round, so both properties belong here. */
.pcard-media{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:16/10;
}
.pcard-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--pz,1)) translate(var(--ptx,0%),var(--pty,0%));
  transition:transform 600ms cubic-bezier(.2,.7,.3,1);
}
.pcard:hover .pcard-media img{
  transform:scale(calc(var(--pz,1) * 1.04)) translate(var(--ptx,0%),var(--pty,0%));
}

/* The scrim, and only the scrim. Bottom-up, so the market label has a ground at
   any crop and the top three quarters of the image are left alone. */
.pcard-tint{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 52%);
}

/* The market, set in the mono face the site keeps for coordinates and offsets.
   It is a label on a map, not a caption on a photograph. */
.pcard-place{
  position:absolute;left:var(--s5);bottom:var(--s4);
  color:var(--white);font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* THE CARD IS A QUERY CONTAINER, and this is the fix for a class of bug that
   viewport media queries could not see.

   The eyebrow's fit depends on how wide THE CARD is, and card width does not
   track viewport width: .ins-grid is auto-fill minmax(380px,1fr), so a card is
   ~700px in a single column at 768, ~384px in two columns at 840, ~381px in
   three at 1240 and ~435px at 1600. The narrowest cards on the whole site are
   at the two column-transition bands, NOT at the narrowest viewport.

   That is exactly where the eyebrow was breaking. A case study's
   "Mumbai • Case study · PR & public affairs" needs about 350px and gets 333px
   at those bands, so it wrapped, pushed its own title and dek down, and left
   nine or ten rows in the grid misaligned - while 1180 and 1600 measured clean,
   which is why a viewport sweep missed it twice.

   The rules below ask the question the layout actually poses: is THIS CARD
   narrow. They replace a viewport rule at 520 that was a proxy for the same
   thing and got the transition bands wrong. */
.pcard{container-type:inline-size}
/* Top padding only. The side and bottom padding existed to hold the type off
   the fill's edges; with no fill they were holding it off nothing, and the
   48px they cost the measure is the whole point of the change above. --s5 at
   the top is the gap between the picture and the eyebrow, not padding. */
.pcard-body{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5) 0 0;flex:1}
/* THE EYEBROW CARRIES TWO FACTS, market then discipline, and they are the same
   two the filter bar cuts on - so the first line of a card names exactly the
   axes the controls above it offer. It used to carry only the discipline, and
   the market was a white label sitting on the photograph.

   WHY THE MARKET CAME OFF THE PICTURE. It was the only thing on the card that
   needed the artwork to cooperate. Over a photograph it needed .pcard-tint
   painted underneath it; when the members' own blog images arrived - light UI
   collages, awards graphics with their own type - a bottom-up scrim stopped
   being enough, and every fix (scrim, shelf, chip) cost something off a picture
   we do not control. In the eyebrow it costs nothing and cannot collide with
   anything, and the image is left completely alone.

   The market is set quieter than the discipline rather than larger. It is
   context for the headline, not a heading of its own, and two words at equal
   weight either side of a slash read as a breadcrumb the card does not have. */
.pcard-kicker{
  color:var(--gray);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
}
.pcard-market{color:var(--ash)}

/* A DRAWN CIRCLE, and there are two reasons it is not the typographic "·" the
   byline and the footer use.

   ONE, IT MARKS A DIFFERENT LEVEL. A case study's eyebrow already reads
   "<market> ... Case study · <discipline>", so a middot here would put the same
   glyph on two different joins in one line - the split between place and
   everything else, and the split inside that group. The circle takes the outer
   join and the middot keeps the inner one, so the line has a structure rather
   than three equal parts. The case half is set in its own colour, which does
   the same work from the other direction.

   TWO, 11px UPPERCASE IS WHERE FONT PUNCTUATION GETS UNRELIABLE. A middot is
   sized and positioned by the face; at this size it lands high, reads thin, and
   changes if the webfont ever falls back. Drawing it fixes the diameter at 3px
   and the optical centre at .28em, which is stable whatever loads.

   It replaced a "/" that was a fourth separator style on a site that already
   had one. */
.pcard-market::after{
  content:"";
  display:inline-block;
  width:3px;height:3px;border-radius:50%;
  background:var(--ash);
  /* Optical, not geometric: .28em sits it on the middle of a cap-height line,
     where a baseline-aligned box would sit under it. */
  vertical-align:.28em;
  margin:0 .62em 0 .68em;
  /* The eyebrow is tracked .14em and that space is applied AFTER this box,
     pushing it right of centre between the two words. Zeroing it here keeps
     the margins above symmetrical. */
  letter-spacing:0;
}

/* NARROW CARD: the eyebrow stacks, market over discipline.

   400px is measured. The longest eyebrow - a case study, which carries a third
   part - needs about 350px of box; a card gives its body 48px of padding, so
   the eyebrow has the card width less 48. It fits at a 408px card and wraps at
   381. 400 sits between them with the wrap on the correct side.

   Stacked rather than tightened: easing the tracking recovers roughly 26px and
   the shortfall is 27, which is not a margin worth shipping. Two deliberate
   lines beat one line that wraps on some cards and not others - that raggedness
   was the original defect, not the height.

   The circle goes with it. It separates two things on one line, and stacked
   there is nothing left to separate: a dot hanging off the end of "Mumbai" with
   the next line beneath it is punctuation pointing at nothing. content:none
   removes the box rather than hiding it. */
@container (max-width:400px){
  .pcard-market{display:block}
  .pcard-market::after{content:none}
  /* .14em is generous for 11px uppercase and the card no longer has the width
     to spend on it. Desktop cards are untouched. */
  .pcard-kicker{letter-spacing:.08em}
}

.pcard-t{
  color:var(--black);font-size:20px;font-weight:500;line-height:27px;
  text-wrap:balance;
  /* Three is the ceiling everywhere. A four-line headline exists at the
     narrowest widths and stops being a headline. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color 180ms ease-in-out;
}

/* TWO LINES, AND TWO LINES RESERVED - but only once there is a neighbour to
   line up with. The clamp stops a long headline running to three; the
   min-height stops a short one collapsing to one, and it is the second half
   that actually fixes the grid: with titles free to be 1, 2 or 3 lines the deks
   in a row started at three different heights and the row read as three cards
   laid out separately.

   840px IS MEASURED, NOT GUESSED. .ins-grid is auto-fill minmax(380px,1fr), so
   it holds one column until 840 and the reserve below that would be padding a
   card against nothing - at 768 it added a blank line under 69 of 85 titles
   for no alignment gain at all. Two columns arrive at 840, three at 1240.

   WHAT IT COSTS, measured across 85 cards rather than assumed, because a clamp
   on a headline is a real cost and most of these headlines are not ours to
   shorten: at three columns 62 titles already sat on two lines and 13 ran to
   three, so this cuts 13. At two columns it cuts one. Below 840 it cuts none.

   WHY NOT THREE, which would cut nothing: three lines of 20px is 81px of
   headline over a 15px dek and the card stops having a hierarchy. The 13 that
   truncate are the ones whose authors wrote past a card - "AsiaWorks Mops Up
   with Mastercard at Asia's Leading Marketing, Advertising, PR and
   Communications Awards" fits no card at any size, and an ellipsis is more
   honest about that than a third line that still does not finish it.

   text-wrap:balance stays and earns its place here: with two lines fixed it
   evens them instead of leaving a one-word second line.

   THE min-height RESERVE THAT STOOD HERE IS GONE (2026-09-02). It held the
   title box at 54px whether the title used one line or two, so a one-line
   headline - "The SaaS Source - August 2026" is the one in the set - left 27px
   of empty box between itself and its dek. Beside two-line neighbours whose gap
   is 12px, it read as a card with something missing out of it.

   IT WAS NOT PAYING FOR ANYTHING. The reserve was there to keep a row of cards
   aligned, and .pcard-foot has had margin-top:auto the whole time, which
   already does that. Measured across the first six cards at 1440, reserve on
   against reserve off:

                        ON                OFF
     title box          54                27   (the one-line card)
     title -> dek       12 + 27 of hole   12
     dek -> foot        12                39
     foot top           471               471   <- identical on every card
     card height        520               520

   Nothing moves except WHERE the slack sits. With the reserve it opened a hole
   inside the type block; without it the same 27px pools above the foot, where a
   card is supposed to breathe.

   WHAT IS ACTUALLY LOST: the deks no longer start on a common line across a row
   (363 against 390 on that card). That is the weakest of the alignments this
   row has - the pictures, the eyebrows and the feet all still line up, and a
   headline and its standfirst reading as one block is worth more than a fourth
   horizontal rule nobody was looking for.

   .hub-row-t KEEPS ITS RESERVE and that is not an inconsistency: a hub row has
   no foot, so nothing else is holding its rows level. The note beside it in
   content-hub.css says so. */
@media (min-width:840px){
  .pcard-t{-webkit-line-clamp:2}
}
.pcard:hover .pcard-t{color:var(--blue-deep)}
/* The card's title underline, .u-sweep from base.css, wrapped around the text
   in postCardHTML. Triggered by the CARD rather than by the span, because the
   hover target is the whole card. :focus-visible rides with it, as it does on
   the card's own lift above. */
.pcard:hover .u-sweep,
.pcard:focus-visible .u-sweep{background-size:100% var(--u-h);background-position:0 100%}
/* A MEASURE FOR WHEN THE GRID STOPS BEING ONE. .ins-grid is three 384px columns
   at 1280 and the column IS the measure - the dek runs about 51 characters and
   needs no help. At 768 and 834 the grid collapses to a single track and the
   card becomes a 720-786px row, where the same dek measured 96 and 105
   characters. writing.css caps the same element for the same reason on
   profile-v2 - see its note on body.pf-v .mp-writing .pcard-dek - and 52ch is
   the figure both now use.

   52 AND NOT 76, WHICH IS WHERE THIS FIRST LANDED. `ch` is the advance of the
   "0" glyph, and this font's zero is wide: 10.32px at 15px type against a
   ~7.5px average advance for running lowercase. So 1ch buys about 1.4
   characters of prose, and a 76ch cap was still letting the line run to 105
   characters - it read as a fix and measured as almost none. 52ch is ~72
   characters. Measure the result, not the unit. A no-op in the three-up grid,
   so it costs the desktop layout nothing. */
.pcard-dek{
  max-width:52ch;
  color:var(--gray);font-size:15px;line-height:23px;
  /* Three lines, then it stops. The deks run to different lengths and a ragged
     row of card feet is the one thing a grid of twelve cannot hide. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard-foot{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line);
}
.pcard-by{color:var(--slate);font-size:13px;font-weight:500}
.pcard-meta{
  margin-left:auto;color:var(--ash);font-size:12px;white-space:nowrap;
}
/* The logo tile is white (base.css, .tile:has(.logoimg)) and the card is now
   white too, so the mark reads as the mark rather than as a framed thumbnail -
   which is what the note beside that rule in base.css always said it wanted.
   The card's grey was the thing making it a frame. */
.pcard .tile{flex:none}

@media (max-width:520px){
  .ins-grid{grid-template-columns:1fr}
  .pcard-meta{margin-left:0;width:100%}

  /* The eyebrow's narrow-card treatment is a @container rule now, up beside
     .pcard-market - card width, not viewport width, is what decides whether it
     fits. See the note there. */
}

/* Wide variant: used by the hub band's lead only. */
.pcard-wide .pcard-media{aspect-ratio:16/9}


/* --- show more ----------------------------------------------------------- */
.ins-more-row{display:flex;justify-content:center;margin-top:var(--s10)}
/* Hidden rather than disabled when the set is exhausted: a permanently greyed
   button at the foot of a page reads as something broken. */
.ins-more-row .btn[hidden]{display:none}


/* ==========================================================================
   06. The listing's closer
   It is base.css's .closer, not a copy of it. The grey box, the radius, the
   padding, the centring and the deck's measure all arrive from the one
   declaration index.html's closer already uses, so the two conversion moments
   on this site cannot drift apart. Three things differ and only three:

   1. The band needs its own top padding. base.css sets .closer .wrap's to zero
      because on index.html the directory's own 48px is the single gap above the
      box; here the section above is the grid, and its padding-bottom is doing
      the same job - so this is a no-op that is written down rather than left to
      be rediscovered.
   2. A longer headline. base.css caps .closer h2 at 16ch for "Eleven agencies.
      One conversation."; this one is a sentence and 16ch stacks it seven lines
      deep.
   3. Two actions instead of one, so they need a row.

   NO PALE GROUND. It had one and it was wrong for a reason base.css already
   states at .closer-box: the metrics band is the site's single branded surface
   and a second tinted block halves its weight.
   ========================================================================== */

.ins-closer h2{max-width:26ch}

/* The buttons are siblings in a row, so base.css's .closer .btn margin would
   apply to both and push the row twice. The gap moves to the row.

   --s8, MATCHING base.css's .closer .btn EXACTLY. It was --s7, which meant the
   gap above a closer's action was 28px when the actions were a row and 32px when
   there was one button - two values for one measurement, decided in two sheets,
   and neither of them wrong on its own. base.css argues its 32 out loud beside
   the rule ("a larger button needs the gap above it to grow"); this had no
   argument, so this is the one that moved.

   IT IS ALSO WHY THIS ROW IS WORTH WEARING FOR A SINGLE BUTTON. A bare
   inline-block pill sits in an anonymous line box and carries the strut's
   descender under it - about 7px of space that belongs to no rule and answers to
   nothing. A flex container has no strut, so the gap under the button is the
   gap that was specified. tools.html's closer has one button and uses this. */
.closer-acts{
  display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap;
  margin-top:var(--s8);
}
.closer-acts .btn{margin-top:0}


/* ==========================================================================
   07. The reader
   ========================================================================== */

/* One hairline in the market's colour, pinned to the top of the viewport.
   Painted with a transform so the compositor owns it, and the script does not
   attach at all under prefers-reduced-motion.

   IT PINS AND THE HEADER DOES NOT, which is the opposite of where it started.
   It was a sibling below a sticky header and lost to it - both pinned to the
   same line and the header, at z-index 100 against its 99, hid it completely.
   Moving it inside the header fixed that by making it ride along. With the
   header no longer pinning, riding it would mean scrolling away after 90px,
   which is no use on an eight-minute note - so it is a sibling again, and this
   time it is the only thing at the top of the viewport and has nothing to lose
   to. The z-index is kept as insurance against a future neighbour, not because
   anything currently competes. */
.ins-progress{
  position:sticky;top:0;z-index:var(--z-header);
  height:2px;background:transparent;pointer-events:none;
}
.ins-progress span{
  display:block;height:100%;background:var(--ac,var(--purple));
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;
}
/* The reading bar is a child of the header now, so it needs no z-index of its
   own and no offset - see .ins-progress. */

.ins-article{--ac:var(--purple)}
.ins-article .wrap{padding-top:var(--s10);padding-bottom:var(--sec)}

/* THE READ IS NARROWER THAN THE PAGE, and this is the rule that decides how the
   whole article scans.

   1400 is the DIRECTORY's width - it exists so three 380px cards fit a row. A
   reader has one column of prose and one 320 aside, so at 1400 the title stopped
   at 20ch, the dek at 56ch and the body at 68ch while the container ran on for
   another 500px of nothing: the header looked pinned to the left edge of a page
   built for something else.

   1080 is measured backwards from the parts, not picked. 1080 - 48 of wrap
   padding = 1032 of content; minus the 320 aside and the 48 gutter leaves a 664
   body track, and .ins-art-body's 68ch measure lands at roughly 600 inside it.
   The prose now fills its track instead of floating in it, and the header's
   ragged right is an ordinary measure rather than a void.

   THE CONTAINER IS CENTRED, THE TEXT IS NOT. Centring the header itself would
   put the title on a different axis to the body column directly beneath it,
   which is the one alignment on this page a reader actually tracks.

   THE RELATED ROW IS NOT IN THIS LIST and is not even in this article any more.
   Its three cards need 3x380 + 2x24 = 1188 and would drop to two tracks at 1032,
   orphaning the third on a row of its own. It lives outside <article> as
   .ins-relband on its own surface - see the note there. */
.ins-crumb,
.ins-art-head,
.ins-art-media,
.ins-art-cols,
.ins-art-cta{max-width:1080px;margin-inline:auto}

.ins-crumb{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s8)}
.ins-crumb a{color:var(--gray);font-size:13px;font-weight:500;text-decoration:none}
.ins-crumb a:hover{color:var(--blue-deep)}
.ins-crumb span{color:var(--line)}

 /* The title is the display size, but capped by CHARACTERS rather than a pixel
   width, so a long one holds three lines instead of running the full 1400 and
   losing the reader between the end of one line and the start of the next. The
   header itself is uncapped - the dek wants a different measure to the title
   and capping their shared parent would give them the same one. */
.ins-art-t{font-size:clamp(34px,4.2vw,54px);font-weight:500;line-height:1.16;max-width:20ch}
.ins-art-dek{margin-top:var(--s5);max-width:56ch;color:var(--gray);font-size:20px;line-height:31px}

.ins-art-meta{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s8)}
.ins-art-by{display:flex;flex-direction:column;gap:2px}
.ins-art-by b{color:var(--black);font-size:16px;font-weight:500}
.ins-art-by span{color:var(--gray);font-size:14px}

.ins-art-media{
  position:relative;overflow:hidden;
  /* auto, not 0, on the inline axis: the shorthand is declared after the
     1080 centring rule above and would otherwise reset it. */
  margin:var(--s10) auto var(--s12);
  border-radius:var(--r-lg);aspect-ratio:21/9;
}
.ins-art-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--pz,1)) translate(var(--ptx,0%),var(--pty,0%))}
.ins-art-media .pcard-place{left:var(--s8);bottom:var(--s6);font-size:13px}

/* The column and the aside. 1080 is measured, not chosen: the body column wants
   about 68ch to hold the line length the type is set for, and the aside wants
   320 plus a 48 gutter, which is the width at which the two stop fitting. */
.ins-art-cols{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s12);
  align-items:start;
}
@media (max-width:1080px){
  .ins-art-cols{grid-template-columns:1fr;gap:var(--s10)}
}

.ins-art-body{max-width:68ch}
.ins-art-body p{margin-bottom:var(--s6);color:var(--slate);font-size:18px;line-height:31px}
.ins-h2{
  margin:var(--s12) 0 var(--s5);
  font-size:26px;font-weight:500;line-height:34px;
}
.ins-art-body > .ins-h2:first-child{margin-top:0}

.ins-list{margin:0 0 var(--s6);padding-left:0;list-style:none}
.ins-list li{
  position:relative;padding-left:var(--s7);margin-bottom:var(--s4);
  color:var(--slate);font-size:18px;line-height:29px;
}
/* A rule, not a bullet. The list items here are statements rather than items in
   a set, and a short coloured rule marks them without turning the paragraph
   into a shopping list. */
.ins-list li::before{
  content:"";position:absolute;left:0;top:13px;
  width:16px;height:2px;background:var(--ac);
}

/* A TINTED PANEL, NOT A RULE. The pull quote was a 3px --ac border-left with the
   text hung off it, which is the default every CMS ships and which does two
   things badly here: on a 600px measure the rule reads as a nested list marker
   rather than a change of voice - .ins-list li::before is already a short --ac
   rule three paragraphs up - and it gives the quote no ground of its own, so a
   three-line quote sits at exactly the weight of the body copy beside it.

   The tint is mixed FROM --ac rather than taken from --pale, because --ac is the
   market's colour and changes per article; --pale is purple and would be the
   wrong hue on every non-purple market. 6% is the strength at which the panel is
   visible against --surface and still lets --black hold its contrast - anything
   past about 10 and the quote starts competing with the 21:9 plate above it.
   --haze first as the fallback ground: neutral, so a browser without color-mix
   gets a quiet grey panel rather than a wrong-coloured one.

   The inline padding is --s8, one step wider than the block padding, so the
   quote's measure sits inside the paragraphs' measure and the indent does the
   work the border used to. */
.ins-quote{
  margin:var(--s10) 0;
  padding:var(--s7) var(--s8);
  background:var(--haze);
  background:color-mix(in srgb,var(--ac) 6%,var(--surface));
  border-radius:var(--r-lg);
}
.ins-quote blockquote{
  margin:0;color:var(--black);font-size:22px;font-weight:400;line-height:34px;
}
.ins-quote figcaption{
  margin-top:var(--s4);color:var(--gray);font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
}

.ins-art-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s10)}

/* --- the aside ----------------------------------------------------------- */
.ins-art-aside{position:sticky;top:calc(var(--s14) + var(--s6))}
@media (max-width:1080px){
  .ins-art-aside{position:static}
}
.ins-aside-card{
  background:var(--haze);border-radius:var(--r-lg);padding:var(--s6);
}
.ins-aside-id{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:var(--s4);align-items:center;
  margin-top:var(--s4);text-decoration:none;
}
.ins-aside-id .tile{grid-row:1 / span 2}
.ins-aside-id b{color:var(--black);font-size:17px;font-weight:500;line-height:23px}
.ins-aside-id span{color:var(--gray);font-size:14px}
.ins-aside-id:hover b{color:var(--blue-deep)}
.ins-aside-p{margin-top:var(--s4);color:var(--gray);font-size:15px;line-height:23px}
.ins-aside-acts{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s6)}
.ins-aside-acts .btn{text-align:center}
/* .ins-aside-note is gone with the markup that used it - the product line it
   styled now closes the article. See the comment in insights-article.js. */

/* AT 1080 THE ASIDE STOPS BEING AN ASIDE. .ins-art-cols collapses to one column
   here, so the sticky card unpins and lands directly above the closer - two
   boxes, one under the other, carrying the identical primary button. The card
   keeps its identity block and its profile link, which is all it is doing at
   this width; the ask belongs to the closer eight pixels below it. */
@media (max-width:1080px){
  .ins-aside-acts .btn-primary{display:none}
}

/* --- the closer ----------------------------------------------------------

   DARK, and that is the only reason it works this far down the page. The read
   above it is white, the aside card is --haze and the pull quote is a 6% --ac
   tint - a fourth light panel would be the weakest thing on screen at the exact
   point the page is asking for something. --ink gives it the weight, and the
   related row underneath keeps it from touching the dark footer, so the page
   reads light / dark / light / dark rather than closing on one long slab.

   --sec-sm block padding, not --sec: this belongs to the article it closes, and
   the section scale's own note says that is what --sec-sm is for. */
.ins-art-cta{
  margin-top:var(--s14);
  padding:var(--sec-sm) var(--s10);
  background:var(--ink);border-radius:var(--r-lg);
}
.ins-art-cta h2{color:var(--white);max-width:20ch;text-wrap:balance}
.ins-cta-p{
  margin-top:var(--s5);max-width:52ch;
  color:var(--lavender);font-size:17px;line-height:27px;
}
.ins-cta-acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
@media (max-width:600px){
  .ins-art-cta{padding:var(--sec-sm) var(--s6)}
  .ins-cta-acts .btn{flex:1 1 100%;text-align:center}
}

/* --- related -------------------------------------------------------------

   A BAND, NOT THE LAST BLOCK OF THE ARTICLE. It used to be a hairline border-top
   inside the article at the full 1400 while everything above it was centred at
   1080, on the same white ground - so the two edges missed each other by 160px a
   side and it read as a misalignment rather than a wider section.

   The width itself is not negotiable and that is worth stating, because the
   obvious fix is to squeeze the row into 1080 and it does not work: .ins-grid's
   380 floor is MEASURED - the card foot needs 356 to hold the longest byline in
   the set beside the date, and three tracks plus two 24 gutters therefore need
   1188 of content. The reader has 1032. Three cards at 328 would wrap the foot
   on the long-name cards and not the short ones, which is the exact failure the
   note on .ins-grid was written about.

   So the band keeps 1400 and earns it with its own ground instead. --surface-alt
   against the article's --surface, which is the site's stated separator, and the
   hairline goes with it - base.css's note is explicit that a surface change
   makes a border redundant. The page now closes white read / dark closer /
   offwhite band / dark footer.

   THE PANEL INVERSION IS GONE WITH THE FILL. This band used to re-fill .pcard
   to --white so the card still separated from the alt ground it sits on; an
   unfilled card has nothing to invert, and it now takes the band's colour the
   way body copy does. One rule fewer, and the band reads as one surface with
   pictures on it. */
.ins-relband{background:var(--surface-alt);padding:var(--sec) 0}
.ins-relband h2{margin-bottom:var(--s7)}

/* --- not found -----------------------------------------------------------
   A 404 is the one state on these pages with no content to push the footer
   down, so the page has to do it itself: body becomes a column, main takes
   the slack, and the footer sits on the fold instead of floating mid-screen.
   js/case.js and js/insights-article.js add .is-404 when they render this
   state; 404.html carries it in the markup, because there it is the whole
   point of the file and a class arriving after first paint would let the
   footer land mid-screen for a frame. */
.ins-404{max-width:48ch;margin:var(--s14) auto;padding:0 var(--s6);text-align:center}
.ins-404 .eyebrow{margin-bottom:var(--s4)}
.ins-404 .lede{margin:var(--s5) 0 var(--s8)}

body.is-404{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
/* padding, not margin on the block: main centres its child, so margin only
   fights the centring. The padding is a floor - when the viewport is tall the
   block still sits in the middle of the gap, and when it is short the button
   stops short of the footer's purple edge instead of kissing it.

   --sec, NOT a component-scale token. This main is a full-bleed section in
   every way that matters and base.css states the rule for those: block padding
   comes from --sec-sm/--sec/--sec-lg and nowhere else. It was var(--s8), a flat
   32px lifted off the 4px COMPONENT scale, which is the drift that tier exists
   to stop - and 32px is what made this read tight. --sec is 56px on a phone and
   96px from 1455px up, fluid the whole way, so this needs no breakpoint of its
   own. The floor doubles as the reason it is padding: at 56px a short viewport
   still clears the footer's purple edge. */
body.is-404 > main{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;
  padding-block:var(--sec);
}
body.is-404 > main > .ins-relband{display:none}
body.is-404 .ins-progress{display:none}
/* main centres it, so the block's own vertical margin only fights the
   centring and pushes the tall footer off the fold. */
body.is-404 .ins-404{margin-block:0}
body.is-404 .site-footer{flex:0 0 auto}


/* ==========================================================================
   08. Motion contract
   The same one both existing pages keep: everything above is a transition or a
   transform, and every one of them is cancelled here rather than being made
   shorter. The reading bar's script checks the same query and does not attach.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .ins *,.ins *::before,.ins *::after{
    transition-duration:1ms!important;
    animation-duration:1ms!important;
  }
  .pcard:hover,.ins-lead:hover{transform:none}
  /* transform:none would have thrown the frame away along with the hover zoom.
     The crop is not motion; only the 1.04 on top of it is. */
  .pcard:hover .pcard-media img,
  .ins-lead:hover .ins-lead-media img{transform:scale(var(--pz,1)) translate(var(--ptx,0%),var(--pty,0%))}
  /* The bloom stays. It is a colour change with no movement in it, which is what
     this query asks to keep rather than remove - and dropping it would leave
     these cards with no hover feedback at all once the scale is gone. */
}


/* ==========================================================================
   CASE STUDIES IN THE FEED
   Added when case studies joined the notes listing. One rule: the kicker says
   which of the two kinds of thing the card is, because the card is otherwise
   deliberately identical - same photo, same tint, same city, same byline. They
   belong in one grid, and the reader still has to be able to tell analysis from
   client work before clicking rather than after.

   NOT the card's own --ac. Every other element on the card is tinted by the
   member's city colour, so a label tinted the same way would read as more of
   that and disappear. One colour, the same on all 26, is what makes it a
   category rather than a decoration.

   --blue-deep SINCE 2026-09-02, replacing --d-b2b. The teal was borrowed from
   the B2B & market entry discipline, which put it one interpunct away from the
   discipline name it sits beside - a category label wearing another category's
   colour. The two blues already in the palette were both ruled out for the same
   kind of collision: --d-digital IS a discipline colour, and --globe-apac
   belongs to the map. --blue-deep is the site's own blue and means nothing
   else on a card.

   IT IS ALSO THE INTERACTIVE COLOUR, and that is a deliberate acceptance
   rather than an oversight. The whole card is one <a>, so blue inside it is not
   a false affordance - but this label does not shift on hover the way the title
   does, so at rest the eyebrow is already sitting at the colour the title only
   reaches when pointed at. It reads as a category, not as a second link,
   because it is 11px/600 uppercase with .14em tracking and no underline; the
   title is 20px sentence case and grows one. If that ever stops being true the
   fix is to give this label its own resting step, not to move the title.

   IT ALSO FIXES A CONTRAST FAILURE nobody had logged. Measured on #FFFFFF:

     --d-b2b   #14897A   4.30:1   the outgoing teal, BELOW the 4.5 floor
     --blue    #0B5FFF   5.13:1   passes, but thin for 11px uppercase
     --blue-deep #0040C4 8.30:1   what shipped

   On the related band's --surface-alt ground the teal was 4.08:1, so the label
   was failing on both surfaces it appears on. --blue-deep clears it at 7.89:1
   there. The base --blue was rejected on the same measurement: 4.88:1 on the
   alt ground is a pass on paper and thin in practice at this size and weight.
   ========================================================================== */
.pcard-kicker-case{color:var(--blue-deep);font-weight:600}