/* ==========================================================================
   spear-custom.css - overrides layered on top of the Webflow export.
   Loaded LAST in <head> (see BaseHead.astro) so these rules win.
   Implements the brand-charter design feedback (spear-lu-website-changes.md §2).
   ========================================================================== */

:root {
  /* Vivid brand-charter accent used for keyword emphasis + active states.
     The export used --accent-1 (#3d3385), which the review flagged as too
     subtle; this brighter indigo (already present in the export) reads clearly
     against both light and dark headings. (§2.1, §2.2) */
  --spear-accent: #424bd1;
  --spear-accent-2: #dd006b; /* magenta, for variety on icons/stats */
  --spear-accent-3: #2895f7; /* bright blue, for variety on stats */
}

/* --- §2.2 Keyword color emphasis -----------------------------------------
   Recolor the inline emphasis spans to the vivid accent, consistently
   sitewide. Excludes .text-span-inside-h2 (the stats label). */
.text-span,
.text-span-2,
.text-span-3,
.text-span-4,
.text-span-5,
.text-span-6,
.text-span-7,
.span-accent-1 {
  color: var(--spear-accent);
}
/* No brightened variant for `.section.dark`. Despite the name, that class
   paints var(--background) (#f9f9f9), a light warm grey, not a dark ground,
   so the vivid accent above applies there like everywhere else, and keyword
   emphasis is one colour sitewide. Do not re-add a `.section.dark` override:
   the brightened #7b85f0 it used to carry scores 2.9:1 on #f9f9f9, under the
   AA floor, while --spear-accent scores 6.3:1. */

/* --- "What we do" dropdown: image left, text right (2026-09-21) -----------
   Two doors only (the export hardcodes three columns). Each door is a row: a
   small key visual, then the label with its one-line descriptor beside it.
   The image spans both text rows of a two-column grid, so no markup change.
   The export's small-screen rule stacks the doors in one column and the row
   layout holds there too. */
.drodpdown-grid-pages {
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 24px;
}

.dropdown-link-pages {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  text-align: left;
  transition: background-color .2s;
}

.dropdown-link-pages:hover,
.dropdown-link-pages:focus-visible {
  background-color: var(--background);
}

.dropdown-link-pages .image-homepage-dropdown {
  grid-row: 1 / 3;
  width: 96px;
  height: 64px;
  object-fit: cover;
  margin-bottom: 0;
  border-radius: 8px;
}

.dropdown-link-pages .dropdown-link {
  align-self: end;
  font-weight: 700;
}

.dropdown-link-pages .dropdown-link + .dropdown-link {
  align-self: start;
  font-size: 14px;
  font-weight: 400;
  color: var(--dim-grey);
}

@media screen and (max-width: 991px) {
  /* The export stacks the doors in one column below 992px; keep that, since two
     image-left rows do not fit side by side on a phone. */
  .drodpdown-grid-pages {
    grid-template-columns: 1fr;
    grid-row-gap: 8px;
  }

  .dropdown-link-pages {
    display: grid;
    justify-items: start;
  }
}

/* --- Contact page photo band (2026-09-21) -----------------------------------
   The export's blue-and-orange fluid image was also the homepage hero's; the
   band now carries a pink-and-blue fluid macro from the photographer behind
   the Services and Studio visuals (Unsplash, Solen Feyissa, M28kfkBLK4g),
   pre-cropped to the band's 880x360 proportion at 2x. */
.image-contact-hero {
  background-image: url('../images/solen-feyissa-M28kfkBLK4g-unsplash.avif');
}

/* --- §2.1 Active nav-section highlight ------------------------------------
   Make the current rubric clearly visible: vivid colour, bolder weight, and
   an underline bar. Applies to top links, the CTA, and (via Navbar.astro)
   the Clients / Ressources dropdown toggles when on a matching page. */
.nav-link.w--current,
.dropdown-toggle-nav.section-active > div:first-child {
  color: var(--spear-accent);
  font-weight: 700;
}
.nav-link {
  position: relative;
}
.nav-link.w--current::after,
.dropdown-toggle-nav.section-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--spear-accent);
}
.dropdown-toggle-nav {
  position: relative;
}
.dropdown-toggle-nav.section-active::after {
  left: 0;
  right: 0;
  bottom: 6px;
}
/* The "Contact Us" CTA button keeps its solid style; just deepen it when active. */
.nav-cta.w--current {
  box-shadow: 0 0 0 2px var(--spear-accent);
}

/* --- Nav CTA responsive + bilingual fix --------------------------------------
   The Webflow grid pinned the right column to a fixed 200px, which the longer
   French label ("Nous contacter") + the EN/FR toggle overflow, wrapping the CTA.
   Keep the label on one line, and on desktop let the grid flex with a centered
   menu so either language fits. */
.nav-cta {
  white-space: nowrap;
}
@media screen and (min-width: 992px) {
  .navbar-grid {
    grid-template-columns: 1fr auto 1fr;
  }
}

/* Whenever the nav is collapsed (hamburger mode, <=991px), the top bar is too
   narrow to hold the lang toggle + CTA + hamburger in either language, so we
   hide the top-bar CTA and surface Contact inside the hamburger menu instead.
   Desktop (>=992px) keeps the top-bar button. */
