/* ==========================================================================
   Future Island — Homepage (body only)
   Scoped stylesheet. Every rule is namespaced under .fi-home so nothing
   leaks into (or is inherited from) the surrounding WordPress theme.
   ========================================================================== */

.fi-home {
  /* Brand */
  --fi-accent: #EE4B14;
  --fi-accent-dark: #D9400E;
  --fi-gold: #A9791F;
  --fi-ink: #111;
  --fi-ink-soft: #171717;
  --fi-page: #E3DDD4;
  --fi-panel: #F2EDE6;
  --fi-panel-warm: #F7F1E9;
  --fi-panel-light: #F6F1E9;
  --fi-night: #15110F;
  --fi-card: #FCFAF7;

  /* Type */
  --fi-sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fi-display: Anton, Impact, "Arial Narrow", sans-serif;

  /* Shell */
  --fi-radius: 34px;

  /* Inner-card gutter and radii. Tokenised so the whole inside of a section
     steps together with the shell instead of every component holding its own
     hard-coded constant — the audit found six different gutters and eleven
     different inner radii, none of which moved with the breakpoints. */
  --fi-gut: clamp(30px, 3.6vw, 64px);
  --fi-r-card: 14px;
  --fi-r-chip: 10px;
  --fi-max: 1760px;
  --fi-shell-shadow:
    0 28px 56px -32px rgba(74, 52, 30, .32),
    0 3px 9px rgba(74, 52, 30, .055),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 0 0 1px rgba(60, 42, 24, .05);

  /* Easing */
  --fi-ease: cubic-bezier(.2, .8, .25, 1);
  --fi-ease-wipe: cubic-bezier(.16, .86, .24, 1);

  width: 100%;
  padding: 18px 14px 60px;
  background: var(--fi-page);
  font-family: var(--fi-sans);
  color: var(--fi-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Full-bleed helper: add class="fi-home fi-home--bleed" when the theme's
   content container is narrower than the design and you want edge-to-edge. */
.fi-home--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- Scoped reset ------------------------------------------------------ */
/* The root is included deliberately: themes that set a global
   `* { box-sizing: content-box }` would otherwise add our padding on top of
   width:100% and push the page into horizontal overflow. */
.fi-home,
.fi-home *,
.fi-home *::before,
.fi-home *::after { box-sizing: border-box; }

.fi-home img,
.fi-home svg { display: block; max-width: 100%; }
.fi-home picture { display: contents; }

.fi-home h1, .fi-home h2, .fi-home h3, .fi-home p { margin: 0; }
.fi-home ul, .fi-home ol { margin: 0; padding: 0; list-style: none; }

/* :where() keeps this reset at the specificity of `.fi-home` alone, so it
   still beats a theme's bare `a { ... }` but never out-ranks the component
   rules below (a plain `.fi-home a` would win over `.fi-btn--solid`, and
   paint the hero CTA orange-on-orange). */
.fi-home :where(a) {
  color: var(--fi-accent);
  text-decoration: none;
  box-shadow: none;
}
.fi-home :where(a):hover { color: var(--fi-accent-dark); }

.fi-home details > summary { list-style: none; }
.fi-home details > summary::-webkit-details-marker { display: none; }

/* --------------------------------------------------------------------------
   Headline style

   `minimal` swaps the display token for the text face and pulls the scale in,
   which turns the poster-weight Anton headlines into quiet, tightly tracked
   sentence case. Because every headline reads `font-family: var(--fi-display)`
   and `font-size: calc(clamp(...) * var(--fi-h-scale))`, the whole page follows
   from these two custom properties.
   -------------------------------------------------------------------------- */
.fi-home--minimal {
  --fi-display: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fi-h-scale: .84;
}
.fi-home--minimal .fi-display,
.fi-home--minimal .fi-detect__v,
.fi-home--minimal .fi-engine__name,
.fi-home--minimal .fi-studio__name,
.fi-home--minimal .fi-chain__row {
  font-weight: 600;
  letter-spacing: -.022em;
}
.fi-home--minimal .fi-display {
  text-transform: none;
  line-height: 1.06;
}
/* The trailing dot is a full-stop at this weight, not a display flourish. */
.fi-home--minimal .fi-dot { width: .16em; height: .16em; }
.fi-home--minimal .fi-studio__name { letter-spacing: .01em; }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes fi-ring   { 0%{transform:translate(-50%,-50%) scale(.5);opacity:.5} 70%{opacity:.1} 100%{transform:translate(-50%,-50%) scale(1.85);opacity:0} }
@keyframes fi-float  { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-12px,0)} }
@keyframes fi-pulse  { 0%,100%{opacity:.3} 50%{opacity:.85} }
@keyframes fi-streak { 0%{transform:translateX(-40%) scaleX(.4);opacity:0} 25%{opacity:.85} 100%{transform:translateX(320%) scaleX(1);opacity:0} }
@keyframes fi-shimmer{ 0%{transform:translateX(-140%) skewX(-14deg)} 100%{transform:translateX(340%) skewX(-14deg)} }
@keyframes fi-travel { 0%{left:0%;opacity:0} 14%{opacity:1} 86%{opacity:1} 100%{left:100%;opacity:0} }
@keyframes fi-spin   { to{transform:rotate(360deg)} }
@keyframes fi-blink  { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes fi-rook-breathe { 0%,100%{transform:translate3d(0,0,0) rotate(0deg)} 50%{transform:translate3d(0,-9px,0) rotate(.5deg)} }
@keyframes fi-debris { 0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0} 14%{opacity:.7} 100%{transform:translate3d(-16px,54px,0) rotate(160deg);opacity:0} }
@keyframes fi-dust   { 0%,100%{opacity:.3;transform:scaleX(1)} 50%{opacity:.55;transform:scaleX(1.1)} }
@keyframes fi-noise  { 0%,100%{transform:scaleX(.35);opacity:.35} 30%{transform:scaleX(1);opacity:.8} 62%{transform:scaleX(.62);opacity:.5} }
@keyframes fi-sweep  { 0%{transform:translateY(-140%)} 100%{transform:translateY(560%)} }
@keyframes fi-lock   { 0%,64%{opacity:.28;transform:translateX(-6px)} 74%{opacity:1;transform:translateX(0)} 100%{opacity:.72;transform:translateX(0)} }
@keyframes fi-slam {
  0%   { transform: translate3d(0,-13%,0) scale(1.03) rotate(-2.2deg); opacity: 0; animation-timing-function: cubic-bezier(.7,0,1,.42); }
  10%  { opacity: 1; }
  44%  { transform: translate3d(0,0,0) scale(1) rotate(0deg); animation-timing-function: cubic-bezier(.2,.9,.3,1); }
  50%  { transform: translate3d(0,.9%,0) scale3d(1.045,.94,1); }
  60%  { transform: translate3d(0,-1.6%,0) scale3d(.986,1.022,1); }
  72%  { transform: translate3d(0,.4%,0) scale3d(1.016,.988,1); }
  86%  { transform: translate3d(0,-.4%,0) scale3d(.997,1.005,1); }
  100% { transform: none; opacity: 1; }
}
@keyframes fi-wave   { 0%{transform:translate(-50%,-50%) scale(.14);opacity:0} 10%{opacity:.9} 100%{transform:translate(-50%,-50%) scale(2);opacity:0} }
@keyframes fi-jolt   { 0%,100%{transform:translate3d(0,0,0)} 20%{transform:translate3d(0,4px,0)} 46%{transform:translate3d(0,-2px,0)} 74%{transform:translate3d(0,1px,0)} }
@keyframes fi-impact { 0%{opacity:0;transform:translate(-50%,-50%) scale(.3)} 18%{opacity:.75} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)} }

/* ==========================================================================
   Scroll-reveal primitives
   Elements carry .fi-a plus a direction modifier; JS adds .is-in.
   Per-element offsets/delays come in as --fi-x / --fi-y / data-delay.
   ========================================================================== */
.fi-a {
  opacity: 0;
  transition:
    opacity var(--fi-to, .8s) ease,
    transform var(--fi-tt, 1s) var(--fi-ease),
    clip-path var(--fi-tc, 1.05s) var(--fi-ease),
    filter .8s ease;
  will-change: opacity, transform;
}
.fi-a--u    { transform: translate3d(0, var(--fi-y, 44px), 0); }
.fi-a--l    { transform: translate3d(calc(var(--fi-x, 70px) * -1), 0, 0); --fi-to: .9s; --fi-tt: 1.1s; }
.fi-a--r    { transform: translate3d(var(--fi-x, 70px), 0, 0); --fi-to: .9s; --fi-tt: 1.1s; }
.fi-a--line { clip-path: inset(0 0 108% 0); transform: translate3d(0, 14px, 0); --fi-to: .6s; --fi-tt: 1.05s; }
.fi-a--fade { --fi-to: .9s; }
.fi-a--wipe { clip-path: inset(0 0 0 100%); --fi-to: .5s; transition: opacity .5s ease, clip-path var(--fi-tw, 1.25s) var(--fi-ease-wipe); }
.fi-a--pop  { transform: scale(.2) rotate(-140deg); transition: opacity .5s ease, transform .9s cubic-bezier(.2, 1.5, .4, 1); }
.fi-a--bar  { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--fi-ease), opacity .3s ease; }

.fi-a.is-in { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
.fi-a--bar.is-in { transform: scaleX(1); }

/* ==========================================================================
   Section shell
   ========================================================================== */
.fi-sec {
  position: relative;
  max-width: var(--fi-max);
  margin: 0 auto 18px;
  border-radius: var(--fi-radius);
  overflow: hidden;
  box-shadow: var(--fi-shell-shadow);
  background: var(--fi-panel);
}
.fi-sec:last-child { margin-bottom: 0; }

/* Parallax / bleed image wrappers -------------------------------------- */
.fi-bleed { position: absolute; inset: -6%; z-index: 0; }
.fi-bleed--4 { inset: -4%; }
.fi-bleed--5 { inset: -5%; }
.fi-bleed--0 { inset: 0; }
/* !important is deliberate: plenty of themes and image-optimisation plugins
   ship `img { height: auto !important }` to guard against layout shift, which
   collapses these fills to their natural aspect and anchors them to the top of
   the box. Specificity cannot beat a theme's !important — only ours can. */
.fi-bleed img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Shared text atoms ----------------------------------------------------- */
.fi-eyebrow { display: flex; align-items: center; gap: 16px; }
.fi-eyebrow__t {
  /* Not /1: these labels wrap on phones and a 1.0 line box overlaps. */
  font: 600 11.5px/1.35 var(--fi-sans);
  letter-spacing: .14em;
  color: var(--fi-accent);
}
.fi-eyebrow--nowrap .fi-eyebrow__t { white-space: nowrap; }
.fi-eyebrow__rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(238,75,20,.6), rgba(238,75,20,.28) 42%, rgba(238,75,20,0));
}
.fi-eyebrow--gold .fi-eyebrow__t { color: var(--fi-gold); }
.fi-eyebrow--gold .fi-eyebrow__rule { background: linear-gradient(90deg, rgba(169,121,31,.6), rgba(169,121,31,0)); }
.fi-eyebrow__pip { width: 6px; height: 6px; border-radius: 50%; background: var(--fi-accent); }

.fi-display {
  font-family: var(--fi-display);
  font-weight: 400;
  line-height: .88;
  text-transform: uppercase;
  color: var(--fi-ink);
}
.fi-display > span { display: block; text-wrap: balance; }

.fi-home :where(p, .fi-lead, .fi-note, .fi-vs__p, .fi-vs__intro, .fi-culture__p,
  .fi-tech__lead, .fi-saas__lead, .fi-pricing__lead, .fi-contact__p,
  .fi-glass__body, .fi-step__p, .fi-mcard__p) { text-wrap: pretty; }

.fi-dot {
  display: inline-block;
  width: .19em; height: .19em;
  border-radius: 50%;
  background: var(--fi-accent);
  margin-left: .05em;
  vertical-align: baseline;
}
.fi-dot--sm { width: .17em; height: .17em; }

.fi-lead  { font: 400 clamp(14.5px, 1.15vw, 17px)/1.55 var(--fi-sans); color: var(--fi-ink-soft); }
.fi-note  { font: 400 12.5px/1.45 var(--fi-sans); color: rgba(17,17,17,.5); }
.fi-icon  { flex: none; display: flex; align-items: center; justify-content: center; }

