/* ==========================================================================
   fuggidigital.com
   Multi-page marketing site. Plain CSS, no build step.
   Design: rebuild of the original WordPress/Elementor ("Nal" theme) site.
   Palette: off-white page, charcoal bands, the logo's teal-to-lavender
   gradient as the only accent. Light and dark themes.
   Type: Archivo Expanded (display, uppercase), Montserrat (text).

   Sections
     1. Fonts            9. Dark intro band
     2. Theme tokens    10. Marquee strip
     3. Base            11. Mission card
     4. Layout          12. Services list
     5. Header + nav    13. CTA band
     6. Theme toggle    14. Inner pages
     7. Buttons + links 15. Contact form
     8. Hero            16. Footer
                        17. Preferences (motion, forced colors, print)
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, subset to Latin) ---------- */

/* Archivo variable: weights 100-900, widths 62-125%. Used at 125% width. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* Montserrat variable: body copy, nav and labels. */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Theme tokens ----------
   Contrast ratios (WCAG 2.2 AA) are noted beside each text color and are
   listed in TESTING.md. Light is the default; dark applies when the OS
   prefers dark and the visitor hasn't picked light, or when the toggle
   sets data-theme="dark" on <html> (see theme.js). */
:root {
  /* Brand constants (same in both themes) */
  --teal: #62e0da;          /* logo ring, top */
  --lavender: #b294cc;      /* logo ring bottom and the "." */
  --charcoal: #212121;      /* logo "FUGGI", button labels */
  --grad: linear-gradient(90deg, var(--teal), var(--lavender));
  --grad-diag: linear-gradient(135deg, var(--teal), var(--lavender));

  /* Page */
  --bg: #eff1f3;            /* page background */
  --surface: #ffffff;       /* cards, form */
  --field: #eff1f3;         /* input background */
  --text: #212121;          /* 14.2:1 on --bg */
  --text-2: #3a3d42;        /* long-form copy, 10.0:1 on --bg */
  --muted: #5c6168;         /* 5.5:1 on --bg, 6.2:1 on --surface */
  --line: #212121;          /* services list rules */
  --hairline: rgb(33 33 33 / 0.12);
  --focus: #0e7671;         /* focus ring, 4.8:1 on --bg (non-text needs 3:1) */
  --outline: #0e7671;       /* outlined display words, 4.8:1 on --bg */
  /* Gradient text on the page background: darkened ends, both >= 4.8:1 */
  --grad-text: linear-gradient(90deg, #0e7671, #74519a);
  --header-bg: rgb(239 241 243 / 0.92);
  --shadow: rgb(33 33 33 / 0.45);
  --ok: #0e7671;            /* 5.1:1 on white */
  --error: #b42318;         /* 6.6:1 on white */

  /* Dark bands (intro, mission card, CTA, footer) */
  --band: #212121;
  --band-text: #ffffff;
  --band-muted: #a9adb3;    /* 7.1:1 on --band */
  --band-line: rgb(255 255 255 / 0.14);
  --band-focus: var(--teal);/* 10.1:1 on --band */

  /* Type */
  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --display-stretch: 125%;
  --font-body: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Layout */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --radius: 999px;
  --header-h: 88px;

  color-scheme: light;
}

/* Dark palette. Repeated for the OS preference and for the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121314;
    --surface: #1c1d1f;
    --field: #121314;
    --text: #eff1f3;        /* 16.4:1 on --bg */
    --text-2: #d3d6da;      /* 12.9:1 on --bg */
    --muted: #a9adb3;       /* 8.3:1 on --bg, 7.5:1 on --surface */
    --line: #eff1f3;
    --hairline: rgb(239 241 243 / 0.14);
    --focus: var(--teal);   /* 11.7:1 on --bg */
    --outline: var(--teal);
    --grad-text: var(--grad);/* teal 11.7:1, lavender 7.1:1 on --bg */
    --header-bg: rgb(18 19 20 / 0.9);
    --shadow: rgb(0 0 0 / 0.7);
    --ok: #5fd4cf;          /* 9.5:1 on --surface */
    --error: #ff8a80;       /* 7.4:1 on --surface */
    --band: #1c1d1f;
    --band-line: rgb(255 255 255 / 0.12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121314;
  --surface: #1c1d1f;
  --field: #121314;
  --text: #eff1f3;
  --text-2: #d3d6da;
  --muted: #a9adb3;
  --line: #eff1f3;
  --hairline: rgb(239 241 243 / 0.14);
  --focus: var(--teal);
  --outline: var(--teal);
  --grad-text: var(--grad);
  --header-bg: rgb(18 19 20 / 0.9);
  --shadow: rgb(0 0 0 / 0.7);
  --ok: #5fd4cf;
  --error: #ff8a80;
  --band: #1c1d1f;
  --band-line: rgb(255 255 255 / 0.12);
  color-scheme: dark;
}

/* ---------- 3. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

/* Visible keyboard focus everywhere; dark bands swap to teal. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.section--dark :focus-visible,
.site-footer :focus-visible,
.mission :focus-visible {
  outline-color: var(--band-focus);
}

/* Hidden until focused, so keyboard users can jump past the header. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--text);
  color: var(--bg);
  border-radius: 6px;
  font-weight: 700;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 12px;
}

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

/* Gradient definitions referenced by inline SVG strokes. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- 4. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(64px, 10vw, 128px) 0;
}
.section--flush-top {
  padding-top: 0;
}
.section--tight-top {
  padding-top: clamp(32px, 5vw, 64px);
}

.section--dark {
  background: var(--band);
  color: var(--band-text);
}
/* Thin rule where two dark bands meet (e.g. growth list, then CTA). */
.section--dark + .section--dark {
  border-top: 1px solid var(--band-line);
}

/* Heading block above a section's content. */
.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}
.section-head h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
}
.section-head p {
  color: var(--band-muted);
}

