/* ===========================================================
   About page (about.html only): the light layout. A photo-card hero,
   Our approach, a studio-green Meet the founders band, Our story in three
   columns, and the culture do/don't list (us vs traditional consulting).
   Loaded after style.min.css. Old .about-page rules in style.css are
   overridden here, never edited there. Motion is the sitewide "snap into
   place" vocabulary. js/about.js adds .ab-js to <html> (skipped under
   reduced motion) and .is-in to each [data-ab-reveal] as it enters, so
   without JS, or with reduced motion, everything shows in its final
   state.

   Full-screen frames: the page opens with two frames, each exactly one
   screen tall (100svh) at every size.
     .ab-frame--intro  logo/nav space + hero card + Our approach
     .ab-frame--team   founders band + Our story
   Each frame is a grid whose 1fr row (the hero card, the founder photos)
   absorbs whatever the text leaves, and all type and spacing is sized
   with min(vw, svh) so the text itself shrinks on short screens.
   min-height (not height), so on screens too small to fit (phone
   landscape) a frame grows instead of clipping.
   =========================================================== */

.about-page{
  --ab-teal: #285E65;
  --ab-head: var(--nav-bg);
  --ab-snap: cubic-bezier(.34,1.45,.64,1);
  --ab-ease: cubic-bezier(.2,.7,.2,1);
  --ab-inset: clamp(1.5rem, 3.8vw, 3.5rem);
  /* The hero card sits --head-gap under the nav, the same gap as at the
     top of Insights (--nav-bottom, --head-gap: style.css). Phones keep
     their own (below). */
  --ab-top: calc(var(--nav-bottom, 5.07rem) + var(--head-gap, 5rem));
}
/* Undo the old all-teal page: light shell, dark logo. The shell uses the
   same warm linen as the culture section, so every light frame matches. */
.about-page .page-shell{ background: var(--paper-alt); }
.about-page .brand-logo{ filter: none; }
/* Footer accents: the old aqua was picked for the dark page; the light
   page uses its own slate teal instead. */
.about-page .footer-cta-arrow,
.about-page .footer-cta:hover .footer-cta-line,
.about-page .footer-cta:hover .footer-cta-flip,
.about-page .footer-link-lg:hover,
.about-page .copy-btn:hover{ color: var(--ab-teal); }

.ab-wrap{ max-width: 97.5rem; margin: 0 auto; padding: 0 var(--gutter); width:100%; box-sizing:border-box; }
.ab-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.ab-eyebrow{
  font-weight:700; font-size:0.7813rem; line-height:1.3; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ab-teal); margin:0;
}
.ab-eyebrow--light{ color: rgba(244,242,237,.88); }
/* A square in the page's mint marks each label (as Home's eyebrow does);
   not on the comparison's two column headings */
.ab-eyebrow::before, .tl-eyebrow::before{ content:""; display:inline-block; width:0.5625rem; height:0.5625rem; margin-right:0.625rem; border-radius:2px; background:#83D4CE; vertical-align:0.06em; }
.ab-culture-col .ab-eyebrow::before{ display:none; }
.ab-accent{ color: var(--ab-teal); }

.ab-h2{
  font-weight:700; letter-spacing:-.03em; line-height:1.02; color: var(--ab-head);
  font-size: clamp(1.75rem, min(5vw, 6.6svh), 4.75rem);
  margin: clamp(0.375rem, 1.2svh, 0.875rem) 0 clamp(0.875rem, 3svh, 2.75rem);
}
.ab-h2--xl{ font-size: clamp(1.875rem, min(6.2vw, 8.4svh), 6.25rem); color: var(--paper); }

/* Clip the offset "before" states so nothing overflows sideways. */
.ab-approach, .ab-founders, .ab-story, .ab-culture{ overflow-x: clip; }

/* ---------- Full-screen frames ---------- */
.ab-frame{
  display:grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  min-height:100vh; min-height:100svh;
}

/* ---------- Hero (frame 1, row 1: fills what the approach leaves) ---------- */
.ab-hero-wrap{ display:grid; padding-top: var(--ab-top); }
.ab-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius: 1.5rem; background:#2A2E26;
  min-height: 15.625rem;
  animation: abSettle .8s var(--ab-snap) both;
}
.ab-hero-media, .ab-hero-media img{ position:absolute; inset:0; width:100%; height:100%; }
/* Anchored low on the photo: when the box is shorter than the photo, most
   of the crop comes off the top (the ceiling), keeping the table edge in */
.ab-hero-media img{ object-fit:cover; object-position: 50% 74%; animation: abImg .8s var(--ab-ease) both; }
.ab-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(14,18,11,.74) 0%, rgba(14,18,11,.5) 30%, rgba(14,18,11,.12) 52%, rgba(14,18,11,0) 64%);
}
.ab-hero-content{
  position:relative; z-index:1; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start;
  padding: clamp(1.375rem, min(6.2vw, 9svh), 6rem) var(--ab-inset) clamp(1.125rem, min(3.6vw, 5svh), 3.375rem);
}
.ab-hero-title{
  color: var(--paper); font-weight:700; letter-spacing:-.035em; line-height:1.02;
  font-size: clamp(2rem, min(5.7vw, 8.6svh), 5.875rem);
  margin: clamp(0.625rem, 1.8svh, 1.125rem) 0 0;
}
.ab-line{ display:block; animation: abLine .55s var(--ab-snap) both; }
.ab-line:nth-child(1){ animation-delay:.08s; }
.ab-line:nth-child(2){ animation-delay:.14s; }
.ab-line:nth-child(3){ animation-delay:.2s; }
.ab-hero-eyebrow{ animation: abLine .5s var(--ab-snap) .02s both; }
.ab-hero-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:0.75rem;
  color: var(--paper); font-weight:500; font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
  padding: 0.375rem 0; border-radius: 0.375rem;
  animation: abLine .5s var(--ab-snap) .26s both;
}
.ab-hero-arrow{ width:1.25rem; height:1.25rem; transition: transform .45s var(--ab-snap); }
.ab-hero-link:hover .ab-hero-arrow,
.ab-hero-link:focus-visible .ab-hero-arrow{ transform: translateY(0.25rem); }
.ab-hero-link:active{ transform: scale(.97); }
.ab-hero-link:focus-visible{ outline:2px solid var(--paper); outline-offset:0.25rem; }

