/* ==========================================================================
   FALC — site stylesheet
   Single stylesheet for every page. Brand tokens, fonts and the contrast
   rules live in /assets/brand/falc-brand.css and are imported, never
   redeclared here. Component styling extends the article reference
   implementation (articles/article.css in the source project) so article
   pages keep their established look under the shared shell.
   ========================================================================== */

@import url("../brand/falc-brand.css");

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

img { max-width: 100%; height: auto; }

.inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

main { display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--falc-deep); color: #fff; padding: 10px 18px;
  border-radius: 0 0 4px 0; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

h1, h2, h3, h4 { text-wrap: balance; }

a { text-decoration-thickness: 1px; text-underline-offset: 2.5px; }

/* --------------------------------------------------------------------------
   Dummy ribbon and VERIFY flags
   -------------------------------------------------------------------------- */

.dummy-ribbon {
  background: #8A2C24; color: #fff; text-align: center;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 16px;
}

mark.verify {
  background: #F5E3E0; color: #8A2C24;
  font-size: .82em; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 3px; white-space: normal;
}

.dummy-tag {
  background: #F5E3E0; color: #8A2C24;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 3px;
}

/* Missing Asset Protocol: visible placeholder block */
.placeholder-block {
  background: #FBEFED; border: 1px dashed #C98B84; border-radius: 5px;
  padding: 20px 24px; margin: 24px 0; color: #6E322C; font-size: 15px;
}
.placeholder-block .ph-label {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #8A2C24;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Utility bar + header
   -------------------------------------------------------------------------- */

.utility-bar {
  background: var(--falc-deep); font-size: 13.5px;
}
.utility-bar .inner {
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  padding-top: 6px; padding-bottom: 6px;
}
.utility-bar a {
  color: #B4C6CE; text-decoration: none; padding: 6px 4px; min-height: 32px;
  display: inline-flex; align-items: center;
}
.utility-bar a:hover { color: #fff; }
.utility-sep { color: #4A626C; }

.site-header {
  background: var(--falc-paper);
  border-bottom: 1px solid var(--falc-line);
  position: sticky; top: 0; z-index: 40;
  transition: box-shadow .35s ease;
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 18px; padding-bottom: 18px;
  position: relative; z-index: 2;
}

/* Depth-scan on the header (after the framer "WebGL depth scan"
   component, CSS-only). Two synchronised layers sweep the bar every few
   seconds: a comet-like teal pass over the surface — soft rising trail,
   faint echo line, crisp bright leading edge — and a glowing highlight
   that traces the header's bottom edge underneath it. Runs from page
   load; the pinned state only adds the shadow and teal hairline. */
.site-header::before,
.site-header::after {
  content: ""; position: absolute; pointer-events: none; z-index: 1;
  background-repeat: no-repeat; background-size: 300% 100%;
  background-position: 300% 0;
  animation: header-scan 9s cubic-bezier(.45, .05, .55, .95) infinite;
}
.site-header::before {
  inset: 0;
  /* comet body: trail builds through a thin echo line to a crisp
     leading edge. (Stops compress 3x on screen: 300% bg-size.) */
  background-image: linear-gradient(97deg,
    transparent 42%,
    rgba(0, 160, 158, 0.05) 46.5%,
    rgba(0, 160, 158, 0.13) 48.6%,
    rgba(0, 160, 158, 0.24) 48.9%,   /* echo line */
    rgba(0, 160, 158, 0.10) 49.2%,
    rgba(0, 160, 158, 0.22) 50.4%,
    rgba(0, 160, 158, 0.38) 50.8%,
    rgba(0, 199, 196, 0.62) 51.05%,  /* leading edge */
    transparent 51.4%);
  /* the pass glows up from the scan line: strong at the bottom edge,
     dissolving toward the top of the bar */
  -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,.45) 55%, transparent 96%);
  mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,.45) 55%, transparent 96%);
}
.site-header::after {
  left: 0; right: 0; bottom: -2px; height: 3px;
  background-image: linear-gradient(90deg,
    transparent 36%, rgba(0, 160, 158, 0.55) 45%,
    rgba(0, 160, 158, 0.9) 49%, #00D4D1 51%,
    rgba(0, 160, 158, 0.7) 54%, transparent 64%);
  filter: drop-shadow(0 0 12px rgba(0, 160, 158, 0.8));
}
.site-header.is-stuck {
  border-bottom-color: var(--falc-teal-line);
  box-shadow: 0 10px 30px -18px rgba(15, 40, 48, 0.35);
}
@keyframes header-scan {
  0%       { background-position: 300% 0; }
  68%      { background-position: -80% 0; }
  100%     { background-position: -80% 0; }  /* rest between sweeps */
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
  .site-header::before, .site-header::after { animation: none !important; opacity: 0 !important; }
}
.site-header .brand { display: inline-flex; }
.site-header .falc-logo { width: 150px; height: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a {
  color: var(--falc-ink-2); text-decoration: none; font-size: 15.5px;
  padding: 10px 9px; border-radius: 3px; min-height: 44px;
  display: inline-flex; align-items: center; cursor: pointer;
}
.site-nav a:hover { color: var(--falc-link); }
.site-nav a[aria-current="true"] { color: var(--falc-ink); font-weight: 700; }
.site-nav a.header-cta {
  background: var(--falc-deep); color: #fff; margin-left: 10px;
  padding: 10px 20px; font-weight: 700;
}
.site-nav a.header-cta:hover { background: #1A3A45; color: #fff; }

.nav-toggle {
  display: none; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--falc-line-strong); border-radius: 3px;
  color: var(--falc-ink); font: inherit; font-size: 14px;
  padding: 10px 14px; min-height: 44px; min-width: 44px; cursor: pointer;
}
.nav-toggle-bars {
  display: block; width: 18px; height: 2px; background: currentColor;
  position: relative;
}
.nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--falc-surface); border-bottom: 1px solid var(--falc-line);
    flex-direction: column; align-items: stretch; padding: 10px 16px 18px;
    box-shadow: 0 14px 24px rgba(15, 40, 48, .08);
  }
  .site-nav.open { display: flex; }
  .site-nav a { min-height: 48px; font-size: 17px; }
  .site-nav a.header-cta { margin-left: 0; margin-top: 8px; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Page head: eyebrow → H1 → subtitle → supporting sub
   -------------------------------------------------------------------------- */

.page-head { padding: 64px 0 44px; }
.page-head .inner, .article-head { max-width: 808px; }

.eyebrow {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--falc-link); font-weight: 700; margin: 0 0 18px;
}