.nav-menu-cta {
  display: none;
}
@media screen and (max-width: 991px) {
  .nav-cta {
    display: none;
  }
  .nav-menu-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    padding: 14px 20px;
    background-color: #424bd10d;
    color: var(--spear-accent);
    font-family: Satoshi, sans-serif;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-menu-cta:hover,
  .nav-menu-cta.w--current {
    background-color: #424bd133;
  }
}

/* --- Language toggle -------------------------------------------------------
   Redesign of the locale picker: a one-click inline EN/FR switch (no dropdown).
   The active locale uses the same vivid-indigo + 2px underline treatment as the
   active nav rubric, for a single coherent wayfinding language. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-right: 20px; /* separate the locale switch from the Contact CTA */
}
.lang-toggle .lang-opt {
  position: relative;
  padding-bottom: 4px;
  font-family: Satoshi, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #8e8e8f; /* text-subtle */
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-toggle .lang-opt:hover {
  color: var(--ink, #282943);
}
.lang-toggle .lang-opt.is-active {
  color: var(--spear-accent);
  font-weight: 700;
  cursor: default;
}
.lang-toggle .lang-opt.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--spear-accent);
}
.lang-toggle .lang-opt:focus-visible {
  outline: 2px solid var(--spear-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- §2.5 Stats figures in brand colours (home, [p.4]) --------------------
   Colour each figure differently; the label span keeps its own colour. */
.number-wrap > .number-tile:nth-child(1) h2 { color: var(--spear-accent); }
.number-wrap > .number-tile:nth-child(2) h2 { color: var(--spear-accent-2); }
.number-wrap > .number-tile:nth-child(3) h2 { color: var(--spear-accent-3); }
.number-wrap > .number-tile:nth-child(4) h2 { color: #3d3385; }

/* --- §2.4 Client-logo treatment -------------------------------------------
   Show logos in their own colours (drop the grayscale + opacity) and enlarge
   them. Applies to the home strip, the About strip and the SaaS page. */
.logo-image {
  filter: none;
  opacity: 1;
  height: 76px;
}

/* --- §2.4 / §3.7 Scrolling, repeating logo marquee (home strip) -----------
   The track is duplicated in LogoStrip.astro; animate it for a seamless loop
   that implies "more" clients. */
.logos-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 64px;
  animation: spear-logo-scroll 32s linear infinite;
}
.logos-marquee:hover .logos-marquee-track {
  animation-play-state: paused;
}
.logos-marquee-track .logo-image {
  flex: 0 0 auto;
}
/* Client badges: one height for every logo, whatever its proportions. White
   is the system's card surface on the warm-grey canvas; the hairline gives it
   an edge there without a shadow at rest. Ink, the dark-section colour, backs
   logos drawn in white. A "fill" logo brings its own background and covers
   the badge. */
.logos-marquee-track:has(.client-badge) {
  gap: 24px;
  padding-block: 4px;
}
.client-badge {
  --badge: 88px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--badge);
  overflow: hidden;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #2829431a;
}
.client-badge.is-round { width: var(--badge); }
.client-badge.is-pill { width: calc(var(--badge) * 2.4); }
.client-badge.is-dark {
  background-color: var(--midnight-blue);
  box-shadow: none;
}
.client-badge-logo {
  display: block;
  object-fit: contain;
}
/* Each box stays inside its badge's curve at the corners. */
.client-badge.is-round .client-badge-logo {
  width: 78%;
  height: 60%;
}
.client-badge.is-pill .client-badge-logo {
  width: 72%;
  height: 60%;
}
.client-badge.is-fill .client-badge-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .client-badge { --badge: 68px; }
  .logos-marquee-track:has(.client-badge) { gap: 16px; }
}
@keyframes spear-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* track holds two copies → -50% loops seamlessly */
}
@media (prefers-reduced-motion: reduce) {
  .logos-marquee-track { animation: none; }
}

/* --- Success-story card hover ---------------------------------------------
   Flat at rest per the system; on hover (or keyboard focus) the image tile
   lifts with the Floating shadow, the photo eases a touch closer inside its
   clipped 18px wrap, and the title takes the brand indigo so the whole tile
   reads as one clickable unit. Transforms are gated for reduced motion. */
