/* ==========================================================================
   IPC Advice Your Way - rebrand override layer
   --------------------------------------------------------------------------
   Loaded AFTER css/slides.min.css. All rebrand/behaviour overrides live here.
   Never edit slides.min.css, slides.css or any .scss file: the Designmodo
   "Slides" template that generated them no longer exists and there is no
   build tooling in this repo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   IWAB-13: continuous vertical scroll
   The page runs in the framework's native scroll mode (body.scroll), so the
   horizontal carousel affordances no longer mean anything. The framework
   leaves the prev/next arrows visible in scroll mode, so hide them here.
   -------------------------------------------------------------------------- */

.scroll .nextSlide,
.scroll .prevSlide {
  display: none;
}

/* Slice height. The framework forces every slide's container to 100vh in
   scroll mode, which made sense for a horizontal deck and leaves 400 to
   800px of empty space under most slices once the page scrolls vertically,
   and worse on square screens. Its own `autoHeight` slide class drops the
   100vh rule on the container and the background, so the ten inner pages
   carry it and size to their content with the design system's section
   rhythm above and below. The hero and the final CTA keep full height as
   statements. */
.scroll .slide.autoHeight .content {
  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}
@media (max-width: 767px) {
  .scroll .slide.autoHeight .content {
    padding-top: var(--sys-space-16);
    padding-bottom: var(--sys-space-16);
  }
}

/* Dot pagination. slides.min.js injects one <li> per slide into the empty
   <ul> in the bottom panel regardless of mode, and in scroll mode the clicks
   route to changeSlide(), which is a no-op. Hide the dots only: the bottom
   panel still carries the IPC logo and the "Get Advice Your Way" CTA. */
.scroll .panel .navigation {
  display: none;
}

/* --------------------------------------------------------------------------
   Bottom panel at phone widths
   The panel laid out as `display: table` with three 33.33% cells. A table
   cannot shrink below its content, so at 375px the table measured 400px and
   ran 55px past the viewport, clipping the CTA label into a vertical sliver.

   Two causes, and the logo one is not what it looks like:

   1. The logo is `<svg height="50px">` with NO width attribute. Per SVG
      sizing rules an absent width resolves to 100% of the containing block,
      not to the symbol's aspect ratio. So its BOX stretched to the full cell
      (300px at a 375px viewport) while the visible mark was only ~166px.
      Setting an explicit width matched to the symbol's viewBox (0 0 193 58,
      ratio 3.328) makes the box match the mark.
   2. The centre cell still claimed its share while holding only the dot
      pagination, which is hidden in scroll mode.

   Swapped for flex at phone widths so the panel can size to its content.
   Desktop is untouched.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .panel.bottom {
    padding-left: 14px;
    padding-right: 14px;
  }

  .panel.bottom .sections {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .panel.bottom .sections > div {
    display: block;
    width: auto;
    height: auto;
    white-space: normal;
    text-align: left;
  }

  /* Centre cell only ever held the dot pagination, hidden above in scroll mode. */
  .scroll .panel.bottom .sections > .center {
    display: none;
  }

  /* 30px x 3.328 = 100px. Box now matches the visible mark. */
  .panel.bottom .left svg {
    height: 30px;
    width: 100px;
  }

  /* The cell may shrink so a longer label (the French CTA) wraps onto two
     lines instead of running off the screen. English still fits on one. */
  .panel.bottom .right {
    flex: 0 1 auto;
    min-width: 0;
  }

  .panel.bottom .advisorCTA {
    white-space: normal;
    text-align: center;
  }
  /* The French label is about 60% longer; a step down in size and side
     padding keeps it to two lines. */
  html[lang="fr"] .panel.bottom .advisorCTA {
    line-height: 1.25;
    font-size: 0.875rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  /* Advisor variant: a Contentful-supplied logo replaces the CTA in this cell
     and its dimensions are whatever the advisor uploaded. Constrain it too. */
  .panel.bottom .advisorLogo {
    width: auto;
    height: auto;
    max-width: 130px;
    max-height: 34px;
  }
}

/* Side menu chapter links: the framework spaces them with a 48px line-height,
   so a label that wraps (the French ones, and "Speak to an IPC Wealth
   Advisor") read as two items. Tighter lines plus padding keep a one-line
   item at exactly 48px and let a wrapped one read as a single link. */
.slides .mainMenu > li {
  line-height: 26px;
  padding: 11px 0;
}

/* Side menu CTA: the framework's buttons never wrap, and the French label
   is wider than the menu column, so let it wrap inside the column. English
   still fits on one line. */
.slides .menuCTA {
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}
html[lang="fr"] .slides .menuCTA { line-height: 1.25; }

/* ==========================================================================
   IWAB-10: statistical treatments
   --------------------------------------------------------------------------
   Replaces the baked-in-text PNGs (8in10_findings.png and friends) with live
   HTML, so the French version is a copy change, the numbers are selectable
   and readable by screen readers, and they reflow at phone widths.

   Figures float on the page surface as large type. There is no panel and no
   ring: across every IPC reference (agency deck, client mockups, converge,
   Dan's brochure, KC7316) statistics sit directly on the surface, and where
   a dark colour carries one it is a whole page or band, never a box on a
   light page. House rules that say the same: CHARTS.md "a lone headline
   statistic is usually type, not a chart"; TOKENS.md "Fresh Pine: brand
   punctuation, never as wallpaper"; IMAGERY.md "this brand puts its marks
   on clean ground". Colour follows the client's one instruction on
   numerals: Electric Green fails on light surfaces, so light surfaces use
   Fresh Pine with Electric Green Dark for the lead figure; dark surfaces use
   Electric Green. Selectors carry `.slides .slide` and the element so they
   outrank the brand layer's `.slides .slide.white p`.
   ========================================================================== */

