/* =========================================================================
   The FM Studio - stylesheet
   Palette: warm paper + heritage gold · Type: Fraunces / Hanken Grotesk / IBM Plex Mono
   Signature: the gold "node" - a relational-record marker echoing the wordmark's period
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Colour - warm paper through warm light greys, a deep charcoal, and a range of yellows */
  --paper:      #FAF8F2;   /* warm off-white base */
  --paper-2:    #EFEBE1;   /* legacy alias - surfaces now use the ramp below */

  /* Surface ramp: warm white → warm light greys (cards & panels) */
  --s-0: #FAF8F2;
  --s-1: #F3F0E7;
  --s-2: #ECE8DE;
  --s-3: #E5E0D5;

  /* Boundary stops - each section fades between two of these for seamless flow */
  --b-0:  #FAF8F2;  --b-1:  #F5F2EA;  --b-2:  #EFEBE2;  --b-3:  #F2EEE6;
  --b-4:  #EAE6DC;  --b-5:  #E6E1D6;  --b-6:  #E2DDD1;  --b-7:  #F1EDE4;
  --b-8:  #ECE8DE;  --b-9:  #F5F2EA;  --b-10: #FAF8F2;

  --ink:        #1E1A15;   /* deep warm charcoal - primary text & dark anchor */
  --stone:      #5C5649;   /* secondary text - verified >4.5:1 on paper */
  --stone-soft: #6E6656;   /* tertiary / captions - clears WCAG AA on paper */

  /* Yellows - a heritage range from pale wash to deep amber */
  --gold:       #E6B23E;   /* primary heritage gold */
  --gold-soft:  #F2D27A;   /* lighter gold */
  --honey:      #F4C95D;   /* bright honey */
  --amber:      #CF8629;   /* deep amber / orange-gold */
  --gold-pale:  #FBEFC9;   /* pale wash for tints & glows */
  --bronze:     #8A6A1E;   /* accessible gold-toned TEXT on light */

  --charcoal:   #1B1813;   /* dark sections */
  --line:       #E4DECF;   /* hairline rules on paper */
  --line-2:     #DCD5C4;   /* slightly stronger hairline */
  --line-dark:  rgba(240, 235, 222, 0.16); /* hairlines on charcoal */

  /* On-dark text */
  --paper-on-dark:  #F4F0E6;
  --stone-on-dark:  #B7AF9E;

  /* Type - native SF Pro on Apple, clean grotesque fallback elsewhere */
  --font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                  "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  /* Small labels (eyebrows, kickers, notes, certs) - SF Pro per request, not monospace. */
  --font-mono:    "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Inter", "Segoe UI", Roboto, system-ui, sans-serif;

  /* Fluid type scale */
  --fs-display: clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem);
  --fs-h2:      clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  --fs-h3:      clamp(1.18rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-lede:    clamp(1.075rem, 1rem + 0.4vw, 1.32rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.825rem;

  /* Spacing & layout */
  --shell:      1200px;
  --gutter:     clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
  --section-y:  clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --radius:     14px;
  --radius-sm:  9px;

  /* Motion */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --reveal-dur:  720ms;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip horizontal overflow without creating a scroll container (keeps position:sticky working) */
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.06; margin: 0;
  letter-spacing: -0.021em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--ink); }

/* ---------- Utilities ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden, .proof__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
  border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 600;
  transition: top 180ms var(--ease-out);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2.5px solid var(--bronze); outline-offset: 3px; border-radius: 4px; }

/* =========================================================================
   Splash - realistic cloud intro (zoom through clouds, then part into the site)
   ========================================================================= */
.splash-active { overflow: hidden; }
.splash-skip .splash { display: none; }

.splash {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(125% 100% at 50% 30%, #FDF3DD 0%, #BCDAF0 40%, #7DACD6 100%);
  animation: splashFade 2.7s ease forwards;
}
.splash__defs { position: absolute; width: 0; height: 0; }
.splash__glow { position: absolute; left: 50%; top: 40%; z-index: 0;
  width: 46vmax; height: 46vmax; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 238, 196, 0.95), rgba(255, 232, 184, 0) 62%);
  animation: splashGlow 2.7s ease forwards; }
.splash__layer { position: absolute; inset: -28%; z-index: 1; will-change: transform, opacity; }
.splash__layer svg { width: 100%; height: 100%; display: block; }
.splash__layer--back  { opacity: 0.95; animation: cloudBack 2.7s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
.splash__layer--mid   { opacity: 1;    animation: cloudMid 2.7s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
.splash__layer--front { opacity: 1;    animation: cloudFront 2.7s cubic-bezier(0.5, 0, 0.2, 1) forwards; }

.splash__brand { position: relative; z-index: 2; margin: 0; opacity: 0;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.6rem); color: var(--ink);
  text-shadow: 0 2px 30px rgba(255, 255, 255, 0.6);
  animation: splashBrand 2.7s ease forwards; }
.splash__logo { width: clamp(230px, 44vw, 460px); height: auto;
  filter: drop-shadow(0 6px 30px rgba(255, 255, 255, 0.55)); }
.splash__the { font-size: 0.56em; color: var(--stone); font-weight: 400; margin-right: 0.24em; }
.splash__dot { color: var(--gold); }
.splash__skip { position: absolute; bottom: 1.4rem; right: 1.4rem; z-index: 3; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink);
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 100px; padding: 0.45rem 0.95rem;
  box-shadow: 0 6px 16px -8px rgba(30, 26, 21, 0.3); animation: splashSkip 2.7s ease forwards; }
@media (hover: hover) { .splash__skip:hover { background: rgba(255, 255, 255, 0.8); } }

@keyframes splashFade { 0%, 74% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; } }
@keyframes splashGlow { 0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.4; }
  55% { opacity: 0.95; } 100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; } }
/* Front clouds rush past (zoom-through); two banks part outward near the end */
@keyframes cloudFront { 0% { transform: scale(1.05); }
  100% { transform: scale(3.5) translateY(4%); opacity: 0; } }
@keyframes cloudMid { 0% { transform: scale(1) translateX(0); }
  70% { opacity: 0.9; } 100% { transform: scale(2.2) translateX(-14%); opacity: 0; } }
@keyframes cloudBack { 0% { transform: scale(1) translateX(0); }
  70% { opacity: 0.8; } 100% { transform: scale(1.6) translateX(12%); opacity: 0; } }
@keyframes splashBrand { 0%, 16% { opacity: 0; transform: scale(0.94) translateY(10px); }
  44% { opacity: 1; transform: scale(1) translateY(0); }
  70% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.07); } }
@keyframes splashSkip { 0%, 30% { opacity: 0; } 45% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 680px) { .splash__layer--front { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash, .splash * { animation: none !important; }
  .splash { display: none; }
}

/* =========================================================================
   Buttons & links
   ========================================================================= */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  line-height: 1; letter-spacing: 0.01em; text-decoration: none;
  padding: 0.82rem 1.4rem; border: 1px solid transparent; border-radius: 100px;
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease,
              border-color 200ms ease, color 200ms ease, box-shadow 240ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--lg { padding: 1rem 1.7rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Flat buttons - solid fills, hairline border, one soft shadow. No glass, blur or sheen. */
.btn--primary { --btn-bg: var(--gold); --btn-fg: var(--ink);
  background: var(--gold); border-color: transparent;
  box-shadow: 0 2px 10px -4px rgba(199, 150, 38, 0.5); }
.btn--ghost { --btn-fg: var(--ink);
  background: var(--paper); border-color: rgba(30, 26, 21, 0.16);
  box-shadow: 0 2px 10px -5px rgba(30, 26, 21, 0.22); }
.btn--dark  { --btn-bg: var(--ink); --btn-fg: var(--paper); }

/* =========================================================================
   Former glossy "glow" pills - now flat.
   .btn--glow = light neutral pill (hero phone); + .btn--glow--gold = solid gold CTA.
   ========================================================================= */
.btn--glow {
  color: var(--ink);
  background: #f1ece2;
  border: 1px solid rgba(30, 26, 21, 0.14);
  box-shadow: 0 2px 10px -5px rgba(30, 26, 21, 0.22);
  transition: background-color 200ms ease, border-color 200ms ease,
              box-shadow 220ms var(--ease-out), transform 200ms var(--ease-out); }
.btn--glow:focus-visible { outline: none; border-color: rgba(30, 26, 21, 0.4); }
.btn--glow:active { transform: scale(0.98); }
.btn--glow.btn--glow--gold {
  color: var(--ink);
  background: var(--gold);
  border-color: transparent;
  box-shadow: 0 2px 10px -4px rgba(199, 150, 38, 0.5); }
@media (hover: hover) and (pointer: fine) {
  .btn--glow:hover { transform: translateY(-2px);
    background: #fff; border-color: rgba(30, 26, 21, 0.2);
    box-shadow: 0 8px 18px -8px rgba(30, 26, 21, 0.3); }
  .btn--glow.btn--glow--gold:hover { transform: translateY(-2px);
    background: var(--honey); border-color: transparent;
    box-shadow: 0 8px 18px -7px rgba(199, 150, 38, 0.6); }
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { transform: translateY(-2px);
    background: var(--honey);
    box-shadow: 0 8px 18px -7px rgba(199, 150, 38, 0.6); }
  .btn--primary:active, .btn--ghost:active { transform: scale(0.97); }
  .btn--ghost:hover { transform: translateY(-2px); background: #fff;
    border-color: rgba(30, 26, 21, 0.22);
    box-shadow: 0 8px 18px -8px rgba(30, 26, 21, 0.3); }
  .btn--dark:hover { background: #2c2720; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.1em;
  font-weight: 600; font-size: 0.92rem; color: var(--bronze);
  text-decoration: none; padding-bottom: 1px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 280ms var(--ease-out);
}
@media (hover: hover) { .link-arrow:hover { background-size: 100% 1.5px; } }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--paper); /* solid fallback for browsers without color-mix (Safari < 16.2) */
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}
.site-header[data-scrolled] {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(30, 26, 21, 0.5);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 76px;
}
/* Header no longer shrinks on scroll - it's the larger size on desktop and the
   compact size below the nav breakpoint, so there's no resize jump on first scroll. */
@media (max-width: 860px) { .site-header__inner { height: 64px; } }

/* Wordmark */
.brand {
  display: inline-flex; align-items: baseline; text-decoration: none;
  font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1;
  font-size: 1.45rem; color: var(--ink); white-space: nowrap;
}
.brand__the { font-size: 0.62em; color: var(--stone-soft); margin-right: 0.28em; font-weight: 400; }
.brand__name { font-weight: 600; }
.brand__dot { color: var(--gold); font-weight: 600; }

/* Logo image lockup (header & footer) */
.brand--logo { line-height: 0; }
.brand-logo {
  height: 36px; width: auto; display: block;
}
.brand-logo--footer { height: 40px; }
@media (max-width: 860px) { .brand-logo { height: 30px; } }
/* Header logo sits on a soft white wash that fades out to the header colour at each
   side - no hard tile edge. */
.site-header .brand--logo {
  align-self: stretch;   /* fill the full header height so the wash spans it, not just the logo */
  display: inline-flex; align-items: center; line-height: 0;
  padding: 0 30px;
  background: linear-gradient(90deg, transparent 0%, #fff 26%, #fff 74%, transparent 100%);
}
@media (max-width: 860px) { .site-header .brand--logo { padding: 0 20px; } }

.primary-nav { display: flex; gap: 1.9rem; }
.primary-nav a {
  position: relative; text-decoration: none; color: var(--stone);
  font-weight: 500; font-size: 0.95rem; padding: 0.4rem 0;
  transition: color 180ms ease;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) {
  .primary-nav a:hover { color: var(--ink); }
  .primary-nav a:hover::after { transform: scaleX(1); }
}

.site-header__actions { display: flex; align-items: center; gap: 1.25rem; }

.phone-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
  transition: color 180ms ease;
}
/* Same gold underline sweep as the primary nav links */
.phone-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.phone-link__dot {
  width: 7px; height: 7px; border-radius: 2px; background: var(--gold);
  flex: none; transform: rotate(45deg);
}
@media (hover: hover) {
  .phone-link:hover { color: var(--ink); }
  .phone-link:hover::after { transform: scaleX(1); }
}
.phone-link--block { padding: 0.5rem 0; }

/* Mobile nav toggle */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.nav-toggle__bar { width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 240ms var(--ease-out), opacity 200ms ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.5rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
/* Respect the hidden attribute (JS toggles it) - a class must not override it */
.mobile-nav[hidden] { display: none; }
/* Never show the mobile drawer on desktop, even if left open during a resize */
@media (min-width: 861px) { .mobile-nav { display: none !important; } }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a {
  text-decoration: none; color: var(--ink); font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 500; padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .phone-link { margin: 1rem 0 0.75rem; font-size: 1rem; }
.mobile-nav .btn { margin-top: 0.25rem; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero-track { position: relative; height: 138vh; }
.hero {
  position: -webkit-sticky; position: sticky; top: 0;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(5rem, 3rem + 5vw, 7rem); padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem);
}
.hero__inner { max-width: 960px; }

/* Scroll-scrubbed cloud video - lives behind the hero only */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; background: var(--b-0) center / cover no-repeat url("../assets/hero-poster.jpg"); }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(250, 248, 242, 0.86) 0%, rgba(250, 248, 242, 0.62) 38%,
    rgba(250, 248, 242, 0.26) 60%, rgba(250, 248, 242, 0) 82%); }
