/* ==========================================================================
   B1 LIVING ICEBERG: theme.css (site skin, shipped from design/iceberg/)
   Systems Detective, skin B1. Pairs with motion.js. Presentation only: no
   visible text is added, removed or edited (the iceberg labels are real HTML
   in the page). Everything injected by motion.js uses the .ib-* prefix.
   Own --ib-* tokens, so pages whose tokens differ (blog.css, /burn/) still work.
   Source: design-lab/b1-living/theme.css, with the Fable C1 fixes of
   2026-10-06 (phone padding, .wrap scope, scroll padding, overflow clip,
   .block cards, reduced motion scope) and the mode switch (Read/Story/Listen).
   Story mode styles live in dive.css, loaded by motion.js only in Story mode.
   ========================================================================== */

:root {
  --ib-navy: #0D1B2A;
  --ib-gold: #C5A55A;
  --ib-gold-light: #D4C08A;
  --ib-ivory: #F5F5F5;
  --ib-ice: #DCEBFF;
  --ib-text: #E8E8E8;
  --ib-muted: #9AA5B4;
  --ib-abyss: #030811;
  --ib-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --ib-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ib-ar: 1.7769; /* iceberg art height divided by width (941 x 1672) */

  /* Narration player (assets/narration.css reads these) */
  --sdn-bg: rgba(4, 10, 18, 0.88);
  --sdn-fg: #F5F5F5;
  --sdn-muted: #A9B4C2;
  --sdn-accent: #D4C08A;
  --sdn-accent-ink: #07111d;
  --sdn-track: rgba(245, 245, 245, 0.14);
  --sdn-border: rgba(212, 192, 138, 0.30);
  --sdn-highlight: rgba(212, 192, 138, 0.10);
  --sdn-highlight-ring: rgba(212, 192, 138, 0.34);
  --sdn-radius: 999px;
  --sdn-height: 62px;
}

html { scroll-padding-top: 92px; overflow-x: clip; }
/* phones: the nav wraps to three rows with the French CTA and the language switcher (111 px measured) */
@media (max-width: 768px) { html { scroll-padding-top: 120px; } }
@media (min-width: 769px) and (max-width: 900px) { html { scroll-padding-top: 108px; } } /* nav wraps to two rows: 97 px */
body { background-color: var(--ib-navy); }
::selection { background: rgba(197, 165, 90, 0.38); color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ib-gold-light);
  outline-offset: 3px;
}

/* ---------- Depth: the page darkens as the reader descends ---------- */
.ib-depth { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: layout paint; }
.ib-depth > i { position: absolute; inset: 0; display: block; }
.ib-depth__sky { background: radial-gradient(80% 46% at 50% -12%, rgba(110, 165, 255, 0.11), rgba(110, 165, 255, 0) 70%); }
.ib-depth__dark { opacity: 0; background: linear-gradient(180deg, rgba(3, 8, 16, 0.72), var(--ib-abyss) 100%); }
.ib-depth__glow { opacity: 0; background: radial-gradient(70% 42% at 50% 112%, rgba(197, 165, 90, 0.17), rgba(197, 165, 90, 0) 70%); }

