:root {
  --color-primary: #306bdf;
  --color-primary-hover: #1f4fb0;
  --color-secondary: #4e89fd;
  --color-secondary-hover: #306bdf;
  --color-accent: #4e89fd;
  --color-accent-hover: #1d4ed8;
  --color-text: #121921;
  --color-text-muted: #4a5666;
  --color-surface: #f1f6ff;
  --color-background: #ffffff;
  --color-border: #dde2eb;
  --font-heading: "Host Grotesk", Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}

/* Custom CSS for Amplus Agency
 * Extended design tokens + component primitives.
 *
 * ACCESSIBILITY CONTRACT (all ratios measured, not estimated):
 *   --color-primary   #306bdf  on #ffffff = 4.89:1  AA  (actions, links, body-size blue)
 *   --color-secondary #4e89fd  on #ffffff = 3.32:1  AA-LARGE ONLY
 *       ^ identity blue. Legal for =24px/=19px-bold display type, icons,
 *         borders and fills ONLY. NEVER use for body text or button fills.
 *   --color-text      #121921  on #ffffff = 17.70:1 AAA
 *   --color-text-muted#4a5666  on #ffffff = 7.46:1  AAA
 *   --color-primary   #306bdf  on #f1f6ff = 4.51:1  AA
 *   --color-text-muted#4a5666  on #f1f6ff = 6.88:1  AA
 *   #ffffff on --ink-deep #001234 = 18.48:1 AAA
 *   --blue-200 #a8c3ff on --ink-deep = 10.49:1 AAA  (links on dark sections)
 */

.wpc-theme-amplus,
:root {
  /* ---- Extended blue ramp (derived from the brand plus-mark blue) ---- */
  --blue-50:  #f1f6ff;
  --blue-100: #dde9ff;
  --blue-200: #a8c3ff;
  --blue-400: #4e89fd;  /* identity blue  */
  --blue-500: #306bdf;  /* action blue    */
  --blue-600: #1f4fb0;  /* action hover   */
  --ink-deep: #001234;  /* dark sections / AI Tech */
  --ink:      #121921;
  --ink-muted:#4a5666;
  --surface-alt: #f7f9fc;
  --on-dark:  #ffffff;
  --on-dark-muted: #b8c6dd;

  /* ---- Type scale: 1.250 major third, fluid via clamp ---- */
  --text-eyebrow:   0.8125rem;                        /* 13px, +0.08em, uppercase */
  --text-xs:        0.875rem;                         /* 14 */
  --text-sm:        1rem;                             /* 16 — body default */
  --text-md:        1.125rem;                         /* 18 — lead */
  --text-lg:        clamp(1.25rem, 1.6vw, 1.5rem);    /* 20 → 24  h4 */
  --text-xl:        clamp(1.5rem,  2.2vw, 1.75rem);   /* 24 → 28  h3 */
  --text-2xl:       clamp(1.875rem,3.0vw, 2.25rem);   /* 30 → 36  h2 */
  --text-3xl:       clamp(2.25rem, 4.2vw, 2.875rem);  /* 36 → 46  h1 */
  --text-display:   clamp(2.75rem, 6.0vw, 4.5rem);    /* 44 → 72  hero */

  --leading-tight: 1.06;
  --leading-snug:  1.18;
  --leading-body:  1.65;
  --tracking-tight:-0.025em;
  --tracking-wide:  0.08em;

  /* ---- Spacing grid: 4px base, 8px rhythm ---- */
  --space-3xl: 6rem;    /* 96  section padding desktop */
  --space-4xl: 8rem;    /* 128 hero padding desktop    */
  --gutter:    1.5rem;
  --maxw:      75rem;   /* 1200 content container */
  --maxw-prose:42rem;   /* 672  reading measure   */

  /* ---- Elevation: blue-tinted, never neutral grey ---- */
  --shadow-sm: 0 1px 2px rgba(18,25,33,.06);
  --shadow-md: 0 4px 16px rgba(18,25,33,.08);
  --shadow-lg: 0 12px 32px rgba(48,107,223,.14);
  --focus-ring:0 0 0 3px rgba(78,137,253,.45);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-std: cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   MOTION PRINCIPLES
   1. One reveal per section — never stagger a whole page.
   2. Reveal = opacity 0→1 + translateY(12px→0), --dur-base, --ease-out.
   3. Stagger siblings by 60ms, capped at 4 items.
   4. Hover = transform/shadow only. Never animate layout or colour-shift text.
   5. Motion is decoration. Nothing is only discoverable through it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-blocked: auto !important;
  }
}

