/* ============================================================
   DROGA5-INSPIRED THEME OVERRIDE
   Loaded last so it wins the cascade. Retints the existing
   Webflow design tokens and layers an editorial type + layout
   treatment on top of all 52 pages. Non-destructive: remove
   this one <link> to revert to the original site.
   ============================================================ */

/* ---- Fonts (free Nobel/grotesque substitutes) ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ---- 1. Retint the global design tokens ----
   Every page reads colours from these variables, so overriding
   them here recolours the entire site in one place. */
:root {
  --paper:        #f4f2ed;   /* warm off-white background   */
  /* One single background colour everywhere: surface + band both
     resolve to paper so no section/card reads as white-vs-grey. */
  --surface:      var(--paper);
  --band:         var(--paper);
  --ink:          #141414;   /* near-black text             */
  --ink-soft:     #43423e;   /* secondary text              */
  --hairline:     #ddd8cc;   /* thin rules / borders        */
  --accent:       #ffc220;   /* single restrained accent (yellow) */
  --accent-ink:   #a67c00;   /* readable yellow-family text on light bg */
  --on-accent:    var(--ink);/* dark text placed on an accent fill */

  /* remap the Webflow tokens onto the new palette.
     Kept in one coherent warm family so there is never a
     random cold-grey/white mismatch between sections. */
  --secondary--color-2: var(--paper);   /* was body background */
  --neutral--600:       var(--ink);
  --neutral--800:       var(--ink);
  --neutral--700:       var(--ink-soft);
  --neutral--500:       #8f8d85;
  --neutral--400:       var(--hairline);
  --neutral--300:       var(--paper);
  --neutral--200:       var(--band);
  --neutral--100:       var(--surface);
  --accent--primary-1:  var(--accent);
  --secondary--color-3: var(--accent);
  --secondary--color-1: var(--paper);
  --black:              var(--ink);

  /* flatten shadows to near-nothing (Droga5 is flat) */
  --general--shadow-01: transparent;
  --general--shadow-02: transparent;
  --general--shadow-03: rgba(20,20,20,0.06);
  --general--shadow-04: rgba(20,20,20,0.08);
  --general--shadow-05: rgba(20,20,20,0.10);
  --general--shadow-06: rgba(20,20,20,0.14);
  --button-shadow--white-01: transparent;
  --button-shadow--white-02: transparent;
  --button-shadow--white-03: transparent;
  --button-shadow--color-01: transparent;
  --button-shadow--color-2:  transparent;
  --button-shadow--color-03: transparent;
}