/* ---------- Navigation: glass over water, depth gauge on the waterline ---------- */
nav {
  background: linear-gradient(180deg, rgba(5, 12, 22, 0.84), rgba(9, 19, 32, 0.62));
  border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.nav-links a { position: relative; padding: 8px 0; transition: color 0.3s; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ib-gold-light), transparent);
  transform: scaleX(0); transition: transform 0.55s var(--ib-ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.ib-wl { position: absolute; left: 0; right: 0; top: 100%; height: 0; pointer-events: none; }
.ib-wl i { position: absolute; display: block; }
.ib-wl__line {
  left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 235, 255, 0.28) 12%, rgba(212, 192, 138, 0.42) 50%, rgba(220, 235, 255, 0.28) 88%, transparent);
}
.ib-wl__reflect {
  left: 0; right: 0; top: 0; height: 26px;
  background: linear-gradient(180deg, rgba(150, 190, 255, 0.07), rgba(150, 190, 255, 0));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.ib-wl__depth {
  left: 0; top: -2px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(197, 165, 90, 0), var(--ib-gold) 80%, #fff);
  box-shadow: 0 0 14px rgba(212, 192, 138, 0.55);
}

/* tablets: the original single row nav collides at these widths, so it compresses, then wraps like the phone nav */
@media (min-width: 901px) and (max-width: 1100px) {
  nav { padding: 0 24px; }
  .nav-logo { font-size: 0.78em; letter-spacing: 0.12em; }
  .nav-links { gap: 20px; }
  .nav-cta { padding: 10px 16px; letter-spacing: 0.05em; }
}
@media (min-width: 769px) and (max-width: 900px) {
  nav { padding: 9px 24px; height: auto; flex-wrap: wrap; row-gap: 9px; }
  .nav-links { order: 3; width: 100%; justify-content: center; gap: 26px; margin: 0; padding: 0; }
}

/* ---------- Buttons: pills with a slow sheen ---------- */
.nav-cta, .btn-primary, .btn-secondary { border-radius: 999px; }
.nav-cta, .btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #DAC27F 0%, #C5A55A 52%, #B6944A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 10px 28px -12px rgba(197, 165, 90, 0.65);
  transition: transform 0.4s var(--ib-ease), box-shadow 0.4s var(--ib-ease), filter 0.4s;
}
.nav-cta::after, .btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.5) 50%, transparent 66%);
  transform: translateX(-130%); transition: transform 0.9s var(--ib-ease);
}
.nav-cta:hover, .btn-primary:hover {
  background: linear-gradient(180deg, #E4CD8F 0%, #D0B068 52%, #BE9C52 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 34px -12px rgba(212, 192, 138, 0.8);
  transform: translateY(-2px);
}
.nav-cta:hover::after, .btn-primary:hover::after { transform: translateX(130%); }
.btn-secondary {
  background: rgba(197, 165, 90, 0.04);
  border-color: rgba(212, 192, 138, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.4s, border-color 0.4s, transform 0.4s var(--ib-ease), box-shadow 0.4s;
}
.btn-secondary:hover {
  background: rgba(197, 165, 90, 0.12); border-color: var(--ib-gold-light);
  transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(197, 165, 90, 0.6);
}

/* ---------- Rhythm: hairline waterlines instead of boxed dividers ---------- */
section { border-bottom: 0; }
section:not(.hero) { padding-top: 132px; padding-bottom: 132px; }
@media (max-width: 768px) { section:not(.hero) { padding-top: 88px; padding-bottom: 88px; } }
.section-title, .page-title, .writing-title, .article-title, .hero h1 { text-wrap: balance; }
.section-title { font-size: clamp(2.2rem, 3.9vw, 3.25rem); line-height: 1.08; letter-spacing: -0.024em; }
.section-tag { display: flex; align-items: center; gap: 14px; letter-spacing: 0.22em; }
.section-tag::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: 0.7; }
.section-sub { font-size: 1.08em; line-height: 1.85; }

.accent-line {
  position: relative; width: 100%; max-width: 560px; height: 1px; margin-bottom: 30px; overflow: hidden;
  background: linear-gradient(90deg, var(--ib-gold) 0, rgba(197, 165, 90, 0.30) 24%, rgba(197, 165, 90, 0) 100%);
}
.accent-line::after {
  content: ''; position: absolute; left: 0; top: 0; width: 120px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 55%, rgba(255, 255, 255, 0));
}
.ib-js .accent-line.is-in::after { animation: ib-glint 2.4s var(--ib-ease-io) 0.2s 1 both; }
@keyframes ib-glint {
  0% { opacity: 0; transform: translate3d(-30px, 0, 0); }
  18% { opacity: 0.95; }
  100% { opacity: 0; transform: translate3d(560px, 0, 0); }
}