h1 {
  font-size: clamp(2rem, 4.6vw, 3.05rem);
  line-height: 1.12; letter-spacing: -.015em;
  margin: 0 0 16px; font-weight: 700;
}

.subtitle {
  font-size: 1.3rem; line-height: 1.45; color: var(--falc-ink-2);
  margin: 0 0 14px;
}

.supporting-sub {
  font-size: 1.05rem; color: var(--falc-ink-3); margin: 0;
}

/* --------------------------------------------------------------------------
   Hero (home): typographic, on the deep ground. No skyline.
   -------------------------------------------------------------------------- */

.hero-band { padding: 96px 0 88px; position: relative; overflow: hidden; }
/* Teal as TEXT is only ever legal on the deep ground (4.77:1 AA there,
   2.97:1 on the page ground). The selector is scoped to .falc-deep so it
   cannot leak onto a light ground. */
.falc-deep .eyebrow { color: var(--falc-teal); }
.hero-band h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); max-width: 18ch; }
.hero-band .subtitle { color: #B4C6CE; max-width: 44ch; margin-bottom: 34px; }

.hero-band .hero-mark {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: 380px; opacity: .07; pointer-events: none;
}

/* Background beams with collision (Aceternity-style, recreated in vanilla
   JS in main.js): thin teal beams fall from the top of the hero and burst
   into particles when they hit its bottom edge. Purely decorative and
   pointer-transparent; skipped under prefers-reduced-motion. */
/* The beams layer is repositioned by main.js to span from the top of the
   utility bar down to the hero's bottom edge. At z-index 1 it paints above
   the dark strip's background but below the white header (z-index 40) and
   below all raised content, so each drop is born on the strip, slips behind
   the header, and re-emerges falling through the hero. */
.beams-bg {
  position: absolute; left: 0; right: 0; overflow: hidden;
  pointer-events: none; z-index: 1;
  /* soften the spawn at the strip's very top edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, white 34px);
  mask-image: linear-gradient(to bottom, transparent 0, white 34px);
}
/* keep the strip's links above the passing beams */
.utility-bar .inner { position: relative; z-index: 2; }
.beam {
  position: absolute; top: 0; left: 0; width: 2px; border-radius: 999px;
  background: linear-gradient(to top, #B8F0EE 0%, var(--falc-teal) 18%, rgba(0, 160, 158, .35) 55%, transparent 100%);
  will-change: transform;
  transform-origin: 50% 0;  /* streak stretch extends the tail downward */
}
/* glowing head at the falling tip */
.beam::after {
  content: ""; position: absolute; bottom: -3px; left: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(184, 240, 238, .95), rgba(0, 160, 158, 0));
  filter: blur(.5px);
}
/* the surface the beams land on */
.beams-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(0, 160, 158, .28) 30%,
              rgba(123, 224, 222, .4) 50%, rgba(0, 160, 158, .28) 70%, transparent 96%);
}
.beam-explosion {
  position: absolute; z-index: 5; width: 8px; height: 8px;
  transform: translate(-50%, -50%); pointer-events: none;
}
.beam-explosion-glow {
  position: absolute; left: -44px; right: -44px; top: 0; height: 6px;
  margin: auto; border-radius: 999px; filter: blur(3px); opacity: 0;
  background: linear-gradient(90deg, transparent, #33B5B3, transparent);
}
.beam-impact-flash {
  position: absolute; left: 0; top: 0; width: 30px; height: 12px;
  border-radius: 50%; filter: blur(2px); opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(184, 240, 238, .9), rgba(0, 160, 158, 0));
}
.beam-impact-ring {
  position: absolute; left: 0; top: 0; width: 64px; height: 12px;
  border: 1px solid rgba(123, 224, 222, .55); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
}
.beam-explosion span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: linear-gradient(180deg, #B8F0EE, var(--falc-teal));
}
.hero-band .inner { position: relative; z-index: 2; overflow: visible; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: 72px 0; }
.section-band { background: var(--falc-band); }
.section h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1.2;
  letter-spacing: -.01em; margin: 0 0 14px; font-weight: 700;
}
.section .section-intro {
  color: var(--falc-ink-2); font-size: 1.1rem; max-width: 62ch; margin: 0 0 34px;
}
.section .eyebrow { margin-bottom: 12px; }

