/* ============================================================
   J&J IBD Summit 2026 — Website design system
   Johnson & Johnson Innovative Medicine
   Derived from approved web mockups + JnJ_Event_Branding_SKILL.md
   Type: Johnson Display / Johnson Text  → Arial (J&J fallback)
   ============================================================ */

/* ------------------------------------------------------------
   Brand font — Johnson Display (Bold cut, used 400–700 across
   headings and taglines via --font-display). Body text
   (--font-text) intentionally uses Arial, J&J's specified
   fallback. File lives in assets/fonts/. See assets/fonts/README.md.
------------------------------------------------------------- */
@font-face {
  font-family: "Johnson Display";
  src: url("/assets/fonts/JohnsonDisplay.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand primaries (exact J&J values) ---- */
  --red:    #EB1700;        /* J&J Red · RGB 235/23/0 · Pantone 2347 */
  --red-700:#C01200;        /* hover / pressed */
  --white:  #FFFFFF;
  --ink:    #1A1A1A;        /* body text — black on white only */

  /* ---- Warm (taupe) neutrals — exact J&J warm-gray scale (support only) ---- */
  --paper:  #F1EFED;        /* warm gray 02 — soft off-white section bg */
  --paper-2:#F8F8F7;        /* warm gray 01 */
  --wg03:   #E8E6E3;        /* warm gray 03 */
  --wg04:   #D5CFC9;        /* warm gray 04 */
  --wg05:   #C1B8B3;        /* warm gray 05 */
  --wg06:   #6E635A;        /* warm gray 07, darkened to meet AA (4.5:1) for small text */
  --line:   #E8E6E3;        /* hairline dividers (warm gray 03) */
  --footer-bg:#1A1A1A;      /* near-black footer (logo: white on black is approved) */

  /* ---- Accents (≤5% — illustration/data/photography ONLY, never UI/panels/body) ---- */
  --yellow:#FBE058; --orange:#FF6017; --maroon:#9E0000;
  --violet:#8C3888; --blue:#004685; --green:#329714;

  /* ---- Type ---- */
  --font-display: "Johnson Display", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-text:    "Johnson Text", Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* ---- Type scale (fluid modular, base 16px · ~1.25) ---- */
  --fs-100: .80rem;                                   /* 12.8 — eyebrow / labels / legal */
  --fs-200: .875rem;                                  /* 14   — captions / meta */
  --fs-300: 1rem;                                     /* 16   — body (minimum) */
  --fs-400: clamp(1.06rem, .92rem + .6vw, 1.22rem);   /* lead / intro */
  --fs-500: clamp(1.18rem, .98rem + .9vw, 1.45rem);   /* large body / h4 / card titles */
  --fs-600: clamp(1.4rem, 1.05rem + 1.5vw, 2rem);     /* h3 / display-m */
  --fs-700: clamp(1.85rem, 1.2rem + 2.7vw, 2.9rem);   /* h2 / section heads / panel titles */
  --fs-800: clamp(2.4rem, 1.4rem + 4.2vw, 3.7rem);    /* display-l / stat numerals */
  --fs-900: clamp(2.9rem, 1.4rem + 6.2vw, 5rem);      /* display-xl / hero / guide hero */
  /* line-heights */
  --lh-tight: 1.02;        /* display */
  --lh-heading: 1.12;      /* headings/subheads */
  --lh-body: 1.55;         /* body copy */
  /* tracking */
  --ls-eyebrow: .12em;

  /* ---- Layout ---- */
  --maxw: 1320px;
  --gut:  clamp(20px, 5vw, 64px);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(40,20,15,.07);
  --shadow-sm: 0 4px 14px rgba(40,20,15,.06);
}

/* ---------- Reset ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-text);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration:none; }
ul { list-style:none; }

/* ---------- Accessibility: visible focus, reduced motion, anchor offset ---------- */
:focus-visible { outline:3px solid var(--red); outline-offset:3px; border-radius:3px; }
/* on red/dark surfaces the ring must switch to white to stay visible */
.ctaband a:focus-visible, .prow.red:focus-visible, .hero2-cta .btn:focus-visible,
.btn--white:focus-visible, .guide-hero a:focus-visible, .stage-rail a:focus-visible,
.site-footer a:focus-visible, .hcp-strip a:focus-visible { outline-color:#fff; }
/* skip link */
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--red); color:#fff;
  padding:12px 18px; font-weight:700; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }
/* sticky-header offset so in-page anchors aren't hidden under the nav */
section[id], [id].topic { scroll-margin-top:88px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .mosaic .panel { opacity:1 !important; transform:none !important; }
}

/* ---------- Typographic helpers ---------- */
.eyebrow {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-100);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--red);
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight:700; color:var(--ink); line-height:var(--lh-tight); letter-spacing:-.01em; }
.display-xl { font-size: var(--fs-900); color: var(--red); line-height:var(--lh-tight); }
.display-l  { font-size: var(--fs-800); color: var(--red); }
.display-m  { font-size: var(--fs-600); }
.lead { font-size: var(--fs-400); color:#3a3a3a; line-height:var(--lh-body); max-width:62ch; }
.muted { color: var(--wg06); }
.tab { width:56px; height:5px; background:var(--red); border:0; border-radius:2px; margin:0 0 20px; }
.center { text-align:center; }
.center .tab { margin-left:auto; margin-right:auto; }

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gut); }
section { padding-block: clamp(48px, 8vw, 96px); }
.section-head { margin-bottom: 40px; }
.grid { display:grid; gap:28px; }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:900px){ .cols-3,.cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cols-2,.cols-3,.cols-4 { grid-template-columns:1fr; } }

.bg-paper { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-text); font-weight:700; font-size:.98rem;
  padding:.85em 1.5em; border-radius:999px; border:2px solid var(--red);
  background:var(--red); color:var(--white); cursor:pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background:var(--red-700); border-color:var(--red-700); }
.btn:active { transform:translateY(1px); }
.btn--ghost { background:transparent; color:var(--red); }
.btn--ghost:hover { background:var(--red); color:var(--white); }
.btn--white { background:var(--white); border-color:var(--white); color:var(--red); }
.btn--white:hover { background:rgba(255,255,255,.88); border-color:rgba(255,255,255,.88); }
.btn .arrow { font-size:1.1em; line-height:0; }