/* the newsletter block is a centred section: its hairline, tag and intro follow the title */
.field-notes .accent-line { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, rgba(197, 165, 90, 0), var(--ib-gold) 50%, rgba(197, 165, 90, 0)); }
.field-notes .section-tag { justify-content: center; }
.field-notes .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Cards: ice panels with a spotlight that follows the pointer ---------- */
.proof-card, .engagement, .zone, .standard-card, .estimator-card, .contact-form,
.proj-card, .stat, .about-mark, .card, .status-block, .block {
  --mx: 50%; --my: -40%;
  background:
    radial-gradient(440px circle at var(--mx) var(--my), rgba(212, 192, 138, 0.09), rgba(212, 192, 138, 0) 62%),
    linear-gradient(180deg, rgba(32, 50, 86, 0.62), rgba(14, 27, 47, 0.64));
  border-top-color: rgba(212, 192, 138, 0.16); border-right-color: rgba(212, 192, 138, 0.10); border-bottom-color: rgba(212, 192, 138, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 34px 64px -38px rgba(0, 0, 0, 0.9);
  transition: transform 0.55s var(--ib-ease), box-shadow 0.55s var(--ib-ease), border-color 0.55s;
}
/* projects index: each project row becomes an ice panel (the row itself is not a link, so no hover lift) */
.block { padding: 40px 38px; margin-bottom: 22px; border: 1px solid rgba(212, 192, 138, 0.10); border-radius: 16px; }
@media (max-width: 768px) { .block { padding: 26px 20px; } }
.proof-card:hover, .engagement:hover, .zone:hover, .standard-card:hover, .proj-card:hover {
  transform: translateY(-3px);
  border-top-color: rgba(212, 192, 138, 0.42); border-right-color: rgba(212, 192, 138, 0.28); border-bottom-color: rgba(212, 192, 138, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 1px rgba(212, 192, 138, 0.14), 0 44px 70px -38px rgba(0, 0, 0, 0.95), 0 0 70px -24px rgba(197, 165, 90, 0.42);
}
.zone-iii { background-color: rgba(36, 59, 94, 0.25); }
.field input, .field textarea, .subscribe-form input[type="email"] { background: rgba(4, 10, 18, 0.74); }
footer { background: transparent; border-top-color: transparent; position: relative; }
footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 165, 90, 0.34) 50%, transparent);
}

