/*
 * Phase 3 RESET -- visible-bug overrides
 *
 * Loaded AFTER css/spax.css (the frozen design system token bundle) so cascade wins.
 * Each rule below addresses a bug from RESEARCH.md section D + Plan 02 INVENTORY.md.
 * Bug numbering matches RESEARCH section D.
 *
 * IMPORTANT: every rule cites which bug it fixes inline. If a fix becomes
 * unnecessary (e.g. INVENTORY shows current state matches the upstream
 * reference), document the deletion reason in this file's git history.
 *
 * BUILD-04 invariant: this file does NOT modify css/spax.css. New non-hashed
 * rules introduced here are not subject to the CSS contract test (which only
 * verifies that JS-referenced HASHED classes resolve in css/spax.css).
 */

/* =====================================================================
 * Bug 1: section title contrast
 *
 * Several section titles render at insufficient contrast against their
 * wrapper background:
 *   - Highlights  ".Highlights_sectionTitle__YJS1U" -- wrapper bg:black,
 *     title has font rule but NO color rule -> inherits browser default
 *     (black) -> black-on-black = invisible
 *   - VideoSection ".VideoSection_title__cMgaj" -- title sits on the
 *     transparent canvas region; spax.css supplies font but no color
 *   - FeatureCards bare <h2> ("What we deliver") -- no class hash assigned
 *     in markup; flex-child of FeatureCards_wrapper__sctdU on white bg
 *     renders unstyled and is visually swallowed
 *
 * Fix policy:
 *   - On dark wrappers (Highlights, BusinessModel) -> color:var(--color-light-blue)
 *     (matches AccordionSection's existing intentional palette)
 *   - On light wrappers (FeatureCards, BuildingFuture) -> color:var(--color-black)
 *   - VideoSection title rides over the canvas; force white for legibility
 *
 * AccordionSection_title__cJwJ_ ("Trusted by") + AccordionSection_accordionTitle__rrUUn
 * ("Featured projects") already inherit color:var(--color-light-blue) from
 * .AccordionSection_left___jPIf (verified against the frozen rule);
 * intentionally NOT overridden here -- that palette is reference-correct.
 * ===================================================================== */
.Highlights_sectionTitle__YJS1U {
  /* dark wrapper Highlights_wrapper__GVmnJ has background:var(--color-black) */
  color: var(--color-light-blue);
}
.BusinessModel_top__3DoQ0 .BusinessModel_title__0Ay0g {
  /* dark wrapper BusinessModel_wrapper__Fogfa has background:var(--color-black) */
  color: var(--color-light-blue);
}
/* VideoSection_title__cMgaj: spax.css already has color:var(--color-white) — correct for
 * the black videoContainer expanded state. No override needed.
 * VideoSection_videoContainer__PvaTp: intentionally starts hidden via GSAP autoAlpha:0
 * in VideoSection.js. No CSS override needed; JS controls its lifecycle. */
.BuildingFuture_title__yzpbD {
  /* light wrapper BuildingFuture_wrapper__5FwHT has background:var(--color-white) */
  color: var(--color-black);
}
.FeatureCards_wrapper__sctdU > h2 {
  /* bare h2 ("What we deliver") on white wrapper -- spax.css has no rule for it.
   * Match the typography size of sibling section titles + force black for contrast. */
  color: var(--color-black);
  font-family: LayGrotesk-Semibold, sans-serif;
  font-weight: 400;
  font-size: calc(48 * calc(1 * var(--vr)) * 1);
  line-height: calc(98 / 100 * 48 * calc(1 * var(--vr)) * 1);
  letter-spacing: calc(-0.48 * var(--vr));
  margin: 0 0 calc(46 * var(--vr));
  width: 100%;
  flex: 0 0 100%;
}