.prose { max-width: 72ch; }
.prose p { margin: 0 0 18px; }
.prose h2 { margin-top: 44px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 18px; padding-left: 24px; }
.prose li { margin-bottom: 9px; }
.lede { font-size: 1.16rem; color: var(--falc-ink-2); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 28px; border-radius: 3px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: none; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--falc-deep); color: #fff; }
.btn-primary:hover { background: #1A3A45; color: #fff; }
.btn-teal { background: var(--falc-teal); color: #062020; }
.btn-teal:hover { background: #33B5B3; color: #062020; }
.btn-ghost {
  background: transparent; color: var(--falc-link);
  border: 1px solid var(--falc-line-strong);
}
.btn-ghost:hover { color: var(--falc-link-hover); border-color: var(--falc-link); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: default; }

/* Sliding-text buttons (framer "Sliding Text Button", vanilla). main.js
   rebuilds each .btn into two stacked labels in a clipped window plus a
   circular arrow disc. On hover the label slides up to reveal its twin
   (coloured for the hover ground) while the disc expands from the right
   to flood the pill. Each button type keeps its own character. */
.btn.btn-slide {
  position: relative; overflow: hidden; border-radius: 999px;
  justify-content: flex-start; text-align: left;
  padding: 10px 64px 10px 26px;
}
.btn-slide .btn-slide-text {
  position: relative; z-index: 2; display: block;
  height: 1.5em; overflow: hidden;
}
.btn-slide .btn-slide-inner {
  display: flex; flex-direction: column;
  transition: transform .45s cubic-bezier(.3, .9, .35, 1.12);
}
.btn-slide .btn-slide-inner > span {
  display: block; height: 1.5em; line-height: 1.5; white-space: nowrap;
}
.btn-slide:hover .btn-slide-inner,
.btn-slide:focus-visible .btn-slide-inner { transform: translateY(-1.5em); }

.btn-slide .btn-slide-disc {
  position: absolute; z-index: 1; top: 50%; right: 5px;
  width: 38px; height: 38px; transform: translateY(-50%);
  border-radius: 999px;
  transition: width .45s cubic-bezier(.3, .9, .35, 1.05),
              height .45s cubic-bezier(.3, .9, .35, 1.05),
              right .45s cubic-bezier(.3, .9, .35, 1.05);
}
.btn-slide:hover .btn-slide-disc,
.btn-slide:focus-visible .btn-slide-disc {
  width: 100%; height: 100%; right: 0;
}
.btn-slide .btn-slide-disc svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: left .45s cubic-bezier(.3, .9, .35, 1.05);
}
.btn-slide:hover .btn-slide-disc svg,
.btn-slide:focus-visible .btn-slide-disc svg { left: calc(100% - 24px); }

/* Type: teal — the flagship CTA. A white pill with an ink label and a
   teal disc; hovering floods the pill teal, label flips to the dark
   ink used on teal grounds. */
.btn-teal.btn-slide,
.btn-teal.btn-slide:hover {
  /* literal ink, not var(--falc-ink): these pills often sit inside
     .falc-deep sections where that variable flips to white, which
     would put white text on the white pill */
  background: #FFFFFF; color: #1B2222;
  box-shadow: 0 4px 16px rgba(23, 23, 23, 0.06), 0 0 0 1px rgba(14, 63, 126, 0.06);
}
.btn-teal.btn-slide .btn-slide-inner > span + span { color: #062020; }
.btn-teal.btn-slide .btn-slide-disc { background: var(--falc-teal); color: #FFFFFF; }

/* Type: primary — the deep pill. Dark ground, white label, teal disc;
   the teal flood carries the same dark-on-teal label as btn-teal. */
.btn-primary.btn-slide,
.btn-primary.btn-slide:hover { background: var(--falc-deep); color: #FFFFFF; }
.btn-primary.btn-slide .btn-slide-inner > span + span { color: #062020; }
.btn-primary.btn-slide .btn-slide-disc { background: var(--falc-teal); color: #FFFFFF; }

/* Type: ghost — the quiet one. Outlined and transparent, but the disc
   is solid link-teal with a white arrow so it holds contrast on the
   pale band grounds; hovering floods that deep teal, label goes white. */
.btn-ghost.btn-slide,
.btn-ghost.btn-slide:hover { background: transparent; color: var(--falc-link); }
.btn-ghost.btn-slide { border-color: rgba(0, 115, 113, 0.4); }
.btn-ghost.btn-slide:hover { border-color: var(--falc-link); }
.btn-ghost.btn-slide .btn-slide-inner > span + span { color: #FFFFFF; }
.btn-ghost.btn-slide .btn-slide-disc { background: var(--falc-link); color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .btn-slide .btn-slide-inner,
  .btn-slide .btn-slide-disc,
  .btn-slide .btn-slide-disc svg { transition: none; }
}

.text-link { font-weight: 700; }

/* --------------------------------------------------------------------------
   Card grids
   -------------------------------------------------------------------------- */

.card-grid { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.card-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card {
  background: var(--falc-surface); border: 1px solid var(--falc-line);
  border-radius: 5px; padding: 24px 26px; display: block;
  text-decoration: none; color: var(--falc-ink);
}
a.card:hover { border-color: var(--falc-line-strong); }
a.card:hover .card-title { color: var(--falc-link); }
.card .card-eyebrow {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--falc-link); font-weight: 700; display: block;
}
.card .card-title {
  display: block; font-weight: 700; font-size: 1.13rem; line-height: 1.32;
  margin-top: 8px; color: var(--falc-ink);
}
.card .card-line {
  display: block; color: var(--falc-ink-2); font-size: .96rem;
  line-height: 1.5; margin-top: 8px;
}
.card .card-meta {
  display: block; color: var(--falc-ink-3); font-size: .85rem; margin-top: 12px;
}

/* Sector tilt cards: 3D cursor tilt with glare, in the manner of the
   framer 3d-card-tilt-hover component but vanilla. main.js drives the
   --rx/--ry/--mx/--my custom properties; without JS (or on touch and
   reduced-motion) these are simply dark brand cards. */
.tilt-scene { perspective: 900px; }
.card.tilt-card {
  position: relative; display: flex; min-height: 280px; height: 100%;
  padding: 24px 22px; border-radius: 14px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(0, 160, 158, 0.34), rgba(0, 160, 158, 0) 55%),
    linear-gradient(165deg, #26525F 0%, #1B4150 55%, #133440 100%);
  border: 1px solid #33596A;
  color: #FFFFFF;
  box-shadow: 0 10px 24px -18px rgba(10, 27, 33, 0.5);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--tilt-scale, 1));
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1),
              box-shadow .6s cubic-bezier(.16, 1, .3, 1),
              border-color .3s ease;
  will-change: transform;
}
.card.tilt-card.is-tilting {
  --tilt-scale: 1.03;
  box-shadow: 0 30px 55px -20px rgba(10, 27, 33, 0.55);
  transition: transform .12s ease-out,
              box-shadow .6s cubic-bezier(.16, 1, .3, 1),
              border-color .3s ease;
}
a.card.tilt-card:hover,
a.card.tilt-card:focus-visible { border-color: rgba(0, 160, 158, 0.6); }

/* Clipping layer: the card itself must keep overflow visible so
   preserve-3d survives; the watermark and glare clip in here instead. */
.tilt-card .tilt-clip {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.tilt-card .tilt-mark {
  /* the brand mark in the top-right corner, blended into the card
     ground: soft-light lets the dark gradient show through the mark so
     it reads as part of the surface rather than a sticker on it */
  position: absolute; right: 16px; top: 14px; width: 46px;
  /* true brand colours, slightly translucent so the mark still sits
     with the card rather than on top of it */
  opacity: 0.75; transform: translateZ(0);
}
.tilt-card .tilt-glare {
  position: absolute; inset: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 35%),
    rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0) 62%);
  opacity: 0; transition: opacity .4s ease;
}
.tilt-card.is-tilting .tilt-glare { opacity: 1; }

/* Sector icon artwork: a large centred picture floating above the card
   face on its own 3D plane, with a soft teal halo behind it, so it
   parallaxes over the ground during tilt (the framer reference's hero
   image). The black source PNG is used as a mask so it can be tinted
   white-to-teal on the dark ground. Sits in the space above the title. */
.tilt-card .tilt-icon {
  position: absolute; left: 50%; top: 38%; width: 72px; height: 72px;
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(52px) scale(.85);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
  pointer-events: none;
}
.tilt-card .tilt-icon::before {
  content: ""; position: absolute; inset: -30px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0, 160, 158, 0.35), rgba(0, 160, 158, 0.12) 45%, rgba(0, 160, 158, 0) 70%);
}
.tilt-card .tilt-icon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #FFFFFF 25%, #7FD0CE);
  /* --icon-zoom (per card, set in the markup) compensates for the differing
     transparent padding inside each source PNG, so every glyph lands at the
     same visual size regardless of how the file was exported. */
  -webkit-mask: var(--icon) center / var(--icon-zoom, 100%) no-repeat;
  mask: var(--icon) center / var(--icon-zoom, 100%) no-repeat;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
}
.tilt-card.is-tilting .tilt-icon,
a.card.tilt-card:focus-visible .tilt-icon {
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(72px) scale(1.07);
}
/* Touch and reduced-motion users never hover: the artwork is simply
   part of the card for them. */