/* ---------- Scroll reveals (class added by motion.js, only below the fold) ---------- */
.ib-js .ib-reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 26px, 0); }
.ib-js .ib-reveal.is-in { animation: ib-in 1.15s var(--ib-ease) calc(var(--ib-i, 0) * 90ms) backwards; }
@keyframes ib-in { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ---------- Hero: the surface. Tip above the waterline, the hidden mass below ---------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  background: linear-gradient(180deg, #010f26 0%, #011128 58%, #001a3b 71%, #011330 100%);
}
.hero { border-bottom: 0; }
.hero::before { display: none; }
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 230px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 27, 42, 0), var(--ib-navy));
}
.hero-inner { z-index: 2; }
.hero-inner::before {
  content: ''; position: absolute; z-index: -1; inset: -70px -50px -40px -70px; pointer-events: none;
  background: radial-gradient(ellipse 70% 82% at 30% 48%, rgba(2, 8, 18, 0.55), rgba(2, 8, 18, 0) 72%);
}
.hero h1 {
  font-size: clamp(2.3rem, 4.7vw, 4.05rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.028em;
  max-width: 13.4em; text-shadow: 0 2px 36px rgba(1, 6, 14, 0.7);
}
.hero h1 em { font-weight: 600; text-shadow: 0 0 34px rgba(197, 165, 90, 0.34); }
.hero-sub { max-width: 36rem; font-size: 1.14em; text-shadow: 0 1px 18px rgba(1, 6, 14, 0.7); }
.hero-tag {
  border-radius: 999px; padding: 8px 18px; background: rgba(197, 165, 90, 0.07); border-color: rgba(212, 192, 138, 0.30);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ib-hero-art, .ib-hero-gl { position: absolute; z-index: 0; pointer-events: none; display: block; }
.ib-hero-art {
  max-width: none; opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-image: radial-gradient(ellipse 54% 58% at 50% 52%, #000 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 58% at 50% 52%, #000 56%, transparent 100%);
}
.ib-hero-art.is-on { opacity: 1; }
.ib-hero-gl { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.ib-hero-gl.is-live { opacity: 1; }
.ib-hero-gl {
  -webkit-mask-image: linear-gradient(90deg, transparent var(--ib-m0, 0px), #000 var(--ib-m1, 0px), #000 var(--ib-m2, 100%), transparent var(--ib-m3, 100%));
  mask-image: linear-gradient(90deg, transparent var(--ib-m0, 0px), #000 var(--ib-m1, 0px), #000 var(--ib-m2, 100%), transparent var(--ib-m3, 100%));
}
.ib-hero-art.is-covered { opacity: 0; transition: opacity 0.1s linear 1.8s; }
@media (max-width: 760px) {
  .hero { padding-bottom: 300px; }
  .hero h1 { max-width: none; }
}

/* ---------- The Method: the living iceberg ---------- */
/* clip only: a hidden fallback would make #method a scroll container and break the Story mode sticky stage */
#method { overflow-x: clip; }
#method .iceberg-visual {
  position: relative !important; max-width: 1120px !important; margin: 80px auto 0 !important;
  --ibw: min(480px, calc(100vw - 48px));
  --ibh: calc(var(--ibw) * var(--ib-ar));
  --ib-line: clamp(52px, 8vw, 104px);
  /* fallback frame (no WebGL): the plate dissolves into the page on all four sides, so no box edge shows */
  --ib-mask-x: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%);
  --ib-mask-y: linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%);
}
#method .iceberg-visual::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 4%; width: min(1100px, 130%); height: 62%; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 46%, rgba(34, 92, 190, 0.22), rgba(34, 92, 190, 0) 100%);
  pointer-events: none;
}
#method .iceberg-visual picture {
  display: block; position: relative; z-index: 1; width: var(--ibw); margin: 0 auto;
  -webkit-mask-image: var(--ib-mask-x), var(--ib-mask-y); -webkit-mask-composite: source-in;
  mask-image: var(--ib-mask-x), var(--ib-mask-y); mask-composite: intersect;
}
#method .iceberg-visual .iceberg-img { display: block; width: 100%; height: auto; border: 0 !important; border-radius: 0 !important; }
.ib-gl {
  position: absolute; z-index: 1; left: 50%; top: 0; width: calc(var(--ibw) * 1.7); height: var(--ibh); transform: translateX(-50%);
  display: block; opacity: 0; transition: opacity 1.4s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.ib-gl.is-live { opacity: 1; }
.ib-live picture { opacity: 0; transition: opacity 0.1s linear 1.6s; }

/* Labels: real text, positioned from the art's own proportions */
.ib-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ib-label { position: absolute; margin: 0; }
.ib-pct {
  display: block; font-family: var(--font-ui); font-weight: 200; line-height: 0.95; letter-spacing: -0.045em;
  font-size: clamp(3.1rem, 6.2vw, 4.8rem); font-variant-numeric: tabular-nums;
}
.ib-cap {
  display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.75;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.ib-label--top, .ib-label--bottom { --ib-ly: 2.1rem; max-width: 270px; }
.ib-label--top { --ib-ty: 0.172; --ib-tx: 0.41; }
.ib-label--top {
  top: calc(var(--ibh) * var(--ib-ty) - var(--ib-ly)); right: calc(50% + var(--ibw) * (0.5 - var(--ib-tx)) + var(--ib-line)); text-align: right;
}
.ib-label--top .ib-pct { color: var(--ib-ivory); text-shadow: 0 0 44px rgba(170, 205, 255, 0.34); }
.ib-label--top .ib-cap { color: var(--ib-muted); }
.ib-label--bottom {
  top: calc(var(--ibh) * 0.53 - var(--ib-ly)); left: calc(50% + var(--ibw) * 0.22 + var(--ib-line)); text-align: left;
}
.ib-label--bottom .ib-pct {
  background: linear-gradient(180deg, #F3E4B4 10%, #C5A55A 90%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--ib-gold-light); filter: drop-shadow(0 0 22px rgba(197, 165, 90, 0.34));
}
.ib-label--bottom .ib-cap { color: var(--ib-gold-light); }
.ib-label--line { left: 0; right: 0; top: calc(var(--ibh) * 0.279); height: 0; }
.ib-label--line .ib-cap { position: absolute; left: calc(50% + var(--ibw) * 0.22 + var(--ib-line)); bottom: 14px; margin: 0; color: var(--ib-ice); opacity: 0.88; font-size: 0.64rem; letter-spacing: 0.26em; }
/* leaders: a hairline and a point of light, drawn from the iceberg outward */
.ib-label--top::after, .ib-label--bottom::after {
  content: ''; position: absolute; top: var(--ib-ly); height: 1px; width: calc(var(--ib-line) - 12px);
}
.ib-label--top::after { left: calc(100% + 12px); transform-origin: 100% 50%; background: linear-gradient(90deg, rgba(245, 245, 245, 0), rgba(245, 245, 245, 0.8)); }
.ib-label--bottom::after { right: calc(100% + 12px); transform-origin: 0 50%; background: linear-gradient(270deg, rgba(212, 192, 138, 0), rgba(212, 192, 138, 0.85)); }
.ib-label--top::before, .ib-label--bottom::before {
  content: ''; position: absolute; top: calc(var(--ib-ly) - 3px); width: 7px; height: 7px; border-radius: 50%;
}
.ib-label--top::before { left: calc(100% + var(--ib-line) - 3px); background: #fff; box-shadow: 0 0 0 4px rgba(190, 220, 255, 0.12), 0 0 18px 3px rgba(190, 220, 255, 0.7); }
.ib-label--bottom::before { right: calc(100% + var(--ib-line) - 3px); background: var(--ib-gold-light); box-shadow: 0 0 0 4px rgba(212, 192, 138, 0.12), 0 0 18px 3px rgba(212, 192, 138, 0.65); }
.ib-label--line::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(220, 235, 255, 0) 0, rgba(220, 235, 255, 0.55) 12%,
    rgba(220, 235, 255, 0.30) calc(50% - var(--ibw) * 0.5 - 6px), rgba(220, 235, 255, 0) calc(50% - var(--ibw) * 0.5 + 44px),
    rgba(220, 235, 255, 0) calc(50% + var(--ibw) * 0.5 - 44px), rgba(220, 235, 255, 0.30) calc(50% + var(--ibw) * 0.5 + 6px),
    rgba(220, 235, 255, 0.55) 88%, rgba(220, 235, 255, 0) 100%);
}
/* arrival: leaders draw, then labels settle (motion.js adds .is-in, then counts the numbers up) */
.ib-js:not(.ib-rm) .iceberg-visual:not(.is-in) .ib-label { opacity: 0; }
.ib-js:not(.ib-rm) .iceberg-visual:not(.is-in) .ib-label--top::after,
.ib-js:not(.ib-rm) .iceberg-visual:not(.is-in) .ib-label--bottom::after { transform: scaleX(0); }
.ib-js:not(.ib-rm) .iceberg-visual:not(.is-in) .ib-label--line::before { transform: scaleX(0); }
.ib-js:not(.ib-rm) .iceberg-visual:not(.is-in) .ib-label--top::before,
.ib-js:not(.ib-rm) .iceberg-visual:not(.is-in) .ib-label--bottom::before { transform: scale(0); }
.ib-label--top { --d: 0.25s; }
.ib-label--line { --d: 0.7s; }
.ib-label--bottom { --d: 1.15s; }
.ib-js:not(.ib-rm) .iceberg-visual.is-in .ib-label { animation: ib-label-in 1.3s var(--ib-ease) var(--d) backwards; }
.ib-js:not(.ib-rm) .iceberg-visual.is-in .ib-label--top::after,
.ib-js:not(.ib-rm) .iceberg-visual.is-in .ib-label--bottom::after { animation: ib-draw 1.4s var(--ib-ease-io) var(--d) backwards; }
.ib-js:not(.ib-rm) .iceberg-visual.is-in .ib-label--line::before { animation: ib-draw 2.2s var(--ib-ease-io) var(--d) backwards; }
.ib-js:not(.ib-rm) .iceberg-visual.is-in .ib-label--top::before,
.ib-js:not(.ib-rm) .iceberg-visual.is-in .ib-label--bottom::before { animation: ib-pop 0.9s var(--ib-ease) calc(var(--d) + 1.2s) backwards; }
@keyframes ib-label-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes ib-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ib-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* phones: labels sit on the art itself, in its quiet water and sky */
@media (max-width: 899px) {
  #method .iceberg-visual { --ib-line: 20px; max-width: var(--ibw) !important; margin-top: 56px !important; }
  .ib-pct { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .ib-cap { font-size: 0.6rem; letter-spacing: 0.15em; margin-top: 8px; }
  .ib-label--top { --ib-ly: 60px; --ib-ty: 0.178; --ib-tx: 0.395; right: auto; left: 0; width: calc(var(--ibw) * 0.395 - var(--ib-line)); }
  .ib-label--bottom {
    --ib-ly: 0px; top: calc(var(--ibh) * 0.865); left: 0; right: 0; max-width: none; text-align: center;
  }
  .ib-label--bottom .ib-cap { max-width: 17em; margin-left: auto; margin-right: auto; }
  .ib-label--bottom::after { right: auto; left: 50%; top: auto; bottom: calc(100% + 4px); width: 1px; height: calc(var(--ibh) * 0.03); transform-origin: 50% 100%;
    background: linear-gradient(0deg, rgba(212, 192, 138, 0.85), rgba(212, 192, 138, 0)); }
  .ib-label--bottom::before { right: auto; left: calc(50% - 3px); top: auto; bottom: calc(100% + 4px + var(--ibh) * 0.03); }
  .ib-js:not(.ib-rm) .iceberg-visual:not(.is-in) .ib-label--bottom::after { transform: scaleY(0); }
  .ib-js:not(.ib-rm) .iceberg-visual.is-in .ib-label--bottom::after { animation-name: ib-draw-y; }
  /* left, above the line, in the empty sky: "Ligne de flottaison" / "Línea de flotación" would cross the berg on the right */
  /* the ice at the waterline starts about 25% in, so the caption wraps to two short lines inside that sky */
  .ib-label--line .ib-cap { left: 0; right: auto; bottom: 6px; max-width: calc(var(--ibw) * 0.24); font-size: 0.56rem; letter-spacing: 0.12em; line-height: 1.5; }
}
@keyframes ib-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Blog post: a calm reading column ---------- */
/* posts only: about, blog index, privacy, site notice and burn keep blog.css spacing */
.wrap:has(.article-body) { max-width: 820px; padding-top: 168px; }
@media (max-width: 768px) { .wrap:has(.article-body) { padding-top: 120px; } }
.article-head { margin-bottom: 68px; }
.article-meta { display: flex; align-items: center; gap: 14px; letter-spacing: 0.2em; }
.article-meta::before { content: ''; width: 26px; height: 1px; background: var(--ib-gold); opacity: 0.8; }
.article-title { font-size: clamp(2.25rem, 4.8vw, 3.6rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; }
.article-body { font-family: var(--font-display); font-size: clamp(1.08rem, 1.55vw, 1.2rem); line-height: 1.82; color: #DDE2E9; }
.article-body p { margin-bottom: 1.5em; text-wrap: pretty; }
.article-body h2 {
  position: relative; margin: 2.7em 0 0.75em; padding-top: 1.15em; color: var(--ib-ivory);
  font-size: 1.62em; line-height: 1.22; letter-spacing: -0.018em; text-wrap: balance; text-shadow: 0 0 36px rgba(197, 165, 90, 0.16);
}
.article-body h2::before {
  content: ''; position: absolute; left: 0; top: 0; width: 56px; height: 1px;
  background: linear-gradient(90deg, var(--ib-gold), rgba(197, 165, 90, 0));
}
.article-body h3 { color: var(--ib-gold-light); letter-spacing: -0.01em; }
.article-body strong { color: var(--ib-ivory); }
.article-body a { overflow-wrap: anywhere; color: var(--ib-gold-light); text-decoration-color: rgba(212, 192, 138, 0.42); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color 0.25s, text-decoration-color 0.25s; }
.article-body a:hover { color: #fff; text-decoration-color: var(--ib-gold-light); }
.article-body li::marker { color: var(--ib-gold); }
.article-body blockquote {
  position: relative; border-left: 0; padding: 0.3em 0 0.3em 1.7em; margin: 2em 0; font-size: 1.22em; line-height: 1.55; color: var(--ib-gold-light);
}
.article-body blockquote::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--ib-gold), rgba(197, 165, 90, 0.08));
}
.article-body img { border: 0; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85); }
.article-foot { border-top-color: transparent; position: relative; }
.article-foot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(197, 165, 90, 0.4), rgba(197, 165, 90, 0));
}
.post-card { border-top-color: rgba(197, 165, 90, 0.16); }
.post-card:last-child { border-bottom-color: rgba(197, 165, 90, 0.16); }

/* ---------- Narration player: a sonar pill with a waterline on top ---------- */
.sdn-bar { padding: 0 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(245, 245, 245, 0.14); }
.sdn-bar::before {
  content: ''; position: absolute; left: 34px; right: 34px; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(245, 245, 245, 0.5), rgba(212, 192, 138, 0.7), rgba(245, 245, 245, 0.5), transparent);
}
.sdn-fill { background: linear-gradient(90deg, rgba(212, 192, 138, 0.55), #F5F5F5); }
.sdn-bar.is-playing .sdn-play { animation: ib-pulse 2.8s var(--ib-ease) infinite; }
@keyframes ib-pulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 192, 138, 0.40); }
  70% { box-shadow: 0 0 0 12px rgba(212, 192, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 192, 138, 0); }
}
.sd-reading { border-radius: 0.5em; }
@media (max-width: 560px) {
  :root { --sdn-height: 58px; }
  .sdn-bar { padding: 0 10px; }
  .sdn-bar::before { left: 22px; right: 22px; }
}

