/* Generated from src/design/tokens.mjs. Edit there, or in the admin design editor. */
:root {
  color-scheme: dark;
  --am-accent: #ff4c24;
  --am-accent-text: #ff6a47;
  --am-violet: #6e28c8;
  --am-on-accent: #ffffff;
  --am-bg: #0f0f0f;
  --am-surface: #000000;
  --am-surface-raised: #141414;
  --am-panel: rgba(0, 0, 0, 0.8);
  --am-card: #0c0c0c;
  --am-card-hover: #181818;
  --am-input: #0c0c0c;
  --am-frame: rgba(67, 65, 78, 0.2);
  --am-border: rgba(255, 255, 255, 0.12);
  --am-line: #272727;
  --am-line-faint: #161616;
  --am-dark-surface: #000000;
  --am-heading: #ededed;
  --am-title: #dcdcdc;
  --am-text: #cfcfcf;
  --am-muted: #9a9a9a;
  --am-control-bg: #dcdcdc;
  --am-control-fg: #111111;
  --am-button-hover-bg: #ff4c24;
  --am-button-hover-fg: #ffffff;
  --am-secondary-bg: #141414;
  --am-secondary-fg: #ededed;
  --am-font-body: Poppins, Verdana, sans-serif;
  --am-font-heading: Poppins, Verdana, sans-serif;
  --am-radius-panel: 40px;
  --am-radius-card: 20px;
  --am-radius-button: 100px;
  --am-radius-field: 10px;
  --am-rail: 6rem;
  --am-gap: 10px;
  --am-eye-white: #f7f8fb;
  --am-eye-iris-inner: #6e28c8;
  --am-eye-iris-outer: #ff4c24;
  --am-eye-shadow: 0.45;
  --am-marquee-seconds: 3;
  --am-hover-speed: 0.3s;
  --am-menu-roll-speed: 0.55s;
}
html[data-theme="light"] {
  color-scheme: light;
  --am-accent-text: #c9330f;
  --am-bg: #f4f4f4;
  --am-surface: #ffffff;
  --am-surface-raised: #f6f6f7;
  --am-panel: rgba(255, 255, 255, 0.88);
  --am-card: #f1f1f3;
  --am-card-hover: #e8e8eb;
  --am-input: #f1f1f3;
  --am-frame: rgba(206, 201, 201, 0.3);
  --am-border: rgba(0, 0, 0, 0.1);
  --am-line: #dedee2;
  --am-line-faint: #ececef;
  --am-heading: #1b1b1d;
  --am-title: #2c2c2c;
  --am-text: #474747;
  --am-muted: #666670;
  --am-control-bg: #1b1b1d;
  --am-control-fg: #ffffff;
  --am-secondary-bg: #f1f1f3;
  --am-secondary-fg: #1b1b1d;
  --am-eye-shadow: 0.16;
}

/* =========================================================================
   Admonk design system
   Loaded after the Webflow stylesheet on every page, so it can override it.
   1. Tokens (dark is the default; light is html[data-theme="light"])
   2. Webflow variables mapped onto the tokens
   3. Theme rules for the Webflow classes the old light/dark toggle restyled
   4. Layout: the frame grid
   5. Components: menu, logo marquee, eyes, portfolio
   ========================================================================= */

/* ---------- 1. Tokens: generated from src/design/tokens.mjs and prepended at build ---------- */

/* ---------- 2. Webflow variables follow the tokens ---------- */
:root,
html[data-theme="light"] {
  --typography-color--heading-white: var(--am-heading);
  --typography-color--title-white: var(--am-title);
  --typography-color--paragraph-white: var(--am-text);
  --text-white: var(--am-muted);
  --top-section-black: var(--am-surface);
  --background-color--body-black: var(--am-bg);
  --dark-boarders: var(--am-border);
  --typography-color--heading-black: var(--am-title);
  --typography-color--title-black: var(--am-title);
  --typography-color--paragraph-black: var(--am-muted);
  --typography-color--text-black: var(--am-muted);
  --background-color--boarders: var(--am-card);
  --background-color--hover-white: var(--am-card-hover);
  --background-color--body-white: var(--am-bg);
  --top-section-white: var(--am-surface);
}