/* Keep hero text readable over the brighter (less-scrimmed) cloud areas */
.hero .trust-row li { color: var(--ink); }
.hero__video-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 24vh; z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(245, 242, 234, 0) 0%, var(--b-1) 90%); }
.hero-track .hero__glow { display: none; } /* the cloud video is the hero visual now */

/* Subtle "scroll" cue pinned to the bottom of the hero; fades away once scrolling starts. */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(2.2rem, 5vh, 4rem);
  transform: translateX(-50%); z-index: 4;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.45rem;
  text-decoration: none; color: var(--stone);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.8; transition: opacity 400ms var(--ease-out), color 200ms ease, transform 400ms var(--ease-out);
}
@media (hover: hover) { .hero__scroll:hover { opacity: 1; color: var(--ink); } }
.hero__scroll-arrow { animation: heroScrollBob 1.9s ease-in-out infinite; }
@keyframes heroScrollBob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(5px); opacity: 1; }
}
.has-scrolled .hero__scroll { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); }
@media (max-width: 620px) { .hero__scroll { display: none; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--stone); text-transform: none;
  margin-bottom: 1.6rem;
}
.eyebrow__node { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg);
  flex: none; }

.hero__heading {
  font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.035em;
  line-height: 1.0; margin-bottom: 1.7rem;
}
.hero__heading span { display: block; }
.hero__accent { position: relative; width: max-content; max-width: 100%; color: var(--ink); }
.hero__underline {
  position: absolute; left: 0; bottom: -0.22em; height: 0.13em; width: 100%;
  background: linear-gradient(90deg, var(--amber), var(--gold), var(--honey), var(--gold), var(--amber));
  background-size: 200% auto; animation: underline-flow 4s linear infinite;
  transform-origin: left; transform: scaleX(0);
  border-radius: 2px; z-index: -1;
}

/* Hero slot-machine word - each option in its own font, flex-centred in a uniform box
   so it sits evenly between "Simply" and "FileMaker solutions" regardless of font metrics */
/* Slot box is kept close to the heading's own line rhythm (~1.16em) so the rotating
   word sits tight against "FileMaker solutions" instead of floating in a tall 1.5em box.
   The word is centred in the box; the small extra height absorbs tall faces (Anton /
   Caveat ascenders & descenders) without clipping. The list step (JS) reads this height,
   so box and word heights must stay equal. */
/* Robustness: the window stays entirely WITHIN its own heading line (no negative margins),
   so block lines can't overlap - during a spin the moving words are clipped at this line's
   own top/bottom edges and never bleed up into "Simply". Measured ink height for every word
   is ≤ 1.0em of the heading, so a 1.3em box clears the tallest glyphs (ascenders +
   descenders) with centring slack and no clipping, while keeping the line tight. */
.hero__slot { --slot-h: 1.3em; display: block; overflow: hidden; height: var(--slot-h); }
.hero__slot-list { display: block; will-change: transform; }
/* Each word keeps a UNIFORM box height (var(--slot-h) of the heading) regardless of its
   own font scale: font-size = 1em × scale and height = --slot-h ÷ scale, so the box
   always equals --slot-h of the heading. That keeps the slot reel stepping by an even
   amount (the JS steps by the box height) so it never jitters as the fonts change size. */
.hero__heading .hero__slot-word { display: flex; align-items: center;
  font-size: calc(1em * var(--hsw-scale, 1)); height: calc(var(--slot-h) / var(--hsw-scale, 1));
  line-height: 1; color: var(--ink); white-space: nowrap; }
.hsw--powerful   { font-family: "Anton", var(--font-sans); font-weight: 400; letter-spacing: 0.008em;
  --hsw-scale: 0.9; }
.hsw--elegant    { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700;
  letter-spacing: -0.015em; }
.hsw--reliable   { font-family: "Roboto Slab", Georgia, serif; font-weight: 700; letter-spacing: -0.025em;
  --hsw-scale: 0.95; }
.hsw--agile      { font-family: "Space Grotesk", var(--font-sans); font-weight: 600; letter-spacing: -0.03em; }
.hsw--bespoke    { font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 400;
  letter-spacing: 0; }
.hsw--effortless { font-family: "Caveat", cursive; font-weight: 700; letter-spacing: 0.005em;
  --hsw-scale: 1.02; }
.hero__accent.is-drawn .hero__underline { transform: scaleX(1); transition: transform 900ms var(--ease-out) 200ms; }

.hero__lede {
  font-size: var(--fs-lede); color: var(--stone); max-width: 40ch; line-height: 1.55;
  margin-bottom: 2.4rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 3rem; }
.hero__actions .phone-link__dot { width: 8px; height: 8px; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.9rem;
  padding-top: 1.7rem; border-top: 1px solid var(--line);
}
.trust-row li {
  position: relative; font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--stone); padding-left: 1.05rem; letter-spacing: -0.01em;
}
.trust-row li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px;
  background: var(--gold); transform: rotate(45deg);
}

/* =========================================================================
   Proof - 30 years
   ========================================================================= */
.proof { position: relative; }
.proof__inner {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
.proof__figure { display: flex; align-items: flex-start; line-height: 0.8; }
.proof__count {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(5.5rem, 3rem + 14vw, 12rem); color: var(--ink);
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: flex-start; will-change: transform;
}
.proof__plus { color: var(--amber); font-size: 0.5em; margin-top: 0.12em; }
.proof__body { max-width: 62ch; margin-top: 3.75rem; }
.proof__lead { font-family: var(--font-display); font-size: calc(var(--fs-h3) + 0.25rem);
  font-weight: 400; line-height: 1.3; color: var(--ink); margin-bottom: 1.6rem; }

.timeline { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.timeline__year { font-family: var(--font-mono); font-size: 0.82rem; color: var(--stone); }
.timeline__track { position: relative; flex: 1; height: 1.5px; background: var(--line);
  border-radius: 2px; }
.timeline__node {
  position: absolute; right: 0; top: 50%; width: 9px; height: 9px;
  background: var(--gold); transform: translateY(-50%) rotate(45deg);
}
.proof__note { font-size: calc(var(--fs-small) + 0.25rem); color: var(--stone-soft); line-height: 1.6; }

/* =========================================================================
   Generic section scaffolding
   ========================================================================= */
.section { padding-block: var(--section-y); position: relative; scroll-margin-top: 5.5rem; }
.section--alt { /* surface now comes from the per-section flow gradients below */ }
.section--dark { color: var(--paper-on-dark); }

/* ---------- Section-to-section colour flow ----------
   Every section fades from the previous boundary into the next, so the page
   reads as one continuous warm wash rather than stacked panels. */
body { background: var(--b-0); }
.hero         { background: linear-gradient(to bottom, var(--b-0), var(--b-1)); }
.proof        { background: linear-gradient(to bottom, var(--b-1), var(--b-2)); }
#services     { background: linear-gradient(to bottom, var(--b-2), var(--b-3));
  /* Tighter top gap between the "30+ years" proof section and "What we do". */
  padding-top: clamp(2rem, 1rem + 2vw, 3.75rem); }
#showcase     { background: linear-gradient(to bottom, var(--b-3), var(--b-4)); }
#integrations { background: var(--b-4); }
#development  { background: linear-gradient(to bottom, var(--b-4), var(--b-5)); /* fallback behind the video */
  position: relative; overflow: clip; }
/* Scroll-scrubbed "flowing software" background video behind Agile Development
   (driven by main.js like the hero - replays in reverse as you scroll back up).
   A warm paper scrim keeps the dark text legible; the top/bottom fades blend the
   edges into the neighbouring backgrounds (integrations b-4 above, licensing b-5
   below), so the section gradients back into the normal wash. */
.dev-vid__video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; background: var(--b-4) center / cover no-repeat url("../assets/dev-poster.jpg"); }
.dev-vid__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(243, 240, 232, 0.78); }
.dev-vid__fade { position: absolute; left: 0; right: 0; z-index: 2;
  height: clamp(6rem, 4rem + 6vw, 10rem); pointer-events: none; }
.dev-vid__fade--top { top: 0; background: linear-gradient(to bottom, var(--b-4), transparent); }
.dev-vid__fade--bottom { bottom: 0; background: linear-gradient(to top, var(--b-5), transparent); }
.dev-vid .shell { position: relative; z-index: 3; }
#licensing    { background: linear-gradient(to bottom, var(--b-5), var(--b-6)); /* now carries the dev->support transition */
  padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); } /* slimmer than a full section */
#support      { background: var(--b-6); } /* flat - holds the wash steady into cloud */
#cloud {
  /* Fade the light->dark (and back) transitions across the FULL section padding
     instead of a hard 84px band, so there's no visible line where the colour
     changes. The dark content still sits entirely on solid charcoal because the
     fades finish exactly at the padding edge, before the first/after the last row. */
  --cloud-pad: clamp(6.5rem, 4rem + 7vw, 12rem);
  padding-block: var(--cloud-pad);
  background: linear-gradient(to bottom,
    var(--b-6) 0,
    var(--charcoal) var(--cloud-pad),
    var(--charcoal) calc(100% - var(--cloud-pad)),
    var(--b-7) 100%);
}
#testimonials { background: transparent; }
#clients      { background: transparent; }
#about        { background: linear-gradient(to bottom, var(--b-8), var(--b-9)); }

