/* =============================================================================
   Our Story — VTH ReSkin
   =============================================================================
   Scoped stylesheet for the rebuilt /en/our-story page. Everything lives under
   `.vth-os`, and NO Materialize class name is reused (no .btn, .row, .col,
   .container). That is deliberate: Materialize v0.100's rules for those classes
   are global, float-based and heavily specified, and the old page's stylesheet
   is a long list of !important overrides fighting them. Using our own class
   names sidesteps the fight entirely instead of winning it repeatedly.

   Materialize still reaches plain elements (h1-h6, p, a, img, blockquote), so
   the reset block below neutralises those inside the scope.

   Values come from the approved handoff. Tokens are declared once, on the
   scope, so a sector accent change is a one-line edit.
   ============================================================================= */

.vth-os {
  /* ---- palette ---- */
  --os-blue:        #192AC1;
  --os-blue-hover:  #1A2CE8;
  --os-navy:        #040E66;
  --os-red:         #EB3939;
  --os-yellow:      #FFB900;
  --os-ink:         #131313;
  --os-body:        #3F3F3F;
  --os-muted:       #5D5D5D;
  --os-page:        #F3F4F8;
  --os-tint:        #EEF0F9;
  --os-border:      #E7E7E7;
  --os-card:        #FCFCFD;

  /* ---- rhythm ---- */
  --os-gap:         24px;
  --os-pad:         64px;
  /* Distance from the card's RIGHT edge to the hero artwork's right edge. One
     number, applied at every width — the design centres the mark in its column,
     which on our wider cards left it 282px adrift at 1920. Lower to move it
     further right. */
  --os-art-right:   40px;
  /* Hero artwork's widest size. The handoff draws it at 480px; on our cards,
     which run to 1651px, that read small, so it is a token rather than a fixed
     value. The column still caps it at narrow widths, so this is a ceiling. */
  --os-art-max:     600px;

  background: var(--os-page);
  padding: 24px 0 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--os-body);
}

/* Sector pages take the theme's own --primary-color wherever the hub design uses its red; must sit AFTER .vth-os, whose specificity it ties. */
.vth-os--sector { --os-red: var(--primary-color, #EB3939); }
/* Section eyebrows carry the same colour as the page's button rather than the fixed brand blue. */
.vth-os--sector .vth-os-eyebrow { color: var(--os-red); }
/* Neil's portrait card sits on the page's button colour too, not the fixed brand blue. */
.vth-os--sector .vth-os-person { background: var(--os-red); }

/* The stack sits inside the site's OWN `.container`, not a max-width of our own.
   The handoff asks for 1280px with 24px gutters, but the site header uses
   `.container` (86% wide, max-width 1680px at this breakpoint, and different
   percentages at others), so a fixed 1280 left the page 21px wider than the
   header on each side. Reusing the real container keeps the cards aligned with
   the header and footer at every width, with none of that maths duplicated
   here — if the theme changes its container, this follows. */
.vth-os > .container {
  display: flex;
  flex-direction: column;
  gap: var(--os-gap);
}

/* ---------- reset: keep Materialize's global element rules out ---------- */
.vth-os *,
.vth-os *::before,
.vth-os *::after { box-sizing: border-box; }

/* Only margin and padding are reset here. An earlier version also set
   font-weight/line-height/letter-spacing to `inherit`, which backfired: this
   selector is (0,1,1) and the type classes below are (0,1,0), so `inherit` won
   and every heading rendered at weight 400 with the wrong line-height. The type
   classes already state weight and line-height explicitly, and a single class
   (0,1,0) already outranks Materialize's plain `h1`-`h6` rules (0,0,1), so the
   reset does not need to touch them at all. */
.vth-os h1, .vth-os h2, .vth-os h3, .vth-os h4, .vth-os h5, .vth-os h6,
.vth-os p, .vth-os blockquote, .vth-os figure, .vth-os ul, .vth-os li {
  margin: 0;
  padding: 0;
  /* border too: Materialize gives blockquote `border-left: 5px solid #ee6e73`,
     which is where the stray red bar beside the quote came from. Zeroing only
     margin and padding left that border standing. */
  border: 0;
}
.vth-os ul { list-style: none; }
.vth-os img { display: block; max-width: 100%; height: auto; border: 0; }
.vth-os a { color: var(--os-blue); text-decoration: none; }
.vth-os a:hover { color: var(--os-blue-hover); text-decoration: underline; }
/* Materialize gives every <span> and <p> its own line-height in places; the
   type classes below always set both size and line-height together so nothing
   is inherited by accident. */

/* ---------- section shell ---------- */
.vth-os-card {
  position: relative;
  /* Own stacking context, sitting at 0. Without a z-index the card is positioned
     but transparent to stacking, so the hero's inner layers (copy z-index 2,
     artwork 1, ellipse 0) competed directly with the site header's dropdown
     (z-index 1) and painted over it — the All Sectors menu opened behind the
     hero. Containing them here keeps the whole card below the header. */
  z-index: 0;
  isolation: isolate;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  padding: var(--os-pad);
  overflow: hidden;
}
.vth-os-card--tint { background: var(--os-tint); }
.vth-os-card--plain { background: transparent; padding: 0; overflow: visible; }

/* ---------- type scale ---------- */
.vth-os-eyebrow {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--os-blue);
}
.vth-os-rule {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--os-yellow);
  border-radius: 999px;
}
.vth-os-rule--wide { width: 80px; }
.vth-os-hr { display: block; height: 1px; background: var(--os-border); border: 0; }