/* ---------- 3. Theme rules ---------- */
html { background-color: var(--am-bg); }
body { font-family: var(--am-font-body); }
.heading, h1, h2, h3, h4, .title { font-family: var(--am-font-heading); }
.heading, h1, h2, h3, h4 { color: var(--am-heading) !important; }
.paragraph { color: var(--am-text) !important; }
.title, .text { color: var(--am-title) !important; }
.top-section:not(.is-faq) { background-color: var(--am-surface) !important; }
.frame { background-color: var(--am-frame) !important; transition: background-color .4s; }
.site-nav .button-frame { background-color: transparent !important; }

.black-background { display: block !important; opacity: 1 !important; }
.white-background { display: none !important; }
.gradient-black { display: block !important; }
.background-white { display: none !important; }
html[data-theme="light"] .black-background { display: none !important; }
html[data-theme="light"] .white-background { display: block !important; opacity: 1 !important; }
html[data-theme="light"] .gradient-black { display: none !important; }
html[data-theme="light"] .background-white { display: block !important; }

/* Theme toggle */
.mood-icon { background-color: var(--am-surface) !important; border-color: var(--am-border) !important; }
.mood-icon .sunny { display: block !important; }
.mood-icon .night { display: none !important; }
html[data-theme="light"] .mood-icon .sunny { display: none !important; }
html[data-theme="light"] .mood-icon .night { display: block !important; }

/* The logo is white artwork; darken it on light backgrounds. */
html[data-theme="light"] .logo-admonk,
html[data-theme="light"] .am-logo-icon { filter: invert(1); }