@media (hover: none) {
  .tilt-card .tilt-icon { opacity: 1; transform: translate(-50%, -50%) translateZ(52px); }
}
@media (prefers-reduced-motion: reduce) {
  .tilt-card .tilt-icon { transition: none; opacity: 1; transform: translate(-50%, -50%); }
}

/* Content floats above the card plane for parallax depth */
.tilt-card .tilt-body {
  position: relative; display: flex; flex-direction: column;
  flex: 1 1 auto; transform: translateZ(34px);
}
.tilt-card .tilt-index {
  font-size: 12px; letter-spacing: .16em; font-weight: 700;
  color: #FFFFFF;
}
.tilt-card .card-title,
a.card.tilt-card:hover .card-title {
  color: #FFFFFF; font-size: 1.3rem; line-height: 1.25; margin-top: auto;
}
/* Centered variant (expertise grid): no index number, the text block
   sits in the middle of the card, description under the title. */
.tilt-card.tilt-center .tilt-body {
  justify-content: center; align-items: center; text-align: center;
}
.tilt-card.tilt-center .card-title,
a.card.tilt-card.tilt-center:hover .card-title {
  margin-top: 0; color: #FFFFFF;
}
.tilt-card.tilt-center .card-line,
a.card.tilt-card.tilt-center:hover .card-line {
  color: #B4C6CE; font-size: .93rem; line-height: 1.5;
  margin-top: 10px; max-width: 34ch;
}
/* eyebrows and meta lines were coloured for light cards; re-pitch them
   for the dark tilt ground */