/* Small uppercase label above headings ("OUR MISSION" etc.). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--grad);
}

/* Outlined display text: the hollow "INNOVATE" / "STRATEGIZE" look. */
/* Stroke uses the accent teal: --outline is 4.8:1 on the light page and
   bright teal on dark backgrounds, so outlines read as color, not gray. */
.outline {
  color: var(--outline);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
}
.section--dark .outline,
.site-footer .outline {
  color: var(--teal);
}

/* Gradient-filled words. On the page background they use the darkened
   --grad-text (AA in light mode); on dark bands the bright brand gradient. */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section--dark .grad-text,
.mission .grad-text {
  background-image: var(--grad);
}

/* ---------- 5. Header + navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}

/* Wordmark: live text plus three offset gradient rings, like the logo art.
   FUGGI (bold) + lavender square dot + "digital" (outlined). Text colors
   follow the theme, so one mark works in light, dark and on dark bands. */
.logo {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  flex: none;
  padding: 0.6em 0 0.6em 0.5em;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.logo__ring {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.1em;
  height: 2.1em;
  transform: translateY(-50%);
  pointer-events: none;
}
.logo__ring svg {
  width: 100%;
  height: 100%;
}
.logo__fuggi {
  position: relative;
  font-weight: 800;
}
.logo__dot {
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  margin: 0 0.05em 0 0.04em;
  background: var(--lavender);
}
.logo__digital {
  font-weight: 500;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px currentColor;
}
/* Footer: larger, on the dark band. */
.logo--footer {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  color: var(--band-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav ul {
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav ul a {
  position: relative;
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 0;
}

/* Gradient underline that grows on hover and marks the current page. */
.nav ul a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav ul a:hover::after,
.nav ul a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Header "Let's Talk" pill keeps its own padding. */
.nav .btn {
  padding: 0 28px;
  min-width: 148px;
}

/* Mobile menu toggle: "MENU" plus the offset double line from the original. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0 4px;
  font: 600 0.8125rem/1 var(--font-body);
  letter-spacing: 0.16em;
  color: var(--text);
  cursor: pointer;
}
.menu-toggle .bars {
  position: relative;
  width: 40px;
  height: 10px;
}
.menu-toggle .bars::before,
.menu-toggle .bars::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 30px;
  background: currentColor;
  transition: transform 0.25s ease, width 0.25s ease;
}
.menu-toggle .bars::before {
  top: 0;
  left: 0;
}
.menu-toggle .bars::after {
  bottom: 0;
  right: 0;
}
.menu-toggle[aria-expanded="true"] .bars::before {
  transform: translateY(4px) rotate(12deg);
  width: 40px;
}
.menu-toggle[aria-expanded="true"] .bars::after {
  transform: translateY(-4px) rotate(-12deg);
  width: 40px;
}

@media (max-width: 960px) {
  :root {
    --header-h: 76px;
  }
  .brand {
    /* Scales with the screen so the wordmark, theme button and MENU always fit. */
    font-size: clamp(1.125rem, 5.2vw, 1.5rem);
  }
  .menu-toggle {
    display: inline-flex;
  }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    display: none;
  }
  .nav.is-open {
    display: flex;
  }
  .nav ul {
    flex-direction: column;
    gap: 0;
  }
  .nav ul a {
    display: block;
    padding: 14px 0;
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--hairline);
  }
  .nav ul a::after {
    bottom: -1px;
  }
  .nav .btn {
    margin-top: 22px;
    align-self: flex-start;
  }
}