/* =====================================================================
 * Bug 3: footer layout overlap
 *
 * css/spax.css defines .Footer_content__9KGB4 as a 4-column grid with
 * grid-template-areas: "logo . textLogo textLogo" / ". . navList navList" / ". . . ." / "titleContainer . linksContainer designMentions"
 * and gives only these children explicit grid-area names:
 *   .Footer_logo__x3Zdo               -> logo
 *   .Footer_textLogo__PQKYe           -> textLogo (NOT in our markup)
 *   .Footer_navList__fICF8            -> navList   (we have TWO of these -> collide)
 *   .Footer_titleContainer__hEgIR     -> titleContainer
 *   .Footer_linksContainer__K_nCe     -> linksContainer (NOT in our markup)
 *   .Footer_designMentions__eYRVZ     -> designMentions
 *
 * Result with current SPAX markup: the offices <ul>, the nav <ul>, the
 * legalLinks <ul>, the socialsLinks <ul>, and the rights <p> all fall back
 * to grid-area:auto and stack at row 1 / column 1 -> visual overlap.
 *
 * Fix policy: keep BUILD-04 frozen-spax.css intact and force a vertical
 * full-width fallback for every direct child of Footer_content. Each list /
 * paragraph occupies its own row.
 * ===================================================================== */
/* Footer flex-column override REMOVED 2026-05-07.
   The override was a workaround for missing markup (Footer_textLogo,
   Footer_linksContainer were absent). After the footer.html restructure
   added all icomat children + grid-areas, the spax.css 4-column grid lays
   out correctly without the override. */

/* Light styling for the new linksContainer + nav items (icomat doesn't ship
   these and we want them legible). */