/* Second scroll-scrubbed sky video - behind testimonials + clients, subtler than the hero */
.vidsection { position: relative; overflow: clip; }
.vidsection__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; background: var(--b-7) center / cover no-repeat url("../assets/section-poster.jpg"); }
.vidsection__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(243, 240, 232, 0.74); }
.vidsection__fade { position: absolute; left: 0; right: 0; z-index: 2; height: 26vh; pointer-events: none; }
.vidsection__fade--top { top: 0; background: linear-gradient(to bottom, var(--b-7), transparent); }
.vidsection__fade--bottom { bottom: 0; background: linear-gradient(to top, var(--b-8), transparent); }
.vidsection > section { position: relative; z-index: 3; }
.vidsection .glow { display: none; } /* the sky video is the backdrop here now */
#faq          { background: var(--b-9); } /* holds the about->contact wash steady */
#contact      { background: linear-gradient(to bottom, var(--b-9), var(--b-10)); }

/* Sections carrying ambient glows clip only the horizontal axis, so the glows
   bleed vertically across section boundaries and blend instead of cutting a flat line. */
#testimonials, #clients, #about, #contact { overflow-x: clip; }
#testimonials > .shell, #about > .shell, #contact > .shell,
#clients > .shell, #clients > .marquee { position: relative; z-index: 1; }

/* Glow placement variants (decorative yellow bursts) */
.glow--tr { top: -8%; right: -5%; width: min(46vw, 520px); height: min(46vw, 520px);
  background: radial-gradient(circle, var(--honey), rgba(244, 201, 93, 0) 68%); opacity: 0.5; }
.glow--l  { top: 6%; left: -12%; width: min(52vw, 600px); height: min(52vw, 600px);
  background: radial-gradient(circle, var(--gold-pale), rgba(251, 239, 201, 0) 70%); opacity: 0.85; }
.glow--r  { bottom: -6%; right: -8%; width: min(50vw, 560px); height: min(50vw, 560px);
  background: radial-gradient(circle, var(--honey), rgba(244, 201, 93, 0) 70%); opacity: 0.5; }
.glow--c  { top: -12%; left: 14%; width: min(64vw, 720px); height: min(34vw, 360px);
  background: radial-gradient(circle, var(--gold-pale), rgba(251, 239, 201, 0) 72%); opacity: 0.9; }

/* Ambient yellow glows - soft, parallaxed depth (decorative, never interactive) */
.glow { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%;
  filter: blur(50px); opacity: 0.55; will-change: transform; }
.hero { overflow: clip; }
.hero__glow {
  top: -8%; right: -6%; width: min(48vw, 540px); height: min(48vw, 540px);
  background: radial-gradient(circle, var(--honey), rgba(244, 201, 93, 0) 68%);
}
.hero__inner { position: relative; z-index: 3; }

/* Cursor-following ember - warm light that trails the pointer (screen-blended so it
   never darkens text). Disabled on touch and under reduced motion. */
.cursor-ember {
  position: fixed; top: 0; left: 0; width: 180px; height: 180px;
  margin: -90px 0 0 -90px; border-radius: 50%; pointer-events: none; z-index: 150;
  background: radial-gradient(circle,
    rgba(248, 205, 100, 0.38),
    rgba(238, 188, 86, 0.18) 38%,
    rgba(234, 182, 78, 0) 72%);
  opacity: 0; transition: opacity 400ms ease; will-change: transform;
}
.cursor-ember.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cursor-ember { display: none; } }
@media (hover: none), (pointer: coarse) { .cursor-ember { display: none; } }

/* Scroll-progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 200;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--amber), var(--gold) 50%, var(--honey));
}

/* Parallax targets get GPU hints */
[data-parallax] { will-change: transform; }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
/* Contextual "learn more" link beneath a section intro (e.g. Support -> Why FileMaker Support) */
.section-more { margin-top: 1.5rem; }
.section-more a { display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600;
  color: var(--bronze); text-decoration: none; transition: color 180ms ease; }
.section-more a::after { content: "\2192"; transition: transform 200ms var(--ease-out); }
@media (hover: hover) {
  .section-more a:hover { color: var(--ink); }
  .section-more a:hover::after { transform: translateX(4px); }
}
.section-kicker {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  color: var(--bronze); margin-bottom: 1.1rem; letter-spacing: 0.01em;
}
.section-kicker--on-dark { color: var(--gold); }
.kicker-node { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg);
  flex: none; }
.section-title { font-size: var(--fs-h2); max-width: 18ch; }
.section-intro, .section-head .section-intro { font-size: var(--fs-lede); color: var(--stone);
  margin-top: 1.3rem; max-width: 52ch; line-height: 1.55; }

.prose { font-size: var(--fs-body); color: var(--stone); line-height: 1.65; max-width: 46ch;
  margin-bottom: 1.1rem; }
.prose:last-child { margin-bottom: 0; }
.prose--on-dark { color: var(--stone-on-dark); }

/* =========================================================================
   What we do - pillars
   ========================================================================= */
.pillars {
  display: grid; gap: clamp(1.5rem, 0.5rem + 3vw, 2.75rem);
  grid-template-columns: repeat(3, 1fr);
}
.pillar { position: relative; padding: 1.95rem 1.6rem 1.7rem;
  display: flex; flex-direction: column;   /* so the link can sit at a shared baseline */
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 22px 46px -26px rgba(30, 26, 21, 0.42), 0 5px 14px -8px rgba(30, 26, 21, 0.1);
  transform-origin: center center; backface-visibility: hidden;
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out),
              background-color 300ms var(--ease-out), border-color 300ms var(--ease-out); }
/* Subtle "pop toward the viewer" on hover: a uniform scale from the centre, so every edge
   moves outward equally (never up/down/left/right) - the card can't slide out from under the
   cursor, so no bottom-edge flicker. Mirrors the support-tier hover. */
@media (hover: hover) and (pointer: fine) {
  .pillar:hover {
    transform: scale(1.03); border-color: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
                0 36px 64px -28px rgba(30, 26, 21, 0.5), 0 10px 18px -8px rgba(30, 26, 21, 0.16); }
  /* Once revealed, a services pillar rests at translateY(52px) (see the .services reveal rule
     near the bottom of this file). Keep that exact offset and add ONLY the scale, so the card
     grows in place with no vertical jump. If the reveal offset ever changes, match it here. */
  .js .services .pillar.reveal.is-visible:hover { transform: translateY(52px) scale(1.03); }
}
.pillar__rule {
  position: absolute; top: -1px; left: 1.6rem; width: 42px; height: 3px;
  border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--amber), var(--honey));
  transition: width 300ms var(--ease-out);
}
.pillar__icon { display: block; width: 40px; height: 40px; color: var(--bronze);
  margin-bottom: 1.2rem; transform-origin: left center;
  transition: color 300ms var(--ease-out), transform 300ms var(--ease-out); }
.pillar__icon svg { width: 100%; height: 100%; }
.pillar__title { font-size: var(--fs-h3); margin-bottom: 0.7rem; }
.pillar__body { color: var(--stone); line-height: 1.6; margin-bottom: 1.2rem; }
/* Push each pillar's link to the bottom so the three links line up across tiles
   (the grid already stretches the pillars to equal height). */
.pillar .link-arrow { margin-top: auto; align-self: flex-start; }

/* =========================================================================
   Split layout (development, cloud, about)
   ========================================================================= */
.split {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 5vw, 5.5rem); align-items: start;
}
.split__lead { min-width: 0; }
.section-title + .prose { margin-top: 1.5rem; }

/* Benefits */
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem;
  /* Tile treatment (matches the About "Trusted across" card) - lifts the four
     benefits off the section background so the split feels less cramped. */
  padding: clamp(1.75rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius);
  background: #fff; /* solid - the background video must not bleed through; reads as floating */
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 24px 48px -26px rgba(30, 26, 21, 0.4);
  /* Drop the benefits block well below the kicker/heading so the two-column split reads
     balanced (by request - lower than a straight heading-top alignment).
     Reset to 0 at <=980px where the split stacks. */
  margin-top: 5.25rem; }
.benefit { position: relative; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.benefit__node {
  position: absolute; top: -5px; left: 0; width: 9px; height: 9px;
  background: var(--gold); transform: rotate(45deg);
}
.benefit__title { font-size: 1.15rem; font-family: var(--font-display); font-weight: 500;
  margin-bottom: 0.45rem; }
.benefit p { font-size: 0.96rem; color: var(--stone); line-height: 1.55; }

/* =========================================================================
   FileMaker licensing
   ========================================================================= */
.license-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem;
  /* sit near the heading (raised, by request) - leaves a gap below for the
     floating FileMaker logo. Reset to 0 at <=980px where the split stacks. */
  margin-top: 1.75rem; }
.license-point { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.license-point h3 { display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.08rem; margin-bottom: 0.45rem; }
.license-point h3::before { content: ""; flex: none; width: 8px; height: 8px;
  background: var(--gold); transform: rotate(45deg); }
.license-point p { font-size: 0.96rem; color: var(--stone); line-height: 1.55; }

/* Floating FileMaker app icon bridging Licensing and Support: it drops into the
   gap beneath the raised licence points and sits to the right of the Support
   heading. Anchored to the Support shell's right edge, tilted, with a soft
   shadow. (Support follows Licensing in the DOM, so it paints on top cleanly.) */
#support .shell { position: relative; }
.fm-logo-float {
  position: absolute; z-index: 4; right: 7.5rem; top: -2rem;
  width: clamp(153px, 7.5vw + 75px, 215px); height: auto;  /* ~25% larger */
  transform: rotate(-6deg);
  /* No tile - drop-shadow hugs the F's actual shape (transparent PNG), so the
     mark floats freely and stays full quality. */
  filter: drop-shadow(0 14px 14px rgba(30, 26, 21, 0.4)) drop-shadow(0 5px 7px rgba(30, 26, 21, 0.22));
  will-change: transform, filter;
  /* Idle: slow Minecraft-dropped-item bob; the shadow softens as it rises. */
  animation: fmFloatBob 3.8s ease-in-out infinite;
}
@keyframes fmFloatBob {
  0%, 100% { transform: translateY(0) rotate(-6deg);
    filter: drop-shadow(0 14px 14px rgba(30, 26, 21, 0.4)) drop-shadow(0 5px 7px rgba(30, 26, 21, 0.22)); }
  50% { transform: translateY(-12px) rotate(-4.5deg);
    filter: drop-shadow(0 22px 20px rgba(30, 26, 21, 0.3)) drop-shadow(0 9px 12px rgba(30, 26, 21, 0.16)); }
}
/* Entrance (JS pages): hidden until the section scrolls into view (the reveal
   observer adds .is-visible), then it bubble-pops to size - the overshooting
   bezier swells it past full size and snaps it back. main.js adds .is-settled
   when the pop finishes, handing transform control to the idle bob; keeping
   that a separate state means hover jumps can never replay the pop. */
.js .fm-logo-float { animation: none; transform: scale(0) rotate(-6deg); opacity: 0; }
.js .fm-logo-float.is-visible { animation: fmLogoPop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.js .fm-logo-float.is-settled { animation: fmFloatBob 3.8s ease-in-out infinite;
  transform: rotate(-6deg); opacity: 1; }
@keyframes fmLogoPop {
  0%   { transform: scale(0) rotate(-6deg); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1) rotate(-6deg); opacity: 1; }
}
/* Hover (via main.js): one full jump with a 360 spin. Ends at 354deg = the
   -6deg resting tilt, so the hand-off back to the idle bob is seamless.
   (After .is-settled in source order so the jump wins while both are set.) */
.fm-logo-float.is-jumping,
.js .fm-logo-float.is-jumping { animation: fmJumpSpin 950ms both; opacity: 1; }
@keyframes fmJumpSpin {
  0% { transform: translateY(0) rotate(-6deg);
    animation-timing-function: cubic-bezier(0.2, 0.85, 0.35, 1); /* launch: fast out, slow to apex */
    filter: drop-shadow(0 14px 14px rgba(30, 26, 21, 0.4)) drop-shadow(0 5px 7px rgba(30, 26, 21, 0.22)); }
  45% { transform: translateY(-56px) rotate(152deg);
    animation-timing-function: cubic-bezier(0.65, 0, 0.8, 0.35); /* fall: gravity back in */
    filter: drop-shadow(0 44px 34px rgba(30, 26, 21, 0.2)) drop-shadow(0 18px 22px rgba(30, 26, 21, 0.12)); }
  100% { transform: translateY(0) rotate(354deg);
    filter: drop-shadow(0 14px 14px rgba(30, 26, 21, 0.4)) drop-shadow(0 5px 7px rgba(30, 26, 21, 0.22)); }
}
@media (prefers-reduced-motion: reduce) {
  .fm-logo-float, .js .fm-logo-float, .js .fm-logo-float.is-visible,
  .js .fm-logo-float.is-settled, .js .fm-logo-float.is-jumping {
    animation: none; transform: rotate(-6deg); opacity: 1; }
}
@media (max-width: 860px) { .fm-logo-float { width: 140px; top: -1.5rem; right: 1.25rem; } }
@media (max-width: 620px) { .fm-logo-float { width: 84px; top: -2.5rem; right: 0.6rem; } }

/* Platforms */
.platforms { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.platforms__title { font-size: var(--fs-h3); margin-bottom: 1.5rem;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.platforms__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2.5rem; }
.platform__label {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--bronze); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.platform__name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 500; }

/* Process - genuine sequence */
.process {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 0.5rem + 3vw, 2.75rem);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  counter-reset: none;
}
.process__step { position: relative; padding-top: 1.5rem; border-top: 1.5px solid var(--ink); }
/* Process sitting directly under the "One solution" heading line: no big top
   margin and no per-step rule (the heading's underline already separates it). */