@media (max-width: 380px) {
  .brand {
    font-size: 1.25rem;
  }
  .menu-toggle .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* ---------- 6. Theme toggle ----------
   44px round button; shows a moon in light mode and a sun in dark mode.
   aria-pressed="true" means dark mode is on. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  cursor: pointer;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover {
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle[aria-pressed="true"] .icon-sun {
  display: block;
}
.theme-toggle[aria-pressed="true"] .icon-moon {
  display: none;
}

/* ---------- 7. Buttons + links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--radius);
  border: 0;
  font: 700 0.8125rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
}
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Primary: brand gradient, charcoal label (10.1:1 on teal, 6.1:1 on lavender). */
.btn--primary {
  background: linear-gradient(90deg, var(--teal), var(--lavender), var(--teal));
  background-size: 200% 100%;
  color: var(--charcoal);
}
.btn--primary:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgb(98 224 218 / 0.8);
}

/* Secondary: outlined pill in the current text color. */
.btn--ghost {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--ghost:hover {
  background: var(--teal);
  color: var(--charcoal);
  box-shadow: inset 0 0 0 1.5px var(--teal);
}

/* Inline text links get a gradient underline. */
.text-link {
  text-decoration: none;
  background: var(--grad) left bottom / 100% 2px no-repeat;
  padding-bottom: 2px;
  font-weight: 600;
}
.text-link:hover {
  background-size: 100% 100%;
  color: var(--charcoal);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- 8. Hero ---------- */
.hero {
  padding: clamp(48px, 8vw, 112px) 0 clamp(56px, 8vw, 104px);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(1.75rem, 3.1vw, 2.875rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.lede {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--muted);
  max-width: 34em;
  margin-bottom: 30px;
}

/* CREATE / INNOVATE / STRATEGIZE / REVOLUTIONIZE stack from the original. */
.word-stack {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  /* Rows size from the column width so REVOLUTIONIZE always fits. */
  container-type: inline-size;
  min-width: 0;
}
.word-stack .row {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0.12em 0;
  font-size: clamp(1.625rem, 7.6cqi, 4.25rem);
}
.word-stack .row--right {
  justify-content: flex-end;
}

/* Starburst beside INNOVATE, drawn in the brand gradient. */
.starburst {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* Checklist under STRATEGIZE (open circles, like the original). */
.word-stack ul {
  margin: 0.5em 0 0.6em;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-stretch: normal;
  font-weight: 500;
  text-transform: none;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0;
}
.word-stack li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.word-stack li::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
  .word-stack {
    margin-top: 8px;
  }
}

/* ---------- 9. Dark intro band ---------- */
.intro .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.intro h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
}
.intro p {
  color: var(--band-muted);
  font-size: 1.0625rem;
}
.intro .tagline {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 700;
  color: var(--band-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Concentric offset rings around the F mark (replaces the stock photo). */
.rings {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 460px);
  margin: 0 auto;
}
.rings svg {
  width: 100%;
  height: 100%;
}
.rings img {
  position: absolute;
  inset: 30%;
  width: 40%;
  height: 40%;
  object-fit: contain;
}
@media (max-width: 900px) {
  .intro .wrap {
    grid-template-columns: 1fr;
  }
  .rings {
    width: min(78%, 360px);
  }
}

/* ---------- 10. Marquee strip ----------
   Moves with page scroll (scroll-driven animation), so nothing moves on its
   own (WCAG 2.2.2). Browsers without scroll timelines show it static. */
.marquee {
  padding: 28px 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.15;
  white-space: nowrap;
  user-select: none;
}
.marquee .track {
  display: flex;
  width: max-content;
}
.marquee .track--reverse {
  transform: translateX(-30%);
}
.marquee span {
  padding-right: 0.45em;
}
@supports (animation-timeline: view()) {
  .marquee .track {
    animation: marquee-scroll linear both;
    animation-timeline: view();
  }
  .marquee .track--reverse {
    animation-name: marquee-scroll-reverse;
  }
  .starburst {
    animation: spin linear both;
    animation-timeline: scroll(root);
  }
}

/* ---------- 11. Mission card ---------- */
.mission {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--band);
  color: var(--band-text);
  padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: center;
}
:root[data-theme="dark"] .mission {
  box-shadow: inset 0 0 0 1px var(--band-line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mission { box-shadow: inset 0 0 0 1px var(--band-line); }
}
.mission h2 {
  font-size: clamp(1.875rem, 4vw, 3.25rem);
}
.mission p {
  color: var(--band-muted);
}
.mission p strong {
  color: var(--band-text);
}

/* Three proof points along the bottom of the mission card. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--band-line);
}
.stats b {
  display: block;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  line-height: 1;
  margin-bottom: 6px;
}
.stats span {
  display: block;
  font-size: 0.8125rem;
  color: var(--band-muted);
  line-height: 1.4;
}
.mission .glow {
  width: 100%;
  max-width: 340px;
  justify-self: center;
}
@media (max-width: 900px) {
  .mission {
    grid-template-columns: 1fr;
  }
  .mission .glow {
    max-width: 200px;
    order: -1;
  }
}
@media (max-width: 480px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* ---------- 12. Services list ---------- */
.services h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.service-list li {
  border: 1px solid var(--line);
  border-top: 0;
}
.service-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 44px;
  align-items: center;
  gap: 28px;
  padding: 26px clamp(18px, 3vw, 34px);
  text-decoration: none;
  position: relative;
  isolation: isolate;
}

/* Gradient wash that slides in on hover / focus; text switches to charcoal. */
.service-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service-list a:hover,
.service-list a:focus-visible {
  color: var(--charcoal);
}
.service-list a:hover::before,
.service-list a:focus-visible::before {
  transform: scaleX(1);
}
.service-list h3 {
  font-family: var(--font-body);
  font-stretch: normal;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.service-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.service-list a:hover p,
.service-list a:focus-visible p {
  color: var(--charcoal);
}

/* Skewed tile: the parallelogram shape of the original photo thumbnails. */
.tile {
  width: 128px;
  height: 64px;
  transform: skewX(-18deg);
  background: var(--charcoal);
  display: grid;
  place-items: center;
}
.tile svg {
  width: 30px;
  height: 30px;
  transform: skewX(18deg);
  stroke: url(#brand-grad);
}
.arrow {
  width: 34px;
  height: 34px;
  justify-self: end;
  transition: transform 0.25s ease;
}
.service-list a:hover .arrow {
  transform: translate(3px, 3px);
}
@media (max-width: 700px) {
  .service-list a {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 16px;
  }
  .tile {
    display: none;
  }
}

/* ---------- 13. CTA band ---------- */
.cta {
  text-align: center;
}
.cta h2 {
  font-size: clamp(1.75rem, 4.4vw, 3.5rem);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cta p {
  color: var(--band-muted);
  max-width: 36em;
  margin: 0 auto 30px;
}
.cta .actions {
  justify-content: center;
}

/* ---------- 14. Inner pages ---------- */
.page-hero {
  padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 72px);
}
.page-hero--tall {
  min-height: 50vh;
}
.page-hero h1 {
  font-size: clamp(1.75rem, 6vw, 5rem);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.page-hero .lede {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  max-width: 40em;
  margin: 0;
}
.page-hero .lede + .btn {
  margin-top: 28px;
}

/* Keep brand names in their real case inside uppercase headings. */
.nocaps {
  text-transform: none;
}

/* Package cards on Solutions. */
.packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.package {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 34px 28px 30px;
}
.package--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-diag) border-box;
  box-shadow: 0 24px 48px -28px var(--shadow);
}
.package .num {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--muted);
}
.package h3 {
  font-size: 1.75rem;
  margin: 6px 0 4px;
}
.package .fit {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.package .desc {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-2);
  padding-top: 18px;
  margin-bottom: 26px;
  border-top: 1px solid var(--hairline);
}
.note {
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.9375rem;
}
@media (max-width: 960px) {
  .packages {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
}

/* Website design: intro copy beside a grid of what every site includes. */
.web {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.web h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
}
.web .intro-copy p {
  color: var(--text-2);
}
.web .intro-copy .btn {
  margin-top: 12px;
}
.web-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.web-list li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 22px 22px 20px;
}
/* Short gradient bar across the top of each card. */
.web-list li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 36px;
  height: 3px;
  background: var(--grad);
}
.web-list h3 {
  font-family: var(--font-body);
  font-stretch: normal;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 6px 0 6px;
}
.web-list p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 900px) {
  .web {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .web-list {
    grid-template-columns: 1fr;
  }
}

/* Ultimate Marketing Growth Package: numbered list on a dark band. */
.growth {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 88px);
}
.growth h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
}
.growth .intro-copy p {
  color: var(--band-muted);
}
.growth .intro-copy .btn {
  margin-top: 12px;
}
.growth ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: g;
}
.growth li {
  counter-increment: g;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  padding: 22px 0;
  border-top: 1px solid var(--band-line);
}
.growth li::before {
  content: "0" counter(g);
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--teal);
  padding-top: 3px;
}
.growth h3 {
  font-family: var(--font-body);
  font-stretch: normal;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.growth li p {
  color: var(--band-muted);
  margin: 0;
  font-size: 0.9375rem;
}
@media (max-width: 900px) {
  .growth {
    grid-template-columns: 1fr;
  }
}

/* About: two-column copy, then team cards. */
.prose {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 6vw, 88px);
}
.prose h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.6rem);
}
.prose p {
  font-size: 1.0625rem;
  color: var(--text-2);
}
@media (max-width: 900px) {
  .prose {
    grid-template-columns: 1fr;
  }
}