@keyframes abSettle{ from{ transform: translateY(1.125rem) scale(.975); } to{ transform:none; } }
@keyframes abImg{ from{ transform: scale(1.06); } to{ transform:none; } }
@keyframes abLine{ from{ opacity:0; transform: translateY(.4em); } to{ opacity:1; transform:none; } }

/* ---------- Our approach (frame 1, row 2) ---------- */
.ab-approach{ padding: clamp(1.25rem, 6.5svh, 6.875rem) 0 clamp(1.375rem, 6svh, 6.25rem); }
.ab-approach-grid{ display:grid; grid-template-columns: minmax(10.625rem, 24%) 1fr; }
.ab-approach-side, .ab-approach-main{ padding-left: var(--ab-inset); }
.ab-approach-side{ padding-top: .7em; }
.ab-star{ display:block; width:1.5rem; height:1.5rem; margin-top:1.125rem; fill: var(--ab-teal); }
.ab-statement{
  font-family: var(--font-head); font-weight:700; letter-spacing:-.022em; line-height:1.13;
  color: var(--ab-head); font-size: clamp(1.3125rem, min(2.5vw, 4.4svh), 2.625rem);
  margin:0; max-width: 32em;
}
.ab-word{ position:relative; display:inline-block; }
/* Scroll-linked emphasis: js/about.js scales each word's underline with
   scroll progress, then it holds once the statement is well in view. */
.ab-word-line{
  position:absolute; left:0; right:0; bottom:.02em; height:.07em; border-radius:1px;
  background: var(--ab-teal); opacity:.45; transform-origin:left;
}
.ab-approach-body{
  font-size: clamp(0.9375rem, min(1.55vw, 2.5svh), 1.5rem); line-height:1.45; color: var(--ink-70);
  margin: clamp(0.625rem, 2.4svh, 1.875rem) 0 0; max-width: 46em;
}

/* ---------- Meet the founders (frame 2, row 1: photos fill what the story leaves) ---------- */
/* The band is the headshots' own studio backdrop (sampled from
   team-ds/team-cj.webp: about #2A5246 at the shoulders, darkening to
   #1C4036 lower down), not the page teal. The photos here are cut-outs
   of those headshots (team-*-cut.webp: the backdrop keyed out to
   transparency, edges softened and de-greened), so there's no photo
   edge at all and the founders stand straight on the band. Paper text
   on it is 7.3:1 or better. */
.ab-founders{
  display:grid; grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(180deg, #2D574A 0%, #2A5246 24%, #23493E 66%, #1C4036 100%);
  color: var(--paper);
  padding: clamp(1.75rem, 7svh, 6.875rem) 0 clamp(1.5rem, 5svh, 5rem);
}
.ab-founders-inner{ display:grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }
.ab-founders .ab-h2--xl{ margin-bottom: clamp(0.875rem, 3.4svh, 2.75rem); }
.ab-founders-intro{ position:relative; z-index:1; }
.ab-founder-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2.4vw, 2rem); }
/* Mockup structure at every size: photo on top, name/role + "View bio"
   in a row under it. Each founder's box is set by the frame (size
   containment), and the photo takes what's left. min-height is the
   floor where a frame stops fitting and grows instead. */
.ab-founder{ cursor:pointer; min-width:0; min-height: 11.25rem; contain: size; }
.ab-founder-body{ height:100%; display:grid; grid-template-rows: minmax(0, 1fr) auto; }
/* No card: the card is a size container holding a studio-light glow
   and the photo. The portrait sits top-centre at 1.65x the box height
   (head to mid-chest), so the founders keep their shoulders on wide
   screens instead of a head-only crop, and is capped at a little over
   the box width, so on tall phone boxes the whole upper body shows.
   --ab-ph is the portrait's
   height, shared by the glow. */
.ab-founder-card{
  position:relative; display:grid; min-height:0; container-type:size;
}
.ab-founder-glow, .ab-founder-photo{ --ab-ph: min(165cqh, 142cqw); }
/* Studio light: a soft glow on the band behind each founder, brighter
   round the head and shoulders, as the backdrop was in the photos. */
.ab-founder-glow{
  --ab-g: 47,87,75;
  position:absolute; left:50%; top: calc(var(--ab-ph) * -.15); pointer-events:none;
  width: min(var(--ab-ph) * 1.1, 116cqw); height: calc(var(--ab-ph) * .85);
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(var(--ab-g),.95), rgba(var(--ab-g),.8) 45%, rgba(var(--ab-g),.35) 72%, rgba(var(--ab-g),0));
}
/* No fade: the cut-out shows solid, cropped by the box. */
.ab-founder-photo{ position:relative; overflow:hidden; }
.ab-founder-photo img{
  position:absolute; top:0; left:50%; translate: -50% 0; max-width:none;
  height: var(--ab-ph); width: calc(var(--ab-ph) * 720 / 864);
  object-fit:cover;
  transform-origin: 50% 100%;
  transition: transform .6s var(--ab-snap);
}
/* Hover lifts the person, not a card; the masks stay put around them. */
.ab-founder:hover .ab-founder-photo img{ transform: translateY(-0.375rem) scale(1.02); }
.ab-founder-meta{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  margin-top: clamp(0.625rem, 1.8svh, 1.375rem);
}
.ab-founder-name{
  color: var(--paper); font-weight:700; letter-spacing:-.02em; line-height:1.1;
  font-size: clamp(1.125rem, min(2.4vw, 3.6svh), 2.125rem);
}
.ab-founder-role{ margin:0.1875rem 0 0; font-size: clamp(0.875rem, min(1.45vw, 2.3svh), 1.3125rem); line-height:1.3; color: rgba(244,242,237,.82); }
.ab-bio-btn{
  position:relative; flex:none; display:inline-flex; align-items:center; gap: 1.375rem;
  padding: 0.6875rem 1.25rem 0.6875rem 1.5rem; margin-top:2px; border-radius:62.4375rem;
  border:1.5px solid rgba(244,242,237,.9); color: var(--paper);
  font-weight:600; font-size:0.9375rem; line-height:1.2;
  transition: transform .35s var(--ab-snap);
}
.ab-bio-btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; background: var(--paper);
  opacity:0; transition: opacity .3s var(--ab-ease);
}
.ab-founder:hover .ab-bio-btn::before,
.ab-bio-btn:focus-visible::before{ opacity:.14; }
.ab-bio-btn:active{ transform: scale(.97); }
.ab-bio-btn:focus-visible{ outline:2px solid var(--paper); outline-offset:0.1875rem; }
.ab-plus{ position:relative; width:0.8125rem; height:0.8125rem; flex:none; transition: transform .45s var(--ab-snap); }
.ab-plus::before, .ab-plus::after{
  content:""; position:absolute; left:0; top:50%; width:100%; height:1.8px; margin-top:-.9px;
  background: currentColor; border-radius:1px;
}
.ab-plus::after{ transform: rotate(90deg); }
.ab-founder:hover .ab-plus, .ab-bio-btn:focus-visible .ab-plus{ transform: rotate(90deg); }
.ab-bio-btn[aria-expanded="true"] .ab-plus{ transform: rotate(45deg); }
/* ---------- Our story (frame 2, row 2) ---------- */
.ab-story{ padding: clamp(1.375rem, 5.5svh, 6.25rem) 0 clamp(1.5rem, 6svh, 6.25rem); }
.ab-story-cols{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3, 1fr); }
.ab-story-col{ padding: 0 clamp(1.25rem, 2.8vw, 2.5rem); border-left:1px solid rgba(17,18,26,.14); min-width:0; }
.ab-story-col:first-child{ padding-left:0; border-left:0; }
.ab-story-num{
  display:block; font-family: var(--font-head); font-weight:700; letter-spacing:-.01em; line-height:1;
  color: var(--ab-teal); font-size: clamp(1.25rem, min(2.3vw, 3.5svh), 2.125rem);
}
.ab-story-rule{
  display:block; width:2.375rem; height:0.1563rem; background: var(--ab-teal); transform-origin:left;
  margin: clamp(0.5rem, 1.4svh, 0.875rem) 0 clamp(0.625rem, 2.4svh, 1.875rem);
}
.ab-story-col h3{
  font-weight:700; letter-spacing:-.02em; line-height:1.15; color: var(--ab-head);
  font-size: clamp(1.125rem, min(2vw, 3.1svh), 1.875rem); margin: 0 0 clamp(0.25rem, 1svh, 0.625rem);
}
.ab-story-col p{ margin:0; font-size: clamp(0.875rem, min(1.25vw, 2.2svh), 1.125rem); line-height:1.5; color: var(--ink-70); max-width: 36em; }
.ab-story-cols:focus-visible{ outline:2px solid var(--ab-teal); outline-offset:0.25rem; border-radius:1.125rem; }