.vth-os-h1 {
  font-size: 64px;
  line-height: 70px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--os-navy);
}
.vth-os-h2 {
  font-size: 48px;
  line-height: 58px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--os-navy);
}
.vth-os-h2--cta { font-size: 42px; line-height: 52px; }
.vth-os-lead { font-size: 20px; line-height: 30px; font-weight: 400; color: var(--os-muted); }
.vth-os-lead--ink { color: var(--os-ink); }
.vth-os-text { font-size: 17px; line-height: 28px; font-weight: 400; color: var(--os-body); }
.vth-os-text--ink { color: var(--os-ink); }
.vth-os-text--muted { color: var(--os-muted); }
.vth-os-small { font-size: 15px; line-height: 24px; color: var(--os-muted); }

/* ---------- stacks ---------- */
.vth-os-stack { display: flex; flex-direction: column; gap: 24px; }
.vth-os-stack--tight { gap: 10px; }
.vth-os-stack--loose { gap: 32px; }

/* ---------- buttons ----------
   Own class rather than .btn: Materialize's .btn sets height, line-height,
   text-transform and a ::before/::after arrow animation whose :hover rule
   overrides padding, which is what collapses button height on the old pages. */
.vth-os-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, filter .18s ease;
}
/* Buttons are usually <a>, and `.vth-os a` (0,1,1) outranks a lone modifier
   class (0,1,0) — which painted the red button's label brand-blue. The colour
   rules are written against `.vth-os a.…` so the anchor rule cannot win. */
.vth-os a.vth-os-btn,
.vth-os a.vth-os-btn:hover { text-decoration: none; }
.vth-os-btn--l { height: 48px; }