/* Capability chips (social, SEO, email...). */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--muted);
}

.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: clamp(22px, 4vw, 48px);
}
.team figure {
  margin: 0;
}
.team .photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: #2a2a2a;
}
.team .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.4s ease, transform 0.6s ease;
}
.team .photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--grad);
}
.team figure:hover img {
  filter: none;
  transform: scale(1.03);
}
.team figcaption {
  padding-top: 16px;
}
.team figcaption b {
  display: block;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.375rem;
}
.team figcaption span {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--band-muted);
}
@media (max-width: 640px) {
  .team {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
}

/* ---------- 15. Contact page + form ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.contact .details p {
  color: var(--text-2);
  font-size: 1.0625rem;
}
.phone {
  display: inline-block;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.1;
  margin: 6px 0 22px;
}
.phone small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-stretch: normal;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  background: var(--surface);
  border-radius: 6px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 30px 60px -40px var(--shadow);
}
.field {
  display: grid;
  gap: 8px;
  align-content: start;
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.field .optional {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}
.field input,
.field textarea {
  width: 100%;
  font: 500 1rem/1.5 var(--font-body);
  color: var(--text);
  background: var(--field);
  border: 1.5px solid var(--muted);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 0.2s, background 0.2s;
}
.field textarea {
  min-height: 160px;
  resize: vertical;
}
.field input:hover,
.field textarea:hover {
  border-color: var(--text);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.field [aria-invalid="true"] {
  border-color: var(--error);
}
.field__error {
  margin: 0;
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 600;
}
.field__error[hidden] {
  display: none;
}

/* Honeypot: off-screen for people and hidden from assistive tech. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.form__status {
  margin: 0;
  font-weight: 600;
}
.form__status:empty {
  display: none;
}
.form__status--success {
  color: var(--ok);
}
.form__status--error {
  color: var(--error);
}
@media (max-width: 900px) {
  .contact {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .form {
    grid-template-columns: 1fr;
  }
}

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--band);
  color: var(--band-text);
  padding: 64px 0 40px;
  border-top: 1px solid var(--band-line);
}
.site-footer .top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--band-line);
}
.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer nav a,
.contact-line a {
  display: inline-block;
  padding: 8px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--band-muted);
}
.site-footer nav a:hover,
.contact-line a:hover {
  color: var(--teal);
}
.site-footer .bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  font-size: 0.8125rem;
  color: var(--band-muted);
  letter-spacing: 0.06em;
}
.copyright__link {
  text-decoration: none;
}
.copyright__link:hover {
  color: var(--teal);
}

/* Round "Back to top" badge from the original footer. */
.to-top {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--charcoal);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}
.to-top:hover {
  background: var(--grad-diag);
  transform: translateY(-3px);
}