.process--flush { margin-top: 1.5rem; }
.process--flush .process__step { border-top: none; padding-top: 0; }
/* FileMaker versions below the process, with the divider rules above each
   (the "lines in the middle", matching the original process-step rule). */
.platforms__grid--lined { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.platforms__grid--lined .platform { padding-top: 1.5rem; border-top: 1.5px solid var(--ink); }
.process__num {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--bronze);
  font-weight: 500; display: block; margin-bottom: 0.8rem;
}
.process__title { font-size: 1.18rem; font-family: var(--font-display); font-weight: 500;
  margin-bottom: 0.5rem; }
.process__step p { font-size: 0.95rem; color: var(--stone); line-height: 1.55; }

/* =========================================================================
   Support tiers
   ========================================================================= */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.tier {
  position: relative; padding: 1.6rem 1.4rem 1.7rem;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 22px 46px -26px rgba(30, 26, 21, 0.4), 0 5px 14px -8px rgba(30, 26, 21, 0.1);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out),
              border-color 300ms ease;
}
/* Snappy transition for both the reveal and hover (otherwise the hover lift inherits
   the slow ~720ms reveal speed). Specificity beats `.js .reveal.is-visible`. */
.js .tiers .tier.reveal.is-visible {
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out),
              box-shadow 360ms var(--ease-out), border-color 360ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  /* Qualify with the reveal classes so the lift isn't swallowed by `transform: none`. */
  /* Scale only (no upward translate) to avoid the bottom-edge hover flicker - see pillars. */
  .tier:hover,
  .js .tiers .tier.reveal.is-visible:hover {
    transform: scale(1.03); border-color: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
                0 36px 64px -28px rgba(30, 26, 21, 0.5), 0 10px 18px -8px rgba(30, 26, 21, 0.16); }
  .tier--featured:hover,
  .js .tiers .tier--featured.reveal.is-visible:hover {
    animation: none;            /* let the hover shadow take over from the pulse */
    border-color: rgba(230, 178, 62, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
                0 38px 66px -26px rgba(199, 150, 38, 0.8), 0 10px 18px -8px rgba(30, 26, 21, 0.18); }
}
.tier--featured { border-color: rgba(230, 178, 62, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 26px 52px -26px rgba(199, 150, 38, 0.7), 0 6px 16px -8px rgba(30, 26, 21, 0.14);
  /* Very faint breathing gold glow to draw the eye to the recommended plan. */
  animation: tier-pulse 4.2s ease-in-out infinite; }
@keyframes tier-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 26px 52px -26px rgba(199, 150, 38, 0.7), 0 6px 16px -8px rgba(30, 26, 21, 0.14),
              0 0 0 0 rgba(230, 178, 62, 0); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
              0 30px 56px -24px rgba(199, 150, 38, 0.82), 0 6px 16px -8px rgba(30, 26, 21, 0.14),
              0 0 20px 1px rgba(230, 178, 62, 0.22); }
}
.tier__flag {
  position: absolute; top: -0.7rem; left: 1.4rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--gold); color: var(--ink); padding: 0.28rem 0.65rem; border-radius: 100px;
}
.tier__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
  margin-bottom: 0.9rem; }
.tier__rate { font-family: var(--font-display); font-size: 2.5rem; font-weight: 500;
  color: var(--ink); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; }
.tier__currency { font-size: 1rem; color: var(--stone); margin-right: 0.15rem;
  font-family: var(--font-mono); }
.tier__unit { font-size: 0.95rem; color: var(--stone); font-family: var(--font-mono);
  margin-left: 0.1rem; }
.tier__discount {
  display: inline-block; margin-top: 0.9rem; font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--bronze); font-weight: 500;
  padding: 0.25rem 0.6rem; background: rgba(230, 178, 62, 0.14); border-radius: 100px;
}
.tier__discount--none { background: transparent; color: var(--stone-soft); padding-left: 0; }
.tier__desc { margin-top: 1.1rem; font-size: 0.92rem; color: var(--stone); line-height: 1.5; }
/* Roll-forward perk on the Bronze/Silver/Gold cards - set off as a small accented note. */
.tier__note { margin-top: 0.85rem; padding-top: 0.75rem; font-size: 0.8rem; line-height: 1.45;
  font-weight: 500; color: var(--bronze); border-top: 1px dashed rgba(138, 106, 30, 0.28); }
.tiers__foot { margin-top: 1.6rem; font-size: var(--fs-small); color: var(--stone-soft);
  font-family: var(--font-mono); }
.tiers__foot a { color: var(--bronze); }

/* =========================================================================
   Cloud (dark)
   ========================================================================= */
.section--dark .split__lead .section-title { color: var(--paper-on-dark); }
.attrs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.8rem 0 1.6rem; }
.attrs li {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--paper-on-dark);
  padding: 0.42rem 0.85rem; border: 1px solid var(--line-dark); border-radius: 100px;
}
.certs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line-dark); }
.cert { position: relative; font-family: var(--font-mono); font-size: 0.76rem;
  color: var(--gold); padding-left: 1rem; }
.cert::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 5px; height: 5px;
  background: var(--gold); transform: rotate(45deg); }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.plan {
  padding: 1.4rem; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 48px -28px rgba(0, 0, 0, 0.55);
  transition: transform 300ms var(--ease-out), border-color 300ms ease, background-color 300ms ease,
              box-shadow 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-4px); border-color: rgba(230, 178, 62, 0.5);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 56px -26px rgba(0, 0, 0, 0.6); }
}
.plan__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
  color: var(--paper-on-dark); margin-bottom: 0.6rem; }
.plan__price { font-family: var(--font-display); font-size: 1.85rem; font-weight: 500;
  color: #fff; line-height: 1; display: flex; align-items: baseline;
  font-variant-numeric: tabular-nums; margin-bottom: 1.1rem; }
.plan__currency { font-size: 0.85rem; color: var(--gold); font-family: var(--font-mono);
  margin-right: 0.1rem; }
.plan__unit { font-size: 0.8rem; color: var(--stone-on-dark); font-family: var(--font-mono); }
.plan__price--quote { font-size: 1.25rem; color: var(--gold); }
.plan__specs { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.plan__specs div { display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--line-dark); }
.plan__specs div:last-child { border-bottom: 0; padding-bottom: 0; }
.plan__specs dt { font-size: 0.78rem; color: var(--stone-on-dark); font-family: var(--font-mono); }
.plan__specs dd { margin: 0; font-size: 0.85rem; color: var(--paper-on-dark);
  font-family: var(--font-mono); font-weight: 500; }
.plan--quote { display: flex; flex-direction: column; }
.plan__quote-desc { font-size: 0.86rem; color: var(--stone-on-dark); line-height: 1.5; }
/* (The old .cloud__cta / .cloud__foot block is gone - the "Message us" button
   now lives on the right of the .cloud-trust attributes row.) */

/* ---------- Support: "Call us" CTA ---------- */
.tiers__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem 1.2rem;
  margin-top: 1.9rem; }
.tiers__cta-text { margin: 0; font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); font-weight: 500; color: var(--ink); }

/* =========================================================================
   Cloud comparison table (VM specs) - dark section
   ========================================================================= */
.cloud__head { max-width: 640px; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
.section--dark .cloud__head .section-intro { color: var(--stone-on-dark); }

/* Cloud intro: AWS copy on the left, the hosting image on the right. */
.cloud__intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
  align-items: center; gap: clamp(1.5rem, 0.5rem + 3.5vw, 4rem);
  margin-bottom: clamp(2.4rem, 1.6rem + 2.5vw, 3.8rem); }