.ipcStats__eyebrow {
  margin: 0 0 var(--sys-space-2);
  font-size: var(--ipc-body-sm);
  font-weight: var(--ipc-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.slides .slide.white p.ipcStats__eyebrow { color: var(--text-brand); }
.slides .slide:not(.white) p.ipcStats__eyebrow { color: var(--text-accent-dark); }

/* A set of findings: value beside label, a hairline above each. Aligned at
   the top, not the baseline: with Nunito Sans metrics a 16px label on 24px
   leading puts its first cap line within a pixel of the 48px numeral's cap
   line, and two label lines measure exactly the numeral's height, so the
   pair reads as one block instead of the label hanging below the number. */
.ipcFinding {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sys-space-6);
  align-items: start;
  padding: var(--sys-space-6) 0;
  border-top: 1px solid var(--border-hairline);
}
.slides .slide:not(.white) .ipcFinding { border-top-color: var(--border-on-dark); }

.slides .slide .ipcFindings p.ipcFinding__value {
  margin: 0;
  font-size: var(--sys-display-md-fluid);
  font-weight: var(--ipc-weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-brand);
}
.slides .slide .ipcFindings .ipcFinding:first-of-type p.ipcFinding__value { color: var(--text-accent-light); }
.slides .slide:not(.white) .ipcFindings p.ipcFinding__value,
.slides .slide:not(.white) .ipcFindings .ipcFinding:first-of-type p.ipcFinding__value { color: var(--text-accent-dark); }

.slides .slide .ipcFindings p.ipcFinding__label {
  margin: 0;
  font-size: var(--ipc-body-lg);
  line-height: 1.5;
  color: var(--text-primary);
  /* ch-based cap rather than a hard width: French runs 15-25% longer. */
  max-width: 22ch;
}
.slides .slide:not(.white) .ipcFindings p.ipcFinding__label { color: var(--text-on-dark); }

/* A single headline figure: the statistic is the architecture of the column,
   as the KC7316 build puts it. The size sits above the type scale's top tier
   on purpose; KC7316's hero statistic does the same. */
/* Label above the rule, figure below it: the same order as the paired
   findings on pages 2, 3 and 10. */
.ipcFigure .ipcStats__eyebrow { margin-bottom: var(--sys-space-2); }
.slides .slide .ipcFigure p.ipcFigure__value {
  padding-top: var(--sys-space-6);
  border-top: 1px solid var(--border-hairline);
}
.slides .slide .ipcFigure p.ipcFigure__value {
  margin: 0;
  font-size: clamp(5rem, 11vw, 10rem);
  font-weight: var(--ipc-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--text-brand);
}
.slides .slide .ipcFigure .ipcFigure__unit {
  font-size: 0.45em;
  vertical-align: 0.9em;
  letter-spacing: -0.02em;
  margin-left: 0.05em;
}
.slides .slide .ipcFigure p.ipcFigure__label {
  margin: var(--sys-space-4) 0 0;
  font-size: var(--ipc-heading-sm);
  font-weight: var(--ipc-weight-regular);
  line-height: 1.35;
  color: var(--text-primary);
  max-width: 18ch;
}

@media (max-width: 767px) {
  .ipcFinding { padding: var(--sys-space-4) 0; column-gap: var(--sys-space-4); }
  .ipcFindings { margin-bottom: var(--sys-space-8); }
  .ipcFigure { margin-bottom: var(--sys-space-8); }
}

/* ==========================================================================
   IWAB-9 : IPC Wealth brand layer
   --------------------------------------------------------------------------
   Applies brand colour, type, spacing, imagery treatment and components over
   the Slides framework WITHOUT moving anything. Page compositions stay as
   published; only surfaces, type, graphics and icons change. Three structural
   changes the estimate names are handled elsewhere: 16 sections to 12, the
   scroll conversion, and the interactive component rebuilds.

   Everything below resolves through design-system 1.1.1 tokens. No hex codes.
   ========================================================================== */

/* ---- Type ---------------------------------------------------------------- */
/* Nunito Sans, four weights, one inherited tracking value of -0.02em, and no
   italics. Hierarchy is scale and weight: the brand publishes no grey.

   Weight system, and where it comes from. The written brand rules list all
   four weights at every tier without assigning one, so the rule is taken
   from what has been built on the brand: design-system css/base.css (h1/h2
   700, h3/h4 600, body 400), the converge site (same, no weight below 400
   anywhere) and Dan's advisor brochure (700 / 600 / 400). Light 300 is not
   used for anything on this page. It was the old Poppins build's weight and
   reads as the previous identity. */

.slides,
.slides h1, .slides h2, .slides h3, .slides h4,
.slides p, .slides li, .slides a, .slides blockquote {
  font-family: "Nunito Sans", "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
  font-style: normal;
}

.slides h1 { font-weight: var(--ipc-weight-bold);     line-height: 1.05; }
.slides h2 { font-weight: var(--ipc-weight-bold);     line-height: 1.1; }
.slides h3 { font-weight: var(--ipc-weight-semibold); line-height: 1.25; }
.slides h4 { font-weight: var(--ipc-weight-semibold); line-height: 1.3; }
/* Body weight and leading are set on .slides and inherited (see the inline
   block in index.html), never on `.slides p`, so that a component class
   such as .ipcEyebrow or .ipcStat__value keeps control of its own weight. */
.slides    { font-weight: var(--ipc-weight-regular);  line-height: var(--ipc-lh-body-lg); }

/* Scale, from converge: Bold headlines are paired with display sizes. The
   framework's .smaller/.large modifiers are overridden inside a copy block
   only, so chrome and the sidebar keep the framework's own sizes. */
/* The hero headline takes converge's hero scale, which Dan's brochure also
   uses: display-xl clamp(3rem, 8vw, 6.5rem), Bold, tight leading, capped at
   18ch. It sits above the token scale on purpose: both built references
   reserve this size for the opening statement and nothing else. */
.slides .slide .ipcCopy h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
}
.slides .slide .ipcCopy h2 { font-size: var(--sys-display-md-fluid); }
.slides .slide .ipcCopy h4 { font-size: var(--ipc-heading-sm); }
/* Body copy is Body XL (18px on 28), the design system's own body default
   (base.css). Card and feature text steps down one tier to Body LG (16px on
   26). The published sizes are desktop ceilings, so on a phone body copy
   takes Body LG too and cards stay there. The pull quote
   keeps its own Heading MD, which this rule used to override. */
.slides .slide .ipcCopy p:not(.ipcEyebrow):not(.ipcTagline):not(.ipcQuote p) {
  font-size: var(--ipc-body-xl);
  line-height: var(--ipc-lh-body-xl);
}
.slides .slide .ipcCopy p:not(.ipcEyebrow):not(.ipcTagline):not(.ipcQuote p):is(.small, .ipcCard p, .ipcFeature p) {
  font-size: var(--ipc-body-lg);
  line-height: var(--ipc-lh-body-lg);
}
@media (max-width: 767px) {
  .slides .slide .ipcCopy p:not(.ipcEyebrow):not(.ipcTagline):not(.ipcQuote p) {
    font-size: var(--ipc-body-lg);
    line-height: var(--ipc-lh-body-lg);
  }
}

/* The framework fades supporting copy with .opacity-7. The brand gets its
   quiet voice from a smaller tier, never from fade, so opacity comes back. */