/* ---------- 17. Preferences ---------- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-35%); }
}
@keyframes marquee-scroll-reverse {
  from { transform: translateX(-35%); }
  to { transform: translateX(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Elements fade up once as they scroll into view (main.js adds .is-visible).
   Hidden only when JavaScript has run, so content shows without it. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .marquee .track,
  .starburst { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Windows High Contrast / forced colors: drop gradients and fills that
   would vanish, keep shapes visible with system colors. */
@media (forced-colors: active) {
  .grad-text,
  .section--dark .grad-text,
  .mission .grad-text {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .outline { -webkit-text-stroke-color: CanvasText; }
  .eyebrow::before,
  .web-list li::before,
  .team .photo::after,
  .nav ul a::after { background: CanvasText; }
  .btn,
  .theme-toggle,
  .to-top { border: 2px solid ButtonText; }
  .service-list a::before { display: none; }
  .field input,
  .field textarea { border: 1px solid CanvasText; }
  .starburst,
  .rings svg,
  .logo__ring svg,
  .tile svg { stroke: CanvasText; }
  .logo__dot { background: CanvasText; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header,
  .site-footer,
  .marquee,
  .cta,
  .form,
  .theme-toggle,
  .word-stack { display: none; }
  .section--dark,
  .mission { background: none; color: #000; }
  .grad-text { background: none; color: #000; -webkit-text-fill-color: #000; }
  .js .reveal { opacity: 1; transform: none; }
}