/* ---------- Culture: us vs traditional consulting ---------- */
.ab-culture{ background: var(--paper-alt); padding: clamp(4.5rem, 8vw, 7.5rem) 0 4rem; }
.ab-culture-eyebrow{ margin-bottom: 0.875rem; }
.ab-culture-statement{
  font-weight:700; letter-spacing:-.022em; line-height:1.13; color: var(--ab-head);
  font-size: clamp(1.625rem, 2.75vw, 2.75rem); max-width: 26em; margin:0; text-wrap: balance;
}
/* Each do/don't pair shares a row: both columns are subgrids of the same
   7 rows (heading + 6 pairs), so a pair stays level even when one side
   wraps to two lines. */
.ab-culture-grid{
  display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto);
  column-gap: clamp(1.25rem, 5vw, 5rem); margin-top: clamp(2.25rem, 4.5vw, 4rem);
}
.ab-culture-col{ grid-row: span 7; display:grid; grid-template-rows: subgrid; min-width:0; }
.ab-culture-col .ab-eyebrow{ margin-bottom:0.875rem; }
.ab-culture-list{ display:contents; list-style:none; margin:0; padding:0; }
.ab-culture-list li{
  display:flex; align-items:center;
  font-size:1.0625rem; font-weight:500; line-height:1.4; color: var(--ab-head);
  padding: 0.875rem 0; border-bottom:1px solid rgba(17,18,26,.12);
}
.ab-culture-list--dont li{ color: var(--ink-45); }
/* main.js builds one .culture-strike-line per wrapped line. style.css
   loops them; here each draws once as the list arrives and stays struck.
   A transition (not an animation), so lines rebuilt on resize simply
   appear struck. */
.ab-culture-list--dont .culture-strike-line{
  animation:none; opacity:1; transform: scaleX(1);
  transition: transform .55s var(--ab-snap);
}
.ab-culture-list--dont li:nth-child(2) .culture-strike-line{ transition-delay:.07s; }
.ab-culture-list--dont li:nth-child(3) .culture-strike-line{ transition-delay:.14s; }
.ab-culture-list--dont li:nth-child(4) .culture-strike-line{ transition-delay:.21s; }
.ab-culture-list--dont li:nth-child(5) .culture-strike-line{ transition-delay:.28s; }
.ab-culture-list--dont li:nth-child(6) .culture-strike-line{ transition-delay:.35s; }
.ab-culture-cta{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top: clamp(2.5rem, 4.5vw, 3.75rem); }
/* Hover fill fades in via the sitewide button motion (style.css paints --btn-fill on ::before). */
/* Brand star glyph (style.css button motion): aqua on the ink pill,
   paper once the teal fill is in; the outline button's is its own teal. */