.slides .opacity-7 { opacity: 1; }

/* ---- Surfaces ------------------------------------------------------------ */
/* Beige is the brand's page surface; White is the raised surface for cards.
   The framework's .white slide is repointed from white to Beige. */

.slides .slide.white,
.slides .slide.white .content { background: var(--surface-page); }
.slides .slide.white h1,
.slides .slide.white h2,
.slides .slide.white h3,
.slides .slide.white p { color: var(--text-primary); }

/* ---- Emphasis ------------------------------------------------------------ */
/* Colour only, never italic, and surface-aware: the deepened green on light
   grounds, Electric Green on dark. Getting this backwards fails contrast. */

.slides .slide.white .text-green-light,
.slides .slide.white em { color: var(--text-accent-light); font-style: normal; }
.slides .slide:not(.white) .text-green-light,
.slides .slide:not(.white) em { color: var(--text-accent-dark); font-style: normal; }

/* ---- Eyebrow ------------------------------------------------------------- */
/* Small uppercase label. No leading dash and no leading rule: the brand
   forbids both. Fresh Pine on light grounds, Electric Green on dark. */

.ipcEyebrow {
  margin: 0 0 var(--sys-space-6);
  font-size: var(--ipc-body-sm);
  font-weight: var(--ipc-weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.slide.white .ipcEyebrow  { color: var(--text-brand); }
.slide:not(.white) .ipcEyebrow { color: var(--text-accent-dark); }

/* ---- Gold kicker rule ---------------------------------------------------- */
/* Gold is the sanctioned decoration colour: kicker rules and quote marks. */

.ipcRule {
  width: 48px;
  height: 2px;
  background: var(--ipc-gold);
  margin-bottom: var(--sys-space-6);
}

/* ---- Buttons ------------------------------------------------------------- */
/* 2px radius, not a pill: this brand reads as a publication, not an app.
   Two families from the design system: light surfaces take the Fresh Pine
   fill (btn--primary); dark surfaces and the chrome bar take the Electric
   Green fill with Charcoal ink (btn--electric). The framework's `.green`
   utility ships `background` and `color` with !important, so the fills
   below have to match it in kind. */

.slides .button.green {
  border-radius: var(--sys-radius-sm);
  font-weight: var(--ipc-weight-semibold);
  letter-spacing: 0.01em;
}
.slides .slide.white .button.green {
  background: var(--surface-brand) !important;
  color: var(--text-on-dark) !important;
}
.slides .slide.white .button.green:hover { background: var(--text-accent-light) !important; }
.slides .slide:not(.white) .button.green,
.slides .panel .button.green,
.slides .sidebar .button.green {
  background: var(--ipc-electric-green) !important;
  color: var(--ipc-charcoal) !important;
}
.slides .slide:not(.white) .button.green:hover,
.slides .panel .button.green:hover,
.slides .sidebar .button.green:hover { background: var(--ipc-electric-green-medium) !important; }

/* ---- Imagery scrim ------------------------------------------------------- */
/* Photography keeps its full colour; a directional scrim carries the text
   side only, so the image is never flattened by an overall wash. */

.ipcScrim { position: absolute; inset: 0; pointer-events: none; }
.ipcScrim--left {
  /* Reaches further right than before so the widened hero headline stays on
     darkened ground across its full measure. */
  background: linear-gradient(90deg,
    rgba(19, 28, 31, 0.88) 0%, rgba(19, 28, 31, 0.62) 55%, rgba(19, 28, 31, 0.06) 96%);
}
.ipcScrim--right {
  background: linear-gradient(270deg,
    rgba(19, 28, 31, 0.88) 0%, rgba(19, 28, 31, 0.58) 46%, rgba(19, 28, 31, 0.06) 82%);
}

/* ---- Tagline lockup ------------------------------------------------------ */
/* Replaces group-292.png. Live text so the accent word and the mark cannot go
   missing, and so the French lockup is a copy change rather than a redraw. */

.ipcTagline {
  margin: var(--sys-space-8) 0 0;
  font-size: var(--sys-heading-lg-fluid);
  font-weight: var(--ipc-weight-bold);
  line-height: 1.1;
  color: var(--text-on-dark);
}
.ipcTagline span { color: var(--text-accent-dark); }
.ipcTagline sup { font-size: 0.42em; vertical-align: super; font-weight: var(--ipc-weight-semibold); }

/* ---- Chrome -------------------------------------------------------------- */
/* The bottom bar keeps its position and contents. The legacy Investment
   Planning Counsel lockup is replaced by the official IPC Wealth reversed
   logo, and the bar takes the brand surface. */

/* The framework ships `.panel.black { background-color: ... !important }`,
   so the override has to match it in kind. This is the only !important
   in this file; everything else wins on specificity alone. */
.slides .panel.black { background-color: var(--surface-brand) !important; }
/* The official file carries its clear space inside the viewBox, so the
   visible mark is about two thirds of the box. The bar logo runs larger
   than its cell and a negative margin gives the difference back, so the
   empty clear space overlaps the bar's padding and the bar keeps its
   height. */
.slides .ipcLogo { height: 3rem; width: auto; display: block; }
.slides .panel.bottom .ipcLogo { height: 4.25rem; margin: -0.625rem 0; }
@media (max-width: 767px) {
  .slides .ipcLogo { height: 2.25rem; }
  .slides .panel.bottom .ipcLogo { height: 3.25rem; margin: -0.5rem 0; }
}

/* Focus ring. The framework ships `*:focus { outline: 3px solid #83af5c
   !important }`, the old brand's lime, which lights up the whole side menu
   when it opens because the framework moves focus into it. Matched in kind
   with the design system's ring: 2px with a 3px offset so the surface shows
   through, Electric Green (legible on every surface in this piece). The
   ring shows for keyboard focus only; the sidebar container itself never
   shows one. */
.slides *:focus {
  outline-color: var(--ipc-electric-green) !important;
  outline-style: solid !important;
  outline-width: 2px !important;
  outline-offset: 3px;
}
.slides *:focus:not(:focus-visible) { outline-style: none !important; }
.slides .sidebar:focus,
.slides .slide:focus,
.slides .popup:focus { outline-style: none !important; }

/* Sidebar: official reversed logo at a readable size, the utility links and
   the language toggle anchored to the bottom, the framework's own spacing
   otherwise. The sidebar is a fixed 100% tall panel, so its content becomes
   a column that fills it and the sub menu takes the remaining space. */
.slides .sidebar .content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}
.slides .sidebar .logo { margin-bottom: var(--sys-space-8); }
.slides .ipcLogo--menu { height: 3.5rem; }
.slides .sidebar .ipcSubMenu {
  margin-top: auto;
  padding-top: var(--sys-space-8);
  opacity: 0.8;
}
/* Legal and privacy links: body-md, a step below the framework's 16px.
   Same 34px row as the framework's .subMenu.small li (20px line + 7px top
   and bottom), but a label that wraps (the French privacy link) keeps its
   lines together instead of spacing them like separate links. */
.slides .sidebar .ipcSubMenu li:not(.ipcLang) {
  font-size: var(--ipc-body-md);
  line-height: 20px;
  padding: 7px 0;
}
.slides .sidebar .ipcLang { margin-top: var(--sys-space-6); line-height: 1; }
/* Segmented language switch. Built from the design system's dark-surface
   button pair: the current language takes the Electric Green fill with
   Charcoal ink, the other is the ghost outline. 2px radius, not a pill. */
.ipcLangSwitch {
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-3);
}
/* Outranks the generic .ipcIcon colour rule further down the file. */
.slides .sidebar .ipcLangSwitch__icon {
  width: 24px;
  height: 24px;
  margin: 0;
  color: var(--text-accent-dark);
  flex: 0 0 auto;
}
.ipcLangSwitch__opt {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--text-on-dark);
  font-size: var(--ipc-body-sm);
  font-weight: var(--ipc-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  transition: background var(--sys-dur-fast) var(--sys-ease), border-color var(--sys-dur-fast) var(--sys-ease);
}
.ipcLangSwitch__opt:first-of-type { border-radius: var(--sys-radius-sm) 0 0 var(--sys-radius-sm); }
.ipcLangSwitch__opt:last-of-type  { border-radius: 0 var(--sys-radius-sm) var(--sys-radius-sm) 0; margin-left: -1px; }
.ipcLangSwitch__opt:hover { border-color: var(--text-on-dark); background: rgba(255, 255, 255, 0.07); }
.ipcLangSwitch__opt.is-active,
.ipcLangSwitch__opt.is-active:hover {
  background: var(--ipc-electric-green);
  border-color: var(--ipc-electric-green);
  color: var(--ipc-charcoal);
  position: relative;
  z-index: 1;
}
.ipcLangSwitch__opt:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 3px; }