.tilt-card.tilt-center .card-eyebrow { color: var(--falc-teal); }
.tilt-card.tilt-center .card-meta { color: #8FA6AE; }

/* Depth carousel (framer DepthCarousel, vanilla port). main.js drives
   per-frame transforms with a spring; this block only sets the stage.
   Wheel or drag scrubs, the spring settles, side cards recede with
   depth, curve, blur and fade. Without JS or on mobile the stage div
   is inert and the grid renders normally. */
.depth-stage.depth-on {
  position: relative; height: 470px; margin-top: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.depth-stage.depth-on ul.card-grid {
  display: block; position: relative; margin: 0; padding: 0;
  width: var(--dc-w, 460px); height: var(--dc-h, 300px);
  transform-style: preserve-3d; perspective: 1300px; perspective-origin: center;
}
.depth-stage.depth-on ul.card-grid > li {
  position: absolute; left: 0; top: 0;
  width: var(--dc-w, 460px); height: var(--dc-h, 300px);
  transform-style: preserve-3d; will-change: transform, filter, opacity;
}
.depth-stage.depth-on .tilt-card { height: 100%; min-height: 0; }
/* frosted stage edges: passing cards blur AND melt into the section's
   own ground colour, so nothing ever terminates against a visible line.
   The eased multi-stop masks avoid the banding a linear falloff shows. */
.depth-stage.depth-on::before,
.depth-stage.depth-on::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 24%;
  z-index: 1200; pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.depth-stage.depth-on::before {
  left: 0;
  background: linear-gradient(to right, var(--falc-band) 6%, rgba(233, 241, 252, 0));
  -webkit-mask-image: linear-gradient(to right,
    #000 0%, rgba(0,0,0,.85) 32%, rgba(0,0,0,.42) 62%, transparent 100%);
  mask-image: linear-gradient(to right,
    #000 0%, rgba(0,0,0,.85) 32%, rgba(0,0,0,.42) 62%, transparent 100%);
}
.depth-stage.depth-on::after {
  right: 0;
  background: linear-gradient(to left, var(--falc-band) 6%, rgba(233, 241, 252, 0));
  -webkit-mask-image: linear-gradient(to left,
    #000 0%, rgba(0,0,0,.85) 32%, rgba(0,0,0,.42) 62%, transparent 100%);
  mask-image: linear-gradient(to left,
    #000 0%, rgba(0,0,0,.85) 32%, rgba(0,0,0,.42) 62%, transparent 100%);
}
.depth-counter, .depth-hint {
  position: absolute; z-index: 1300; pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--falc-ink-2);
}
.depth-counter { bottom: 14px; left: 0; right: 0; text-align: center; }
.depth-hint { top: 10px; right: 16px; opacity: .55; }

/* Always visible: a quiet, steady affordance rather than a hover reward.
   It sharpens to teal when the card is engaged. */
.tilt-card .tilt-cta {
  display: block; margin-top: 10px; font-size: .86rem; font-weight: 700;
  color: #B4C6CE; transition: color .2s ease;
}
a.card.tilt-card:hover .tilt-cta,
a.card.tilt-card:focus-visible .tilt-cta { color: var(--falc-teal); }
@media (prefers-reduced-motion: reduce) {
  .card.tilt-card, .tilt-card .tilt-cta { transition: none; }
}

/* People cards */
.person-card .person-role {
  display: block; color: var(--falc-ink-3); font-size: .9rem; margin-top: 2px;
}
.person-card .card-title { margin-top: 0; }

/* Matter entries */
.matter { border-left: 3px solid var(--falc-teal); padding: 4px 0 4px 22px; margin: 0 0 26px; }
.matter p { margin: 0; }
.matter .matter-meta { color: var(--falc-ink-3); font-size: .9rem; margin-top: 6px; }

/* --------------------------------------------------------------------------
   Deep CTA band
   -------------------------------------------------------------------------- */

.cta-band { padding: 64px 24px; }
.cta-band .inner { max-width: 700px; text-align: center; }
.cta-band h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2rem); }
.cta-band p { color: #B4C6CE; margin: 0 0 26px; }

/* --------------------------------------------------------------------------
   Article components (shared with the reference article pages)
   -------------------------------------------------------------------------- */

.article-head { margin: 0 auto; padding: 56px 24px 36px; }
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding-top: 22px; border-top: 1px solid var(--falc-line);
  font-size: 14.5px; color: var(--falc-ink-3);
}
.byline .author { color: var(--falc-ink); font-weight: 700; }
.tags { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tags span {
  font-size: 12.5px; color: var(--falc-ink-2);
  border: 1px solid var(--falc-line); border-radius: 100px;
  padding: 3px 12px; background: var(--falc-surface);
}

.hero { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.hero figure { margin: 0; }
.hero img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; border-radius: 4px;
}
.hero figcaption {
  font-size: 13px; color: var(--falc-ink-3); padding-top: 10px; font-style: italic;
}

.article-body { max-width: 748px; margin: 0 auto; padding: 44px 24px 24px; }
.article-body > p:first-of-type { font-size: 1.16rem; color: var(--falc-ink-2); }
.article-body h2 {
  font-size: 1.5rem; line-height: 1.25; letter-spacing: -.01em;
  margin: 44px 0 14px; font-weight: 700;
}
.article-body h3 { font-size: 1.13rem; margin: 32px 0 10px; font-weight: 700; }
.article-body p { margin: 0 0 18px; }
.article-body ul { margin: 0 0 18px; padding-left: 24px; }
.article-body li { margin-bottom: 9px; }

blockquote {
  margin: 30px 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--falc-teal);
  font-size: 1.28rem; line-height: 1.45; font-style: italic; color: var(--falc-ink);
}

.statute {
  background: var(--falc-surface); border: 1px solid var(--falc-line);
  border-radius: 5px; padding: 22px 26px; margin: 28px 0;
}
.statute h4 {
  margin: 0 0 12px; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--falc-link);
}
.statute table { width: 100%; border-collapse: collapse; font-size: 15px; }
.statute td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--falc-band); vertical-align: top; }
.statute tr:last-child td { border-bottom: none; }
.statute td:first-child { white-space: nowrap; font-weight: 700; }