.about-page .ab-cta{ --btn-fill: var(--ab-teal); --bm-star-c: #83D4CE; }
.about-page .ab-cta:hover{ color: var(--paper); }
.about-page .ab-cta-article{ --btn-fill: var(--ab-teal); border-color: var(--ab-teal); color: var(--ab-teal); }
.about-page .ab-cta-article:hover{ color: var(--paper); }
.about-page :is(.ab-cta, .ab-cta-article):focus-visible{ outline:2px solid var(--ab-teal); outline-offset:0.1875rem; }

/* ---------- Reveal states (only when js/about.js is running) ---------- */
.ab-js :is(.ab-culture-statement, .ab-culture-col){
  opacity:0; transform: translateY(1.375rem);
  transition: opacity .5s var(--ab-ease), transform .7s var(--ab-snap);
}
.ab-js :is(.ab-culture-statement, .ab-culture-col).is-in{ opacity:1; transform:none; }
.ab-js .ab-culture-col:nth-child(2){ transition-delay:.1s; }

/* Approach: the star snaps round into place, the copy settles. */
.ab-js .ab-approach-grid .ab-star{ transform: rotate(-90deg) scale(.5); opacity:0; transition: transform .7s var(--ab-snap) .1s, opacity .3s var(--ab-ease) .1s; }
.ab-js .ab-approach-grid .ab-statement,
.ab-js .ab-approach-grid .ab-approach-body{ opacity:0; transform: translateY(1.25rem); transition: opacity .5s var(--ab-ease), transform .7s var(--ab-snap); }
.ab-js .ab-approach-grid .ab-approach-body{ transition-delay:.1s; }
.ab-js .ab-approach-grid.is-in :is(.ab-star, .ab-statement, .ab-approach-body){ opacity:1; transform:none; }

/* Founders: each card snaps in from a slight offset and tilt. */
.ab-js .ab-founder{ opacity:0; transform: translate(-1.375rem, 1.875rem) rotate(-1.2deg); transition: opacity .4s var(--ab-ease), transform .75s var(--ab-snap); }
.ab-js .ab-founder:nth-child(2){ transform: translate(1.375rem, 1.875rem) rotate(1.2deg); transition-delay:.1s; }

/* Story: the columns snap in one by one as the row arrives (observed as
   one row, so the phone carousel's off-screen cards arrive too), then
   each number rule scales in. */
.ab-js .ab-story-col{ opacity:0; transform: translateY(1.625rem) rotate(-.8deg); transform-origin: left bottom; transition: opacity .45s var(--ab-ease), transform .7s var(--ab-snap); }
.ab-js .ab-story-rule{ transform: scaleX(0); transition: transform .55s var(--ab-snap); }
.ab-js .ab-story-col:nth-child(2){ transition-delay:.13s; }
.ab-js .ab-story-col:nth-child(3){ transition-delay:.26s; }
.ab-js .ab-story-col:nth-child(1) .ab-story-rule{ transition-delay:.25s; }
.ab-js .ab-story-col:nth-child(2) .ab-story-rule{ transition-delay:.38s; }
.ab-js .ab-story-col:nth-child(3) .ab-story-rule{ transition-delay:.51s; }

/* Culture: strike lines draw once the list is in. */
.ab-js .ab-culture-col:not(.is-in) .culture-strike-line{ transform: scaleX(0); }

/* ---------- Responsive ---------- */

/* Landscape screens (desktop, tablet landscape): the founders heading
   moves to its own column beside the two cards, so the photos get the
   band's full height instead of a letterbox strip under a heading row.
   The top padding clears the fixed nav (pill 22-80px, or the collapsed
   65px square top right). */
@media (min-width: 900px) and (min-aspect-ratio: 1/1){
  /* Landscape: heading, meta row and story all a notch tighter so the
     photos above keep a usable height. */
  .ab-founders{ padding: clamp(1.375rem, 4.4svh, 5.25rem) 0 clamp(1.125rem, 3.4svh, 3.75rem); }
  .ab-founders .ab-eyebrow{ font-size:0.75rem; }
  .ab-founders .ab-h2--xl{ font-size: clamp(2rem, min(5vw, 6.4svh), 5.75rem); margin: clamp(0.25rem, .8svh, 0.75rem) 0 clamp(0.75rem, 2.2svh, 2.125rem); }
  .ab-founder-meta{ margin-top: clamp(0.625rem, 1.6svh, 1.25rem); }
  .ab-founder-name{ font-size: clamp(1.25rem, min(2.2vw, 3.4svh), 2.125rem); }
  .ab-founder-role{ font-size: clamp(0.875rem, min(1.3vw, 2.1svh), 1.25rem); }
  .ab-bio-btn{ padding: clamp(0.5rem, 1.2svh, 0.6875rem) 1.125rem clamp(0.5rem, 1.2svh, 0.6875rem) 1.375rem; font-size: clamp(0.875rem, 1.9svh, 0.9375rem); gap:1.125rem; }
  .ab-story{ padding: clamp(1.125rem, 3.6svh, 4.5rem) 0 clamp(1.125rem, 3.8svh, 4.75rem); }
  .ab-story .ab-eyebrow{ font-size:0.75rem; }
  .ab-story .ab-h2{ font-size: clamp(1.75rem, min(3.8vw, 4.8svh), 4rem); margin: clamp(0.25rem, .8svh, 0.75rem) 0 clamp(0.75rem, 2.2svh, 2rem); }
  .ab-story-col{ padding: 0 clamp(1rem, 2vw, 2.25rem); }
  .ab-story-num{ display:inline-block; vertical-align:middle; font-size: clamp(1.125rem, min(1.8vw, 2.6svh), 1.75rem); }
  .ab-story-rule{ display:inline-block; vertical-align:middle; margin: 0 0 0 0.875rem; }
  .ab-story-col h3{ margin: clamp(0.375rem, 1.2svh, 1.125rem) 0 clamp(0.1875rem, .6svh, 0.5rem); font-size: clamp(1.0625rem, min(1.7vw, 2.6svh), 1.625rem); }
  .ab-story-col p{ font-size: clamp(0.875rem, min(1.15vw, 1.95svh), 1.0625rem); line-height:1.45; }
}

@media (max-width: 900px){
  .ab-approach-grid{ grid-template-columns: 1fr; }
  .ab-approach-side{ display:flex; align-items:center; gap:0.875rem; padding-top:0; margin-bottom: clamp(0.625rem, 2svh, 1.25rem); }
  .ab-star{ margin-top:0; width:1.125rem; height:1.125rem; }
  .ab-statement{ font-size: clamp(1.3125rem, min(4vw, 4.4svh), 2.125rem); }
  .ab-approach-body{ font-size: clamp(0.9375rem, min(2.4vw, 2.5svh), 1.1875rem); }
}

/* Below 900px Our story becomes a swipeable row of cards (two in view
   on tablets, one and a peek on phones), so frame 2 still fits. */
@media (max-width: 899px){
  .ab-story-cols{
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 47%; gap:0.875rem;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .ab-story-cols::-webkit-scrollbar{ display:none; }
  .ab-story-cols:focus-visible{ outline-offset:-2px; border-radius:0; }
  .ab-story-col, .ab-story-col:first-child{
    scroll-snap-align:start; border:0; border-radius:1rem; background: var(--paper);
    padding: clamp(0.875rem, 2.2svh, 1.5rem) clamp(1.125rem, 2.6vw, 1.625rem) clamp(0.875rem, 2.4svh, 1.625rem);
  }
  /* Number and rule share one line on the cards. */
  .ab-story-num{ display:inline-block; vertical-align:middle; font-size: clamp(1.25rem, 2.8vw, 1.625rem); }
  .ab-story-rule{ display:inline-block; vertical-align:middle; margin: 0 0 0 0.75rem; width:1.875rem; }
  .ab-story-col h3{ margin-top: clamp(0.5rem, 1.4svh, 0.875rem); }
  .ab-story-col p{ font-size: clamp(0.875rem, 1.9vw, 1rem); line-height:1.5; }
}

/* Phones: the founder cards stay side by side with a compact meta row
   (name/role plus a round "+" bio button), and Our story becomes a
   swipeable row of three cards so the frame still fits one screen. */
@media (max-width: 699px){
  .about-page{ --ab-top: calc(2.375rem + 2.125rem + clamp(0.875rem, 2.6svh, 1.625rem)); }
  .ab-hero{ border-radius:1.25rem; min-height: 13.75rem; }
  .ab-hero-media img{ object-position: 50% 74%; }
  .ab-hero::after{
    background:
      linear-gradient(180deg, rgba(14,18,11,.66) 0%, rgba(14,18,11,.3) 34%, rgba(14,18,11,0) 50%),
      linear-gradient(0deg, rgba(14,18,11,.6) 0%, rgba(14,18,11,0) 24%);
  }
  .ab-hero-content{ padding: clamp(1.125rem, 3.6svh, 2.25rem) 1.375rem clamp(0.875rem, 2.6svh, 1.625rem); }
  .ab-hero-title{ font-size: clamp(1.875rem, min(10.5vw, 6svh), 2.875rem); }
  .ab-approach{ padding: clamp(1.125rem, 3.6svh, 2.5rem) 0 clamp(1.125rem, 3.4svh, 2.5rem); }
  .ab-approach-side, .ab-approach-main{ padding-left:0; padding-right:0; }
  .ab-statement{ font-size: clamp(1.25rem, min(6.2vw, 3.3svh), 1.75rem); }
  .ab-approach-body{ font-size: clamp(0.875rem, min(4.1vw, 2.1svh), 1.0625rem); }

  /* h2 stays left of the collapsed nav square (top right, to 87px). */
  .ab-founders{ padding: clamp(1.125rem, 3.6svh, 2.5rem) 0 clamp(0.875rem, 2.8svh, 2rem); }
  /* Sized to end before the collapsed nav square (right edge, 65px wide). */
  .ab-founders .ab-h2--xl{ font-size: clamp(1.25rem, min(calc((100vw - 7.125rem) / 9.2), 4.6svh), 2.5rem); margin-bottom: clamp(0.75rem, 2.2svh, 1.5rem); }
  .ab-founder{ min-height:9.375rem; }
  .ab-founder-meta{ position:relative; display:block; margin-top:0.5625rem; }
  .ab-founder-name{ font-size: clamp(0.9375rem, 4.3vw, 1.1875rem); white-space:nowrap; }
  .ab-founder-role{ font-size:0.875rem; margin-top:2px; }
  /* The round bio button sits on the photo's bottom-right corner, so the
     name gets the card's full width. */
  .ab-bio-btn{
    position:absolute; right:0.5rem; bottom: calc(100% + 1.0625rem);
    width:2.375rem; height:2.375rem; padding:0; gap:0; justify-content:center; margin:0;
    background: rgba(15,29,7,.5); border-color: rgba(244,242,237,.85);
  }
  .ab-bio-label{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  .ab-story{ padding: clamp(0.875rem, 3.4svh, 2.25rem) 0 clamp(0.875rem, 3.4svh, 2.25rem); }
  .ab-story .ab-h2{ font-size: clamp(1.625rem, min(8vw, 4.4svh), 2.25rem); margin-bottom: clamp(0.625rem, 2svh, 1.25rem); }
  .ab-story-cols{ grid-auto-columns: 88%; gap:0.75rem; }
  .ab-story-col, .ab-story-col:first-child{ padding: clamp(0.875rem, 2.2svh, 1.25rem) 1.125rem clamp(0.875rem, 2.4svh, 1.375rem); }
  .ab-story-num{ font-size:1.25rem; }
  .ab-story-col h3{ font-size: clamp(1.0625rem, 4.8vw, 1.25rem); margin: clamp(0.5rem, 1.4svh, 0.75rem) 0 0.375rem; }
  .ab-story-col p{ font-size:0.875rem; line-height:1.48; }

  .ab-culture-list li{ font-size:0.9375rem; padding: 0.75rem 0; }
  .ab-culture-cta .btn{ padding: 0.8125rem 1.25rem; }
}
/* Short phones (360x640 and the like): a notch tighter still. */
@media (max-width: 699px) and (max-height: 700px){
  .ab-founder{ min-height:8.75rem; }
  .ab-story-col, .ab-story-col:first-child{ padding: 0.75rem 1rem 0.875rem; }
  .ab-story-col p{ line-height:1.42; }
  .ab-story-col h3{ margin: 0.375rem 0 0.25rem; }
}
/* Very short phones (iPhone SE Safari, 375x548): wider story cards, and
   the number moves onto the heading's line. */
@media (max-width: 699px) and (max-height: 600px){
  .ab-story-cols{ grid-auto-columns: 92%; }
  .ab-founder{ min-height:7.875rem; }
  .ab-founders{ padding: 0.875rem 0 0.75rem; }
  .ab-story{ padding: 0.75rem 0 0.75rem; }
  .ab-story-col, .ab-story-col:first-child{ display:grid; grid-template-columns: auto 1fr; column-gap:0.625rem; align-items:baseline; align-content:start; }
  .ab-story-rule{ display:none; }
  .ab-story-col h3{ margin:0 0 0.25rem; }
  .ab-story-col p{ grid-column: 1 / -1; }
}
@media (hover: none){
  .ab-founder:hover .ab-founder-photo img{ transform:none; }
}
/* Too short to fit (phone landscape and similar): the frames simply grow
   (min-height), and the photos keep a sensible fixed crop. */
@media (max-height: 520px){
  .ab-hero{ min-height: 18.75rem; }
  .ab-founder{ contain: none; min-height:0; }
  .ab-founder-body{ height:auto; }
  .ab-founder-card{ aspect-ratio: 4/3; }
}

/* ---------- Bio overlay (base styles in style.css): the photo stands in
   its own piece of the founders band. Wide screens: a full-height green
   column down the card's left edge. Stacked (1100px and under): a
   full-bleed green top, like the band above Our story. The portrait is
   feathered into it with the same oval as the band, its chest
   dissolving into the green. js/founder-overlay.js copies the
   founder's glow tone (--ab-g) so each backdrop matches its photo. */
.about-page .founder-overlay-media{
  --ab-g: 47,87,75;
  position:relative; flex:none; align-self:stretch; overflow:hidden;
  width: 25rem; min-height: 29.375rem;
  margin: -3.5rem 0 -3.5rem calc(-1 * clamp(1.5rem, 5vw, 4rem));
  border-radius: 1.75rem 0 0 0;
  background:
    radial-gradient(closest-side at 50% 32%, rgba(var(--ab-g),.95), rgba(var(--ab-g),.6) 55%, rgba(var(--ab-g),0)),
    linear-gradient(180deg, #2D574A 0%, #2A5246 30%, #1F463B 75%, #1C4036 100%);
}
.about-page .founder-overlay-photo{
  position:absolute; top:2.5rem; left:50%; translate: -50% 0;
  width:21.25rem; height:auto; aspect-ratio: 720/864; max-width:none;
  border-radius:0; box-shadow:none; object-fit:cover; object-position: 50% 0;
}
/* No fade: the cut-out stands on the panel's bottom edge */
.about-page .founder-overlay-photo{ top:auto; bottom:0; }
@media (max-width: 1100px){
  .about-page .founder-overlay-shape{ padding-top:0; }
  .about-page .founder-overlay-media{
    width: auto; min-height:0; height: clamp(14.375rem, 40dvh, 22.5rem);
    margin: 0 -1.5rem -1.25rem; border-radius: 1.75rem 1.75rem 0 0;
  }
  .about-page .founder-overlay-photo{ top: 1.75rem; width:auto; height: calc(100% - 1.75rem); }
  /* The close button sits on the green here, so it goes light. */
  .about-page .founder-overlay-close{ background: rgba(244,242,237,.92); z-index:1; }
}

/* ---------- Reduced motion: everything static, in its final state ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ab-hero, .ab-hero-media img, .ab-line, .ab-hero-eyebrow, .ab-hero-link{ animation:none; }
  .ab-hero-arrow, .ab-founder-photo img,
  .ab-bio-btn, .ab-bio-btn::before, .ab-plus, .ab-culture-list--dont .culture-strike-line{ transition:none; }
  .ab-founder:hover .ab-founder-photo img{ transform:none; }
  .ab-story-cols{ scroll-behavior:auto; }
}

/* ---------- Round 5: small-screen polish (frames re-measured at every size) ---------- */
/* Short phones: the three-line title ran down over the founders' faces.
   It steps down with the screen height so it ends above them. */
@media (max-width: 699px) and (max-height: 700px){
  .ab-hero-title{ font-size: clamp(1.625rem, min(8.4vw, 4.8svh), 2.25rem); margin-top: 0.5rem; }
  .ab-hero-content{ padding-top: clamp(0.875rem, 2.6svh, 1.375rem); }
}
/* Touch targets: the round bio button (38px) and the hero link keep
   their drawn size; an invisible margin takes each hit area to 44px+. */
.ab-hero-link{ position:relative; }
.ab-hero-link::after{ content:""; position:absolute; inset:-0.375rem -0.5rem; }
@media (max-width: 699px){
  .ab-bio-btn::after{ content:""; position:absolute; inset:-0.25rem; border-radius:50%; }
  .ab-story-col p{ font-size: clamp(0.875rem, 1.9svh, 0.9375rem); }
}
/* SE-size screens: the card is only ~170px tall, so the "About us"
   eyebrow (the nav already says it) gives its line to the title. */
@media (max-width: 699px) and (max-height: 600px){
  .ab-hero-eyebrow{ display:none; }
  .ab-hero-title{ margin-top:0; }
}

/* ---------- The timeline (js/about-timeline.js) ----------
   From the star under "Our approach" one line runs on down the page and
   carries the rest of it (the client's pick from the design previews):
   it splits round "We're Rethink Digital" to the two founder cards,
   which unfold as it reaches them, then rejoins for Our story's three
   milestones and ends at the last one. The star rides its tip as you
   scroll (both ways). The paths are built from where the content sits;
   the draw-on is stroke-dashoffset, everything else transform/opacity.
   Under 900px the line runs down the left edge. Reduced motion: the line
   is drawn in full and nothing moves. No JS: everything shows. */
.ab-star-slot{ display:block; width:fit-content; }
@media (max-width: 900px){ .ab-star-slot{ display:inline-flex; } }
.ab{
  --tl-page:#ECE9E1; --tl-card:#fff; --tl-head:#0F1D07;
  --tl-ink-14:rgba(17,18,26,.14); --tl-ink-06:rgba(17,18,26,.06);
  --tl-teal:#285E65; --tl-mint:#83D4CE;
  --tl-snap:cubic-bezier(.34,1.45,.64,1); --tl-ease:cubic-bezier(.2,.7,.2,1);
  --tl-lane:8rem;
  /* Under 900px: the line's x and where the content column starts */
  --S:1.375rem; --cin:3.25rem;
}
.tl-sec :where(h2, h3, p, ul, ol, li){ margin:0; }
.tl-sec :where(ul, ol){ padding:0; list-style:none; }
.tl-sec :where(h2, h3){ color:var(--tl-head); font-weight:600; }
.tl-wrap{ max-width:77.5rem; margin:0 auto; padding:0 var(--gutter); }
.tl-eyebrow{ font-size:0.8125rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tl-teal); }
.tl-h2{ margin-top:0.75rem; font-size:clamp(2.125rem,4.4vw,4rem); line-height:1.03; letter-spacing:-.025em; }
.tl-accent{ color:var(--tl-teal); }
.tl-z2{ position:relative; z-index:2; }

/* The line, the stars, the reveals */
.tl-svg{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; overflow:hidden; }
.tl-svg path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tl-svg .tl-trk path{ stroke:var(--tl-ink-14); stroke-width:1.6; stroke-dasharray:.01 7; }
.tl-svg .tl-ln path{ stroke:var(--tl-teal); stroke-width:2.6; }
.tl-star{ position:absolute; left:0; top:0; z-index:4; width:1.625rem; height:1.625rem; margin:-0.8125rem 0 0 -0.8125rem; pointer-events:none; opacity:0; will-change:transform; }
.tl-star i{ display:block; width:100%; height:100%; transition:transform .7s var(--tl-snap); }
.tl-star svg{ display:block; width:100%; height:100%; overflow:visible; }
.tl-star path{ fill:var(--tl-teal); stroke:#fff; stroke-width:0.1625rem; paint-order:stroke; stroke-linejoin:round; }
.tl-star-b{ width:1.25rem; height:1.25rem; margin:-0.625rem 0 0 -0.625rem; transition:opacity .3s var(--tl-ease); }
.tl-mo .tl-star.on{ opacity:1; }
.tl-rm .tl-star-a{ opacity:1; }
.tl-landed .tl-star-a i{ transform:scale(1.55) rotate(90deg); }
/* (the approach star is the line's start: it hands over once the line moves) */
.tl-out .ab-approach-grid .ab-star{ visibility:hidden; }
.tl-mo [data-tr]{ transition:opacity .5s var(--tl-ease), transform .75s var(--tl-snap); }
.tl-mo [data-tr]:not(.on){ opacity:0; transform:translateY(1.25rem); }
/* A label's square (style.css "Label squares") snaps in as its block is
   revealed here, not before, while the block is still hidden */
html.sq-ready .tl-mo [data-tr]:not(.on) :is(.tl-eyebrow, .ab-eyebrow)::before{ transform: translate(0.3125rem,-0.375rem) rotate(28deg); animation:none; }
html.sq-ready .tl-mo [data-tr].on :is(.tl-eyebrow, .ab-eyebrow).sq-in::before{ animation-delay:.12s; }

/* Meet the founders: the line splits round the heading to two cards */
.tl-fo{ padding:clamp(7.5rem,11vw,9.375rem) 0 clamp(6.875rem,10vw,8.75rem); }
.tl-fo-head{ position:relative; z-index:2; max-width:47.5rem; margin:0 auto; text-align:center; }
/* The line runs down the middle behind the heading: a soft glow of the
   page colour behind the words fades it out as it reaches them and back
   in below, so it never cuts across the lettering (wide screens; under
   900px the line runs down the left edge instead) */
@media (min-width: 900px){
  .tl-fo-head::before{ content:""; position:absolute; z-index:-1; inset:-1.75rem -2.5rem; background: radial-gradient(closest-side, var(--tl-page) 62%, rgba(236,233,225,0)); pointer-events:none; }
}
.tl-fo-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,5.5rem); width:min(62.5rem,100% - 7.5rem); margin:clamp(5rem,8vw,6.5rem) auto 0; }
.tl-fc{ position:relative; z-index:5; display:flex; flex-direction:column; }
.tl-fc-in{ position:relative; flex:1; display:flex; flex-direction:column; border-radius:1.625rem; background:var(--tl-card); box-shadow:0 1px 0 var(--tl-ink-06),0 1.875rem 3.75rem -2.25rem rgba(17,18,26,.42); overflow:hidden; transform-origin:50% 0; will-change:transform; }
.tl-fc-node{ position:absolute; z-index:6; left:50%; top:0; width:1rem; height:1rem; margin:-0.5rem 0 0 -0.5rem; border-radius:50%; background:var(--tl-card); box-shadow:inset 0 0 0 0.1625rem var(--tl-teal),0 0 0 0.25rem var(--tl-page); }
.tl-fc-ph{ position:relative; height:clamp(14.375rem,24vw,20rem); overflow:hidden; background:linear-gradient(180deg,#2D574A 0%,#2A5246 30%,#23493E 70%,#1C4036 100%); }
.tl-fc-ph::before{ content:""; position:absolute; left:50%; top:-12%; width:118%; height:110%; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(58,104,90,.95),rgba(47,87,75,.7) 50%,rgba(47,87,75,0)); }
.tl-fc-por{ position:absolute; left:0; right:0; top:9%; height:150%; display:flex; justify-content:center; }
.tl-fc-por img{ height:100%; width:auto; max-width:none; }
.tl-fc-txt{ display:flex; flex-direction:column; flex:1; padding:clamp(1.25rem,2.2vw,1.75rem) clamp(1.25rem,2.4vw,1.875rem) clamp(1.375rem,2.4vw,1.875rem); }
.tl-fc h3{ font-size:clamp(1.5rem,2.1vw,1.875rem); line-height:1.1; letter-spacing:-.02em; }
.tl-fc-role{ margin-top:0.25rem; font-size:0.9375rem; font-weight:500; color:var(--tl-teal); }
.tl-fc-bio{ margin-top:0.875rem; font-size:1rem; line-height:1.55; color:var(--ink-70); }
.tl-fc-tags{ display:flex; flex-wrap:wrap; gap:0.4375rem; margin-top:1.125rem; }
.tl-fc-tags li{ padding:0.375rem 0.6875rem; border-radius:62.4375rem; background:var(--tl-page); font-size:0.8125rem; font-weight:500; line-height:1.2; color:var(--ink); }
.tl-fc-go{ margin-top:auto; padding-top:1.375rem; }
.tl-fc-go .btn{ padding:0.625rem 1.125rem; font-size:0.875rem; }
/* The unfold: each card hangs down from its node; its parts follow */
.tl-mo .tl-fc-in{ transition:transform .95s var(--tl-snap), opacity .35s var(--tl-ease); }
.tl-mo .tl-fc:not(.open) .tl-fc-in{ opacity:0; transform:perspective(93.75rem) rotateX(-82deg) scale(.55); }
.tl-mo .tl-fc-in{ transform:perspective(93.75rem) rotateX(0deg) scale(1); }
.tl-mo .tl-fc-node{ transition:transform .5s var(--tl-snap); }
.tl-mo .tl-fc:not(.lit) .tl-fc-node{ transform:scale(0); }
.tl-mo .tl-fc-por img{ transition:transform .9s var(--tl-snap) .22s, opacity .4s var(--tl-ease) .22s; }
.tl-mo .tl-fc:not(.open) .tl-fc-por img{ transform:translateY(22%) scale(.92); opacity:0; }
.tl-mo .tl-fc-txt > *{ transition:transform .7s var(--tl-snap), opacity .4s var(--tl-ease); }
.tl-mo .tl-fc:not(.open) .tl-fc-txt > *{ opacity:0; transform:translateY(0.875rem); }
.tl-mo .tl-fc.open .tl-fc-txt > :nth-child(1){ transition-delay:.3s; } .tl-mo .tl-fc.open .tl-fc-txt > :nth-child(2){ transition-delay:.36s; }
.tl-mo .tl-fc.open .tl-fc-txt > :nth-child(3){ transition-delay:.42s; } .tl-mo .tl-fc.open .tl-fc-txt > :nth-child(4){ transition-delay:.48s; }

/* Our story: three milestones on the line */
.tl-sy{ padding:clamp(6.25rem,9vw,8.125rem) 0 clamp(3.125rem,5vw,4.5rem); }
.tl-sy-grid{ display:grid; grid-template-columns:minmax(0,1fr) var(--tl-lane) minmax(0,1fr); row-gap:clamp(2.25rem,4vw,3.5rem); width:min(67.5rem,100%); margin:0 auto; }
.tl-sy-head{ grid-column:1; grid-row:1; text-align:right; }
.tl-sy-list{ display:contents; }
.tl-ms{ position:relative; z-index:3; max-width:31rem; }
.tl-ms-1{ grid-column:3; grid-row:1; margin-top:clamp(4.375rem,7vw,6rem); }
.tl-ms-2{ grid-column:1; grid-row:2; justify-self:end; text-align:right; }
.tl-ms-3{ grid-column:3; grid-row:3; }
.tl-ms h3{ font-size:clamp(1.375rem,2vw,1.75rem); line-height:1.15; letter-spacing:-.018em; padding-top:0.5rem; }
.tl-ms p{ margin-top:0.625rem; font-size:clamp(1rem,1.2vw,1.125rem); line-height:1.55; color:var(--ink-70); }
.tl-ms-node{ position:absolute; z-index:3; top:0; left:calc(var(--tl-lane) / -2 - 1.4375rem); width:2.875rem; height:2.875rem; display:grid; place-items:center; border-radius:50%; background:var(--tl-card); box-shadow:inset 0 0 0 0.1625rem var(--tl-teal),0 0 0 0.375rem var(--tl-page),0 0.875rem 1.5rem -0.875rem rgba(17,18,26,.5); font-size:0.8125rem; font-weight:700; letter-spacing:.04em; color:var(--tl-teal); }
.tl-ms-2 .tl-ms-node{ left:auto; right:calc(var(--tl-lane) / -2 - 1.4375rem); }
.tl-mo .tl-ms-node{ transition:transform .6s var(--tl-snap); }
.tl-mo .tl-ms:not(.on) .tl-ms-node{ transform:scale(.25); }
.tl-mo .tl-ms h3, .tl-mo .tl-ms p{ transition:transform .75s var(--tl-snap), opacity .45s var(--tl-ease); }
.tl-mo .tl-ms.on p{ transition-delay:.08s; }
.tl-mo .tl-ms:not(.on) h3, .tl-mo .tl-ms:not(.on) p{ opacity:0; transform:translateX(-2.25rem); }
.tl-mo .tl-ms-2:not(.on) h3, .tl-mo .tl-ms-2:not(.on) p{ transform:translateX(2.25rem); }

@media (max-width: 1100px){ .ab{ --tl-lane:6.5rem; } }
/* Under 900px the line runs down the left edge (x = --S) and these
   sections sit in a content column that starts at --cin */
@media (max-width: 899px){
  .tl-sec .tl-wrap{ padding-left:var(--cin); padding-right:1rem; }
  .tl-svg .tl-ln path{ stroke-width:2.2; }
  .tl-star-a{ width:1.375rem; height:1.375rem; margin:-0.6875rem 0 0 -0.6875rem; }
  .tl-star-b{ width:1rem; height:1rem; margin:-0.5rem 0 0 -0.5rem; }
  .tl-fo{ padding:clamp(3.5rem,10vw,5.625rem) 0 clamp(3rem,8vw,5rem); }
  .tl-fo-head{ margin:0; text-align:left; }
  .tl-fo-grid{ grid-template-columns:minmax(0,1fr); gap:2.75rem; width:auto; margin:clamp(2.25rem,7vw,3.5rem) 0 0; }
  .tl-fc-node{ left:0; top:2.25rem; margin:-0.5rem 0 0 -0.5rem; }
  .tl-fc-ph{ height:clamp(13.75rem,62vw,21.25rem); }
  .tl-fc-por{ top:8%; height:142%; }
  .tl-mo .tl-fc-in{ transform-origin:0 2.25rem; }
  .tl-mo .tl-fc:not(.open) .tl-fc-in{ transform:perspective(93.75rem) rotateY(70deg) scale(.6); }
  .tl-mo .tl-fc-in{ transform:perspective(93.75rem) rotateY(0deg) scale(1); }
  .tl-sy{ padding:clamp(3.5rem,10vw,5.625rem) 0 clamp(2.5rem,8vw,4.375rem); }
  .tl-sy-grid{ grid-template-columns:minmax(0,1fr); row-gap:clamp(2.5rem,8vw,3.5rem); width:auto; }
  .tl-sy-head, .tl-ms-1, .tl-ms-2, .tl-ms-3{ grid-column:1; grid-row:auto; text-align:left; justify-self:start; margin-top:0; }
  .tl-ms-node, .tl-ms-2 .tl-ms-node{ left:calc(var(--S) - var(--cin) - 1.0625rem); right:auto; top:2px; width:2.125rem; height:2.125rem; font-size:0.7188rem; box-shadow:inset 0 0 0 0.1375rem var(--tl-teal),0 0 0 0.3125rem var(--tl-page); }
  .tl-ms h3{ padding-top:0.25rem; }
  .tl-mo .tl-ms-2:not(.on) h3, .tl-mo .tl-ms-2:not(.on) p{ transform:translateX(-2.25rem); }
}
}
@media (max-width: 360px){
  .ab{ --S:1.125rem; --cin:2.75rem; }
  .tl-fc-tags li{ font-size:0.7813rem; }
}
@media (prefers-reduced-motion: reduce){
  .tl-star i{ transition:none !important; }
}

/* Us vs traditional consulting: the line runs down the left of the
   lists. As the star reaches each row, our item's tick appears and the
   traditional item is struck through (js/about-timeline.js sets .on on
   each row; it places each tick on the line). */
.ab-culture .ab-wrap{ padding-left: calc(var(--gutter) + 1.875rem); }
.ab-culture-list li{ position:relative; }
.tl-tk{ position:absolute; z-index:3; left:-2.625rem; top:50%; width:1.5rem; height:1.5rem; margin-top:-0.75rem; display:grid; place-items:center; border-radius:50%; background:var(--tl-teal); box-shadow:0 0 0 0.25rem var(--tl-page); }
.tl-tk svg{ width:0.8125rem; height:0.8125rem; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.tl-mo .tl-tk{ transition: transform .55s var(--tl-snap), opacity .2s; }
.tl-mo .ab-culture-list li:not(.on) .tl-tk{ transform: scale(.2) rotate(-60deg); opacity:0; }
.tl-mo .ab-culture-list--dont li:not(.on) .culture-strike-line{ transform: scaleX(0); }
.tl-mo .ab-culture-list--dont li .culture-strike-line{ transition-delay: 0s; }
@media (max-width: 899px){
  .ab-culture .ab-wrap{ padding-left: var(--cin); padding-right:1rem; }
}