/* Reviewer aid: copy that fell back to English on the French page shows a
   Gold outline when the html element carries data-i18n-review. */
html[data-i18n-review] [data-i18n-missing] { outline: 2px dashed var(--ipc-gold); outline-offset: 2px; }

/* The framework hard-codes Poppins on the advisor name fallback, which is the
   one place the old family survived the head-level repoint. */
.slides .advisorContactLink { font-family: "Nunito Sans", "Segoe UI", sans-serif; }

/* `.text-green-light` is the framework's accent span and ships !important, so
   the surface-aware override has to match it in kind. */
.slides .slide.white .text-green-light { color: var(--text-accent-light) !important; }
.slides .slide:not(.white) .text-green-light { color: var(--text-accent-dark) !important; }

/* ==========================================================================
   IWAB-9 : page components for pages 2 to 12
   --------------------------------------------------------------------------
   Every page keeps the composition it had when published. These classes
   restyle what sits inside that composition: copy blocks, cards, icons, the
   photo wrapper, callouts, the big stat, the shim, footnotes.
   ========================================================================== */

/* The framework's `.white` utility ships `background: #fff !important`, so
   the Beige page surface has to match it in kind. Second and last !important
   pair in this file. */
.slides .slide.white { background: var(--surface-page) !important; }
/* White variant of the light page, to break a run of Beige slices. Same
   framework !important to match; everything else inherits the .white rules. */
.slides .slide.white.ipcRaised { background: var(--surface-raised) !important; }

/* Charcoal page surface. converge uses ink as its dark feature surface (the
   Top 10 CTA card, the final CTA band); here it carries page 11's card grid,
   where a photograph would be almost entirely covered. Text on it follows
   the dark-surface rules already in place for :not(.white) slides. */
.slides .slide.ipcDark,
.slides .slide.ipcDark .content { background: var(--surface-dark); }

/* Fresh Pine page surface with the Star pattern, as converge's final CTA
   band and editorial split. The tile is the brand's own asset
   (design-system assets/patterns/Star-Pattern.svg, 233px, black fill). The
   dark variant renders the native fill at 4.5% opacity, inside converge's
   locked 3.5 to 5% range for black-on-green. IMAGERY.md: pattern OR support
   circles on a surface, never both, and only on a tall surface. */
.slides .slide.ipcPine { background: var(--surface-brand); }
.slides .slide.ipcPine .ipcPattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url(../design-system/assets/patterns/Star-Pattern.svg);
  background-size: 233px 233px;
  background-repeat: repeat;
  opacity: 0.045;
}

/* `.text-green` is the framework's light-surface accent and ships !important
   too. New markup uses <em>; this covers anything carried forward. */
.slides .slide.white .text-green { color: var(--text-accent-light) !important; }

/* ---- Component text colour ----------------------------------------------- */
/* `.slides .slide.white p` above is (0,3,1) and would outrank a bare component
   class, so these carry the same prefix and win on source order. */

.slides .slide .ipcCard h4,
.slides .slide .ipcFeature h4,
.slides .slide .ipcSubs h4,
.slides .slide .ipcQuote p { color: var(--text-brand); }
.slides .slide:not(.white) .ipcQuote p { color: var(--text-on-dark); }
.slides .slide .ipcCard p,
.slides .slide .ipcFeature p,
.slides .slide .ipcSubs p,
.slides .slide .ipcList li,
.slides .slide .ipcShim__text h2,
.slides .slide .ipcShim__text p { color: var(--text-primary); }
.slides .slide .ipcCallout__label { color: var(--text-on-dark); }
.slides .slide .ipcCallout__value,
.slides .slide .ipcShim__text em { color: var(--text-accent-dark); }
.slides .slide .ipcShim__text em { color: var(--text-accent-light); }

/* ---- Column gutter ------------------------------------------------------- */
/* The framework's two-column rows carry a 2% gutter each side, about 47px at
   full width, and page 4 had none at all. Copy beside a photograph or a
   figure block needs clear air between them, so the top-level rows in a page
   take the design system's 3rem on each side, 6rem between columns. The
   negative margins on the row keep the outer edges where the framework put
   them. Card and feature grids (.fixedSpaces) keep their own spacing, and at
   phone width the columns stack so the framework's own gutter returns. */