.Footer_wrapper__r9Ps3 .Footer_navList__fICF8 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.Footer_wrapper__r9Ps3 .Footer_subLinks__8uF5P {
  list-style: none;
  padding: 0;
  margin: calc(8 * var(--vr)) 0 0 calc(16 * var(--vr));
}
.Footer_wrapper__r9Ps3 .Footer_navList__fICF8 a,
.Footer_wrapper__r9Ps3 .Footer_navList__fICF8 button,
.Footer_wrapper__r9Ps3 .Footer_legalLinks__26cwe a,
.Footer_wrapper__r9Ps3 .Footer_socialsLinks__WpSUM a {
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.Footer_wrapper__r9Ps3 .Footer_legalLinks__26cwe ul,
.Footer_wrapper__r9Ps3 .Footer_socialsLinks__WpSUM {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =====================================================================
 * Bug 4: FeatureCards black-bar artifact
 *
 * css/spax.css frozen rule (verified): .FeatureCards_cardTitle__qSosC
 * sets { background:var(--color-black); color:var(--color-white) }. In
 * the upstream design system this class is applied to a wrapper-style
 * "card title" variant where the entire card body is a black panel.
 * Our SPAX markup applies the class to the <h3> element nested INSIDE
 * a regular .FeatureCards_card__1p4am (which has background:#f1f1f1) --
 * so the h3 renders as a black bar sitting on top of the light card.
 * That is the visible "black bar" behind every reference card label.
 *
 * Fix policy: when .FeatureCards_cardTitle__qSosC is a CHILD of a
 * .FeatureCards_card__1p4am (i.e. the variant we ship), neutralize the
 * background and color so the h3 inherits the card's text colour. The
 * frozen :hover rule on the parent card still flips card->black/text->white
 * as designed; the cardTitle child stays transparent so colour cascades.
 * Use !important because we cannot remove the artifact-causing rule at
 * its source (css/spax.css frozen).
 * ===================================================================== */
.FeatureCards_card__1p4am > .FeatureCards_cardTitle__qSosC {
  background: transparent !important;
  color: inherit !important;
  /* Defensive: if any ::before / ::after pseudo-element ships in spax.css
   * for this class (none observed at audit time), neutralize them too. */
  text-shadow: none !important;
}
.FeatureCards_card__1p4am > .FeatureCards_cardTitle__qSosC::before,
.FeatureCards_card__1p4am > .FeatureCards_cardTitle__qSosC::after {
  content: none !important;
}
/* Subtitle inside the now-transparent cardTitle should pick up the card's
 * standard description tone, not the spax.css default of hsla(0,0%,100%,.59)
 * (which assumes the cardTitle is a black-panel variant). */
.FeatureCards_card__1p4am > .FeatureCards_cardTitle__qSosC + .FeatureCards_subTitle__5apuX,
.FeatureCards_card__1p4am > .FeatureCards_subTitle__5apuX {
  color: rgba(8, 8, 8, 0.6);
}

/* =====================================================================
 * Bug 5: AccordionSection layout proportions -- DEFERRED.
 *
 * Per Plan 01 INVENTORY.md section D, current proportions match the upstream
 * design (left column is intentionally minimal -- title-only with parallax;
 * spec source homepage/deobfuscated.js:564 + AccordionSection.md). No CSS
 * override needed in this plan. Plan 05 (pixel-tune) verifies side-by-side
 * via compare.html and tunes if drift surfaces.
 * ===================================================================== */

/* =====================================================================
 * Bug 6: Hero -> AccordionSection transition spacing -- RETIRED (Plan 04).
 *
 * The temporary padding-top hack on .AccordionSection_accordionSection__xXClX
 * has been retired now that Plan 04 ships the Spacer module
 * (data-module="spacer", styles_space__Spo9r) between the Hero and Accordion
 * sections in pages/home.html. The frozen .styles_space__Spo9r rule in
 * css/spax.css drives padding via the --space-desktop / --space-mobile CSS
 * variables set inline on the spacer wrapper.
 *
 * Spec source: chunks/143:101-119 (Spacer / eN.A component, desktop=50 mobile=50).
 * ===================================================================== */

/* =====================================================================
 * Phase 3 Plan 05 — pixel-tune HotLinks label slide-on-hover
 *
 * The HotLinks JS module (tuned 2026-05-05 per Plan 05 spec audit) now wraps
 * each [data-hotlinks-label] inner content in a <span class="line-inner">
 * that yPercent-slides on hover (verbatim params from chunks/143:168-181):
 *   - mouseenter: yPercent: -110, duration: 0.7s, delay: 0.3s, ease: back.out(2)
 *   - mouseleave: yPercent: 0, duration: 0.8s, ease: back.out(2)
 *
 * For the slide to clip cleanly at the label's bottom edge, the label needs
 * overflow:hidden + display:inline-block. The JS sets these inline as a
 * defense-in-depth, but an upstream-style CSS rule documents the intent
 * declaratively for any markup that doesn't go through the JS wrapper path.
 * ===================================================================== */
[data-hotlinks-label] {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

[data-hotlinks-label] > .line-inner {
  display: inline-block;
  will-change: transform;
}

/* =====================================================================
 * HotLinks image fill fallback (no-JS)
 *
 * HotLinks_image__OEkiS has position:absolute!important from spax.css
 * but no width/height/inset rules — those are set by the HotLinks JS
 * module via GSAP. Without JS, images render at natural size rather than
 * filling the card. This rule fills them until JS takes over.
 * ===================================================================== */
.HotLinks_image__OEkiS {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* =====================================================================
 * CTA label/arrow z-index lift
 *
 * The CTA has 3D-flipped background halves (CTA_backgroundTop rotateX(-180deg))
 * that interact with text rendering — top half of label appears split/chromatic.
 * Force label and arrow above the background layers with explicit z-index +
 * isolated stacking to keep text crisp.
 * ===================================================================== */
.CTA_cta__2gZWE { isolation: isolate; }
.CTA_ctaLabel__vB_JV,
.CTA_arrowContainer__1O_b_ {
  position: relative;
  z-index: 2;
}
.CTA_background__PQ3mj { z-index: 0; }

/* =====================================================================
 * IndustriesCarousel — pre-JS fallback rules REMOVED 2026-05-06.
 *
 * The previous `:not(.Caroussel_active__HPvSL) { display: none }` rule
 * matched the OLD DOM contract where the carousel JS toggled .active on
 * each <article> slide. After the spec-driven rewrite, JS toggles .active
 * on the nav BUTTONS instead (matching icomat) — slides are hidden via
 * GSAP-driven clip-path inset instead. The old rule was hiding all slides
 * permanently, painting the section flat black. See
 * `.planning/industries-carousel-bug.md` for the full root-cause writeup.
 *
 * The progressBar `opacity: 1 !important` rule was also removed — icomat's
 * spax.css ships `.Caroussel_active__HPvSL .Caroussel_progressBar__5WCXX
 * { opacity: 1 }` correctly; the override forced ALL bars visible.
 * ===================================================================== */

/* =====================================================================
 * HotLinks card label — REMOVED 2026-05-07.
 *
 * The previous override styled `[data-hotlinks-label]` as a custom pill
 * because the unstyled span had no visual treatment. After restructuring
 * the HotLinks HTML to match icomat (chunks/143:97 — Picture + GlassLink
 * are SIBLINGS, link uses `GlassLink_glassLink__lI1yx` class with proper
 * background/glow/label child spans), the spax.css `GlassLink_*` rules now
 * provide the correct pill styling natively. No override needed.
 *
 * Position the link inside the card centered via existing GlassLink rules:
 * .GlassLink_glassLink__lI1yx { display:flex; justify-content:center; align-items:center }
 * Combined with .HotLinks_link__6Uerh { width:100%; height:100% }.
 * ===================================================================== */
.HotLinks_card__C79Cl .HotLinks_link__6Uerh {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto !important;
  height: auto !important;
  z-index: 2;
}

/* GlassLink — restore icomat's white-frost background (was overridden to dark).
   This translucent white tint over the dark photograph creates the visible
   pill "border" look at rest. Per .planning/glasslink-final-spec.md §1. */
.HotLinks_link__6Uerh .GlassLink_background__o4T7f {
  background: hsla(0, 0%, 100%, 0.19) !important;
  backdrop-filter: blur(38px) !important;
  -webkit-backdrop-filter: blur(38px) !important;
}

/* GlassLink label — simple color flip (the line-mask text-shadow trick
   was making text appear black at rest because GSAP overrode the CSS
   translateY required for the trick to work). White text on dark glass
   at rest, dark text on white pill at hover. */
/* Override icomat's `display: flow-root; margin-top: 1.5%` which causes
   asymmetric text clipping across cards (margin-top % varies by link width,
   so wider labels like "FEATURED PROJECTS" get clipped at top while shorter
   labels like "BEGIN ENQUIRY" don't). Use simple display:block + no margin. */
.HotLinks_link__6Uerh .GlassLink_label__gDlrE {
  display: block !important;
  margin-top: 0 !important;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
  line-height: 1.6;
  color: #fff !important;
  transition: color 0.4s ease 0.15s;
  white-space: nowrap;
}
.HotLinks_link__6Uerh:hover .GlassLink_label__gDlrE {
  color: #080808 !important;
}
/* Ensure the conic-gradient glow halo is visible on hover. spax.css sets
   z-index:-1 which would put it behind the link, but with isolation:isolate
   on the link, the glow renders above the dark background but below the label. */
.HotLinks_link__6Uerh { isolation: isolate; }

/* Ensure the white sweep-in panel starts off-screen (icomat sets yPercent:110
   via gsap.set at mount). HotLinks.js will manage transform via GSAP. */
.GlassLink_backgroundWhite__12lVL {
  transform: translateY(110%);
  will-change: transform;
}

/* =====================================================================
 * Phase 3 ROUND-2 fixes — moved here from inline <style> in header.html
 * (2026-05-07 cleanup pass). All rules below were originally embedded in
 * partials/header.html during iterative bugfixing; consolidated here so
 * the override surface lives in one place.
 * ===================================================================== */

/* ---------- Document-level fixes ---------- */

/* Prevent horizontal scrollbar caused by off-screen slide-in panels
   (ContactSection, Dialog) that use translateX(100%) while hidden.
   icomat achieves this via React's viewport management; we need it explicit. */
html { overflow-x: hidden; }

/* Body must be position:relative so the canvas (position:absolute; bottom:0
   in footerMode) anchors to the bottom of the document, not the viewport.
   Without this, the canvas stays at the top when scrolled to the footer. */
body { position: relative; }

/* Body scroll lock used by Dialog and mobile menu (icomat reference).
   Only `overflow: hidden` — touch-action:none would also block scrolling
   INSIDE the open menu wrapper (Nav_wrapper has its own overflow-y:scroll
   for menu content that exceeds viewport height). */
html.lock-scroll, body.lock-scroll { overflow: hidden !important; }
/* The Nav_wrapper handles its own internal scroll on mobile when open. */
.Nav_wrapper__EfAHX.Nav_show__gn0zM {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Nav text-shadow ghost-row fix ---------- */
/* icomat's nav uses <div class="line-mask"><div class="line">text</div></div>
   where line-mask has overflow:clip to mask the text-shadow.
   Our HTML uses <span class="Nav_label__EHdHO"><span class="line">text</span></span>
   so we need to make the label a block-level mask and the .line a block child. */
.Nav_label__EHdHO { display: inline-block; overflow: hidden; vertical-align: middle; }
.Nav_label__EHdHO .line { display: block; }

/* ---------- Hero ---------- */

/* Dark gradient overlay for text legibility over the video.
   Applied as a pseudo-element on Hero_inner__1lTbi (position:relative)
   placed after the video (z-index 1) but before content (z-index 2+). */
.Hero_inner__1lTbi::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 35%,
    rgba(0, 0, 0, 0.15) 55%,
    rgba(0, 0, 0, 0.50) 100%
  );
  pointer-events: none;
}
/* Lift hero content above the gradient overlay (z-index 1) so text reads.
   ONLY target the content — do NOT touch the video, which must keep its
   spax.css `position:absolute; inset:0` to fill the inner container. */
.Hero_inner__1lTbi > .Hero_content__nG8Ry {
  position: relative;
  z-index: 2;
}

/* Hero trademark — icomat ships translateX(-25%) which was tuned to sit
   above ICOMAT's flat-top "T". On "Grid" (rounded "d"), the negative
   translate pushes the ™ into the "d". Reset translateX and add a small
   left margin so the trademark sits cleanly to the right of "Grid". */
.Hero_trademark__LT07p {
  transform: translateY(0) !important;
  margin-left: calc(2 * var(--vr));
  vertical-align: super;
}

/* ---------- CompositeDual ---------- */
/* 1. Panel wrapper has no native background — was showing white page bg.
      Set black so it blends with our Kling videos (which have black bg).
   2. Title: white text now visible against black panel.
   3. Description: simple white text at bottom-left, no gradient needed
      since the panel is uniformly dark. */
.CompositeDual_compositeItemWrapper__3nsRx {
  background: #000 !important;
}
.CompositeDual_title___Gma2 { color: rgba(255, 255, 255, 0.85) !important; }
.CompositeDual_description__COUV1 {
  color: #fff !important;
  max-width: calc(280 * var(--vr)) !important;
  bottom: calc(26 * var(--vr)) !important;
  z-index: 5;
}

/* ---------- AccordionSection ---------- */
/* Keep section dark and visible text. The canvas gradient
   (CanvasGradient.js) draws across the full ~300vh wrapper per icomat
   spec — gradient center is intentionally below viewport so only the top
   arc rises into view. Do NOT cap wrapper height. */
.AccordionSection_accordionSection__xXClX { background: #080808 !important; }
.AccordionSection_left___jPIf,
.AccordionSection_accordionTitle__rrUUn,
.AccordionSection_title__cJwJ_ { color: #fff !important; }
.AccordionSection_backgroundWrapper__Wa2Sy { pointer-events: none; }

/* ---------- Timeline (Our production process) ---------- */
/* Match icomat layout: title at top with reasonable padding, cards at
   bottom (space-between), wider landscape image cards that fit in
   viewport without overflow. icomat uses 300vr padding around title
   which is too much when --vr is small; scale down to fit all 7 cards. */
.Timeline_mainTitle__zdZIs {
  text-align: left !important;
  padding-top: calc(80 * var(--vr)) !important;
  margin-bottom: calc(60 * var(--vr)) !important;
  padding-left: calc(var(--grid-gutter-width) * 2) !important;
}
.Timeline_inner__XaZJy {
  justify-content: space-between !important;
  padding-bottom: calc(80 * var(--vr)) !important;
}
.Timeline_imageWrapper__ImgHt {
  aspect-ratio: 16 / 9 !important;
  max-height: 30vh !important;
}
.Timeline_card__oR91S { padding: 0 calc(20 * var(--vr)); }

/* Timeline dotted lines — icomat ships
   `clip-path: inset(0 100% 0 0)` to hide dots until scroll-in animation
   reveals them. Our Timeline.js doesn't animate that, so the dots were
   completely invisible. Override clip-path to none and match the
   opacity of the "01/02/03" label (rgba 0.27) so the line reads as a
   subtle accent, not a bright white bar. */
.Timeline_dots__R7xO_ {
  clip-path: none !important;
}
.Timeline_lineContainer__nkc_3 {
  opacity: 0.27 !important;
}

/* ---------- LargeComposite ---------- */
/* Make the hero video TRULY edge-to-edge. Stock CSS adds
   `padding: 0 1 grid-gutter` and the section is also wrapped in a Barba
   container that may have its own padding. Force width: 100vw and use a
   negative margin trick so the section escapes any parent padding and
   spans the full viewport regardless. */
.LargeComposite_wrapper__y9NAa {
  padding: 0 !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
}
.LargeComposite_sequenceContainer__IpAmz {
  width: 100vw !important;
}

/* ---------- DialogTriggerButton ---------- */
/* backgroundWhite pill is meant to scale in on hover only. Without the
   hover JS, it stays visible and hides the white label. Initial state:
   scale(0); on button hover, scale(1) reveals the white pill, and the
   label color flips to black so it's still readable. */
.DialogTriggerButton_backgroundWhite__cVy1Y {
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}
.DialogTriggerButton_btn__QK7_c:hover .DialogTriggerButton_backgroundWhite__cVy1Y {
  transform: scale(1);
}
.DialogTriggerButton_label__xYpmq { transition: color 0.3s ease; }
.DialogTriggerButton_btn__QK7_c:hover .DialogTriggerButton_label__xYpmq { color: #000; }

/* ---------- BurgerMenu icon swap (icomat-spec parity) ----------
   icomat ships two SVG glyphs:
   - LinesIcon: 14×7 viewBox, 2 rows × 7 cols of dots (the "halftone" hamburger)
   - CloseIcon: 10×10 viewBox, 12 dots arranged as an X
   We embed them inline in header.html. CSS just sizes/positions/animates. */
.BurgerMenu_iconContainer__KwWkE { position: relative; isolation: isolate; }

.BurgerMenu_linesIcon__E5VXV,
.BurgerMenu_closeIcon__639IX {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  display: block;
  color: currentColor;
}

/* Lines icon — icomat sizes at 30% of container width. ViewBox 14:7 keeps
   aspect via display block + width only. */
.BurgerMenu_linesIcon__E5VXV {
  width: 30%;
  height: auto;
  opacity: 1;
}

/* Close (X) icon — icomat: width 20%, square viewBox 10:10. */
.BurgerMenu_closeIcon__639IX {
  width: 20%;
  height: auto;
  opacity: 0;
}

/* When menu is open: hide lines, show X */
.Header_header__qBw1J.Nav_show__gn0zM .BurgerMenu_linesIcon__E5VXV { opacity: 0; }
.Header_header__qBw1J.Nav_show__gn0zM .BurgerMenu_closeIcon__639IX { opacity: 1; }

/* Hide the "MENU" text label when the menu is open (icomat does this in JSX
   by conditionally rendering an empty span — for our CSS-only setup we
   target [data-burger-label]). */
.BurgerMenu_btn__jOz22 [data-burger-label] {
  text-transform: uppercase;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.Header_header__qBw1J.Nav_show__gn0zM [data-burger-label] {
  opacity: 0;
  visibility: hidden;
}

/* ---------- Mobile menu — DO NOT add CSS transitions to Nav_wrapper ----------
   icomat drives the mobile open/close entirely via GSAP (BurgerMenu.js
   _mobileOpen/_mobileClose). A CSS opacity transition fights the inline
   GSAP-driven transform/opacity values and causes flicker. Per
   .planning/reference-research-2026-05-06.md §3 "Pitfalls". */

/* ---------- Mobile nav item thumbnails (Nav_img) ----------
   spax.css sizes the Nav_img__K3qsj container to 71vr × 71vr at mobile but
   doesn't style the <img> inside it. Force the image to fill its parent box
   with object-fit:cover so the SPAX project photo crops nicely into a
   square thumbnail. Also ensure the link is a flex row so image + label
   sit side-by-side. */
.Nav_wrapper__EfAHX .Nav_img__K3qsj {
  overflow: hidden;
}
.Nav_wrapper__EfAHX .Nav_img__K3qsj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .Nav_wrapper__EfAHX .Nav_link__Vx_8M {
    display: flex !important;
    align-items: center;
  }
}

/* ---------- Footer layout swap ---------- */
/* After removing the large SPAX wordmark, the navList was floating in
   row 2 with a big gap above it. Move it into the textLogo grid area
   (row 1, cols 3-4) so it sits top-right, aligned with the logo.
   The empty textLogo placeholder takes the navList area to keep the
   grid-template-areas valid. */
.Footer_content__9KGB4 > .footer-nav-top {
  grid-area: textLogo !important;
  align-self: start;
  margin-top: 0 !important;
  margin-bottom: 0;
}
.Footer_content__9KGB4 > .Footer_textLogo__PQKYe:empty {
  grid-area: navList !important;
}

/* Footer legal links — horizontal single line instead of vertical list */
.footer-legal-inline {
  display: flex !important;
  flex-direction: row !important;
  gap: calc(14 * var(--vr));
  align-items: center;
}

/* Footer copyright — light weight, not bold */
.Footer_rights__cFF6s {
  font-family: AkkuratMono, sans-serif !important;
  font-weight: 400 !important;
}

/* VideoSection videoContainer — autoplay background video lives INSIDE this
   panel so the icomat scale + clip-path scroll animation masks the video too
   (the video reveals along with the panel). Background must stay transparent
   so the video itself is the visible content. */
.VideoSection_videoContainer__PvaTp {
  background: transparent !important;
  overflow: hidden !important;
}

/* VideoSection background div — icomat's AccordionSection_backgroundWrapper
   has height:300% and overflow:visible on the section, so the gradient canvas
   extends ~1500px PAST the AccordionSection bottom into the VideoSection.
   spax.css defaults this to opaque white, which hides that bleed-through.
   Make it transparent so the gradient wraps from the AccordionSection into
   the top of the VideoSection naturally. The bottom of VideoSection still
   gets its dark backdrop from the body (--color-black). */
.VideoSection_background__uk3LX {
  background: transparent !important;
}

/* AccordionSection wordmarks — icomat sized these tiny and animates a
   filter:invert(0→1) during open. That works for real coloured logos but
   makes our flat black SVG invisible on both white-active and dark-inactive
   states. Override: bump size, kill the invert filter, force opacity, and
   use mix-blend-mode:difference so the wordmark stays readable on EVERY
   background tone (white, gray, dark gradient).  */
.AccordionSection_logo__DVH1F {
  height: calc(40 * var(--vr)) !important;
  width: auto !important;
  max-width: calc(440 * var(--vr)) !important;
  max-height: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: difference !important;
}

/* Align the wordmark SVG to the left of the accordion button with a
   consistent left padding, so all 4 cards share the same anchor. */
.AccordionSection_button__r2Cp_ {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-left: calc(20 * var(--vr));
}