.fi-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.fi-btn {
  display: inline-flex; align-items: center; gap: 12px;
  /* A transparent border so --solid and --ghost are the same box height;
     without it the ghost variant's 1px border made every stacked CTA pair
     2px taller than its sibling. */
  border: 1px solid transparent;
  padding: 17px 26px;
  border-radius: var(--fi-r-chip);
  font: 600 12.5px/1 var(--fi-sans);
  letter-spacing: .1em;
  transition: transform .45s var(--fi-ease), box-shadow .45s ease, background .3s ease, color .3s ease;
}
.fi-btn--sm { padding: 16px 24px; font-size: 12px; gap: 10px; }
.fi-btn__arrow { font-size: 14px; }
.fi-btn--solid { background: var(--fi-accent); color: #fff; }
.fi-btn--solid:hover { background: var(--fi-accent-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(238,75,20,.35); }
.fi-btn--ghost { border: 1px solid rgba(238,75,20,.5); color: var(--fi-accent); }
.fi-btn--ghost:hover { transform: translateY(-3px); background: rgba(238,75,20,.07); color: var(--fi-accent); }
.fi-btn--ghost-cream { background: rgba(242,237,230,.6); }
.fi-btn--ghost-cream:hover { background: rgba(238,75,20,.08); }

/* ==========================================================================
   01 — Hero
   ========================================================================== */
.fi-hero {
  display: flex; flex-wrap: wrap; align-items: stretch;
  min-height: min(84vh, 760px);
  background: var(--fi-panel);
}
.fi-hero__copy {
  flex: 1 1 520px;
  padding: clamp(30px, 4vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(18px, 2vw, 30px);
}
.fi-hero__h1 { font-size: calc(clamp(44px, 6.4vw, 104px) * var(--fi-h-scale, 1)); line-height: .86; letter-spacing: -.005em; }
.fi-hero__lead { max-width: 30ch; font: 400 clamp(15px, 1.25vw, 19px)/1.5 var(--fi-sans); color: var(--fi-ink-soft); text-wrap: pretty; }
.fi-hero__accent { font: 400 clamp(13.5px, 1.05vw, 16px)/1.55 var(--fi-sans); color: var(--fi-accent); }

.fi-hero__media {
  flex: 1 1 480px;
  position: relative;
  min-height: min(70vh, 620px);
  overflow: hidden;
  background: #C2410C;
}
.fi-checker {
  position: absolute; inset: 0;
  opacity: .09;
  mix-blend-mode: soft-light;
  background-image: conic-gradient(#000 0 25%, transparent 0 50%, #000 0 75%, transparent 0);
  background-size: clamp(32px, 3.4vw, 56px) clamp(32px, 3.4vw, 56px);
  -webkit-mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,.5) 44%, transparent 80%);
  mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,.5) 44%, transparent 80%);
  pointer-events: none;
}
.fi-hero__glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 62% 45%, rgba(255,140,60,.28), transparent 70%);
  animation: fi-pulse 5.5s ease-in-out infinite;
  pointer-events: none;
}
/* Stepped corner cut, cream notches + hairlines */
.fi-hero__cut     { position: absolute; top: 0; left: 0; background: var(--fi-panel); }
.fi-hero__cut--a  { width: clamp(76px, 8.4vw, 140px); height: clamp(32px, 3.4vw, 54px); border-bottom-right-radius: 12px; }
.fi-hero__cut--b  { width: clamp(40px, 4.4vw, 72px); height: clamp(64px, 6.8vw, 112px); border-bottom-right-radius: 12px; }
.fi-hero__cut--c  { top: auto; bottom: 0; width: clamp(26px, 2.8vw, 44px); height: clamp(26px, 2.8vw, 44px); border-top-right-radius: 10px; }
.fi-hero__fade {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: clamp(10px, 1.1vw, 18px);
  background: linear-gradient(90deg, rgba(242,237,230,.75), rgba(242,237,230,0));
  pointer-events: none;
}
.fi-hero__hair { position: absolute; pointer-events: none; }
.fi-hero__hair--1 {
  top: clamp(32px, 3.4vw, 54px);
  left: clamp(40px, 4.4vw, 72px);
  width: calc(clamp(76px, 8.4vw, 140px) - clamp(40px, 4.4vw, 72px));
  height: 1px;
  background: linear-gradient(90deg, rgba(238,75,20,.55), rgba(238,75,20,0));
}
.fi-hero__hair--2 {
  top: clamp(64px, 6.8vw, 112px); left: 0;
  width: clamp(40px, 4.4vw, 72px); height: 1px;
  background: linear-gradient(90deg, rgba(238,75,20,.55), rgba(238,75,20,.12));
}
.fi-hero__hair--3 {
  top: clamp(64px, 6.8vw, 112px);
  bottom: clamp(26px, 2.8vw, 44px);
  left: 0; width: 1px;
  background: linear-gradient(180deg, rgba(238,75,20,.45), rgba(238,75,20,.12) 60%, rgba(238,75,20,0));
}

/* ==========================================================================
   02 — The signal is already moving
   ========================================================================== */
.fi-signal__stage {
  position: relative;
  min-height: min(78vh, 700px);
  display: flex; flex-wrap: wrap; align-items: center;
  overflow: hidden;
}
.fi-signal__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #F2EDE6 0%, rgba(242,237,230,.92) 26%, rgba(242,237,230,.1) 52%, transparent 66%);
}
.fi-streak { position: absolute; right: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fi-streak > span {
  position: absolute; top: 0; left: 0; height: 100%;
  animation: fi-streak var(--d, 3.6s) linear var(--dl, 0s) infinite;
}
.fi-streak--1 { left: 36%; top: 22%; height: 2px; }
.fi-streak--1 > span { width: 26%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); }
.fi-streak--2 { left: 30%; top: 58%; height: 2px; }
.fi-streak--2 > span { width: 20%; background: linear-gradient(90deg, transparent, rgba(255,160,80,.95), transparent); }
.fi-streak--3 { left: 44%; top: 76%; height: 1px; }
.fi-streak--3 > span { width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); }

.fi-signal__copy {
  position: relative; z-index: 2;
  flex: 1 1 520px;
  padding: clamp(30px, 3.6vw, 64px);
  display: flex; flex-direction: column;
  gap: clamp(16px, 1.8vw, 26px);
}
.fi-signal__h2 { font-size: calc(clamp(38px, 5.2vw, 82px) * var(--fi-h-scale, 1)); line-height: .87; }
.fi-signal__cards {
  position: relative; z-index: 2;
  flex: 1 1 380px; align-self: stretch;
  padding: clamp(20px, 2.4vw, 40px);
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px; min-height: 420px;
}