/* ---------- Reduced motion: the skin's own decoration stops (the ?rm=1 test hook adds .ib-rm) ----------
   Scoped to the skin: the narration player, forms and page scripts keep their own behaviour. */
html.ib-rm { scroll-behavior: auto; }
.ib-rm [class*="ib-"], .ib-rm [class*="ib-"]::before, .ib-rm [class*="ib-"]::after,
.ib-rm .accent-line::after, .ib-rm .nav-cta::after, .ib-rm .btn-primary::after,
.ib-rm .nav-links a::after, .ib-rm .sdn-bar.is-playing .sdn-play {
  animation: none !important; transition-duration: 0.001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [class*="ib-"], [class*="ib-"]::before, [class*="ib-"]::after,
  .accent-line::after, .nav-cta::after, .btn-primary::after, .nav-links a::after, .sdn-bar.is-playing .sdn-play {
    animation: none !important; transition-duration: 0.001ms !important;
  }
  .nav-cta:hover, .btn-primary:hover, .btn-secondary:hover, .proof-card:hover, .engagement:hover,
  .zone:hover, .standard-card:hover, .proj-card:hover { transform: none; }
}

/* ---------- Mode switch: Read / Story / Listen (injected by motion.js) ----------
   html[data-mode] is set before paint by the inline script in the build head block. */