/* ---- Focus: visible on every interactive element, always ---- */
.wpc-theme-amplus :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Skip link ---- */
.amp-skip {
  position: absolute; left: -9999px;
  background: var(--ink-deep); color: var(--on-dark);
  padding: var(--space-md) var(--space-lg);
  z-index: 999; border-radius: 0 0 var(--radius-md) 0;
}
.amp-skip:focus { left: 0; top: 0; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.amp-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.amp-section   { padding-block: var(--space-3xl); }
.amp-section--tight { padding-block: var(--space-2xl); }
.amp-section--dark  { background: var(--ink-deep); color: var(--on-dark); }
.amp-section--tint  { background: var(--blue-50); }
.amp-prose     { max-width: var(--maxw-prose); }

@media (max-width: 834px) { .amp-section { padding-block: var(--space-2xl); } }

/* ---- Eyebrow label: the system's signature small-type treatment ---- */
.amp-eyebrow {
  font: 600 var(--text-eyebrow)/1.4 var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue-500);
  display: inline-flex; align-items: center; gap: var(--space-sm);
}
.amp-section--dark .amp-eyebrow { color: var(--blue-200); }
/* The leading "+" mark was removed 2026-11-09 at the owner's request —
   eyebrows are plain text site-wide. */

/* ---- Headings ---- */
/* `color` is declared explicitly on every heading primitive on purpose.
   The parent theme (Divi) styles `h1..h6 { color: #333 }` directly, and a
   directly-matched rule always beats an inherited colour no matter how
   specific the ancestor is — so relying on `color` from a wrapper leaves
   dark grey headings on dark sections. */
.amp-display { font: 700 var(--text-display)/var(--leading-tight) var(--font-heading); letter-spacing: var(--tracking-tight); margin: 0; color: var(--ink); }
.amp-h1 { font: 700 var(--text-3xl)/var(--leading-snug) var(--font-heading); letter-spacing: var(--tracking-tight); margin: 0; color: var(--ink); }
.amp-h2 { font: 700 var(--text-2xl)/var(--leading-snug) var(--font-heading); letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.amp-h3 { font: 600 var(--text-xl)/1.25 var(--font-heading); margin: 0; color: var(--ink); }
.amp-h4 { font: 600 var(--text-lg)/1.35 var(--font-heading); margin: 0; color: var(--ink); }
.amp-section--dark :is(.amp-display, .amp-h1, .amp-h2, .amp-h3, .amp-h4) { color: var(--on-dark); }
.amp-lead { font: 400 var(--text-md)/var(--leading-body) var(--font-body); color: var(--ink-muted); margin: 0; }
.amp-section--dark .amp-lead { color: var(--on-dark-muted); }

/* ============================================================
   BUTTON — REMOVED 2026-10-16
   ------------------------------------------------------------
   The .amp-btn primitive lived here: a 10px-radius Inter 600 button. It had
   drifted from the design and was replaced by the single button component
   ported from Figma 4:506, which is defined further down this file as .abtn
   and wrapped by the `abutton` EWB component.

   There is now exactly one button in the system. Use:
     {{ component('abutton', { label: '…', href: '…', variant: '…' }) }}
   in widgets, or the raw .abtn / .abtn--* classes in core Gutenberg blocks.

   Old class  new:
     .amp-btn--primary         .abtn--brand            (blue fill)
     .amp-btn--secondary       .abtn--secondary        (outlined, light bg)
     .amp-section--dark …      .abtn--secondary-light  (outlined, dark bg)
     .amp-btn--lg              .abtn--lg
     .amp-btn--block           width:100% at the call site
     .amp-btn__arrow           the component's `icon` prop (Lucide)
   ============================================================ */

/* ============================================================
   CARDS
   ============================================================ */
.amp-card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-xl);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  height: 100%; display: flex; flex-direction: column; gap: var(--space-md);
}
.amp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue-200); }

/* Service card — icon in a tinted tile, title, 1-line value prop, pillar tag */
.amp-service-card__icon {
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-500);
  border-radius: var(--radius-md);
}
.amp-service-card:hover .amp-service-card__icon { background: var(--blue-500); color: #fff; }

/* Case study card — 16:9 media, metric overlay, client + industry tag */
.amp-case-card { padding: 0; overflow: hidden; }
.amp-case-card__media { aspect-ratio: 16/9; overflow: hidden; background: var(--blue-50); }
.amp-case-card__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out); }
.amp-case-card:hover .amp-case-card__media img { transform: scale(1.04); }
.amp-case-card__body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }

/* Stat block — the proof primitive */
.amp-stat__value {
  font: 700 var(--text-3xl)/1 var(--font-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--blue-500);
  display: block;
}
.amp-section--dark .amp-stat__value { color: var(--blue-200); }
.amp-stat__label { font: 400 var(--text-xs)/1.5 var(--font-body); color: var(--ink-muted); }
.amp-section--dark .amp-stat__label { color: var(--on-dark-muted); }

/* Testimonial */
.amp-quote { font: 400 var(--text-lg)/1.5 var(--font-heading); color: var(--ink); margin: 0; }
.amp-quote__mark { color: var(--blue-400); font-size: 2.5rem; line-height: 0; vertical-align: -0.25em; }
.amp-quote__person { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.amp-quote__avatar { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); object-fit: cover; }

/* Tag / badge */
.amp-tag {
  display: inline-block; font: 600 var(--text-eyebrow)/1 var(--font-body);
  letter-spacing: .02em; padding: .375rem .625rem;
  border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600);
}

/* CTA band */
.amp-cta-band { background: var(--ink-deep); color: var(--on-dark); border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-xl); text-align: center;
  background-image: radial-gradient(circle at 20% 0%, rgba(78,137,253,.22), transparent 55%); }

/* Grid helper */
.amp-grid { display: grid; gap: var(--space-lg); }
.amp-grid--2 { grid-template-columns: repeat(2,1fr); }
.amp-grid--3 { grid-template-columns: repeat(3,1fr); }
.amp-grid--4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 834px) { .amp-grid--3, .amp-grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .amp-grid--2, .amp-grid--3, .amp-grid--4 { grid-template-columns: 1fr; } }

/* ============================================================
   EFFECTS LAYER  (2026-10 — "bells & whistles" homepage demo)
   ------------------------------------------------------------
   Opt-in only. Nothing here changes an element that does not
   carry an .amp-fx-* / .amp-reveal class, so the conservative
   MOTION PRINCIPLES above still govern the rest of the site.
   Every effect degrades to a static layout under
   prefers-reduced-motion (handled globally at line ~79 plus the
   explicit guards below).
   ============================================================ */
.wpc-theme-amplus,
:root {
  /* Immersive dark surfaces — a deeper ramp than --ink-deep alone,
     so stacked dark sections read as distinct planes. */
  --ink-900: #000b1f;
  --ink-800: #001234;   /* == --ink-deep, named for the ramp */
  --ink-700: #04193f;
  --ink-600: #0b2350;
  --hairline-dark: rgba(168,195,255,.14);

  /* --teal-400 removed 2026-11-09 at the owner's request; every use now
     points at --blue-200 (#a8c3ff). */

  --dur-xslow: 900ms;
  --ease-spring: cubic-bezier(.22,1.4,.36,1);
  --ease-smooth: cubic-bezier(.65,0,.35,1);
}

/* ============================================================
   BUTTON — ported from Figma "Amplus Web", component set 4:506
   ------------------------------------------------------------
   8 variants x 3 sizes x 3 states x icon left/right/none.
   Shape is a pill (999px) in every variant; type is Host Grotesk 500.
   Icons are Lucide (arrow-left / arrow-right in the source file).

   This is the ONLY button in the system. The legacy .amp-btn primitive that
   used to sit above the CARDS block was removed on 2026-10-16.

   ---- CONTRAST DEVIATION, READ BEFORE "FIXING" ----
   Figma paints Brand and Link with the identity blue #4E89FD. White on
   #4E89FD is 3.32:1, and #4E89FD on white is also 3.32:1 — both fail WCAG
   AA for this component's type sizes (20/18/16px at weight 500 all need
   4.5:1; the large-text exemption starts at 24px regular / 18.66px bold).
   This site's standing rule is that #4E89FD is for the plus mark, icons and
   display type 24px+ only, and #306BDF (4.89:1) is the action colour.
   So --abtn-brand ships as #306BDF. To restore the Figma value exactly,
   change the two lines marked FIGMA-EXACT below and accept the AA failure.
   ============================================================ */