/* ---- 2. Base type ---- */
body {
  background-color: var(--paper) !important;
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial display headlines: Archivo, tight, big */
h1, h2, h3, h4, h5, h6,
.heading, .display, .hero-heading {
  font-family: 'Archivo', sans-serif;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}

h1 { font-size: clamp(3rem, 8vw, 7rem);   font-weight: 900; letter-spacing: -0.035em; margin-bottom: 0.3em; }
h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
h4 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
h5 { font-size: 1.1rem; font-weight: 700; }
h6 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

p { font-weight: 400; line-height: 1.6; color: var(--ink-soft); }

a { color: inherit; text-decoration: none; }
/* Accent hover for text links only — not card blocks (service tiles, etc.) */
a:hover:not(.card):not(.w-button) { color: var(--accent-ink); }

/* Card links: keep title + body ink on hover (blocks legacy red/accent bleed) */
a.card,
a.card:hover,
a.card .card-link-title,
a.card:hover .card-link-title,
a.card h1, a.card h2, a.card h3, a.card h4,
a.card:hover h1, a.card:hover h2, a.card:hover h3, a.card:hover h4 {
  color: var(--ink) !important;
}
a.card p,
a.card:hover p,
a.card .color-neutral-600,
a.card:hover .color-neutral-600 {
  color: var(--ink-soft) !important;
}

/* ---- 3. Flatten Webflow chrome (radius, shadows) ---- */
*,
.card, .button, .btn, .w-button,
[class*="card"], [class*="button"], [class*="badge"],
input, textarea, select, img, .w-input, .w-select {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---- 4. Buttons: solid ink, square, uppercase ---- */
.button, .btn, .w-button,
a[class*="button"], input[type="submit"] {
  background-color: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
  padding: 1rem 2rem !important;
  transition: background-color .2s ease, color .2s ease !important;
}
.button:hover, .btn:hover, .w-button:hover,
a[class*="button"]:hover, input[type="submit"]:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}

/* secondary / outline buttons */
[class*="secondary"].button, [class*="outline"].button,
.button.is-secondary, .button.w-button.secondary {
  background-color: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}
[class*="secondary"].button:hover, [class*="outline"].button:hover {
  background-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* ---- 5. Hairline rules instead of heavy borders / dividers ----
   NOTE: scope tightly. A [class*="line"] selector here would also
   match "w-inline-block" and "line-rounded-icon" (hundreds of
   elements), collapsing them to 1px and drawing stray borders. */
hr, .divider, [class*="divider"], .line {
  border: 0;
  border-top: 1px solid var(--hairline) !important;
  background: none !important;
  height: 1px !important;
}

/* ---- Cards: flat, borderless blocks (Droga5). No blanket border. ---- */
[class*="card"] {
  background-color: transparent !important;
  border: none !important;
}

/* Panel-style content cards get a subtle warm surface for definition
   (instead of an outline box), so they read cleanly on any section. */
.card.pd-42px---32px,
.testimonial-card-v1,
.footer-newsletter-card,
.contact-link-card,
.card.form {
  background-color: var(--surface) !important;
  padding: 2rem !important;
}

/* ---- 6. Nav / header: quiet, minimal ----
   Scope to the header CONTAINER only. A [class*="header"] selector
   would also match header-nav-link, header-logo-link, etc. and draw
   a stray 1px underline beneath every nav item. */
.header-wrapper, .navbar, .w-nav {
  background-color: var(--paper) !important;
  border-bottom: 1px solid var(--hairline);
}
/* Every top-level menu item — plain links AND dropdown toggles
   (Services, Works) — share one identical style. */
.nav-link, [class*="nav-link"], .dropdown-text, .dropdown-toggle {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 0.85rem !important;
  color: var(--ink) !important;
}
.header-nav-link:hover,
.dropdown-toggle:hover .dropdown-text,
.dropdown-toggle:hover { color: var(--accent-ink) !important; }

/* Align dropdown toggles with plain nav links. Runtime proof: links
   textTop=70.7px vs dropdown textTop=76.7px (+6px) because .w-nav-link
   uses vertical-align:top while .w-dropdown defaults to baseline. */
.header-nav-menu-list .header-nav-list-item {
  display: flex;
  align-items: center;
}
.header-nav-menu-list .header-nav-link,
.header-nav-menu-list .dropdown-wrapper,
.header-nav-menu-list .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  line-height: 1;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-nav-menu-list .dropdown-text {
  display: inline-block;
  line-height: 1;
}
.header-nav-menu-list .dropdown-arrow {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.header-nav-menu-list .dropdown-link {
  font-family: 'Archivo', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.header-nav-menu-list .dropdown-pd .text-200.bold {
  font-family: 'Archivo', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
}
.header-nav-menu-list .w-dropdown {
  margin-left: 0;
  margin-right: 0;
}

/* Client Portal CTA: keep on one line */
.header-btn-hidde-on-mb {
  white-space: nowrap !important;
}

/* Opened dropdown panel: keep it visible now that every background
   is the same colour (its Webflow shadow was flattened away). */
.header-wrapper,
.header-nav-menu-wrapper,
.header-content-wrapper,
.header-left-side,
.header-nav-menu-list {
  overflow: visible !important;
}

.header-nav-menu-list .dropdown-wrapper.w-dropdown {
  position: relative;
}

@media (min-width: 992px) {
  .header-nav-menu-list .dropdown-column-wrapper.w-dropdown-list {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
    padding-top: 8px !important;
    z-index: 9999;
  }

  /* Bridge the toggle and panel so hover never drops in the gap */
  .header-nav-menu-list .dropdown-wrapper.w-dropdown::before {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    top: 100%;
    height: 16px;
    z-index: 9998;
  }

  .header-nav-menu-list .dropdown-wrapper.w-dropdown::after {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 14px;
    z-index: 9998;
  }
}

/* Mobile/tablet nav: dropdowns should expand inline, full-width */
@media (max-width: 991px) {
  .header-nav-menu-wrapper,
  .header-nav-menu-list,
  .header-nav-list-item,
  .header-left-side,
  .header-content-wrapper {
    overflow: visible !important;
  }

  .header-nav-menu-list .header-nav-list-item {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  .header-nav-menu-list .header-nav-link {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    line-height: 1.25 !important;
  }

  .header-nav-menu-list .dropdown-wrapper.w-dropdown {
    display: block !important;
    width: 100% !important;
  }

  .header-nav-menu-list .dropdown-toggle.w-dropdown-toggle {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .header-nav-menu-list .dropdown-column-wrapper.w-dropdown-list,
  .header-nav-menu-list .dropdown-column-wrapper.w-dropdown-list.w--open {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 10px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .header-nav-menu-list .dropdown-columns-grid,
  .header-nav-menu-list .grid-2-columns.dropdown-columns-grid,
  .header-nav-menu-list .grid-2-columns.dropdown-pages-column-grid {
    grid-template-columns: 1fr !important;
  }

  .header-nav-menu-list .dropdown-pd,
  .header-nav-menu-list .dropdown-pd.pd-48px {
    padding: 10px 0 0 !important;
  }
}

.dropdown-column-wrapper {
  background-color: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 16px 40px rgba(20, 20, 20, 0.14) !important;
}

/* ---- 7. Eyebrows / small labels ---- */
.eyebrow, .label, [class*="eyebrow"], [class*="subtitle-small"], .caption {
  font-family: 'Archivo', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem !important;
  font-weight: 600;
  color: var(--ink-soft) !important;
}

/* ---- 8. Images: full-bleed feel, no rounding, subtle hover ---- */
img { border-radius: 0 !important; }
[class*="image-wrapper"], [class*="thumbnail"], [class*="portfolio"] img,
[class*="work"] img, [class*="case"] img {
  overflow: hidden;
}
[class*="portfolio"] img, [class*="work"] img, [class*="case"] img {
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
[class*="portfolio"] a:hover img,
[class*="work"] a:hover img,
[class*="case"] a:hover img { transform: scale(1.03); }

/* ---- 9. Forms ---- */
input, textarea, select, .w-input, .w-select {
  background-color: transparent !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink) !important;
  font-family: 'Inter', sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ink) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* ---- 10. Section backgrounds: one coherent warm system ----
   Plain sections sit on paper; the neutral utilities become a
   consistent warm scale (never cold grey); dark sections go ink.

   Runtime audit: .body was transparent because Webflow maps it to
   --button-shadow--white-01 (flattened to transparent in this theme),
   so the page showed browser-white beneath a paper-coloured header. */
html, .body, .page-wrapper, .section, .top-section {
  background-color: var(--paper) !important;
}
.bg-neutral-100 { background-color: var(--surface) !important; }
.bg-neutral-200 { background-color: var(--band) !important; }
.bg-neutral-300 { background-color: var(--neutral--300) !important; }
[class*="dark"], [class*="black-bg"], [style*="background-color: rgb(60"] {
  background-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* CTA band on homepage: black background, light content. */
.cta-section {
  background-color: var(--ink) !important;
}
.cta-section,
.cta-section h1, .cta-section h2, .cta-section h3,
.cta-section h4, .cta-section h5, .cta-section h6,
.cta-section p, .cta-section [class*="color-neutral"] {
  color: var(--paper) !important;
}
.cta-section .btn-primary.dark {
  background-color: var(--paper) !important;
  border-color: var(--paper) !important;
  color: var(--ink) !important;
}
.cta-section .btn-secondary,
.cta-section .btn-secondary.white {
  background-color: transparent !important;
  color: var(--paper) !important;
  border: 1px solid var(--paper) !important;
}
.cta-section .btn-secondary:hover,
.cta-section .btn-secondary.white:hover {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
}

/* Case-study "Learn more" badge button: remove legacy red */
.case-studies-slider-card-details-container .btn-secondary.hover-none,
.case-studies-slider-card-details-container .btn-secondary.hover-none:hover {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}
[class*="dark"] h1, [class*="dark"] h2, [class*="dark"] h3,
[class*="dark"] h4, [class*="dark"] h5, [class*="dark"] h6,
[class*="dark"] p { color: var(--paper) !important; }

/* ---- 11. Selection + focus (accessibility floor) ---- */
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 12. Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   HOMEPAGE STRUCTURAL RESTYLE (scoped, index.html only)
   Rebuilds the hero composition and stats band into a
   Droga5-style editorial layout. Structure lives here so the
   original Webflow markup stays intact and reversible.
   ============================================================ */

/* --- Hero: from centered stack to left-aligned statement --- */
.d5-hero { padding-top: clamp(3rem, 9vh, 8rem); padding-bottom: clamp(3rem, 8vh, 6rem); }

.d5-hero-eyebrow {
  font-family: 'Archivo', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 3rem;
}

/* kill the centering + entrance-scale on the hero inner blocks */
.d5-hero .text-center { text-align: left !important; }
.d5-hero .inner-container._866px,
.d5-hero .inner-container._650px {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

/* the statement itself: oversized, tight, dominates the fold */
.d5-hero .display-1 {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(3.2rem, 11vw, 10rem) !important;
  line-height: 0.92 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  max-width: 15ch;
  margin-bottom: 2rem !important;
}

.d5-hero .herosection {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem) !important;
  line-height: 1.5 !important;
  max-width: 46ch;
  color: var(--ink-soft) !important;
  margin-left: 0 !important;
  text-align: left !important;
}

.d5-hero .buttons-row.center { justify-content: flex-start !important; gap: 1rem; }

/* Notion case study cards: keep copy left-aligned and avoid squashed horizontal layout in compact grids */
#notion-home-case-studies-root .case-study-card,
#notion-case-studies-root .case-study-card,
#notion-related-case-studies-root .case-study-card {
  text-align: left !important;
}

#notion-home-case-studies-root .case-study-card h3,
#notion-home-case-studies-root .case-study-card p,
#notion-case-studies-root .case-study-card h3,
#notion-case-studies-root .case-study-card p,
#notion-related-case-studies-root .case-study-card h3,
#notion-related-case-studies-root .case-study-card p {
  text-align: left !important;
}

#notion-related-case-studies-root .case-study-card {
  grid-template-columns: 1fr !important;
  align-items: start !important;
  padding: 24px !important;
}

#notion-related-case-studies-root .card-link-image {
  width: 100% !important;
  max-width: 100% !important;
}

/* Hide dead Webflow CMS placeholders sitewide */
.empty-state.w-dyn-empty {
  display: none !important;
}

a.card.case-study-card:has(.card-link-title.w-dyn-bind-empty),
a.card.blog-card-link-v1:has(.card-link-title.w-dyn-bind-empty) {
  display: none !important;
}

/* Notion homepage blog spacing */
#notion-home-blog-root {
  margin-bottom: 0;
}

/* Service pages: hide dead "Recent work" CMS block (empty Webflow stubs) */
.section.bg-neutral-200.overflow-hidden:has(.case-study-card .w-dyn-bind-empty):not(:has(#notion-home-case-studies-root)):not(:has(#notion-case-studies-root)) {
  display: none !important;
}

/* hero campaign video: inset editorial frame, not full-bleed */
.d5-hero-video {
  max-width: min(1040px, 88%);
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  padding: 0 clamp(0.5rem, 2vw, 1.5rem);
  opacity: 1 !important;
  transform: none !important;
}

.d5-hero-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.d5-hero-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.d5-hero-video-caption {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: 'Archivo', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.d5-hero-video-caption:hover { color: var(--accent-ink); }

/* --- Homepage reels grid (replaces services block) --- */
.d5-reels-section .d5-reels-header {
  max-width: 52ch;
}

.d5-reels-section .d5-reels-header p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

.d5-reels-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.d5-reel-card {
  min-width: 0;
}

.d5-reel-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.d5-reel-media iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.d5-reel-caption {
  padding-top: 0.85rem;
}

.d5-reel-title {
  font-family: 'Archivo', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.2rem;
}

.d5-reel-client {
  font-family: 'Archivo', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.d5-reels-section .buttons-row {
  justify-content: flex-start !important;
  gap: 1rem;
}

/* --- Homepage 16:9 videos (replaces reporting block) --- */
.d5-videos-section .d5-videos-header {
  max-width: 52ch;
}

.d5-videos-section .d5-videos-header p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

.d5-videos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.d5-video-card {
  min-width: 0;
}

.d5-video-card--featured {
  grid-column: 1 / -1;
  max-width: min(1040px, 100%);
}

.d5-video-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.d5-video-media iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.d5-video-caption {
  padding-top: 0.85rem;
}

.d5-video-title {
  font-family: 'Archivo', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.2rem;
}

.d5-video-client {
  font-family: 'Archivo', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.d5-videos-section .buttons-row {
  justify-content: flex-start !important;
  gap: 1rem;
}

/* ---- Notion detail article typography ---- */
.notion-article {
  max-width: 860px;
  margin: 0 auto;
}
.notion-article-header {
  margin-bottom: 2.25rem;
}
.notion-meta {
  font-family: 'Archivo', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}
.notion-excerpt {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 64ch;
}
.notion-cover {
  width: 100%;
  height: auto;
  margin-top: 1.25rem;
  border: 1px solid var(--hairline);
}
.notion-content {
  line-height: 1.75;
}
.notion-content h1,
.notion-content h2,
.notion-content h3 {
  margin-top: 2.1rem;
  margin-bottom: 0.8rem;
  color: var(--ink);
}
.notion-content p {
  margin: 0 0 1rem;
  color: var(--ink);
}
.notion-content ul,
.notion-content ol {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}
.notion-content blockquote {
  border-left: 2px solid var(--hairline);
  padding-left: 1rem;
  color: var(--ink-soft);
  margin: 1rem 0;
}
.notion-content figure {
  margin: 1.5rem 0;
}
.notion-content figure img {
  width: 100%;
  border: 1px solid var(--hairline);
}
.notion-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (max-width: 767px) {
  .d5-videos-grid { grid-template-columns: 1fr; }
  .d5-video-card--featured { max-width: 100%; }
}

@media (max-width: 1199px) {
  .d5-reels-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .d5-reels-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
  .d5-reel-card {
    flex: 0 0 min(72vw, 280px);
    scroll-snap-align: start;
  }
}

/* --- Stats: editorial band with hairline dividers --- */
.card.stats-card {
  border: 0 !important;
  border-left: 1px solid var(--hairline) !important;
  padding: 1.5rem 1.5rem 1.5rem 2rem !important;
  background: transparent !important;
}
.card.stats-card:first-child { border-left: 0 !important; padding-left: 0 !important; }

.card.stats-card [class*="display"],
.card.stats-card [class*="heading"] {
  font-family: 'Archivo', sans-serif !important;
  font-size: clamp(2.8rem, 5vw, 4.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
}
.card.stats-card p {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem !important;
  font-weight: 600;
  color: var(--ink-soft) !important;
  margin-top: 0.5rem;
}

/* --- Section rhythm: more air between sections (Droga5 pacing) --- */
.d5-hero + .section, .section + .section { padding-top: clamp(4rem, 9vh, 7rem); }

/* --- Mobile: keep the statement readable --- */
@media (max-width: 767px) {
  .d5-hero .display-1 { font-size: clamp(2.6rem, 15vw, 4rem) !important; max-width: 100%; }
  .d5-hero-video { max-width: 100%; padding: 0; }
  .card.stats-card { border-left: 0 !important; border-top: 1px solid var(--hairline) !important; padding-left: 0 !important; }
  .card.stats-card:first-child { border-top: 0 !important; }
}

/* --- Footer social icons: modern monochrome set --- */
.social-media-grid-top .link-square-icon img {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}

.social-media-grid-top .link-square-icon:hover img {
  opacity: 0.72;
}