/* Text inside dark-by-design pieces (menu, footer, dark buttons) keeps light colours. */
html[data-theme="light"] ._141-menu-wrapper { --am-heading: #ededed; --am-title: #dcdcdc; --am-text: #cfcfcf; --typography-color--title-white: #dcdcdc; }
html[data-theme="light"] .site-footer .footer_wrapper { --am-heading: #ededed; --am-title: #dcdcdc; --am-text: #cfcfcf; }

/* ---------- 4. Frame grid ----------
   Equal side rails sized to the controls (logo icon left, menu and theme toggle right), a wider
   centre frame, and the sliding panels exactly as wide as the centre frame. */
@media screen and (min-width: 992px) {
  .custom-grid,
  .frame-stage {
    grid-template-columns: var(--am-rail) 1fr var(--am-rail) !important;
    grid-template-rows: var(--am-rail) 1fr var(--am-rail) !important;
    column-gap: var(--am-gap) !important;
    row-gap: var(--am-gap) !important;
  }
  .nav-container {
    grid-template-columns: var(--am-rail) 1fr var(--am-rail) !important;
    column-gap: var(--am-gap) !important;
    height: var(--am-rail) !important;
  }
  .site-nav .button-frame { padding: 0 !important; height: var(--am-rail) !important; }
  .site-nav .logo-brand,
  .site-nav .logo-brand.w--current { width: var(--am-rail) !important; height: var(--am-rail) !important; padding: 0 !important; display: flex !important; justify-content: center; align-items: center; }
  .site-nav .logo-admonk { display: none !important; }
  .am-logo-icon { display: block !important; width: 2.25rem; height: auto; }
  .top-section,
  .top-section.is-small { width: calc(100% - 2 * var(--am-rail) - 2 * var(--am-gap)) !important; max-width: none !important; }
  .mood-icon { right: calc(var(--am-rail) / 2 - 20px) !important; bottom: calc(var(--am-rail) / 2 - 20px) !important; left: auto !important; top: auto !important; }
  .frame._03 { padding-left: 0 !important; justify-content: center !important; }
}
.am-logo-icon { display: none; }

/* Open-menu button: a 60px circle that fits the rail (the "Menu" label made it a 150px pill). */
._141-open-button-wrapper { width: 60px !important; height: 60px !important; }
._141-open-button-wrapper .menu-button { padding: 0 !important; justify-content: center !important; }
._141-open-button-wrapper .menu-button-text,
._141-open-button-wrapper .button-background { display: none !important; }
._141-open-button-wrapper .icon-wrap { background-color: var(--am-control-bg) !important; }
._141-open-button-wrapper .menu-line { background-color: var(--am-control-fg) !important; }

/* ---------- 5. Components ---------- */

/* Menu: links left-aligned; the hover roll swaps the word for an orange copy with nothing peeking out. */
.menu-list { align-items: stretch !important; }
.menu-list-item { width: 100%; }
.menu-link { justify-content: flex-start !important; align-items: center !important; text-align: left !important; overflow: visible !important; }
.menu-link .eyebrow { flex: 0 0 2.2em; color: var(--am-muted) !important; }
.menu-link-heading { display: block; height: 1.15em !important; line-height: 1.15 !important; overflow: hidden !important; text-shadow: none !important; transform: none !important; }
.menu-link-heading .am-roll { display: block; text-shadow: 0 1.15em 0 var(--am-accent); transition: transform var(--am-menu-roll-speed) cubic-bezier(.65, .05, 0, 1); }
.menu-link:hover .menu-link-heading .am-roll,
.menu-link:focus-visible .menu-link-heading .am-roll { transform: translateY(-1.15em); }
.menu-link-bg { display: none !important; }
.menu-button.is-close .menu-button-text > div { transform: none !important; }
.menu-button.is-close .menu-button-text p { color: var(--am-control-fg) !important; opacity: 1 !important; margin: 0; }
.menu-button.is-close .button-background { background-color: var(--am-control-bg) !important; width: 100% !important; }
.menu-button.is-close .icon-wrap { background-color: transparent !important; }

/* Client logos: a seamless loop with no empty stretch. */
.am-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.am-marquee-track { display: flex; width: max-content; animation: am-marquee calc(var(--am-marquee-count, 12) * var(--am-marquee-seconds) * 1s) linear infinite; }
.am-marquee:hover .am-marquee-track { animation-play-state: paused; }
.am-marquee-group { display: flex; align-items: center; flex: none; }
.am-marquee-item { display: flex; justify-content: center; align-items: center; width: 140px; height: 80px; margin-right: 3rem; opacity: .75; transition: opacity var(--am-hover-speed); }
.am-marquee-item:hover { opacity: 1; }
/* Logos arrive in mixed greys; flatten them to one tone so they all read on the panel. */
.am-marquee-item img { max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
html[data-theme="light"] .am-marquee-item img { filter: brightness(0); }
@keyframes am-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .am-marquee-track { animation: none; } }

/* Eyes: glassy white eyeballs with a layered iris, pupil and catch-light. */
.dog-face_eyes, .dog-face_eye { overflow: visible !important; }
html[data-theme="light"] .dog-face_eye .eye-color { border-color: rgba(0, 0, 0, 0.06) !important; }
.dog-face_eye .eye-color {
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, var(--am-eye-white) 22%, color-mix(in srgb, var(--am-eye-white) 88%, #5a6078) 55%, color-mix(in srgb, var(--am-eye-white) 72%, #3c4258) 82%, color-mix(in srgb, var(--am-eye-white) 55%, #2a2f44) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 -14px 26px rgba(40, 30, 70, 0.35),
    inset 0 8px 16px rgba(255, 255, 255, 0.9),
    0 18px 40px rgba(0, 0, 0, var(--am-eye-shadow)),
    0 0 0 6px rgba(255, 255, 255, 0.04);
}
.dog-face_eye .eye-color::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 38% 24% at 32% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
}
.dog-face_pupil {
  width: 56px !important; height: 56px !important;
  background:
    radial-gradient(circle, transparent 0 30%, rgba(0, 0, 0, 0.35) 31% 33%, transparent 34%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.08) 0 4deg, rgba(0, 0, 0, 0.06) 4deg 9deg),
    radial-gradient(circle, color-mix(in srgb, var(--am-eye-iris-inner) 30%, #000) 0 30%, color-mix(in srgb, var(--am-eye-iris-inner) 70%, #000) 42%, var(--am-eye-iris-inner) 58%, var(--am-eye-iris-outer) 80%, color-mix(in srgb, var(--am-eye-iris-inner) 40%, #000) 94%);
  box-shadow: inset 0 0 0 2px rgba(20, 8, 40, 0.65), inset 0 -6px 10px rgba(0, 0, 0, 0.35);
}
.dog-face_pupil .eye {
  width: 22px !important; height: 22px !important; border: 0 !important; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b2b33 0, #050508 60%);
  position: relative;
}
.dog-face_pupil .eye::after {
  content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  top: 3px; left: 4px; background: rgba(255, 255, 255, 0.95); box-shadow: 10px 9px 0 -2px rgba(255, 255, 255, 0.5);
}

/* Portfolio: its own full-width section after the framed story. */
.am-portfolio { position: relative; z-index: 3; background: var(--am-bg); padding: 8rem 0 6rem; }
.am-portfolio-inner { width: min(100% - 2 * var(--am-rail), 110rem); margin: 0 auto; }
@media (max-width: 991px) { .am-portfolio { padding: 5rem 0 4rem; } .am-portfolio-inner { width: calc(100% - 2rem); } }
.am-portfolio-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3.5rem; }
.am-portfolio-head .am-eyebrow { color: var(--am-accent-text); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.am-portfolio-head h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .95; letter-spacing: -.04em; font-weight: 500; max-width: 14ch; }
.am-portfolio-head p { margin: 0; max-width: 34ch; color: var(--am-text); font-size: 1.1rem; }
.am-portfolio-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.am-case { grid-column: span 4; display: block; text-decoration: none; color: inherit; border-radius: var(--am-radius-card); overflow: hidden; background: var(--am-surface-raised); border: 1px solid var(--am-border); }
.am-case:nth-child(5n + 1), .am-case:nth-child(5n + 2) { grid-column: span 6; }
.am-case-media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--am-surface); }
.am-case:nth-child(5n + 1) .am-case-media, .am-case:nth-child(5n + 2) .am-case-media { aspect-ratio: 16 / 10; }
.am-case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
.am-case:hover .am-case-media img { transform: scale(1.05); }
.am-case-body { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1.25rem 1.5rem 1.5rem; }
.am-case-title { color: var(--am-heading); font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.am-case-meta { color: var(--am-muted); font-size: .9rem; margin-top: .35rem; }
.am-case-arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--am-border); color: var(--am-heading); transition: background .3s, color .3s, transform .3s; }
.am-case:hover .am-case-arrow { background: var(--am-accent); border-color: var(--am-accent); color: var(--am-on-accent); transform: rotate(-45deg); }
.am-portfolio-cta { display: flex; justify-content: center; margin-top: 3rem; }
.am-button { display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 1.75rem; border-radius: var(--am-radius-button); background: var(--am-control-bg); color: var(--am-control-fg); text-decoration: none; font-weight: 500; transition: background var(--am-hover-speed), color var(--am-hover-speed); }
.am-button:hover { background: var(--am-button-hover-bg); color: var(--am-button-hover-fg); }
@media (max-width: 991px) { .am-case, .am-case:nth-child(5n + 1), .am-case:nth-child(5n + 2) { grid-column: span 6; } }
@media (max-width: 767px) { .am-case, .am-case:nth-child(5n + 1), .am-case:nth-child(5n + 2) { grid-column: span 12; } }