.keypoints {
  background: var(--falc-teal-tint); border: 1px solid var(--falc-teal-line);
  border-radius: 5px; padding: 24px 28px; margin: 30px 0;
}
.keypoints h4 {
  margin: 0 0 12px; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--falc-link);
}
.keypoints ul { margin: 0; padding-left: 20px; }
.keypoints li { margin-bottom: 8px; }

.article-foot { max-width: 748px; margin: 0 auto; padding: 8px 24px 40px; }
.disclaimer {
  border-top: 1px solid var(--falc-line); padding-top: 20px;
  font-size: 14px; color: var(--falc-ink-3); font-style: italic;
}
.review-line { font-size: 14px; color: var(--falc-ink-3); margin-top: 8px; }

.related { background: var(--falc-band); padding: 46px 24px 54px; }
.related .inner { max-width: 1140px; }
.related h4, .related-heading {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--falc-ink-3); margin: 0 0 20px; font-weight: 700;
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.related-card {
  background: var(--falc-surface); border: 1px solid var(--falc-line); border-radius: 5px;
  padding: 22px 24px; text-decoration: none; display: block;
}
.related-card .re { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--falc-link); font-weight: 700; }
.related-card .rt { display: block; color: var(--falc-ink); font-weight: 700; font-size: 1.06rem; line-height: 1.35; margin-top: 8px; }
.related-card:hover .rt { color: var(--falc-link); }