.cloud__intro .cloud__head { margin-bottom: 0; max-width: 540px; }
.cloud__media { margin: 0; }
.cloud__media img { display: block; width: 100%; height: auto; border-radius: 18px;
  /* Feather all four edges (intersect of a horizontal + vertical fade) so the photo
     melts into the dark section on every side - no hard rectangle. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 11%, #000 89%, transparent),
    linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 11%, #000 89%, transparent),
    linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect; }
@media (max-width: 860px) {
  .cloud__intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .cloud__media { max-width: 440px; margin-inline: auto; }
}

.cloud-compare { margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.cloud-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; border-radius: var(--radius); }
.cloud-compare__scroll::-webkit-scrollbar { display: none; }

.cc { min-width: 680px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius);
  overflow: hidden; background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 48px -28px rgba(0, 0, 0, 0.55); }
.cc__row { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr; align-items: stretch; }
.cc__row + .cc__row { border-top: 1px solid rgba(255, 255, 255, 0.09); }
.cc__cell { display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0.95rem 1rem; font-family: var(--font-mono); font-size: 0.86rem; color: var(--paper-on-dark);
  transition: background-color 200ms ease; }
.cc__rowhead { justify-content: flex-start; text-align: left; gap: 0.4rem; flex-wrap: wrap;
  font-family: var(--font-body); font-weight: 500; font-size: 0.92rem; color: var(--stone-on-dark); }
.cc__rowhead small { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.75; }

.cc__row--head .cc__cell { padding-block: 1.15rem; }
.cc__colhead { flex-direction: column; gap: 0.4rem; font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 600; color: #fff; }
.cc__tag { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink); background: var(--gold); border-radius: 100px;
  padding: 0.18rem 0.55rem; }

/* Featured (Standard) column highlight */
.cc__colhead--featured { background: rgba(230, 178, 62, 0.18); }
.cc__cell--featured { background: rgba(230, 178, 62, 0.08); color: #fff; font-weight: 600; }
.cc__colhead--featured, .cc__cell--featured {
  box-shadow: inset 1px 0 0 rgba(230, 178, 62, 0.32), inset -1px 0 0 rgba(230, 178, 62, 0.32); }
@media (hover: hover) and (pointer: fine) {
  .cc__row:not(.cc__row--head):hover .cc__cell { background: rgba(255, 255, 255, 0.06); }
  .cc__row:not(.cc__row--head):hover .cc__cell--featured { background: rgba(230, 178, 62, 0.15); }
}

/* Staggered build-in, driven by the existing reveal observer (parent gets .is-visible) */
.js .cc__row { opacity: 0; transform: translateY(12px); }
.js .cloud-compare.is-visible .cc__row { opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.cloud-compare.is-visible .cc__row:nth-child(1) { transition-delay: 0ms; }
.cloud-compare.is-visible .cc__row:nth-child(2) { transition-delay: 90ms; }
.cloud-compare.is-visible .cc__row:nth-child(3) { transition-delay: 170ms; }
.cloud-compare.is-visible .cc__row:nth-child(4) { transition-delay: 250ms; }
.cloud-compare.is-visible .cc__row:nth-child(5) { transition-delay: 330ms; }

/* "Every plan includes" */
.cloud-included { margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.4rem); }
.cloud-included__label { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold); margin-bottom: 1rem; }
.cloud-included__list { display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; }
.cloud-included__list li { display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.92rem; color: var(--paper-on-dark); }
.cloud-included__list li::before { content: ""; width: 19px; height: 19px; flex: none; border-radius: 50%;
  background-color: rgba(230, 178, 62, 0.16); background-repeat: no-repeat; background-position: center;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6B23E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.js .cloud-included.reveal .cloud-included__list li { opacity: 0; transform: translateY(8px); }
.js .cloud-included.is-visible .cloud-included__list li { opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.cloud-included.is-visible .cloud-included__list li:nth-child(1) { transition-delay: 40ms; }
.cloud-included.is-visible .cloud-included__list li:nth-child(2) { transition-delay: 100ms; }
.cloud-included.is-visible .cloud-included__list li:nth-child(3) { transition-delay: 160ms; }
.cloud-included.is-visible .cloud-included__list li:nth-child(4) { transition-delay: 220ms; }
.cloud-included.is-visible .cloud-included__list li:nth-child(5) { transition-delay: 280ms; }
.cloud-included.is-visible .cloud-included__list li:nth-child(6) { transition-delay: 340ms; }
.cloud-included.is-visible .cloud-included__list li:nth-child(7) { transition-delay: 400ms; }

/* Cloud trust row (attrs + certs) */
.cloud-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark); }
.cloud-trust .attrs { margin: 0; }
.cloud-trust .certs { padding-top: 0; border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .cc__row, .js .cloud-included.reveal .cloud-included__list li {
    opacity: 1 !important; transform: none !important;
  }
}

/* =========================================================================
   Testimonials
   ========================================================================= */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 0.5rem + 3vw, 2.75rem); }
.quote { display: flex; flex-direction: column; gap: 1.4rem; }
.quote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem); line-height: 1.45; color: var(--ink);
  letter-spacing: -0.01em; position: relative; padding-top: 1.6rem;
}
.quote blockquote::before {
  content: "“"; position: absolute; top: -0.35em; left: -0.04em;
  font-family: var(--font-display); font-size: 2.6rem; color: var(--gold); line-height: 1;
}
.quote figcaption { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; }
.quote__name { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.quote figcaption::before { content: ""; width: 1.6rem; height: 1.5px; background: var(--gold);
  flex: none; }
.quotes__note { margin-top: 2rem; font-size: var(--fs-small); color: var(--stone-soft);
  font-family: var(--font-mono); }

/* ---------- Reviews carousel ----------
   Auto-advancing, native scroll-snap (so touch devices get real swipe), with
   arrow + dot controls. Pages are CSS-sized (3 / 2 / 1 per view); the JS just
   scrolls by a viewport and tracks the active page. */
.reviews { position: relative; }
.reviews:focus-visible { outline: 2.5px solid var(--bronze); outline-offset: 8px; border-radius: 10px; }
/* Inset the whole carousel so the edge tiles sit off the section border (breathing room),
   while the track itself stays full-bleed so the flush-boundary scroll math is untouched. */
.reviews__viewport { overflow: hidden; margin-inline: clamp(0.5rem, 1.6vw, 1.4rem); }
.reviews__track {
  --rev-gap: 1.25rem;
  display: flex; gap: var(--rev-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 0.5rem 0;
}
.reviews__track::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 calc((100% - 2 * var(--rev-gap)) / 3); /* 3 per view (desktop) */
  scroll-snap-align: start;
}
.review-card figure {
  display: flex; flex-direction: column; height: 100%; margin: 0;
  padding: 1.9rem 1.7rem 1.7rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.review-card blockquote {
  margin: 0 0 1.4rem; position: relative; padding-top: 1.5rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.02rem, 0.96rem + 0.32vw, 1.16rem); line-height: 1.5; color: var(--ink);
  letter-spacing: -0.01em;
}
.review-card blockquote::before {
  content: "\201C"; position: absolute; top: -0.18em; left: -0.04em;
  font-family: var(--font-display); font-size: 2.4rem; color: var(--gold); line-height: 1;
}
.review-card figcaption { display: flex; flex-direction: column; gap: 0.2rem; margin-top: auto; }
.review-card figcaption::before { content: ""; width: 1.6rem; height: 1.5px; background: var(--gold);
  margin-bottom: 0.85rem; }
.review-card__name { font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.review-card__meta { font-size: 0.85rem; color: var(--stone); line-height: 1.35; }

.reviews__controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  margin-top: 1.5rem; }
.reviews__btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(30, 26, 21, 0.16);
  box-shadow: 0 2px 10px -5px rgba(30, 26, 21, 0.22);
  transition: transform 160ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease;
}
.reviews__btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .reviews__btn:hover { transform: translateY(-1px) scale(1.06); border-color: rgba(30, 26, 21, 0.22);
    background: #fff;
    box-shadow: 0 8px 18px -8px rgba(30, 26, 21, 0.3); }
}
.reviews__dots { display: flex; align-items: center; gap: 0.55rem; }
.reviews__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(30, 26, 21, 0.18);
  transition: background-color 200ms ease, transform 200ms ease; }
.reviews__dot.is-active { background: var(--gold); transform: scale(1.3); }
@media (hover: hover) { .reviews__dot:hover { background: var(--amber); } }

@media (max-width: 860px) {
  .review-card { flex-basis: calc((100% - var(--rev-gap)) / 2); } /* 2 per view */
}
@media (max-width: 560px) {
  .reviews__track { --rev-gap: 1rem; }
  .review-card { flex-basis: 100%; }                              /* 1 per view */
}
@media (prefers-reduced-motion: reduce) {
  .reviews__track { scroll-behavior: auto; }
}

/* =========================================================================
   About
   ========================================================================= */
.split--about { grid-template-columns: 1.15fr 0.85fr; }
/* Sign-off: a divider line, then Ian's quote, then the director credit. */
.about__signoff { margin: 2.2rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.about__quote {
  margin: 0 0 1.3rem; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem); line-height: 1.55; color: var(--ink);
  letter-spacing: 0.005em;
}
.director { display: flex; align-items: center; gap: 1rem; }
.director__mark {
  width: 52px; height: 52px; flex: none; display: block;
  border-radius: 50%; object-fit: cover; background: #6b6b6b;   /* favicon avatar (matches the tile) */
}
.director__name { font-weight: 600; font-size: 1.05rem; }
.director__role { font-size: 0.9rem; color: var(--stone); }

.industries { padding: clamp(1.75rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 24px 48px -26px rgba(30, 26, 21, 0.4);
  /* Drop the tile well below the "Supporting Australian business..." heading for a more
     balanced split (by request - lower than a straight heading-top alignment).
     Reset to 0 at <=980px where the split stacks. */
  margin-top: 5.25rem; }
.section--alt .industries { background: rgba(255, 255, 255, 0.72); }
.industries__title { font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--bronze); margin-bottom: 1.4rem; }
.industries__list { display: flex; flex-direction: column; gap: 0.95rem; }
.industries__list li { display: flex; align-items: center; gap: 0.75rem; font-size: 1.05rem;
  font-weight: 500; color: var(--ink); }
.industries__node { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg);
  flex: none; }
.industries__line { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-weight: 500; letter-spacing: 0.02em; color: var(--stone); font-size: 1.05rem; }

/* =========================================================================
   FAQ (native <details> accordion - works without JS)
   ========================================================================= */
.faq__list { max-width: 800px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0.15rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; color: var(--ink);
  -webkit-user-select: none; user-select: none; transition: color 180ms ease; }
.faq__q::-webkit-details-marker { display: none; } /* Safari's default disclosure triangle */
.faq__q::after { content: "+"; flex: none; display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem; color: var(--bronze); font-size: 1.4rem; line-height: 1;
  transition: transform 240ms var(--ease-out); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); } /* + becomes x */
@media (hover: hover) { .faq__q:hover { color: var(--bronze); } }
.faq__a { padding: 0 2.6rem 1.35rem 0.15rem; color: var(--stone); line-height: 1.65;
  max-width: 68ch; }
.faq__a a { color: var(--bronze); }
.faq__item[open] .faq__a { animation: faqIn 260ms var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq__item[open] .faq__a { animation: none; } }
/* While main.js (10c) animates an item open/closed, its height is eased and the
   overflowing answer clipped - so the page below glides instead of jumping. */
.faq__item.is-animating { overflow: hidden; transition: height 320ms var(--ease-out); }

/* =========================================================================
   Contact
   ========================================================================= */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 5vw, 5rem); align-items: start; }
.contact__details { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.contact__details li { display: flex; align-items: baseline; gap: 1.2rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.contact__label { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--stone-soft); width: 4rem; flex: none; }
.contact__value { font-size: 1.1rem; font-weight: 500; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); }
a.contact__value { transition: color 180ms ease; }
@media (hover: hover) { a.contact__value:hover { color: var(--bronze); } }

.contact-form { border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 28px 56px -28px rgba(30, 26, 21, 0.42); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink);
  margin-bottom: 0.45rem; }
.field__opt { font-weight: 400; color: var(--stone-soft); }
.field input, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.78rem 0.9rem; line-height: 1.4;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(230, 178, 62, 0.22);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #b4452f; box-shadow: 0 0 0 3px rgba(180, 69, 47, 0.16);
}
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.h-captcha { margin: 0.4rem 0 0.2rem; min-height: 78px; } /* reserve widget height to avoid layout shift */
.contact-form .btn { margin-top: 0.5rem; }
.contact-form__note { margin-top: 0.85rem; font-size: 0.85rem; color: var(--stone-soft);
  line-height: 1.5; text-align: center; }
.form-status { margin-top: 0.9rem; font-size: 0.88rem; min-height: 1.2em; line-height: 1.4; }
.form-status[data-state="error"] { color: #b4452f; }
.form-status[data-state="success"] { color: var(--bronze); font-weight: 600; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--ink); color: var(--paper-on-dark);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) 2.5rem; }
.footer__top { display: grid; grid-template-columns: 1.2fr 1.8fr; gap: 2.5rem 4rem;
  padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark); }