/* ---------- 6. Light-mode fixes for pieces with hard-coded dark colours ---------- */

/* Pieces that stay dark in both themes: the FAQ panel and the footer (kept exactly as designed). */
.top-section.is-faq,
.footer_component,
._141-menu-wrapper {
  --am-surface: var(--am-dark-surface);
  --am-surface-raised: #141414;
  --am-border: rgba(255, 255, 255, 0.12);
  --am-heading: #ededed;
  --am-title: #dcdcdc;
  --am-text: #cfcfcf;
  --am-muted: #9a9a9a;
  --typography-color--title-white: #dcdcdc;
  --typography-color--heading-white: #ededed;
  --typography-color--paragraph-white: #cfcfcf;
  --top-section-black: var(--am-dark-surface);
  --am-card: #0c0c0c; --am-card-hover: #181818; --am-input: #0c0c0c; --am-line: #272727; --am-line-faint: #161616;
  --am-muted: #9a9a9a; --am-accent-text: #ff6a47; --am-control-bg: #dcdcdc; --am-control-fg: #111111;
  --am-secondary-bg: #141414; --am-secondary-fg: #ededed;
  --typography-color--paragraph-black: #9a9a9a; --background-color--boarders: #0c0c0c;
  color-scheme: dark;
}
html[data-theme="light"] .footer_component { background-color: var(--am-dark-surface) !important; }
html[data-theme="light"] .footer_component .logo-admonk,
html[data-theme="light"] .footer_component img { filter: none !important; }