/* --------------------------------------------------------------------------
   Contact: location block, click-to-load map, enquiry form
   -------------------------------------------------------------------------- */

.contact-location {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px;
  align-items: stretch; margin: 0 0 24px;
}
@media (max-width: 760px) {
  .contact-location { grid-template-columns: 1fr; }
  .location-details { order: -1; }
}

.location-map { min-height: 300px; }
.location-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; border-radius: 5px; }

.location-details {
  background: var(--falc-surface); border: 1px solid var(--falc-line);
  border-radius: 5px; padding: 26px 28px; font-style: normal;
}
.location-details span { display: block; }
.location-details [itemprop="name"] { font-weight: 700; margin-bottom: 10px; }
.location-details a { display: inline-block; margin-top: 14px; font-weight: 700; }

/* label | value rows: floats do nothing inside a grid container, so the
   two columns are the grid itself */
.direct-contact {
  display: grid; grid-template-columns: 88px 1fr;
  column-gap: 18px; row-gap: 12px; align-items: baseline;
  margin: 0 0 34px;
}
.direct-contact dt { font-weight: 700; }
.direct-contact dd { margin: 0; }

.pre-form-notice {
  background: var(--falc-band-2); border-radius: 5px;
  padding: 18px 22px; font-size: 15px; color: var(--falc-ink); margin: 0 0 28px;
}

.enquiry-form { max-width: 640px; }
.enquiry-form h2 { margin-bottom: 22px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; font-size: 15.5px; margin-bottom: 6px; }
.field .optional { font-weight: 400; color: var(--falc-ink-3); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--falc-line-strong); border-radius: 3px;
  background: var(--falc-surface); color: var(--falc-ink);
  font: inherit; font-size: 16px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--falc-focus); outline-offset: 1px;
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--falc-error);
}
.field-error {
  display: none; color: var(--falc-error); font-size: 14.5px; margin-top: 6px;
}
.field.has-error .field-error { display: block; }