@media (min-width: 768px) {
  .slides .slide .wrap > .fix-12-12 > .flex:not(.fixedSpaces) {
    margin-left: calc(-1 * var(--sys-space-12));
    margin-right: calc(-1 * var(--sys-space-12));
  }
  .slides .slide .wrap > .fix-12-12 > .flex:not(.fixedSpaces) > [class*="col-"] {
    padding-left: var(--sys-space-12);
    padding-right: var(--sys-space-12);
  }
}

/* ---- Copy block ---------------------------------------------------------- */
/* The design system's spacing scale replaces the framework's margin-N utilities
   inside a copy block, so rhythm is the same on every page. */

.ipcCopy h1,
.ipcCopy h2 { margin: 0 0 var(--sys-space-6); }
.ipcCopy p  { margin: 0 0 var(--sys-space-6); max-width: var(--sys-measure); }
.ipcCopy p:last-child { margin-bottom: 0; }
.ipcCopy .ipcEyebrow { margin-bottom: var(--sys-space-4); }
/* The tagline is a <p> too; keep its own gap above rather than the copy rhythm. */
.ipcCopy .ipcTagline { margin: var(--sys-space-8) 0 0; }

/* Eyebrow used as a lead-in beneath a headline (PG 4) rather than above it. */
.ipcEyebrow--after { margin: var(--sys-space-4) 0 var(--sys-space-2); }

/* ---- Icons --------------------------------------------------------------- */
/* Set icons are line-only, stroke inherits `color`. 56px is the set's primary
   display size, where the 1-unit stroke renders at exactly 2px. Fresh Pine on
   light grounds, Electric Green on dark; never over photography (the cards on
   PG 11 are raised White surfaces, so the icon sits on the card). */

/* The framework's `.white svg` ships `fill: #202020 !important`, which turns
   a line icon into a silhouette, so the root has to match in kind. Paths
   inherit the root's `none`; the set's few fill="currentColor" dots carry
   their own attribute and keep it. */
.slides .ipcIcon { fill: none !important; }

.ipcIcon {
  display: block;
  width: 56px;
  height: 56px;
  stroke-width: 1;
  color: var(--text-brand);
  margin-bottom: var(--sys-space-4);
}
.slide:not(.white) .ipcIcon { color: var(--text-accent-dark); }
/* A card is a raised White surface wherever it sits, so its icon is always
   Fresh Pine: Electric Green on a light surface is the brand's easiest
   violation. Outranks the :not(.white) rule above. */
.slides .slide .ipcCard .ipcIcon { color: var(--text-brand); }
.center .ipcIcon { margin-left: auto; margin-right: auto; }

/* ---- Feature columns (PG 4) --------------------------------------------- */
/* Three centred columns, as published. */

.ipcFeatures { margin-top: var(--sys-space-6); }
.ipcFeature h4 {
  margin: 0 0 var(--sys-space-2);
  color: var(--text-brand);
  font-size: var(--ipc-heading-sm);
  font-weight: var(--ipc-weight-semibold);
}
.ipcFeature p { margin: 0; font-size: var(--ipc-body-lg); line-height: var(--ipc-lh-body-lg); }

/* ---- Cards (PG 6, PG 11) ------------------------------------------------- */
/* Raised White on the Beige page, hairline border, 2px radius. On PG 11 the
   grid sits over photography, so the card carries a soft shadow instead of a
   hairline. All six cards are equal: the framework's first-card-highlight
   was a hover affordance for a popup that no longer exists. */

.ipcCards { margin-top: var(--sys-space-8); }
.ipcCard {
  text-align: left;
  height: 100%;
  box-sizing: border-box;
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--sys-radius-sm);
  padding: var(--sys-space-8) var(--sys-space-6);
  color: var(--text-primary);
}
.ipcCard h4 {
  margin: 0 0 var(--sys-space-2);
  color: var(--text-brand);
  font-size: var(--ipc-heading-sm);
  font-weight: var(--ipc-weight-semibold);
}
.ipcCard p { margin: 0; color: var(--text-primary); font-size: var(--ipc-body-lg); line-height: var(--ipc-lh-body-lg); }
.ipcCards--onPhoto .ipcCard {
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(19, 28, 31, 0.28);
}
.ipcCards .flex > li { margin-bottom: var(--sys-space-4); }

/* ---- Photo wrapper ------------------------------------------------------- */
/* Inline photography inside a column. 2px radius; the support circle is
   part of the image file. */

.ipcPhoto {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--sys-radius-sm);
  line-height: 0;
}
.ipcPhoto img { display: block; width: 100%; height: auto; max-width: none; }

/* ---- Callouts (PG 7) ----------------------------------------------------- */
/* Three centred figures over a photograph, as published. Numerals are
   Electric Green on the darkened photo; labels are white. */

.ipcCallouts__lead { margin: 0 0 var(--sys-space-6); }
.ipcCallout__value {
  margin: 0 0 var(--sys-space-2);
  color: var(--text-accent-dark);
  font-size: var(--ipc-display-md);
  font-weight: var(--ipc-weight-bold);
  line-height: 1;
}
.ipcCallout__label {
  margin: 0;
  color: var(--text-on-dark);
  font-size: var(--ipc-body-md);
  line-height: var(--ipc-lh-body-md);
}

/* ---- Statement list (PG 8) ---------------------------------------------- */
/* Three lines with a short Gold rule as the marker. */

.ipcList { list-style: none; margin: var(--sys-space-2) 0 0; padding: 0; }
.ipcList li {
  position: relative;
  padding-left: calc(24px + var(--sys-space-4));
  margin-bottom: var(--sys-space-4);
  font-size: var(--ipc-body-xl);
  font-weight: var(--ipc-weight-regular);
  line-height: var(--ipc-lh-body-xl);
  color: var(--text-primary);
}
.ipcList li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.8em;
  width: 24px; height: 2px;
  background: var(--ipc-gold);
}

/* ---- Sub-sections (PG 10) ------------------------------------------------ */

.ipcSubs { list-style: none; margin: var(--sys-space-2) 0 0; padding: 0; }
.ipcSubs li + li { margin-top: var(--sys-space-6); }
.ipcSubs h4 {
  margin: 0 0 var(--sys-space-2);
  color: var(--text-brand);
  font-size: var(--ipc-heading-sm);
  font-weight: var(--ipc-weight-semibold);
}
.ipcSubs p { margin: 0; }

/* ---- Callout quote (PG 5) ------------------------------------------------ */
/* Gold quote mark: Gold is the sanctioned decoration colour for quote marks. */