.wpc-theme-amplus,
:root {
  --abtn-ink:            #121921;  /* Primary bg, Secondary border + label  */
  --abtn-ink-hover:      #000000;  /* Primary hover bg                      */
  --abtn-brand:          #306bdf;  /* FIGMA-EXACT: #4E89FD (fails AA)       */
  --abtn-brand-hover:    #3a74e6;  /* FIGMA-EXACT: #3A74E6                  */
  --abtn-light:          #ffffff;  /* Light bg, Secondary Light border      */
  --abtn-light-hover:    #f7f7f7;  /* Light hover bg                        */
  --abtn-disabled:       #d5d7da;  /* Disabled bg / border, every variant   */
  --abtn-disabled-dark:  rgba(227,230,235,.24); /* Disabled border on dark  */
}

.abtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std);
}
.abtn:focus-visible { outline: 2px solid var(--abtn-brand); outline-offset: 3px; }

/* ---- Sizes (height / padding-x / font-size / line-height) ---- */
.abtn--lg { height: 60px; padding: 0 32px; font-size: 20px; line-height: 28px; }
.abtn--md { height: 52px; padding: 0 24px; font-size: 18px; line-height: 26px; }
.abtn--sm { height: 40px; padding: 0 20px; font-size: 16px; line-height: 22px; }
.abtn--lg .abtn__icon { width: 24px; height: 24px; }
.abtn--md .abtn__icon { width: 20px; height: 20px; }
.abtn--sm .abtn__icon { width: 16px; height: 16px; }
/* Icons follow the label. stroke/fill are restated rather than left to the
   inline attributes so a global `svg { fill: … }` elsewhere on the site cannot
   break the link between icon colour and text colour. */
.abtn__icon {
  flex: 0 0 auto;
  display: block;
  stroke: currentColor;
  fill: none;
}
/* The Amplus brand mark is a filled shape, not a stroked one, so it needs the
   opposite pair. Still currentColor on both, so it tracks the label. */
.abtn__icon--fill {
  fill: currentColor;
  stroke: none;
}

/* ---- Filled variants ---- */
.abtn--primary { background: var(--abtn-ink);   color: var(--abtn-light); }
.abtn--primary:hover { background: var(--abtn-ink-hover); }
.abtn--brand   { background: var(--abtn-brand); color: var(--abtn-light); }
.abtn--brand:hover { background: var(--abtn-brand-hover); }
.abtn--light   { background: var(--abtn-light); color: var(--abtn-ink); }
.abtn--light:hover { background: var(--abtn-light-hover); }

/* ---- Outlined variants ----
   Figma thickens the border 1px  2px on hover. Done with an inset shadow
   rather than border-width so the button does not shift by a pixel. */
.abtn--secondary { background: transparent; color: var(--abtn-ink); border-color: var(--abtn-ink); }
.abtn--secondary:hover { box-shadow: inset 0 0 0 1px var(--abtn-ink); }
.abtn--secondary-light { background: transparent; color: var(--abtn-light); border-color: var(--abtn-light); }
.abtn--secondary-light:hover { box-shadow: inset 0 0 0 1px var(--abtn-light); }

/* ---- Link variants (no fill, no border, tighter box) ---- */
.abtn--link,
.abtn--link-light,
.abtn--link-dark { height: auto; padding: 4px 0; background: none; border-color: transparent; }
.abtn--link       { color: var(--abtn-brand); }
.abtn--link:hover { color: var(--abtn-brand-hover); }
.abtn--link-light       { color: var(--abtn-light); }
.abtn--link-light:hover { color: var(--abtn-light-hover); }
.abtn--link-dark        { color: var(--abtn-ink); }
.abtn--link-dark:hover  { color: var(--abtn-brand-hover); }

/* ---- Disabled: one rule for every variant ----
   WCAG 1.4.3 exempts inactive controls from the contrast minimum, which is
   why #FFF on #D5D7DA is allowed to stand as the design has it. */
.abtn[disabled],
.abtn[aria-disabled="true"] { pointer-events: none; }
.abtn--primary[aria-disabled="true"],
.abtn--brand[aria-disabled="true"],
.abtn--light[aria-disabled="true"] { background: var(--abtn-disabled); color: var(--abtn-light); }
.abtn--secondary[aria-disabled="true"] { border-color: var(--abtn-disabled); color: var(--abtn-disabled); }
.abtn--secondary-light[aria-disabled="true"] { border-color: var(--abtn-disabled-dark); color: var(--abtn-disabled-dark); }

@media (prefers-reduced-motion: reduce) { .abtn { transition: none; } }