.consent-field { display: flex; gap: 12px; align-items: flex-start; }
.consent-field input[type="checkbox"] {
  width: 22px; height: 22px; margin: 3px 0 0; flex: none;
  accent-color: var(--falc-link);
}
.consent-field label { font-weight: 400; font-size: 15.5px; margin: 0; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success {
  display: none; background: #E6F1EB; border: 1px solid #9CC5B0;
  border-radius: 5px; padding: 22px 26px; color: var(--falc-success);
  font-weight: 700;
}
.form-failed {
  display: none; background: #F5E3E0; border: 1px solid #C98B84;
  border-radius: 5px; padding: 18px 22px; color: var(--falc-error);
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { padding: 60px 0 34px; font-size: 15px; }
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 34px 28px; padding-bottom: 40px; border-bottom: 1px solid var(--falc-line);
}
.footer-heading {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #7E97A1; margin: 0 0 14px; font-weight: 700;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a, .site-footer address a { color: #B4C6CE; text-decoration: none; }
.footer-col a:hover, .site-footer address a:hover { color: #fff; }
.footer-col address { font-style: normal; color: #B4C6CE; line-height: 1.8; }
.site-footer address { font-style: normal; color: #B4C6CE; line-height: 1.8; }
.footer-legal { padding-top: 26px; font-size: 13.5px; color: #8FA6AF; text-align: center; }
.footer-legal p { margin: 0 0 10px; }
.footer-legal a { color: #B4C6CE; }
.footer-legal a:hover { color: #fff; }

/* Footer brand sign-off: logo over a sparkle field (Aceternity-style,
   recreated in vanilla canvas in main.js). Decorative only. */
.footer-brand {
  padding: 56px 0 8px; text-align: center; overflow: hidden;
}
.footer-brand img {
  width: min(280px, 60vw); height: auto; position: relative; z-index: 2;
}
.sparkles-wrap {
  position: relative; height: 130px; margin: -6px auto 0;
  width: min(640px, 92%);
  /* fade the field out toward its edges, like the demo's radial mask */
  -webkit-mask-image: radial-gradient(58% 130px at center top, white 55%, transparent 100%);
  mask-image: radial-gradient(58% 130px at center top, white 55%, transparent 100%);
}
.sparkle-line {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border-radius: 999px; pointer-events: none;
}
.sparkle-line-glow {
  width: 72%; height: 3px; filter: blur(4px);
  background: linear-gradient(90deg, transparent, var(--falc-teal), transparent);
}
.sparkle-line-core {
  width: 46%; height: 1px;
  background: linear-gradient(90deg, transparent, #7BE0DE, transparent);
}
.footer-sparkles {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}

/* --------------------------------------------------------------------------
   Reveal on scroll. Subtle only, and fully disabled under reduced motion.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease-out, transform .5s ease-out;
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Stat counter band (framer stat-counter style; counting in main.js)
   -------------------------------------------------------------------------- */

.stats-band { padding-top: 44px; padding-bottom: 40px; border-bottom: 1px solid var(--falc-line); }
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px 18px; margin: 0; padding: 0; list-style: none; text-align: center;
}
.stat-value {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.stat-num {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.1;
  color: var(--falc-deep); font-variant-numeric: tabular-nums;
}
.stat-suffix { font-size: 1.05rem; font-weight: 700; color: var(--falc-link); }
.stat-label { display: block; margin-top: 7px; font-size: .86rem; color: var(--falc-ink-2); }

/* --------------------------------------------------------------------------
   Logo loader (built and torn down by main.js; shows once per session)
   -------------------------------------------------------------------------- */

.loader-lock { overflow: hidden; }
.logo-loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%,
    #17353F 0%, var(--falc-deep) 55%, #0A1B21 100%);
  transition: opacity .7s ease, visibility .7s;
}
.logo-loader.is-done { opacity: 0; visibility: hidden; }
.logo-loader-stage {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .55s ease;
}
.logo-loader.is-done .logo-loader-stage { transform: scale(1.05); opacity: 0; }

.logo-loader-mark {
  width: 64px; height: auto;
  filter: drop-shadow(0 0 26px rgba(0, 160, 158, 0.35));
  animation: loader-mark-in .9s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes loader-mark-in {
  0%   { opacity: 0; transform: translateY(16px) scale(.86); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

.logo-loader-word {
  display: flex; gap: .32em;
  font-weight: 700; font-size: 27px; letter-spacing: .1em;
  color: #FFFFFF; line-height: 1;
}
.logo-loader-word span { animation: loader-letter .55s ease both; }
.logo-loader-word span:nth-child(1) { animation-delay: .40s; }
.logo-loader-word span:nth-child(2) { animation-delay: .52s; }
.logo-loader-word span:nth-child(3) { animation-delay: .64s; }
.logo-loader-word span:nth-child(4) { animation-delay: .76s; }
@keyframes loader-letter {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.logo-loader-bar {
  width: 176px; height: 2px; margin-top: 6px;
  border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.logo-loader-bar span {
  display: block; height: 100%; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg,
    transparent, var(--falc-teal), #7BE0DE, var(--falc-teal), transparent);
  animation: loader-bar 1.15s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes loader-bar {
  from { transform: translateX(-110%); }
  to   { transform: translateX(360%); }
}

/* --------------------------------------------------------------------------
   Responsive details
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  .page-head { padding: 44px 0 32px; }
  .hero-band { padding: 64px 0 60px; }
  .section { padding: 52px 0; }
  .hero-band .hero-mark { display: none; }
}