.ipcQuote {
  position: relative;
  margin: var(--sys-space-8) 0 0;
  padding: 0 0 0 var(--sys-space-12);
  border: 0;
}
.ipcQuote__mark {
  position: absolute;
  left: 0; top: -0.18em;
  color: var(--ipc-gold);
  font-size: var(--ipc-display-lg);
  font-weight: var(--ipc-weight-bold);
  line-height: 1;
}
.ipcQuote p {
  margin: 0;
  color: var(--text-brand);
  font-size: var(--ipc-heading-md);
  font-weight: var(--ipc-weight-semibold);
  line-height: 1.3;
}

/* ---- Beige shim (PG 9) --------------------------------------------------- */
/* The converge system's alternate hero: photograph in part of the frame, a
   solid page-surface panel under the copy in the rest. The panel covers the
   right of the slide; the flex grid's empty left cell keeps the copy over it. */

.ipcShim {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 58%;
  background: var(--surface-page);
  z-index: 2;
}
.ipcShimSlide .content { z-index: 3; }
/* The photograph occupies only the left 42%, so the background is sized to
   that region and the photo is cover-fitted to it; the subject stays centred
   in the visible part instead of being cut by the shim. */
.scroll .slide.ipcShimSlide .background { width: 42%; overflow: hidden; }
.ipcShim__text h2,
.ipcShim__text p { color: var(--text-primary); }
.ipcShim__text em { color: var(--text-accent-light); }
.ipcShim__text h2 em { color: var(--text-accent-light); }
@media (max-width: 1023px) {
  .ipcShim { width: 100%; top: 40vh; }
  .ipcShimSlide .flex > li.col-5-12 { min-height: 40vh; }
  .scroll .slide.ipcShimSlide .background { width: 100%; height: 40vh; min-height: 0; }
}

/* Scrim stacks above the animated background on every photo page. */
.ipcScrim { z-index: 2; }
.slides .slide .content { z-index: 3; }

/* ---- Scroll cue (PG 1) --------------------------------------------------- */
/* A small chevron, centred and clear of the fixed bottom bar, that nudges
   down to say there is more below. A soft Charcoal shadow keeps it legible
   over busy parts of the photo. With reduced motion it stays still. */
.slides .slide .ipcScrollCue {
  position: absolute;
  left: 50%;
  bottom: calc(72px + var(--sys-space-8));
  z-index: 3;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 6px rgba(19, 28, 31, 0.55));
  pointer-events: none;
}
/* Chevron: two 2px strokes, the corner of a square turned 45 degrees. */
.ipcScrollCue__arrow {
  display: block;
  width: 1rem;
  height: 1rem;
  border-right: 2px solid rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .ipcScrollCue__arrow { animation: ipcScrollCue 2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
}
@keyframes ipcScrollCue {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(0.5rem) rotate(45deg); }
}
@media (max-width: 767px) {
  .slides .slide .ipcScrollCue { bottom: calc(72px + var(--sys-space-6)); }
}

/* ---- Footnotes (PG 12) --------------------------------------------------- */
.slides .slide .ipcFootnotes p.ipcFootnote {
  margin: 0;
  font-size: 0.6875rem;          /* 11px */
  font-weight: var(--ipc-weight-regular);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-on-dark);
  opacity: 0.72;
  /* Wide measure on purpose: these are reference notes, not reading copy,
     so fewer lines keeps them quieter. The column above sets the width. */
  max-width: none;
}
.slides .slide .ipcFootnotes sup { font-size: 0.8em; }

/* ---- Phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .ipcIcon { width: 48px; height: 48px; }
  .ipcCard { padding: var(--sys-space-6) var(--sys-space-4); }
  .ipcCallout__value { font-size: var(--ipc-heading-xl); }
  .ipcQuote { padding-left: var(--sys-space-8); }
  .ipcQuote p { font-size: var(--ipc-heading-sm); }
}

/* ---- Counting figures ---------------------------------------------------- */
/* js/rebrand.js counts percentage figures up as they scroll into view and
   keeps the final value in this visually hidden copy for screen readers. */
.ipcSr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Digits keep one width while counting, so the % sign does not jitter. */
.ipcCount-on [data-ipc-count] { font-variant-numeric: tabular-nums; }
/* Ratio figures also rise into place as they count. */
.ipcCount-on .ipcCount--ratio > [aria-hidden] {
  display: inline-block;
  transition: opacity 0.7s ease 0.175s, transform 0.98s cubic-bezier(0.22, 1, 0.36, 1) 0.175s;
}
.ipcCount-on .ipcCount--ratio:not(.is-counted) > [aria-hidden] { opacity: 0; transform: translateY(0.3em); }

/* ==========================================================================
   Page layouts IPC chose (IWAB-16, finalised 2026-09-30)
   --------------------------------------------------------------------------
   Each page that uses one of the design-option layouts keeps its
   <div class="ipcAlt ipcAlt--<surface>" data-v="x"> wrapper and the
   section's data-ipc-variant="x"; these rules are scoped through both.
   Folded from rebrand-options.css by tools/options_finalize.py, which kept
   only the rules the chosen layouts can match.

   No photograph sits behind type in any layout. Type sits on a colour
   surface; photographs are framed, banded, or beside an arced Fresh Pine
   panel (design-system IMAGERY.md, "The arced panel").
   ========================================================================== */

/* ---- Surfaces ------------------------------------------------------------- */
/* Each alternate paints its own surface over the slice and sets its own
   text colours through these variables, so the slice's framework classes
   (.white and friends) never decide the colours. */

.ipcAlt {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  --a-head: var(--text-brand);
  --a-text: var(--text-primary);
  --a-accent: var(--text-accent-light);
  --a-hair: var(--border-hairline);
  --a-fig: var(--text-accent-light);
  --a-fig2: var(--text-brand);
  --a-icon: var(--text-brand);
}
.ipcAlt--beige { background: var(--surface-page); }
.ipcAlt--white { background: var(--surface-raised); }
.ipcAlt--pine { background: var(--surface-brand); }
.ipcAlt--charcoal { background: var(--surface-dark); }
.ipcAlt--pine,
.ipcAlt--charcoal,
.ipcA-onDark {
  --a-head: var(--text-on-dark);
  --a-text: var(--text-on-dark);
  --a-accent: var(--text-accent-dark);
  --a-hair: var(--border-on-dark);
  --a-fig: var(--text-accent-dark);
  --a-fig2: var(--text-accent-dark);
}
/* Hero and contact keep full height, clear of the fixed bottom bar. */
.ipcAlt--full { min-height: 100vh; }