/* ---------- Header / nav ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav { display:flex; align-items:center; gap:24px; height:72px; }
.brandmark { display:flex; flex-direction:column; line-height:1.02; font-family:var(--font-display); }
.brandmark .l1 { font-weight:700; color:var(--ink); font-size:1.06rem; letter-spacing:-.02em; }
.brandmark .l2 { font-weight:400; color:var(--red); font-size:.82rem; letter-spacing:0; }
/* Official J&J IBD Summit logo lockup (real artwork — never over imagery) */
.brand-logo { height:44px; width:auto; display:block; }
@media (max-width:520px){ .brand-logo { height:38px; } }
.site-footer .brand-logo { height:50px; margin-bottom:8px; }

/* ============================================================
   HOMEPAGE v3 — "Structured & Scientific" (grid-driven, agenda-forward)
   ============================================================ */
.sci-hero { border-bottom:1px solid var(--line); padding:0; }
.sci-hero .wrap { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,4vw,60px); align-items:center; padding-block:clamp(40px,5.5vw,76px); }
.sci-hero .eyebrow { margin-bottom:14px; }
.sci-hero h1 { color:var(--red); font-size:clamp(2.4rem,1rem + 4vw,3.9rem); line-height:1.02; }
.sci-hero .tagline { font-family:var(--font-display); font-weight:400; color:var(--ink); font-size:var(--fs-600); margin-top:.35em; line-height:var(--lh-heading); }
.sci-hero .intro { font-size:var(--fs-400); color:#3a3a3a; margin-top:18px; max-width:48ch; line-height:var(--lh-body); }
.sci-hero .actions { margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; }
.sci-hero .photo { aspect-ratio:4/3.6; overflow:hidden; border:1px solid var(--line); }
.sci-hero .photo img { width:100%; height:100%; object-fit:cover; object-position:50% 28%; }
@media (max-width:820px){ .sci-hero .wrap { grid-template-columns:1fr; } .sci-hero .photo { order:-1; aspect-ratio:16/10; } }

/* Key-facts data strip */
.factbar { border-bottom:1px solid var(--line); background:#fff; }
.factbar .wrap { display:grid; grid-template-columns:repeat(4,1fr); padding-block:0; }
.factbar .cell { padding:clamp(18px,2.2vw,28px) clamp(16px,2vw,28px); border-left:1px solid var(--line); display:flex; flex-direction:column; gap:7px; }
.factbar .cell:first-child { border-left:0; padding-left:0; }
.factbar .k { font-size:var(--fs-100); letter-spacing:.1em; text-transform:uppercase; color:var(--wg06); font-weight:700; }
.factbar .v { font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:var(--fs-400); line-height:1.15; }
.factbar .v.is-red { color:var(--red); }
@media (max-width:720px){ .factbar .wrap { grid-template-columns:1fr 1fr; } .factbar .cell { border-left:0; border-top:1px solid var(--line); padding:18px 0; } .factbar .cell:nth-child(odd){ padding-right:18px; } .factbar .cell:nth-child(-n+2){ border-top:0; } }

/* Numbered section heads */
.sci-section { padding-block:clamp(46px,6.5vw,92px); }
.sci-section.alt { background:var(--paper); }
.sci-head { display:flex; align-items:baseline; gap:16px; border-bottom:2px solid var(--red); padding-bottom:14px; margin-bottom:clamp(26px,3.5vw,44px); }
.sci-head .num { font-family:var(--font-display); font-weight:700; color:var(--red); font-size:var(--fs-500); font-variant-numeric:tabular-nums; }
.sci-head h2 { color:var(--ink); font-size:var(--fs-700); line-height:1; }
.sci-head .more { margin-left:auto; align-self:center; font-size:var(--fs-200); font-weight:700; color:var(--red); white-space:nowrap; }
.sci-head .more .arrow { font-size:1.1em; }

/* Programme preview — two day columns */
.prog { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); background:#fff; }
.prog .day { padding:clamp(20px,2.5vw,34px); }
.prog .day + .day { border-left:1px solid var(--line); }
.prog .day .day-h { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.prog .day .day-h .d { font-family:var(--font-display); font-weight:700; color:var(--red); font-size:var(--fs-500); }
.prog .day .day-h .dl { font-size:var(--fs-100); letter-spacing:.08em; text-transform:uppercase; color:var(--wg06); font-weight:700; }
.prog .row { display:grid; grid-template-columns:62px 1fr; gap:14px; padding:13px 0; border-top:1px solid var(--line); }
.prog .row .t { font-family:var(--font-display); font-weight:700; color:var(--red); font-size:var(--fs-200); font-variant-numeric:tabular-nums; padding-top:2px; }
.prog .row .s { font-size:var(--fs-300); color:var(--ink); line-height:1.3; }
@media (max-width:720px){ .prog { grid-template-columns:1fr; } .prog .day + .day { border-left:0; border-top:1px solid var(--line); } }

/* Scientific themes — hairline matrix */
.themes { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.themes .theme { padding:clamp(22px,2.6vw,34px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.themes .theme .n { font-family:var(--font-display); font-weight:700; color:var(--red); font-size:var(--fs-200); font-variant-numeric:tabular-nums; }
.themes .theme h3 { font-family:var(--font-display); font-size:var(--fs-500); color:var(--ink); margin-top:10px; line-height:1.12; }
.themes .theme p { font-size:var(--fs-200); color:#4a4a4a; margin-top:8px; line-height:1.4; }
@media (max-width:820px){ .themes { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .themes { grid-template-columns:1fr; } }

/* Two-column structured blocks (faculty / venue) */
.sci-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,48px); align-items:center; }
.sci-split .panel { border:1px solid var(--line); padding:clamp(24px,3vw,40px); }
.sci-split .v-art { color:var(--wg04); } .sci-split .v-art svg { width:100%; height:auto; display:block; }
.media-frame { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.media-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.sci-split .media-frame { aspect-ratio:4/3; }
.venue-wide { margin-top:clamp(20px,3vw,34px); aspect-ratio:48/16; }
.venue-wide.tall { aspect-ratio:3/1; }
@media (max-width:720px){ .venue-wide { aspect-ratio:16/9; } }
.sci-split h3 { font-family:var(--font-display); font-size:var(--fs-500); color:var(--ink); }
.sci-split p { color:#4a4a4a; margin-top:8px; font-size:var(--fs-300); }
.sci-split .meta-mini { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
.sci-split .meta-mini .k { font-size:var(--fs-100); letter-spacing:.08em; text-transform:uppercase; color:var(--wg06); font-weight:700; }
.sci-split .meta-mini .vv { font-size:var(--fs-300); color:var(--ink); margin-top:4px; }
.fac-line { display:flex; align-items:flex-start; gap:20px; }
.fac-line .ic { width:52px; height:52px; color:var(--red); flex:0 0 auto; }
@media (max-width:720px){ .sci-split { grid-template-columns:1fr; } }

/* Single red CTA moment */
.sci-cta { background:var(--red); color:#fff; padding:0; }
.sci-cta .wrap { display:flex; align-items:center; gap:24px; padding-block:clamp(30px,4vw,52px); flex-wrap:wrap; }
.sci-cta .ji-png { width:76px; flex:0 0 auto; }
.sci-cta .divider { width:1px; align-self:stretch; background:rgba(255,255,255,.4); }
.sci-cta h2 { color:#fff; font-size:var(--fs-600); flex:1; min-width:220px; line-height:1.1; }

/* ---------- Sticky register CTA ---------- */
.sticky-cta { position:fixed; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:80;
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.sticky-cta.show { opacity:1; transform:none; pointer-events:auto; }
.sticky-cta .btn { box-shadow:0 10px 28px rgba(235,23,0,.34); }
@media (max-width:560px){ .sticky-cta { left:14px; right:14px; } .sticky-cta .btn { width:100%; justify-content:center; } }

/* ---------- Forms (contact + registration) ---------- */
.form { display:grid; gap:18px; max-width:720px; }
.form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-size:var(--fs-200); font-weight:700; color:var(--ink); }
.field label .req { color:var(--red); }
.field input, .field select, .field textarea { font-family:var(--font-text); font-size:var(--fs-300); padding:12px 14px;
  border:1px solid var(--wg04); border-radius:8px; background:#fff; color:var(--ink); width:100%; min-height:46px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(235,23,0,.15); }
.field textarea { min-height:128px; resize:vertical; }
.field .help { font-size:var(--fs-100); color:var(--wg06); }
.form .consent { display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-200); color:#4a4a4a; }
.form .consent input { width:18px; height:18px; margin-top:3px; flex:0 0 auto; min-height:0; }
.form .form-actions { margin-top:6px; }
.form-note { font-size:var(--fs-200); color:var(--wg06); margin-top:14px; }
/* honeypot: visually hidden, off-screen, skipped by keyboard + AT */
.hp { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
/* form success / error banners */
.form-alert { border-radius:12px; padding:14px 16px; margin-bottom:18px; font-size:var(--fs-200); line-height:1.4; border:1px solid; }
.form-alert--ok  { background:#f0f7f0; border-color:#bcd9bc; color:#235c23; }
.form-alert--err { background:#fdecea; border-color:#f3b7b0; color:#9e2018; }
@media (max-width:560px){ .form .row2 { grid-template-columns:1fr; } }

/* ---------- Info grid (getting there / practical info) ---------- */
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.info-grid .item { padding:clamp(22px,2.5vw,34px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.info-grid .item .ic { width:40px; height:40px; color:var(--red); margin-bottom:14px; }
.info-grid .item h3 { font-family:var(--font-display); font-size:var(--fs-400); color:var(--ink); }
.info-grid .item p { font-size:var(--fs-200); color:#4a4a4a; margin-top:6px; line-height:1.45; }
@media (max-width:760px){ .info-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .info-grid { grid-template-columns:1fr; } }

/* ---------- Faculty grid ---------- */
.fac-sub { font-family:var(--font-text); font-weight:700; font-size:var(--fs-100); letter-spacing:.1em; text-transform:uppercase; color:var(--wg06); margin:clamp(28px,3vw,40px) 0 16px; }
.fac-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:1100px){ .fac-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:820px){ .fac-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .fac-grid { grid-template-columns:repeat(2,1fr); } }

/* contact split */
.contact-cols { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,4vw,56px); align-items:start; }
.contact-card { border:1px solid var(--line); padding:clamp(22px,2.5vw,32px); }
.contact-card h3 { font-family:var(--font-display); font-size:var(--fs-400); }
.contact-card .ci { display:flex; gap:12px; align-items:flex-start; margin-top:16px; }
.contact-card .ci .ic { width:24px; height:24px; color:var(--red); flex:0 0 auto; margin-top:2px; }
.contact-card .ci .k { font-size:var(--fs-100); letter-spacing:.08em; text-transform:uppercase; color:var(--wg06); font-weight:700; }
.contact-card .ci .v { font-size:var(--fs-300); color:var(--ink); }
@media (max-width:720px){ .contact-cols { grid-template-columns:1fr; } }

/* ---------- HOMEPAGE — "red label rail + white content" system (legacy) ---------- */
/* Hero */
.lp-hero { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; background:#fff; padding:0; }
.lp-hero-top { grid-column:1; grid-row:1; padding:clamp(36px,5vw,68px) clamp(28px,4vw,56px) clamp(18px,2.5vw,30px); }
.lp-hero-top h1 { color:var(--red); font-size:clamp(2.5rem,1rem + 4.3vw,4.1rem); line-height:var(--lh-tight); }
.lp-hero-top .sub { font-family:var(--font-display); font-weight:400; color:var(--ink); font-size:var(--fs-600); margin-top:.35em; line-height:var(--lh-heading); }
.lp-hero-band { grid-column:1; grid-row:2; background:var(--red); color:#fff; display:flex; flex-direction:column; justify-content:center; gap:18px;
  padding:clamp(26px,3.2vw,42px) clamp(28px,4vw,56px); }
.lp-hero-band .when-row { display:flex; align-items:center; gap:18px; }
.lp-hero-band .ji-png { width:46px; flex:0 0 auto; }
.lp-hero-band .d-when { font-family:var(--font-display); font-weight:700; font-size:var(--fs-500); line-height:1.1; }
.lp-hero-band .d-where { font-size:var(--fs-300); opacity:.95; }
.lp-hero-photo { grid-column:2; grid-row:1 / span 2; min-height:340px; }
.lp-hero-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block; }
@media (max-width:820px){
  .lp-hero { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .lp-hero-photo { grid-column:1; grid-row:1; aspect-ratio:16/10; min-height:0; }
  .lp-hero-top { grid-column:1; grid-row:2; } .lp-hero-band { grid-column:1; grid-row:3; }
}

/* Section rows: red label (left) + white content (right) */
.lp-row { display:grid; grid-template-columns:minmax(0,30%) 1fr; border-top:1px solid var(--line); padding:0; align-items:stretch; background:#fff; }
.lp-row.alt { background:var(--paper); }                 /* warm-neutral rhythm (the 15%) */
.lp-row .lp-label { background:transparent; padding:clamp(34px,5vw,64px) clamp(28px,3vw,44px); border-right:1px solid var(--line); }
.lp-row .lp-label h2 { color:var(--red); font-size:var(--fs-700); line-height:1.05; }
.lp-row .lp-label .tab { background:var(--red); margin-top:18px; }
.lp-row .lp-content { padding:clamp(34px,5vw,64px) clamp(30px,4vw,60px); display:flex; flex-direction:column; justify-content:center; }
.lp-row .lp-content > .lead { margin:0; }
@media (max-width:720px){
  .lp-row { grid-template-columns:1fr; }
  .lp-row .lp-label { padding:clamp(24px,6vw,34px) var(--gut) 0; border-right:0; }
  .lp-row .lp-content { padding:clamp(20px,5vw,34px) var(--gut) clamp(28px,6vw,40px); }
}

/* Programme highlights — icon row inside content */
.hl-row { display:grid; grid-template-columns:repeat(4,1fr); }
.hl-row .hl-item { padding:0 clamp(12px,1.8vw,26px); text-align:center; border-left:1px solid var(--line); }
.hl-row .hl-item:first-child { border-left:0; padding-left:0; }
.hl-row .ic { width:46px; height:46px; color:var(--red); margin:0 auto 14px; }
.hl-row h3 { font-family:var(--font-display); font-size:var(--fs-400); color:var(--ink); line-height:1.15; }
@media (max-width:600px){ .hl-row { grid-template-columns:1fr 1fr; gap:30px 0; } .hl-row .hl-item:nth-child(odd){ border-left:0; padding-left:0; } .hl-row .hl-item:nth-child(even){ border-left:1px solid var(--line); } }

/* Faculty placeholder */
.fac-tba { display:flex; align-items:flex-start; gap:24px; }
.fac-tba .ic { width:60px; height:60px; color:var(--red); flex:0 0 auto; }
.fac-tba h3 { font-family:var(--font-display); font-size:var(--fs-500); color:var(--ink); }
.fac-tba p { color:#4a4a4a; margin-top:6px; font-size:var(--fs-300); }

/* Venue content with building line-art */
.lp-venue { display:grid; grid-template-columns:0.85fr 1.15fr; gap:28px; align-items:center; }
.lp-venue .v-text h3 { font-family:var(--font-display); font-size:var(--fs-500); color:var(--ink); }
.lp-venue .v-text p { color:#4a4a4a; margin-top:8px; font-size:var(--fs-300); }
.lp-venue .v-art { color:var(--wg04); }
.lp-venue .v-art svg { width:100%; height:auto; display:block; }
@media (max-width:720px){ .lp-venue { grid-template-columns:1fr; } }

/* Homepage CTA band — single inline row */
.lp-cta { background:var(--red); color:#fff; padding:0; }
.lp-cta .wrap { display:flex; align-items:center; gap:24px; padding-block:clamp(28px,3.5vw,44px); flex-wrap:wrap; }
.lp-cta .ji-png { width:54px; flex:0 0 auto; }
.lp-cta h2 { color:#fff; font-size:var(--fs-600); flex:1; min-width:240px; line-height:1.1; }
.lp-cta .divider { width:1px; align-self:stretch; background:rgba(255,255,255,.4); }
.nav-links { display:flex; flex:1; gap:18px; margin-left:clamp(32px,5vw,72px); justify-content:space-between; align-items:center; }
.nav-links a { font-family:var(--font-text); font-weight:700; font-size:.96rem; color:var(--ink); padding:6px 0; position:relative; }
.nav-links a:hover { color:var(--red); }
.nav-links a.active { color:var(--red); }
.nav-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--red); }
.nav-cta { margin-left:6px; }
.nav-links a.nav-cta { color:#fff; padding:.85em 1.5em; box-shadow:0 10px 28px rgba(235,23,0,.34); }
.nav-links a.nav-cta:hover { color:#fff; background:#cf1400; border-color:#cf1400; }
.nav-toggle { display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.2s; }

@media (max-width:940px){
  .nav-links {
    position:absolute; top:72px; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--white); border-bottom:1px solid var(--line); padding:8px var(--gut);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.2s;
  }
  .nav-links.open { transform:none; opacity:1; pointer-events:auto; }
  .nav-links a { width:100%; padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-links a:last-child { border-bottom:0; }
  .nav-cta { margin:10px 0; }
  .nav-toggle { display:block; }
}

/* ---------- Official journey icon (image asset) ---------- */
.ji-img { display:block; width:auto; }
/* official icon swapped into former inline-SVG slots */
.ctaband .ji .ji-png { width:88px; height:88px; object-fit:contain; display:block; }
.guide-hero .ji-big .ji-png { height:min(430px,54vh); width:auto; display:block; margin:0; transform:translateY(-4%); }
.stage-rail .ji-rail .ji-png { width:38px; height:auto; display:block; }

/* ---------- Paneled hero (replicates the deck cover) ---------- */
.hero2 { position:relative; overflow:hidden; background:var(--white); border-bottom:3px solid var(--red); }
.hero2-grid { display:grid; grid-template-columns:1.04fr .96fr; min-height:clamp(480px,66vh,660px); }
.hero2-left { position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,5vw,72px) clamp(28px,4vw,58px) clamp(116px,15vh,150px); }
.hero2-head { margin:0; }
.hero2-head h1 { color:var(--red); font-size:clamp(2.5rem, 1rem + 4.3vw, 4.1rem); line-height:var(--lh-tight); }
.hero2-head .sub { font-family:var(--font-display); font-weight:400; color:var(--ink); font-size:var(--fs-600);
  margin-top:.4em; line-height:var(--lh-heading); max-width:18ch; }
.hero2-head .tab { margin-top:22px; }
.hero2-pitch { font-size:var(--fs-400); color:#3a3a3a; max-width:38ch; margin-top:18px; line-height:1.5; }
.hero2-photo { position:relative; min-height:320px; }
.hero2-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }

/* red date band overlapping the seam, like the deck */
.hero2-band { position:absolute; left:0; bottom:0; z-index:5; background:var(--red); color:#fff;
  display:flex; align-items:center; gap:18px; padding:18px clamp(24px,3vw,40px); max-width:54%; }
.hero2-band .ji-img { width:40px; flex:0 0 auto; }
.hero2-band .d-when { font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.hero2-band .d-where { font-size:.92rem; opacity:.92; }
.hero2-band .sep { width:1px; align-self:stretch; background:rgba(255,255,255,.4); margin:2px 2px; }
.hero2-cta { position:absolute; right:0; bottom:0; z-index:6; }
.hero2-cta .btn { border-radius:0; border:0; padding:1.1em 1.8em; }

/* paneling motif squares straddling the seam (top) */
.hero2-squares { position:absolute; top:0; left:calc(52% - 46px); z-index:4; display:flex; }
.hero2-squares i { display:block; width:clamp(46px,5vw,76px); aspect-ratio:1; }
.hero2-squares .r { background:var(--red); }
.hero2-squares .w { background:var(--paper); margin-top:clamp(46px,5vw,76px); }

@media (max-width:820px){
  .hero2-grid { grid-template-columns:1fr; }
  .hero2-photo { order:-1; min-height:300px; aspect-ratio:1/.8; }
  .hero2-head { margin:24px 0 90px; }
  .hero2-band { max-width:none; right:0; }
  .hero2-cta { position:static; }
  .hero2-cta .btn { width:100%; justify-content:center; }
  .hero2-squares { display:none; }
}

/* ---------- Paneling navigation (signature: alternating red/paper rows) ---------- */
.pnav { border-top:2px solid var(--red); }
.prow { display:block; border-bottom:1px solid rgba(235,23,0,.28); background:var(--white); transition:background .2s ease; }
.prow .pr-in { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(18px,3vw,40px);
  padding-block:clamp(22px,3.2vw,40px); }
.prow .ji-img { width:clamp(40px,4vw,56px); }
.prow .idx { font-family:var(--font-display); font-weight:700; color:var(--red); font-size:1rem; opacity:.5; }
.prow .t h3 { font-family:var(--font-display); color:var(--red); font-size:var(--fs-700); line-height:1.04; }
.prow .t p { color:#4a4a4a; margin-top:6px; font-size:var(--fs-300); max-width:60ch; }
.prow .arr { color:var(--red); font-size:1.7rem; line-height:1; transition:transform .2s ease; justify-self:end; }
.prow:hover { background:var(--paper); }
.prow:hover .arr { transform:translateX(10px); }
.prow.red { background:var(--red); }
.prow.red .t h3 { color:#fff; } .prow.red .t p { color:#fff; }
.prow.red .arr, .prow.red .idx { color:#fff; opacity:1; }
.prow.red .idx { opacity:.6; }
.prow.red:hover { background:var(--red-700); }
@media (max-width:560px){ .prow .pr-in { grid-template-columns:auto 1fr; } .prow .arr { display:none; } }

/* ---------- Bold paneling MOSAIC (interlocking red/white/photo, "in motion") ---------- */
.mosaic-wrap { padding-block: clamp(40px,6vw,84px); }
.mosaic {
  display:grid; gap:12px;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: clamp(150px,20vw,230px) clamp(110px,13vw,150px) clamp(150px,19vw,210px);
  grid-template-areas:
    "lead  lead   photo"
    "stat1 stat2  photo"
    "text  stat3  stat3";
}
.mosaic .panel { padding: clamp(20px,2.3vw,34px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; position:relative;
  opacity:0; transform:translateY(14px); animation:panelIn .6s ease forwards; }
.mosaic .panel:nth-child(1){animation-delay:.02s} .mosaic .panel:nth-child(2){animation-delay:.10s}
.mosaic .panel:nth-child(3){animation-delay:.18s} .mosaic .panel:nth-child(4){animation-delay:.26s}
.mosaic .panel:nth-child(5){animation-delay:.34s} .mosaic .panel:nth-child(6){animation-delay:.42s}
@keyframes panelIn { to { opacity:1; transform:none; } }
.mosaic .red   { background:var(--red); color:#fff; }
.mosaic .paper { background:var(--paper); color:var(--ink); }
.mosaic .white { background:var(--white); color:var(--ink); border:1px solid var(--line); }
.mosaic .photo { background-size:cover; background-position:center; }
.m-lead { grid-area:lead; } .m-photo { grid-area:photo; }
.m-stat1{ grid-area:stat1; } .m-stat2{ grid-area:stat2; } .m-text{ grid-area:text; } .m-stat3{ grid-area:stat3; }
.mosaic .eyebrow.on-red { color:#fff; }
.mosaic h2 { color:#fff; font-size:var(--fs-700); line-height:var(--lh-tight); margin-top:8px; }
.mosaic .stat-num { font-family:var(--font-display); font-weight:700; font-size:var(--fs-800); line-height:.95; }
.mosaic .red .stat-num { color:#fff; }
.mosaic .paper .stat-num, .mosaic .white .stat-num { color:var(--red); }
.mosaic .stat-lab { font-size:var(--fs-200); margin-top:8px; line-height:1.3; }
.mosaic .red .stat-lab { color:#fff; }
.mosaic .m-text .body { font-size:var(--fs-300); line-height:var(--lh-body); }
.mosaic .ji-img { width:38px; margin-top:14px; }
@media (max-width:760px){
  .mosaic { grid-template-columns:1fr 1fr; grid-template-rows:auto;
    grid-template-areas:"lead lead" "photo photo" "stat1 stat2" "text text" "stat3 stat3"; }
  .mosaic .panel { min-height:148px; animation:none; opacity:1; transform:none; }
  .m-photo { min-height:220px; }
}

/* ---------- Full-bleed paneled strip (alternating red/white cells) ---------- */
.panelstrip { display:grid; grid-template-columns:repeat(4,1fr); }
.panelstrip .cell { padding: clamp(28px,3vw,46px); min-height: clamp(220px,24vw,300px); display:flex; flex-direction:column; }
.panelstrip .cell:nth-child(odd)  { background:var(--red);   color:#fff; }
.panelstrip .cell:nth-child(even) { background:var(--paper); color:var(--ink); }
.panelstrip .cell .ic { width:44px; height:44px; margin-bottom:auto; }
.panelstrip .cell:nth-child(odd)  .ic { color:#fff; }
.panelstrip .cell:nth-child(even) .ic { color:var(--red); }
.panelstrip .cell h3 { font-family:var(--font-display); font-size:var(--fs-500); margin-top:20px; }
.panelstrip .cell:nth-child(odd) h3 { color:#fff; }
.panelstrip .cell:nth-child(even) h3 { color:var(--red); }
.panelstrip .cell p { font-size:var(--fs-300); margin-top:8px; line-height:1.45; }
.panelstrip .cell:nth-child(odd)  p { color:#fff; }
@media (max-width:820px){ .panelstrip { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .panelstrip { grid-template-columns:1fr; } }

/* ---------- Right-edge "mondrian" motif (signature device from the deck) ---------- */
.edge-motif { position:absolute; top:0; right:0; height:100%; width:clamp(96px,13vw,210px); z-index:0; pointer-events:none; }
.edge-motif svg { height:100%; width:100%; }
.has-motif { position:relative; overflow:hidden; }
.has-motif > .wrap { position:relative; z-index:2; }

/* ---------- Hero (event home) ---------- */
.hero { background:var(--white); padding-top: clamp(36px,6vw,64px); position:relative; overflow:hidden; }
.hero > .wrap { position:relative; z-index:2; }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,56px); align-items:center; }
.hero h1 { font-size: clamp(3rem, 7vw, 5.4rem); color:var(--red); line-height:.94; }
.hero .sub { font-family:var(--font-display); font-weight:400; color:var(--ink); font-size:clamp(1.3rem,2.6vw,2rem); margin-top:.4em; line-height:1.1; }
.hero .pitch { margin-top:22px; }
.hero-photo { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio: 4/3.1; }
.hero-photo img { width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .hero-grid { grid-template-columns:1fr; } .hero-photo{ order:-1; } }

/* date band (red, with journey icon) */
.datebar {
  margin-top:30px; background:var(--red); color:var(--white); border-radius:var(--radius);
  display:flex; align-items:center; gap:20px; padding:20px 26px;
}
.datebar .ji { width:42px; height:42px; flex:0 0 auto; }
.datebar .ji svg path { stroke:#fff !important; }
.datebar .ji svg circle { fill:#fff !important; }
.datebar .d-when { font-family:var(--font-display); font-weight:700; font-size:1.25rem; }
.datebar .d-where { font-size:.96rem; opacity:.92; }
.datebar .sep { width:1px; align-self:stretch; background:rgba(255,255,255,.35); margin:2px 4px; }

.hcp-strip { background:var(--red); color:#fff; text-align:center; font-size:.82rem; letter-spacing:.04em; padding:9px 16px; font-weight:700; }

/* ---------- Cards ---------- */
.card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.card .ic { width:46px; height:46px; color:var(--red); margin-bottom:16px; }
.card h3 { font-size:var(--fs-500); margin-bottom:8px; }
.card.on-paper { background:var(--paper-2); }

/* highlight (icon row, mockup "Programme Highlights") */
.hl { text-align:left; }
.hl .ic { width:40px; height:40px; color:var(--red); margin-bottom:14px; }
.hl h3 { font-size:1.05rem; margin-bottom:6px; }
.hl p { font-size:.95rem; color:#4a4a4a; }

/* ---------- About split ---------- */
.split { display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px,4vw,64px); align-items:center; }
@media (max-width:820px){ .split { grid-template-columns:1fr; } }

/* ---------- Faculty ---------- */
.fac { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:0; overflow:hidden; }
.fac .avatar { width:100%; aspect-ratio:4/5; height:auto; border-radius:0; border:0; margin:0 0 14px; background:#f4f1ee;
  display:grid; place-items:center; color:var(--red); font-family:var(--font-display); font-weight:700; font-size:2rem; }
.fac img.avatar { object-fit:cover; object-position:50% 50%; background:#fff; display:block; }
.fac .tagrole { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin:0 18px 8px; }
.fac .name { font-family:var(--font-display); font-weight:700; font-size:var(--fs-400); padding:0 18px; }
.fac .role { font-size:var(--fs-200); color:var(--wg06); margin-top:3px; padding:0 18px 20px; }

/* ---------- Agenda ---------- */
.daytabs { display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap; }
.daytab { font-family:var(--font-text); font-weight:700; font-size:.95rem; padding:.7em 1.4em; border-radius:999px; border:2px solid var(--red); color:var(--red); background:transparent; cursor:pointer; }
.daytab.active { background:var(--red); color:#fff; }
.agenda-day { display:none; }
.agenda-day.show { display:block; }
.agenda-day h2 { color:var(--red); margin-bottom:6px; }
.agenda-day .day-sub { color:var(--wg06); margin-bottom:24px; }

.slot { display:grid; grid-template-columns: 130px 1fr; gap:22px; padding:18px 0; border-bottom:1px solid var(--line); }
.slot .time { font-family:var(--font-display); font-weight:700; color:var(--red); font-size:1rem; white-space:nowrap; padding-top:2px; }
.slot .title { font-family:var(--font-display); font-weight:700; font-size:var(--fs-500); line-height:1.2; }
.slot .meta { font-size:var(--fs-200); color:#4a4a4a; margin-top:5px; }
.slot .meta b { color:var(--ink); font-weight:700; }
.slot.break { background:var(--paper); border-radius:10px; padding:14px 18px; margin:6px 0; border-bottom:0; }
.slot.break .title { color:var(--wg06); font-size:.98rem; }
.slot.feature .title { color:var(--red); }
.chip { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red); border:1px solid var(--red); border-radius:999px; padding:2px 10px; margin-top:8px; }
@media (max-width:560px){ .slot { grid-template-columns:1fr; gap:6px; } }

/* ---------- CTA band (red) ---------- */
.ctaband { background:var(--red); color:#fff; padding-block:0; }
.ctaband .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-block: clamp(30px,4vw,46px); }
.ctaband .wrap > div { display:flex; align-items:center; gap:18px; min-width:0; }
.ctaband .ji { flex:0 0 auto; width:88px; height:88px; display:grid; place-items:center; margin:0; }
.ctaband h2 { color:#fff; font-size:var(--fs-600); max-width:24ch; line-height:1.12; margin:0;
  border-left:1px solid rgba(255,255,255,.45); padding-left:18px; }
.ctaband .ji svg path { stroke:#fff !important; } .ctaband .ji svg circle { fill:#fff !important; }
@media (max-width:560px){ .ctaband h2 { border-left:0; padding-left:0; } }

/* ---------- Footer ---------- */
.site-footer { background:#1A1A1A; color:rgba(255,255,255,.82); }
.footer-top { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap:32px; padding-block:56px; }
.footer-top h4 { font-family:var(--font-text); font-weight:700; color:#fff; font-size:var(--fs-100); letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.footer-top a { display:block; color:rgba(255,255,255,.85); font-size:var(--fs-200); padding:5px 0; }
.footer-top a:hover { color:#fff; }
.footer-top p { font-size:var(--fs-200); color:rgba(255,255,255,.85); max-width:34ch; margin-top:14px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.28); padding-block:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:var(--fs-100); color:rgba(255,255,255,.82); }
.footer-bottom a { color:rgba(255,255,255,.82); } .footer-bottom a:hover { color:#fff; }
@media (max-width:820px){ .footer-top { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top { grid-template-columns:1fr; } }

/* ============================================================
   GUIDE — patient conversation guide pages
   ============================================================ */
.guide-hero { background:var(--red); color:#fff; overflow:hidden; }
.guide-hero .wrap { display:grid; grid-template-columns:1.12fr .88fr; gap:28px; align-items:center; padding-block: clamp(40px,5vw,68px); }
.guide-hero h1 { color:#fff; font-size:var(--fs-900); line-height:1.03; }
.guide-hero .eyebrow { color:rgba(255,255,255,.85); }
.guide-hero .tab { background:#fff; }
.guide-hero p { color:#fff; font-size:var(--fs-400); max-width:46ch; margin-top:10px; }
.guide-hero .ji-big { align-self:stretch; display:flex; align-items:flex-start; justify-content:flex-end; }
.guide-hero .ji-big svg { height:min(440px,52vh); width:auto; }
.guide-hero .cover-stage { position:relative; align-self:center; min-height:min(460px,60vh); }
.guide-hero .cover-art { position:absolute; top:50%; left:50%; height:min(380px,52vh); width:auto; display:block;
  border-radius:8px; box-shadow:0 24px 56px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.35); transition:transform .4s ease; }
.guide-hero .cover-en { z-index:2; transform:translate(-80%,-48%) rotate(-6deg); }
.guide-hero .cover-ar { z-index:1; transform:translate(-4%,-52%) rotate(7deg); }
.guide-hero .cover-stage:hover .cover-en { transform:translate(-86%,-48%) rotate(-7deg); }
.guide-hero .cover-stage:hover .cover-ar { transform:translate(2%,-52%) rotate(8deg); }
@media (prefers-reduced-motion:reduce){ .guide-hero .cover-art{ transition:none; } }
@media (max-width:820px){ .guide-hero .ji-big { display:none; } }

/* ---------- Guide enhancements: topic icons, journey-path, pull-quotes, data tables ---------- */
.stage-card .tic { width:38px; height:38px; color:var(--red); display:block; margin-bottom:12px; }
.path-row { display:grid; grid-template-columns:repeat(3,1fr); margin-top:28px; }
.path-row .node { position:relative; padding:0 16px; }
.path-row .node::before { content:""; position:absolute; top:17px; left:0; right:0; border-top:2px dotted var(--red); opacity:.45; }
.path-row .node:first-child::before { left:50%; }
.path-row .node:last-child::before { right:50%; }
.path-row .pin { position:relative; z-index:1; width:36px; height:36px; border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.92rem; margin-bottom:13px; }
.path-row h4 { font-family:var(--font-display); font-size:1.02rem; margin-bottom:5px; }
.path-row p { font-size:.92rem; color:var(--wg06); line-height:1.45; }
@media (max-width:680px){ .path-row { grid-template-columns:1fr; gap:20px; } .path-row .node::before { display:none; } }

.pullquote { border-left:4px solid var(--red); padding:4px 0 4px 22px; margin:28px 0; font-family:var(--font-display);
  font-weight:700; font-size:clamp(1.2rem,1rem+1vw,1.55rem); line-height:1.28; color:var(--ink); font-style:italic; }
.pullquote cite { display:block; margin-top:10px; font-size:.82rem; font-style:normal; font-weight:400; color:var(--wg06); font-family:var(--font-text); }

.dtable { width:100%; border-collapse:collapse; margin:20px 0; font-size:.95rem; }
.dtable th, .dtable td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.dtable thead th { background:var(--red); color:#fff; font-weight:700; border-bottom:0; }
.dtable tbody tr:nth-child(even) { background:#faf7f5; }
.dtable td b, .dtable td strong { color:var(--red); }

.guide-fig { width:100%; max-width:330px; display:block; margin:6px auto 16px; border-radius:8px; background:#fff; }
.guide-fig.full { max-width:520px; }
figure.guide-figure { margin:24px 0; }
figure.guide-figure img { width:100%; max-width:560px; display:block; border-radius:10px; box-shadow:0 10px 30px rgba(26,26,26,.10); }
figure.guide-figure figcaption { font-size:.85rem; color:var(--wg06); margin-top:10px; }
.guide-hero .ji-big svg path[stroke="#EB1700"]{ stroke:#fff !important; }
.guide-hero .ji-big svg circle[fill="#EB1700"]{ fill:#fff !important; }
.guide-hero .ji-big svg path[fill="#EB1700"]{ fill:#fff !important; }
@media (max-width:760px){ .guide-hero .wrap { grid-template-columns:1fr; } .guide-hero .ji-big{ display:none; } }

/* stage map (6 stages at a glance) */
.stage-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm); display:block; transition:transform .18s, box-shadow .18s; }
.stage-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.stage-card .num { font-family:var(--font-display); font-weight:700; color:var(--red); font-size:var(--fs-800); line-height:1; }
.stage-card .st-label { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--wg06); margin-bottom:2px; }
.stage-card h3 { font-size:var(--fs-500); margin:10px 0 8px; }
.stage-card p { font-size:.95rem; color:#4a4a4a; }
.stage-card .go { color:var(--red); font-weight:700; font-size:.9rem; margin-top:14px; display:inline-block; }

/* stage page layout: red rail + content */
.stage-layout { display:grid; grid-template-columns: 124px 1fr; min-height:60vh; }
.stage-rail { background:var(--red); color:#fff; padding:30px 0; display:flex; flex-direction:column; align-items:center; gap:18px; position:sticky; top:72px; align-self:start; height:calc(100vh - 72px); }
.stage-rail .pg { font-family:var(--font-display); font-weight:700; font-size:1.5rem; }
.stage-rail .stg { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85; text-align:center; }
.stage-rail .stg b { display:block; font-family:var(--font-display); font-size:1.4rem; opacity:1; }
.stage-rail .vlabel { writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); font-family:var(--font-display); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:1rem; margin-block:14px; flex:1; display:flex; align-items:center; }
.stage-rail .ji-rail { width:38px; opacity:.95; }
.stage-rail .ji-rail svg path { stroke:#fff !important; } .stage-rail .ji-rail svg circle { fill:#fff !important; }
.stage-main { padding: clamp(28px,5vw,64px); max-width:980px; }
@media (max-width:760px){
  .stage-layout { grid-template-columns:1fr; }
  .stage-rail { flex-direction:row; height:auto; position:static; padding:14px var(--gut); gap:16px; justify-content:flex-start; }
  .stage-rail .vlabel { writing-mode:horizontal-tb; transform:none; margin:0; flex:0; }
  .stage-rail .ji-rail { display:none; }
}

.topic { padding-block: clamp(32px,5vw,56px); border-bottom:1px solid var(--line); }
.topic:last-child { border-bottom:0; }
.topic > .eyebrow { margin-bottom:10px; }
.topic h2 { color:var(--red); font-size:var(--fs-700); margin-bottom:14px; }
.topic .tab { background:var(--red); }
.topic .blocks { display:grid; gap:22px; margin-top:26px; }
.factline { border-left:3px solid var(--red); padding:2px 0 2px 16px; }
.factline h4 { font-family:var(--font-text); color:var(--red); font-size:1rem; font-weight:700; margin-bottom:3px; }
.factline p { font-size:.97rem; color:#3a3a3a; }

/* compare two-col (Crohn's vs UC, IBD vs IBS) */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:26px; }
.compare .col { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.compare .col h3 { color:var(--red); display:flex; align-items:center; gap:10px; font-size:1.25rem; margin-bottom:6px; }
.compare .col .ic { width:30px; height:30px; color:var(--red); }
.compare .col ul li { font-size:.95rem; color:#3a3a3a; padding:7px 0 7px 20px; position:relative; }
.compare .col ul li::before { content:""; position:absolute; left:0; top:14px; width:7px; height:7px; border-radius:50%; background:var(--red); }
@media (max-width:640px){ .compare { grid-template-columns:1fr; } }

/* callout pair: Important to know / Talk with HCP */
.callouts { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:30px; background:var(--paper); border-radius:var(--radius); overflow:hidden; }
.callouts .co { padding:24px 26px; display:flex; gap:16px; }
.callouts .co + .co { border-left:1px solid var(--line); }
.callouts .co .ic { width:34px; height:34px; color:var(--red); flex:0 0 auto; margin-top:2px; }
.callouts .co h4 { font-family:var(--font-text); color:var(--red); font-size:1rem; font-weight:700; margin-bottom:4px; }
.callouts .co p { font-size:.93rem; color:#3a3a3a; }
@media (max-width:640px){ .callouts { grid-template-columns:1fr; } .callouts .co + .co { border-left:0; border-top:1px solid var(--line); } }

/* stage page download bar + prev/next */
.stage-nav { display:flex; justify-content:space-between; gap:16px; margin-top:40px; flex-wrap:wrap; }
.stage-nav a { font-weight:700; color:var(--red); }
.disclaimer { display:flex; gap:12px; align-items:flex-start; font-size:.82rem; color:var(--wg06); border-top:1px solid var(--line); padding-top:18px; margin-top:36px; }
.disclaimer .ic { width:22px; height:22px; color:var(--red); flex:0 0 auto; }

/* breadcrumb */
.crumbs { font-size:.85rem; color:var(--wg06); padding-top:18px; }
.crumbs a { color:var(--red); }

/* download CTA in guide landing */
.dl-card { background:var(--ink); color:#fff; border-radius:var(--radius); padding:34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dl-card h3 { color:#fff; font-size:1.5rem; }
.dl-card p { color:#cfcac6; margin-top:6px; max-width:46ch; }

/* ---------- mobile: CTAs go full-width for clean alignment ---------- */
@media (max-width:560px){
  .sci-hero .actions { flex-direction:column; align-items:stretch; }
  .sci-hero .actions .btn,
  .sci-cta .btn,
  .ctaband .btn,
  .lp-cta .btn,
  .form-actions .btn,
  .dl-card .btn,
  .mt-m .btn {
    width:100%; justify-content:center; margin-left:0 !important;
  }
  /* stacked download/secondary buttons within a .mt-m group */
  .mt-m .btn + .btn { margin-top:10px; }
  /* drop the vertical hairline in CTA bands once the button wraps full-width */
  .sci-cta .divider, .lp-cta .divider { display:none; }
}

/* ---------- print: downloadable guide as PDF ---------- */
@media print {
  .site-header, .nav-toggle, .stage-nav, .ctaband, .btn, .crumbs { display:none !important; }
  .stage-rail { position:static; height:auto; }
  body { background:#fff; }
  .topic { page-break-inside:avoid; }
}

/* utilities */
.mt-0{margin-top:0}.mt-s{margin-top:10px}.mt-m{margin-top:22px}.mt-l{margin-top:40px}
.maxw-60{max-width:60ch}
.flex{display:flex}.aic{align-items:center}.gap-s{gap:10px}.gap-m{gap:18px}.wrapf{flex-wrap:wrap}