.brand--footer { color: var(--paper-on-dark); font-size: 1.5rem; }
.brand--footer .brand__the { color: var(--stone-on-dark); }
.footer__pitch { margin-top: 1.1rem; color: var(--stone-on-dark); max-width: 32ch;
  line-height: 1.6; font-size: 0.96rem; }
.footer__strap { margin-top: 1.1rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--gold); font-size: 1rem; }
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer__col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col h3 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold); font-weight: 500; margin-bottom: 0.4rem; }
.footer__col a { text-decoration: none; color: var(--stone-on-dark); font-size: 0.95rem;
  width: max-content; transition: color 180ms ease; }
@media (hover: hover) { .footer__col a:hover { color: var(--paper-on-dark); } }


.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 1rem; padding-top: 2rem; }
.footer__copy { font-family: var(--font-mono); font-size: 0.78rem; color: var(--stone-on-dark); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer__legal-links a { text-decoration: none; color: var(--stone-on-dark); font-size: 0.8rem;
  transition: color 180ms ease; }
@media (hover: hover) { .footer__legal-links a:hover { color: var(--gold); } }
.footer__credit { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.74rem;
  color: var(--stone-on-dark); opacity: 0.7; letter-spacing: 0.01em; }

/* =========================================================================
   Showcase - semi-functional FileMaker dashboard
   ========================================================================= */
.demo { overflow-x: clip; }
.demo__glow { right: 4%; top: 4%; width: min(64vw, 760px); height: min(46vw, 520px);
  background: radial-gradient(circle, var(--gold-pale), rgba(251, 239, 201, 0) 70%); opacity: 0.8; }

.demo-app {
  position: relative; z-index: 1; margin-top: clamp(2rem, 1rem + 2vw, 3rem);
  background: #FCFBF8; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden;
  box-shadow: 0 34px 70px -34px rgba(30, 26, 21, 0.38), 0 10px 24px -16px rgba(30, 26, 21, 0.22);
}

/* Window chrome */
.demo-app__bar { display: flex; align-items: center; gap: 0.9rem; height: 46px;
  padding: 0 1rem; background: linear-gradient(#F6F2E9, #F1ECE1); border-bottom: 1px solid var(--line); }
.demo-lights { display: inline-flex; gap: 6px; flex: none; }
.demo-lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.demo-lights i:nth-child(1) { background: #ED6A5E; }
.demo-lights i:nth-child(2) { background: #F4BF4F; }
.demo-lights i:nth-child(3) { background: #61C554; }
.demo-app__file { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--stone); }
.demo-app__search { flex: none; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--stone-soft);
  border: 1px solid var(--line); border-radius: 100px; padding: 0.25rem 0.7rem; background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease; }
.demo-app__search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(230, 178, 62, 0.18); }
.demo-app__search input { border: 0; outline: none; background: transparent; font: inherit;
  color: var(--ink); width: 70px; padding: 0; }
.demo-app__search input::placeholder { color: var(--stone-soft); }
.demo-app__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.demo-app__body { display: flex; min-height: 480px; }

/* Sidebar */
.demo-side { width: 210px; flex: none; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1rem 0.8rem; background: linear-gradient(#F7F3EA, #F2EEE3); border-right: 1px solid var(--line); }
.demo-side__label { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--stone-soft); padding: 0 0.6rem; margin-bottom: 0.6rem; }
.demo-nav { position: relative; display: flex; align-items: center; gap: 0.6rem; width: 100%;
  text-align: left; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 0.92rem; font-weight: 500; color: var(--stone); padding: 0.55rem 0.6rem;
  border-radius: 8px; transition: background-color 160ms ease, color 160ms ease; }
.demo-nav svg { color: var(--stone-soft); flex: none; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .demo-nav:hover { background: rgba(30, 26, 21, 0.045); color: var(--ink); }
}
.demo-nav.is-active { background: var(--gold-pale); color: var(--ink); }
.demo-nav.is-active svg { color: var(--amber); }
.demo-nav.is-active::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.demo-nav__count { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--stone-soft); background: rgba(30, 26, 21, 0.05); border-radius: 100px;
  padding: 0.05rem 0.5rem; }
.demo-nav.is-active .demo-nav__count { background: rgba(207, 134, 41, 0.16); color: var(--bronze); }
.demo-side__hint { margin-top: auto; display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--stone-soft); padding: 0.6rem; }
.demo-side__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(230, 178, 62, 0.2); flex: none; }

/* Main panel */
.demo-main { flex: 1; min-width: 0; padding: clamp(1.1rem, 0.6rem + 1.5vw, 1.8rem); background: #FCFBF8; }
.demo-view { display: none; }
.demo-view.is-active { display: block; animation: demoFade 360ms var(--ease-out); }
@keyframes demoFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.demo-view__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.demo-view__title { font-size: 1.15rem; font-weight: 600; }
.demo-chip { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--stone);
  border: 1px solid var(--line); border-radius: 100px; padding: 0.2rem 0.6rem; }
.demo-chip--accent { color: var(--bronze); border-color: rgba(207, 134, 41, 0.32);
  background: rgba(230, 178, 62, 0.1); }

/* Stat tiles */
.demo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 0.8rem; }
.demo-stat { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 22px -14px rgba(30, 26, 21, 0.18); }
.demo-stat__label { display: block; font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--stone-soft); margin-bottom: 0.5rem; }
.demo-stat__num { display: block; font-size: 1.55rem; font-weight: 600; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.demo-stat__trend { display: inline-block; margin-top: 0.55rem; font-family: var(--font-mono);
  font-size: 0.68rem; color: var(--stone-soft); }
.demo-stat__trend.up { color: #2C7D50; }

/* Cards + chart */
.demo-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.8rem; }
.demo-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 1rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 26px -16px rgba(30, 26, 21, 0.18); }
.demo-card__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.demo-card__head h4 { font-size: 0.92rem; font-weight: 600; }
.demo-card__sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--stone-soft); }
.demo-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 150px; }
.demo-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.demo-bar i { display: block; width: 100%; border-radius: 5px 5px 0 0; transform: scaleY(0);
  transform-origin: bottom; transition: transform 760ms var(--ease-out); }
/* A range of yellows across the bars */
.demo-bar:nth-child(odd) i  { background: linear-gradient(to top, var(--gold), var(--honey)); }
.demo-bar:nth-child(even) i { background: linear-gradient(to top, var(--amber), var(--gold)); }
.demo-bar:nth-child(6) i    { background: linear-gradient(to top, var(--amber), var(--honey)); }
.demo-chart.is-charted .demo-bar i { transform: scaleY(1); }
.demo-chart.is-charted .demo-bar:nth-child(1) i { transition-delay: 0ms; }
.demo-chart.is-charted .demo-bar:nth-child(2) i { transition-delay: 60ms; }
.demo-chart.is-charted .demo-bar:nth-child(3) i { transition-delay: 120ms; }
.demo-chart.is-charted .demo-bar:nth-child(4) i { transition-delay: 180ms; }
.demo-chart.is-charted .demo-bar:nth-child(5) i { transition-delay: 240ms; }
.demo-chart.is-charted .demo-bar:nth-child(6) i { transition-delay: 300ms; }
.demo-chart.is-charted .demo-bar:nth-child(7) i { transition-delay: 360ms; }