.blog-card .blog-image-wrap {
  transition:
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card .image-cover {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card h3 {
  transition: color 0.2s ease;
}

.blog-card:hover .blog-image-wrap,
.blog-card:focus-visible .blog-image-wrap {
  transform: translateY(-4px);
  box-shadow: 19px 9px 54px #0000000f;
}

.blog-card:hover .image-cover,
.blog-card:focus-visible .image-cover {
  transform: scale(1.04);
}

.blog-card:hover h3,
.blog-card:focus-visible h3 {
  color: #424bd1;
}

@media (prefers-reduced-motion: reduce) {
  .blog-card .blog-image-wrap,
  .blog-card .image-cover {
    transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .blog-card:hover .blog-image-wrap,
  .blog-card:focus-visible .blog-image-wrap,
  .blog-card:hover .image-cover,
  .blog-card:focus-visible .image-cover {
    transform: none;
  }
}

/* --- Home hero: static photo on a ::before layer ---------------------------
   The hero photo sits on a ::before layer and the dark overlays on ::after,
   so the overlays hold above the photo; children paint above both (negative
   z-index) and isolation keeps the stack inside the rounded, clipped
   container. (The Scroll-BG.svg pedestal went with the scroll-hint notch it
   sat behind.) The slow drift the layer was built for was removed on
   2026-09-21 at the client's request. */
.home-c-hero-container {
  isolation: isolate;
  background-image: none;
}

.home-c-hero-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  /* The same pink-and-blue fluid macro as the contact band (Unsplash, Solen
     Feyissa, M28kfkBLK4g), cut taller for the hero's proportions. WebP, not
     AVIF: an AVIF decodes but never painted on this animated pseudo-element in
     Chrome (verified 2026-09-21), while the contact band's AVIF is fine. */
  background-image: url('../images/solen-feyissa-M28kfkBLK4g-unsplash-wide.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-c-hero-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(#0000001a, #0000001a), radial-gradient(circle farthest-side, #000000bf, #fff0 52%);
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
}

/* The hero card wears the .cta stacked lift permanently instead of on hover, so
   the page opens on the same Deep Indigo shadow ramp the buttons echo. Shadow
   only - no transform: the card is margin-centred, and translating it would pull
   it off axis for no visual gain (with nothing to compare against, the stack
   alone already reads as "lifted").
   Gated to >=992px. The card is width:96%, so its side margin is 2% of the
   viewport: ~20px at 992px, against the 15px the shadow reaches right. Below
   that the margin drops under the shadow and the page gains a horizontal
   scrollbar, so small screens keep the flat card. */
@media (min-width: 992px) {
  .home-c-hero-container {
    box-shadow:
      5px 5px var(--cta-shadow-1),
      10px 10px var(--cta-shadow-2),
      15px 15px var(--cta-shadow-3);
  }

  /* 24px of section padding + the 15px the shadow hangs below the card. */
  .section.home-c-hero {
    padding-bottom: 39px;
  }
}

/* --- CMS offline placeholders ----------------------------------------------
   When Strapi is unreachable at build time (lib/strapi.ts isStrapiOnline),
   CMS-driven visuals render as neutral shapes inside their normal wrappers so
   pages keep their layout and rhythm. Static fill, no shimmer (restraint).
   The production builder sets STRAPI_REQUIRED=1, so these never go live. */
.cms-shape {
  background: rgba(40, 41, 67, 0.08); /* --midnight-blue at 8% */
  border-radius: 12px;
  flex: none;
}
.cms-shape-logo { width: 150px; height: 56px; }               /* .logo-image */
.cms-shape-icon { width: 45px; height: 45px; border-radius: 10px; }  /* .business-card-logo-image */
.cms-shape-icon-lg { width: 64px; height: 64px; }              /* .marketing-logo-image */
.cms-shape-cover { position: absolute; inset: 0; border-radius: 0; } /* fills .blog-image-wrap */
.cms-shape-tile { width: 40px; height: 40px; border-radius: 8px; }   /* .logo-image-blog-tile */
.cms-shape-line { height: 14px; border-radius: 7px; margin-top: 8px; }
.cms-shape-line.title { height: 24px; border-radius: 12px; }
.cms-shape-line.short { width: 30%; }
.cms-shape-line.medium { width: 60%; }
.cms-shape-line.long { width: 80%; }
.cms-shape-line.full { width: 100%; }

/* ---------------------------------------------------------------------------
   Stacked-lift CTA - ported from a 21st.dev pattern (2026-09-15)
   Applies site-wide to every .cta: 3 form submits + 6 link CTAs.
   Ported to vanilla CSS rather than installed, because the source component is
   React + Tailwind + shadcn and this project is Astro with global Webflow CSS.
   Shadow stack is brand-mapped to the Deep Indigo ramp in .impeccable/design.json,
   not the snippet's arbitrary blues.
   --------------------------------------------------------------------------- */
:root {
  --cta-lift: 12px;
  --cta-shadow-1: #3d3385;
  --cta-shadow-2: #5c50b8;
  --cta-shadow-3: #8b81e0;
  --cta-border: #5c50b8;
}

.cta {
  position: relative;
  border-radius: 999px;
  border: 2px solid var(--cta-border);
  padding: 8px 24px;
  background-image: linear-gradient(to right, #2e2766, #4a3fa3);
  transition:
    background-color .2s,
    transform .3s cubic-bezier(.4, 0, .2, 1),
    box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

.cta:hover {
  transform: translate(calc(var(--cta-lift) * -1), calc(var(--cta-lift) * -1));
  box-shadow:
    5px 5px var(--cta-shadow-1),
    10px 10px var(--cta-shadow-2),
    15px 15px var(--cta-shadow-3);
}

/* WCAG 2.1 AA: the snippet ships no focus state. Matches ds-btn-primary. */
.cta:focus-visible {
  outline: 2px solid #424bd1;
  outline-offset: 2px;
}

/* Variants keep their own fills; they share only the shape and the lift. */
.cta.outline,
.cta.ghost,
.cta.white {
  background-image: none;
}

/* PRODUCT.md requires motion to be gated. */
@media (prefers-reduced-motion: reduce) {
  .cta {
    transition: background-color .2s;
  }

  .cta:hover {
    transform: none;
    box-shadow: none;
    background-color: #424bd1;
  }
}

/* Nav CTA adopts the pill radius from the button family, and nothing else.
   The 5% indigo wash, the weight and the hover stay exactly as they were, so the
   header button remains the quiet sibling of the page CTAs (see DESIGN.md,
   "Indigo Wash": presence without weight). Covers the desktop top-bar button and
   the same link surfaced inside the hamburger menu below 992px.
   The .w--current ring is a box-shadow, which follows border-radius automatically. */
.nav-cta,
.nav-menu-cta {
  border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   Stacking cards - homepage "whole life of your software" section (2026-09-15)
   Adapted from a 21st.dev stacking-card pattern. Ported to CSS rather than
   installed: the source is React + Tailwind + motion + lenis, and its ReactLenis
   root hijacks scrolling for the whole page, which would fight this site's
   existing scroll-reveal. position: sticky gives the same stacking read with no
   JS and no dependencies.
   Each card sticks 22px below the previous one, so the stack's top edges stay
   visible as later cards scroll over earlier ones. The hairline keeps card-on-card
   edges legible without a resting shadow (DESIGN.md: no shadow visible at rest).
   --------------------------------------------------------------------------- */
/* Full-bleed within the container: the heading now sits above the stack rather
   than beside it, so the cards use the whole content width instead of one column. */
.stacking-cards {
  max-width: none;
}

@media screen and (min-width: 992px) {
  .stacking-cards .sticky-business-card {
    position: sticky;
    border: 1px solid #2829430f;
  }

  /* Card-on-card separation. One hue, deepening down the stack, so the cards read
     as distinct surfaces without spending the indigo accent budget (DESIGN.md:
     the 10% Rule, and tint new neutrals toward indigo rather than pure grey).
     Card 1 stays on --background because its technology tiles are white. */
  .stacking-cards .sticky-business-card:nth-child(2) { background-color: #f1f2fa; }
  .stacking-cards .sticky-business-card:nth-child(3) { background-color: #e8ebf7; }
  .stacking-cards .sticky-business-card:nth-child(4) { background-color: #dde1f2; }
  .stacking-cards .sticky-business-card:nth-child(5) { background-color: #d2d7ee; }
  .stacking-cards .sticky-business-card:nth-child(6) { background-color: #c7cde9; }

  .stacking-cards .sticky-business-card:nth-child(1) { top: 110px; }
  .stacking-cards .sticky-business-card:nth-child(2) { top: 132px; }
  .stacking-cards .sticky-business-card:nth-child(3) { top: 154px; }
  .stacking-cards .sticky-business-card:nth-child(4) { top: 176px; }
  .stacking-cards .sticky-business-card:nth-child(5) { top: 198px; }
  .stacking-cards .sticky-business-card:nth-child(6) { top: 220px; }

  /* At full width a stacked image-over-text card reads as a wide banner, so the
     image moves beside the copy. DOM order stays image-first, which keeps the
     existing mobile layout untouched below this breakpoint. */
  .stacking-cards .sticky-business-card.has-image {
    grid-column-gap: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: stretch;
  }

  .stacking-cards .sticky-business-card.has-image .business-card-text {
    grid-area: 1 / 1;
    align-self: center;
  }

  .stacking-cards .sticky-business-card.has-image .business-card-image-wrap {
    grid-area: 1 / 2;
    min-height: 300px;
    margin-bottom: 0;
  }
}

/* PRODUCT.md requires motion to be gated: fall back to a plain scrolling list. */
@media (prefers-reduced-motion: reduce) {
  .stacking-cards .sticky-business-card {
    position: static;
  }
}

/* ---------------------------------------------------------------------------
   Bento stats - homepage proof numbers (2026-09-15)
   Follows the six-column, two-row bento pattern from 21st.dev "Stats Bento":
   one large accent tile plus three quiet tiles. Ported to CSS; the source is
   React + Tailwind + shadcn.
   Replaces a flat row of four tiles divided by 1px side borders, which
   DESIGN.md lists under don'ts (no side-stripe borders as a colour accent).
   --------------------------------------------------------------------------- */
.bento-stats {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-columns: 1fr;
  align-items: stretch;
  display: grid;
}

.bento-stats .number-tile {
  text-align: left;
  border: 1px solid #2829430f;
  border-radius: 24px;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  height: auto;
  min-height: 148px;
  padding: 32px;
  background-color: var(--background);
}

.bento-stats .number-tile h2 {
  margin: 0;
}

/* The §2.5 rule above colours each figure differently (indigo / magenta / blue).
   That scatters inside a bento whose hero tile is already a solid accent block,
   and it left the hero figure indigo-on-indigo. One treatment instead: white on
   the accent tile, deep indigo elsewhere. Specificity matches §2.5 deliberately. */
.bento-stats.number-wrap > .number-tile h2 {
  color: var(--accent-1);
}

.bento-stats.number-wrap > .bento-hero h2 {
  color: var(--white);
}

/* Single vivid tile, everything else quiet: emphasis through rarity. */
.bento-stats .bento-hero {
  background-color: var(--accent-1);
  border-color: #0000;
}

.bento-stats .bento-hero h2 {
  color: var(--white);
  font-size: 64px;
  line-height: 105%;
}

.bento-stats .bento-hero .text-span-inside-h2 {
  color: var(--white);
  font-size: 18px;
}

@media screen and (min-width: 768px) {
  .bento-stats {
    grid-template-columns: repeat(6, 1fr);
  }

  .bento-stats .bento-hero  { grid-area: 1 / 1 / 3 / 4; }
  .bento-stats .bento-wide  { grid-area: 1 / 4 / 2 / 7; }
  .bento-stats .bento-mid   { grid-area: 2 / 4 / 3 / 6; }
  .bento-stats .bento-small { grid-area: 2 / 6 / 3 / 7; }
}

/* ---------------------------------------------------------------------------
   Merged values + proof bento (2026-09-15)
   One section now carries the values heading and lead, then a single bento of
   the three pillars and the four proof numbers: the claims and their evidence
   side by side. Replaces the scrolling feature marquee, which moved and so
   could not actually be read, plus the standalone stats row.
   Surface treatment is borrowed from the CTA buttons, as requested: the same
   indigo gradient and border on the hero tile, and the same stacked-shadow lift
   on hover, at roughly half the travel since these tiles are large.
   --------------------------------------------------------------------------- */
.bento-merged .bento-hero {
  background-color: var(--accent-1);
  background-image: linear-gradient(to right, #2e2766, #4a3fa3);
  border: 2px solid var(--cta-border);
}

.bento-merged .bento-quote p {
  color: var(--midnight-blue);
}

/* The attributing name, quieter than the quote it signs. */
.bento-merged .bento-quote .blog-date {
  color: var(--midnight-blue);
  opacity: .7;
}

/* The figure tiles sit on one row, so centring them vertically lets an extra
   line of label push its number out of line with its neighbours. Align the row
   to the top instead: the figures share a baseline whatever the labels do. */
.bento-merged .bento-figure {
  justify-content: flex-start;
}

/* The bento's next step. Shorter than a stat tile and laid out as a row, so it
   reads as an invitation closing the grid rather than a sixth fact. */
.bento-merged .bento-cta {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding: 26px 32px;
  color: var(--accent-1);
  text-decoration: none;
}

.bento-merged .bento-cta .bento-cta-label {
  font-size: 22px;
  font-weight: 600;
  line-height: 130%;
}

.bento-merged .bento-cta .bento-cta-arrow {
  flex: none;
  font-size: 24px;
  line-height: 1;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.bento-merged .bento-cta:hover .bento-cta-arrow {
  transform: translateX(4px);
}

.bento-merged .bento-cta:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
}

@media screen and (min-width: 768px) {
  .bento-merged {
    grid-template-columns: repeat(6, 1fr);
  }

  .bento-merged .bento-hero  { grid-area: 1 / 1 / 3 / 4; }
  .bento-merged .bento-quote { grid-area: 1 / 4 / 3 / 7; }
  .bento-merged .bento-f1   { grid-area: 3 / 1 / 4 / 3; }
  .bento-merged .bento-f2   { grid-area: 3 / 3 / 4 / 5; }
  .bento-merged .bento-f3   { grid-area: 3 / 5 / 4 / 7; }
  .bento-merged .bento-cta  { grid-area: 4 / 1 / 5 / 7; }
}

/* Same lift as the buttons, halved: these tiles are large and there are six. */
.bento-merged .number-tile {
  transition:
    transform .3s cubic-bezier(.4, 0, .2, 1),
    box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

.bento-merged .number-tile:hover {
  transform: translate(-6px, -6px);
  box-shadow:
    3px 3px var(--cta-shadow-1),
    6px 6px var(--cta-shadow-2),
    9px 9px var(--cta-shadow-3);
}

/* The CTA wears the lift permanently, so it reads as a raised button rather
   than a sixth fact. Hover then travels further than the resting state, which
   is what keeps a click affordance on a tile that is already lifted. */
.bento-merged .bento-cta {
  transform: translate(-6px, -6px);
  box-shadow:
    3px 3px var(--cta-shadow-1),
    6px 6px var(--cta-shadow-2),
    9px 9px var(--cta-shadow-3);
}

.bento-merged .bento-cta:hover {
  transform: translate(-10px, -10px);
  box-shadow:
    5px 5px var(--cta-shadow-1),
    10px 10px var(--cta-shadow-2),
    15px 15px var(--cta-shadow-3);
}

@media (prefers-reduced-motion: reduce) {
  .bento-merged .number-tile {
    transition: none;
  }

  .bento-merged .number-tile:hover {
    transform: none;
    box-shadow: none;
  }

  .bento-merged .bento-cta,
  .bento-merged .bento-cta:hover {
    transform: translate(-6px, -6px);
    box-shadow:
      3px 3px var(--cta-shadow-1),
      6px 6px var(--cta-shadow-2),
      9px 9px var(--cta-shadow-3);
  }

  .bento-merged .bento-cta .bento-cta-arrow {
    transition: none;
  }

  .bento-merged .bento-cta:hover .bento-cta-arrow {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Made in Luxembourg label (footer)
   The newsletter block that used to sit opposite the brand in
   .footer-bottom-flex was removed (§5.1), leaving a space-between row with
   nothing on the right. The certification label fills that slot. Reusing
   .bottom-right-footer inherits the export's mobile rule, which stacks and
   centres the row below 768px.
   --------------------------------------------------------------------------- */
.made-in-lux-image {
  display: block;
  width: auto;
  height: 80px;
}

@media screen and (max-width: 767px) {
  .made-in-lux-image {
    height: 64px;
  }
}

/* ---------------------------------------------------------------------------
   Pillar pages: Services (2026-09-19) and Studio (2026-09-20)
   Shared section components in src/components/pillar/. One composition
   repeated: a sticky intro on the left, the content on the right ("two-column
   ledger"). The grid is the export's own .faq-grid-halves +
   .heading-wrap-faq-halves + .sticky-block, so only the section contents need
   rules here. Patterns ported from 21st.dev to CSS rather than installed (Astro
   + global Webflow CSS, no React): Editorial Hero (felipemenezes098/hero-05),
   Feature 197 accordion (shadcnblocks), Vertical How It Works Timeline
   (ln-dev7/how-it-works-02), Feature Comparison Table (7ovr/comparison-3),
   Bento Grid case study (shadcnblocks/casestudy-5), Two-Column FAQ
   (ln-dev7/faqs-02).
   Specs: the redesigns for Services and Studio.
   - docs/superpowers/specs/2026-09-19-services-corporate-redesign-design.md
   - docs/superpowers/specs/2026-09-20-studio-new-product-redesign-design.md
   Surfaces follow the export's convention: on a white .section the cards sit
   on --background (#f9f9f9) with the bento hairline; on .section.dark (the
   warm-grey band) the cards are white. No shadow at rest (DESIGN.md).
   --------------------------------------------------------------------------- */

/* Hero: copy left, the page's key visual right (the image the What-we-do
   dropdown shows for that pillar). Editorial split kept from the 21st.dev
   pattern; the image is decorative and cropped to a 4:5 frame on desktop. */
/* First section under the 60px fixed nav. The export's .section padding drops
   to 48px below 768px, so the hero carries its own clearance at every width. */
.pillar-hero-section {
  padding-top: 96px;
}

.pillar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: 64px;
  row-gap: 32px;
  align-items: center;
}

/* Beside the photo the headline has half the width the display size was set
   for, so it scales down to wrap in four lines rather than six. */
.pillar-hero-main .mega-h1 {
  margin-bottom: 16px;
  font-size: clamp(2.75rem, 4.6vw, 4.25rem);
}

.pillar-hero-figure {
  aspect-ratio: 4 / 5;
  max-height: 640px;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--background);
}

.pillar-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

@media screen and (max-width: 991px) {
  .pillar-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .pillar-hero-figure {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
}

/* Ledger accordion: title plus an optional one-line summary stay visible in
   the closed header; the proof link sits in the body. Same .expandable-*
   markup and IX2 class interaction as home/WhyUs. */
.pillar-accordion {
  max-width: none;
}

.pillar-item-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 24px;
}

.pillar-item-summary {
  color: var(--dim-grey);
}

.pillar-item-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  color: var(--spear-accent);
}

/* Ledger cards: a short grid of export cards with the bento hairline, and an
   optional shared line beneath. */
.pillar-card {
  border: 1px solid #2829430f;
  border-radius: 18px;
  padding: 40px;
  background-color: var(--background);
}

@media screen and (max-width: 991px) {
  .pillar-card {
    padding: 24px;
  }
}

.pillar-cards-shared {
  margin: 24px 0 0;
  color: var(--dim-grey);
}

@media screen and (max-width: 767px) {
  .pillar-cards .grid-halves {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ledger rail: hairline, numbered nodes, one card per phase. */
.engagement-rail {
  position: relative;
  display: grid;
  gap: 24px;
}

.engagement-rail::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  width: 1px;
  background-color: var(--line);
}

.engagement-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
}

.engagement-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tone, var(--line));
  border-radius: 999px;
  background-color: var(--white);
  font-size: 14px;
  font-weight: 700;
  color: var(--tone, var(--dark-slate-blue));
}

.engagement-step-card {
  border: 1px solid #2829430f;
  border-radius: 18px;
  padding: 32px;
  background-color: var(--background);
}

.engagement-meta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--dim-grey);
}

/* One compact fact under the phase paragraph: a small muted label, then the
   sentence, in the same shape as .models-card-example. Replaced the two-column
   label-over-paragraph grid, which stacked four headings in every card. */
.engagement-fact {
  margin-top: 16px;
  color: var(--dim-grey);
}

.engagement-fact-label {
  font-weight: 700;
  color: var(--dark-slate-blue);
}

.engagement-fact-label::after {
  content: " · ";
  font-weight: 400;
  color: var(--dim-grey);
}

/* The rail's closing node: what the client provides, asked once. Its marker is
   not a step, so it stays quieter than the numbered nodes. */
.engagement-step-number-quiet {
  color: var(--dim-grey);
}


.engagement-asks-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.engagement-asks-item {
  position: relative;
  padding-left: 22px;
  color: var(--dim-grey);
}

.engagement-asks-item::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--spear-accent);
}

/* The section's one accent moment: the "we move in" callout on the indigo
   wash. A 5% tint keeps Ink text contrast intact and stays under the 10% Rule. */
.engagement-callout .engagement-step-card {
  background-color: #424bd10d;
  border-color: #424bd11f;
}

.engagement-step-number-accent {
  border-color: var(--spear-accent);
  color: var(--spear-accent);
}

@media screen and (max-width: 767px) {
  .engagement-rail::before {
    display: none;
  }

  .engagement-step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
}

/* Engagement models: one card per model, two or three to a row (2026-09-21,
   replaces the five-row comparison table). Grey card on the white section,
   like .pillar-card; the decision cue and the deliverable are the two facts. */
.models-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.models-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.models-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  border: 1px solid #2829430f;
  border-radius: 18px;
  background-color: var(--background);
}

.models-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.models-card-name {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.models-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--spear-accent);
  background-color: #424bd10d;
}

.models-card-summary {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--dim-grey);
}

.models-card-facts {
  display: grid;
  gap: 16px;
  margin: 0;
}

.models-card-fact dt {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dark-slate-blue);
}

.models-card-fact dd {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.5;
}

/* Pinned to the card's bottom edge so the examples line up across a row. */
.models-card-example {
  margin: auto 0 0;
  padding-top: 4px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--dim-grey);
}

.models-card-example-label::after {
  content: ' · ';
}

.models-card-example a {
  color: var(--spear-accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.models-card-example a:focus-visible {
  outline: 2px solid var(--spear-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* In narrow cards (three to a row, or a phone) the tag sits under the name,
   so every card in a row shares one head layout instead of wrapping ad hoc. */
.models-grid--3 .models-card-head {
  flex-direction: column;
  align-items: flex-start;
}

@media screen and (max-width: 991px) {
  .models-grid,
  .models-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .models-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .models-card {
    gap: 16px;
    padding: 24px;
  }

  .models-card-name {
    font-size: 24px;
  }
}

/* Case studies in depth: two stacked white cards on the grey band. */
.case-deep-list {
  display: grid;
  gap: 24px;
}

.case-deep {
  display: grid;
  gap: 20px;
  border-radius: 18px;
  padding: 40px;
  background-color: var(--white);
  /* In-page links target these cards; clear the fixed nav. */
  scroll-margin-top: 84px;
}

.case-deep-logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
  justify-self: start;
}

.case-deep-practice {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--dim-grey);
}

.case-deep-phases {
  display: grid;
  gap: 12px;
  margin: 0;
}

.case-deep-phase {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 16px;
}

.case-deep-phase dt {
  font-weight: 700;
  color: var(--tone);
}

.case-deep-phase dd {
  margin: 0;
}

.case-deep-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.case-deep-metric {
  border: 1px solid #2829430f;
  border-radius: 18px;
  padding: 24px;
  background-color: var(--background);
}

.case-deep-value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-1);
}

.case-deep-label {
  margin-top: 4px;
  font-size: 14px;
  color: var(--dim-grey);
}

/* A 1px neutral hairline, not a coloured side stripe (DESIGN.md don'ts). */
.case-deep-quote {
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.case-deep-link {
  justify-self: start;
}

@media screen and (max-width: 767px) {
  .case-deep {
    padding: 24px;
  }

  .case-deep-phase {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .case-deep-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* FAQ contact card under the sticky intro. */
.faq-contact-card {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  border: 1px solid #2829430f;
  border-radius: 18px;
  padding: 24px;
  background-color: var(--background);
}

.faq-contact-title {
  font-size: 18px;
  font-weight: 700;
}

.faq-contact-email {
  font-weight: 700;
  color: var(--spear-accent);
}

.faq-contact-card .cta {
  justify-self: start;
}

/* Below 991px the export centres .heading-wrap-faq-halves; the card keeps
   its text and button left-aligned so they agree. */
@media screen and (max-width: 991px) {
  .faq-contact-card {
    text-align: left;
  }
}

/* Door card: one row, text left, button right, tucked under the FAQ. */
.pillar-door-section {
  padding-top: 0;
}

.pillar-door {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid #2829430f;
  border-radius: 18px;
  padding: 32px 40px;
  background-color: var(--background);
}

.pillar-door p {
  max-width: 680px;
}

/* Contact block without a form: the one grey card fills the row and its inner
   column widens from the export's 480px so the copy does not sit in a slot
   sized for a two-column layout. */
.pillar-cta .cta-left-column {
  width: 100%;
}

.pillar-cta .cta-left-inner {
  max-width: 680px;
}

/* ---------------------------------------------------------------------------
   Homepage "Where are you starting from?" cards

   The two tiles route to /services and /studio, so they carry the same visual
   as those pages' heroes and as the "What we do" dropdown: the visitor sees
   the image they clicked on wherever they arrive from. The export's
   .startup-tab / .sme-tab / .enterprise-tab modifiers belong to the retired
   three-audience layout and are unused.

   The gradient stays on top of the photo so the white title and body keep
   their contrast (WCAG AA) whatever the image underneath.
   --------------------------------------------------------------------------- */
.tab-block.services-tab {
  background-image: linear-gradient(to top, #000, #0000),
    url('../images/solen-feyissa-bYpqDs-lVJ8-unsplash_1.avif');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

.tab-block.studio-tab {
  background-image: linear-gradient(to top, #000, #0000),
    url('../images/solen-feyissa-kDo6l0JNKS8-unsplash_1.avif');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

/* ---------------------------------------------------------------------------
   Case-study pages (/resources/[slug], components/resources/StoryPage.astro)

   The bodies are long-form rich text from the Webflow export. The export set
   them in an 880px column (about 120 characters a line), mixed h2 and h3 as
   section headings from one story to the next, and marked quotes with a thick
   side bar. This sets them as an article: a 68ch measure, one heading scale,
   figures a little wider than the text, and quotes set off by hairlines.
   --------------------------------------------------------------------------- */
.story-hero {
  padding: 120px 40px 96px;
}

.story-hero-overlay {
  /* Ink rather than black, darker at the bottom where the lede sits. */
  background-image: linear-gradient(#28294380, #282943d9);
}

.story-hero-inner {
  z-index: 10;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 880px;
  color: #fcfcfd;
  text-align: center;
}

.story-eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fcfcfdcc;
}

.story-title {
  margin: 0;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.12;
  text-wrap: balance;
}

.story-lede {
  max-width: 640px;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}

.section.story-section {
  padding-top: 64px;
  padding-bottom: 96px;
}

.story-column {
  --story-wide: min(880px, calc(100vw - 32px));
  width: min(68ch, 100% - 32px);
  margin-inline: auto;
  font-size: 18px;
}

.story-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  margin: 0 0 56px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--divider);
  font-size: 15px;
}

.story-fact dt {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--date);
}

.story-fact dd {
  margin: 0;
  font-weight: 500;
}

.story-client {
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-client-logo {
  width: auto;
  height: 20px;
}

.story-body > :first-child {
  margin-top: 0;
}

.story-body p,
.story-body li {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  text-wrap: pretty;
}

.story-body p {
  margin: 0 0 20px;
}

.story-body strong {
  font-weight: 700;
}

.story-body h2 {
  margin: 56px 0 16px;
  font-size: 32px;
  line-height: 1.25;
  text-wrap: balance;
}

.story-body h3 {
  margin: 44px 0 12px;
  font-size: 24px;
  line-height: 1.3;
  text-wrap: balance;
}

.story-body h2 + h3 {
  margin-top: 24px;
}

.story-body ul,
.story-body ol {
  margin: 0 0 24px;
  padding-left: 1.25em;
}

.story-body li {
  margin-bottom: 10px;
  padding-left: 4px;
}

.story-body li::marker {
  color: var(--spear-accent);
}

.story-body blockquote {
  margin: 40px 0;
  padding: 28px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
}

.story-body blockquote em {
  display: block;
  margin-top: 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  color: var(--dark-slate-blue);
}

/* Figures step out of the text column to a wider frame. */
.story-body figure,
.story-body figure.w-richtext-align-fullwidth {
  display: block;
  width: var(--story-wide);
  max-width: none !important;
  margin: 40px 0 40px calc((100% - var(--story-wide)) / 2);
}

.story-body figure img {
  display: block;
  border-radius: 12px;
}

.story-body figure > div {
  display: block;
}

.story-body figcaption {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dim-grey);
  text-align: center;
}

/* The export sizes video with a padding-bottom percentage, which resolves
   against the text column and not the wider figure; an aspect ratio does not. */
.story-body figure.w-richtext-figure-type-video {
  height: auto;
  padding-bottom: 0 !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.story-body figure.w-richtext-figure-type-video > div {
  position: absolute;
  inset: 0;
}

.story-back {
  display: inline-flex;
  gap: 8px;
  margin-top: 40px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-1);
  text-decoration: none;
}

.story-back:hover {
  color: var(--spear-accent);
}

.story-back:focus-visible {
  outline: 2px solid var(--spear-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

@media screen and (max-width: 767px) {
  .story-hero {
    padding: 96px 20px 64px;
  }

  .story-lede {
    font-size: 18px;
  }

  .section.story-section {
    padding-top: 40px;
    padding-bottom: 64px;
  }

  .story-facts {
    gap: 16px 32px;
    margin-bottom: 40px;
  }

  .story-body p,
  .story-body li {
    font-size: 17px;
  }

  .story-body h2 {
    margin-top: 44px;
    font-size: 26px;
  }

  .story-body h3 {
    margin-top: 36px;
    font-size: 21px;
  }

  .story-body blockquote {
    font-size: 19px;
  }
}

/* ---------------------------------------------------------------------------
   Second review pass (2026-10-05): colour on the structure, pictos on cards

   The reviewer asked the brand colours to do more work: keywords and line
   breaks in the home lede, a coloured lead and "+" in "Why work with us",
   coloured numbers and titles on the mission phases and the studio steps,
   the same colours on the case-study phase labels, and one picto per feature
   card in a different brand colour each time. Four tones, the same four the
   stats use (§2.5), cycled by index (src/lib/pictos.ts): indigo, magenta,
   deep indigo, blue. Blue is 3.1:1 on white, so the order keeps it off small
   text: three-item lists never reach it, and elsewhere it only lands on 24px
   titles, the decorative step numbers and the pictos.
   --------------------------------------------------------------------------- */
.tone-1 { --tone: var(--spear-accent); }
.tone-2 { --tone: var(--spear-accent-2); }
.tone-3 { --tone: var(--accent-1); }
.tone-4 { --tone: var(--spear-accent-3); }

/* Home hero lede: one clause per line, all white (no keyword colour: Arthur's
   call on 2026-10-07, the indigo sank into the photo). */
.hero-subtitle .hero-line {
  display: block;
}

/* Home values intro: heading left, lead right, aligned on their baselines.
   Stacked in one 648px block they left the right half of the section empty. */
.values-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  row-gap: 16px;
  align-items: end;
}

.values-intro h2 {
  max-width: 648px;
}

.values-intro p {
  max-width: 600px;
}

@media screen and (max-width: 991px) {
  .values-intro {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* "Why work with us": the lead takes the accent, and so do the "+" marks.
   .plus-line is the export's black bar; the same accordion markup runs the
   Services and Studio lists, which get the coloured "+" too. */
.lead-accent {
  color: var(--spear-accent);
}

.plus-line {
  background-color: var(--spear-accent);
}

/* Rail: a toned phase colours its title; the number ring reads --tone in its
   own rule above. The callout and the closing node carry no tone. */
.engagement-step:is(.tone-1, .tone-2, .tone-3, .tone-4) > .engagement-step-card > h3 {
  color: var(--tone);
}

/* Feature-card pictos: a bare 28px stroke icon in the card's tone, no tile
   behind it, so the grid reads as cards with a mark rather than icon boxes. */
.picto {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--tone);
}

/* .sticky-feature-card is a 24px-gap flex column and its h3 adds 8px on top;
   pull the picto in so the mark sits with its title. */
.sticky-feature-card .picto {
  margin-bottom: -12px;
}

.pillar-card .picto {
  margin-bottom: 12px;
}