/* ==========================================================================
   custom.css — site-wide theme + motion + interaction layer
   NOTE: bump the ?v= version string in every HTML <link>/<script> on EVERY
   CSS/JS change (cache-busting for Cloudflare + browser caches).
   Loaded AFTER the Webflow-generated CSS so it can safely override.
   Single source of truth for colour theming, easing, durations, scroll
   and hover behaviour. Theme follows the visitor's OS setting only —
   pure CSS via prefers-color-scheme, no JS and no toggle.
   ========================================================================== */

:root {
  /* ---- Radius scale ----
     Completes the scale started in leroice25.webflow.css :root, which
     already defines --radius-small (.5rem) and --circle (9999px). */
  --radius-xs: .125rem;
  --radius-sm: .25rem;
  --radius-lg: 1rem;

  /* ---- Type scale ----
     Every font-size in the design stylesheet references one of these.
     Values are the site's existing sizes, so tokenising changed nothing
     visually. Steps marked (legacy) are odd values kept for fidelity;
     prefer a neighbouring step for anything new. */
  --text-3xs: .5rem;      /* 8px  — slider nav dots            */
  --text-2xs: .625rem;    /* 10px — .text-size-micro           */
  --text-xs: .75rem;      /* 12px — .text-size-tiny            */
  --text-sm: .875rem;     /* 14px — .text-size-small           */
  --text-base: 1rem;      /* 16px — body, .text-size-regular   */
  --text-md: 1.125rem;    /* 18px                              */
  --text-lg: 1.25rem;     /* 20px — .text-size-medium          */
  --text-xl: 1.5rem;      /* 24px — .text-size-large           */
  --text-2xl: 2rem;       /* 32px                              */
  --text-3xl: 2.5rem;     /* 40px                              */
  --text-4xl: 3rem;       /* 48px                              */
  --text-5xl: 3.25rem;    /* 52px (legacy, style-guide only)   */
  --text-6xl: 3.5rem;     /* 56px                              */
  --text-7xl: 4rem;       /* 64px                              */
  --text-8xl: 5rem;       /* 80px                              */
  --text-9xl: 6rem;       /* 96px — h1 base                    */

  /* ---- Spacing scale ---- */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Page-edge gutter shared by sections, sliders, hero media and the
     mid-nav container so every breakpoint has one consistent inset. */
  --gutter: 1rem;

  /* ---- Motion tokens ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;

  /* Height to clear the fixed nav when jumping to an in-page anchor.
     Tune this if the header height changes. */
  --nav-offset: 100px;

  /* ---- Colour theme: LIGHT (default) ----------------------------------
     Semantic surface / text / border tokens. The design stylesheet
     references only these; the dark block below just re-points them. */

  color-scheme: light;

  /* Surfaces */
  --surface-page: #f5f5f5;                             /*       page bg       */
  --surface-raised: #fff;                              /* designated raised-panel
                                                          token: white panels on
                                                          the #f5f5f5 page      */
  --surface-sunken: var(--base-color-neutral--neutral-lightest); /* #eee inset */
  --surface-inverse: var(--base-color-neutral--black); /* #000  always-dark  */
  --surface-nav: rgba(255, 255, 255, 0.8);             /*       frosted nav   */
  --surface-nav-scrolled: rgba(245, 245, 245, 0.8);    /*       nav on scroll */

  /* Text */
  --text-body: var(--base-color-neutral--black);       /* #000  body text    */
  --text-muted: #525252;                               /*       captions      */
  --text-on-inverse: var(--base-color-neutral--white); /* #fff  on dark block */

  /* Accent chip (link hover) — stays light in BOTH themes, so its text
     stays dark in both. Do not flip these in the dark block. */
  --surface-accent: var(--base-color-brand--blue-light); /* #d9e5ff */
  --text-on-accent: var(--base-color-neutral--neutral-darkest); /* #111 */

  /* Borders */
  --border-strong: rgba(0, 0, 0, 0.85);
  --border-subtle: #e2e2e2;
  --border-hairline: rgba(0, 0, 0, 0.1);

  /* Overlay */
  --overlay-scrim: rgba(0, 0, 0, 0.5);

  /* Brand one-offs (identical in both themes) */
  --brand-blue-alt: #2d40ea;
  --brand-magenta: #d600c4;
  --brand-slate: #728ea7;
  --brand-crimson: #9b2626;
  --brand-indigo: #1c1849;
}

/* --------------------------------------------------------------------------
   Colour theme: DARK (true black) — automatic from the visitor's OS setting
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
  color-scheme: dark;

  /* Surfaces — true black page; raised/sunken carry a hint of elevation */
  --surface-page: var(--base-color-neutral--black);   /* #000 true black */
  --surface-raised: #0d0d0d;                          /* raised panels on black */
  --surface-sunken: #161616;
  /* --surface-inverse stays #000 (blends into the true-black page) */
  --surface-nav: rgba(0, 0, 0, 0.8);
  --surface-nav-scrolled: rgba(10, 10, 10, 0.85);

  /* Text */
  --text-body: var(--base-color-neutral--white);
  --text-muted: #9a9a9a;
  /* --text-on-inverse stays white */

  /* Borders */
  --border-strong: rgba(255, 255, 255, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.14);
  --border-hairline: rgba(255, 255, 255, 0.1);

  /* Re-point the design system's own semantic tokens */
  --text-color--text-primary: var(--base-color-neutral--white);
  --text-color--text-secondary: #b3b3b3;
  --border-color--border-primary: #2a2a2a;
  --link-color--link-secondary: var(--base-color-neutral--white);
  }

  /* The wordmark SVG is solid black — invert it so it reads on black */
  .navbar10_logo {
    filter: invert(1);
  }
}

/* --------------------------------------------------------------------------
   Breakpoint token overrides
   -------------------------------------------------------------------------- */
@media screen and (max-width: 479px) {
  :root {
    /* Matches the dominant existing ≤479 inset (.slider, .hero-art,
       .home-work-grid-wrapper, .section-work all used .5rem). */
    --gutter: .5rem;
  }
}

/* --------------------------------------------------------------------------
   Heading semantics
   Every page needs exactly one <h1>. Where the design has no visible page
   title, the <h1> is present but visually hidden; where it does, the
   visible title element IS the <h1>.
   -------------------------------------------------------------------------- */

/* Hidden from sight, still announced by screen readers and read by crawlers.
   (Never use display:none for this — that hides it from assistive tech too.) */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Case-study titles are real <h1>s now; keep the design's regular weight
   and neutral tracking rather than the h1 element defaults (600 / -.01em). */
h1.text-size-xl {
  font-weight: 400;
  letter-spacing: normal;
}

/* The homepage intro was previously marked up as the <h1>; it is now a <p>,
   so it keeps the tighter heading typography it has always rendered with. */
.home-intro {
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   Smooth in-page scrolling
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* Offset any anchor target so its heading clears the fixed nav.
   :target covers every hash link automatically; .section-work is a
   belt-and-braces fallback for direct page loads. */
:target,
.section-work {
  scroll-margin-top: var(--nav-offset);
}

/* --------------------------------------------------------------------------
   Consistent nav / logo hover feedback
   -------------------------------------------------------------------------- */
.navbar10_logo-link {
  transition: opacity var(--dur-base) var(--ease-standard);
}
.navbar10_logo-link:hover {
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
   Reduced-motion: honour the user's OS preference across scroll + animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}