/* ---- Scroll reveal: the workhorse ------------------------------ */
/* Gated on .amp-js (set synchronously by the effects engine) so that with
   JS off or broken the content is simply VISIBLE rather than stuck at
   opacity 0. :where() keeps specificity at (0,1,0), so the --left/--right/
   --zoom modifiers below still override the base transform as before. */
:where(.amp-js) .amp-reveal {
  opacity: 0;
  transform: translate3d(0, var(--amp-reveal-y, 22px), 0) scale(var(--amp-reveal-s, 1));
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-xslow) var(--ease-out);
  transition-delay: var(--amp-delay, 0ms);
  will-change: opacity, transform;
}
.amp-reveal.is-in { opacity: 1; transform: none; }
.amp-reveal--left  { --amp-reveal-y: 0; transform: translate3d(-32px,0,0); }
.amp-reveal--right { --amp-reveal-y: 0; transform: translate3d(32px,0,0); }
.amp-reveal--zoom  { --amp-reveal-s: .94; }
.amp-reveal--blur  { filter: blur(10px); transition: opacity var(--dur-slow) var(--ease-out),
                       transform var(--dur-xslow) var(--ease-out), filter var(--dur-xslow) var(--ease-out); }
.amp-reveal--blur.is-in { filter: blur(0); }

/* Stagger: set --i on each child, no per-child CSS needed */
.amp-stagger  * { --amp-delay: calc(var(--i, 0) * 70ms); }

/* ---- Kinetic headline: per-word mask reveal --------------------
   No `display` here on purpose — the class is applied to h1/h2/span
   alike and must not override the element's own layout. */
.amp-kinetic .amp-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;   /* room for descenders inside the mask */
  margin-bottom: -.08em;
}
.amp-kinetic .amp-word  span {
  display: inline-block;
  transition: transform 820ms var(--ease-out);
  transition-delay: calc(var(--w, 0) * 55ms);
}
/* Same JS gate as .amp-reveal — words must not hide without JS to show them. */
:where(.amp-js) .amp-kinetic .amp-word  span { transform: translateY(110%) rotate(3deg); }
.amp-kinetic.is-in .amp-word  span { transform: none; }

/* ---- Gradient / shimmer text ---------------------------------- */
/* Readable solid colour FIRST. The transparent text-fill only ever applies
   where background-clip:text is actually supported — otherwise `color:
   transparent` would make the headline invisible rather than merely unstyled. */
.amp-fx-gradient-text { color: var(--blue-200); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .amp-fx-gradient-text {
    /* Every stop is a light tint, so the text stays =7:1 on the dark
       sections at any point in the shimmer cycle. */
    background: linear-gradient(94deg, #fff 0%, var(--blue-200) 46%, var(--blue-200) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: amp-shimmer 11s var(--ease-smooth) infinite;
  }
}
@keyframes amp-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ---- Aurora / gradient-mesh backdrop -------------------------- */
.amp-fx-aurora { position: absolute; inset: -20%; pointer-events: none; z-index: 0; filter: blur(70px); opacity: .62; }
.amp-fx-aurora span {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen;
  animation: amp-drift var(--d, 26s) var(--ease-smooth) infinite alternate;
  animation-delay: var(--ad, 0s);
}
@keyframes amp-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  33%  { transform: translate3d(6vw,-4vh,0) scale(1.18); }
  66%  { transform: translate3d(-5vw,5vh,0) scale(.92); }
  100% { transform: translate3d(3vw,3vh,0) scale(1.1); }
}

/* ---- Film grain: kills gradient banding on big dark fields ---- */
.amp-fx-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(https://amplusagency.com/%23n)'/%3E%3C/svg%3E");
}

/* ---- Spotlight: follows the pointer via --mx/--my -------------- */
.amp-fx-spotlight { position: relative; isolation: isolate; }
.amp-fx-spotlight::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-std);
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
              rgba(78,137,253,.16), transparent 62%);
}
.amp-fx-spotlight:hover::before, .amp-fx-spotlight:focus-within::before { opacity: 1; }

/* Animated conic border, drawn only on hover */
.amp-fx-glow-border { position: relative; }
.amp-fx-glow-border::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--amp-angle,0deg), transparent 0 55%,
              var(--blue-400) 72%, var(--blue-200) 85%, transparent 92%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-std);
  animation: amp-spin 4s linear infinite;
}
.amp-fx-glow-border:hover::after { opacity: 1; }
@property --amp-angle { syntax: ""; initial-value: 0deg; inherits: false; }
@keyframes amp-spin { to { --amp-angle: 360deg; } }