.ipcA-in {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1200px + 2 * var(--sys-gutter));
  margin: 0 auto;
  padding: clamp(4rem, 7vw, 6rem) var(--sys-gutter);
}
/* More breathing room above and below a dense two-column slice (07 A). */
.ipcA-in--roomy { padding-top: clamp(5.5rem, 10vw, 9rem); padding-bottom: clamp(5.5rem, 10vw, 9rem); }

/* ---- Type ----------------------------------------------------------------- */
/* Prefixed to outrank rebrand.css's slide-level colour and size rules. */

.slides .slide .ipcAlt .ipcA-eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--ipc-weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-accent);
}
.slides .slide .ipcAlt .ipcA-h {
  margin: 0;
  max-width: none;
  font-size: var(--sys-display-md-fluid);
  font-weight: var(--ipc-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--a-head);
  text-wrap: balance;
}
.slides .slide .ipcAlt .ipcA-h--lg { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.04; }
.slides .slide .ipcAlt .ipcA-h--hero-xl {
  font-size: clamp(3rem, 7.2vw, 6.25rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 12ch;
}
.slides .slide .ipcAlt em { font-style: normal; color: var(--a-accent); }
.slides .slide .ipcAlt .text-green-light { color: var(--a-accent) !important; }
.slides .slide .ipcAlt .ipcA-p {
  margin: 0;
  max-width: none;
  font-size: var(--ipc-body-xl);
  font-weight: var(--ipc-weight-regular);
  line-height: var(--ipc-lh-body-xl);
  color: var(--a-text);
}
.slides .slide .ipcAlt .ipcA-p--sm { font-size: var(--ipc-body-lg); line-height: var(--ipc-lh-body-lg); }
.slides .slide .ipcAlt .ipcA-lead {
  margin: 0;
  font-size: var(--ipc-heading-sm);
  font-weight: var(--ipc-weight-semibold);
  line-height: 1.3;
  color: var(--a-head);
}
.slides .slide .ipcAlt .ipcA-t {
  margin: 0;
  font-size: var(--ipc-heading-sm);
  font-weight: var(--ipc-weight-semibold);
  line-height: 1.3;
  color: var(--a-head);
}
.slides .slide .ipcAlt .ipcA-t--lg { font-size: var(--ipc-heading-md); }
.slides .slide .ipcAlt .ipcTagline { margin: var(--sys-space-2) 0 0; color: var(--a-head); }
.slides .slide .ipcAlt .ipcTagline span { color: var(--a-accent); }
.slides .slide .ipcAlt .ipcIcon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  stroke-width: 1.25;
  color: var(--a-icon);
}
.slides .slide .ipcAlt .ipcA-list .ipcIcon { width: 2.25rem; height: 2.25rem; }

.ipcA-stack { display: flex; flex-direction: column; gap: var(--sys-space-6); }
.ipcA-stack--tight { gap: var(--sys-space-3); }
.ipcA-stack--loose { gap: var(--sys-space-8); }

/* ---- Layout --------------------------------------------------------------- */

.ipcA-split {
  display: grid;
  grid-template-columns: var(--cols, 1fr 1fr);
  gap: var(--sys-space-12) clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.ipcA-split--top { align-items: start; }
@media (max-width: 1023px) {
  .ipcA-split--md { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ipcA-split { grid-template-columns: 1fr; }
}

/* ---- Photographs ---------------------------------------------------------- */
/* Framed: a clean crop, never under type. The ring is the design system's
   support circle (reference/photography.html), used on the hero only. */

.ipcA-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 3);
  background: var(--surface-sunken);
}
.ipcA-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.ipcA-ring {
  position: absolute;
  width: var(--ring-size, 118%);
  aspect-ratio: 1;
  top: var(--ring-top, -16%);
  right: var(--ring-right, -34%);
  box-sizing: border-box;
  border: 1.75px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  pointer-events: none;
}
@media (max-width: 767px) {
  .ipcA-photo--phoneWide { --ratio: 4 / 3; }
}

/* ---- Figures -------------------------------------------------------------- */

.ipcA-stat { flex: 1 1 14rem; display: flex; flex-direction: column; gap: var(--sys-space-3); }
.ipcA-stat--rule { border-top: 1px solid var(--a-hair); padding-top: var(--sys-space-6); }
/* In a column of figures (02 A) each figure keeps its own height. */
.ipcA-stack--figs > .ipcA-stat { flex: none; }
.slides .slide .ipcAlt .ipcA-stat__v {
  margin: 0;
  font-size: var(--fig, clamp(3.5rem, 7vw, 6rem));
  font-weight: var(--ipc-weight-bold);
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--a-fig);
}
.slides .slide .ipcAlt .ipcA-stat__v--2 { color: var(--a-fig2); }
.slides .slide .ipcAlt .ipcA-stat__l {
  margin: 0;
  max-width: 22rem;
  font-size: var(--ipc-body-lg);
  line-height: 1.5;
  color: var(--a-text);
}
.slides .slide .ipcAlt .ipcA-stat__l--lg { font-size: var(--ipc-body-xl); }
.ipcA-stat--l { --fig: clamp(4rem, 8.5vw, 7.5rem); }
.ipcA-stat--m { --fig: clamp(3rem, 6vw, 5.5rem); }

/* Two figures side by side, divided by a hairline (03 B, 10 B). */
.ipcA-pair {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.ipcA-pair__rule { align-self: stretch; background: var(--a-hair); }
@media (max-width: 767px) {
  .ipcA-pair { grid-template-columns: 1fr; }
  .ipcA-pair__rule { height: 1px; }
}

/* Ranked bars (07 A): three shares compared, so bars earn their place. */
.ipcA-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sys-space-8); }
.ipcA-bar__row { display: flex; align-items: baseline; gap: var(--sys-space-4); }
.slides .slide .ipcAlt .ipcA-bar__v {
  flex: 0 0 6.5rem;
  margin: 0;
  font-size: clamp(2.25rem, 3.6vw, 2.75rem);
  font-weight: var(--ipc-weight-bold);
  line-height: 1;
  white-space: nowrap;
  color: var(--a-fig);
}
.slides .slide .ipcAlt .ipcA-bar__l { margin: 0; font-size: var(--ipc-body-xl); line-height: 1.35; color: var(--a-text); }
.ipcA-bar__track { height: 8px; margin-top: var(--sys-space-3); border-radius: 1px; background: rgba(255, 255, 255, 0.12); }
.ipcA-bar__fill { width: var(--pct); height: 100%; border-radius: 1px; background: var(--ipc-electric-green); }
/* The bars grow as the figures count (js/rebrand.js adds these classes, so
   without script or with reduced motion the bars are simply full). */