/* Image cards: labels sit on the photo, so they stay white. */
.flipper-card-front .title { color: #ffffff !important; }

/* Buttons */
.button-3 { background-color: var(--am-control-bg) !important; color: var(--am-control-fg) !important; border-radius: var(--am-radius-button) !important; transition: background-color var(--am-hover-speed), color var(--am-hover-speed) !important; }
.button-3:hover { background-color: var(--am-button-hover-bg) !important; color: var(--am-button-hover-fg) !important; }
.button-3 .text, .button-3 div { color: inherit !important; }
.button-3 .arrow img { filter: none; }
html[data-theme="light"] .button-3 .arrow img { filter: invert(1); }
.button-4.is-dark { background-color: var(--am-secondary-bg) !important; color: var(--am-secondary-fg) !important; border: 1px solid var(--am-border); border-radius: var(--am-radius-button) !important; }
.button-4.is-dark .text, .button-4.is-dark div { color: inherit !important; }
html[data-theme="light"] .button-4.is-dark .arrow img { filter: invert(1); }

/* Orbit of tool logos */
html[data-theme="light"] .works-circle-xl,
html[data-theme="light"] .works-circle-l,
html[data-theme="light"] .works-circle-m,
html[data-theme="light"] .works-circle-s { background-color: rgba(110, 40, 200, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: none !important; }
html[data-theme="light"] .works-logo { border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 24px 24px rgba(0, 0, 0, 0.06) !important; }
html[data-theme="light"] .works-logo-wrap { background-color: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; }
html[data-theme="light"] .works-circle-logo { background-color: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; }

html[data-theme="light"] .am-marquee-item { opacity: .6; }
html[data-theme="light"] .am-marquee-item:hover { opacity: 1; }
/* Orbit centre: Webflow's dark glass disc, lightened for light mode. */
html[data-theme="light"] .div-block-902 { background-color: rgba(255, 255, 255, 0.92) !important; box-shadow: 0 20px 40px rgba(40, 20, 80, 0.12); }

/* ---------- 7. Tablet and phone ---------- */
@media screen and (max-width: 991px) {
  /* The mobile bar replaces the desktop nav; Webflow showed both, the desktop one blurred behind. */
  .site-nav .nav-container { display: none !important; }
  /* Thin side rails so the centre frame gets the width; the top row clears the mobile bar. */
  .custom-grid,
  .frame-stage {
    grid-template-columns: 12px 1fr 12px !important;
    grid-template-rows: 72px 1fr 56px !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }
  .top-section,
  .top-section.is-small,
  .top-section.is-faq { width: calc(100% - 40px) !important; border-radius: 28px !important; }
  .navigation-mobile { background-color: color-mix(in srgb, var(--am-bg) 70%, transparent) !important; }
  html[data-theme="light"] .navigation-mobile .nav-logo img { filter: invert(1); }
  .flipper-card-backside { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
}
@media screen and (max-width: 767px) {
  .collection-list-27 { grid-template-columns: 1fr !important; }
  .flipper-wrapper-main { height: 220px !important; }
  .dog-face_eyes { width: 300px !important; height: 170px !important; }
  .dog-face_eye, .dog-face_eye.right { width: 110px !important; height: 110px !important; }
  .dog-head_wrapper { width: 100% !important; transform: none !important; }
  .dog-face_eyes { display: flex !important; justify-content: center; align-items: center; gap: 24px; overflow: visible !important; max-width: 100%; transform: none !important; margin: 0 auto; }
  .dog-face_eye, .dog-face_eye.right { position: relative !important; inset: auto !important; }
  .top-section.is-faq .grid { grid-template-columns: 1fr !important; }
  .dog-face_pupil { width: 44px !important; height: 44px !important; }
  .dog-face_pupil .eye { width: 18px !important; height: 18px !important; }
}

/* ---------- 8. Filled-in template pieces ---------- */
.am-chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.am-chip { display: inline-flex; align-items: center; padding: .45rem .9rem; border-radius: var(--am-radius-button); border: 1px solid var(--am-border); color: var(--am-title); text-decoration: none; font-size: .9rem; transition: border-color .3s, color .3s; }
.am-chip:hover { border-color: var(--am-accent); color: var(--am-accent-text); }
.solution-tools a.icon-wrapper { text-decoration: none; }
.am-card-link { display: block; color: inherit; text-decoration: none; }
.am-card-link:hover .title { color: var(--am-accent) !important; }
img.am-hero-icon { width: min(60%, 18rem) !important; height: auto !important; margin: auto; display: block; object-fit: contain; }

/* Studio "How we think" Venn: the filled Strategy circle was white under light text. */
.div-block-864.is-01 { background-color: rgba(255, 255, 255, 0.07) !important; }
html[data-theme="light"] .div-block-864.is-01 { background-color: rgba(0, 0, 0, 0.05) !important; }

/* ---------- 9. Inner pages: panels, cards, labels and forms follow the theme ----------
   Webflow hard-coded these dark, so in light mode they kept black boxes under dark text. */
.page-content, .page-content.is-small { background-color: var(--am-panel) !important; border-radius: var(--am-radius-panel) !important; }
.services-wrap, .services-wrap.is-deliverable { background-color: var(--am-card) !important; border-color: var(--am-border) !important; border-radius: var(--am-radius-card) !important; color: var(--am-muted) !important; transition: background-color var(--am-hover-speed); }
.services-wrap:hover { background-color: var(--am-card-hover) !important; }
.contact-block { background-color: var(--am-card) !important; border-color: var(--am-border) !important; border-radius: var(--am-radius-card) !important; }
.content-wrapper.is-black { background-color: var(--am-surface) !important; }
.lable { background-color: var(--am-card) !important; border-color: var(--am-border) !important; color: var(--am-title) !important; }
.text-field, .text-field.is-large { background-color: var(--am-input) !important; border-color: var(--am-border) !important; color: var(--am-heading) !important; border-radius: var(--am-radius-field) !important; }
.text-field::placeholder { color: var(--am-muted) !important; }
.line.is-dark { background-color: var(--am-line) !important; }
.line-animation { background-color: var(--am-line-faint) !important; }
.text.is-custom { color: var(--am-muted); }
/* The big gradient numbers fade from secondary text to heading colour in either theme. */
.text.is-large { background-image: linear-gradient(90deg, var(--am-muted) 47%, var(--am-heading)) !important; }
/* Blog article body and tables */
.w-richtext, .w-richtext p, .w-richtext li { color: var(--am-text); }
.w-richtext a { color: var(--am-accent-text); }
.w-richtext table { border-collapse: collapse; width: 100%; }
.w-richtext th, .w-richtext td { border: 1px solid var(--am-border); padding: .6rem .8rem; color: var(--am-text); text-align: left; }
.w-richtext th { color: var(--am-heading); background: var(--am-card); }
.form-wrapper { background-color: var(--am-card) !important; border-radius: var(--am-radius-card); }
/* "Learn more" text links: Webflow made them white with a white arrow. */
.link.is-white { color: var(--am-heading) !important; }
html[data-theme="light"] .link.is-white .arrow-icon img { filter: invert(1); }
/* White-only icons (Notion logo, white arrows) would vanish on light surfaces. */
html[data-theme="light"] :is(.page-content, .top-section:not(.is-faq), .am-portfolio, .wf-port-cards) img[src*="white"] { filter: invert(1); }