.vth-os .vth-os-btn--red,
.vth-os a.vth-os-btn--red { background: var(--os-red); color: #fff; box-shadow: 0 1px 1.5px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.06); }
.vth-os .vth-os-btn--red:hover,
.vth-os a.vth-os-btn--red:hover { filter: brightness(.94); color: #fff; }

.vth-os .vth-os-btn--blue,
.vth-os a.vth-os-btn--blue { background: var(--os-blue); color: #fff; box-shadow: 0 1px 1.5px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.06); }
.vth-os .vth-os-btn--blue:hover,
.vth-os a.vth-os-btn--blue:hover { background: var(--os-blue-hover); color: #fff; }

.vth-os .vth-os-btn--white,
.vth-os a.vth-os-btn--white { background: #fff; color: var(--os-ink); border: 1px solid var(--os-border); box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.vth-os .vth-os-btn--white:hover,
.vth-os a.vth-os-btn--white:hover { background: var(--os-page); color: var(--os-ink); }

.vth-os .vth-os-btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(25,42,193,.25); }

/* ---------- grids ---------- */
.vth-os-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 56px;
  align-items: center;
}
.vth-os-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ---------- hero ---------- */
.vth-os-card--hero {
  /* Every section carries the same 64px side padding and spans the card. An
     earlier version capped each section's content at the 1152px the design was
     drawn to and centred it, which on a 1651px card left 249px of inset on both
     sides — the hero looked wide and everything under it looked pulled in. */
  padding: 72px var(--os-art-right) 72px var(--os-pad);
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
/* The soft page-coloured shape behind the hero artwork. Anchored to the card's
   right edge as a percentage, so it holds at any width — the handoff's own
   pixel offsets were nudged by hand at one viewport only. */
.vth-os-hero-wash {
  position: absolute;
  inset: 0 0 0 auto;
  width: 85%;
  background: var(--os-page);
  clip-path: ellipse(60% 75% at 100% 50%);
  z-index: 0;
  pointer-events: none;
}
/* 20px, not the 24px the generic stack uses — the handoff sets this column's
   own gap explicitly. */
.vth-os-hero-copy { position: relative; z-index: 2; flex: 1 1 460px; max-width: 560px; gap: 20px; }
.vth-os-hero-copy .vth-os-lead { max-width: 520px; }
/* the handoff gives this row its own gap and an 8px top offset */
.vth-os-hero-actions { display: flex; gap: 16px; margin-top: 8px; }
.vth-os-hero-art {
  position: relative;
  z-index: 1;
  flex: 1 1 300px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.vth-os-hero-artbox {
  position: relative;
  width: 100%;
  max-width: var(--os-art-max);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vth-os-hero-artbox > img { width: 100%; }
/* Same construction as the handoff — a 100x80 box of 2.5px brand-blue dots on a
   20px pitch at half opacity — but positioned off the artwork instead of the
   ellipse: right edge 18px inside the mark's, top 64px above it, which is the
   relationship the handoff's own 874px/14px offsets produce at its drawn width. */
.vth-os-dots--hero {
  top: -64px;
  right: 18px;
  left: auto;
  width: 100px;
  height: 80px;
  opacity: .5;
  background-size: 20px 20px;
  background-image: radial-gradient(var(--os-blue) 2.5px, transparent 2.5px);
}

/* ---------- decoration: dot grid ----------
   Positioned by corner, never by absolute pixel offsets, and always inside a
   clipping parent so it cannot bleed past the artwork it decorates. */
.vth-os-dots {
  position: absolute;
  z-index: 1;
  background-image: radial-gradient(var(--os-blue) 2px, transparent 2px);
  background-size: 20px 20px;
  pointer-events: none;
}
.vth-os-dots--tr { top: 16px; right: 16px; width: 120px; height: 64px; }
.vth-os-dots--tl { top: 16px; left: 16px; width: 120px; height: 64px; }
.vth-os-dots--cta { top: 40px; right: 40px; width: 130px; height: 82px; opacity: .6; background-size: 22px 22px; }

/* ---------- photo frame ----------
   The `:not(.vth-os-ribbon)` matters: the decorative ribbon is an <img> inside
   the same wrapper, and a plain `.vth-os-photo img` rule (specificity 0,1,1)
   beats `.vth-os-ribbon` (0,1,0) — which stretched the ribbon to cover the whole
   photograph. Excluding it here keeps both rules honest without an !important. */
.vth-os-photo { position: relative; overflow: hidden; border-radius: 16px; }
.vth-os-photo--pill { border-radius: 200px 16px 16px 200px; }
/* Sector order starts the photo alternation on the RIGHT: Mission right, Passion left, Collaboration right (its designed side), The Future left. Done by grid order so the DB markup is untouched. */
.vth-os--sector .vth-os-photo--wide { order: 1; }
.vth-os--sector .vth-os-split > .vth-os-photo:last-child:not(.vth-os-photo--pill) { order: -1; }
.vth-os-photo > img:not(.vth-os-ribbon) {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--os-tint);
}
.vth-os-photo--wide > img:not(.vth-os-ribbon) { aspect-ratio: 4 / 3; }

/* ---------- decoration: ribbon mark ----------
   The handoff gives pixel offsets per section (left:263px, top:400px, …) but
   states they are "the intended visual result … re-derive equivalent corner-crop
   positioning" rather than literal CSS. So: anchored to a corner in percentages,
   sized relative to the photo, and clipped by the wrapper's overflow. The result
   is the same — bars entering diagonally from a corner, cropped by the edge —
   and it survives a change of container width, which the pixel values did not. */
.vth-os-ribbon {
  position: absolute;
  z-index: 2;
  width: 46%;
  max-width: 330px;
  height: auto;
  pointer-events: none;
}
.vth-os-ribbon--bl { left: -6%; bottom: -14%; }
.vth-os-ribbon--br { right: -6%; bottom: -14%; }
/* Collaboration's second, mirrored copy: only the yellow bar shows, entering
   from the top-left of the photo. */
.vth-os-ribbon--sliver {
  left: -4%;
  top: 0;
  width: 16%;
  max-width: 90px;
  transform: scaleX(-1);
  clip-path: inset(0 0 0 66%);
}
/* On the CTA card the ribbon is clipped by the section itself, not a photo. */
.vth-os-ribbon--cta { left: -8px; bottom: -44px; width: 180px; max-width: 180px; }

/* ---------- Neil: portrait card + press card ---------- */
.vth-os-person {
  background: var(--os-blue);
  border-radius: 20px;
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.vth-os-person img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border-radius: 14px;
  background: #fff;
}
.vth-os-person-name { font-size: 24px; line-height: 32px; font-weight: 600; color: #fff; }
.vth-os-person-role { font-size: 15px; line-height: 22px; font-weight: 400; color: rgba(255,255,255,.78); }

.vth-os-press {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--os-border);
  border-radius: 16px;
}
.vth-os-press-label { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--os-muted); }
.vth-os-press-row { display: flex; align-items: center; gap: 16px; }
.vth-os-press-row img { height: 24px; width: auto; }
.vth-os-press-word { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--os-ink); }

/* ---------- letter block ---------- */
.vth-os-letter {
  border-top: 1px solid var(--os-border);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vth-os-letter-lead { font-size: 17px; line-height: 28px; font-weight: 500; color: var(--os-ink); }
.vth-os-letter a { font-size: 15px; line-height: 24px; font-weight: 600; }

/* ---------- feature row: circular icon badge + text ---------- */
.vth-os-feature { display: flex; gap: 20px; align-items: flex-start; }
.vth-os-feature--divided { padding-top: 24px; border-top: 1px solid var(--os-border); }
.vth-os-feature--middle { align-items: center; }
.vth-os-badge {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
}
.vth-os-badge--blue   { background: var(--os-blue); }
.vth-os-badge--red    { background: var(--os-red); }
.vth-os-badge--yellow { background: var(--os-yellow); }
.vth-os-badge--lg { width: 64px; height: 64px; font-size: 30px; }
.vth-os-badge--soft { background: var(--os-tint); color: var(--os-blue); }
.vth-os-badge--soft-red { background: #FDECEC; color: var(--os-red); }
.vth-os-badge--soft-yellow { background: #FFF6E0; color: var(--os-yellow); }
.vth-os-badge--soft-yellow-blue { background: #FFF6E0; color: var(--os-blue); }
.vth-os-badge i { line-height: 1; }

/* ---------- highlight strip (Collaboration / Mission) ---------- */
.vth-os-note {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--os-page);
  border-radius: 16px;
  padding: 24px 28px;
}
.vth-os-note--bare { background: transparent; padding: 0; }
.vth-os-note-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-blue);
  font-size: 30px;
}
.vth-os-note-title { font-size: 17px; line-height: 26px; font-weight: 600; color: var(--os-navy); }
.vth-os-note-title--lg { font-size: 18px; line-height: 27px; color: var(--os-blue); }
.vth-os-note-text { font-size: 17px; line-height: 26px; color: var(--os-body); }

/* ---------- learning methodologies ---------- */
.vth-os-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.vth-os-method {
  background: var(--os-card);
  border: 1px solid var(--os-border);
  border-left: 3px solid var(--os-red);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vth-os-num {
  align-self: flex-start;
  background: var(--os-tint);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--os-blue);
}
/* 16px rather than the 20px used elsewhere: at 20px the longest single-word
   label ("Gamification") had ~130px to sit in and broke mid-word as
   "Gamificatio / n". Tightening the gap and dropping that one label a step gives
   it room to stay whole. break-word is kept only as a last resort so a longer
   label can never overflow the card. */
.vth-os-method-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.vth-os-method-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--os-navy);
}
.vth-os-method-label--sm { font-size: 18px; line-height: 26px; }
/* the decorative clipped ribbon box under the intro column */
.vth-os-ribbon-box {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  width: 180px;
  height: 100px;
  margin-top: 24px;
  align-self: flex-start;
}
.vth-os-ribbon-box img { position: absolute; left: -2px; top: 0; width: 160px; height: auto; }

/* ---------- create with us ---------- */
.vth-os-card--cta {
  padding: 72px var(--os-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.vth-os-card--cta .vth-os-h2 { position: relative; z-index: 2; max-width: 800px; }
.vth-os-card--cta .vth-os-text { position: relative; z-index: 2; max-width: 540px; }
.vth-os-cta-accent { color: var(--os-blue); }
.vth-os-contact {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border-radius: 16px;
  padding: 20px 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  color: var(--os-ink);
}
.vth-os a.vth-os-contact,
.vth-os a.vth-os-contact:hover { color: var(--os-ink); text-decoration: none; }
.vth-os-contact-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--os-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-blue);
  font-size: 20px;
}
.vth-os-contact-sep { width: 1px; height: 32px; background: var(--os-border); }
.vth-os-contact-mail { font-size: 17px; line-height: 24px; font-weight: 500; }

/* ---------- closing quote ---------- */
.vth-os-quote-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.vth-os-card--quote {
  padding: 56px var(--os-pad);
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.vth-os-portrait {
  background: #fff;
  border-radius: 20px;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.vth-os-portrait img { width: 100%; aspect-ratio: 1 / 1.15; object-fit: cover; border-radius: 14px; background: var(--os-tint); }
.vth-os-portrait-name { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--os-navy); }
.vth-os-portrait-role { font-size: 14px; line-height: 20px; color: var(--os-muted); }
.vth-os-quote { display: flex; gap: 20px; align-items: flex-start; }
.vth-os-quote-open  { flex: none; font-size: 64px; line-height: 48px; font-weight: 700; color: var(--os-red); }
.vth-os-quote-close { flex: none; align-self: flex-end; font-size: 64px; line-height: 24px; font-weight: 700; color: var(--os-yellow); }
.vth-os-quote p { font-size: 48px; line-height: 58px; font-weight: 600; letter-spacing: -.02em; color: var(--os-navy); }
.vth-os-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* =============================================================================
   Responsive. The handoff authored no breakpoints beyond grid auto-fit, so the
   two below follow the breakpoints the sibling reskin pages already use (992 /
   640) rather than inventing new ones.
   ============================================================================= */
@media (max-width: 992px) {
  .vth-os { padding: 16px 0 0; --os-pad: 32px; --os-gap: 16px; }
  .vth-os-card { border-radius: 20px; }
  .vth-os-card--hero { padding: 40px var(--os-pad); gap: 32px; }
  .vth-os-h1 { font-size: 40px; line-height: 48px; }
  .vth-os-h2 { font-size: 32px; line-height: 40px; }
  .vth-os-h2--cta { font-size: 28px; line-height: 36px; }
  .vth-os-lead { font-size: 18px; line-height: 28px; }
  .vth-os-sidebar,
  .vth-os-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vth-os-card--quote { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px var(--os-pad); }
  .vth-os-card--quote .vth-os-portrait { max-width: 240px; margin: 0 auto; }
  .vth-os-quote p { font-size: 28px; line-height: 38px; }
  .vth-os-quote-open, .vth-os-quote-close { font-size: 40px; line-height: 30px; }
  .vth-os-card--cta { padding: 40px var(--os-pad); }
  .vth-os-hero-wash { display: none; }
  /* On one column the artwork sits above the copy's own flow, so the ribbon and
     dot grid have no corner to hug — dropped rather than left floating. */
  .vth-os-ribbon-box { display: none; }
}

@media (max-width: 640px) {
  .vth-os-h1 { font-size: 32px; line-height: 40px; }
  .vth-os-h2 { font-size: 26px; line-height: 34px; }
  .vth-os-card { padding: 24px var(--os-pad); }
  .vth-os-btn { width: 100%; }
  .vth-os-actions { width: 100%; }
  .vth-os-actions .vth-os-btn { width: 100%; }
  .vth-os-feature { gap: 14px; }
  .vth-os-badge { width: 48px; height: 48px; font-size: 22px; }
  .vth-os-pull { padding: 20px; gap: 14px; }
  /* The address is a single unbreakable token wider than a 390px card's content
     box, so the pill has to be allowed to wrap and the text to break inside it —
     otherwise it pushes out of the section. */
  .vth-os-contact { padding: 14px 16px; gap: 12px; max-width: 100%; flex-wrap: wrap; }
  .vth-os-contact-sep { display: none; }
  .vth-os-contact-mail { font-size: 13px; line-height: 20px; overflow-wrap: anywhere; min-width: 0; }
  .vth-os-dots { display: none; }
}

/* =============================================================================
   "Read more" — the hero button jumps to Neil's card, where the story starts.

   The markup is a plain anchor - href="#neil" on the button, id="neil" on the
   sidebar section - but the page runs inside ng-app, and Angular's click handler on
   <body> turns an in-page hash into a route change, so the browser never scrolled at
   all. The scroll itself is therefore driven from the view's own script; the rules
   below only shape it.

   scroll-behavior has to sit on the scrolling element, so it is set on html rather
   than on .vth-os. That is safe here: this stylesheet is loaded by the Our Story
   view alone (our_story-design-reskin.blade.php), so no other page sees the rule.

   There is no fixed or sticky header on this page - measured at 390px and 1440px -
   so the offset below is only breathing room, not clearance.
   ============================================================================= */
html { scroll-behavior: smooth; }
.vth-os #neil { scroll-margin-top: 16px; }

/* Someone who has asked their system for less motion gets the plain jump. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}