/* ---- 3D tilt (JS writes --rx/--ry) ---------------------------- */
.amp-fx-tilt { transform-style: preserve-3d; transition: transform var(--dur-base) var(--ease-out); }
.amp-fx-tilt-inner {
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform var(--dur-base) var(--ease-out);
  transform-style: preserve-3d;
}
.amp-fx-tilt__lift { transform: translateZ(38px); }

/* ---- Magnetic button (JS writes --tx/--ty) -------------------- */
.amp-fx-magnetic { transform: translate3d(var(--tx,0),var(--ty,0),0); transition: transform 260ms var(--ease-spring); }

/* ---- Infinite marquee ---------------------------------------- */
.amp-fx-marquee { overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.amp-fx-marquee__track { display: flex; width: max-content; animation: amp-marquee var(--mq-dur,42s) linear infinite; }
.amp-fx-marquee:hover .amp-fx-marquee__track { animation-play-state: paused; }
.amp-fx-marquee--reverse .amp-fx-marquee__track { animation-direction: reverse; }
@keyframes amp-marquee { to { transform: translate3d(-50%,0,0); } }

/* ---- Scroll progress bar ------------------------------------- */
.amp-fx-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999;
  transform-origin: 0 50%; transform: scaleX(var(--p,0));
  background: linear-gradient(90deg, var(--blue-500), var(--blue-400), var(--blue-200));
}

/* ---- Marker / underline accent on headings ------------------- */
.amp-fx-underline { position: relative; white-space: nowrap; }
.amp-fx-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .5em; z-index: -1;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-200));
  opacity: .28; border-radius: var(--radius-sm);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 700ms var(--ease-out) 320ms;
}
.is-in .amp-fx-underline::after, .amp-fx-underline.is-in::after { transform: scaleX(1); }

/* ---- Sticky scrollytelling ---------------------------------- */
.amp-sticky-wrap { position: relative; }
.amp-sticky-pane { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }

/* ---- Reduced motion: hard stop for the JS-free effects ------- */
@media (prefers-reduced-motion: reduce) {
  .amp-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .amp-kinetic .amp-word  span { transform: none !important; }
  .amp-fx-aurora, .amp-fx-grain::after { animation: none !important; }
  .amp-fx-marquee__track { animation: none !important; }
  .amp-fx-gradient-text { animation: none !important; }
  .amp-fx-underline::after { transform: scaleX(1) !important; }
  .amp-sticky-pane { position: relative; height: auto; }
}

/* ---- Mobile gutter: 20px side padding on phones (owner's spec) ---------
   Every widget and the header/footer read their side padding from
   --gutter, so this one override sets it site-wide. */
@media (max-width: 767px) {
  .wpc-theme-amplus,
  :root { --gutter: 20px; }
}

/* ============================================================
   TEXT COLOUR HIERARCHY  (2026-11-09, owner's request)
   ------------------------------------------------------------
   Four levels, one set per background. Values set by the owner
   2026-11-09. These are standalone tokens: the older --color-text-muted
   / --on-dark-muted keep their own values and are not affected.
   Dark-set levels are white at an opacity, so they adapt to whichever
   dark surface they sit on. Contrast measured:
     light  primary   #121921 on #ffffff 17.70:1  AAA
            secondary #36383b on #ffffff 11.76:1  AAA
            tertiary  #5f6368 on #ffffff  6.05:1, on #f1f6ff 5.58:1  AA
     dark   secondary #fff 70% on #001234  9.29:1  AAA
            tertiary  #fff 50% on #001234  5.25:1  AA
   ============================================================ */
.wpc-theme-amplus,
:root {
  /* On light backgrounds */
  --color-text-primary:   #121921;                  /* headings, body        */
  --color-text-secondary: #36383b;                  /* subtitles, lead text  */
  --color-text-tertiary:  #5f6368;                  /* captions, meta, hints */
  --color-text-accent:    var(--color-primary);     /* links, highlights     */

  /* On dark backgrounds */
  --color-text-on-dark-primary:   rgba(255, 255, 255, 1);
  --color-text-on-dark-secondary: rgba(255, 255, 255, .7);
  --color-text-on-dark-tertiary:  rgba(255, 255, 255, .5);
  --color-text-on-dark-accent:    var(--color-accent);  /* #4e89fd, 5.56:1 on #001234 */
}