.ib-mode {
  position: fixed; right: 16px; bottom: 16px; z-index: 902;
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(4, 10, 18, 0.86); border: 1px solid rgba(212, 192, 138, 0.30);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  font: 600 11px/1 var(--font-ui, system-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase;
}
.sdn-active .ib-mode { bottom: calc(var(--sdn-height) + 24px); }
.ib-mode button {
  border: 0; border-radius: 999px; padding: 9px 13px; cursor: pointer;
  background: transparent; color: var(--ib-muted); font: inherit; letter-spacing: inherit; text-transform: inherit;
  transition: background 0.3s, color 0.3s;
}
.ib-mode button:hover { color: var(--ib-ivory); }
.ib-mode button[aria-pressed="true"] { background: linear-gradient(180deg, #DAC27F, #B6944A); color: #07111d; }
.ib-mode.is-hint { animation: ib-mode-hint 1.6s var(--ib-ease) 1.2s 1 both; }
@keyframes ib-mode-hint {
  0% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(212, 192, 138, 0.55); }
  60% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 14px rgba(212, 192, 138, 0); }
  100% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(212, 192, 138, 0); }
}
/* phones: the pill sits above the narration bar on the right; the centred resume pill wins while it shows */
@media (max-width: 560px) {
  .ib-mode { right: 12px; bottom: 12px; }
  .ib-mode button { padding: 8px 10px; font-size: 10px; }
  body:has(.sdn-resume.is-visible) .ib-mode { opacity: 0; pointer-events: none; }
}
@media print { .ib-mode { display: none; } }

/* ---------- Print: plain page ---------- */
@media print {
  .ib-depth, .ib-wl, .ib-gl, .ib-hero-gl, .ib-hero-art { display: none !important; }
  .hero { background: none; }
  .hero::after { display: none; }
  .ib-js .ib-reveal:not(.is-in) { opacity: 1; transform: none; }
}