/* Glass signal cards */
.fi-glass {
  padding: 16px 18px;
  border-radius: var(--fi-r-card);
  background: rgba(28,20,16,.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.fi-glass--1 { align-self: flex-end; width: min(340px, 100%); }
.fi-glass--2 { align-self: flex-start; width: min(320px, 100%); background: rgba(28,20,16,.34); border-color: rgba(255,255,255,.16); }
.fi-glass--3 { align-self: flex-end; width: min(300px, 100%); background: rgba(20,14,10,.5); border-color: rgba(255,255,255,.16); }
.fi-glass__label {
  display: flex; align-items: center; gap: 8px;
  font: 600 9.5px/1 var(--fi-sans);
  letter-spacing: .14em;
  color: rgba(255,255,255,.8);
}
.fi-live { width: 6px; height: 6px; border-radius: 50%; background: #FF6A2B; animation: fi-blink var(--d, 1.8s) ease-in-out infinite; }
.fi-glass__title { margin-top: 10px; font: 500 16px/1.2 var(--fi-sans); }
.fi-glass__row { margin-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fi-metric { font: 600 26px/1 var(--fi-sans); color: #FF6A2B; }
.fi-metric--lg { font-size: 30px; }
.fi-metric__sub { margin-top: 4px; font: 400 10.5px/1 var(--fi-sans); color: rgba(255,255,255,.62); }
.fi-spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.fi-spark--lg { height: 28px; gap: 3px; }
.fi-spark > span { width: 4px; border-radius: 2px; background: rgba(255,106,43,.7); }
.fi-spark--lg > span { width: 5px; }
.fi-glass__body { margin: 10px 0 12px; font: 400 13px/1.45 var(--fi-sans); color: rgba(255,255,255,.9); }
.fi-glass__foot {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 9.5px/1 var(--fi-sans); letter-spacing: .14em; color: rgba(255,255,255,.65);
}
.fi-glass__foot b { font: 600 15px/1 var(--fi-sans); letter-spacing: 0; color: #FF8A4B; }
.fi-meter { margin-top: 8px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.fi-meter > span { display: block; height: 100%; width: 92%; background: linear-gradient(90deg, #EE4B14, #FF9A57); }

/* Dark stat strip */
.fi-stats {
  position: absolute; z-index: 3;
  right: clamp(16px, 2.4vw, 40px);
  bottom: clamp(16px, 2.4vw, 34px);
  max-width: min(640px, 86%);
  display: flex; flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 34px);
  padding: 20px clamp(18px, 2vw, 30px);
  border-radius: var(--fi-r-card);
  background: #151210;
  color: #fff;
}
.fi-stat { display: flex; align-items: center; gap: 12px; }
.fi-stat__n { font: 600 17px/1 var(--fi-sans); }
.fi-stat__l { margin-top: 3px; font: 400 10.5px/1.3 var(--fi-sans); color: rgba(255,255,255,.6); }

/* ==========================================================================
   04 — Finds your next move (chess clock)
   ========================================================================== */
.fi-finds {
  background: var(--fi-panel-warm);
  display: flex;
  min-height: min(74vh, 700px);
}
.fi-finds__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, #F7F1E9 0 38%, rgba(247,241,233,.94) 48%, rgba(247,241,233,.5) 61%, rgba(247,241,233,.06) 76%, rgba(247,241,233,0) 100%);
}
.fi-clock {
  position: absolute; z-index: 3;
  left: clamp(10px, 2.8vw, 42px);
  top: 46%;
  transform: translateY(-80%);
  width: clamp(96px, 9.8vw, 146px);
  transition: opacity 1.1s ease;
}
.fi-clock__body { position: relative; width: 100%; filter: drop-shadow(0 26px 30px rgba(60,42,20,.22)); }
.fi-clock__dial {
  position: absolute;
  left: 49.8%;
  width: 58.9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1.5px 1.5px rgba(28,20,10,.32));
}
.fi-clock__dial--top { top: 30.37%; }
.fi-clock__dial--bottom { top: 67.95%; }
.fi-clock__hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; }
.fi-clock__hand--h { width: 3.4%; min-width: 2px; height: 26%; margin-left: -1.7%; border-radius: 40% 40% 12% 12%; background: linear-gradient(180deg, #14110E, #2A241D); }
.fi-clock__hand--m { width: 2.4%; min-width: 1.6px; height: 39%; margin-left: -1.2%; border-radius: 40% 40% 10% 10%; background: linear-gradient(180deg, #14110E, #2A241D); }
.fi-clock__hand--s { width: 1.3%; min-width: 1px; height: 43%; margin-left: -.65%; background: #8E2318; }
.fi-clock__hand--s::after { content: ""; position: absolute; left: -160%; top: 100%; width: 420%; height: 9%; border-radius: 2px; background: #8E2318; }
.fi-clock__pin {
  position: absolute; left: 50%; top: 50%;
  width: 6.4%; height: 6.4%; margin: -3.2% 0 0 -3.2%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F0D69A, #A87C2C);
  box-shadow: 0 0 0 .6px rgba(30,22,12,.5);
}
.fi-finds__copy {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  padding: clamp(30px, 3.6vw, 64px);
  padding-left: clamp(116px, 15.5vw, 238px);
  max-width: min(100%, 58%);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(20px, 2.2vw, 32px);
}
.fi-finds__h2 { font-size: calc(clamp(32px, 3.9vw, 60px) * var(--fi-h-scale, 1)); line-height: .9; }

.fi-steps { display: flex; flex-direction: column; }
.fi-step {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(17,17,17,.12);
}
.fi-step:last-child { border-bottom: 0; }
.fi-step__icon { width: 34px; height: 34px; }
.fi-step__t { display: flex; align-items: baseline; gap: 6px; min-width: 74px; }
.fi-step__n { font: 600 30px/1 var(--fi-sans); color: var(--fi-accent); }
.fi-step__u { font: 600 10px/1 var(--fi-sans); letter-spacing: .14em; color: rgba(17,17,17,.5); }
.fi-step__h { font: 600 12.5px/1 var(--fi-sans); letter-spacing: .06em; text-transform: uppercase; }
.fi-step__p { margin-top: 6px; font: 400 12.5px/1.45 var(--fi-sans); color: rgba(17,17,17,.65); }

.fi-chain { border-top: 1px solid rgba(17,17,17,.12); padding-top: 22px; }
.fi-chain__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-family: var(--fi-display);
  font-size: clamp(17px, 1.7vw, 26px);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.fi-chain__sep { color: rgba(17,17,17,.4); }
.fi-chain p { margin-top: 12px; }

/* ==========================================================================
   04 — Old way vs Future Island
   ========================================================================== */
.fi-vs { display: flex; flex-wrap: wrap; }
.fi-vs__old {
  flex: 1 1 480px; position: relative;
  padding: clamp(28px, 3.4vw, 58px);
  background: var(--fi-panel);
}
.fi-vs__new {
  flex: 1 1 480px; position: relative;
  padding: clamp(28px, 3.4vw, 58px);
  background: linear-gradient(150deg, #8F2B06 0%, #C2410C 45%, #E2571F 100%);
  color: #fff; overflow: hidden;
}
.fi-vs__rook { position: absolute; right: -5%; top: 5%; width: min(60%, 432px); pointer-events: none; }
.fi-vs__rook-in { position: relative; animation: fi-rook-breathe 8.5s ease-in-out infinite; }
.fi-vs__rook img { width: 100%; height: auto; opacity: .9; filter: grayscale(1) contrast(1.04); }
.fi-vs__dust {
  position: absolute; left: 10%; right: 10%; bottom: 1%; height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(46,36,28,.2), transparent 72%);
  animation: fi-dust 8.5s ease-in-out infinite;
}
.fi-debris {
  position: absolute;
  width: var(--w, 4px); height: var(--h, 4px);
  border-radius: var(--r, 1px);
  background: var(--c, rgba(42,34,28,.5));
  animation: fi-debris var(--d, 5s) linear var(--dl, 0s) infinite;
}
.fi-vs__panel { position: relative; max-width: min(100%, 520px); display: flex; flex-direction: column; gap: 20px; }
.fi-vs__panel--new { max-width: min(100%, 470px); }
.fi-chip {
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid rgba(17,17,17,.28);
  border-radius: var(--fi-r-chip);
  font: 600 10.5px/1 var(--fi-sans);
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(242,237,230,.85);
}
.fi-chip--light { border-color: rgba(255,255,255,.5); background: none; }
.fi-vs__h2 { font-size: calc(clamp(34px, 4.2vw, 66px) * var(--fi-h-scale, 1)); line-height: .88; }
.fi-vs__h2 .fi-vs__accent { color: var(--fi-accent); }
.fi-vs__intro {
  max-width: 36ch;
  font: 400 14px/1.5 var(--fi-sans);
  color: rgba(17,17,17,.75);
  background: linear-gradient(90deg, rgba(242,237,230,.95), rgba(242,237,230,.4));
}
.fi-vs__h3 { max-width: 22ch; font: 500 clamp(24px, 2.5vw, 38px)/1.14 var(--fi-sans); }
.fi-vs__p { max-width: 40ch; font: 400 14px/1.55 var(--fi-sans); color: rgba(255,255,255,.88); }

.fi-list { display: flex; flex-direction: column; }
.fi-list--new { margin-top: 6px; }
.fi-list__row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(17,17,17,.12);
}
.fi-list__row:last-child { border-bottom: 0; }
.fi-list--new .fi-list__row { border-bottom-color: rgba(255,255,255,.22); }
.fi-list__mark {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(17,17,17,.35);
  display: flex; align-items: center; justify-content: center;
  font: 400 11px/1 var(--fi-sans);
  color: rgba(17,17,17,.6);
}
.fi-list--new .fi-list__mark { border-color: rgba(255,255,255,.8); color: #fff; }
.fi-list__t { font: 400 13px/1.35 var(--fi-sans); color: rgba(17,17,17,.78); }
.fi-list--new .fi-list__t { color: #fff; }

.fi-vs__bishop { position: absolute; right: -9%; bottom: 9%; width: min(58%, 412px); pointer-events: none; }
.fi-vs__bishop-in { position: relative; }
.fi-vs__bishop-shadow {
  position: absolute; left: 52%; bottom: 15%; width: 96%; height: 8%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(92,22,0,.5), rgba(92,22,0,.16) 58%, transparent 76%);
  filter: blur(3px);
}
.fi-waves { position: absolute; left: 52%; bottom: 4%; width: 158%; height: 30%; transform: translateX(-50%); pointer-events: none; }
.fi-waves > span {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.14);
  opacity: 0;
}
.fi-waves > span:nth-child(1) { border: 1.5px solid rgba(255,226,198,.6); }
.fi-waves > span:nth-child(2) { border: 1.5px solid rgba(255,214,180,.45); }
.fi-waves > span:nth-child(3) { border: 1px solid rgba(255,206,168,.3); }
.fi-waves > span[data-impact] {
  width: 74%; height: 74%;
  background: radial-gradient(ellipse at center, rgba(255,238,218,.5), rgba(255,196,150,.12) 55%, transparent 72%);
  transform: translate(-50%, -50%) scale(.3);
}
.fi-slam { position: relative; opacity: 0; transform-origin: 56% 90%; will-change: transform; }
.fi-slam img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 78%, transparent 99%), linear-gradient(to right, transparent 0, #000 22%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 78%, transparent 99%), linear-gradient(to right, transparent 0, #000 22%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fi-vs__badge {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: #151210; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--fi-sans); letter-spacing: .06em;
  z-index: 4;
}

/* ==========================================================================
   05 — Culture moves before categories
   ========================================================================== */
.fi-culture { display: flex; flex-wrap: wrap; min-height: min(84vh, 760px); }
.fi-culture__copy {
  flex: 1 1 520px;
  padding: clamp(30px, 3.6vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(18px, 2vw, 28px);
  position: relative; z-index: 2;
}
.fi-culture__h2 { font-size: calc(clamp(40px, 5.6vw, 92px) * var(--fi-h-scale, 1)); line-height: .85; }
.fi-culture__p { max-width: 36ch; font: 400 clamp(14px, 1.1vw, 16.5px)/1.55 var(--fi-sans); color: var(--fi-ink-soft); }
.fi-culture__cta { display: flex; align-items: flex-start; gap: 14px; }
.fi-culture__cta-t { font: 600 12.5px/1.2 var(--fi-sans); letter-spacing: .1em; color: var(--fi-accent); text-transform: uppercase; }
.fi-culture__cta-s { margin-top: 6px; font: 400 12.5px/1.4 var(--fi-sans); color: rgba(17,17,17,.6); }
.fi-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font: 600 11px/1 var(--fi-sans); letter-spacing: .13em; color: var(--fi-accent);
}
.fi-tags__pip { width: 5px; height: 5px; border-radius: 50%; background: var(--fi-accent); }
.fi-tags__muted { color: rgba(17,17,17,.55); }

.fi-culture__media {
  flex: 1 1 520px; position: relative;
  min-height: min(74vh, 680px);
  overflow: hidden;
  border-top-left-radius: clamp(60px, 10vw, 180px);
  border-bottom-left-radius: clamp(40px, 7vw, 120px);
}
.fi-culture__cards {
  position: absolute;
  left: clamp(14px, 1.6vw, 26px);
  top: 50%; transform: translateY(-50%);
  width: min(286px, 48%);
  display: flex; flex-direction: column; gap: 10px;
}
.fi-ccard {
  padding: 13px 15px;
  border-radius: var(--fi-r-card);
  background: rgba(16,20,30,.42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
}
.fi-ccard__head { display: flex; align-items: center; gap: 9px; }
.fi-ccard__head span:last-child { font: 600 10.5px/1 var(--fi-sans); letter-spacing: .1em; text-transform: uppercase; }
.fi-ccard p { margin-top: 8px; font: 400 11.5px/1.4 var(--fi-sans); color: rgba(255,255,255,.75); }

.fi-detect {
  position: absolute;
  right: clamp(14px, 1.6vw, 26px);
  bottom: clamp(16px, 2vw, 28px);
  width: min(360px, 72%);
  padding: 18px 20px;
  border-radius: var(--fi-r-card);
  background: rgba(10,12,18,.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.fi-detect__k { font: 600 9.5px/1 var(--fi-sans); letter-spacing: .16em; color: rgba(255,255,255,.6); }
.fi-detect__v {
  margin-top: 10px;
  font-family: var(--fi-display);
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.06; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.fi-detect__v b { color: #FF7A3D; font-weight: 400; }
.fi-detect__arrow {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  transition: background .35s ease, transform .5s var(--fi-ease);
}
.fi-detect:hover .fi-detect__arrow { background: rgba(255,255,255,.16); transform: translateX(4px); }

/* ==========================================================================
   06 — Future Island SaaS
   ========================================================================== */
.fi-saas { background: linear-gradient(120deg, #F5F1EA 0%, #F2EDE6 55%, #EFE7DA 100%); }
.fi-saas__media {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(38%, 470px);
  pointer-events: none;
  transition: opacity 1.1s ease, transform 1.4s var(--fi-ease-wipe);
}
.fi-saas__shimmer { position: absolute; inset: 0; overflow: hidden; }
.fi-saas__shimmer > span {
  position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,225,190,.22), transparent);
  animation: fi-shimmer 6.5s ease-in-out 1.5s infinite;
}
.fi-saas__body {
  position: relative;
  padding: clamp(30px, 3.6vw, 64px);
  padding-right: calc(clamp(30px, 3.6vw, 64px) + min(38%, 470px));
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.2vw, 32px);
}
.fi-saas__h2 { font-size: calc(clamp(38px, 5.2vw, 84px) * var(--fi-h-scale, 1)); line-height: .86; }
.fi-saas__h2 .fi-dot { background: var(--fi-gold); }
.fi-saas__lead { max-width: 44ch; font: 400 clamp(14px, 1.1vw, 16.5px)/1.55 var(--fi-sans); color: var(--fi-ink-soft); }
.fi-subhead { display: flex; align-items: center; gap: 16px; }
.fi-subhead__t { font: 600 11px/1 var(--fi-sans); letter-spacing: .16em; color: rgba(17,17,17,.6); }
.fi-subhead__rule { flex: 1; height: 1px; background: rgba(17,17,17,.14); }
.fi-grid { display: grid; gap: 14px; }
.fi-grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fi-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fi-fcard {
  padding: 20px;
  border-radius: var(--fi-r-card);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,17,.08);
  display: flex;
  flex-direction: column;
}
.fi-fcard.fi-a { transition: opacity .8s ease, transform 1s var(--fi-ease), box-shadow .4s ease; }
.fi-fcard:hover { box-shadow: 0 16px 34px rgba(17,17,17,.08); }
.fi-fcard__t { margin-top: 16px; font: 600 12.5px/1.3 var(--fi-sans); letter-spacing: .05em; text-transform: uppercase; }
.fi-fcard p { margin: 10px 0 0; font: 400 12.5px/1.5 var(--fi-sans); color: rgba(17,17,17,.66); }
/* Was a bare 11x19px arrow glyph — the card's only control. */
.fi-fcard a {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  color: var(--fi-gold);
  font: 600 11.5px/1 var(--fi-sans);
  letter-spacing: .08em; text-transform: uppercase;
}
.fi-fcard a:hover { color: #8C620F; }
.fi-saas__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(17,17,17,.12);
}
.fi-saas__foot-t { font: 600 13px/1.4 var(--fi-sans); letter-spacing: .06em; text-transform: uppercase; }
.fi-saas__foot a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font: 600 13px/1.4 var(--fi-sans);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fi-gold);
}
.fi-saas__foot a:hover { color: #8C620F; }

/* ==========================================================================
   07 — Technology
   ========================================================================== */
.fi-tech {
  background: linear-gradient(115deg, #F5F1EA 0%, #F2EDE6 40%, #FBF3EC 100%);
  display: flex; flex-wrap: wrap; align-items: center;
}
.fi-tech__copy {
  flex: 1 1 520px;
  padding: clamp(30px, 3.6vw, 64px);
  display: flex; flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}
.fi-tech__h2 { font-size: calc(clamp(34px, 4.4vw, 72px) * var(--fi-h-scale, 1)); line-height: .87; }
.fi-tech__h2 em { font-style: normal; color: var(--fi-accent); }
.fi-tech__lead { max-width: 40ch; font: 400 clamp(14px, 1.1vw, 16.5px)/1.55 var(--fi-sans); color: var(--fi-ink-soft); }
/* A grid whose 1px gap shows the container ground through, rather than a
   per-cell border-right. Wrapping a flex row left dividers on the wrong edges
   and none at all between rows. */
.fi-statbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: var(--fi-r-card);
  background: rgba(17,17,17,.1);
  overflow: hidden;
}
.fi-statbar__cell {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  background: #FAF7F2;
}
.fi-statbar__n { font: 600 17px/1 var(--fi-sans); }
.fi-statbar__l { margin-top: 4px; font: 400 10.5px/1.3 var(--fi-sans); color: rgba(17,17,17,.55); }
.fi-badges {
  display: flex; flex-wrap: wrap;
  gap: clamp(16px, 2vw, 30px);
  padding-top: 20px;
  border-top: 1px solid rgba(17,17,17,.12);
}
.fi-badges > span {
  display: flex; align-items: center; gap: 9px;
  font: 400 12px/1 var(--fi-sans); color: rgba(17,17,17,.72);
}

.fi-tech__diagram {
  flex: 1 1 520px; position: relative; align-self: stretch;
  min-height: min(76vh, 680px);
  display: flex; align-items: center;
  gap: clamp(6px, 1vw, 18px);
  padding: clamp(24px, 2.6vw, 44px) clamp(16px, 2vw, 34px);
}
.fi-io { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 2; }
.fi-io--in  { width: min(30%, 172px); }
.fi-io--out { width: min(29%, 168px); }
.fi-io__label { font: 600 9.5px/1 var(--fi-sans); letter-spacing: .16em; color: rgba(17,17,17,.5); margin-bottom: 2px; }
.fi-input {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px;
  border-radius: var(--fi-r-chip);
  background: #fff;
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 5px 14px rgba(17,17,17,.05);
  font: 400 11.5px/1.25 var(--fi-sans);
}
.fi-output {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px;
  border-radius: var(--fi-r-chip);
  background: var(--fi-card);
  border: 1px solid rgba(40,30,20,.16);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(40,30,20,.07), 0 1px 1px rgba(40,30,20,.06), 0 12px 24px -14px rgba(40,30,20,.34);
  font: 400 12px/1.3 var(--fi-sans);
}
.fi-output.fi-a { transition: opacity .8s ease, transform 1s var(--fi-ease), box-shadow .45s ease; }
.fi-output:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(40,30,20,.07), 0 1px 1px rgba(40,30,20,.06), 0 20px 34px -16px rgba(40,30,20,.42); }
.fi-output__chip {
  width: 28px; height: 28px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(40,30,20,.045);
  box-shadow: inset 0 0 0 1px rgba(40,30,20,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.fi-output__t { font: 500 11.5px/1.25 var(--fi-sans); letter-spacing: -.005em; color: #1C1712; }
.fi-output__k { margin-top: 3px; font: 600 8px/1 var(--fi-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(40,30,20,.4); }

.fi-wires { flex: 1 1 auto; position: relative; align-self: stretch; min-width: 20px; }
.fi-wire { position: absolute; left: 0; right: 0; height: 1px; }
.fi-wires--in .fi-wire  { background: linear-gradient(90deg, rgba(238,75,20,.05), rgba(238,75,20,.45)); }
.fi-wires--out .fi-wire { background: linear-gradient(90deg, rgba(238,75,20,.45), rgba(238,75,20,.05)); }
.fi-wire > span {
  position: absolute; top: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--fi-accent);
  animation: fi-travel var(--d, 3.4s) linear var(--dl, 0s) infinite;
}

.fi-engine { flex: 0 0 auto; width: min(31%, 224px); align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; }
.fi-engine__slab {
  position: relative;
  aspect-ratio: .62;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(168deg, #241E19 0%, #191411 46%, #0F0B09 100%);
  box-shadow: 0 38px 66px -34px rgba(60,26,6,.62), inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.06);
  animation: fi-float 7s ease-in-out infinite;
}
.fi-engine__conic {
  position: absolute; left: 50%; top: 52%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(238,75,20,.3), rgba(238,75,20,0) 34%, rgba(238,75,20,0) 68%, rgba(255,150,90,.2));
  -webkit-mask: radial-gradient(circle, #000 34%, transparent 72%);
  mask: radial-gradient(circle, #000 34%, transparent 72%);
  animation: fi-spin 16s linear infinite;
}
.fi-engine__core {
  position: absolute; left: 50%; top: 52%;
  width: 120%; height: 58%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(238,75,20,.42), rgba(238,75,20,.1) 52%, transparent 74%);
}
.fi-engine__ring {
  position: absolute; left: 50%; top: 52%;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.5);
  animation: fi-ring 5s ease-out var(--dl, 0s) infinite;
}
.fi-engine__ring--1 { border: 1px solid rgba(238,75,20,.3); }
.fi-engine__ring--2 { border: 1px solid rgba(255,170,120,.22); --dl: 2.5s; }
.fi-engine__top { position: absolute; left: 0; right: 0; top: 0; height: 16%; background: linear-gradient(180deg, rgba(238,75,20,.16), transparent); pointer-events: none; }
.fi-engine__scan {
  position: absolute; left: 8%; right: 8%; top: 0; height: 34px;
  background: linear-gradient(180deg, transparent, rgba(255,196,160,.16), transparent);
  animation: fi-sweep 5.2s cubic-bezier(.4, 0, .6, 1) infinite;
  pointer-events: none;
}
.fi-engine__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(12px, 1.3vw, 18px) clamp(11px, 1.2vw, 16px);
}
.fi-engine__block { display: flex; flex-direction: column; gap: 5px; }
.fi-engine__k {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 7.5px/1 var(--fi-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,214,190,.5);
}
.fi-engine__k b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fi-engine__bar {
  display: block; height: 2px;
  width: var(--w, 70%);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,208,178,.75), rgba(255,140,90,.18));
  transform-origin: 0 50%;
  animation: fi-noise var(--d, 3s) ease-in-out var(--dl, 0s) infinite;
}
.fi-engine__mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.fi-engine__hair {
  position: absolute; left: -8%; right: -8%; top: -14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,190,150,.75), transparent);
  overflow: hidden;
}
.fi-engine__hair > span {
  position: absolute; top: -1px; width: 26%; height: 3px;
  background: linear-gradient(90deg, transparent, #FFCBA6, transparent);
  animation: fi-travel 3.2s linear infinite;
}
.fi-engine__eyebrow { font: 600 8px/1 var(--fi-sans); letter-spacing: .32em; color: rgba(255,190,155,.65); }
.fi-engine__name {
  font-family: var(--fi-display); font-weight: 400;
  font-size: clamp(16px, 1.8vw, 25px);
  line-height: .94; text-transform: uppercase;
  color: #FFF3EA;
}
.fi-engine__flow { font: 400 7.5px/1 var(--fi-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,214,190,.45); }
.fi-engine__move {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 2px solid var(--fi-accent);
  font: 500 8px/1 var(--fi-sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,236,224,.9);
  animation: fi-lock 3.4s ease-out var(--dl, 0s) infinite;
}
.fi-engine__port { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--fi-accent); }

/* ==========================================================================
   08 — The method (pinned scene)
   ========================================================================== */
.fi-method { max-width: var(--fi-max); margin: 0 auto 18px; position: relative; height: 300vh; }
.fi-method__pin { position: sticky; top: 0; height: 100vh; display: flex; }
.fi-method__stage {
  position: relative; flex: 1;
  border-radius: var(--fi-radius);
  overflow: hidden;
  box-shadow: var(--fi-shell-shadow);
  background: linear-gradient(160deg, #FAF6F0 0%, #F2EDE6 60%, #F7EFE9 100%);
  display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 58px) clamp(20px, 2.6vw, 54px) 0;
}
.fi-method__h2 { margin-top: clamp(14px, 1.6vw, 24px); font-size: calc(clamp(32px, 4.4vw, 72px) * var(--fi-h-scale, 1)); line-height: .88; }
.fi-method__cards {
  margin-top: clamp(18px, 2.4vw, 38px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(8px, .9vw, 14px);
  align-items: stretch;
}
.fi-mcard {
  position: relative;
  padding: 14px 14px 18px;
  border-radius: var(--fi-r-card);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,17,.09);
  opacity: 0;
}
.fi-mcard--hot {
  background: var(--fi-accent);
  color: #fff;
  border-color: var(--fi-accent);
  box-shadow: 0 18px 36px rgba(238,75,20,.28);
}
.fi-mcard__n { font: 600 12px/1 var(--fi-sans); color: var(--fi-accent); }
.fi-mcard--hot .fi-mcard__n { color: rgba(255,255,255,.85); }
.fi-mcard__t { margin-top: 10px; font: 600 12px/1.2 var(--fi-sans); letter-spacing: .05em; text-transform: uppercase; }
.fi-mcard__rule { margin: 9px 0; width: 16px; height: 1.5px; background: var(--fi-accent); }
.fi-mcard--hot .fi-mcard__rule { background: rgba(255,255,255,.85); }
.fi-mcard__p { font: 400 11.5px/1.4 var(--fi-sans); color: rgba(17,17,17,.6); }
.fi-mcard--hot .fi-mcard__p { color: rgba(255,255,255,.9); }
.fi-mcard__tip {
  position: absolute; left: 50%; bottom: -9px;
  width: 0; height: 0; margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid var(--fi-accent);
}
.fi-method__board { position: relative; flex: 1; min-height: clamp(150px, 24vh, 300px); margin-top: auto; }

.fi-method__row {
  position: absolute;
  inset: 0;
  width: 100% !important;   /* see the note on .fi-bleed img */
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 97%;
}
.fi-ripples {
  position: absolute; left: 50%; bottom: 16%;
  width: min(760px, 92%); height: 130px;
  transform: translateX(-50%);
  perspective: 760px;
  pointer-events: none;
}
.fi-queen { position: absolute; left: 50%; bottom: 15%; width: clamp(64px, 6.6vw, 104px); pointer-events: none; }
.fi-queen__trail {
  position: absolute; left: 50%; bottom: 60%;
  width: 2px; height: 46vh; margin-left: -1px;
  background: linear-gradient(180deg, rgba(238,75,20,0), rgba(238,75,20,.55));
  transform-origin: 50% 100%;
  opacity: 0; transition: opacity .3s ease;
}
.fi-queen__refl {
  position: absolute; left: 0; top: 100%; width: 100%; height: 100%;
  opacity: 0; transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to top, transparent 12%, rgba(0,0,0,.55) 88%);
  mask-image: linear-gradient(to top, transparent 12%, rgba(0,0,0,.55) 88%);
  pointer-events: none;
}
.fi-queen__refl img { width: 100%; filter: blur(1.2px) saturate(.8); }
.fi-queen__shadow {
  position: absolute; left: 50%; bottom: -3%;
  width: 150%; height: 16%; margin-left: -75%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74,32,10,.42), rgba(74,32,10,.12) 58%, transparent 76%);
  opacity: 0; pointer-events: none;
}
.fi-queen__piece { opacity: 0; transform-origin: 50% 100%; }
.fi-queen__inner { transform-origin: 50% 100%; }
.fi-queen__inner img { width: 100% !important; height: 100% !important; filter: drop-shadow(0 14px 14px rgba(60,24,6,.3)); }

/* Fallback for themes whose content wrapper sets overflow:hidden. Sticky
   cannot pin inside a scroll container, so JS adds .is-unpinned and the scene
   becomes an ordinary-height section rather than three screens of blank page
   after the animation has finished. */
.fi-method.is-unpinned { height: auto; }
.fi-method.is-unpinned .fi-method__pin { position: static; height: auto; }
.fi-method.is-unpinned .fi-method__stage { min-height: min(88vh, 780px); }

/* ==========================================================================
   09 — Pricing
   ========================================================================== */
.fi-pricing { background: linear-gradient(150deg, #FBF6F1 0%, #F7EFE9 55%, #FDF0E8 100%); }
.fi-pricing__king {
  position: absolute; right: 0; top: 0;
  width: min(38%, 430px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  transition: opacity 1.2s ease, transform 1.5s var(--fi-ease-wipe);
}
.fi-pricing__king img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 94%, transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 94%, transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fi-pricing__body {
  position: relative;
  padding: clamp(30px, 3.6vw, 64px);
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.2vw, 32px);
}
.fi-pricing__h2 { font-size: calc(clamp(32px, 4.4vw, 72px) * var(--fi-h-scale, 1)); line-height: .9; }
.fi-pricing__h2 .fi-muted { color: rgba(17,17,17,.42); }
.fi-pricing__lead { max-width: 44ch; font: 400 clamp(14px, 1.1vw, 16.5px)/1.55 var(--fi-sans); color: var(--fi-ink-soft); }
/* One column until 860. auto-fit used to flip to two tracks at ~596px, which
   left a twelve-item feature list about 230px of measure. */
.fi-plans { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.2vw, 18px); }
@media (min-width: 860px) {
  .fi-plans { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
}

.fi-plan {
  position: relative;
  padding: 22px;
  border-radius: var(--fi-r-card);
  display: flex; flex-direction: column;
}
.fi-plan--saas {
  border: 1.5px solid var(--fi-accent);
  background: linear-gradient(165deg, #fff 0%, #FFF3EC 52%, #FFE2D2 100%);
  overflow: hidden;
}
.fi-plan--saas.fi-a { transition: opacity .85s ease, transform 1.05s var(--fi-ease), box-shadow .45s ease; }
.fi-plan--saas:hover { box-shadow: 0 22px 44px rgba(238,75,20,.18); }
.fi-plan__shimmer {
  position: absolute; top: 0; bottom: 0; width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: fi-shimmer 6s ease-in-out 1s infinite;
  pointer-events: none;
}
.fi-plan--work {
  border: 1px solid rgba(40,30,20,.16);
  background: var(--fi-card);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(40,30,20,.07), 0 1px 1px rgba(40,30,20,.06), 0 14px 28px -16px rgba(40,30,20,.3);
}
.fi-plan--work.fi-a { transition: opacity .85s ease, transform 1.05s var(--fi-ease), box-shadow .45s ease; }
.fi-plan--work:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(40,30,20,.07), 0 1px 1px rgba(40,30,20,.06), 0 24px 44px -20px rgba(40,30,20,.4); }

.fi-plan__head {
  display: flex; align-items: center; gap: 13px;
  min-height: 62px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(17,17,17,.1);
}
.fi-plan__head--split { justify-content: space-between; min-height: 0; padding-bottom: 14px; border-bottom-color: rgba(40,30,20,.14); }
.fi-plan__badge {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(238,75,20,.2);
}
.fi-plan__t { font: 600 12.5px/1 var(--fi-sans); letter-spacing: .06em; text-transform: uppercase; }
.fi-plan__s { margin-top: 5px; font: 500 10px/1.35 var(--fi-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fi-accent); }
.fi-plan__s--muted { color: rgba(17,17,17,.5); }
.fi-plan__kicker { font: 600 8.5px/1 var(--fi-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(40,30,20,.42); }
.fi-plan__price { margin-top: 20px; display: flex; align-items: baseline; gap: 7px; }
.fi-plan__price b { font: 600 30px/1 var(--fi-sans); }
.fi-plan__price span { font: 400 11px/1 var(--fi-sans); color: rgba(17,17,17,.55); }
.fi-feats { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; }
.fi-feats--lg { margin-top: 14px; gap: 9px; }
.fi-feat { display: flex; align-items: flex-start; gap: 9px; font: 400 11.8px/1.4 var(--fi-sans); }
.fi-feats--lg .fi-feat { font-size: 12.5px; line-height: 1.35; }
.fi-feat > span { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.fi-sources { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(238,75,20,.24); }
.fi-sources > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 12px 0;
  font: 600 10.5px/1 var(--fi-sans); letter-spacing: .11em; text-transform: uppercase;
  color: var(--fi-accent);
}
.fi-sources p { margin-top: 10px; font: 400 11px/1.55 var(--fi-sans); color: rgba(17,17,17,.62); }
.fi-plan__cta {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px; border-radius: var(--fi-r-chip);
  background: var(--fi-accent); color: #fff;
  font: 600 12px/1 var(--fi-sans); letter-spacing: .1em;
  transition: transform .45s var(--fi-ease), box-shadow .4s ease;
}
.fi-plan__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(238,75,20,.34); color: #fff; }
/* padding:15px from .fi-plan__cta survived horizontally here, so the outlined
   pill rendered 30px narrower than its solid twin in the card above it. */
.fi-plan__cta--ghost { margin-top: auto; padding: 26px 0 0; background: none; }
.fi-plan__cta--ghost > span {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px; border-radius: 9px;
  border: 1px solid rgba(238,75,20,.5);
  color: var(--fi-accent);
  transition: background .3s ease, transform .45s var(--fi-ease);
}
.fi-plan__cta--ghost:hover { transform: none; box-shadow: none; }
.fi-plan__cta--ghost:hover > span { background: rgba(238,75,20,.08); transform: translateY(-2px); }
.fi-plan--saas > .fi-plan__cta { margin-top: auto; }
.fi-plan--saas .fi-sources { margin-bottom: 22px; }

.fi-plan__group { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(17,17,17,.1); }
.fi-plan__group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.fi-assur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  margin-top: 6px;
  padding: 24px clamp(14px, 1.6vw, 26px);
  border-radius: var(--fi-r-card);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(17,17,17,.08);
}
.fi-assur__item { display: flex; gap: 12px; }
.fi-assur__t { font: 600 11px/1.2 var(--fi-sans); letter-spacing: .07em; text-transform: uppercase; }
.fi-assur__item p { margin-top: 8px; font: 400 11.5px/1.45 var(--fi-sans); color: rgba(17,17,17,.6); }

/* ==========================================================================
   10 — Technology x Culture (about / contact)
   ========================================================================== */
.fi-contact {
  background: var(--fi-night);
  color: #F6EFE8;
  display: flex; align-items: center;
  box-shadow:
    0 30px 60px -32px rgba(30,18,8,.42),
    0 3px 9px rgba(30,18,8,.12),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.07);
}
.fi-contact .fi-bleed img { filter: brightness(1.24) contrast(1.06) saturate(1.08); }
.fi-contact__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, #15110F 0 52%, rgba(21,17,15,.86) 60%, rgba(21,17,15,.32) 70%, rgba(21,17,15,.04) 82%, rgba(21,17,15,0) 92%);
}
.fi-contact__body {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  max-width: min(100%, 62%);
  padding: clamp(30px, 3.6vw, 64px);
  display: flex; flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}
.fi-contact__h2 {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  font-size: calc(clamp(34px, 4.6vw, 76px) * var(--fi-h-scale, 1));
  line-height: .9;
  color: #F6EFE8;
}
.fi-contact__h2 > span { display: inline; }
.fi-contact__x {
  font-family: var(--fi-sans); font-weight: 300;
  font-size: .6em; color: rgba(246,239,232,.5);
  animation: fi-spin 22s linear infinite;
  display: inline-block;
}
.fi-contact__p { max-width: 52ch; font: 400 clamp(14px, 1.1vw, 16.5px)/1.55 var(--fi-sans); color: rgba(246,239,232,.82); }
.fi-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.fi-award {
  position: relative;
  padding: 18px;
  border-radius: var(--fi-r-card);
  /* .055 white was effectively transparent, so each card's ground was
     whatever the film-set photo happened to be behind it. */
  background: rgba(20,16,14,.62);
  -webkit-backdrop-filter: blur(6px) saturate(.9);
  backdrop-filter: blur(6px) saturate(.9);
  border: 1px solid rgba(255,255,255,.18);
}
.fi-award.fi-a { transition: opacity .85s ease, transform 1.05s var(--fi-ease), box-shadow .4s ease, background .4s ease; }
.fi-award:hover { box-shadow: 0 18px 36px rgba(0,0,0,.35); background: rgba(28,23,20,.74); }
.fi-award__head { display: flex; gap: 11px; }
.fi-award__t { font: 500 13px/1.3 var(--fi-sans); }
.fi-award p { margin: 10px 0 14px; font: 400 12px/1.45 var(--fi-sans); color: rgba(246,239,232,.78); }
/* The whole card becomes the hit area; the label alone was 101x15px. */
.fi-award a {
  display: inline-flex; align-items: center;
  min-height: 40px;
  font: 600 11px/1.3 var(--fi-sans); letter-spacing: .12em;
  text-transform: uppercase; color: #F6EFE8;
}
.fi-award a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.fi-award a:hover { color: var(--fi-accent); }

.fi-studio {
  margin-top: clamp(10px, 1.4vw, 22px);
  padding-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(16px, 2vw, 30px);
  align-items: start;
}
.fi-studio__brand { display: flex; flex-direction: column; gap: 12px; }
.fi-studio__logo { line-height: .82; }
.fi-studio__name {
  font-family: var(--fi-display); font-weight: 400;
  font-size: clamp(26px, 2.5vw, 38px);
  letter-spacing: -.01em; text-transform: uppercase;
}
.fi-studio__name sup { font-family: var(--fi-sans); font-size: .28em; vertical-align: super; margin-left: .12em; }
/* Uploaded logo, when one is set. width/height carry !important because a
   number of themes ship `img { width: auto !important; height: auto !important }`,
   which would otherwise collapse an SVG to its intrinsic box. */
.fi-studio__img {
  display: block;
  width: auto !important;
  height: clamp(34px, 3.4vw, 52px) !important;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.fi-studio__sub {
  margin-top: 6px;
  font: 600 clamp(10px, 2.6vw, 11px)/1.3 var(--fi-sans);
  letter-spacing: .28em;
  margin-right: -.28em; /* cancel the trailing letter-space so it stays centred */
  text-transform: uppercase;
  color: rgba(246,239,232,.8);
}
.fi-studio__link {
  display: flex; align-items: center; gap: 10px;
  align-self: flex-start;
  min-height: 40px;
  font: 400 12.5px/1.3 var(--fi-sans);
  color: rgba(246,239,232,.74);
  transition: color .3s ease;
}
.fi-studio__link:hover { color: var(--fi-accent); }
.fi-studio__col {
  display: flex; gap: 12px;
  padding-left: clamp(0px, 1.4vw, 22px);
  border-left: 1px solid rgba(255,255,255,.14);
}
.fi-studio__k { font: 600 11px/1 var(--fi-sans); letter-spacing: .13em; text-transform: uppercase; }
.fi-studio__col p { margin-top: 9px; font: 400 12.5px/1.5 var(--fi-sans); color: rgba(246,239,232,.74); }
.fi-studio__col p:only-child { margin-top: 0; }

/* ==========================================================================
   Responsive

   The breakpoints follow where the layout actually changes rather than round
   numbers. The two half-panels are `flex: 1 1 480px`, so they wrap at ~980px,
   not 860 — keying the mobile rules to 860 left an 861-979 band where a
   section was already stacked but still wearing its two-column dress. The
   technology diagram still reads three-across down to 700px. Below 640 is a
   phone. Everything inside a section is driven from --fi-gut / --fi-r-card so
   the card system steps together instead of each component holding its own
   constant.
   ========================================================================== */

/* --- 1180 — the connector wires stop paying for themselves --------------- */
@media (max-width: 1180px) {
  .fi-wires { display: none; }

  /* The slab is physically bigger here than on desktop (max-width 260 vs the
     desktop 201), yet its type was pinned at the desktop minimum. */
  .fi-engine__k, .fi-engine__flow { font-size: 11px; letter-spacing: .12em; }
  .fi-engine__flow { color: rgba(255,214,190,.72); }
  .fi-engine__eyebrow { font-size: 11px; letter-spacing: .22em; margin-right: -.22em; }
  .fi-engine__move { font-size: 11px; letter-spacing: .08em; }
  .fi-engine__name { font-size: clamp(20px, 5.6vw, 26px); }
  .fi-engine__block { gap: 6px; }
}

/* --- 700-1180 — keep INPUTS → ENGINE → OUTPUTS three across -------------- */
@media (min-width: 700px) and (max-width: 1180px) {
  .fi-tech__diagram {
    flex-wrap: nowrap;
    align-items: flex-start;
    min-height: 0;
    gap: clamp(10px, 1.6vw, 20px);
  }
  .fi-io--in, .fi-io--out { width: auto; flex: 1 1 0; min-width: 0; }
  .fi-engine { width: auto; flex: 0 0 30%; order: 0; margin: 0; align-self: center; }
  .fi-engine__slab { max-width: none; width: 100%; }
}

/* --- 1024 — the page collapses to one column ---------------------------- */
@media (max-width: 1024px) {
  .fi-home { --fi-r-card: 12px; --fi-r-chip: 9px; padding: 12px 10px 40px; }
  .fi-sec, .fi-method, .fi-method__stage { border-radius: 26px; }

  /* Display type was frozen across the whole mobile band: every clamp()
     bottomed out at its minimum somewhere around 700-730px, so the headline
     scale simply stopped responding below that. Caps match what the desktop
     rule produces at 1024 so the boundary has no visible step. */
  .fi-hero__h1    { font-size: calc(clamp(50px, 13.5vw, 68px) * var(--fi-h-scale, 1)); }
  .fi-signal__h2  { font-size: calc(clamp(40px, 11vw,   54px) * var(--fi-h-scale, 1)); }
  .fi-finds__h2   { font-size: calc(clamp(29px, 7.6vw,  46px) * var(--fi-h-scale, 1)); }
  .fi-vs__h2      { font-size: calc(clamp(36px, 9.6vw,  52px) * var(--fi-h-scale, 1)); }
  .fi-culture__h2 { font-size: calc(clamp(42px, 11.5vw, 58px) * var(--fi-h-scale, 1)); }
  .fi-saas__h2    { font-size: calc(clamp(34px, 9.4vw,  54px) * var(--fi-h-scale, 1)); }
  .fi-tech__h2    { font-size: calc(clamp(32px, 8.6vw,  50px) * var(--fi-h-scale, 1)); }
  .fi-method__h2  { font-size: calc(clamp(30px, 8vw,    48px) * var(--fi-h-scale, 1)); }
  .fi-pricing__h2 { font-size: calc(clamp(30px, 8vw,    48px) * var(--fi-h-scale, 1)); }
  .fi-contact__h2 { font-size: calc(clamp(29px, 7.6vw,  50px) * var(--fi-h-scale, 1)); }

  /* Measures were capped in ch for a half-width column and never grew. */
  .fi-hero__lead { max-width: 42ch; }
  .fi-culture__p { max-width: 44ch; }
  .fi-lead { max-width: 46ch; }
  .fi-tech__lead, .fi-saas__lead, .fi-pricing__lead { max-width: 54ch; }
  .fi-contact__p { max-width: 60ch; }

  /* Nineteen label styles rendered under 11.5px, none of them fluid. */
  .fi-detect__k, .fi-io__label, .fi-glass__label, .fi-glass__foot,
  .fi-step__u, .fi-plan__s, .fi-plan__kicker { font-size: 11px; }
  .fi-metric__sub, .fi-chip, .fi-ccard__head span:last-child,
  .fi-statbar__l, .fi-stat__l, .fi-mcard__n, .fi-mcard__t { font-size: 11.5px; }
  .fi-output__k { font-size: 11px; color: rgba(40,30,20,.62); }
  .fi-io__label { color: rgba(17,17,17,.66); }
  .fi-note { color: rgba(17,17,17,.62); }
  .fi-plan__kicker { color: rgba(40,30,20,.62); }
  .fi-engine__slab { border-radius: 14px; }

  /* 01 Hero — the stepped cut's clamps all sit on their floor below ~905px,
     so the detail stopped scaling. Re-express it in percentages. */
  .fi-hero__cut--a { width: 26%; height: 34px; }
  .fi-hero__cut--b { width: 13%; height: 62px; }
  .fi-hero__cut--c { display: none; }
  .fi-hero__hair--1 { top: 34px; left: 13%; width: 13%; }
  .fi-hero__hair--2 { top: 62px; width: 13%; }
  .fi-hero__hair--3 { top: 62px; bottom: 0; }

  /* 02 Signal — the three glass cards kept their desktop scatter, so they
     stacked at three widths and three left edges. */
  .fi-signal__cards { min-height: 0; }
  .fi-glass--1, .fi-glass--2, .fi-glass--3 { align-self: stretch; width: auto; }
  .fi-glass { background: rgba(18,13,10,.72); border-color: rgba(255,255,255,.22); }
  .fi-stats {
    position: static;
    flex: 1 1 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    margin: 0 var(--fi-gut) var(--fi-gut);
  }
  .fi-stat { flex: none; }

  /* 03 Finds — the layout goes one column here but the scrim only flipped to
     vertical at 640, leaving 640-1024 with copy over the photograph. */
  .fi-finds { flex-wrap: wrap; align-items: flex-start; }
  .fi-finds__scrim {
    background: linear-gradient(180deg,
      rgba(247,241,233,.55) 0 20%, rgba(247,241,233,.94) 34%,
      #F7F1E9 46%, #F7F1E9 100%);
  }
  .fi-finds__copy {
    max-width: 100%;
    padding: clamp(18px, 2.6vw, 34px) var(--fi-gut) var(--fi-gut);
  }
  .fi-clock {
    position: static; transform: none; order: -1;
    flex: 0 0 100%; width: auto;
    padding: clamp(26px, 4vw, 46px) 0 0 var(--fi-gut);
  }
  .fi-clock__body { width: clamp(84px, 17vw, 118px); }

  /* 05 Culture — the media keeps its split-panel corners after it stops being
     a right-hand panel, and the scoop was slicing the first card. */
  .fi-culture__media { border-radius: 0; }
  .fi-ccard { background: rgba(12,15,22,.66); border-color: rgba(255,255,255,.22); }
  .fi-ccard p { color: rgba(255,255,255,.86); }
  .fi-detect { background: rgba(10,12,18,.7); }

  /* 06 SaaS — the overlay used to return at 861 and squeeze the grid again,
     so the section got worse as the screen got wider. */
  .fi-saas__media {
    position: static; width: 100%; height: auto; aspect-ratio: 16 / 7;
    opacity: 1 !important; transform: none !important;
  }
  .fi-saas__body { padding: var(--fi-gut); }
  .fi-grid--3, .fi-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .fi-grid--3 > :last-child:nth-child(3) { grid-column: 1 / -1; }

  /* 07 Technology — restore the pipeline's reading order. `order:-1` used to
     hoist the engine above both lists, so the section read engine → inputs →
     outputs, which is the argument backwards. */
  .fi-tech__diagram {
    min-height: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(26px, 4vw, 36px);
    padding: 0 var(--fi-gut) var(--fi-gut);
  }
  .fi-io--in  { order: 1; width: 100%; }
  .fi-engine  { order: 2; width: 100%; margin: 0; align-self: center; }
  .fi-io--out { order: 3; width: 100%; }
  .fi-io__label { margin-bottom: 10px; }
  .fi-engine__slab { max-width: 280px; margin: 0 auto; }

  /* 09 Pricing — the mobile dim lost to `.fi-a.is-in { opacity: 1 }` on
     specificity, so the king rendered at full strength over the headline. */
  .fi-pricing__king,
  .fi-pricing__king.fi-a.is-in { opacity: .2; }
  .fi-pricing__king { width: min(46%, 230px); }
  .fi-pricing__body { padding: var(--fi-gut); }
  .fi-plan__head { min-height: 0; padding-bottom: 14px; }

  /* 10 Contact */
  .fi-contact__body { max-width: 100%; padding: var(--fi-gut); }
  .fi-contact__scrim {
    background: linear-gradient(180deg,
      rgba(21,17,15,.62) 0 26%, rgba(21,17,15,.9) 52%, #15110F 74%, #15110F 100%);
  }
  /* film-set.jpg is only photographic from x≈48%; anchoring the bleed right
     keeps the blank half of the plate out of frame. */
  .fi-contact .fi-bleed { left: auto; right: -4%; width: 150%; }
}

/* --- 980 — where the two half-panels actually wrap ----------------------- */
@media (max-width: 979px) {
  .fi-vs { display: grid; grid-template-columns: 1fr; }
  .fi-vs__old, .fi-vs__new { padding: var(--fi-gut); }
  .fi-vs__panel, .fi-vs__panel--new { max-width: 100%; }

  /* Put the pivot back. Placed in row 2 with a negative top margin it
     straddles the seam, which is the whole point of the section. */
  .fi-vs__badge {
    display: flex;
    position: static;
    grid-row: 2; grid-column: 1;
    justify-self: center; align-self: start;
    margin: -28px 0 0;
  }
  .fi-vs__rook, .fi-vs__bishop { opacity: .3; }
  .fi-vs__rook   { right: -1%; top: 2%; width: min(46%, 300px); }
  .fi-vs__bishop { right: -4%; bottom: 4%; width: min(46%, 300px); }
}

/* --- 540-860 — the culture overlay keeps card proportions ---------------- */
@media (min-width: 540px) and (max-width: 860px) {
  .fi-culture__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fi-detect { margin-left: auto; }
}

/* --- 900 — mid-tablet card grids ---------------------------------------- */
@media (max-width: 900px) {
  .fi-method__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .fi-method__cards > :nth-child(5) { grid-column: span 2; }
  .fi-mcard__t { letter-spacing: .02em; overflow-wrap: anywhere; }
  .fi-assur { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .fi-feats, .fi-feats--lg { gap: 12px; }
  .fi-feat, .fi-feats--lg .fi-feat { font-size: 12.5px; line-height: 1.45; }
}

/* --- 860 — decorative overlays leave the flow ---------------------------- */
@media (max-width: 860px) {
  .fi-culture__media { min-height: 0; }
  .fi-culture__cards {
    position: static; transform: none;
    width: auto; max-width: 620px;
    padding: var(--fi-gut) var(--fi-gut) 0;
  }
  .fi-detect { position: static; width: auto; max-width: 460px; margin: 14px var(--fi-gut) var(--fi-gut); }
  .fi-display > span,
  .fi-hero__h1, .fi-signal__h2, .fi-finds__h2, .fi-vs__h2, .fi-culture__h2,
  .fi-saas__h2, .fi-tech__h2, .fi-method__h2, .fi-pricing__h2,
  .fi-contact__h2 { line-height: .94; }
  .fi-home--minimal .fi-display,
  .fi-home--minimal .fi-display > span { line-height: 1.08; }
}

/* --- 700 — the technology diagram flattens ------------------------------- */
@media (max-width: 700px) {
  .fi-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  /* Ten inputs in a single column was the clearest "this is just a stack"
     moment on the page. */
  .fi-io--in, .fi-io--out { display: grid; gap: 8px; }
  .fi-io--in  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .fi-io--out { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .fi-io__label { grid-column: 1 / -1; }
  .fi-io--out > :last-child:nth-child(even) { grid-column: 1 / -1; }
  .fi-input { align-items: flex-start; }
}

/* --- 640 — phone --------------------------------------------------------- */
@media (max-width: 640px) {
  .fi-home { --fi-gut: 22px; --fi-r-card: 10px; --fi-r-chip: 8px; padding: 12px 12px 32px; }
  .fi-sec, .fi-method { margin-bottom: 12px; }
  .fi-sec, .fi-method, .fi-method__stage { border-radius: 20px; }

  .fi-eyebrow { flex-wrap: wrap; gap: 10px; }
  .fi-eyebrow__rule { min-width: 24px; }
  .fi-hero__copy { min-width: 0; padding: 26px var(--fi-gut) 30px; }
  /* nowrap made the 288px eyebrow string the copy column's min-content, so the
     hero could not shrink below ~348px. Wrapping is the fix, not shrinking. */
  .fi-eyebrow--nowrap .fi-eyebrow__t { white-space: normal; }
  .fi-hero__media { min-height: 52vh; }

  /* Both CTAs full width so the pair reads as one control group. */
  .fi-btns { gap: 10px; }
  .fi-btns > .fi-btn { flex: 1 1 100%; justify-content: center; }

  .fi-signal__scrim {
    background: linear-gradient(180deg, #F2EDE6 0 30%, rgba(242,237,230,.92) 48%,
      rgba(242,237,230,.35) 72%, rgba(242,237,230,.1) 100%);
  }
  .fi-signal__copy { padding: var(--fi-gut); }
  .fi-signal__cards { padding: 0 var(--fi-gut) var(--fi-gut); }
  .fi-stats { gap: 16px 18px; padding: 16px 18px; }


  .fi-step { flex-wrap: wrap; gap: 12px 14px; }
  .fi-chain__row { gap: 10px; }

  .fi-culture__cards { max-width: none; }
  .fi-saas__media { aspect-ratio: 16 / 9; }
  .fi-saas__foot { align-items: center; gap: 12px 14px; }
  .fi-saas__foot a {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 46px; padding: 14px 20px;
    border-radius: var(--fi-r-chip);
    border: 1px solid rgba(169,121,31,.5);
  }

  .fi-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-statbar__cell { padding: 14px 16px; align-items: flex-start; }

  /* Seven cards never divide evenly, so the last one always sat beside a
     hole. Let it take the remainder of its row. */
  .fi-method__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fi-method__cards > :nth-child(5) { grid-column: auto; }
  .fi-method__cards > :last-child { grid-column: 1 / -1; }
  .fi-mcard__tip { display: none; }

  .fi-plan { padding: 18px; }
  .fi-awards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fi-studio__col { padding-left: 0; border-left: 0; }
  .fi-contact__h2 { gap: 10px; }
}

/* --- 767 — the contact block's column rules become row rules ------------- */
@media (max-width: 767px) {
  .fi-studio__col {
    padding-left: 0; border-left: 0;
    padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14);
  }
  .fi-studio { gap: 0; }
  .fi-studio > * + * { margin-top: 16px; }
}

@media (min-width: 500px) and (max-width: 767px) {
  .fi-awards { grid-template-columns: repeat(2, 1fr); }
  .fi-awards > .fi-award:last-child { grid-column: 1 / -1; }
}
@media (max-width: 499px) {
  .fi-awards { grid-template-columns: 1fr; }
}

/* --- 500 — feature cards turn horizontal --------------------------------- */
@media (max-width: 500px) {
  /* Two-up was measured and rejected: at 360 it drops each card to 135px,
     breaks titles onto four lines and makes the cards TALLER than one column.
     Going horizontal is what actually recovers the height. */
  .fi-grid--3, .fi-grid--4 { grid-template-columns: 1fr; gap: 10px; }
  .fi-fcard {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      "icon title link"
      "icon body  link";
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    padding: 16px;
  }
  .fi-fcard > .fi-icon { grid-area: icon; margin-top: 2px; }
  .fi-fcard__t { grid-area: title; margin-top: 0; font-size: 11.5px; }
  .fi-fcard p { grid-area: body; margin: 0; font-size: 11.5px; }
  .fi-fcard a {
    grid-area: link; align-self: center;
    margin-top: 0; padding-top: 0;
    min-height: 40px;
  }
}

/* --- 430 — small phones -------------------------------------------------- */
@media (max-width: 430px) {
  .fi-vs__bishop { opacity: .12; width: min(54%, 200px); right: -8%; bottom: -4%; }
  .fi-vs__rook { opacity: .16; }
  .fi-contact__h2 { gap: 8px; }
}

/* --- the pinned method scene on short viewports -------------------------- */
@media (max-width: 640px) {
  /* The stage was taller than the screen, so the payoff of the scene sat
     permanently below the fold on any phone under ~800px tall. */
  .fi-method { height: 170vh; }
  .fi-method__pin { top: 8px; height: auto; min-height: 0; }
  .fi-method__stage {
    min-height: calc(100svh - 16px);
    max-height: calc(100svh - 16px);
    padding: 20px var(--fi-gut) 0;
  }
  .fi-method__board { min-height: 0; flex: 1 1 120px; }
}
@supports not (height: 100svh) {
  @media (max-width: 640px) {
    .fi-method__stage { min-height: calc(100vh - 96px); max-height: calc(100vh - 96px); }
  }
}

/* ==========================================================================
   Reduced motion — kill everything decorative, show all content
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fi-home *,
  .fi-home *::before,
  .fi-home *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .fi-home .fi-a,
  .fi-home .fi-mcard,
  .fi-home .fi-slam,
  .fi-home .fi-queen__piece { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fi-home .fi-queen { position: static; margin: 0 auto; }
  .fi-method { height: auto; }
  .fi-method__pin { position: static; height: auto; }
}

/* Print — flatten to something legible */
@media print {
  .fi-home .fi-a { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fi-method { height: auto; }
  .fi-method__pin { position: static; height: auto; }
}

/* =========================================================================
   v1.6.0 — Minimal pass
   Ten narrative sections became six. Three blocks survived their old homes
   and needed the geometry their parent used to give them:
     · .fi-vs--solo      the VS panel lost its left half, so the bishop can
                         no longer sit at 58% of a half-width column.
     · .fi-finds--band   the finder lost its copy column; what is left is a
                         live band, not a 74vh scene.
     · .fi-close         the closing CTA the pricing section used to carry.
   Everything above this line is untouched, so reverting is a truncation.
   ====================================================================== */

/* ---------- 03 Edge — the bishop, now full width ---------- */
.fi-vs--solo { min-height: min(72vh, 660px); }
.fi-vs--solo .fi-vs__new {
  flex: 1 1 100%;
  display: flex; align-items: center;
  padding-block: clamp(44px, 5vw, 84px);
}
.fi-vs--solo .fi-vs__panel--new { max-width: min(100%, 620px); }
.fi-vs--solo .fi-vs__bishop {
  right: clamp(2%, 4vw, 7%);
  bottom: 0;
  width: min(36%, 400px);
}
@media (max-width: 900px) {
  .fi-vs--solo .fi-vs__bishop { position: relative; right: auto; bottom: auto; width: min(62%, 300px); margin: 0 auto 8px; }
  .fi-vs--solo .fi-vs__new { flex-direction: column-reverse; }
}

/* ---------- Live band — clock only ---------- */
.fi-finds--band {
  position: relative;
  min-height: 0;
  display: flex; align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  padding: clamp(24px, 2.8vw, 40px) var(--fi-gut);
  overflow: hidden;
}
.fi-finds--band .fi-clock {
  position: relative; left: auto; top: auto; transform: none;
  flex: 0 0 auto;
  width: clamp(58px, 5.4vw, 82px);
}
/* The clock is in flow now, so the img's height="793" attribute is no longer
   absorbed by an absolutely positioned parent. Themes usually ship
   `img { height:auto }`; this plugin must not depend on that. */
.fi-finds--band .fi-clock__body img { height: auto; aspect-ratio: 330 / 793; }
.fi-finds__band-copy {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font: 400 clamp(13px, 1.15vw, 16px)/1.4 var(--fi-sans);
  letter-spacing: .01em;
  color: rgba(36, 28, 21, .72);
}
.fi-finds__band-t { max-width: 66ch; }
@media (max-width: 700px) {
  .fi-finds--band { flex-direction: column; align-items: flex-start; }
}

/* ---------- 06 Contact — closing CTA ---------- */
.fi-close {
  margin-top: clamp(28px, 3vw, 48px);
  padding-top: clamp(24px, 2.6vw, 38px);
  border-top: 1px solid rgba(239, 227, 216, .18);
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: clamp(20px, 2.6vw, 44px);
}
.fi-close__copy { flex: 1 1 420px; }
.fi-close__h {
  font: 500 clamp(22px, 2.2vw, 34px)/1.14 var(--fi-sans);
  color: #F4EAE1;
  margin-bottom: 10px;
}
.fi-close__p {
  max-width: 52ch;
  font: 400 14px/1.6 var(--fi-sans);
  color: rgba(239, 227, 216, .74);
}
.fi-close .fi-btns { flex: 0 0 auto; }

/* ---------- Compliance strip ---------- */
.fi-compliance {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: clamp(18px, 2vw, 28px);
}
.fi-compliance__k {
  font: 500 10.5px/1 var(--fi-sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(239, 227, 216, .46);
}
.fi-compliance__b {
  font: 500 11.5px/1 var(--fi-sans);
  letter-spacing: .06em;
  padding: 7px 11px;
  border: 1px solid rgba(239, 227, 216, .2);
  border-radius: 999px;
  color: rgba(239, 227, 216, .74);
}

/* The closing CTA sits on the dark contact panel; the shared ghost button is
   tuned for cream sections and reads as a grey slab here. */
.fi-close .fi-btn--ghost-cream {
  background: transparent;
  border: 1px solid rgba(239, 227, 216, .42);
  color: #F4EAE1;
}
.fi-close .fi-btn--ghost-cream:hover {
  background: rgba(239, 227, 216, .1);
  border-color: rgba(239, 227, 216, .72);
}

/* =========================================================================
   v1.7.0 — Continuous
   The page was a stack of floating cards: every section carried a 34px
   radius, a shell shadow and an 18px gap, sitting on a darker --fi-page.
   That reads as seven objects, not one page. This block removes the shell,
   collapses six cream values into one paper, and buys the whitespace back.
   Appended, like 1.6.0 — nothing above is edited.
   ====================================================================== */

.fi-home {
  /* One ground for the whole page. Every light surface below resolves to it. */
  --fi-paper: #F4EFE7;
  --fi-rule: rgba(36, 28, 21, .10);
  --fi-rule-soft: rgba(36, 28, 21, .06);

  --fi-gut: clamp(26px, 5vw, 96px);   /* was 30/3.6vw/64 — Pulsar lives on air */
  --fi-r-card: 4px;                    /* was 14px — editorial, not app-ish */
  --fi-r-chip: 4px;

  padding: 0;
  background: var(--fi-paper);
}

/* ---------- No shell ---------- */
.fi-sec,
.fi-method {
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  background: var(--fi-paper);
}

/* A hairline is the only thing between two light sections. Sections that
   bring their own ground (the orange edge, the night contact panel) define
   their own edge and must not get one. */
.fi-sec + .fi-sec,
.fi-method,
.fi-finds--band { border-top: 1px solid var(--fi-rule-soft); }
.fi-vs--solo,
.fi-vs--solo + .fi-sec,
.fi-contact { border-top: 0; }

/* ---------- One cream, not six ---------- */
.fi-hero,
.fi-saas,
.fi-finds,
.fi-finds--band { background: var(--fi-paper); }

.fi-signal__scrim {
  background: linear-gradient(90deg,
    var(--fi-paper) 0%, rgba(244,239,231,.92) 26%,
    rgba(244,239,231,.10) 52%, transparent 66%);
}
.fi-finds__scrim {
  background: linear-gradient(100deg,
    var(--fi-paper) 0 38%, rgba(244,239,231,.94) 48%,
    rgba(244,239,231,.5) 61%, rgba(244,239,231,.06) 76%, rgba(244,239,231,0) 100%);
}
.fi-hero__fade {
  background: linear-gradient(90deg, rgba(244,239,231,.75), rgba(244,239,231,0));
}

/* ---------- Less ornament ---------- */
/* Nine decorative overlays sat on the hero. The chessboard tint stays because
   it is the brand; the pulsing glow, the cuts and the hairlines were noise. */
.fi-hero__glow { animation: none; opacity: .5; }
.fi-hero__cut,
.fi-hero__hair { display: none; }
.fi-checker { opacity: .055; }

/* ---------- Cards: hairline, not slab ---------- */
.fi-fcard,
.fi-mcard {
  background: transparent;
  border: 1px solid var(--fi-rule);
  box-shadow: none;
}
.fi-award {
  background: rgba(20, 16, 14, .46);
  border: 1px solid rgba(246, 239, 232, .12);
}
.fi-glass { border-radius: var(--fi-r-card); }

/* ---------- The night panel is flat and full width ---------- */
.fi-contact {
  box-shadow: none;
  background: var(--fi-night);
}

/* ---------- Air ---------- */
.fi-hero { min-height: min(88vh, 820px); }
.fi-hero__copy { padding-block: clamp(48px, 7vw, 120px); }
.fi-signal__stage { min-height: min(82vh, 760px); }
.fi-saas__body { padding-block: clamp(56px, 7.5vw, 128px); }
.fi-contact__body { padding-block: clamp(56px, 7.5vw, 128px); }
.fi-vs--solo .fi-vs__new { padding-block: clamp(56px, 7vw, 120px); }
.fi-finds--band { padding-block: clamp(30px, 3.4vw, 52px); }

/* The method stage was the last card on the page: it kept the 34px radius and
   the shell shadow after .fi-sec lost them, so the pinned scene floated over
   the paper instead of being part of it. */
.fi-method__stage {
  border-radius: 0;
  box-shadow: none;
  background: var(--fi-paper);
}

/* Hard vertical seam where the SaaS portrait met the paper. */
.fi-saas__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--fi-paper) 0%, rgba(244,239,231,.55) 14%, rgba(244,239,231,0) 42%);
}

/* Seven bordered boxes in a 3+4 grid is the most generic shape a SaaS page can
   make. Same information, set as an editorial index: a rule on top, air below,
   no container. */
.fi-grid { gap: clamp(18px, 2.2vw, 34px); }
.fi-fcard {
  border: 0;
  border-top: 1px solid var(--fi-rule);
  border-radius: 0;
  padding: 20px 0 4px;
  background: transparent;
}
.fi-fcard a { padding-top: 18px; min-height: 34px; }

/* The shimmer overlay was painting over the fade, so the portrait kept a hard
   vertical seam against the paper. */
.fi-saas__media .fi-saas__shimmer { z-index: 1; }
.fi-saas__media::after { z-index: 2; }

/* auto-fit left "Custom research" orphaned on its own row once the cards lost
   their boxes. Both groups now hold their row. */
.fi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .fi-grid--3, .fi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .fi-grid--3, .fi-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   v1.8.0 — Type and one regression
   ====================================================================== */

/* REGRESSION FIX. 1.7.0 set `.fi-mcard { background: transparent }` to strip
   the card slabs, and because it lands later in the file it also stripped the
   orange fill from .fi-mcard--hot — leaving white text on paper. Card 04
   (Move / What should the brand do?) was invisible. */
.fi-method .fi-mcard--hot {
  background: var(--fi-accent);
  border-color: var(--fi-accent);
  color: #fff;
}
.fi-method .fi-mcard--hot .fi-mcard__n { color: rgba(255, 255, 255, .88); }
.fi-method .fi-mcard--hot .fi-mcard__t { color: #fff; }
.fi-method .fi-mcard--hot .fi-mcard__p { color: rgba(255, 255, 255, .84); }
.fi-method .fi-mcard--hot .fi-mcard__rule { background: rgba(255, 255, 255, .5); }

/* ---------- Headlines ----------
   The plugin ships two headline modes and `minimal` is the default, so the
   page already runs Poppins rather than poster Anton. It was set small (.84)
   and heavy (600) — the two settings that make big type look timid. Larger,
   lighter and tracked in reads calmer, not louder, and it is what the
   reference sites actually do. */
.fi-home--minimal {
  --fi-h-scale: .94;
}
.fi-home--minimal .fi-display {
  font-weight: 500;
  letter-spacing: -.032em;
  line-height: 1.02;
}
.fi-home--minimal .fi-detect__v,
.fi-home--minimal .fi-engine__name,
.fi-home--minimal .fi-chain__row { font-weight: 500; letter-spacing: -.026em; }

/* Breathing room. A headline needs air above it more than it needs size. */
.fi-eyebrow { margin-bottom: clamp(20px, 2.4vw, 40px); }
.fi-hero__h1,
.fi-signal__h2,
.fi-saas__h2,
.fi-contact__h2 { margin-bottom: clamp(22px, 2.6vw, 44px); }
.fi-method__h2 {
  margin-top: clamp(18px, 2vw, 30px);
  margin-bottom: clamp(26px, 3vw, 52px);
}
.fi-subhead { margin-top: clamp(34px, 4vw, 64px); }

/* Body copy gets a touch more leading and a shorter measure to match. */
.fi-hero__lead { max-width: 42ch; line-height: 1.6; }
.fi-lead { line-height: 1.6; }
.fi-vs__h3 { font-weight: 500; letter-spacing: -.024em; line-height: 1.12; }

/* The persona line under the hero lead — the one move Meltwater makes that
   costs nothing and answers "is this for me?" in the first screen. */
.fi-hero__who {
  margin-top: 14px;
  font: 500 12px/1.4 var(--fi-sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(36, 28, 21, .5);
}

/* The live clock band was removed in 1.8.0; its rules above are inert. */

/* =========================================================================
   v1.9.0 — Mobile composition (≤ 767px)
   Not the desktop page folded into one column. Each section is re-set for a
   390px canvas: poster hero (image first, headline riding over its base),
   horizontal snap rails wherever the desktop had a row of cards, two-up
   grids for the index, and the queen scene unpinned so it plays as the board
   crosses the viewport instead of leaving three screens of paper.
   Every selector is prefixed .fi-home so it outranks the older breakpoints.
   ====================================================================== */
@media (max-width: 767px) {
  .fi-home { --fi-gut: 20px; }
  .fi-home .fi-eyebrow { margin-bottom: 14px; }
  .fi-home .fi-eyebrow__t { font-size: 10.5px; }
  .fi-home .fi-display { line-height: 1.04; }

  /* Buttons: two-up, never stacked. */
  .fi-home .fi-btns { display: grid; grid-template-columns: 1.18fr .82fr; gap: 10px; width: 100%; }
  .fi-home .fi-btn { justify-content: center; padding: 15px 8px; font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; }
  .fi-home .fi-btn--sm { padding: 13px 10px; }

  /* ---------- 01 Hero — poster ---------- */
  .fi-home .fi-hero { display: grid; grid-template-columns: 1fr; min-height: 0; }
  .fi-home .fi-hero__media { order: -1; min-height: 58svh; }
  .fi-home .fi-hero__media .fi-bleed img { object-position: 56% 50% !important; }
  .fi-home .fi-hero__fade { display: none; }
  .fi-home .fi-hero__copy {
    position: relative; z-index: 2;
    margin-top: -96px;
    padding: 0 var(--fi-gut) 30px;
    gap: 14px;
    background: linear-gradient(to bottom, rgba(244,239,231,0) 0, rgba(244,239,231,.86) 46px, var(--fi-paper) 96px);
  }
  .fi-home .fi-hero__copy .fi-eyebrow { padding-top: 40px; margin-bottom: 4px; }
  .fi-home .fi-hero__h1 { font-size: clamp(40px, 12vw, 56px); margin-bottom: 4px; }
  .fi-home .fi-hero__lead { max-width: none; font-size: 15px; line-height: 1.55; }
  .fi-home .fi-hero__who { margin-top: 2px; font-size: 10.5px; }
  .fi-home .fi-hero__accent { font-size: 13.5px; }
  .fi-home .fi-hero .fi-note { font-size: 11px; }

  /* ---------- 02 Signal — image band, copy over its foot, cards on a rail ---------- */
  .fi-home .fi-signal__stage { display: block; min-height: 0; }
  /* The parallax transform scales and shifts the bleed under a fixed scrim,
     which exposed a moving sliver of image at the seam. No parallax on the
     banded sections. !important because the JS writes an inline transform. */
  .fi-home .fi-signal__stage .fi-bleed { position: relative; inset: auto; height: 46svh; width: auto; overflow: hidden; transform: none !important; }
  .fi-home .fi-signal__stage .fi-bleed img { object-position: 62% 50% !important; }
  .fi-home .fi-signal__scrim {
    inset: auto 0 auto 0; top: 0; height: calc(46svh + 3px);
    background: linear-gradient(to bottom, rgba(244,239,231,0) 44%, rgba(244,239,231,.92) 82%, var(--fi-paper) 94%);
  }
  .fi-home .fi-streak { display: none; }
  .fi-home .fi-signal__copy { position: relative; z-index: 3; margin-top: -72px; padding: 0 var(--fi-gut) 26px; gap: 14px; }
  .fi-home .fi-signal__h2 { font-size: clamp(32px, 9.6vw, 44px); margin-bottom: 4px; }
  .fi-home .fi-lead { font-size: 15px; line-height: 1.55; }
  .fi-home .fi-signal__cards {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; min-height: 0;
    padding: 0 var(--fi-gut) 34px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .fi-home .fi-signal__cards::-webkit-scrollbar { display: none; }
  .fi-home .fi-glass,
  .fi-home .fi-glass--1, .fi-home .fi-glass--2, .fi-home .fi-glass--3 {
    flex: 0 0 82%; width: auto; align-self: auto; scroll-snap-align: start;
    background: var(--fi-night); border-color: rgba(246,239,232,.14);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  /* ---------- 03 Edge — two columns: copy | bishop, bullets across ---------- */
  .fi-home .fi-vs--solo { min-height: 0; }
  .fi-home .fi-vs--solo .fi-vs__new {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
    grid-template-rows: auto auto auto auto; column-gap: 6px; row-gap: 0;
    align-items: end; padding: 40px var(--fi-gut) 0; flex-direction: row;
  }
  .fi-home .fi-vs--solo .fi-vs__panel--new { display: contents; }
  .fi-home .fi-vs--solo .fi-chip { grid-column: 1; grid-row: 1; align-self: start; margin-bottom: 14px; }
  .fi-home .fi-vs--solo .fi-vs__h3 { grid-column: 1; grid-row: 2; align-self: start; font-size: clamp(21px, 6.2vw, 27px); max-width: none; margin-bottom: 10px; }
  .fi-home .fi-vs--solo .fi-vs__p { grid-column: 1; grid-row: 3; align-self: start; font-size: 13.5px; max-width: none; }
  .fi-home .fi-vs--solo .fi-vs__bishop {
    grid-column: 2; grid-row: 1 / 4; align-self: end; justify-self: end;
    position: relative; right: auto; bottom: auto; width: 100%; max-width: 190px;
    margin: 0 -4px -6px 0; opacity: 1;
  }
  .fi-home .fi-vs--solo .fi-list--new { grid-column: 1 / -1; grid-row: 4; margin: 16px calc(-1 * var(--fi-gut)) 0; padding: 0 var(--fi-gut) 30px; background: rgba(0,0,0,.14); }
  .fi-home .fi-vs--solo .fi-list__row { padding: 13px 0; }
  .fi-home .fi-vs--solo .fi-list__t { font-size: 13px; }

  /* ---------- 04 Platform — portrait band, two-up index ---------- */
  .fi-home .fi-saas { display: block; }
  .fi-home .fi-saas__media { position: relative; inset: auto; width: auto; height: 42svh; overflow: hidden; }
  .fi-home .fi-saas__media .fi-bleed { transform: none !important; }
  .fi-home .fi-saas__media .fi-bleed img { object-position: 50% 26% !important; }
  .fi-home .fi-saas__media::after { background: linear-gradient(to bottom, rgba(244,239,231,0) 52%, var(--fi-paper) 100%); }
  .fi-home .fi-saas__body { position: relative; z-index: 2; margin-top: -60px; padding: 0 var(--fi-gut) 40px; gap: 16px; }
  .fi-home .fi-saas__h2 { font-size: clamp(32px, 9.6vw, 44px); margin-bottom: 2px; }
  .fi-home .fi-saas__lead { font-size: 14.5px; }
  .fi-home .fi-subhead { margin-top: 22px; }
  .fi-home .fi-grid, .fi-home .fi-grid--3, .fi-home .fi-grid--4 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
  .fi-home .fi-fcard { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 0 2px; border-top: 1px solid var(--fi-rule); }
  .fi-home .fi-fcard .fi-icon { width: 20px !important; height: 20px !important; margin: 0 0 8px; }
  .fi-home .fi-fcard__t { font-size: 11px; letter-spacing: .04em; line-height: 1.3; }
  .fi-home .fi-fcard p { font-size: 11.5px; line-height: 1.45; margin-top: 6px; }
  .fi-home .fi-fcard a { padding-top: 10px; min-height: 28px; align-self: flex-start; margin-left: 0; }
  .fi-home .fi-saas__foot { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ---------- 05 Method — unpinned, cards on a rail, board at full width ---------- */
  .fi-home .fi-method { height: auto; }
  .fi-home .fi-method__pin { position: static; height: auto; display: block; }
  .fi-home .fi-method__stage { min-height: 0; display: block; padding: 44px 0 0; }
  .fi-home .fi-method__stage > .fi-eyebrow,
  .fi-home .fi-method__h2 { margin-left: var(--fi-gut); margin-right: var(--fi-gut); }
  .fi-home .fi-method__h2 { font-size: clamp(32px, 9.6vw, 44px); margin-bottom: 18px; }
  .fi-home .fi-method__cards {
    display: flex; flex-wrap: nowrap; gap: 10px; margin: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 0 var(--fi-gut) 18px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .fi-home .fi-method__cards::-webkit-scrollbar { display: none; }
  .fi-home .fi-mcard, .fi-home .fi-method__cards > * { flex: 0 0 58%; grid-column: auto !important; scroll-snap-align: start; }
  .fi-home .fi-method__board { min-height: 232px; margin-top: 4px; }

  /* ---------- 06 Contact — awards on a rail, two-up studio, two-up CTA ---------- */
  .fi-home .fi-contact { display: block; }
  .fi-home .fi-contact__body { max-width: 100%; padding: 48px var(--fi-gut) 40px; gap: 16px; }
  .fi-home .fi-contact__h2 { font-size: clamp(32px, 9.6vw, 44px); }
  .fi-home .fi-contact__p { font-size: 14.5px; }
  .fi-home .fi-awards {
    display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 6px calc(-1 * var(--fi-gut)) 0; padding: 0 var(--fi-gut) 6px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .fi-home .fi-awards::-webkit-scrollbar { display: none; }
  .fi-home .fi-award, .fi-home .fi-awards > .fi-award:last-child { flex: 0 0 76%; grid-column: auto; scroll-snap-align: start; }
  .fi-home .fi-studio { grid-template-columns: 1fr 1fr; gap: 14px; }
  .fi-home .fi-compliance { gap: 8px 10px; }
  .fi-home .fi-compliance__b { font-size: 10.5px; padding: 6px 9px; }
  .fi-home .fi-close { gap: 18px; }
  .fi-home .fi-close__h { font-size: clamp(22px, 6.4vw, 28px); }
  .fi-home .fi-close__p { font-size: 13.5px; }
  .fi-home .fi-close .fi-btns { width: 100%; }
}

/* Very narrow phones: the two-up rails widen a touch so copy stays readable. */
@media (max-width: 380px) {
  .fi-home .fi-glass, .fi-home .fi-glass--1, .fi-home .fi-glass--2, .fi-home .fi-glass--3 { flex-basis: 88%; }
  .fi-home .fi-mcard, .fi-home .fi-method__cards > * { flex-basis: 66%; }
  .fi-home .fi-award { flex-basis: 84%; }
  .fi-home .fi-vs--solo .fi-vs__new { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
}