/* Recent list */
.demo-recent { display: flex; flex-direction: column; }
.demo-recent li { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.demo-recent li:last-child { border-bottom: 0; }
.demo-recent__name { color: var(--ink); }

/* Status pills - colour + text + dot (never colour alone) */
.status { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500; padding: 0.2rem 0.55rem; border-radius: 100px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--progress  { background: rgba(230, 178, 62, 0.2); color: #795A14; }
.status--scheduled { background: rgba(92, 86, 73, 0.1);   color: var(--stone); }
.status--overdue   { background: #FBE6E0; color: #9B3320; }
.status--paid      { background: #E2F0E6; color: #246B45; }
.status--sent      { background: rgba(70, 110, 160, 0.12); color: #3C5C82; }

/* Segmented filter + action */
.demo-seg { display: inline-flex; gap: 2px; background: rgba(30, 26, 21, 0.05); border-radius: 100px; padding: 3px; }
.demo-seg button { border: 0; background: transparent; cursor: pointer; font-family: var(--font-mono);
  font-size: 0.74rem; color: var(--stone); padding: 0.32rem 0.7rem; border-radius: 100px;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.demo-seg button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(30, 26, 21, 0.12); }
.demo-action { margin-left: auto; border: 1px solid var(--line-2); background: #fff; cursor: pointer;
  font-family: inherit; font-size: 0.8rem; font-weight: 500; color: var(--ink);
  padding: 0.4rem 0.8rem; border-radius: 8px;
  transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.demo-action:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .demo-action:hover { border-color: var(--gold); } }

/* Tables */
.demo-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.9rem; align-items: start; }
.demo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.demo-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 380px;
  font-variant-numeric: tabular-nums; }
.demo-table th { text-align: left; font-family: var(--font-mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone-soft); font-weight: 500;
  padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line-2); }
.demo-table td { padding: 0.62rem 0.7rem; border-bottom: 1px solid var(--line); color: var(--ink);
  white-space: nowrap; }
.demo-table tbody tr { cursor: pointer; transition: background-color 140ms ease; }
@media (hover: hover) and (pointer: fine) { .demo-table tbody tr:hover { background: rgba(230, 178, 62, 0.07); } }
.demo-table tbody tr.is-selected { background: var(--gold-pale); box-shadow: inset 3px 0 0 var(--gold); }
.demo-table tbody tr:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }

/* Detail panel */
.demo-detail { border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(#F8F4EB, #F3EFE5); padding: 1.1rem; min-height: 210px; }
.demo-detail__empty { font-size: 0.86rem; color: var(--stone-soft); }
.demo-detail__eyebrow { font-family: var(--font-mono); font-size: 0.68rem; color: var(--stone-soft);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; }
.demo-detail__title { font-size: 1.05rem; font-weight: 600; line-height: 1.2; margin-bottom: 0.7rem; }
.demo-detail .status { margin-bottom: 1rem; }
.demo-detail__fields { display: flex; flex-direction: column; gap: 0; margin: 0 0 1.1rem; }
.demo-detail__fields div { display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.82rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--line-2); }
.demo-detail__fields dt { color: var(--stone); }
.demo-detail__fields dd { margin: 0; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-progress__label { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: 0.72rem; color: var(--stone); margin-bottom: 0.4rem; }
.demo-progress__label b { color: var(--bronze); font-weight: 600; }
.demo-progress__track { display: block; height: 7px; border-radius: 100px;
  background: rgba(30, 26, 21, 0.08); overflow: hidden; }
.demo-progress__fill { display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--amber), var(--gold), var(--honey)); transition: width 600ms var(--ease-out); }
.demo-note { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--bronze); }
.demo-note[hidden] { display: none; }

/* In phone mode (≤860 - see the iPhone frame below) the dashboard uses its compact
   single-column layout, since the phone screen is ~360px wide whatever the viewport. */
@media (max-width: 860px) {
  .demo-grid, .demo-split { grid-template-columns: 1fr; }
  .demo-stats { grid-template-columns: 1fr 1fr; }
  .demo-action { margin-left: 0; }
}
@media (max-width: 860px) {
  .demo-app__body { flex-direction: column; }
  .demo-side { width: auto; flex-direction: row; overflow-x: auto; gap: 0.3rem;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 0.6rem; }
  .demo-side__label, .demo-side__hint { display: none; }
  .demo-nav { white-space: nowrap; }
  .demo-nav.is-active::before { display: none; }
  .demo-nav__count { display: none; }
}

/* =========================================================================
   MacBook frame - the dashboard sits in a laptop that reclines upright and
   zooms in as it scrolls into view (driven by JS; static under reduced motion)
   ========================================================================= */
.macbook-stage { margin-top: clamp(2rem, 1rem + 2vw, 3.5rem); }
/* Cap the laptop width so it holds a fixed ~16:10 screen ratio instead of stretching
   wider (and jittering) as the viewport grows. Mobile overrides this to a phone width. */
.macbook { position: relative; max-width: 900px; margin-inline: auto; }
/* Static open lid (no animation) */
.macbook__lid { position: relative; border-radius: 22px 22px 8px 8px; }
.macbook__screen {
  position: relative;
  background: #161617; border-radius: 22px 22px 8px 8px;
  padding: 13px; border: 1px solid #313133;
  box-shadow: inset 0 0 0 2px #0c0c0d, 0 50px 90px -38px rgba(30, 26, 21, 0.6);
}
.macbook__camera { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #2d2d30;
  box-shadow: inset 0 0 0 1.5px #161617; }
.macbook__viewport { position: relative; border-radius: 8px; overflow: hidden; background: #000; }

/* App fills the screen - drop its own window framing inside the laptop */
.macbook .demo-app { margin: 0; border: 0; border-radius: 0; box-shadow: none; }

/* The aluminium deck (keyboard base), a touch wider than the lid, with a hinge notch */
.macbook__deck { position: relative; width: 117%; margin: 0 -8.5%; height: 15px;
  background: linear-gradient(180deg, #d9dadc, #b4b5b8 52%, #95969a);
  border-radius: 1px 1px 11px 11px; box-shadow: 0 16px 26px -16px rgba(30, 26, 21, 0.5); }
.macbook__deck::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(#84858a, #c2c3c5); }
.macbook__deck::after { content: ""; position: absolute; bottom: -3px; left: 40%; right: 40%;
  height: 3px; background: #cdced0; border-radius: 0 0 4px 4px; }
.macbook__hinge { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 15%; height: 7px; background: #9b9c9f; border-radius: 0 0 8px 8px; }

/* Fixed-size screen on desktop so switching layouts / selecting rows never resizes the
   laptop - content scrolls inside instead of changing the laptop's shape. */
/* MacBook keeps its fixed screen height only on desktop (>860). */
@media (min-width: 861px) {
  .macbook .demo-app__body { height: 470px; }
  .macbook .demo-main { overflow-y: auto; }
}

/* ≤860: the device becomes an iPhone - the SAME interactive dashboard inside, so all
   functionality (layout switching, find, row selection) is preserved. */
@media (max-width: 860px) {
  .macbook { width: 100%; max-width: 384px; margin-inline: auto; }
  .macbook__deck { display: none; }                  /* phones have no keyboard base */
  .macbook__lid { border-radius: 54px; }
  .macbook__screen {
    border-radius: 54px; padding: 40px 12px 30px;    /* black forehead + chin bezel */
    background: #0a0a0b; border: 1px solid #2a2a2c;
    box-shadow: inset 0 0 0 2px #000, 0 40px 70px -34px rgba(30, 26, 21, 0.6);
  }
  .macbook__camera {                                  /* repurposed as the dynamic island */
    top: 15px; width: 88px; height: 24px; border-radius: 14px;
    background: #000; box-shadow: inset 0 0 0 1px #1c1c1e; z-index: 3;
  }
  .macbook__screen::after {                           /* home indicator */
    content: ""; position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%);
    width: 36%; height: 5px; border-radius: 100px; background: rgba(255, 255, 255, 0.55); z-index: 3;
  }
  .macbook__viewport { border-radius: 30px; }
  .macbook .demo-app__body { height: 540px; }
  .macbook .demo-main { overflow-y: auto; }
}

/* =========================================================================
   Client carousel
   ========================================================================= */
.clients { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.clients__head { text-align: center; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section-kicker--center { justify-content: center; }
.clients__title { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); font-weight: 600;
  max-width: 52ch; margin: 0 auto; color: var(--ink); }

.marquee { overflow: hidden;
  /* Match the rest of the site's content width (the .shell) instead of full-bleed. */
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--shell) - 2 * var(--gutter));
  margin-inline: auto;
  /* Generous edge fade so logos dissolve before the hard clip, not a sharp cutoff. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); }
.marquee + .marquee { margin-top: 1.1rem; }
/* Spacing lives on each item (trailing margin), NOT on a flex `gap`. With `gap`, the
   seam between the two duplicated copies carries an extra half-gap, so translateX(-50%)
   doesn't land on an exact period - the loop drifts and momentarily bares a void on the
   right. Per-item margin makes the doubled track exactly periodic, so -50% is seamless. */
.marquee__track { display: inline-flex; align-items: center;
  width: max-content; padding-block: 0.7rem; will-change: transform; }
.marquee.is-animated .marquee__track { animation: marquee 42s linear infinite; }
.marquee--reverse.is-animated .marquee__track { animation-duration: 52s; animation-direction: reverse; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }

/* Uniform white chips normalise the mixed real-world logos (transparent PNGs,
   white-background JPGs, full-colour marks) into one clean, legible row over the
   sky video. Chip width follows each logo's natural aspect; padding keeps it even. */
/* Uniform white chips normalise the mixed logo backgrounds into one clean row. */
.logo-item { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: clamp(64px, 56px + 1.4vw, 84px);
  padding-inline: clamp(0.95rem, 0.65rem + 0.9vw, 1.45rem);
  margin-right: clamp(0.9rem, 0.55rem + 1.3vw, 1.7rem);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(28, 38, 58, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 20px -14px rgba(28, 38, 58, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  opacity: 0.97;
  transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease; }
.logo-item__img { display: block;
  height: clamp(46px, 38px + 1.5vw, 62px);
  width: auto; min-width: 52px; max-width: clamp(150px, 100px + 9vw, 245px);
  object-fit: contain;
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
@media (hover: hover) {
  .logo-item:hover { transform: translateY(-3px) scale(1.1); opacity: 1; z-index: 2;
    box-shadow: 0 16px 30px -16px rgba(28, 38, 58, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
}

/* Hover-hold tooltip - rendered on <body> at fixed position so the marquee's
   overflow:hidden / mask can't clip it. Shown/placed by JS over the hovered chip. */
.logo-tip { position: fixed; z-index: 200; left: 0; top: 0; pointer-events: none;
  padding: 0.4rem 0.7rem; border-radius: 9px;
  background: rgba(22, 28, 42, 0.94); color: #fff;
  font-size: 0.8rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15;
  white-space: nowrap; max-width: min(70vw, 26rem); text-overflow: ellipsis; overflow: hidden;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  opacity: 0; transform: translate(-50%, calc(-100% - 2px));
  transition: opacity 150ms ease, transform 150ms ease; }
.logo-tip::after { content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-top-color: rgba(22, 28, 42, 0.94); }
.logo-tip.is-visible { opacity: 1; transform: translate(-50%, calc(-100% - 6px)); }
.clients__note { text-align: center; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--stone-soft); }

/* =========================================================================
   Integrations - clean brand glyphs in a centered row; gentle hover pop + tip
   ========================================================================= */
.integrations__head { max-width: 680px; margin-inline: auto; text-align: center; }
/* Centre the width-constrained heading + intro blocks within the centred head. */
.integrations__head .section-title,
.integrations__head .section-intro { margin-inline: auto; }
/* Accent the stand-out word - deep amber fill + heritage-gold gradient underline. */
.word-accent { position: relative; color: var(--amber); white-space: nowrap; }
.word-accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.16em;
  height: 0.1em; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber), var(--gold), var(--honey), var(--gold), var(--amber));
  background-size: 200% auto; animation: underline-flow 4s linear infinite; }

/* Looping gradient that flows left-to-right along the accent underlines (hero + integrations). */
@keyframes underline-flow {
  from { background-position: 200% center; }
  to   { background-position: 0% center; }
}
/* Fixed 9-column grid so all 27 logos land in a clean 3 x 9. Each item stretches to its
   cell and the logo is contained inside it, so wide wordmarks (SAP, MYOB) can't overflow. */
.integrations__grid { list-style: none; padding: 0; max-width: 1080px;
  margin: clamp(2.4rem, 1.5rem + 2.5vw, 3.6rem) auto 0;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); align-items: center;
  gap: clamp(1.7rem, 1.1rem + 1.7vw, 2.8rem) clamp(0.7rem, 0.3rem + 1vw, 1.4rem); }
.integration-item { display: flex; align-items: center; justify-content: center;
  min-width: 0; height: clamp(34px, 28px + 1.4vw, 48px);
  /* Idle float lives on the ITEM (not the icon) so the random shiver on the icon composes
     with it and never interrupts it - copied from the floating FileMaker logo's bob, and
     desynced per icon via its grid index (--i, set in main.js). */
  animation: integrationFloat 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.31s); }
.integration-item__img { display: block; height: 100%; width: auto; max-width: 100%;
  object-fit: contain; opacity: 0.85;
  transition: scale 240ms var(--ease-out), opacity 240ms var(--ease-out);
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
@keyframes integrationFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (hover: hover) and (pointer: fine) {
  .integration-item:hover .integration-item__img { scale: 1.12; opacity: 1; }
}
/* Random "shiver": one icon at a time scales up and shakes (triggered from main.js).
   The more-specific rule swaps the idle float for the shiver, then it reverts on end. */
.integration-item__img.is-shivering { animation: integrationShiver 0.7s var(--ease-out) both; }
@keyframes integrationShiver {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  12%  { transform: translateY(-3px) scale(1.22) rotate(-7deg); }
  28%  { transform: scale(1.2) rotate(6deg); }
  44%  { transform: scale(1.2) rotate(-5deg); }
  60%  { transform: scale(1.18) rotate(4deg); }
  76%  { transform: scale(1.12) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
/* Fewer columns as the row gets too tight for 9 across. */
@media (max-width: 900px) { .integrations__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 520px) { .integrations__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Reveal the icons one after another (a gentle left-to-right wave) instead of the
   whole grid landing at once. main.js indexes each item into --i; the grid's own
   reveal transform is neutralised so the items carry the motion. */
.js .integrations__grid.reveal { opacity: 1; transform: none; }
/* Fade the icons in (opacity only) so the entry never fights the idle float transform. */
.js .integrations__grid.reveal .integration-item { opacity: 0; }
.js .integrations__grid.reveal.is-visible .integration-item {
  opacity: 1;
  transition: opacity 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 30ms); }
@media (prefers-reduced-motion: reduce) {
  .js .integrations__grid.reveal .integration-item { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee.is-animated .marquee__track,
  .marquee--reverse.is-animated .marquee__track { animation: none; transform: none; }
}

/* =========================================================================
   Reveal animation (progressive enhancement)
   ========================================================================= */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out),
              filter var(--reveal-dur) var(--ease-out);
}

/* Hero "build up from blank" - the first view materialises (blur + rise) once the
   splash clears; the header eases down with it. (Reveals are held until fm-ready.) */
.js .hero .reveal { transform: translateY(26px); filter: blur(8px); }
.js .hero .reveal.is-visible { transform: none; filter: none; }

.js .site-header { opacity: 0; transform: translateY(-16px); }
.js.fm-ready .site-header { animation: headerIn 700ms var(--ease-out) 120ms both; }
@keyframes headerIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

/* "What we do" pillars get a more pronounced slide-up from below */
.js .services .section-title.reveal { transform: translateY(30px); }
.js .services .pillar.reveal { transform: translateY(52px); }
/* One snappy transition covers both the reveal (opacity/transform, staggered via
   transition-delay below) and the hover "pop" - otherwise the hover lift would be
   stuck at the slow ~820ms reveal speed and feel laggy. */
.js .services .pillar.reveal.is-visible {
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out),
              box-shadow 380ms var(--ease-out), background-color 380ms var(--ease-out),
              border-color 380ms var(--ease-out);
}

/* stagger via data-reveal-delay (1..6) */
.js .reveal[data-reveal-delay="1"].is-visible { transition-delay: 70ms; }
.js .reveal[data-reveal-delay="2"].is-visible { transition-delay: 140ms; }
.js .reveal[data-reveal-delay="3"].is-visible { transition-delay: 210ms; }
.js .reveal[data-reveal-delay="4"].is-visible { transition-delay: 280ms; }
.js .reveal[data-reveal-delay="5"].is-visible { transition-delay: 350ms; }
.js .reveal[data-reveal-delay="6"].is-visible { transition-delay: 420ms; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
  .split, .split--about, .contact__grid { grid-template-columns: 1fr; }
  /* Split has stacked to one column - drop the desktop top-offsets so there's no dead space. */
  .benefits, .industries, .license-points { margin-top: 0; }
  .footer__top { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .primary-nav, .site-header__actions { display: none; }
  .nav-toggle { display: flex; }
  .pillars, .platforms__grid, .process, .quotes { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .process__step { border-top-width: 1px; }
  .proof__inner { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Stacked: drop the desktop down-nudge and let the note use the full width. */
  .proof__body { margin-top: 0; max-width: none; }
}

@media (max-width: 560px) {
  .tiers, .plans, .benefits, .footer__nav { grid-template-columns: 1fr; }
  .benefits { gap: 1.4rem; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; }
  .quote blockquote { font-size: 1.18rem; }
}

/* =========================================================================
   Reduced motion - keep comprehension, drop movement
   ========================================================================= */
/* On small screens, swap frosted blur for opaque fills - cheaper to scroll, still floats */
@media (max-width: 680px) {
  .pillar, .tier, .industries, .contact-form, .btn--ghost,
  .btn--primary, .reviews__btn {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .pillar, .tier, .industries, .contact-form { background: rgba(255, 255, 255, 0.9); }
  /* No backdrop-filter on phones (perf) → give the glass buttons opaque fallbacks so the
     translucent tint never shows the raw busy background behind them. */
  .btn--ghost, .reviews__btn { background: rgba(255, 255, 255, 0.9); }
  .btn--primary { background: var(--gold); }
  .plan { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.09); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero .reveal { filter: none; }
  .js .site-header { opacity: 1; transform: none; }
  .hero__underline { transform: scaleX(1); }
  .btn:active { transform: none; }
  /* No scroll-scrubbing: the hero is a normal section showing a static cloud frame */
  .hero-track { height: auto; }
  .hero { position: static; }
}

/* =========================================================================
   Document / policy pages
   ========================================================================= */
/* ---------- Quick brand splash on entry ----------
   Softens the jump from the animated main page to a static document. Pure CSS
   (the doc pages carry no main.js): the logo eases in over the paper wash, the
   overlay dissolves, and the page rises beneath it - all inside ~0.9s. A tiny
   inline head script adds .doc-splash-skip after the first doc page per
   session, so hopping between policies stays snappy. */
.doc-splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--paper); pointer-events: none;
  animation: docSplashOut 450ms ease 400ms forwards; }
.doc-splash__logo { width: min(210px, 56vw); height: auto; opacity: 0;
  animation: docSplashLogo 380ms var(--ease-out) forwards; }
@keyframes docSplashLogo { from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; } }
@keyframes docSplashOut { to { opacity: 0; visibility: hidden; } }
/* Content eases in as the splash clears. The header animates opacity only -
   a transform would interfere with its position:sticky. */
.doc-splash ~ .doc-header { opacity: 0; animation: docFadeIn 500ms ease 300ms forwards; }
.doc-splash ~ .doc { opacity: 1; }
/* Smooth text settle on EVERY doc page load (eyebrow -> title -> lead -> body).
   Pure CSS (doc pages carry no JS). Runs regardless of the splash so each page
   animates. Two timings: on the first page this session the splash covers the
   content for ~0.85s, so the stagger is timed to emerge as the splash clears;
   on later pages (splash skipped) it starts quickly. */
.doc .shell > * { opacity: 0; animation: docRiseIn 600ms var(--ease-out) both; }
.doc .shell > *:nth-child(1) { animation-delay: 560ms; }
.doc .shell > *:nth-child(2) { animation-delay: 680ms; }
.doc .shell > *:nth-child(3) { animation-delay: 800ms; }
.doc .shell > *:nth-child(n+4) { animation-delay: 920ms; }
.doc-splash-skip .doc .shell > *:nth-child(1) { animation-delay: 90ms; }
.doc-splash-skip .doc .shell > *:nth-child(2) { animation-delay: 200ms; }
.doc-splash-skip .doc .shell > *:nth-child(3) { animation-delay: 310ms; }
.doc-splash-skip .doc .shell > *:nth-child(n+4) { animation-delay: 420ms; }
@keyframes docFadeIn { to { opacity: 1; } }
@keyframes docRiseIn { from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; } }
/* Splash shows once per session; hide it (and its header fade) on later pages. */
.doc-splash-skip .doc-splash { display: none; }
.doc-splash-skip .doc-splash ~ .doc-header { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .doc-splash { display: none; }
  .doc-splash ~ .doc-header { opacity: 1; animation: none; }
  .doc .shell > * { opacity: 1; animation: none; }
}

.doc-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 50;
  background: var(--paper); /* solid fallback for browsers without color-mix (Safari < 16.2) */
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line); }
.doc-header .shell { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.doc-header__back { display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--stone); text-decoration: none;
  transition: color 180ms ease; }
@media (hover: hover) { .doc-header__back:hover { color: var(--ink); } }

/* ---------- Breadcrumb trail ----------
   Sits at the top of the content column (left-aligned, under the logo - not in
   the sticky header). Static per page; mirrors the BreadcrumbList JSON-LD. */
.doc-crumbs { font-family: var(--font-mono); font-size: 0.8rem; margin-bottom: 1.6rem; }
.doc-crumbs ol { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.doc-crumbs li { display: inline-flex; align-items: center; color: var(--stone);
  min-width: 0; overflow-wrap: anywhere; }
.doc-crumbs li + li::before { content: "\203A"; margin-right: 0.5rem; color: var(--line-2); }
.doc-crumbs a { color: var(--stone); text-decoration: none; transition: color 180ms ease; }
@media (hover: hover) { .doc-crumbs a:hover { color: var(--ink); } }
.doc-crumbs [aria-current="page"] { color: var(--ink); }

.doc { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.doc .shell { max-width: 860px; }
.doc__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--bronze); margin-bottom: 1rem; }
.doc__eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.doc__title { font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.1rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 1rem; }
.doc__lead { font-size: var(--fs-lede); color: var(--stone); line-height: 1.6;
  margin-bottom: 2.2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.doc__body { font-size: 1.0625rem; line-height: 1.7; }
.doc__body h2 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); font-weight: 600;
  letter-spacing: -0.015em; color: var(--ink); margin: 2.4rem 0 0.85rem; }
.doc__body h3 { font-size: 1.08rem; font-weight: 600; color: var(--ink); margin: 1.7rem 0 0.5rem; }
.doc__body p { color: var(--stone); margin-bottom: 1.1rem; }
.doc__body strong { color: var(--ink); font-weight: 600; }
.doc__body ul { list-style: none; margin: 0 0 1.3rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.55rem; }
.doc__body li { position: relative; padding-left: 1.5rem; color: var(--stone); line-height: 1.6; }
.doc__body li::before { content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

.doc-footer { background: var(--ink); color: var(--stone-on-dark); padding-block: 2.5rem; margin-top: 3rem; }
.doc-footer .shell { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 1rem 1.5rem; }
.doc-footer__copy { font-family: var(--font-mono); font-size: 0.78rem; }
.doc-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.82rem; }
.doc-footer a { color: var(--stone-on-dark); text-decoration: none; transition: color 180ms ease; }
@media (hover: hover) { .doc-footer a:hover { color: var(--gold); } }

/* ---------- Document download link (call-to-action inside doc body) ---------- */
.doc__download { display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; color: var(--bronze);
  text-decoration: none; padding: 0.6rem 1.05rem; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); background: var(--s-1); transition: border-color 180ms ease, background 180ms ease; }
.doc__download::before { content: ""; width: 7px; height: 7px; background: var(--gold);
  transform: rotate(45deg); flex: none; }
@media (hover: hover) { .doc__download:hover { border-color: var(--gold); background: var(--gold-pale); } }

/* ---------- Resources listing (index of evergreen articles) ---------- */
.res-list { list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.85rem; }
.res-list li { padding: 0; } /* override .doc__body li dot/indent */
.res-list li::before { display: none; }
.res-item { display: block; padding: 1.3rem 1.5rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--s-1);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.res-item__title { display: flex; align-items: baseline; gap: 0.6rem;
  font-size: 1.1rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.res-item__title::after { content: "\2192"; margin-left: auto; color: var(--bronze);
  transition: transform 200ms var(--ease-out); }
.res-item__desc { margin: 0.4rem 0 0; color: var(--stone); font-size: 0.95rem; line-height: 1.55; }
@media (hover: hover) {
  .res-item:hover { border-color: var(--gold); background: var(--gold-pale); }
  .res-item:hover .res-item__title::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .res-item, .res-item__title::after { transition: none; }
}

/* ---------- Service Level Agreement - severity table ---------- */
.sla-table-wrap { margin: 1.9rem 0 2.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sla-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 660px; }
.sla-table thead th { background: var(--ink); color: var(--paper-on-dark);
  font-weight: 600; text-align: left; padding: 0.85rem 1rem; font-size: 0.88rem;
  letter-spacing: -0.005em; white-space: nowrap; }
.sla-table thead th:first-child { text-align: center; }
.sla-table th, .sla-table td { border-bottom: 1px solid var(--line);
  vertical-align: top; padding: 1.15rem 1rem; }
.sla-table tbody tr:last-child th, .sla-table tbody tr:last-child td { border-bottom: 0; }
.sla-table tbody tr:nth-child(even) { background: var(--s-1); }
.sla-table .sla-sev { text-align: center; font-weight: 600; color: var(--ink);
  white-space: nowrap; font-family: var(--font-mono); font-size: 0.9rem; }
.sla-table td { color: var(--stone); line-height: 1.55; }
.sla-table td strong { color: var(--ink); font-weight: 600; }
.sla-table ul { list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.38rem; }
.sla-table li { position: relative; padding-left: 1.1rem; color: var(--stone);
  line-height: 1.45; font-size: 0.9rem; }
.sla-table li::before { content: ""; position: absolute; left: 0; top: 0.5em;
  width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
.sla-table .sla-time { font-weight: 600; color: var(--ink); }
.sla-table .sla-detail { display: block; margin-top: 0.5rem; color: var(--stone); font-size: 0.9rem; }