.ipcCount-on .ipcA-bar__fill {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.98s cubic-bezier(0.22, 1, 0.36, 1) 0.175s;
}
.ipcCount-on .ipcA-bars.is-counted .ipcA-bar__fill { transform: none; }

/* ---- Lists and cards ------------------------------------------------------ */

.ipcA-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ipcA-list > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sys-space-6);
  align-items: start;
  padding: var(--sys-space-6) 0;
  border-top: 1px solid var(--a-hair);
}
.ipcA-list > li > div { display: flex; flex-direction: column; gap: var(--sys-space-2); }
.ipcA-list--lg > li { padding: var(--sys-space-8) 0; }

.ipcA-col { display: flex; flex-direction: column; gap: var(--sys-space-3); padding-top: var(--sys-space-6); border-top: 1px solid var(--a-hair); }
.ipcA-col .ipcIcon { margin-bottom: var(--sys-space-2) !important; }

.ipcA-quote { display: grid; grid-template-columns: auto 1fr; gap: var(--sys-space-4); margin: var(--sys-space-4) 0 0; padding: 0; }
.ipcA-quote__mark { font-size: 4.5rem; font-weight: var(--ipc-weight-bold); line-height: 0.8; color: var(--a-accent); }
.slides .slide .ipcAlt .ipcA-quote p {
  margin: 0;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: var(--ipc-weight-semibold);
  line-height: 1.3;
  color: var(--a-head);
}

/* ---- Figure band (10 B) --------------------------------------------------- */

.ipcA-band { background: var(--surface-brand); }
.ipcA-band .ipcA-in { padding-top: clamp(3.5rem, 6vw, 5rem); padding-bottom: clamp(3.5rem, 6vw, 5rem); }

/* ---- Support circles on solid colour (12 A) ------------------------------ */
/* Two equal overlapping circles bleeding off the top-right corner, so each
   reads as a sweeping arc from the top edge to the right edge (Ben's markup,
   30 Sep, after IPC's own LinkedIn banner and stationery mockups). The
   stroke is fainter than the photo ring, as in those mockups. Each circle
   is set by its centre (--cx from the right edge, --cy from the top;
   negative means outside the page) and radius --r. The box covers the page
   and clips everything outside it. */

.ipcA-circles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ipcA-circles > span {
  position: absolute;
  right: calc(var(--cx) - var(--r));
  top: calc(var(--cy) - var(--r));
  width: calc(var(--r) * 2);
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 1.75px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
.ipcA-circles > span { --r: 34vw; }
.ipcA-circles > span:first-child { --cx: 6.1vw; --cy: -10.6vw; }
.ipcA-circles > span:last-child { --cx: -11.7vw; --cy: 7vw; }
@media (max-width: 767px) {
  /* The copy starts below the arcs, so no ring runs through the headline. */
  .ipcA-circles ~ .ipcA-end .ipcA-in { padding-top: calc(var(--sys-space-8) + 30vw); }
}

/* ---- Hero and contact ----------------------------------------------------- */

.ipcA-end {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: calc(72px + var(--sys-space-8));
}
.ipcA-end__body { flex: 1 0 auto; display: flex; align-items: center; }
.ipcA-end__foot { box-sizing: border-box; width: 100%; max-width: calc(1200px + 2 * var(--sys-gutter)); margin: 0 auto; padding: var(--sys-space-8) var(--sys-gutter) 0; }
.slides .slide .ipcAlt .ipcA-end__foot p.ipcFootnote {
  max-width: 60rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--ipc-weight-regular);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-on-dark);
  opacity: 0.72;
}
.slides .slide .ipcAlt .ipcA-end__foot sup { font-size: 0.8em; }
.slides .slide .ipcAlt .ipcA-cta { align-self: flex-start; margin-top: var(--sys-space-2); }

.slides .slide[data-name="home"][data-ipc-variant="c"] .ipcScrollCue { filter: none; }
.slides .slide[data-name="home"][data-ipc-variant="c"] .ipcScrollCue__arrow { border-color: var(--text-brand); }
/* 01 split: centred under the headline column, never over the photograph. */
.slides .slide[data-name="home"][data-ipc-variant="c"] .ipcScrollCue { left: 26%; }
@media (max-width: 1023px) {
  .slides .slide[data-name="home"][data-ipc-variant="c"] .ipcScrollCue { left: 50%; }
}

/* ---- Replacement layouts, 27 Sep (data-v="c") ---------------------------- */
/* These replace the four current layouts that set type over a photograph
   (pages 1, 2, 5 and 7), which the brand does not allow. */

/* 01: after page 9's current layout. The photograph sits flush against the
   right edge at full height, the headline on Beige beside it. */
.ipcA-heroSplit { display: grid; grid-template-columns: 1fr 48%; min-height: 100vh; }
.ipcA-heroSplit__photo { position: relative; margin: 0; overflow: hidden; order: 2; }
.ipcA-heroSplit__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* Support ring, sized so its arc clears the mother's head with room to spare
   (IPC feedback, 30 Sep: the old 161% ring ran across her hair). Tablet and
   phone crop the photo differently and leave little room above her head, so
   each gets its own geometry, set below, that passes above her and the
   grandmother. */
.ipcA-heroSplit__photo .ipcA-ring { --ring-size: 185%; --ring-right: -82%; --ring-top: -4%; }
.ipcA-heroSplit__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sys-space-6);
  box-sizing: border-box;
  padding: clamp(5rem, 8vw, 7rem) clamp(2rem, 5vw, 5rem) calc(72px + clamp(3rem, 6vw, 5rem)) max(var(--sys-gutter), calc((100vw - 1200px) / 2));
}
@media (max-width: 1023px) {
  .ipcA-heroSplit { grid-template-columns: 1fr; grid-template-rows: 44vh auto; }
  .ipcA-heroSplit__photo { order: 0; }
  .ipcA-heroSplit__photo .ipcA-ring { --ring-size: 250%; --ring-right: -99.5%; --ring-top: -7%; }
  .ipcA-heroSplit__copy { padding: var(--sys-space-12) var(--sys-gutter) calc(72px + var(--sys-space-12)); }
}
@media (max-width: 767px) {
  .ipcA-heroSplit__photo .ipcA-ring { --ring-size: 235%; --ring-right: -92%; --ring-top: 5.6%; }
}